/* Amo Dramas — legenda customizavel (overlay proprio + painel de ajustes). */
/* overlay: renderizado por cc.js a partir dos cues do <track> (modo hidden). */
.cc-cap{position:absolute;left:0;right:0;bottom:var(--cc-pos,12%);display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 5%;pointer-events:none;z-index:7;text-align:center}
.cc-txt{display:inline-block;font-size:var(--cc-size,18px);line-height:1.32;color:var(--cc-color,#fff);background:var(--cc-bg,rgba(0,0,0,.55));padding:.12em .5em;border-radius:6px;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.9);max-width:100%;word-wrap:break-word}
/* painel */
.cc-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center;background:rgba(4,6,10,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cc-modal[hidden]{display:none}
.cc-sheet{width:100%;max-width:430px;background:#14161d;border:1px solid #262a35;border-radius:18px 18px 0 0;padding:16px 18px 22px;box-shadow:0 -20px 60px rgba(0,0,0,.55)}
@media(min-width:760px){.cc-modal{align-items:center}.cc-sheet{border-radius:18px}}
.cc-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cc-hd b{font-size:16px;color:#fff}
.cc-x{background:none;border:0;color:#aeb6c2;font-size:27px;line-height:1;cursor:pointer;padding:0 4px}
.cc-prev{display:flex;align-items:center;justify-content:center;min-height:80px;border-radius:12px;margin-bottom:14px;padding:10px;background:repeating-conic-gradient(#20242e 0% 25%,#171a21 0% 50%) 50%/22px 22px}
.cc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:12px 0;color:#c6cedb;font-size:14px;font-weight:600}
.cc-row.cc-col{flex-direction:column;align-items:flex-start;gap:10px}
.cc-row>span{flex:0 0 auto;min-width:64px}
.cc-row input[type=range]{flex:1;accent-color:#ff4d8d;height:22px}
.cc-sws{display:flex;gap:11px;flex-wrap:wrap}
.cc-swatch{width:30px;height:30px;border-radius:50%;border:2px solid #3a3f4c;cursor:pointer;padding:0}
.cc-swatch.on{border-color:#fff;box-shadow:0 0 0 2px #ff4d8d}
.cc-toggle{border:0;border-radius:20px;padding:8px 18px;font-weight:800;font-size:13px;cursor:pointer;background:#2a2f3a;color:#aeb6c2;min-width:96px}
.cc-toggle.on{background:linear-gradient(135deg,#ff9ec0,#ff4d8d);color:#fff}
.cc-ft{display:flex;gap:10px;margin-top:18px}
.cc-reset{flex:1;background:#22262f;border:1px solid #333844;color:#e7e2ee;border-radius:11px;padding:12px;font-weight:700;cursor:pointer}
.cc-done{flex:1;background:linear-gradient(135deg,#ff9ec0,#ff4d8d);border:0;color:#fff;border-radius:11px;padding:12px;font-weight:800;cursor:pointer}
/* velocidade */
.spd-list{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.spd-opt{display:flex;align-items:center;justify-content:space-between;background:#1b1e26;border:1px solid #2a2f3a;color:#e7e2ee;border-radius:11px;padding:13px 16px;font-weight:800;font-size:15px;cursor:pointer}
.spd-opt i{font-style:normal;color:#8a93a3;font-weight:600;font-size:12.5px}
.spd-opt.on{background:linear-gradient(135deg,#ff9ec0,#ff4d8d);color:#fff;border-color:transparent}
.spd-opt.on i{color:#ffffffcc}
/* botoes CC/velocidade nos controles */
.cc-btn{background:none;border:0;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:4px;opacity:.9}
.cc-btn:hover{opacity:1}
.cc-btn svg{width:22px;height:22px}
.spd-btn{font-weight:800;font-size:13px;min-width:32px;letter-spacing:.3px}
.tt-ic.spd-btn{font-size:14px}