/* ============ TOKENS (Viralio Design System) ============ */
:root {
    --bg-base:#0a0a0c; --bg-elevated:#0c0e18;
    --bg-card:rgba(255,255,255,0.045); --bg-card-hover:rgba(255,255,255,0.075);
    --border:rgba(255,255,255,0.085); --border-strong:rgba(255,255,255,0.16);
    --text-primary:#f3f4fb; --text-muted:rgba(238,240,252,0.60); --text-faint:rgba(238,240,252,0.36);
    --accent:#65d69e; --accent-dim:rgba(101,214,158,0.13); --accent-border:rgba(101,214,158,0.34);
    --indigo:#7c84ff; --gold:#f5c842; --red:#f87171;
    --shadow-card:0 30px 70px -30px rgba(0,0,0,0.88);
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { background:var(--bg-base); }
body {
    background:
        radial-gradient(120% 90% at 85% -8%, rgba(101,214,158,0.10), transparent 52%),
        radial-gradient(100% 80% at 8% 105%, rgba(124,132,255,0.10), transparent 55%),
        var(--bg-base);
    color:var(--text-primary); font-family:'Geist',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; min-height:100vh;
}
body::before {
    content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0.35;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
.orb { position:fixed; border-radius:50%; filter:blur(120px); pointer-events:none; z-index:0; }
.orb-1 { width:720px; height:720px; background:radial-gradient(circle,rgba(101,214,158,0.13),transparent 70%); top:-280px; right:-160px; animation:orb1 32s ease-in-out infinite; }
.orb-2 { width:560px; height:560px; background:radial-gradient(circle,rgba(124,132,255,0.12),transparent 70%); bottom:-200px; left:-40px; animation:orb2 41s ease-in-out infinite; }
@keyframes orb1 { 50% { transform:translate3d(-40px,40px,0) scale(0.95); } }
@keyframes orb2 { 50% { transform:translate3d(50px,-30px,0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .orb, .gen-btn { animation:none !important; } }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.12); border-radius:99px; }
.mono { font-family:'JetBrains Mono',monospace; }

/* ============ VIRALIO TOP NAV ============ */
.vn-nav {
    position:relative; z-index:100; max-width:1536px; margin:0 auto; padding:12px 16px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.vn-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:800; }
.vn-logo {
    width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#65d69e,#3ecf8e);
    display:flex; align-items:center; justify-content:center; color:#072215; font-size:1.1rem;
    box-shadow:0 4px 14px rgba(101,214,158,0.3);
}
.vn-title { font-family:'Fraunces',serif; font-size:1.25rem; font-weight:900; letter-spacing:-0.02em; }
.vn-badge { font-size:0.6rem; padding:2px 7px; border-radius:99px; background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-border); text-transform:uppercase; letter-spacing:0.06em; font-weight:800; }
.vn-right { display:flex; align-items:center; gap:10px; }
.vn-credits {
    display:flex; align-items:center; gap:7px; padding:6px 14px; border-radius:99px;
    background:var(--bg-card); border:1px solid var(--border); font-size:0.78rem; font-weight:700; cursor:pointer;
    transition:all 0.2s;
}
.vn-credits:hover { border-color:var(--accent-border); background:var(--accent-dim); color:var(--accent); }
.vn-credits i { color:var(--gold); }
.vn-user {
    display:flex; align-items:center; gap:8px; padding:4px 8px 4px 4px; border-radius:99px;
    background:var(--bg-card); border:1px solid var(--border); font-size:0.78rem; font-weight:700;
}
.vn-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; }
.vn-backend-btn {
    display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px;
    background:var(--bg-card); border:1px solid var(--border); font-size:0.75rem; font-weight:600;
    color:var(--text-secondary); cursor:pointer; transition:all 0.2s;
}
.vn-backend-btn:hover { border-color:var(--accent); color:var(--text-primary); }
.vn-backend-btn .backend-dot { width:7px; height:7px; border-radius:50%; background:#65d69e; box-shadow:0 0 6px #65d69e; }
.vn-backend-btn.disconnected .backend-dot { background:#ff6b6b; box-shadow:0 0 6px #ff6b6b; }
.vn-backend-btn.warning .backend-dot { background:#f5c842; box-shadow:0 0 6px #f5c842; }

.backend-card { width:min(520px,94vw); text-align:left; max-height:min(90vh,820px); overflow-y:auto; }
.backend-card .modal-title, .backend-card .modal-sub { text-align:center; }
.backend-opts { display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.backend-opt { padding:14px; border-radius:14px; background:rgba(255,255,255,0.02); border:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.backend-opt:hover { border-color:var(--border-strong); }
.opt-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.opt-title { font-size:0.92rem; font-weight:800; display:flex; align-items:center; gap:8px; color:var(--text-primary); }
.opt-desc { font-size:0.75rem; color:var(--text-muted); line-height:1.45; margin:0; }
.opt-tag { font-size:0.58rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; padding:2px 8px; border-radius:99px; }
.tag-green { background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-border); }
.tag-purple { background:rgba(167,139,250,0.15); color:#c4b5fd; border:1px solid rgba(167,139,250,0.3); }
.tag-blue { background:rgba(59,130,246,0.15); color:#93c5fd; border:1px solid rgba(59,130,246,0.3); }

/* ============ LAYOUT ============ */
.wrap {
    position:relative; z-index:2; max-width:1536px; margin:0 auto; padding:0 16px 24px;
    display:grid; grid-template-columns:400px minmax(0,1fr); gap:16px; align-items:start;
}
.panel {
    border-radius:20px; border:1px solid var(--border);
    background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,transparent 18%), rgba(9,10,17,0.62);
    backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), var(--shadow-card);
}
.setup { position:sticky; top:20px; padding:18px; display:flex; flex-direction:column; gap:15px; max-height:calc(100vh - 40px); overflow:auto; }
.results { padding:16px; min-height:calc(100vh - 80px); }
.setup, .results { min-width:0; }
@media (max-width: 980px) {
    .wrap { grid-template-columns:minmax(0,1fr); padding:0 10px 20px; gap:10px; }
    .setup { position:static; max-height:none; }
    .results { min-height:0; }
}
@media (max-width: 520px) {
    .setup { padding:14px; }
    .results { padding:12px; }
    .row2 { grid-template-columns:minmax(0,1fr); }
    .hd h1 { font-size:1.3rem; }
}

/* ============ HEADER ============ */
.hd { display:flex; align-items:center; gap:12px; }
.hd-ico { width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#3ecf8e,#65d69e); color:#072215; font-size:1.1rem; box-shadow:0 8px 24px rgba(101,214,158,0.3); }
.hd h1 { font-family:'Fraunces',serif; font-weight:900; font-size:1.45rem; letter-spacing:-0.02em; line-height:1; }
.hd p { font-size:0.74rem; color:var(--text-muted); margin-top:4px; }
.cost-pill { margin-left:auto; white-space:nowrap; padding:5px 11px; border-radius:99px; font-size:0.72rem; font-weight:800;
    border:1px solid var(--accent-border); background:var(--accent-dim); color:var(--accent); }

/* ============ FIELDS ============ */
.field-label { font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-faint);
    margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.field-label i { color:var(--accent); font-size:0.62rem; }
.field-label .right { margin-left:auto; text-transform:none; letter-spacing:0; font-size:0.72rem; color:var(--accent); font-weight:800; }
.prompt-wrap { border:1px solid var(--border); border-radius:13px; background:var(--bg-card); transition:all 0.2s; }
.prompt-wrap:focus-within { border-color:var(--accent-border); box-shadow:0 0 0 3px rgba(101,214,158,0.07); }
.url-list { display:flex; flex-direction:column; gap:8px; }
.url-row { position:relative; display:flex; align-items:center; }
.url-row .url-ico { position:absolute; left:13px; color:var(--text-faint); font-size:0.78rem; pointer-events:none; }
.v-input { background:transparent; border:none; outline:none; width:100%; min-width:0; color:var(--text-primary); font-family:inherit; }
.v-input::placeholder { color:var(--text-faint); }
.url-row .url-input { padding:11px 36px 11px 34px; font-size:0.84rem; font-weight:500; }
.url-row .remove-btn { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--text-faint); transition:color .2s; padding:4px; }
.url-row .remove-btn:hover { color:var(--red); }
.url-plat { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; box-sizing:border-box; border-radius:7px; display:none;
    align-items:center; justify-content:center; font-size:0.74rem; line-height:1; pointer-events:none; border:1px solid transparent; z-index:2; animation:urlPlatIn 0.2s ease both; }
.url-plat.show { display:inline-flex; }
@keyframes urlPlatIn { from { opacity:0; } to { opacity:1; } }
.url-row.has-del .url-plat { right:46px; }
.url-row.has-del .url-input { padding-right:74px; }
.url-row.ok { border-color:var(--accent-border); }
.link-counter { font-family:'JetBrains Mono',monospace; font-size:0.6rem; font-weight:700; background:var(--bg-card); border:1px solid var(--border); color:var(--text-faint);
    border-radius:99px; padding:2px 9px; margin-left:auto; text-transform:none; letter-spacing:0; }
.add-link-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:6px; margin-top:9px; padding:10px; border-radius:11px; border:1px dashed var(--border);
    background:transparent; font-size:0.72rem; font-weight:700; color:var(--text-faint); cursor:pointer; transition:all 0.2s; font-family:inherit; }
.add-link-btn:hover { color:var(--accent); background:var(--accent-dim); border-color:var(--accent-border); }
.add-row { display:flex; gap:8px; }

/* upload */
.src-box { position:relative; }
.file-list:not(:empty) { margin-top:8px; }
.file-row { position:relative; display:flex; align-items:center; gap:10px; padding:9px 12px 9px 13px; overflow:hidden; }
.file-row .f-ico { color:var(--text-faint); font-size:0.8rem; flex-shrink:0; }
.file-row.ready .f-ico { color:var(--accent); }
.file-row .f-tx { flex:1; min-width:0; }
.file-row .f-name { font-size:0.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .f-sub { font-size:0.62rem; color:var(--text-faint); margin-top:1px; font-family:'JetBrains Mono',monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-row .remove-btn { position:static; transform:none; background:none; border:none; cursor:pointer; color:var(--text-faint); padding:4px; flex-shrink:0; }
.file-row .remove-btn:hover { color:var(--red); }
.file-row.ready { border-color:var(--accent-border); }
.drop-hint { display:none; position:absolute; inset:-6px; border-radius:14px; border:2px dashed var(--accent-border); background:rgba(10,12,20,0.88);
    color:var(--accent); font-weight:800; font-size:0.85rem; align-items:center; justify-content:center; gap:8px; z-index:5; pointer-events:none; }
.src-box.drag .drop-hint { display:flex; }
.plat-row { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.pb { font-size:0.6rem; font-weight:700; padding:3px 8px; border-radius:99px; border:1px solid var(--border); color:var(--text-muted); background:rgba(255,255,255,0.02); }
.pb i { margin-right:3px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.styled-select { width:100%; background:linear-gradient(180deg,rgba(255,255,255,0.055),rgba(255,255,255,0.02)); border:1px solid var(--border);
    border-radius:12px; padding:10px 32px 10px 12px; font:600 0.82rem 'Geist',sans-serif; color:var(--text-primary); outline:none; -webkit-appearance:none; appearance:none; cursor:pointer; }
.styled-select:focus { border-color:var(--accent-border); }
.styled-select option { background:#111120; }
.select-wrap { position:relative; }
.select-wrap::after { content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-faint); font-size:0.58rem; pointer-events:none; }

.seg { display:flex; gap:3px; padding:3px; border-radius:12px; background:var(--bg-card); border:1px solid var(--border); }
.seg button { flex:1; border:0; background:transparent; color:var(--text-muted); font:700 0.72rem 'Geist',sans-serif; padding:8px 6px; border-radius:9px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.seg button:hover { color:var(--text-primary); }
.seg button.on { background:var(--accent-dim); color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-border); }
.seg .cnt { font-size:0.62rem; opacity:0.7; margin-left:3px; }

/* voci */
.voices { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; max-height:262px; overflow-y:auto; overscroll-behavior:contain;
    padding-right:4px; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
.voices::-webkit-scrollbar { width:6px; }
.voices::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:6px; }
.vchip { display:flex; align-items:center; gap:8px; padding:8px 7px 8px 11px; border-radius:12px; border:1px solid var(--border);
    background:var(--bg-card); cursor:pointer; transition:all 0.15s; min-width:0; outline:none; }
.vchip:hover { border-color:var(--border-strong); background:var(--bg-card-hover); }
.vchip.on { border-color:var(--accent-border); background:var(--accent-dim); box-shadow:inset 0 0 0 1px var(--accent-border); }
.vtx { min-width:0; flex:1; }
.vn { font-weight:800; font-size:0.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vchip.on .vn { color:var(--accent); }
.vt { font-size:0.6rem; color:var(--text-faint); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vplay { width:28px; height:28px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--text-muted); font-size:0.6rem; cursor:pointer; }
.vplay:hover { color:var(--accent); border-color:var(--accent-border); }

/* viteza */
.speed-row { display:flex; flex-direction:column; gap:8px; }
input[type=range] { width:100%; accent-color:var(--accent); cursor:pointer; height:18px; }
.presets { display:flex; gap:5px; }
.presets button { flex:1; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); border-radius:9px; padding:6px 0;
    font:700 0.7rem 'JetBrains Mono',monospace; cursor:pointer; }
.presets button.on { color:var(--accent); border-color:var(--accent-border); background:var(--accent-dim); }

/* butoane */
.gen-btn { background:linear-gradient(135deg,#3ecf8e 0%,#65d69e 50%,#4ade80 100%); background-size:200% 200%; animation:genGrad 5s ease infinite;
    color:#072215; font:900 0.95rem 'Geist',sans-serif; border-radius:15px; border:none; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s;
    display:flex; align-items:center; justify-content:center; gap:9px; padding:14px 18px; width:100%; }
.gen-btn:hover:not(:disabled) { box-shadow:0 18px 38px rgba(101,214,158,0.32); transform:translateY(-1px); }
.gen-btn:disabled { opacity:0.55; cursor:not-allowed; }
.gen-btn .badge { background:rgba(0,0,0,0.15); border-radius:8px; padding:2px 8px; font-size:0.7rem; font-family:'JetBrains Mono',monospace; }
@keyframes genGrad { 50% { background-position:100% 50%; } }
.hint { display:flex; justify-content:space-between; gap:8px; font-size:0.64rem; color:var(--text-faint); margin-top:-6px; }
kbd { font-family:'JetBrains Mono',monospace; font-size:0.6rem; padding:1px 5px; border-radius:5px; border:1px solid var(--border-strong); background:var(--bg-card); }
.ghost-btn { background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); border-radius:11px; padding:8px 12px;
    font:700 0.74rem 'Geist',sans-serif; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.ghost-btn:hover { background:var(--bg-card-hover); border-color:var(--border-strong); }
.icon-btn { width:30px; height:30px; border-radius:9px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted);
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:0.72rem; flex-shrink:0; }
.icon-btn:hover { color:var(--text-primary); border-color:var(--border-strong); }

/* ============ REZULTATE ============ */
.res-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.res-hd .seg { width:auto; }
.res-hd .seg button { padding:7px 14px; }
#jobs { display:flex; flex-direction:column; gap:12px; }
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:70px 20px; gap:10px; }
.empty-ico { width:64px; height:64px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:1.6rem;
    background:var(--accent-dim); border:1px solid var(--accent-border); color:var(--accent); }
.empty h2 { font-family:'Fraunces',serif; font-weight:900; font-size:1.5rem; letter-spacing:-0.02em; }
.empty p { color:var(--text-muted); font-size:0.86rem; max-width:420px; line-height:1.55; }
.flow { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:8px; }
.flow span { font-size:0.7rem; font-weight:700; padding:6px 11px; border-radius:99px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); }
.flow i.fa-arrow-right { color:var(--text-faint); font-size:0.6rem; align-self:center; }

.job { border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,0.022); padding:13px; animation:fadeIn 0.35s ease both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } }
.job-top { display:flex; align-items:center; gap:8px; min-width:0; }
.plat { font-size:0.62rem; font-weight:800; padding:4px 9px; border-radius:99px; border:1px solid var(--border); color:var(--text-muted); white-space:nowrap; }
.job-url { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:0.76rem; text-decoration:none; }
.job-url:hover { color:var(--text-primary); }
.job-meta { font-size:0.66rem; color:var(--text-faint); white-space:nowrap; font-weight:600; }
@media (max-width: 560px) { .job-meta { display:none; } }
.steps { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:12px; }
.step { display:flex; flex-direction:column; gap:6px; font-size:0.58rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); }
.step .bar { height:4px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden; position:relative; }
.step.done { color:var(--text-muted); }
.step.done .bar { background:var(--accent); }
.step.now { color:var(--accent); }
.step.now .bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:slide 1.2s linear infinite; }
@keyframes slide { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.job-status { display:flex; justify-content:space-between; gap:10px; font-size:0.74rem; color:var(--text-muted); margin-top:9px; }

.job-title-bar { display:flex; align-items:center; gap:9px; padding:7px 12px; margin-top:8px; border-radius:10px; background:rgba(101,214,158,0.06); border:1px solid rgba(101,214,158,0.22); }
.job-title-bar .title-tag { display:inline-flex; align-items:center; gap:5px; font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); background:rgba(101,214,158,0.15); padding:2px 8px; border-radius:6px; flex-shrink:0; }
.job-title-bar .title-val { font-size:0.82rem; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.stage-title-overlay { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:90%; text-align:center; pointer-events:none; z-index:45; }
.stage-title-pill { display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:99px; background:rgba(0,0,0,0.65); border:1px solid rgba(255,255,255,0.25); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:0.75rem; font-weight:800; letter-spacing:0.02em; text-transform:uppercase; box-shadow:0 4px 14px rgba(0,0,0,0.4); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-title-pill i { color:var(--accent); font-size:0.8rem; }

.job-body { display:grid; grid-template-columns:minmax(0,auto) minmax(240px,1fr); gap:14px; margin-top:12px; align-items:start; }
@media (max-width: 760px) { .job-body { grid-template-columns:minmax(0,1fr); } }
.player { display:flex; flex-direction:column; gap:8px; align-items:center; max-width:100%; }
@media (max-width: 760px) { .player { justify-self:center; } }
.stage { position:relative; background:#000; border-radius:14px; overflow:hidden; touch-action:manipulation; max-width:100%; cursor:pointer; }
.flip { position:absolute; inset:0; }
.flip video { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain; }
.flip { pointer-events:none; }
.flip video { pointer-events:none; }
.flip video.mask-bg { object-fit:cover; filter:blur(18px) brightness(0.92); }
.boxes { position:absolute; inset:0; pointer-events:none; z-index:10; }
.bbox { position:absolute; pointer-events:auto; border:1.5px dashed rgba(255,255,255,0.95); border-radius:6px;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:rgba(255,255,255,0.06); box-shadow:0 0 0 1px rgba(0,0,0,0.45);
    cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; }
.bbox:active { cursor:grabbing; }
.bbox .rs { position:absolute; right:-9px; bottom:-9px; width:20px; height:20px; border-radius:50%; background:var(--accent); border:2px solid #07130d; cursor:nwse-resize; touch-action:none; pointer-events:auto; z-index:12; }
.bbox .rm { pointer-events:auto; position:absolute; top:-10px; right:-10px; width:22px; height:22px; border-radius:50%; background:#111; color:#fff; border:1px solid rgba(255,255,255,0.45);
    font-size:0.75rem; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:12; }
.big-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
    background:rgba(0,0,0,0.5); color:#fff; font-size:1.1rem; cursor:pointer; backdrop-filter:blur(6px); z-index:2; pointer-events:auto; transition:transform 0.15s, opacity 0.15s; }
.big-play:hover { transform:translate(-50%,-50%) scale(1.08); }
.pbar { display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap; }
.pbar .tm { font-size:0.66rem; color:var(--text-muted); min-width:74px; text-align:right; }
.vol-wrap { display:inline-flex; align-items:center; gap:5px; margin-left:auto; }
.vol-slider { width:65px; height:4px; accent-color:var(--accent); cursor:pointer; border-radius:99px; }
.vol-btn { width:28px; height:28px; font-size:0.8rem; }

.tools { display:flex; flex-direction:column; gap:10px; min-width:0; }
.tool-row { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tbtn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px; border-radius:13px; border:1px solid var(--border);
    background:var(--bg-card); color:var(--text-muted); font:800 0.74rem 'Geist',sans-serif; cursor:pointer; transition:all 0.15s; }
.tbtn i { font-size:0.95rem; }
.tbtn:hover { color:var(--text-primary); border-color:var(--border-strong); }
.tbtn.on { color:var(--accent); border-color:var(--accent-border); background:var(--accent-dim); }
.tpanel { border:1px solid var(--border); border-radius:13px; padding:11px; background:rgba(255,255,255,0.02); display:flex; flex-direction:column; gap:9px; }
.tpanel .muted { font-size:0.7rem; color:var(--text-muted); line-height:1.45; }
.trow { display:flex; gap:6px; flex-wrap:wrap; }
.ctl { display:flex; flex-direction:column; gap:3px; font-size:0.7rem; color:var(--text-muted); font-weight:600; }
.ctl .top { display:flex; justify-content:space-between; }
.ctl b { color:var(--accent); font-family:'JetBrains Mono',monospace; font-size:0.68rem; }
.chk { display:flex; align-items:center; gap:7px; font-size:0.72rem; color:var(--text-muted); cursor:pointer; }
.chk input { accent-color:var(--accent); width:15px; height:15px; }

/* fonts */
@font-face { font-family:'Anton'; src:url('/fonts/Anton.ttf') format('truetype'); font-display:swap; ascent-override:140.43%; descent-override:32.91%; line-gap-override:0%; }
@font-face { font-family:'Bangers'; src:url('/fonts/Bangers.ttf') format('truetype'); font-display:swap; ascent-override:140.1%; descent-override:35.6%; line-gap-override:0%; }
@font-face { font-family:'Luckiest Guy'; src:url('/fonts/LuckiestGuy.ttf') format('truetype'); font-display:swap; ascent-override:97.95%; descent-override:24.61%; line-gap-override:0%; }
.capview { position:absolute; left:50%; top:72%; transform:translate(-50%,-50%); width:88%; text-align:center; line-height:normal; text-wrap:balance;
    z-index:50; pointer-events:none; user-select:none; -webkit-user-select:none; overflow-wrap:break-word; }
.capsec { border:1px solid var(--border); border-radius:13px; padding:11px; background:rgba(255,255,255,0.02); display:flex; flex-direction:column; gap:10px; }
.cap-hd { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.switch { position:relative; width:40px; height:22px; flex-shrink:0; }
.switch input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.switch span { position:absolute; inset:0; border-radius:99px; background:rgba(255,255,255,0.08); border:1px solid var(--border); transition:all 0.2s; pointer-events:none; }
.switch span::before { content:''; position:absolute; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,0.45); top:2px; left:3px; transition:all 0.2s; }
.switch input:checked + span { background:var(--accent-dim); border-color:var(--accent-border); }
.switch input:checked + span::before { transform:translateX(17px); background:var(--accent); }
.cap-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px; }
.cap-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:60px; padding:9px 3px 6px;
    border-radius:11px; border:1px solid var(--border); background:radial-gradient(120% 90% at 50% 0%, rgba(124,132,255,0.10), transparent 60%), #0d0f16;
    cursor:pointer; overflow:hidden; transition:border-color 0.15s; }
.cap-chip:hover { border-color:var(--border-strong); }
.cap-chip .smp { line-height:1.15; white-space:nowrap; }
.cap-chip .nm { font:700 0.58rem 'Geist',sans-serif; color:var(--text-faint); }
.cap-chip.on { border-color:var(--accent-border); box-shadow:inset 0 0 0 1px var(--accent-border); }
.cap-chip.on .nm { color:var(--accent); }
.mini-lab { font-size:0.62rem; color:var(--text-muted); font-weight:700; margin-bottom:5px; }
.posrow { display:flex; align-items:center; gap:6px; }
.nudge { width:30px; height:28px; flex-shrink:0; border-radius:99px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); cursor:pointer; font-size:0.66rem; }
.nudge:hover { color:var(--accent); border-color:var(--accent-border); }

/* CTA */
.cta-body { display:flex; flex-direction:column; gap:8px; }
.cta-pos button { padding:6px; font-size:0.68rem; }
.seek-wrap { position:relative; flex:1; min-width:0; display:flex; align-items:center; }
.cta-mark { position:absolute; top:50%; width:3px; height:13px; margin-left:-1.5px; transform:translateY(-50%); border-radius:2px;
    background:var(--accent); box-shadow:0 0 0 1px rgba(0,0,0,0.55); pointer-events:none; }

/* History */
.hrow { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,0.02); }
.hmain { flex:1; min-width:0; }
#hist { display:flex; flex-direction:column; gap:8px; }
.pad { padding:30px; text-align:center; color:var(--text-muted); font-size:0.82rem; }

/* Toast & Modals */
#toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(120px); background:rgba(12,12,22,0.96); backdrop-filter:blur(20px);
    border:1px solid var(--border-strong); color:#fff; padding:12px 22px; border-radius:99px; font-size:0.84rem; font-weight:600; z-index:200000;
    transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; opacity:0; max-width:min(92vw,560px); text-align:center; }
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

