:root {
  --bg: #f4f6f8; --surface: #fff; --ink: #101828; --muted: #667085;
  --line: #e4e7ec; --soft: #f2f4f7; --accent: #3155d9; --accent-dark: #2343b8;
  --accent-soft: #eef2ff; --green: #169b62; --danger: #d92d20;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.035), 0 5px 16px rgba(16,24,40,.045);
  --shadow-lg: 0 22px 70px rgba(16,24,40,.18); --radius: 18px; --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: radial-gradient(circle at 78% -8%,rgba(49,85,217,.075),transparent 28%),var(--bg); color: var(--ink); font: 14px/1.5 "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid rgba(105,86,232,.24); outline-offset: 2px; }
.svg-sprite { position: fixed; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg,#111827 0%,#0c121d 100%); color: #f8fafc; padding: 26px 16px 18px; display: flex; flex-direction: column; z-index: 40; box-shadow: inset -1px 0 rgba(255,255,255,.045); }
.brand { display: flex; align-items: center; gap: 7px; padding: 0 9px 30px; font-family: Manrope,sans-serif; font-weight: 700; font-size: 15px; letter-spacing: -.3px; }
.brand-mark { width: 31px; height: 31px; margin-right: 3px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(145deg,#5576f0,#2d4dc6); box-shadow: inset 0 1px rgba(255,255,255,.3),0 8px 24px rgba(49,85,217,.3); }
.brand-mark svg { width: 18px; }
.brand-muted { color: #909399; font-weight: 600; }
.nav { display: grid; gap: 6px; }
.nav-item { position: relative; width: 100%; height: 44px; border: 0; background: transparent; color: #92959b; border-radius: 10px; display: flex; align-items: center; gap: 12px; padding: 0 12px; cursor: pointer; transition: background .2s var(--ease),color .2s; text-align: left; }
.nav-item svg { width: 19px; }
.nav-item:hover { color: #e9e9e7; background: rgba(255,255,255,.055); }
.nav-item.active { color: white; background: rgba(255,255,255,.095); box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.nav-count { margin-left: auto; min-width: 23px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.1); color: #c5c7ca; font-size: 11px; }
.sidebar-foot { margin-top: auto; display: grid; gap: 14px; padding: 0 8px; }
.engine-status { display: flex; align-items: center; gap: 10px; }
.engine-status strong,.engine-status small { display: block; }
.engine-status strong { color: #dddeda; font-size: 12px; font-weight: 600; }
.engine-status small { color: #73767c; font-size: 11px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e4a53c; box-shadow: 0 0 0 4px rgba(228,165,60,.1); }
.status-dot.ready { background: #4ac58b; box-shadow: 0 0 0 4px rgba(74,197,139,.1); }
.status-dot.error { background: #e75e5e; box-shadow: 0 0 0 4px rgba(231,94,94,.1); }
.local-pill { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; color: #777b80; font-size: 11px; display: flex; align-items: center; gap: 7px; }
.local-pill svg { width: 14px; color: #4ac58b; }
.main { min-width: 0; padding-bottom: 104px; }
.topbar { height: 84px; padding: 0 32px; background: rgba(248,250,252,.84); backdrop-filter: blur(18px) saturate(145%); display: flex; align-items: center; gap: 14px; border-bottom: 1px solid rgba(228,231,236,.86); position: sticky; top: 0; z-index: 30; }
.topbar h1 { font: 700 18px/1.2 Manrope,sans-serif; margin: 0 0 3px; letter-spacing: -.4px; }
.topbar p { margin: 0; color: var(--muted); font-size: 12px; }
.top-add { margin-left: auto; }
.menu-button { display: none !important; }
.button { height: 42px; border-radius: 10px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s; text-decoration: none; }
.button svg { width: 17px; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0) scale(.985); }
.button.primary { background: linear-gradient(180deg,#3d61e2,#2d4ec8); color: white; box-shadow: 0 1px 1px rgba(255,255,255,.18) inset,0 7px 18px rgba(49,85,217,.2); }
.button.primary:hover:not(:disabled) { background: linear-gradient(180deg,#3659d6,#2343b8); box-shadow: 0 10px 26px rgba(49,85,217,.27); }
.button.secondary { background: var(--surface); border-color: var(--line); color: #35363a; box-shadow: var(--shadow-sm); }
.button.secondary:hover:not(:disabled) { border-color: #d4d3ce; background: #fbfbf9; }
.button:disabled { opacity: .46; cursor: not-allowed; box-shadow: none; }
.button-loading { display: none; align-items: center; gap: 8px; }
.is-loading .button-label { display: none; }
.is-loading .button-loading { display: flex; }
.spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.secondary .spinner { border-color: #ddd; border-top-color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.page { display: none; padding: 26px 32px; animation: page-in .35s var(--ease); }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
.studio-grid { max-width: 1370px; margin: 0 auto; min-height: calc(100vh - 136px); display: grid; grid-template-columns: minmax(520px,1fr) 340px; gap: 18px; }
.editor-panel,.settings-panel { background: rgba(255,255,255,.96); border: 1px solid rgba(220,224,231,.92); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16,24,40,.025),0 12px 34px rgba(16,24,40,.045); }
.editor-panel { display: flex; flex-direction: column; min-height: 680px; overflow: visible; }
.voice-picker-wrap { position: relative; padding: 20px 22px 17px; border-bottom: 1px solid var(--line); }
.eyebrow { display: block; margin-bottom: 9px; text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 700; color: #898b90; }
.voice-picker { width: 100%; min-height: 60px; border: 1px solid var(--line); background: #fafaf8; padding: 8px 12px 8px 9px; border-radius: 12px; display: flex; align-items: center; gap: 11px; cursor: pointer; text-align: left; transition: border-color .2s,background .2s,box-shadow .2s; }
.voice-picker:hover { background: white; border-color: #d5d3ce; box-shadow: 0 3px 12px rgba(20,20,24,.05); }
.voice-avatar { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: white; font: 700 15px Manrope,sans-serif; }
.gradient-a { background: linear-gradient(145deg,#3155d9,#7289ef); }
.gradient-b { background: linear-gradient(145deg,#087a67,#3db79e); }
.gradient-c { background: linear-gradient(145deg,#d04f45,#ee8c66); }
.gradient-d { background: linear-gradient(145deg,#1d6fa5,#5aa5d2); }
.voice-picker-copy { min-width: 0; display: block; flex: 1; }
.voice-picker-copy strong,.voice-picker-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-picker-copy strong { font-weight: 600; font-size: 14px; }
.voice-picker-copy small { color: var(--muted); margin-top: 1px; font-size: 12px; }
.mini-play { width: 32px; height: 32px; border: 1px solid var(--line); background: white; display: grid; place-items: center; border-radius: 9px; color: #505157; transition: color .2s,background .2s; }
.mini-play:hover { color: var(--accent); background: var(--accent-soft); }
.mini-play svg { width: 15px; fill: currentColor; stroke-width: 1.2; }
.picker-chevron { width: 16px; transform: rotate(90deg); color: #8a8c91; transition: transform .2s; }
.voice-picker.open .picker-chevron { transform: rotate(-90deg); }
.voice-menu { display: none; position: absolute; z-index: 50; left: 22px; right: 22px; top: calc(100% - 10px); padding: 7px; background: white; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-lg); max-height: 280px; overflow: auto; }
.voice-menu.open { display: grid; animation: menu-in .18s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px) scale(.99); } }
.voice-option { border: 0; background: transparent; border-radius: 9px; padding: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
.voice-option:hover,.voice-option.selected { background: #f4f3fb; }
.voice-option .voice-avatar { width: 35px; height: 35px; border-radius: 9px; }
.voice-option-copy { min-width: 0; flex: 1; }
.voice-option strong,.voice-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-option small { font-size: 11px; color: var(--muted); }
.voice-option .check { color: var(--accent); width: 17px; opacity: 0; }
.voice-option.selected .check { opacity: 1; }
.voice-option.add { color: var(--accent); font-weight: 600; padding: 11px; border-top: 1px solid var(--line); border-radius: 0; margin-top: 3px; }
.script-head { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: center; }
.script-head label { font-weight: 600; }
.script-head span { color: #98a2b3; font-size: 11px; font-variant-numeric: tabular-nums; }
.script-head span.near-limit { color: var(--danger); font-weight: 700; }
.direction-bar { margin: 13px 24px 0; min-height: 38px; padding: 5px 6px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.direction-label { height: 26px; padding: 0 7px 0 4px; display: inline-flex; align-items: center; gap: 5px; color: #475467; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; border-right: 1px solid var(--line); }
.direction-label svg { width: 14px; color: var(--accent); }
.tag-chip { height: 26px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #475467; font-size: 10px; font-weight: 600; cursor: pointer; transition: background .16s,color .16s,border-color .16s,transform .16s; }
.tag-chip:hover { color: var(--accent); background: white; border-color: #d9dfea; box-shadow: 0 1px 3px rgba(16,24,40,.06); transform: translateY(-1px); }
.tag-help { margin-left: auto; flex: 0 0 auto; }
#script { width: 100%; flex: 1; min-height: 410px; border: 0; resize: none; padding: 18px 24px; background: transparent; color: #28292c; font-size: 17px; line-height: 1.75; letter-spacing: -.12px; }
#script::placeholder { color: #b5b5b2; }
#script:focus { outline: none; }
.editor-foot { height: 52px; border-top: 1px solid var(--line); padding: 0 22px; color: #a0a1a5; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-right: 3px; border: 1px solid #deded9; background: #fafaf8; border-radius: 5px; color: #6b6d72; box-shadow: 0 1px #d7d7d2; }
.text-button { border: 0; background: transparent; color: #777980; padding: 5px; font-size: 12px; cursor: pointer; }
.text-button:hover { color: var(--accent); }
.settings-panel { padding: 22px; align-self: start; position: sticky; top: 102px; }
.panel-tabs { height: 42px; margin: -5px 0 19px; display: flex; align-items: stretch; gap: 24px; border-bottom: 1px solid var(--line); }
.panel-tab { position: relative; padding: 0 1px; border: 0; background: transparent; color: #98a2b3; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .18s; }
.panel-tab:hover { color: #475467; }
.panel-tab.active { color: var(--ink); }
.panel-tab.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: -1px; border-radius: 2px 2px 0 0; background: var(--accent); }
.panel-tab span { min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; color: #667085; background: #f2f4f7; font-size: 9px; font-variant-numeric: tabular-nums; }
.settings-tab-content { display: none; animation: tab-content-in .22s var(--ease); }
.settings-tab-content.active { display: block; }
@keyframes tab-content-in { from { opacity: 0; transform: translateY(3px); } }
.settings-head { display: flex; align-items: start; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.settings-head h2,.collection-head h2 { font: 700 16px/1.3 Manrope,sans-serif; margin: 0; letter-spacing: -.3px; }
.settings-head p,.collection-head p { color: var(--muted); margin: 3px 0 0; font-size: 12px; }
.setting { padding: 20px 1px 6px; }
.setting-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; font-weight: 600; font-size: 12px; }
.setting-label output { color: #575960; font-size: 11px; font-variant-numeric: tabular-nums; background: #f2f2ee; border-radius: 6px; padding: 2px 7px; }
.info { width: 16px; height: 16px; border: 1px solid #cdcec9; border-radius: 50%; background: transparent; color: #92949a; padding: 0; font-size: 10px; cursor: help; position: relative; }
.info::after { content: attr(data-tip); pointer-events: none; position: absolute; left: 50%; bottom: calc(100% + 8px); width: 210px; transform: translate(-50%,5px); opacity: 0; padding: 8px 10px; background: #1c1e22; color: white; font-size: 11px; line-height: 1.4; text-align: left; font-weight: 400; border-radius: 7px; transition: .15s; z-index: 20; }
.info:hover::after,.info:focus::after { opacity: 1; transform: translate(-50%,0); }
input[type="range"] { width: 100%; height: 4px; appearance: none; border-radius: 3px; background: linear-gradient(90deg,var(--accent) var(--fill,50%),#e5e5df var(--fill,50%)); cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 17px; height: 17px; border-radius: 50%; background: white; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(20,20,30,.2); transition: transform .15s; }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.range-labels { display: flex; justify-content: space-between; color: #aaa; font-size: 9px; margin-top: 7px; }
.switch-row { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 16px; padding: 18px 0; cursor: pointer; }
.switch-row > span:first-child { flex: 1; }
.switch-row strong,.switch-row small { display: block; }
.switch-row strong { font-size: 12px; }
.switch-row small { color: #92949a; font-size: 10px; margin-top: 3px; line-height: 1.35; }
.switch-row input { position: absolute; opacity: 0; }
.switch { position: relative; flex: 0 0 auto; width: 38px; height: 22px; background: #d9d9d4; border-radius: 14px; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .2s var(--ease); }
.switch-row input:checked + .switch { background: var(--accent); }
.switch-row input:checked + .switch::after { transform: translateX(16px); }
.switch-row input:focus-visible + .switch { outline: 3px solid rgba(105,86,232,.2); }
.quality-note { margin: 17px 0; padding: 12px; display: flex; gap: 10px; background: #eef4ff; color: #3155d9; border: 1px solid #dfe7ff; border-radius: 10px; }
.quality-note svg { width: 17px; flex: 0 0 auto; margin-top: 2px; }
.quality-note p { margin: 0; color: #60709b; font-size: 10px; line-height: 1.45; }
.quality-note strong { color: #294bbf; font-size: 11px; }
.generate { --button-progress: 0%; position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 52px; border-radius: 12px; font-size: 13px; letter-spacing: -.08px; }
.generate > span { position: relative; z-index: 2; }
.generate::before { content: ""; position: absolute; z-index: 1; inset: 0 auto 0 0; width: var(--button-progress); background: rgba(255,255,255,.14); transition: width .4s var(--ease); }
.generate.is-loading:disabled { opacity: 1; cursor: progress; }
.generate .spinner { width: 17px; height: 17px; border-width: 2px; }
.generate .spinner { --ring-progress: 8%; border: 0; background: conic-gradient(#fff var(--ring-progress),rgba(255,255,255,.25) 0); -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0); mask: radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0); animation-duration: 1s; }
.generate-meta { margin-top: 9px; display: flex; justify-content: space-between; gap: 10px; color: #98a2b3; font-size: 9px; }
.generate-meta span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-history-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.side-history-head h2 { margin: 0; font: 700 15px/1.3 Manrope,sans-serif; letter-spacing: -.25px; }
.side-history-head p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.side-history-list { max-height: calc(100vh - 235px); padding: 9px 0 2px; overflow: auto; scrollbar-width: thin; }
.side-history-item { min-height: 64px; padding: 10px 2px; display: grid; grid-template-columns: 34px minmax(0,1fr) 28px 28px; align-items: center; gap: 7px; border-bottom: 1px solid #eef0f3; }
.side-history-item:last-child { border-bottom: 0; }
.side-history-play { width: 32px; height: 32px; border: 0; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); cursor: pointer; transition: transform .16s,background .16s; }
.side-history-play:hover { transform: scale(1.04); background: #e1e8ff; }
.side-history-play svg { width: 14px; fill: currentColor; }
.side-history-copy { min-width: 0; }
.side-history-copy strong,.side-history-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-history-copy strong { color: #344054; font-size: 10px; font-weight: 650; }
.side-history-copy small { margin-top: 3px; color: #98a2b3; font-size: 8px; }
.side-history-action { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; display: grid; place-items: center; color: #98a2b3; background: transparent; cursor: pointer; text-decoration: none; transition: color .16s,background .16s; }
.side-history-action:hover { color: var(--accent); background: var(--accent-soft); }
.side-history-action svg { width: 14px; }
.side-history-empty { min-height: 330px; display: grid; place-content: center; justify-items: center; text-align: center; color: #98a2b3; }
.side-history-empty > span { width: 44px; height: 44px; margin-bottom: 11px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-soft); color: var(--accent); }
.side-history-empty strong { color: #475467; font-size: 12px; }
.side-history-empty p { margin: 4px 0 0; font-size: 9px; }
.collection-head { max-width: 1200px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between; }
.card-grid { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(3,minmax(230px,1fr)); gap: 15px; }
.voice-card { position: relative; min-height: 224px; background: white; border: 1px solid var(--line); border-radius: 15px; padding: 20px; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease), box-shadow .22s,border-color .22s; }
.voice-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(30,30,34,.08); border-color: #d9d7d1; }
.voice-card-top { display: flex; align-items: center; gap: 12px; }
.voice-card .voice-avatar { width: 47px; height: 47px; border-radius: 13px; }
.voice-card-copy { min-width: 0; }
.voice-card h3 { font: 700 14px Manrope,sans-serif; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-card .badge { display: inline-block; margin-top: 5px; color: #4f8b6d; background: #ebf7f0; border-radius: 5px; padding: 2px 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.voice-card p { color: var(--muted); font-size: 11px; line-height: 1.55; height: 34px; margin: 16px 0 18px; overflow: hidden; }
.voice-card-actions { display: grid; grid-template-columns: 1fr 38px; gap: 8px; }
.voice-card-actions .button { height: 38px; font-size: 11px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: white; display: inline-grid; place-items: center; cursor: pointer; color: #676970; transition: background .18s,color .18s,border-color .18s; }
.icon-button:hover { background: #f7f6f3; color: var(--ink); border-color: #d6d5d0; }
.icon-button.danger:hover { background: #fff0f0; color: var(--danger); border-color: #f2caca; }
.icon-button svg { width: 17px; }
.add-card { min-height: 224px; border: 1px dashed #cacac4; border-radius: 15px; background: rgba(255,255,255,.36); display: grid; place-items: center; color: #7f8186; cursor: pointer; transition: border-color .2s,color .2s,background .2s; }
.add-card:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.add-card-inner { display: grid; justify-items: center; gap: 8px; }
.add-card span { width: 39px; height: 39px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; }
.add-card strong { font-size: 12px; }
.empty-state { grid-column: 1/-1; min-height: 390px; border: 1px dashed #d0d0ca; background: rgba(255,255,255,.45); border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 30px; }
.empty-state .empty-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 18px; background: var(--accent-soft); color: var(--accent); }
.empty-state h3 { margin: 0; font: 700 16px Manrope,sans-serif; }
.empty-state p { color: var(--muted); margin: 7px 0 18px; font-size: 12px; }
.history-list { max-width: 1200px; margin: auto; display: grid; gap: 9px; }
.history-row { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; display: grid; grid-template-columns: 40px minmax(180px,1fr) 140px 90px 116px; align-items: center; gap: 12px; transition: border-color .2s,box-shadow .2s; }
.history-row:hover { border-color: #d8d7d1; box-shadow: var(--shadow-sm); }
.history-play { width: 38px; height: 38px; border: 0; background: var(--accent-soft); color: var(--accent); border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.history-play svg { width: 16px; fill: currentColor; }
.history-copy { min-width: 0; }
.history-copy strong,.history-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-copy strong { font-size: 12px; }
.history-copy small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.history-meta { color: #74767b; font-size: 11px; }
.history-actions { display: flex; justify-content: end; gap: 6px; }
.history-actions .icon-button { width: 34px; height: 34px; }
.player { position: fixed; z-index: 70; left: 266px; right: 22px; bottom: 18px; height: 72px; padding: 0 12px; overflow: hidden; background: rgba(13,18,28,.97); backdrop-filter: blur(20px) saturate(135%); color: white; border: 1px solid rgba(255,255,255,.11); border-radius: 15px; box-shadow: 0 18px 55px rgba(3,7,18,.28); display: flex; align-items: center; gap: 12px; transform: translateY(120%); opacity: 0; pointer-events: none; transition: transform .35s var(--ease),opacity .25s; }
.player-generation-track { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.08); }
.player-generation-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#6e8bff,#52d6bd); box-shadow: 0 0 12px rgba(110,139,255,.65); transition: width .6s var(--ease); }
.player.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.player-play { width: 40px; height: 40px; border: 0; flex: 0 0 auto; border-radius: 50%; background: white; color: #1c1e22; display: grid; place-items: center; cursor: pointer; transition: transform .15s; }
.player-play:hover { transform: scale(1.04); }
.player-play svg { width: 17px; fill: currentColor; }
.player-info { width: 165px; min-width: 0; }
.player-info strong,.player-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-info strong { font-size: 11px; }
.player-info small { color: #9299a7; font-size: 9px; display: flex; align-items: center; gap: 7px; }
.player-state { display: inline-flex; align-items: center; gap: 4px; color: #aeb8ca; }
.player-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #58d6a7; }
.player-state.streaming { color: #a9b9ff; }
.player-state.streaming::before { background: #7690ff; box-shadow: 0 0 0 4px rgba(118,144,255,.12); animation: status-pulse 1.2s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: .45; transform: scale(.75); } }
.player-time { color: #96999f; font-size: 9px; font-variant-numeric: tabular-nums; }
.timeline { flex: 1; height: 3px !important; background: linear-gradient(90deg,#9d8dff var(--fill,0%),#45474d var(--fill,0%)) !important; }
.timeline::-webkit-slider-thumb { width: 12px !important; height: 12px !important; border: 0 !important; }
.player .icon-button { background: transparent; color: #a4a6ac; border: 0; }
.player .icon-button:hover { color: white; background: rgba(255,255,255,.06); }
.player .icon-button:disabled { opacity: .3; cursor: not-allowed; }
.player-regenerate { width: auto !important; padding: 0 10px; display: inline-flex !important; gap: 6px; color: #c6d0ff !important; font-size: 10px; font-weight: 700; }
.player-regenerate span { display: inline; }
.modal-backdrop,.progress-modal { position: fixed; inset: 0; z-index: 100; background: rgba(13,14,17,.55); backdrop-filter: blur(7px); display: grid; place-items: center; padding: 18px; opacity: 0; pointer-events: none; transition: opacity .22s; }
.modal-backdrop.open,.progress-modal.open { opacity: 1; pointer-events: auto; }
.modal { width: min(520px,100%); max-height: calc(100vh - 36px); overflow: auto; background: white; border-radius: 18px; padding: 24px; box-shadow: var(--shadow-lg); transform: translateY(12px) scale(.985); transition: transform .25s var(--ease); }
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }
.modal-head h2 { margin: 0; font: 700 21px Manrope,sans-serif; letter-spacing: -.5px; }
.field { display: grid; gap: 7px; margin-bottom: 16px; font-size: 12px; font-weight: 600; }
.field small { color: #9a9ba0; font-weight: 400; }
.field input,.field textarea { width: 100%; border: 1px solid #dcdcd7; border-radius: 10px; padding: 11px 12px; background: #fbfbf9; color: var(--ink); resize: vertical; transition: border-color .2s,box-shadow .2s; }
.field input:focus,.field textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(105,86,232,.11); background: white; }
.dropzone { min-height: 160px; margin-bottom: 13px; border: 1.5px dashed #c9c9c3; background: #fafaf7; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: border-color .2s,background .2s; }
.dropzone:hover,.dropzone.dragging { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload-icon { width: 40px; height: 40px; margin-bottom: 10px; border-radius: 11px; background: white; box-shadow: var(--shadow-sm); display: grid; place-items: center; color: var(--accent); }
.dropzone strong { font-size: 12px; }
.dropzone small { margin-top: 3px; color: #929399; font-size: 10px; }
.reference-preview { display: none; width: 100%; height: 40px; margin-bottom: 14px; }
.reference-preview.visible { display: block; }
.advanced { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 16px 0; padding: 12px 0; }
.advanced summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; font-weight: 600; font-size: 11px; }
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary svg { width: 15px; transform: rotate(90deg); transition: transform .2s; }
.advanced[open] summary svg { transform: rotate(-90deg); }
.advanced .field { margin: 14px 0 2px; }
.consent { color: #898b90; font-size: 10px; }
.modal-actions { display: flex; justify-content: end; gap: 9px; margin-top: 20px; }
.progress-card { width: min(460px,100%); background: white; border-radius: 19px; padding: 32px; text-align: center; box-shadow: var(--shadow-lg); }
.progress-orb { width: 58px; height: 58px; margin: 0 auto 18px; display: grid; place-items: center; color: white; border-radius: 17px; background: linear-gradient(145deg,#806cf1,#5d48db); box-shadow: 0 12px 30px rgba(105,86,232,.25); animation: pulse 2s ease-in-out infinite; }
.progress-orb svg { width: 28px; }
@keyframes pulse { 50% { transform: scale(1.035); box-shadow: 0 15px 38px rgba(105,86,232,.32); } }
.progress-card h2 { margin: 0 0 5px; font: 700 18px Manrope,sans-serif; }
.progress-card > p { margin: 0; color: var(--muted); font-size: 12px; }
.progress-track { height: 7px; overflow: hidden; margin: 25px 0 9px; border-radius: 5px; background: #ecece7; }
.progress-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,#7863ea,#a17bf0); transition: width .45s var(--ease); position: relative; overflow: hidden; }
.progress-track span::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation: shimmer 1.5s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; color: #8b8d92; font-size: 10px; text-align: left; }
.progress-meta strong { color: #5e50b7; font-variant-numeric: tabular-nums; }
.progress-help { margin-top: 20px !important; padding-top: 17px; border-top: 1px solid var(--line); color: #a0a1a6 !important; font-size: 10px !important; }
.toast-stack { position: fixed; z-index: 150; top: 18px; right: 18px; width: min(360px,calc(100vw - 36px)); display: grid; gap: 8px; }
.toast { background: #1c1e22; color: white; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.2); display: flex; gap: 10px; align-items: start; animation: toast-in .3s var(--ease); }
.toast.error { background: #351d20; border-color: rgba(244,115,125,.24); }
.toast-icon { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgba(100,220,159,.15); color: #6fdda5; }
.toast.error .toast-icon { background: rgba(244,115,125,.14); color: #f17680; }
.toast strong,.toast small { display: block; }
.toast strong { font-size: 11px; }
.toast small { color: #adafb4; font-size: 10px; margin-top: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(10px); } }
.skeleton { position: relative; overflow: hidden; background: #e9e9e5 !important; color: transparent !important; border-color: transparent !important; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation: shimmer 1.3s infinite; }
.skeleton-card { height: 220px; border-radius: 15px; }
.mobile-scrim { display: none; }
@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 214px minmax(0,1fr); }
  .studio-grid { grid-template-columns: minmax(400px,1fr) 300px; gap: 14px; }
  .page,.topbar { padding-left: 22px; padding-right: 22px; }
  .player { left: 234px; }
  .card-grid { grid-template-columns: repeat(2,minmax(220px,1fr)); }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; transform: translateX(-100%); width: 244px; transition: transform .28s var(--ease); }
  .sidebar.open { transform: translateX(0); }
  .mobile-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,.38); }
  .mobile-scrim.open { display: block; }
  .menu-button { display: grid !important; margin-right: 2px; }
  .studio-grid { display: block; }
  .settings-panel { margin-top: 16px; }
  .editor-panel { min-height: 600px; }
  .player { left: 14px; right: 14px; bottom: 12px; }
  .history-row { grid-template-columns: 40px minmax(120px,1fr) 80px 70px; }
  .history-row .history-meta:nth-of-type(2) { display: none; }
}
@media (max-width: 570px) {
  .topbar { height: 72px; padding: 0 14px; }
  .topbar p,.top-add { display: none; }
  .page { padding: 14px; }
  .editor-panel { min-height: calc(100vh - 100px); border-radius: 13px; }
  .settings-panel { border-radius: 13px; }
  .voice-picker-wrap { padding: 16px; }
  .voice-menu { left: 16px; right: 16px; }
  #script { font-size: 16px; padding: 17px; }
  .script-head { padding-left: 17px; padding-right: 17px; }
  .editor-foot { padding: 0 16px; }
  .collection-head { align-items: end; }
  .collection-head p { display: none; }
  .card-grid { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 38px minmax(0,1fr) 66px; }
  .history-row > .history-meta { display: none; }
  .player { height: 62px; gap: 9px; }
  .player-info { width: 90px; }
  .player-time { display: none; }
  .player #closePlayer { display: none; }
  .player-regenerate span { display: none; }
  .player-regenerate { width: 38px !important; padding: 0; }
  .modal { padding: 20px; }
  .progress-card { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* V4.2 · warm graphite + jade glass system */
:root {
  --bg: #efeee9; --surface: rgba(255,255,252,.78); --ink: #1b211e; --muted: #6f7873;
  --line: rgba(46,57,52,.13); --soft: rgba(243,244,239,.72); --accent: #137767;
  --accent-dark: #0c5e53; --accent-soft: #e2f1ed; --green: #188761; --danger: #c8473d;
  --shadow-sm: 0 1px 2px rgba(25,31,28,.04),0 8px 22px rgba(25,31,28,.055);
  --shadow-lg: 0 26px 80px rgba(25,31,28,.18); --radius: 20px;
}
body { background: radial-gradient(circle at 76% -10%,rgba(31,135,113,.14),transparent 31%),radial-gradient(circle at 42% 108%,rgba(184,151,88,.09),transparent 35%),var(--bg); }
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible { outline-color: rgba(19,119,103,.25); }
.app-shell { grid-template-columns: 248px minmax(0,1fr); }
.sidebar { background: linear-gradient(160deg,#1d211f 0%,#111412 100%); box-shadow: inset -1px 0 rgba(255,255,255,.055),12px 0 40px rgba(22,28,25,.06); }
.brand-mark { background: linear-gradient(145deg,#2f9d87,#0d6557); box-shadow: inset 0 1px 1px rgba(255,255,255,.42),inset 0 -1px 1px rgba(0,0,0,.2),0 9px 24px rgba(20,119,101,.3); }
.brand-muted { color: #848c87; }
.nav-item { color: #8e9691; border: 1px solid transparent; }
.nav-item:hover { color: #f1f4f1; background: rgba(255,255,255,.055); }
.nav-item.active { color: #fff; background: linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.075)); border-color: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.08),0 7px 20px rgba(0,0,0,.13); }
.status-dot.ready { background: #49c997; box-shadow: 0 0 0 4px rgba(73,201,151,.11),0 0 14px rgba(73,201,151,.24); }
.main { padding-bottom: 34px; }
.topbar { background: rgba(246,245,240,.72); border-bottom-color: rgba(54,63,58,.1); backdrop-filter: blur(24px) saturate(150%); }
.button { border-radius: 12px; box-shadow: inset 0 1px rgba(255,255,255,.55),inset 0 -1px rgba(20,25,22,.08),0 6px 14px rgba(29,37,33,.08); }
.button.primary { background: linear-gradient(180deg,#228b79 0%,#106b5d 56%,#0b5b50 100%); border-color: rgba(7,77,65,.76); color: #fff; text-shadow: 0 1px rgba(0,0,0,.2); box-shadow: inset 0 1px 1px rgba(255,255,255,.32),inset 0 -2px 2px rgba(0,0,0,.18),0 9px 20px rgba(14,103,89,.22); }
.button.primary:hover:not(:disabled) { background: linear-gradient(180deg,#289883,#137565 56%,#0c6256 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.38),inset 0 -2px 2px rgba(0,0,0,.18),0 12px 26px rgba(14,103,89,.28); }
.button.secondary,.glass-button { color: #35403a; background: linear-gradient(180deg,rgba(255,255,255,.76),rgba(247,248,244,.54)); border: 1px solid rgba(49,61,55,.14); backdrop-filter: blur(18px) saturate(145%); box-shadow: inset 0 1px rgba(255,255,255,.95),inset 0 -1px rgba(47,56,51,.07),0 6px 18px rgba(35,44,39,.08); }
.button.secondary:hover:not(:disabled),.glass-button:hover:not(:disabled) { color: var(--accent-dark); background: rgba(255,255,255,.88); border-color: rgba(19,119,103,.23); }
.editor-panel,.settings-panel { background: linear-gradient(155deg,rgba(255,255,253,.88),rgba(249,249,245,.72)); border-color: rgba(51,62,56,.13); backdrop-filter: blur(26px) saturate(135%); box-shadow: inset 0 1px rgba(255,255,255,.9),0 18px 45px rgba(31,39,35,.075); }
.editor-panel { overflow: hidden; min-height: max(570px,calc(100vh - 136px)); }
.voice-picker { background: linear-gradient(180deg,rgba(255,255,255,.82),rgba(246,247,243,.68)); border-color: rgba(48,61,54,.14); box-shadow: inset 0 1px rgba(255,255,255,.92),0 4px 12px rgba(33,42,37,.04); }
.voice-picker:hover { border-color: rgba(19,119,103,.24); box-shadow: inset 0 1px #fff,0 7px 18px rgba(26,69,58,.08); }
.gradient-a { background: linear-gradient(145deg,#1c8b77,#53ad98); }
.voice-option:hover,.voice-option.selected { background: #edf5f2; }
.direction-bar { background: rgba(244,246,241,.72); border-color: rgba(49,61,55,.13); box-shadow: inset 0 1px rgba(255,255,255,.75); }
.tag-chip:hover { border-color: rgba(19,119,103,.18); background: rgba(255,255,255,.82); }
#script { color: #29312d; min-height: 250px; }
.settings-panel { top: 102px; }
.panel-tab.active::after { background: linear-gradient(90deg,#147a69,#4ba28f); }
.setting-label output { color: #48534d; background: rgba(234,236,230,.8); box-shadow: inset 0 1px rgba(255,255,255,.7); }
input[type="range"] { background: linear-gradient(90deg,var(--accent) var(--fill,50%),#dcdfd8 var(--fill,50%)); }
input[type="range"]::-webkit-slider-thumb { border-color: var(--accent); box-shadow: 0 1px 5px rgba(18,77,65,.24),inset 0 1px #fff; }
.switch-row input:focus-visible + .switch { outline-color: rgba(19,119,103,.2); }
.quality-note { background: linear-gradient(145deg,rgba(225,242,237,.9),rgba(239,246,240,.72)); color: var(--accent); border-color: rgba(19,119,103,.13); box-shadow: inset 0 1px rgba(255,255,255,.72); }
.quality-note p { color: #5f7770; }
.quality-note strong { color: var(--accent-dark); }
.side-history-play,.history-play { color: var(--accent); background: var(--accent-soft); }
.side-history-play:hover { background: #d5eae4; }
.history-row,.voice-card { background: rgba(255,255,253,.76); backdrop-filter: blur(18px); }
.editor-foot { min-height: 78px; height: auto; padding: 13px 20px; gap: 16px; background: linear-gradient(180deg,rgba(250,250,247,.58),rgba(242,243,238,.76)); border-top-color: rgba(45,56,50,.11); }
.editor-foot-copy { min-width: 0; display: grid; gap: 4px; }
.editor-foot-copy strong { color: #4b5751; font-size: 10px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-foot-copy > span { color: #959c97; font-size: 9px; }
.editor-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
.editor-actions .glass-button { height: 44px; padding: 0 17px; }
.generate { width: auto; min-width: 184px; height: 44px; border-radius: 12px; font-size: 12px; }
.kbd { background: rgba(255,255,255,.62); border-color: rgba(48,59,53,.14); box-shadow: inset 0 1px #fff,0 1px 2px rgba(25,32,28,.08); }
.player { position: relative; z-index: 5; left: auto; right: auto; bottom: auto; width: calc(100% - 40px); min-height: 0; max-height: 0; height: auto; margin: 0 20px; padding: 0 12px; gap: 11px; color: #eef5f1; background: linear-gradient(135deg,rgba(29,38,34,.95),rgba(16,23,20,.96)); border: 1px solid transparent; border-radius: 15px; box-shadow: none; backdrop-filter: blur(24px) saturate(140%); transform: translateY(5px); opacity: 0; pointer-events: none; transition: max-height .35s var(--ease),min-height .35s var(--ease),margin .35s var(--ease),opacity .22s,transform .3s var(--ease),box-shadow .3s; }
.player.visible { min-height: 72px; max-height: 72px; margin-top: 4px; margin-bottom: 16px; border-color: rgba(255,255,255,.11); box-shadow: inset 0 1px rgba(255,255,255,.09),inset 0 -1px rgba(0,0,0,.22),0 12px 28px rgba(25,34,29,.14); transform: translateY(0); opacity: 1; pointer-events: auto; }
.player-generation-track span { background: linear-gradient(90deg,#58c3a6,#b6d875); box-shadow: 0 0 12px rgba(88,195,166,.55); }
.player-play { background: linear-gradient(180deg,#fff,#e8eee9); color: #17221d; box-shadow: inset 0 1px #fff,inset 0 -2px 2px rgba(32,43,37,.12),0 6px 16px rgba(0,0,0,.2); }
.player-play:hover { transform: translateY(-1px) scale(1.035); }
.player-state.streaming { color: #9cd8c9; }
.player-state.streaming::before { background: #66cfaf; box-shadow: 0 0 0 4px rgba(102,207,175,.12); }
.timeline { background: linear-gradient(90deg,#67c9ae var(--fill,0%),rgba(255,255,255,.2) var(--fill,0%)) !important; }
.player-regenerate { color: #b9e1d6 !important; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(255,255,255,.055) !important; box-shadow: inset 0 1px rgba(255,255,255,.07); }
.player .icon-button:hover { color: #fff; background: rgba(255,255,255,.1); }
.modal { background: rgba(255,255,252,.92); backdrop-filter: blur(28px); }
.field input,.field textarea,.dropzone { background: rgba(248,249,245,.72); }
.field input:focus,.field textarea:focus { box-shadow: 0 0 0 3px rgba(19,119,103,.11); }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 214px minmax(0,1fr); }
  .player { left: auto; right: auto; bottom: auto; }
}
@media (max-width: 820px) {
  .player { left: auto; right: auto; bottom: auto; width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
  .editor-panel { min-height: max(560px,calc(100vh - 104px)); }
  .editor-foot { align-items: flex-end; }
  .editor-foot-copy > span { display: none; }
}
@media (max-width: 570px) {
  .editor-panel { min-height: calc(100vh - 100px); }
  #script { min-height: 230px; }
  .editor-foot { padding: 12px; display: grid; }
  .editor-foot-copy { display: none; }
  .editor-actions { width: 100%; }
  .editor-actions .glass-button { flex: 0 0 auto; }
  .generate { min-width: 0; flex: 1; }
  .player { height: auto; }
  .player.visible { min-height: 64px; max-height: 64px; }
}

/* V4.3 · original monochrome studio */
:root {
  --bg: #f3f3f1; --surface: rgba(255,255,255,.82); --ink: #171817; --muted: #737573;
  --line: rgba(18,20,19,.13); --soft: rgba(246,246,244,.76); --accent: #1b1c1b;
  --accent-dark: #050505; --accent-soft: #eeeeeb; --green: #2f815d;
}
body { background: radial-gradient(circle at 72% -18%,rgba(0,0,0,.055),transparent 34%),linear-gradient(145deg,#f7f7f5,#eeeeeb); }
.topbar { background: rgba(250,250,248,.78); }
.brand-mark { background: linear-gradient(145deg,#363836,#090a09); box-shadow: inset 0 1px 1px rgba(255,255,255,.38),inset 0 -1px 1px rgba(0,0,0,.35),0 9px 24px rgba(0,0,0,.2); }
.button.primary { background: linear-gradient(180deg,#303230 0%,#171817 55%,#070807 100%); border-color: #050505; box-shadow: inset 0 1px 1px rgba(255,255,255,.3),inset 0 -2px 2px rgba(0,0,0,.35),0 9px 20px rgba(0,0,0,.18); }
.button.primary:hover:not(:disabled) { background: linear-gradient(180deg,#3d3f3d 0%,#202220 55%,#0b0c0b 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 2px rgba(0,0,0,.35),0 12px 26px rgba(0,0,0,.24); }
.button.secondary:hover:not(:disabled),.glass-button:hover:not(:disabled) { color: #050505; border-color: rgba(0,0,0,.27); }
.voice-picker:hover { border-color: rgba(0,0,0,.25); box-shadow: inset 0 1px #fff,0 7px 18px rgba(0,0,0,.07); }
.gradient-a { background: linear-gradient(145deg,#202220,#747774); }
.voice-option:hover,.voice-option.selected { background: #f0f0ed; }
.panel-tab.active::after { background: linear-gradient(90deg,#090a09,#777a77); }
input[type="range"] { background: linear-gradient(90deg,#222422 var(--fill,50%),#dedfdb var(--fill,50%)); }
input[type="range"]::-webkit-slider-thumb { border-color: #1c1d1c; box-shadow: 0 1px 5px rgba(0,0,0,.22),inset 0 1px #fff; }
.quality-note { background: linear-gradient(145deg,rgba(240,240,237,.94),rgba(249,249,247,.76)); color: #222422; border-color: rgba(0,0,0,.12); }
.quality-note strong { color: #111211; }
.quality-note p { color: #6f716f; }
.side-history-play,.history-play { color: #171817; background: #ecece9; }
.side-history-play:hover { background: #dfdfdb; }
.player-generation-track span { background: linear-gradient(90deg,#f2f2ef,#8d918d); box-shadow: 0 0 12px rgba(255,255,255,.35); }
.player-state.streaming { color: #d6d8d6; }
.player-state.streaming::before { background: #f1f2ef; box-shadow: 0 0 0 4px rgba(255,255,255,.1); }
.timeline { background: linear-gradient(90deg,#f4f4f1 var(--fill,0%),rgba(255,255,255,.2) var(--fill,0%)) !important; }
.player-regenerate { color: #e5e6e3 !important; }
.field input:focus,.field textarea:focus { box-shadow: 0 0 0 3px rgba(0,0,0,.09); }

/* V4.4 · obsidian production studio */
:root {
  color-scheme: dark;
  --bg: #0d0e0e; --surface: #111212; --ink: #f4f4f2; --muted: #898b88;
  --line: #292a29; --soft: #181919; --accent: #f4f4f1; --accent-dark: #ffffff;
  --accent-soft: #242525; --danger: #e26d66; --radius: 0;
}
html,body { height: 100%; overflow: hidden; }
body { background: #0d0e0e; color: var(--ink); }
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }
.app-shell { height: 100vh; min-height: 0; grid-template-columns: 250px minmax(0,1fr); background: #0d0e0e; }
.sidebar { position: relative; height: 100vh; padding: 20px 14px 18px; background: #151616; border-right: 1px solid #292a29; box-shadow: none; }
.brand { min-height: 44px; padding: 0 8px 24px; font-size: 15px; }
.brand-mark { width: 29px; height: 29px; border-radius: 8px; background: linear-gradient(145deg,#474947,#090a09); box-shadow: inset 0 1px rgba(255,255,255,.18),0 5px 14px rgba(0,0,0,.32); }
.brand-muted { color: #777a77; }
.nav { gap: 4px; }
.nav-item { height: 42px; color: #a2a4a1; border-radius: 8px; font-size: 13px; }
.nav-item:hover { background: #1d1e1e; color: #fff; }
.nav-item.active { background: #262727; color: #fff; border: 1px solid #303231; box-shadow: inset 0 1px rgba(255,255,255,.045); }
.sidebar-foot { padding: 0 8px; }
.engine-status strong { color: #e5e6e3; }
.engine-status small,.local-pill { color: #727572; }
.status-dot.ready { background: #8e9390; box-shadow: 0 0 0 4px rgba(255,255,255,.055); }
.local-pill svg { color: #aeb2ae; }
.main { height: 100vh; min-height: 0; padding: 0; overflow: hidden; background: #0d0e0e; }
.topbar { position: relative; top: auto; height: 58px; padding: 0 20px; background: #101111; border-bottom: 1px solid #292a29; backdrop-filter: none; }
.topbar h1 { color: #e8e9e6; font: 600 14px/1.2 "DM Sans",sans-serif; letter-spacing: -.1px; }
.topbar p { display: none; }
.top-add { height: 34px; padding: 0 13px; color: #d7d8d5 !important; background: #171818 !important; border-color: #303130 !important; box-shadow: none !important; }
.page { padding: 0; animation: none; color: var(--ink); }
#page-studio.active { display: block; height: calc(100vh - 58px); }
.studio-grid { max-width: none; width: 100%; height: 100%; min-height: 0; margin: 0; display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 0; }
.editor-panel,.settings-panel { background: #0e0f0f; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }
.editor-panel { position: relative; min-height: 0; height: 100%; overflow: hidden; border-right: 1px solid #292a29; }
.script-head { position: absolute; z-index: 4; right: 300px; bottom: 27px; padding: 0; }
.script-head label { display: none; }
.script-head span { color: #858783; font-size: 11px; }
.editor-panel:has(.player.visible) .script-head { bottom: 119px; }
#script { width: 100%; height: 100%; min-height: 0; padding: 76px 88px 106px; color: #efefed; background: #0e0f0f; font-size: 18px; line-height: 1.7; caret-color: #fff; }
#script::placeholder { color: #505250; }
#script::selection { background: rgba(255,255,255,.18); }
.editor-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; min-height: 82px; height: 82px; padding: 0 28px; border-top: 1px solid #202121; background: #0e0f0f; transition: bottom .32s var(--ease); }
.editor-panel:has(.player.visible) .editor-foot { bottom: 92px; }
.editor-foot-copy { margin-right: auto; }
.editor-foot-copy strong { color: #9a9c99; font-size: 10px; }
.editor-foot-copy > span { color: #656865; }
.kbd { color: #aaa; background: #181919; border-color: #343534; box-shadow: none; }
.editor-actions { margin-left: auto; }
.editor-actions .glass-button { height: 42px; color: #b8bab7; background: #151616; border-color: #2e302e; box-shadow: inset 0 1px rgba(255,255,255,.04); backdrop-filter: none; }
.editor-actions .glass-button:hover:not(:disabled) { color: #fff; background: #1c1d1d; border-color: #414341; }
.generate { min-width: 178px; height: 44px; color: #111 !important; background: linear-gradient(180deg,#fff,#e7e7e4) !important; border: 1px solid #fff !important; border-radius: 9px; text-shadow: none !important; box-shadow: inset 0 1px #fff,inset 0 -1px rgba(0,0,0,.12),0 7px 18px rgba(0,0,0,.25) !important; }
.generate:hover:not(:disabled) { background: #fff !important; transform: translateY(-1px); }
.generate:disabled { color: #777 !important; background: #2a2b2a !important; border-color: #343534 !important; box-shadow: none !important; }
.generate .spinner { background: conic-gradient(#111 var(--ring-progress),rgba(0,0,0,.18) 0); }
.settings-panel { position: relative; top: auto; align-self: stretch; height: 100%; padding: 0 22px 26px; overflow: hidden; background: #101111; }
.panel-tabs { height: 58px; margin: 0 0 18px; gap: 20px; border-color: #292a29; }
.panel-tab { color: #828481; font-size: 13px; font-weight: 500; }
.panel-tab:hover { color: #c8cac7; }
.panel-tab.active { color: #f1f1ef; }
.panel-tab.active::after { height: 1px; background: #f4f4f1; }
.panel-tab span { color: #8d8f8c; background: #202121; }
.settings-tab-content { height: calc(100vh - 135px); overflow-y: auto; overflow-x: hidden; padding-right: 3px; scrollbar-color: #383a38 transparent; scrollbar-width: thin; }
.voice-picker-wrap { padding: 0 0 20px; border: 0; }
.eyebrow { margin-bottom: 8px; color: #d5d6d3; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.voice-picker { min-height: 48px; padding: 7px 10px; color: #f1f2ef; background: #111212; border: 1px solid #313231; border-radius: 9px; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.voice-picker:hover { border-color: #50524f; box-shadow: none; }
.voice-avatar { color: #f4f4f2; background: linear-gradient(145deg,#626562,#252625); }
.voice-picker-copy small { color: #7d807d; }
.mini-play { color: #ddd; background: #1d1e1e; border-color: #343634; }
.voice-menu { left: 0; right: 0; color: #e8e9e6; background: #181919; border-color: #373837; box-shadow: 0 18px 44px rgba(0,0,0,.5); }
.voice-option:hover,.voice-option.selected { background: #262727; }
.voice-option small { color: #888b88; }
.voice-option.add { color: #f2f2ef; border-color: #303130; }
.settings-head { padding: 0 0 12px; border-color: #292a29; }
.settings-head h2 { color: #ececea; font-size: 13px; font-family: "DM Sans",sans-serif; font-weight: 600; }
.settings-head p { color: #727572; font-size: 10px; }
.text-button { color: #777a77; }
.text-button:hover { color: #fff; }
.setting { padding: 19px 0 7px; }
.setting-label { margin-bottom: 10px; color: #e5e6e3; font-size: 12px; }
.setting-label output { color: #a4a6a3; background: #1c1d1d; }
.info { border-color: #555754; color: #999b98; }
.range-labels { color: #737572; font-size: 10px; }
input[type="range"] { height: 3px; background: linear-gradient(90deg,#f2f2ef var(--fill,50%),#2b2c2b var(--fill,50%)); }
input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; background: #f4f4f1; border: 0; box-shadow: 0 1px 5px rgba(0,0,0,.55); }
.switch-row { border-color: #292a29; }
.switch-row strong { color: #e5e6e3; }
.switch-row small { color: #777a77; }
.switch { background: #303130; }
.switch-row input:checked + .switch { background: #f2f2ef; }
.switch-row input:checked + .switch::after { background: #111; }
.quality-note { color: #d8dad7; background: #181919; border-color: #303130; }
.quality-note strong { color: #eee; }
.quality-note p { color: #858885; }
.side-history-head { border-color: #292a29; }
.side-history-head h2 { color: #eee; }
.side-history-head p { color: #7e817e; }
.side-history-list { max-height: calc(100vh - 190px); }
.side-history-item { border-color: #292a29; }
.side-history-copy strong { color: #dedfdd; }
.side-history-copy small { color: #777a77; }
.side-history-play,.history-play { color: #111; background: #efefec; }
.side-history-action { color: #8c8f8c; }
.side-history-action:hover { color: #fff; background: #242525; }
.side-history-empty strong { color: #ddd; }
.side-history-empty > span { color: #ddd; background: #232424; }
.player { position: fixed; z-index: 60; left: 250px; right: 0; bottom: 0; width: auto; min-height: 92px; max-height: 92px; height: 92px; margin: 0; padding: 14px 22px; display: grid; grid-template-columns: minmax(190px,310px) auto 46px minmax(180px,1fr) auto auto 38px 38px; align-items: center; gap: 12px; color: #eeeeec; background: rgba(14,15,15,.985); border: 0; border-top: 1px solid #303130; border-radius: 0; box-shadow: 0 -14px 35px rgba(0,0,0,.14); backdrop-filter: blur(20px); transform: translateY(102%); opacity: 1; pointer-events: none; transition: transform .32s var(--ease); }
.player.visible { min-height: 92px; max-height: 92px; margin: 0; border-color: #303130; box-shadow: 0 -14px 35px rgba(0,0,0,.14); transform: translateY(0); opacity: 1; pointer-events: auto; }
.player-info { order: 1; width: auto; min-width: 0; }
.player-info strong { color: #f3f3f1; font-size: 12px; }
.player-info small { color: #818481; font-size: 10px; }
.player-state::before { background: #a7aaa7; }
#currentTime { order: 2; }
.player-play { order: 3; width: 46px; height: 46px; color: #111; background: #f8f8f5; border: 1px solid #fff; box-shadow: 0 5px 16px rgba(0,0,0,.34); }
.player-play:hover { transform: scale(1.055); }
.timeline { order: 4; height: 3px !important; background: linear-gradient(90deg,#f5f5f2 var(--fill,0%),#3a3b3a var(--fill,0%)) !important; }
.timeline::-webkit-slider-thumb { width: 11px !important; height: 11px !important; background: #fff !important; }
#duration { order: 5; }
.player-regenerate { order: 6; height: 38px; color: #e6e7e4 !important; background: #181919 !important; border: 1px solid #323332 !important; border-radius: 8px; }
#downloadAudio { order: 7; }
#closePlayer { order: 8; }
.player .icon-button { color: #a1a3a0; background: transparent; border: 0; }
.player .icon-button:hover { color: #fff; background: #242525; }
.player-generation-track { top: 0; height: 2px; background: #252625; }
.player-generation-track span { background: #f4f4f1; box-shadow: none; }
.modal-backdrop,.progress-modal { background: rgba(0,0,0,.72); }
.modal,.progress-card { color: #eeeeec; background: #171818; border: 1px solid #343534; box-shadow: 0 28px 80px rgba(0,0,0,.55); }
.field input,.field textarea,.dropzone { color: #eee; background: #101111; border-color: #343534; }
.field input:focus,.field textarea:focus { color: #fff; background: #111; border-color: #666; box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.dropzone:hover,.dropzone.dragging { color: #fff; background: #1b1c1c; border-color: #777; }
.upload-icon { color: #eee; background: #272828; }
.advanced { border-color: #343534; }
.progress-orb { color: #111; background: #f1f1ee; box-shadow: none; }
.progress-track { background: #303130; }
.progress-track span { background: #f3f3f0; }
.progress-meta strong { color: #fff; }
.toast { background: #202121; border-color: #3a3b3a; }
#page-voices,#page-history { height: calc(100vh - 58px); overflow: auto; padding: 28px 32px 120px; background: #0e0f0f; }
.collection-head h2,.empty-state h3,.voice-card h3,.history-copy strong { color: #ededeb; }
.collection-head p,.empty-state p,.voice-card p,.history-copy small,.history-meta { color: #858885; }
.voice-card,.history-row { background: #151616; border-color: #303130; box-shadow: none; }
.voice-card:hover,.history-row:hover { border-color: #4a4c49; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.voice-card .badge { color: #c8cac7; background: #292a29; }
.button.secondary { color: #e4e5e2; background: #1b1c1c; border-color: #353635; box-shadow: none; }
.button.secondary:hover:not(:disabled) { color: #fff; background: #242525; border-color: #50524f; }
.icon-button { color: #aaa; background: #1a1b1b; border-color: #353635; }
.icon-button:hover { color: #fff; background: #242525; border-color: #4a4c49; }
.add-card,.empty-state { color: #8b8e8b; background: #121313; border-color: #373837; }
.skeleton { background: #242525 !important; }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 214px minmax(0,1fr); }
  .studio-grid { grid-template-columns: minmax(0,1fr) 350px; }
  .player { left: 214px; }
  #script { padding-left: 50px; padding-right: 50px; }
}
@media (max-width: 820px) {
  html,body { overflow: auto; }
  .app-shell { display: block; height: auto; min-height: 100vh; }
  .main { height: auto; min-height: 100vh; overflow: visible; }
  .studio-grid { display: block; height: auto; }
  #page-studio.active { height: auto; }
  .editor-panel { height: calc(100vh - 58px); min-height: 560px; border-right: 0; }
  .settings-panel { height: auto; min-height: 650px; border-top: 1px solid #292a29; padding-bottom: 120px; }
  .settings-tab-content { height: auto; max-height: none; overflow: visible; }
  .player { left: 0; }
  #script { padding: 48px 24px 115px; }
}
@media (max-width: 570px) {
  .topbar { height: 58px; }
  .editor-panel { min-height: 560px; }
  .editor-foot { padding: 0 14px; }
  .editor-actions { width: 100%; }
  .editor-foot-copy,.script-head { display: none; }
  .player { min-height: 82px; max-height: 82px; height: 82px; padding: 10px 12px; grid-template-columns: 42px minmax(0,1fr) auto auto; gap: 9px; }
  .player.visible { min-height: 82px; max-height: 82px; }
  .player-play { order: 1; width: 42px; height: 42px; }
  .player-info { order: 2; }
  .timeline { order: 3; }
  #duration,#currentTime,.player-regenerate { display: none !important; }
  #downloadAudio { order: 4; }
  #closePlayer { display: none; }
  .editor-panel:has(.player.visible) .editor-foot { bottom: 82px; }
}

/* V4.5 · Voxraya identity, authentication and dual appearance */
body,button,input,textarea { font-family: Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif; }
.brand,.topbar h1,.settings-head h2,.collection-head h2,.side-history-head h2,.modal-head h2,.progress-card h2,.voice-card h3,.empty-state h3,.auth-brand strong,.auth-showcase h1,.auth-heading h2 { font-family: Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif; }
.auth-screen { position: fixed; z-index: 220; inset: 0; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(420px,.92fr); background: #0d0e0e; color: #f4f4f1; transition: opacity .28s var(--ease),visibility .28s; }
body.auth-complete .auth-screen { opacity: 0; visibility: hidden; pointer-events: none; }
body.auth-required .app-shell { visibility: hidden; }
.auth-brand { position: absolute; z-index: 2; top: 28px; left: 34px; display: flex; align-items: center; gap: 8px; }
.auth-brand strong { font: 700 16px Manrope,sans-serif; letter-spacing: -.35px; }
.auth-brand > span:last-child { color: #7d807d; font-size: 12px; }
.auth-theme { position: absolute; z-index: 3; top: 25px; right: 28px; color: #bbbdb9; background: #181919; border-color: #343534; }
.auth-showcase { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 105px clamp(48px,7vw,120px) 72px; background: radial-gradient(circle at 22% 76%,rgba(255,255,255,.09),transparent 24%),linear-gradient(145deg,#101111,#090a0a); border-right: 1px solid #272828; }
.auth-showcase::before { content: ""; position: absolute; inset: 8% -20% auto auto; width: 620px; height: 620px; border: 1px solid rgba(255,255,255,.055); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.012),0 0 0 160px rgba(255,255,255,.008); }
.auth-kicker { position: relative; color: #9fa29e; font-size: 11px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; }
.auth-showcase h1 { position: relative; max-width: 720px; margin: 18px 0 20px; font: 650 clamp(40px,5vw,76px)/1.02 Manrope,sans-serif; letter-spacing: -.055em; }
.auth-showcase > p { position: relative; max-width: 570px; margin: 0; color: #969995; font-size: 16px; line-height: 1.65; }
.auth-wave { position: relative; height: 110px; margin: 54px 0 35px; display: flex; align-items: center; gap: clamp(7px,1vw,14px); }
.auth-wave i { width: 3px; height: 20%; border-radius: 3px; background: linear-gradient(#f7f7f4,#676a67); animation: auth-wave 1.7s ease-in-out infinite alternate; }
.auth-wave i:nth-child(2n) { height: 52%; animation-delay: -.35s; }.auth-wave i:nth-child(3n) { height: 88%; animation-delay: -.75s; }.auth-wave i:nth-child(5n) { height: 38%; animation-delay: -1s; }
@keyframes auth-wave { to { transform: scaleY(.48); opacity: .55; } }
.auth-proof { position: relative; display: flex; flex-wrap: wrap; gap: 26px; color: #777a77; font-size: 10px; }
.auth-proof span { display: grid; gap: 2px; }.auth-proof strong { color: #d8dad7; font-size: 13px; }
.auth-panel { display: grid; place-items: center; padding: 76px clamp(30px,5vw,82px) 42px; background: #121313; }
.auth-card { width: min(430px,100%); }
.auth-tabs { height: 42px; margin-bottom: 38px; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid #303130; border-radius: 10px; background: #0f1010; }
.auth-tabs button { border: 0; border-radius: 7px; color: #777a77; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.auth-tabs button.active { color: #111; background: #f1f1ee; box-shadow: 0 3px 10px rgba(0,0,0,.24); }
.auth-heading .eyebrow { color: #898c89; text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.auth-heading h2 { margin: 8px 0 7px; font: 650 28px/1.2 Manrope,sans-serif; letter-spacing: -.7px; }
.auth-heading p { margin: 0 0 30px; color: #818481; font-size: 12px; }
.auth-field { display: grid; gap: 7px; margin-bottom: 16px; color: #cfd1ce; font-size: 11px; font-weight: 600; }
.auth-field input { width: 100%; height: 47px; padding: 0 13px; color: #f0f0ee; background: #0d0e0e; border: 1px solid #353635; border-radius: 9px; transition: border-color .18s,box-shadow .18s; }
.auth-field input::placeholder { color: #535653; }.auth-field input:focus { outline: 0; border-color: #777a77; box-shadow: 0 0 0 3px rgba(255,255,255,.055); }
.auth-name-field,.auth-confirm-field { display: none; }
#authForm.signup .auth-name-field,#authForm.signup .auth-confirm-field { display: grid; }
.auth-form-meta { min-height: 24px; margin: -1px 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #777a77; font-size: 10px; }
.auth-form-meta label { display: flex; align-items: center; gap: 7px; cursor: pointer; }.auth-form-meta input { accent-color: #f1f1ee; }
.auth-form-meta button { border: 0; padding: 3px; color: #a7aaa7; background: transparent; cursor: pointer; font-size: 10px; }.auth-form-meta button:hover { color: #fff; }
.auth-submit { width: 100%; height: 48px; color: #111; background: linear-gradient(#fff,#e7e7e4); border: 1px solid #fff; border-radius: 9px; box-shadow: inset 0 1px #fff,0 8px 22px rgba(0,0,0,.24); }
.auth-submit:hover:not(:disabled) { background: #fff; }.auth-submit .spinner { border-color: rgba(0,0,0,.22); border-top-color: #111; }
.auth-message { min-height: 20px; margin: 10px 0 0; color: #d4837c; font-size: 10px; text-align: center; }
.auth-message.success { color: #8fc6a2; }
.auth-demo { width: 100%; height: 43px; margin-top: 7px; color: #b2b5b1; background: transparent; border: 1px solid #333433; border-radius: 9px; cursor: pointer; }.auth-demo:hover { color: #fff; background: #191a1a; }
.auth-terms { margin: 20px 15px 0; color: #5f625f; font-size: 9px; line-height: 1.5; text-align: center; }
.theme-toggle { margin-left: auto; color: #aaa; background: #171818; border-color: #303130; }
.top-add { margin-left: 0; }
.account-wrap { position: relative; }
.account-button { height: 38px; min-width: 150px; padding: 0 9px 0 6px; display: flex; align-items: center; gap: 8px; color: #dfe0de; background: #151616; border: 1px solid #303130; border-radius: 9px; cursor: pointer; }
.account-button > span:first-child { width: 26px; height: 26px; display: grid; place-items: center; color: #111; background: #efefec; border-radius: 7px; font-size: 10px; font-weight: 700; }
.account-copy { min-width: 0; flex: 1; text-align: left; }.account-copy strong,.account-copy small { display: block; max-width: 105px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.account-copy strong { font-size: 10px; }.account-copy small { color: #777a77; font-size: 8px; }
.account-button > svg { width: 13px; color: #737673; transform: rotate(90deg); }
.account-menu { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; width: 220px; padding: 8px; visibility: hidden; opacity: 0; transform: translateY(-5px); color: #e9eae7; background: #191a1a; border: 1px solid #353635; border-radius: 10px; box-shadow: 0 18px 45px rgba(0,0,0,.45); transition: .18s; }
.account-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }.account-menu > div { padding: 8px 9px 11px; border-bottom: 1px solid #303130; }.account-menu strong,.account-menu small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.account-menu strong { font-size: 11px; }.account-menu small { color: #777a77; font-size: 9px; margin-top: 3px; }
.account-menu button { width: 100%; height: 36px; margin-top: 5px; padding: 0 9px; display: flex; align-items: center; gap: 8px; color: #aaa; background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 10px; }.account-menu button:hover { color: #fff; background: #242525; }.account-menu svg { width: 15px; }

html[data-theme="light"] { color-scheme: light; }
[data-theme="light"] body,[data-theme="light"] .app-shell,[data-theme="light"] .main { color: #171817; background: #f4f4f1; }
[data-theme="light"] .sidebar { color: #1c1d1c; background: #ebece8; border-color: #d5d6d1; }
[data-theme="light"] .brand-muted,[data-theme="light"] .engine-status small,[data-theme="light"] .local-pill { color: #797c78; }
[data-theme="light"] .nav-item { color: #6e716d; }[data-theme="light"] .nav-item:hover { color: #111; background: rgba(255,255,255,.65); }[data-theme="light"] .nav-item.active { color: #111; background: #fff; border-color: #d7d8d3; box-shadow: 0 3px 12px rgba(20,24,21,.06); }
[data-theme="light"] .nav-count { color: #60635f; background: #dfe0dc; }[data-theme="light"] .engine-status strong { color: #343633; }[data-theme="light"] .local-pill { border-color: #d5d6d1; }
[data-theme="light"] .topbar { background: #fafaf8; border-color: #dedfda; }[data-theme="light"] .topbar h1 { color: #202220; }
[data-theme="light"] .theme-toggle,[data-theme="light"] .top-add,[data-theme="light"] .account-button { color: #343633 !important; background: #fff !important; border-color: #d8d9d4 !important; }
[data-theme="light"] .account-button > span:first-child { color: #fff; background: #222322; }[data-theme="light"] .account-copy small { color: #858884; }
[data-theme="light"] .editor-panel,[data-theme="light"] #script { color: #232522; background: #f8f8f6; }[data-theme="light"] .editor-panel { border-color: #dedfda; }[data-theme="light"] #script::placeholder { color: #a5a7a3; }[data-theme="light"] #script::selection { background: #d5d6d2; }
[data-theme="light"] .editor-foot { background: #f8f8f6; border-color: #dedfda; }[data-theme="light"] .editor-foot-copy strong { color: #60635f; }[data-theme="light"] .kbd { color: #666965; background: #fff; border-color: #d5d6d1; }
[data-theme="light"] .editor-actions .glass-button { color: #454844; background: #fff; border-color: #d4d5d0; }
[data-theme="light"] .settings-panel { background: #f3f3f0; }[data-theme="light"] .panel-tabs,[data-theme="light"] .settings-head,[data-theme="light"] .switch-row,[data-theme="light"] .side-history-head,[data-theme="light"] .side-history-item { border-color: #dbdcd7; }[data-theme="light"] .panel-tab { color: #8a8d89; }[data-theme="light"] .panel-tab.active,[data-theme="light"] .settings-head h2,[data-theme="light"] .setting-label,[data-theme="light"] .switch-row strong,[data-theme="light"] .side-history-head h2,[data-theme="light"] .side-history-copy strong { color: #242624; }[data-theme="light"] .panel-tab.active::after { background: #202220; }
[data-theme="light"] .voice-picker { color: #252725; background: #fff; border-color: #d3d4cf; }[data-theme="light"] .voice-picker-copy small,[data-theme="light"] .settings-head p,[data-theme="light"] .range-labels,[data-theme="light"] .switch-row small,[data-theme="light"] .quality-note p { color: #858884; }[data-theme="light"] .mini-play { color: #343633; background: #f1f1ee; border-color: #d4d5d0; }
[data-theme="light"] .voice-menu,[data-theme="light"] .account-menu { color: #272927; background: #fff; border-color: #d4d5d0; box-shadow: 0 18px 45px rgba(35,39,36,.14); }[data-theme="light"] .voice-option:hover,[data-theme="light"] .voice-option.selected,[data-theme="light"] .account-menu button:hover { color: #111; background: #f0f0ed; }
[data-theme="light"] .setting-label output { color: #565955; background: #e5e6e1; }[data-theme="light"] input[type="range"] { background: linear-gradient(90deg,#252625 var(--fill,50%),#d5d6d1 var(--fill,50%)); }[data-theme="light"] input[type="range"]::-webkit-slider-thumb { background: #222; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
[data-theme="light"] .switch { background: #cacbc6; }[data-theme="light"] .switch-row input:checked + .switch { background: #222; }[data-theme="light"] .switch-row input:checked + .switch::after { background: #fff; }
[data-theme="light"] .quality-note { color: #343633; background: #e9eae6; border-color: #d3d4cf; }[data-theme="light"] .quality-note strong { color: #242624; }
[data-theme="light"] .player { color: #ededeb; background: rgba(22,23,23,.985); border-color: #343534; }
[data-theme="light"] #page-voices,[data-theme="light"] #page-history { background: #f5f5f2; }[data-theme="light"] .voice-card,[data-theme="light"] .history-row { background: #fff; border-color: #d9dad5; }[data-theme="light"] .collection-head h2,[data-theme="light"] .empty-state h3,[data-theme="light"] .voice-card h3,[data-theme="light"] .history-copy strong { color: #222422; }[data-theme="light"] .collection-head p,[data-theme="light"] .empty-state p,[data-theme="light"] .voice-card p,[data-theme="light"] .history-copy small,[data-theme="light"] .history-meta { color: #777a76; }
[data-theme="light"] .modal,[data-theme="light"] .progress-card { color: #242624; background: #fff; border-color: #d5d6d1; box-shadow: 0 28px 80px rgba(35,39,36,.2); }[data-theme="light"] .field input,[data-theme="light"] .field textarea,[data-theme="light"] .dropzone { color: #272927; background: #f7f7f4; border-color: #d5d6d1; }
[data-theme="light"] .auth-screen { color: #202220; background: #f5f5f2; }[data-theme="light"] .auth-showcase { background: radial-gradient(circle at 22% 76%,rgba(0,0,0,.05),transparent 24%),linear-gradient(145deg,#f0f1ed,#fafaf8); border-color: #d8d9d4; }[data-theme="light"] .auth-showcase::before { border-color: rgba(0,0,0,.05); box-shadow: 0 0 0 80px rgba(0,0,0,.012),0 0 0 160px rgba(0,0,0,.008); }[data-theme="light"] .auth-showcase > p,[data-theme="light"] .auth-kicker,[data-theme="light"] .auth-heading p { color: #747773; }[data-theme="light"] .auth-wave i { background: linear-gradient(#222,#a2a4a0); }[data-theme="light"] .auth-proof { color: #858884; }[data-theme="light"] .auth-proof strong { color: #343633; }
[data-theme="light"] .auth-panel { background: #fff; }[data-theme="light"] .auth-tabs { background: #f0f0ed; border-color: #d8d9d4; }[data-theme="light"] .auth-tabs button.active { color: #fff; background: #202120; }[data-theme="light"] .auth-field { color: #444743; }[data-theme="light"] .auth-field input { color: #222; background: #fafaf8; border-color: #d5d6d1; }[data-theme="light"] .auth-field input::placeholder { color: #a2a4a0; }[data-theme="light"] .auth-submit { color: #fff; background: linear-gradient(#333,#151615); border-color: #111; }[data-theme="light"] .auth-demo { color: #555854; border-color: #d3d4cf; }[data-theme="light"] .auth-demo:hover { color: #111; background: #f2f2ef; }[data-theme="light"] .auth-theme { color: #444; background: #fff; border-color: #d6d7d2; }

@media (max-width: 1200px) and (min-width: 951px) {
  .auth-screen { grid-template-columns: 1fr 1fr; }
  .auth-showcase { padding-left: 52px; padding-right: 52px; }
  .auth-showcase h1 { font-size: clamp(38px,5vw,60px); }
  .auth-panel { padding-left: 34px; padding-right: 34px; }
}
@media (max-width: 950px) {
  .auth-screen { grid-template-columns: 1fr; overflow: auto; }.auth-showcase { display: none; }.auth-panel { min-height: 100vh; }.auth-brand { color: inherit; }.auth-copy { display: none; }
  .account-copy { display: none; }.account-button { min-width: 40px; padding-right: 6px; }.account-button > svg { display: none; }
}
@media (max-width: 570px) {
  .auth-brand { top: 20px; left: 20px; }.auth-brand > span:last-child { display: none; }.auth-theme { top: 16px; right: 16px; }.auth-panel { padding: 92px 20px 35px; }.auth-tabs { margin-bottom: 30px; }
  .theme-toggle { margin-left: auto; }.top-add { display: none !important; }
}