/* dashboard-v2.css — nuova dashboard utente Vaivox (stile Foclis).
 * Namespace dv2- per isolarla totalmente dalla vecchia dashboard.
 * Attiva solo via ?dashboard=v2 (o quando faremo lo swap). NON tocca il resto. */

#dv2-overlay{
  /* sfondo PAGINA chiaro come il resto del sito; le CARD restano scure/oro */
  --dv2-bg:#fafbfc; --dv2-card:#17121f; --dv2-card2:#1c1626;
  --dv2-border:rgba(200,165,80,.14); --dv2-border2:rgba(200,165,80,.30);
  --dv2-accent:#c8a550; --dv2-accent2:#e3c877; --dv2-accent-deep:#a07830;
  --dv2-text:#f3efe6;            /* testo DENTRO le card scure */
  --dv2-ink:#1e293b; --dv2-ink-muted:#64748b; --dv2-ink-dim:#94a3b8; /* testo su pagina chiara */
  --dv2-muted:#9a90a6; --dv2-dim:#6b6478;
  --dv2-green:#34d399; --dv2-blue:#60a5fa; --dv2-red:#f87171;
  position:fixed; inset:0; z-index:9998; overflow-y:auto; display:none;
  font-family:'Sora','Plus Jakarta Sans',system-ui,sans-serif; color:var(--dv2-ink);
  background:
    radial-gradient(1000px 460px at 85% -10%, rgba(200,165,80,.08), transparent 60%),
    var(--dv2-bg);
}
/* le card scure: forzano il testo interno chiaro (non eredita l'ink scuro della pagina) */
.dv2-scard, .dv2-dub{ color:var(--dv2-text); }
#dv2-overlay.open{display:block}
.dv2-wrap{max-width:1140px; margin:0 auto; padding:34px 24px 80px}