.modal-backdrop { position:fixed; inset:0; z-index:150000; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); }
.modal-card { position:relative; width:min(440px,94vw); background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:22px; padding:28px; text-align:center; box-shadow:var(--shadow-card); }
.modal-card .icon-btn { position:absolute; top:14px; right:14px; }
.modal-icon { width:52px; height:52px; margin:0 auto 14px; border-radius:15px; background:var(--accent-dim); border:1px solid var(--accent-border); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:1.3rem; }
.modal-title { font-family:'Fraunces',serif; font-weight:900; font-size:1.4rem; margin-bottom:6px; }
.modal-sub { font-size:0.82rem; color:var(--text-muted); margin-bottom:18px; line-height:1.5; }

/* Speed Ultra */
.ultra-tag { display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 8px; border-radius:99px; font:900 0.56rem 'Geist',sans-serif; letter-spacing:0.12em;
    text-transform:uppercase; color:#1a1405; background:linear-gradient(135deg,#f5c842,#ffe08a); position:relative; top:-3px; }
.sched-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:15px; cursor:pointer;
    border:1px solid rgba(245,200,66,0.4); background:rgba(245,200,66,0.08); color:var(--gold); font:900 0.9rem 'Geist',sans-serif; transition:all 0.15s; }
.sched-btn:hover:not(:disabled) { background:rgba(245,200,66,0.14); }

