.dubpack-player{
  --dp-blue:#3aa8e8;
  --dp-blue-dark:#2f8ec9;
  --dp-bg-a:#eaf5fd;
  --dp-bg-b:#ffffff;
  --dp-card-border:#bfe0f7;
  --dp-text:#1c2733;
  --dp-muted:#7c8b98;
  --dp-line:#d8ecfa;
  --dp-video-h:auto;
  all:initial;
  display:block;
  box-sizing:border-box;
  font-family:'Segoe UI',Arial,sans-serif;
  max-width:760px;
  margin:0 auto;
}
.dubpack-player *{box-sizing:border-box;font-family:inherit}
.dubpack-player .dp-loading{padding:40px;text-align:center;color:var(--dp-muted)}

.dp-card{
  background:linear-gradient(160deg,var(--dp-bg-a) 0%,var(--dp-bg-b) 55%,var(--dp-bg-a) 100%);
  border:2px solid var(--dp-blue);
  border-radius:26px;
  padding:14px;
  box-shadow:0 8px 24px rgba(58,168,232,.12);
}

.dp-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:4px 6px 14px;gap:10px;
}
.dp-badge-pill{
  background:#fff;color:var(--dp-text);font-weight:800;font-size:12px;letter-spacing:.03em;
  border-radius:999px;padding:9px 16px;box-shadow:0 1px 3px rgba(0,0,0,.08);
  white-space:nowrap;border:none;
}
.dp-topbar .dp-title{
  font-size:16px;font-weight:800;color:var(--dp-text);text-align:center;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dp-topbar .dp-right{display:flex;gap:8px;flex-shrink:0}
.dp-iconbtn{
  width:38px;height:38px;border-radius:12px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:#e7eef3;color:#4a5a68;font-size:16px;
}
.dp-iconbtn.dp-mic{background:var(--dp-blue);color:#fff}
.dp-iconbtn.dp-mic.on{background:#e5484d}
.dp-iconbtn:hover{filter:brightness(1.05)}

.dp-screen{
  position:relative;background:#0a0a0a;border-radius:16px;overflow:hidden;
  border:2px solid var(--dp-blue);min-height:260px;display:flex;align-items:center;justify-content:center;
}
.dp-screen video{display:block;width:100%;height:auto;max-height:440px;object-fit:contain;background:#000;margin:0 auto}
.dp-screen video::-webkit-media-controls,
.dp-screen video::-webkit-media-controls-enclosure,
.dp-screen video::-webkit-media-controls-panel,
.dp-screen video::-webkit-media-controls-start-playback-button,
.dp-screen video::-internal-media-controls-overlay-cast-button{
  display:none !important;
  -webkit-appearance:none;
}
.dp-screen-overlay-top{
  position:absolute;top:14px;left:0;right:0;display:flex;justify-content:center;gap:10px;z-index:2;
}
.dp-oval-btn{
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,26,32,.65);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.dp-oval-btn:hover{background:rgba(20,26,32,.85)}
.dp-play-overlay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,26,32,.55);color:#fff;font-size:22px;
  display:flex;align-items:center;justify-content:center;padding-left:4px;
  transition:opacity .15s, transform .15s;
}
.dp-play-overlay:hover{background:rgba(20,26,32,.75);transform:translate(-50%,-50%) scale(1.06)}
.dp-play-overlay.dp-hidden{opacity:0;pointer-events:none}
.dp-caption-overlay{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;
  background:rgba(15,18,22,.82);color:#fff;font-weight:700;font-size:15px;
  padding:9px 18px;border-radius:10px;max-width:88%;text-align:center;line-height:1.3;
}

.dp-bottombar{
  display:flex;align-items:center;gap:12px;padding:16px 4px 6px;flex-wrap:wrap;
}
.dp-clip-label{
  flex-shrink:0;text-align:left;
}
.dp-clip-label .dp-clip-tag{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--dp-blue-dark)}
.dp-clip-label .dp-clip-num{display:block;font-size:15px;font-weight:800;color:var(--dp-text)}

.dp-wave-box{
  flex:1 1 200px;min-width:160px;background:#fff;border:1px solid var(--dp-line);border-radius:12px;
  padding:8px 12px;position:relative;
}
.dp-wave-tags{display:flex;justify-content:space-between;margin-bottom:2px}
.dp-wave-tags span{font-size:9px;font-weight:800;letter-spacing:.06em;color:var(--dp-blue-dark);background:var(--dp-bg-a);border:1px solid var(--dp-line);border-radius:5px;padding:1px 6px}
.dp-wave-box canvas{width:100%;height:40px;display:block}

.dp-actions{display:flex;gap:8px;flex-wrap:wrap}
.dp-actions button{
  background:#fff;border:1px solid var(--dp-line);color:var(--dp-text);
  border-radius:12px;padding:10px 16px;font-size:12px;font-weight:800;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;
}
.dp-actions button:hover{border-color:var(--dp-blue)}
.dp-actions button:disabled{opacity:.4;cursor:not-allowed}
.dp-actions button.dp-primary{background:var(--dp-blue);border-color:var(--dp-blue);color:#fff}
.dp-actions button.dp-primary.on{background:#e5484d;border-color:#e5484d}
.dp-actions button.dp-primary:hover{background:var(--dp-blue-dark)}

.dp-status{
  display:flex;align-items:center;gap:8px;padding:12px 8px 4px;font-size:12.5px;color:var(--dp-muted);
}
.dp-status .dp-dot{width:7px;height:7px;border-radius:50%;background:var(--dp-blue);flex-shrink:0}
.dp-status.dp-rec .dp-dot{background:#e5484d}

.dp-footnote{
  text-align:center;font-size:12px;color:var(--dp-muted);
  margin-top:10px;padding:10px 14px;
  background:var(--dp-bg-a);border:1px solid var(--dp-line);border-radius:12px;
}