/* Dark "frosted glass" theme.
   Opt-in via <html data-theme="dark">; every surface is translucent over the
   body gradient so backdrop-filter has something to blur. */

html[data-theme="dark"]{color-scheme:dark;--page:#080d0c;--bg:rgba(17,24,23,.72);--panel:rgba(255,255,255,.055);--ink:#e9f1ec;--text:#b3c2bb;--muted:#8a9a93;--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.07);--accent:#4e9d82;--light:#131b19;--shadow:0 22px 60px -40px #000;--wave-muted:rgba(233,241,236,.20);--wave-played:#37c59b;--wave-played-2:#8ff0d2;--wave-head:#d9fff2}

html[data-theme="dark"] body{
  background:
    radial-gradient(1000px 620px at 4% -14%,rgba(64,157,132,.36) 0%,rgba(64,157,132,0) 62%),
    radial-gradient(820px 520px at 104% -4%,rgba(58,104,148,.30) 0%,rgba(58,104,148,0) 60%),
    radial-gradient(1100px 700px at 50% 118%,rgba(46,104,88,.26) 0%,rgba(46,104,88,0) 62%),
    #070b0a;
  color:var(--ink);
}
html[data-theme="dark"] .studio{background:transparent}

/* sidebar */
html[data-theme="dark"] .sidebar{background:linear-gradient(180deg,rgba(24,34,32,.74),rgba(11,17,16,.86));backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border-right:1px solid rgba(255,255,255,.07);box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
html[data-theme="dark"] .brand{color:#eaf4ef}
html[data-theme="dark"] .nav button{color:#9fb0a8}
html[data-theme="dark"] .nav button:hover{background:rgba(255,255,255,.06);color:#e6f0ea}
html[data-theme="dark"] .nav button.active,html[data-theme="dark"] .nav button.active:hover{background:rgba(111,208,172,.14);color:#8fe0c1;box-shadow:inset 0 0 0 1px rgba(111,208,172,.22)}
html[data-theme="dark"] .nav button.active span:first-child{color:#7fd3b4}
html[data-theme="dark"] .account-footer,html[data-theme="dark"] .account-profile{border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .quota-caption{color:#93a49c}
html[data-theme="dark"] .quota-caption b{color:#b9c9c1}
html[data-theme="dark"] .quota-track{background:rgba(255,255,255,.10)}
html[data-theme="dark"] .quota-track i{background:linear-gradient(90deg,#4e9d82,#8fe0c1)}
html[data-theme="dark"] .quota-figures{color:#8d9d95}
html[data-theme="dark"] .quota-figures b{color:#dcebe4}
html[data-theme="dark"] .account-identity b{color:#e4efe9}
html[data-theme="dark"] .account-identity small{color:#8fa198}
html[data-theme="dark"] .account-avatar{background:rgba(111,208,172,.18);color:#a9e5cc}
html[data-theme="dark"] .account-footer .logout-icon{color:#93a49c}
html[data-theme="dark"] .account-footer .logout-icon:hover{background:rgba(255,255,255,.08);color:#e7f2ec}

/* toolbar */
html[data-theme="dark"] .toolbar{background:rgba(9,14,13,.42);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid rgba(255,255,255,.06)}
html[data-theme="dark"] .toolbar span{color:#94a69d}
html[data-theme="dark"] .toolbar .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#c8d8d0}
html[data-theme="dark"] .toolbar .btn:hover{background:rgba(255,255,255,.09);color:#eef7f2}

/* canvas + panels */
html[data-theme="dark"] .workspace,html[data-theme="dark"] .content{background:transparent}
html[data-theme="dark"] .page-head h1,html[data-theme="dark"] .page-head h2{color:#eaf4ef}
html[data-theme="dark"] .page-head p,html[data-theme="dark"] .subtle{color:#93a49c}
html[data-theme="dark"] .script-card,html[data-theme="dark"] .dialogue-editor{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border-color:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .script-card textarea,html[data-theme="dark"] .dialogue-editor textarea{background:transparent;color:#e6f0ea;caret-color:#7fd3b4}
html[data-theme="dark"] .script-card textarea::placeholder,html[data-theme="dark"] .dialogue-editor textarea::placeholder{color:#7e8f87}
html[data-theme="dark"] .dialogue-example{color:#93a49c}
html[data-theme="dark"] .dialogue-example>div{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08);border-left-color:#5f9d86;color:#cfded7}
html[data-theme="dark"] .dialogue-example b{color:#8fe0c1}
html[data-theme="dark"] .editor-footer,html[data-theme="dark"] .dialogue-editor-footer{border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .editor-footer-left,html[data-theme="dark"] .editor-count small{color:#93a49c}
html[data-theme="dark"] .editor-count #ttsEstimate{color:#7f9088}
html[data-theme="dark"] .balance-ring{color:#7fd3b4}
html[data-theme="dark"] .download-icon{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:#c2d4cb}
html[data-theme="dark"] .download-icon:hover{background:rgba(111,208,172,.16);color:#a9e5cc}
html[data-theme="dark"] .import-icon{color:#9fb0a8}
html[data-theme="dark"] .import-icon:hover{background:rgba(255,255,255,.08);color:#dff0e8}

/* settings panel */
html[data-theme="dark"] .tts-parameters,html[data-theme="dark"] .dialogue-parameters{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border-color:rgba(255,255,255,.07);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .settings-tabs{border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .settings-tabs button{color:#8fa198}
html[data-theme="dark"] .settings-tabs button.active{border-bottom-color:#7fd3b4;color:#e9f1ec}
html[data-theme="dark"] .parameter-caption{color:#a9bbb3}
html[data-theme="dark"] .voice-setting{border-color:rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
html[data-theme="dark"] .voice-setting strong{color:#e9f1ec}
html[data-theme="dark"] .voice-setting small{color:#8fa198}
html[data-theme="dark"] .voice-setting .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#c8d8d0}
html[data-theme="dark"] .voice-setting .btn:hover{background:rgba(111,208,172,.16);color:#a9e5cc}
html[data-theme="dark"] .speed-snap-tools{color:#7f9088}
html[data-theme="dark"] .speed-snap-tools button{color:#8fa198}
html[data-theme="dark"] .speed-snap-tools button.at-default{background:rgba(111,208,172,.16);border-color:rgba(111,208,172,.28);color:#9fe4c8}
html[data-theme="dark"] .speed-snap-tools button:hover{background:rgba(255,255,255,.08);color:#e7f2ec}
html[data-theme="dark"] .billing-badge{background:rgba(111,208,172,.14);border-color:rgba(111,208,172,.24);color:#9fe4c8}
html[data-theme="dark"] .check-label{color:#b3c2bb}

/* range inputs */
html[data-theme="dark"] input[type=range].snap-speed,html[data-theme="dark"] #dialogueDelay{background:linear-gradient(to right,#4e9d82 var(--range-fill,50%),rgba(255,255,255,.12) var(--range-fill,50%))}
html[data-theme="dark"] input[type=range].snap-speed::-webkit-slider-thumb,html[data-theme="dark"] #dialogueDelay::-webkit-slider-thumb{background:#0f1615;border-color:#7fd3b4}

/* library */
html[data-theme="dark"] .library-controls .tabs{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .library-controls .tabs .btn{color:#a3b4ac}
html[data-theme="dark"] .library-controls .tabs .btn.active{background:rgba(111,208,172,.18);color:#a9e5cc}
html[data-theme="dark"] .library-controls .filters label{color:#8fa198}
html[data-theme="dark"] .filter-trigger{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#cddcd5}
html[data-theme="dark"] .filter-trigger:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
html[data-theme="dark"] .filter-trigger.is-open{background:rgba(111,208,172,.14);border-color:rgba(111,208,172,.3);color:#c9efe0}
html[data-theme="dark"] .library-controls .filters input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#e6f0ea}
html[data-theme="dark"] .library-controls .filters .filter-reset-button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#a3b4ac}
html[data-theme="dark"] .filter-popover{background:rgba(18,26,24,.88);border-color:rgba(255,255,255,.10);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);box-shadow:0 26px 70px -30px #000;color:#d6e4dd}
html[data-theme="dark"] .filter-option{color:#c2d3ca}
html[data-theme="dark"] .filter-option:hover,html[data-theme="dark"] .filter-option:focus-visible{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .filter-option[aria-selected=true]{background:rgba(111,208,172,.16);color:#a9e5cc}
html[data-theme="dark"] .voice-card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .voice-card:hover{border-color:rgba(111,208,172,.38);background:rgba(255,255,255,.055)}
html[data-theme="dark"] .voice-card h3{color:#e9f1ec}
html[data-theme="dark"] .voice-card p{color:#a9bab2}
html[data-theme="dark"] .voice-tags{color:#86988f}
html[data-theme="dark"] .voice-actions .filter-icon-action{color:#93a79d}
html[data-theme="dark"] .voice-actions .filter-icon-action:hover{background:rgba(255,255,255,.08);color:#a9e5cc}
html[data-theme="dark"] .voice-actions [data-use]{background:transparent;border-color:rgba(111,208,172,.34);color:#9fe4c8}
html[data-theme="dark"] .voice-actions [data-use]:hover{background:#3f8a74;border-color:#3f8a74;color:#f1fbf6}
html[data-theme="dark"] .pagination{border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .pagination small{color:#8fa198}
html[data-theme="dark"] .pagination .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#c8d8d0}
html[data-theme="dark"] .empty{color:#8fa198}

/* dialogue speakers */
html[data-theme="dark"] .dialogue-speaker{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.09)}
html[data-theme="dark"] .dialogue-speaker[open]{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .speaker-badge{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10);color:#b9cac2}
html[data-theme="dark"] .speaker-summary-name{color:#e2efe8}
html[data-theme="dark"] .dialogue-panel-heading h3{color:#e9f1ec}
html[data-theme="dark"] .dialogue-panel-heading>span{background:rgba(255,255,255,.06);color:#9fb0a8}
html[data-theme="dark"] .speaker-voice-select{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#cddcd5}
html[data-theme="dark"] .speaker-voice-select:hover{border-color:rgba(111,208,172,.4)}
html[data-theme="dark"] .dialogue-speaker .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#c8d8d0}
html[data-theme="dark"] .add-speaker{border-color:rgba(255,255,255,.12)}

/* generation dock */
html[data-theme="dark"] .generation-dock{background:rgba(13,20,19,.78);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -18px 50px -30px #000}
html[data-theme="dark"] .result-caption strong{color:#e9f1ec}
html[data-theme="dark"] .result-caption span,html[data-theme="dark"] .result-caption small{color:#8fa198}
html[data-theme="dark"] .result-timeline small{color:#8fa198}
html[data-theme="dark"] .generation-progress{background:rgba(255,255,255,.10)}
html[data-theme="dark"] .generation-progress i{background:linear-gradient(90deg,#4e9d82,#8fe0c1)}
html[data-theme="dark"] .generation-note{color:#8fa198}
html[data-theme="dark"] .result-downloads{color:#9fc7b6}
html[data-theme="dark"] .result-downloads a{border-color:rgba(255,255,255,.12);color:#cbdcd3}
html[data-theme="dark"] .result-downloads a:hover{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .result-play{background:#3f8a74;color:#f1fbf6}
html[data-theme="dark"] .result-play:hover{background:#4a9d85}

/* dialog + auth */
html[data-theme="dark"] dialog.dialog{background:rgba(16,23,22,.92);backdrop-filter:blur(30px) saturate(150%);-webkit-backdrop-filter:blur(30px) saturate(150%);border:1px solid rgba(255,255,255,.10);color:#e6f0ea;box-shadow:0 40px 120px -40px #000}
html[data-theme="dark"] dialog.dialog::backdrop{background:rgba(3,7,6,.66);backdrop-filter:blur(6px)}
html[data-theme="dark"] .auth-wrap{background:transparent}
html[data-theme="dark"] .auth-card{background:rgba(17,25,23,.8);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);border:1px solid rgba(255,255,255,.10);box-shadow:0 40px 120px -50px #000}
html[data-theme="dark"] .auth-card h1{color:#eaf4ef}
html[data-theme="dark"] .auth-card>p{color:#93a49c}
html[data-theme="dark"] .auth-card .tabs{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .auth-card .tabs .btn{color:#a3b4ac}
html[data-theme="dark"] .auth-card .tabs .btn.active{background:rgba(111,208,172,.18);color:#a9e5cc;box-shadow:none}
html[data-theme="dark"] .auth-card input{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#e6f0ea}
html[data-theme="dark"] .auth-card input::placeholder{color:#7e8f87}

/* form controls + misc */
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#e6f0ea}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder{color:#7e8f87}
html[data-theme="dark"] select option{background:#111917;color:#e6f0ea}
html[data-theme="dark"] .card{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);box-shadow:none}
html[data-theme="dark"] .task-row{border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);color:#c8d8d0}
html[data-theme="dark"] .btn:hover{background:rgba(255,255,255,.09)}
html[data-theme="dark"] .btn.primary{background:#3f8a74;border-color:#3f8a74;color:#f1fbf6;box-shadow:0 10px 30px -18px #3f8a74}
html[data-theme="dark"] .btn.primary:hover{background:#4a9d85;border-color:#4a9d85}
html[data-theme="dark"] #notice{background:rgba(18,26,24,.92);color:#e6f0ea;border:1px solid rgba(255,255,255,.10)}
html[data-theme="dark"] .upload-zone{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.18);color:#c8d8d0}
html[data-theme="dark"] .upload-zone:hover{background:rgba(111,208,172,.10);border-color:rgba(111,208,172,.4)}
html[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:transparent}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}

/* ---- follow-up fixes after visual QA ---- */
html[data-theme="dark"] .library-pane>.pagination{background:transparent;border-top-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .pagination .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#c8d8d0}
html[data-theme="dark"] .voice-actions [data-use].btn{background:transparent;border:1px solid rgba(111,208,172,.34);color:#9fe4c8;box-shadow:none}
html[data-theme="dark"] .voice-actions [data-use].btn:hover{background:#3f8a74;border-color:#3f8a74;color:#f1fbf6}
html[data-theme="dark"] .dialogue-parameters .setting-field #dialogueDelay{background:linear-gradient(to right,#4e9d82 var(--range-fill,0%),rgba(255,255,255,.13) var(--range-fill,0%))}
html[data-theme="dark"] dialog.dialog .btn:not(.primary){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#cddcd5}
html[data-theme="dark"] dialog.dialog .btn:not(.primary):hover{background:rgba(255,255,255,.10)}
html[data-theme="dark"] .voice-avatar{box-shadow:0 0 0 1px rgba(255,255,255,.10)}