#queue { display:flex; flex-direction:column; gap:10px; }
.uprog { border:1px solid rgba(245,200,66,0.22); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px;
    background:radial-gradient(120% 120% at 100% 0%, rgba(245,200,66,0.07), transparent 55%), rgba(255,255,255,0.02); }
.uprog-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.uslots, .uaccs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.uslot { font-size:0.74rem; font-weight:700; padding:4px 10px; border-radius:99px; border:1px solid var(--border-strong); background:var(--bg-card); }
.uacc { display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:700; padding:4px 10px 4px 5px; border-radius:99px; border:1px solid var(--border); background:var(--bg-card); }

.usheet { width:min(560px,100%); max-height:min(90vh,860px); display:flex; flex-direction:column; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:22px; box-shadow:var(--shadow-card); overflow:hidden; }
.usheet-hd { display:flex; align-items:flex-start; gap:12px; padding:20px 20px 12px; }
.usheet-hd > div { flex:1; min-width:0; }
.usheet-body { padding:4px 20px 16px; overflow:auto; display:flex; flex-direction:column; gap:16px; }
.usheet-ft { padding:14px 20px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.uinput { width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; color:var(--text-primary); font:500 0.84rem 'Geist',sans-serif; outline:none; }
.uinput:focus { border-color:var(--accent-border); }
.uacc-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--bg-card); cursor:pointer; }
.qrow { display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,0.02); }
.qwhen { width:92px; flex-shrink:0; font-size:0.72rem; font-weight:700; color:var(--text-primary); }
.qmain { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.qtitle { font-size:0.8rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qstat { font-size:0.62rem; font-weight:800; padding:3px 9px; border-radius:99px; border:1px solid var(--border); color:var(--text-muted); }
.qstat.ok { color:var(--accent); border-color:var(--accent-border); }