.dv2-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; gap:14px; flex-wrap:wrap}
.dv2-brand{display:flex; align-items:center; gap:11px}
.dv2-logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--dv2-accent),var(--dv2-accent-deep));display:flex;align-items:center;justify-content:center;font-weight:800;color:#1a1206}
.dv2-bname{font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.dv2-topr{display:flex; align-items:center; gap:12px}
.dv2-email{font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--dv2-ink-muted)}
.dv2-plan{font-family:'IBM Plex Mono',monospace; font-size:.68rem; font-weight:700; letter-spacing:.08em; padding:5px 11px; border-radius:100px; background:rgba(200,165,80,.16); color:var(--dv2-accent-deep); border:1px solid var(--dv2-border2); text-transform:uppercase}
.dv2-ghost{border:1px solid rgba(30,41,59,.18); background:#fff; color:var(--dv2-ink-muted); padding:8px 14px; border-radius:10px; font-size:.82rem; cursor:pointer; font-family:inherit}
.dv2-ghost:hover{color:var(--dv2-ink); border-color:var(--dv2-accent)}

/* selettore lingua UI */
.dv2-langsel{position:relative}
.dv2-langbtn{display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(30,41,59,.18); background:#fff; color:var(--dv2-ink-muted); padding:7px 11px; border-radius:10px; font-size:.82rem; font-weight:600; cursor:pointer; font-family:inherit}
.dv2-langbtn:hover{color:var(--dv2-ink); border-color:var(--dv2-accent)}
.dv2-langbtn img{width:20px; height:15px; object-fit:cover; border-radius:2px; display:block}
.dv2-langdd{position:absolute; top:calc(100% + 6px); right:0; z-index:20; min-width:168px; background:#fff; border:1px solid rgba(30,41,59,.14); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.14); padding:6px; display:none}
.dv2-langdd.open{display:block}
.dv2-langopt{display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; font-size:.86rem; color:var(--dv2-ink); cursor:pointer}
.dv2-langopt img{width:22px; height:16px; object-fit:cover; border-radius:2px; flex-shrink:0}
.dv2-langopt:hover{background:rgba(200,165,80,.10)}
.dv2-langopt.active{background:rgba(200,165,80,.16); font-weight:700}

/* create box — contenitore TRASPARENTE: dentro ci mettiamo il form REALE della
   home (spostato via JS), che ha già la sua card scura/oro. Il titolo sta sul
   fondo chiaro della pagina, quindi testo scuro. */
.dv2-create{ background:transparent; border:none; border-radius:0; padding:0; margin-bottom:26px; box-shadow:none; color:var(--dv2-ink); }
.dv2-ctitle{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--dv2-ink)}
.dv2-csub{font-size:.9rem; color:var(--dv2-ink-muted); margin:6px 0 16px}
#dv2-form-slot{max-width:none; width:100%}
/* dentro la dashboard nascondi l'etichetta "// Start Dubbing" (ridondante col titolo) */
#dv2-form-slot .hero-form-label{display:none}
.dv2-crow{display:flex; gap:12px; flex-wrap:wrap}
.dv2-input{flex:1; min-width:220px; background:rgba(0,0,0,.35); border:1px solid var(--dv2-border); border-radius:12px; padding:15px 16px; color:var(--dv2-text); font-family:'IBM Plex Mono',monospace; font-size:.86rem; outline:none}
.dv2-input::placeholder{color:var(--dv2-dim)}
.dv2-input:focus{border-color:var(--dv2-accent)}
.dv2-primary{display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; white-space:nowrap; background:linear-gradient(135deg,var(--dv2-accent),var(--dv2-accent-deep)); color:#1a1206; font-family:inherit; font-weight:800; font-size:.95rem; padding:15px 24px; border-radius:12px; box-shadow:0 8px 26px rgba(200,165,80,.28); transition:transform .15s, box-shadow .15s}
.dv2-primary:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(200,165,80,.42)}

/* summary */
.dv2-summary{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; margin-bottom:30px}
.dv2-scard{background:linear-gradient(160deg,var(--dv2-card2),var(--dv2-card)); border:1px solid var(--dv2-border); border-radius:18px; padding:20px 22px}
.dv2-slabel{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dv2-dim); margin-bottom:9px}
.dv2-sval{font-size:2.2rem; font-weight:800; letter-spacing:-.03em; line-height:1}
.dv2-sval.gold{background:linear-gradient(90deg,var(--dv2-accent2),var(--dv2-accent));-webkit-background-clip:text;background-clip:text;color:transparent; font-size:1.8rem}
.dv2-sval.green{color:var(--dv2-green)}
.dv2-sval .u{font-size:1rem;color:var(--dv2-muted);font-weight:600}
.dv2-ssub{font-size:.8rem; color:var(--dv2-muted); margin-top:8px}
.dv2-bar{height:8px; border-radius:100px; background:rgba(255,255,255,.06); margin-top:14px; overflow:hidden}
.dv2-bar>i{display:block; height:100%; border-radius:100px; background:linear-gradient(90deg,var(--dv2-accent),var(--dv2-accent2))}

/* section title */
.dv2-sectitle{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.dv2-sectitle h2{font-size:1.12rem; font-weight:700; margin:0; letter-spacing:-.02em}
.dv2-sectitle .count{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--dv2-ink-dim)}

/* grid */
.dv2-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:20px}
.dv2-dub{background:linear-gradient(160deg,var(--dv2-card2),var(--dv2-card)); border:1px solid var(--dv2-border); border-radius:18px; overflow:hidden; position:relative; transition:transform .18s, border-color .18s, box-shadow .18s; display:flex; flex-direction:column}
.dv2-dub::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--dv2-accent),var(--dv2-accent-deep)); opacity:0; transition:opacity .18s}
.dv2-dub:hover{transform:translateY(-4px); border-color:var(--dv2-border2); box-shadow:0 16px 40px rgba(0,0,0,.45)}
.dv2-dub:hover::before{opacity:1}
.dv2-thumb{height:112px; position:relative; display:flex; align-items:center; justify-content:center; background:radial-gradient(120px 80px at 50% 40%, rgba(200,165,80,.18), transparent 70%), #0f0b16; border-bottom:1px solid var(--dv2-border); cursor:pointer; overflow:hidden}
.dv2-thumb.img{background-size:cover; background-position:center}
.dv2-thumb.img::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.5))}
.dv2-thumb .dv2-play{position:relative; z-index:1; width:44px;height:44px;border-radius:50%;background:rgba(200,165,80,.16);border:1px solid var(--dv2-border2);display:flex;align-items:center;justify-content:center;color:var(--dv2-accent2); transition:transform .18s, background .18s}
.dv2-thumb.img .dv2-play{background:rgba(11,9,16,.55); backdrop-filter:blur(2px); color:#fff}
.dv2-dub:hover .dv2-play{transform:scale(1.08); background:rgba(200,165,80,.9); color:#1a1206}
.dv2-lang{position:absolute; z-index:1; top:10px; left:10px; font-family:'IBM Plex Mono',monospace; font-size:.64rem; font-weight:700; letter-spacing:.04em; padding:4px 9px; border-radius:100px; background:rgba(11,9,16,.72); border:1px solid var(--dv2-border2); color:var(--dv2-accent2)}
.dv2-body{padding:14px 15px 6px; flex:1}
.dv2-title{font-weight:600; font-size:.9rem; line-height:1.35; margin:0 0 8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word}
.dv2-meta{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--dv2-dim); display:flex; gap:9px; align-items:center}
.dv2-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--dv2-dim)}
.dv2-acts{display:flex; gap:6px; padding:10px 12px 13px; border-top:1px solid rgba(255,255,255,.04); margin-top:10px}
.dv2-act{flex:1; height:36px; border-radius:9px; border:1px solid var(--dv2-border); background:rgba(255,255,255,.02); color:var(--dv2-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s}
.dv2-act:hover{color:var(--dv2-text); border-color:var(--dv2-border2); background:rgba(200,165,80,.08)}
.dv2-act.dl:hover{color:var(--dv2-green); border-color:rgba(52,211,153,.4)}
.dv2-act.share:hover{color:var(--dv2-blue); border-color:rgba(96,165,250,.4)}
.dv2-act.redub:hover{color:var(--dv2-accent2); border-color:var(--dv2-border2)}
.dv2-act.del:hover{color:var(--dv2-red); border-color:rgba(248,113,113,.4)}
.dv2-act.off{opacity:.3; cursor:not-allowed}
.dv2-act.off:hover{color:var(--dv2-muted); border-color:var(--dv2-border); background:transparent}

/* pager */
.dv2-pager{display:flex; justify-content:center; align-items:center; gap:8px; margin-top:28px; flex-wrap:wrap}
.dv2-pg{min-width:38px; height:38px; padding:0 12px; border-radius:10px; border:1px solid rgba(30,41,59,.16); background:#fff; color:var(--dv2-ink-muted); font-family:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .15s}
.dv2-pg:hover:not(:disabled):not(.on){border-color:var(--dv2-accent); color:var(--dv2-ink)}
.dv2-pg.on{background:linear-gradient(135deg,var(--dv2-accent),var(--dv2-accent-deep)); color:#1a1206; border-color:transparent; cursor:default}
.dv2-pg:disabled{opacity:.4; cursor:not-allowed}
.dv2-pg.nav{color:var(--dv2-ink-muted)}

/* empty / loading */
.dv2-empty{grid-column:1/-1; text-align:center; padding:50px 20px; color:var(--dv2-ink-muted); font-size:.95rem}
.dv2-empty b{color:var(--dv2-ink)}

/* account */
.dv2-account{margin-top:44px; border-top:1px solid var(--dv2-border); padding-top:28px}
.dv2-account h2{font-size:1.02rem; font-weight:700; margin:0 0 4px; color:var(--dv2-ink)}
.dv2-account p{font-size:.82rem; color:var(--dv2-ink-muted); margin:0 0 16px}
.dv2-accrow{display:flex; gap:14px; flex-wrap:wrap}
.dv2-accbtn{display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:11px; font-family:inherit; font-size:.88rem; font-weight:600; cursor:pointer; border:1px solid rgba(200,165,80,.45); background:#fff; color:var(--dv2-ink); transition:all .15s}
.dv2-accbtn:hover{background:rgba(200,165,80,.10); border-color:var(--dv2-accent)}
.dv2-accbtn.danger{border-color:rgba(220,38,38,.35); background:#fff; color:#dc2626}
.dv2-accbtn.danger:hover{background:rgba(220,38,38,.08); border-color:#dc2626; color:#b91c1c}

@media(max-width:680px){ .dv2-summary{grid-template-columns:1fr 1fr} .dv2-summary .dv2-scard:first-child{grid-column:1/-1} }