/* v38 theme: mona-style layout (hero band, big rounded cards, pill nav, orange call-to-action)
   on a soft dark-navy base that is easy on the eyes. Loaded after style.css/backend.css. */
@font-face{font-family:"VV Sans";src:url(fonts/inter-regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"VV Sans";src:url(fonts/inter-medium.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"VV Sans";src:url(fonts/inter-semibold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"VV Sans";src:url(fonts/inter-bold.woff) format("woff");font-weight:700 900;font-display:swap}

:root{
  --ink:#e8f0fc;--muted:#9fb0c8;--line:#24344d;--paper:#0b1322;--green:#7cb8ff;
  --vv-sans:"VV Sans",Inter,"Segoe UI",Arial,sans-serif;
  --vv-card:#121e33;--vv-card-2:#172640;--vv-edge:#25395a;--vv-edge-hi:#3f6aa8;--vv-blue:#4f8ff7;
  --vv-shadow:0 20px 50px rgba(0,4,14,.55),0 2px 6px rgba(0,0,0,.25);
  --vv-cta:linear-gradient(135deg,#ffab2e 0%,#ff7a1a 55%,#ff5a36 100%);--vv-cta-ink:#1a2338;
}
body{font-family:var(--vv-sans);color:var(--ink);background:var(--paper);position:relative;min-height:100vh}
body:has(#tts)::before{content:"";position:absolute;left:0;right:0;top:0;height:560px;z-index:-1;border-radius:0 0 44px 44px;
  background:
    radial-gradient(2.5px 2.5px at 8% 30%,#ffffffb3 50%,transparent 51%),radial-gradient(2px 2px at 18% 62%,#ffffff80 50%,transparent 51%),
    radial-gradient(2px 2px at 34% 18%,#ffffff99 50%,transparent 51%),radial-gradient(1.5px 1.5px at 62% 40%,#ffffff80 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 78% 22%,#ffffffb3 50%,transparent 51%),radial-gradient(2px 2px at 91% 58%,#ffffff80 50%,transparent 51%),
    radial-gradient(700px 300px at 85% 0%,rgba(56,189,248,.28),transparent 70%),
    radial-gradient(600px 320px at 5% 100%,rgba(124,58,237,.22),transparent 70%),
    linear-gradient(135deg,#132a5e 0%,#173a86 45%,#1b4ba6 70%,#14628f 100%)}
::selection{background:#2f5ea8;color:#fff}
a{color:var(--green)}

/* Header: navy bar, pill navigation */
header{background:#0f1a2e;border-bottom:1px solid #1d2c45;box-shadow:0 6px 24px rgba(0,0,0,.25);position:relative;z-index:2}
.vievoice-brand .vie{color:#eef4ff}
.vievoice-brand .voice{color:#6fb0ff}
.vievoice-brand .voice::after{background:var(--vv-cta);height:4px}
header #homeLink:hover{background:rgba(111,176,255,.08)}
header .tabs button{color:#b4c4dc;font-family:var(--vv-sans);font-weight:700;letter-spacing:.2px;border:0;border-radius:14px;padding:12px 18px}
header .tabs button:hover{background:rgba(111,176,255,.08);color:#dbe9ff}
header .tabs button.active{background:#1b2d4b;color:#cfe3ff;border:0;box-shadow:inset 0 0 0 1px #2f4c7a}
.google-login,.google-login.signed-in{background:#16243c;border:1px solid #2b4266;color:var(--ink)}
.google-login:hover,.google-login.signed-in:hover{background:#1d3050;border-color:#4f8ff7}
.topup-open{background:var(--vv-cta);color:var(--vv-cta-ink);font-weight:800;box-shadow:0 8px 20px rgba(255,122,26,.3),inset 0 1px 0 rgba(255,255,255,.35)}
.topup-open:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(255,122,26,.42),inset 0 1px 0 rgba(255,255,255,.35)}

/* Hero line on the blue band */
.vv-hero{order:-3;grid-column:1/-1;color:#fff;padding:6px 4px 4px;text-align:left}
.vv-hero-kicker{display:inline-block;margin:0 0 8px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:700;letter-spacing:.3px;color:#e6f0ff}
.vv-hero-title{margin:0 0 12px;font-size:clamp(26px,3.4vw,44px);line-height:1.12;font-weight:900;letter-spacing:-.8px;color:#f4f8ff;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.vv-hero-title span{display:inline-block;padding:0 .18em .06em;margin-left:.1em;border-radius:12px;background:var(--vv-cta);color:#fff;transform:rotate(-1.2deg)}
.vv-hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.vv-hero-tags span{padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:600;color:#dbe7fb}

/* Big rounded cards floating on the band */
.voice-demo-panel,.price-calculator,.workspace{background:var(--vv-card);border:1px solid var(--vv-edge);border-radius:24px;box-shadow:var(--vv-shadow)}
.vd-head h2,.price-calculator h2,.tts-editor-heading label{color:#f1f6ff;font-weight:800;letter-spacing:-.2px}
.vd-head h2{font-size:21px}
.vd-status{color:#8fc3ff}

/* Demo cards: name on its own line, play buttons always on the row below (no up/down jumping) */
.vd-grid{gap:12px}
.vd-card{flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:10px!important;padding:13px 14px 14px!important;background:var(--vv-card-2);border:1px solid var(--vv-edge);border-radius:18px;transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.vd-card:hover{background:#1b2d4b;border-color:var(--vv-edge-hi);box-shadow:0 10px 26px rgba(0,0,0,.35);transform:translateY(-2px)}
.vd-card.sel{background:#1b2f50;border-color:var(--vv-blue);box-shadow:0 0 0 3px rgba(79,143,247,.18),0 10px 26px rgba(0,0,0,.35)}
.vd-name{color:#eef4ff;font-weight:800;font-size:15.5px;max-width:100%}
.vd-name:hover{color:#8fc3ff}
.vd-plays{flex-wrap:wrap;gap:8px}
.vd-play{flex-shrink:0}

/* Price calculator */
.pc-bubble,.pc-tip{background:#1b2d4b;border-color:#3a5e94}
.pc-range:focus-visible{outline-color:var(--vv-blue)}

/* Editor */
.tts-editor-heading label{font-size:21px}
.tts-text,.tts-block .tts-text{background:#0f1a2d;border:1px solid var(--vv-edge);border-radius:20px;box-shadow:var(--vv-shadow)}
.tts-text:focus{outline:none;border-color:var(--vv-blue);box-shadow:0 0 0 4px rgba(79,143,247,.16),var(--vv-shadow)}
.tts-block-count,.tts-text::-webkit-scrollbar-track,.tts-text::-webkit-scrollbar-corner,.tts-text::-webkit-resizer{background:#0f1a2d}
#ttsOpenFile,.cleanup-review,#ttsImportStop{border-radius:12px;font-weight:700}
select,input{border-radius:12px}
select:focus,input:focus{outline:none;border-color:var(--vv-blue);box-shadow:0 0 0 3px rgba(79,143,247,.16)}
.tts-create{background:var(--vv-cta)!important;color:#fff!important;border-radius:999px!important;font-weight:800!important;box-shadow:0 12px 28px rgba(255,122,26,.3),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .15s,box-shadow .15s,filter .15s}
.tts-create:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,122,26,.4),inset 0 1px 0 rgba(255,255,255,.3)}

/* Dialogs */
.login-dialog,.topup-dialog,.account-dialog,.text-preview{border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ls-new{background:var(--vv-cta);color:#fff}

@media (max-width:700px){
  body:has(#tts)::before{height:500px;border-radius:0 0 28px 28px}
  header .tabs button{padding:10px 10px}
  .vv-hero{padding:2px 2px 0}
  .vv-hero-kicker{font-size:11.5px;margin-bottom:6px}
  .vv-hero-title{font-size:24px;margin-bottom:8px}
  .vv-hero-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .vv-hero-tags::-webkit-scrollbar{display:none}
  .vv-hero-tags span{flex-shrink:0;font-size:11.5px}
  .vd-head h2,.tts-editor-heading label{font-size:18px}
  .vd-card{padding:10px 11px 11px!important;gap:8px!important;border-radius:14px}
  .vd-name{font-size:13.5px;white-space:normal;overflow:hidden;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;min-height:2.5em}
  .vd-plays{gap:6px}
}

/* Sub-pages keep the same navy base */
body.xn{background:radial-gradient(900px 420px at 90% -10%,rgba(59,130,246,.16),transparent 62%),linear-gradient(180deg,#0f1828 0%,#0b1220 100%);background-color:#0b1220}
.km-card,.ls-order{border-radius:20px}

/* v39: rounded-rectangle play buttons + mood colour groups */
.vd-play{width:40px;height:30px;border-radius:11px}
.vd-play::before{left:7%;right:7%;top:5%;height:40%;border-radius:9px 9px 40% 40%/9px 9px 60% 60%;opacity:.75}
.vd-play::after{border-radius:11px}
.vd-play .vd-ic{width:22px;height:22px;margin-left:1px}
.vd-g1{--c1:#7a2f3d;--c2:#1a0a10;--glow:#be123c}
.vd-g2{--c1:#c4b5fd;--c2:#5b21b6;--glow:#7c3aed}
.vd-g3{--c1:#93c5fd;--c2:#1d4ed8;--glow:#3b82f6}
.vd-g4{--c1:#fff3b0;--c2:#f08a00;--glow:#fbbf24}
.vd-play.vd-g1{box-shadow:0 4px 12px rgba(190,18,60,.35),inset 0 -3px 6px #0006,inset 0 0 0 1px #ff6b8a55}
.vd-head{flex-wrap:wrap;row-gap:6px}
.vd-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-left:auto;font-size:12.5px;color:var(--muted)}
.vd-lg{display:inline-flex;align-items:center;gap:6px}
.vd-lg::before{content:"";width:18px;height:12px;border-radius:5px;background:radial-gradient(120% 120% at 30% 20%,var(--c1) 0%,var(--c2) 70%);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
@media (max-width:700px){
  .vd-play{width:35px;height:27px;border-radius:9px}
  .vd-play::after{border-radius:9px}
  .vd-play::before{border-radius:7px 7px 40% 40%/7px 7px 60% 60%}
  .vd-play .vd-ic{width:19px;height:19px}
  .vd-plays{gap:5px!important}
  .vd-legend{margin-left:0;font-size:11.5px;gap:4px 10px}
}

/* v41: price bubble — price per 10.000 characters on top (large), total + saving below (small) */
.pc-wrap:has(.pc-pts){padding-top:68px}
.pc-bubble.pc-pts{flex-direction:column;align-items:center;gap:1px;padding:6px 14px 6px;top:auto;bottom:calc(100% - 60px)}
.pc-unit{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.1px}
.pc-sub{display:flex;gap:8px;align-items:baseline;font-size:12px}
.pc-pts .pc-rate{font-size:12px;font-weight:600;color:#a9bbd4}
.pc-pts .pc-save{font-size:12px}
.pc-pts.pc-nosave .pc-rate{font-size:17px;font-weight:800;color:#fff}
@media(max-width:1000px){.pc-wrap:has(.pc-pts){padding-top:70px}.pc-unit{font-size:15px}.pc-pts .pc-rate,.pc-pts .pc-save{font-size:11.5px}.pc-pts.pc-nosave .pc-rate{font-size:15px}.pc-bubble.pc-pts{bottom:calc(100% - 62px)}}

/* v41: history page note under the header */
.ls-note{margin:4px 0 12px;padding:10px 14px;border-radius:14px;background:rgba(79,143,247,.08);border:1px solid rgba(79,143,247,.25);color:#c9d8ee;font-size:14px;line-height:1.5}
.ls-note b{color:#eef4ff}

/* v44: floating "Báo lỗi" button (Telegram @vievoice), bottom-right */
.vv-report{position:fixed;right:18px;bottom:18px;z-index:50;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px 0 13px;border-radius:999px;
  background:#172640;border:1px solid #3f6aa8;color:#dbe9ff;font:700 14px/1 var(--vv-sans);text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .15s,background .15s,border-color .15s}
.vv-report svg{color:#6fb0ff;flex-shrink:0}
.vv-report:hover{background:#1d3050;border-color:#6fb0ff;color:#fff;transform:translateY(-2px)}
.vv-report:focus-visible{outline:3px solid rgba(111,176,255,.5);outline-offset:2px}
@media (max-width:700px){body:has(.vv-report){padding-bottom:58px}.vv-report{right:12px;bottom:12px;height:38px;padding:0 13px 0 11px;font-size:13px}}
dialog[open]~.vv-report{display:none}