/* Inherited from legacy/public/styles.css. Only the external Google Fonts import is removed
   so the private web and desktop interfaces remain self-contained under their CSP. */
:root {
  --bg: #080b0a;
  --panel: #111513;
  --panel-2: #151a17;
  --line: #252b27;
  --muted: #7d8981;
  --text: #edf3ef;
  --acid: #b8f34a;
  --acid-soft: rgba(184, 243, 74, .12);
  --cyan: #74e8c6;
  --danger: #ff7a77;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 77% 0%, rgba(84, 120, 85, .13), transparent 26rem), var(--bg); color: var(--text); font-family: Manrope, "Microsoft YaHei", sans-serif; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); padding: 28px 20px; display: flex; flex-direction: column; background: rgba(9, 12, 10, .92); backdrop-filter: blur(18px); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .16em; }
.brand small { display: block; margin-top: 3px; color: var(--muted); font: 400 8px DM Mono, monospace; letter-spacing: .12em; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: center; gap: 3px; padding: 7px; border: 1px solid #3c463d; border-radius: 50%; transform: rotate(-9deg); }
.brand-mark i { display: block; width: 4px; background: var(--acid); border-radius: 4px; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 12px; }
.nav { margin-top: 52px; display: grid; gap: 6px; }
.nav p { margin: 22px 12px 7px; color: #5c675f; font: 500 9px DM Mono, monospace; letter-spacing: .16em; }
.nav a { display: flex; align-items: center; gap: 12px; color: #9ca69f; text-decoration: none; padding: 11px 12px; border-radius: 9px; font-size: 13px; font-weight: 600; transition: .2s; }
.nav a span { width: 18px; text-align: center; font: 15px DM Mono, monospace; }
.nav a:hover, .nav a.active { color: var(--text); background: #181d1a; }
.nav a.active { box-shadow: inset 2px 0 var(--acid); }
.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 10px; border-top: 1px solid var(--line); }
.sidebar-foot strong, .sidebar-foot span { display: block; font-size: 10px; }.sidebar-foot span { margin-top: 2px; color: var(--muted); font: 8px DM Mono; }
.status-dot { width: 7px; height: 7px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 12px var(--acid); }
main { min-width: 0; padding: 36px clamp(24px, 4vw, 68px) 80px; max-width: 1600px; width: 100%; margin: 0 auto; }
.topbar { display: flex; justify-content: space-between; align-items: end; margin-bottom: 34px; }
.eyebrow, .kicker { color: var(--muted); font: 500 9px DM Mono, monospace; letter-spacing: .17em; }
.eyebrow span { display: inline-block; width: 18px; height: 1px; margin: 0 8px 3px 0; background: var(--acid); }
h1 { margin: 8px 0 0; font-size: clamp(28px, 4vw, 46px); letter-spacing: -.05em; line-height: 1; }
h2 { margin: 6px 0 0; font-size: 20px; letter-spacing: -.035em; }
.header-actions { display: flex; gap: 10px; }
.primary-button, .ghost-button, .icon-button, .generate-button { border: 0; cursor: pointer; transition: .2s; }
.primary-button { padding: 11px 17px; border-radius: 8px; background: var(--acid); color: #111609; font-size: 12px; font-weight: 800; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(184,243,74,.14); }
.ghost-button { padding: 10px 15px; border: 1px solid var(--line); border-radius: 8px; background: #121613; color: #b1bbb4; font-size: 11px; font-weight: 700; }
.ghost-button:hover { border-color: #4c584e; color: var(--text); }
button:disabled { opacity: .5; cursor: wait; transform: none !important; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 18px; }
.metrics article { position: relative; padding: 19px 22px; background: rgba(17, 21, 19, .8); border-right: 1px solid var(--line); }
.metrics article:last-child { border: 0; }.metrics article::before { content: ""; position: absolute; left: 0; top: 18px; width: 2px; height: 16px; background: var(--acid); opacity: .6; }
.metrics span, .metrics small { display: block; color: var(--muted); font-size: 10px; }.metrics strong { display: block; margin: 8px 0 5px; font: 500 25px DM Mono, monospace; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .7fr); gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(20,25,22,.96), rgba(13,17,15,.96)); box-shadow: 0 16px 60px rgba(0,0,0,.15); }
.composer, .key-panel, .voice-library, .history-panel { padding: 26px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }.panel-heading.compact { align-items: center; }
.engine-pill { padding: 7px 10px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--acid-soft); border: 1px solid rgba(184,243,74,.2); border-radius: 999px; color: var(--acid); font: 500 9px DM Mono; }
.credit-warning { margin-top: 18px; display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid rgba(255,184,86,.25); border-radius: 9px; background: rgba(255,184,86,.06); }.credit-warning > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,184,86,.13); color: #ffc16d; font: 600 11px DM Mono; }.credit-warning p { margin: 0; color: #a8967e; font-size: 9px; line-height: 1.5; }.credit-warning strong { display: block; color: #e1c9a8; font-size: 10px; }.credit-warning a { color: #ffc16d; font-size: 9px; white-space: nowrap; }
.text-editor { position: relative; display: block; margin-top: 22px; }
.text-editor textarea { width: 100%; min-height: 174px; resize: vertical; border: 1px solid #303833; border-radius: 9px; padding: 18px 18px 34px; outline: 0; background: #0d110f; color: var(--text); line-height: 1.8; font-size: 14px; }
.text-editor textarea:focus { border-color: #697d60; box-shadow: 0 0 0 3px rgba(184,243,74,.05); }
.text-editor-tools { position: absolute; left: 11px; right: 13px; bottom: 8px; display: flex; align-items: center; gap: 6px; pointer-events: none; }.text-editor-tools button { pointer-events: auto; border: 1px solid #303a33; border-radius: 999px; padding: 4px 8px; background: #131915; color: #99a69c; font-size: 8px; cursor: pointer; }.text-editor-tools button:hover { border-color: rgba(184,243,74,.38); color: var(--acid); }.text-editor-tools button[hidden] { display: none; }.text-editor-tools > span { margin-left: auto; color: #59635d; font: 9px DM Mono; }.text-editor b { color: #8b978f; font-weight: 500; }
.expression-picker { position: relative; z-index: 4; width: max-content; max-width: 100%; margin-top: 9px; }.expression-picker summary { display: flex; align-items: center; gap: 9px; list-style: none; border: 1px solid #303833; border-radius: 7px; padding: 7px 10px; background: #0d110f; cursor: pointer; }.expression-picker summary::-webkit-details-marker { display: none; }.expression-picker summary span { color: var(--acid); font-size: 9px; font-weight: 700; }.expression-picker summary small { color: #647068; font-size: 8px; }.expression-picker[open] summary { border-color: rgba(184,243,74,.3); }.expression-menu { position: absolute; left: 0; top: calc(100% + 7px); width: min(570px, calc(100vw - 80px)); display: grid; gap: 11px; padding: 13px; border: 1px solid #374039; border-radius: 10px; background: #141a16; box-shadow: 0 18px 55px rgba(0,0,0,.48); }.expression-menu section { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: start; gap: 8px; }.expression-menu section > strong { padding-top: 6px; color: #758078; font: 8px DM Mono; }.expression-menu section > div { display: flex; flex-wrap: wrap; gap: 6px; }.expression-menu button { position: relative; border: 1px solid #303a33; border-radius: 6px; padding: 5px 7px; background: #0d120f; color: #aab5ad; font-size: 8px; cursor: pointer; }.expression-menu button:hover { border-color: rgba(184,243,74,.4); color: var(--text); }.expression-menu button code { margin-left: 3px; color: var(--acid); font: 7px DM Mono; }.expression-menu button:hover::after { content: attr(data-help); position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 2; width: max-content; max-width: 180px; transform: translateX(-50%); padding: 5px 7px; border: 1px solid #3d493f; border-radius: 5px; background: #080b0a; color: #cbd4ce; font-size: 8px; white-space: nowrap; pointer-events: none; }
.expression-menu { max-height: min(610px, calc(100vh - 170px)); overflow: auto; overscroll-behavior: contain; }.expression-toolbar { position: sticky; top: -13px; z-index: 3; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 9px; margin: -13px -13px 0; padding: 13px; border-bottom: 1px solid #283029; background: #141a16; }.expression-toolbar input, .custom-expression input { min-width: 0; border: 1px solid #303a33; border-radius: 7px; padding: 8px 10px; background: #0a0e0c; color: var(--text); font-size: 9px; outline: none; }.expression-toolbar input:focus, .custom-expression input:focus { border-color: rgba(184,243,74,.55); }.expression-toolbar small { color: #657169; font-size: 7px; white-space: nowrap; }.expression-groups { display: grid; gap: 11px; }.custom-expression { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding-top: 10px; border-top: 1px solid #283029; }.custom-expression button { color: var(--acid); }.expression-empty { margin: 0; color: #859087; font-size: 8px; }
.expression-mode-help { display: flex; flex-wrap: wrap; gap: 12px; margin: -2px 0 0; color: #727e76; font-size: 8px; }.expression-mode-help span { display: inline-flex; align-items: center; gap: 5px; }.expression-mode-help i, .expression-menu button > i { border: 1px solid #354039; border-radius: 3px; padding: 1px 3px; color: #849087; font: normal 6px DM Mono; }.expression-menu button[data-expression-mode="scope"] > i { border-color: rgba(184,243,74,.25); color: var(--acid); }
.control-row { display: grid; grid-template-columns: 1.25fr 1fr .65fr; gap: 10px; margin-top: 12px; }
.control-row label > span, dialog label > span { display: block; margin: 0 0 6px 2px; color: var(--muted); font: 9px DM Mono; letter-spacing: .08em; }
select, dialog input { width: 100%; border: 1px solid #2d342f; border-radius: 8px; outline: none; background: #0d110f; color: #dbe3dd; padding: 10px 11px; font-size: 11px; }
.composer-footer { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.range-group { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 10px; }.range-group input { accent-color: var(--acid); width: 110px; }.range-group output { font: 10px DM Mono; color: var(--text); }
.composer-actions { min-width: 0; display: flex; align-items: stretch; gap: 8px; }.selected-voice-control { min-width: 190px; max-width: 260px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; align-items: center; gap: 8px; border: 1px solid rgba(184,243,74,.25); border-radius: 8px; padding: 6px 8px; background: var(--acid-soft); text-align: left; cursor: pointer; }.selected-voice-control > b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: #182019; color: var(--acid); font: 600 11px DM Mono; }.selected-voice-control > span { min-width: 0; }.selected-voice-control small, .selected-voice-control strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.selected-voice-control small { color: #7e8a81; font: 7px DM Mono; }.selected-voice-control strong { margin-top: 2px; color: #dce6df; font-size: 9px; }.selected-voice-control i { color: var(--acid); font: normal 8px DM Mono; }.selected-voice-control.empty { border-color: #303833; background: #101512; }.selected-voice-control.empty > b, .selected-voice-control.empty i { color: #68736b; }
.generate-button { min-width: 150px; display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 12px 13px 12px 17px; border-radius: 8px; background: var(--acid); color: #10150a; font-size: 12px; font-weight: 800; }
.generate-button i { font: normal 18px DM Mono; }.generate-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.generation-result { margin-top: 18px; border: 1px solid rgba(116,232,198,.25); border-radius: 9px; padding: 12px; background: rgba(116,232,198,.05); display: flex; align-items: center; gap: 14px; }
.generation-result > div { display: flex; align-items: center; gap: 9px; min-width: 150px; }.generation-result > div > span { color: var(--cyan); }.generation-result p { margin: 0; font-size: 10px; color: var(--muted); }.generation-result strong { display: block; color: var(--text); font-size: 11px; }.generation-result audio { flex: 1; height: 34px; }.generation-result a { color: var(--acid); font-size: 10px; }
.icon-button { width: 32px; height: 32px; border-radius: 8px; background: #202620; color: var(--acid); font-size: 18px; }
.account-list { display: grid; gap: 10px; margin-top: 21px; max-height: 360px; overflow: auto; }
.account-item { border: 1px solid #29302b; border-radius: 9px; padding: 12px; background: #0e120f; }.account-item.disabled { opacity: .48; }
.account-top { display: flex; align-items: center; gap: 9px; }.account-avatar { width: 30px; height: 30px; display: grid; place-items: center; background: var(--acid-soft); border-radius: 8px; color: var(--acid); font: 600 12px DM Mono; }.account-top div { min-width: 0; flex: 1; }.account-top strong, .account-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-top strong { font-size: 11px; }.account-top small { color: var(--muted); font: 8px DM Mono; margin-top: 3px; }.health { width: 7px; height: 7px; border-radius: 50%; background: #707772; }.health.ready { background: var(--cyan); box-shadow: 0 0 10px rgba(116,232,198,.45); }.health.error { background: var(--danger); }
.account-meta { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 9px; border-top: 1px solid #202521; color: var(--muted); font-size: 9px; }.account-meta b { color: var(--text); font: 500 9px DM Mono; }.account-error { margin: 8px 0 0; color: var(--danger); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-meta.secondary { margin-top: 5px; padding-top: 0; border-top: 0; color: #59645c; font-size: 8px; }
.account-actions { display: flex; gap: 6px; margin-top: 10px; }.account-actions button { flex: 1; border: 0; border-radius: 5px; padding: 5px; background: #1b211d; color: #9da79f; font-size: 8px; cursor: pointer; }.account-actions button:hover { color: var(--text); }.account-actions .danger:hover { color: var(--danger); }
.mini-empty { height: 105px; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed #313933; border-radius: 9px; color: #687169; }.mini-empty span { color: var(--acid); font-size: 20px; }.mini-empty p { margin: 0; font-size: 10px; }
.routing-note { display: flex; gap: 10px; margin-top: 15px; padding: 12px; background: rgba(184,243,74,.05); border-radius: 8px; }.routing-note > span { color: var(--acid); }.routing-note p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }.routing-note strong { display: block; margin-bottom: 2px; color: #c9d3cb; font-size: 9px; }
.voice-library, .history-panel { margin-top: 18px; }
.library-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }.library-head p { margin: 8px 0 0; color: var(--muted); font-size: 10px; }.library-head code { color: var(--acid); font: 9px DM Mono; }
.library-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 9px; }.library-actions > select { width: auto; min-width: 112px; padding: 8px 27px 8px 9px; }.search { width: min(310px, 100%); display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #374039; padding: 8px 3px; }.search span { color: var(--acid); }.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.suggestion-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 16px; }.suggestion-row > span { margin-right: 3px; color: #637068; font: 8px DM Mono; letter-spacing: .08em; }.suggestion-row button { border: 1px solid #2d3630; border-radius: 999px; padding: 5px 9px; background: #101512; color: #8f9b92; font-size: 8px; cursor: pointer; }.suggestion-row button:hover { border-color: rgba(184,243,74,.35); color: var(--acid); }
.catalog-tabs { display: flex; gap: 6px; margin-top: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }.catalog-tabs button { border: 1px solid transparent; border-radius: 999px; padding: 7px 11px; background: transparent; color: var(--muted); font-size: 9px; white-space: nowrap; cursor: pointer; }.catalog-tabs button b { margin-left: 4px; color: #59645c; font: 500 8px DM Mono; }.catalog-tabs button:hover { color: var(--text); }.catalog-tabs button.active { border-color: rgba(184,243,74,.24); background: var(--acid-soft); color: var(--acid); }.catalog-tabs button.active b { color: var(--acid); }
.voice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.voice-card { min-width: 0; position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0; border: 1px solid #2a312c; border-radius: 9px; text-align: left; background: #0d110f; color: var(--text); transition: .18s; overflow: hidden; }.voice-card:hover { border-color: #4c584e; transform: translateY(-1px); }.voice-card.selected { border-color: rgba(184,243,74,.48); background: var(--acid-soft); }.voice-select { grid-column: 1 / 3; min-width: 0; display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: start; gap: 11px; border: 0; padding: 12px 10px 10px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.voice-cover { position: relative; width: 54px; height: 54px; overflow: hidden; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(145deg,#263029,#161b18); color: var(--acid); }.voice-cover img { width: 100%; height: 100%; object-fit: cover; }.cover-fallback { display: none; font-size: 18px; font-weight: 500; }.voice-cover.broken img { display: none; }.voice-cover.broken .cover-fallback { display: block; }
.voice-info { min-width: 0; }.voice-info strong, .voice-info small, .voice-info code { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.voice-info strong { font-size: 11px; }.voice-info small { margin-top: 4px; color: var(--muted); font-size: 8px; }.voice-info p { min-height: 25px; margin: 7px 0 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #8c978f; font-size: 8px; line-height: 1.55; }.voice-info code { margin-top: 6px; color: #5d6b61; font: 7px DM Mono; }.voice-tags { display: flex; gap: 4px; overflow: hidden; }.voice-tags i { flex: 0 0 auto; max-width: 74px; padding: 2px 5px; border-radius: 999px; background: #171d19; color: #748078; font: normal 7px sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.voice-badge { align-self: start; padding: 3px 5px; border: 1px solid #313b34; border-radius: 999px; color: #77827a; font: 7px DM Mono; }.preview-row { min-width: 0; display: grid; grid-template-columns: 26px minmax(55px,1fr) auto; align-items: center; gap: 8px; border-top: 1px solid #202722; padding: 7px 6px 7px 10px; background: rgba(255,255,255,.012); }.preview-button, .select-button { border: 0; background: transparent; font-size: 8px; cursor: pointer; }.preview-button { width: 25px; height: 24px; padding: 0; border-radius: 50%; background: #19221c; color: var(--cyan); text-align: center; }.preview-progress { --seek-percent: 0%; width: 100%; height: 20px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: grab; touch-action: none; }.preview-progress:active, .preview-progress.seeking { cursor: grabbing; }.preview-progress::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan) 0 var(--seek-percent), #2b352f var(--seek-percent) 100%); }.preview-progress::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 2px solid #0d120f; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--cyan); box-shadow: 0 0 0 2px rgba(86,222,224,.14); }.preview-progress::-moz-range-track { height: 4px; border-radius: 999px; background: #2b352f; }.preview-progress::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--cyan); }.preview-progress::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #0d120f; border-radius: 50%; background: var(--cyan); }.preview-progress:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }.preview-progress:disabled { opacity: .35; cursor: default; }.preview-time { min-width: 56px; color: #6f7b72; font: 7px DM Mono; white-space: nowrap; }.select-button { border-top: 1px solid #202722; padding: 7px 10px; color: var(--acid); text-align: right; }.preview-button:hover, .select-button:hover { background: rgba(255,255,255,.05); }.preview-button:disabled { color: #505953; cursor: default; }
.voice-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }.voice-used-badge { padding: 3px 5px; border: 1px solid rgba(184,243,74,.3); border-radius: 999px; background: rgba(184,243,74,.08); color: var(--acid); font: 7px DM Mono; white-space: nowrap; }.voice-info .voice-used { color: #9fbd74; }.preview-row { grid-template-columns: 58px minmax(55px,1fr) auto; }.preview-button { width: 58px; border-radius: 6px; font-weight: 700; }
.empty-state { padding: 68px 20px 44px; text-align: center; }.empty-state h3 { margin: 18px 0 7px; font-size: 15px; }.empty-state p { max-width: 520px; margin: 0 auto 20px; color: var(--muted); font-size: 10px; line-height: 1.7; }.empty-state code { color: var(--acid); }.empty-orbit { position: relative; width: 64px; height: 64px; margin: auto; display: grid; place-items: center; border: 1px solid #344038; border-radius: 50%; color: var(--acid); }.empty-orbit i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); }.empty-orbit i:first-child { top: -3px; }.empty-orbit i:nth-child(2) { bottom: 7px; right: 2px; opacity: .4; }
.muted { color: var(--muted); font-size: 9px; }.history-list { display: grid; margin-top: 20px; }.history-item { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(220px,.5fr) 30px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #252b27; }.history-icon { width: 32px; height: 32px; display: grid; place-items: center; background: #1d241f; border-radius: 8px; color: var(--acid); }.history-copy { min-width: 0; }.history-copy strong { font-size: 10px; }.history-copy p { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #aab4ad; font-size: 9px; }.history-copy small { color: #657068; font: 7px DM Mono; }.history-item audio { width: 100%; height: 30px; }.history-item > a { color: var(--acid); text-decoration: none; text-align: center; }.history-empty { padding: 28px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 10px; }
dialog { width: min(460px, calc(100vw - 32px)); border: 1px solid #384039; border-radius: 13px; padding: 0; background: #121713; color: var(--text); box-shadow: 0 24px 90px rgba(0,0,0,.65); }dialog::backdrop { background: rgba(1,3,2,.72); backdrop-filter: blur(5px); }dialog form { position: relative; padding: 30px; }dialog h2 { font-size: 22px; }dialog p { color: var(--muted); font-size: 10px; line-height: 1.7; }dialog label { display: block; margin-top: 17px; }.dialog-close { position: absolute; right: 14px; top: 12px; border: 0; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }.dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 22px; }.form-error { color: var(--danger); }.file-drop { position: relative; display: grid; place-items: center; padding: 18px; border: 1px dashed #3d493f; border-radius: 9px; background: #0c100e; text-align: center; overflow: hidden; }.file-drop > span { justify-self: start; }.file-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.file-drop b { color: var(--acid); font-size: 11px; }.file-drop small { margin-top: 5px; color: var(--muted); font-size: 8px; }dialog select { width: 100%; border: 1px solid #2d342f; border-radius: 8px; outline: none; background: #0d110f; color: #dbe3dd; padding: 10px 11px; font-size: 11px; }
.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 20; display: grid; gap: 8px; }.toast { min-width: 260px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #334038; border-radius: 9px; background: #161d18; box-shadow: 0 15px 50px rgba(0,0,0,.4); animation: toast-in .22s ease-out; }.toast > span { color: var(--acid); }.toast.error > span { color: var(--danger); }.toast p { margin: 0; font-size: 10px; }
.spin { display: inline-block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 1050px) { .app-shell { grid-template-columns: 76px minmax(0,1fr); }.sidebar { padding: 25px 12px; }.brand > span:last-child, .nav p, .nav a:not(.active) { display: none; }.nav a { justify-content: center; }.sidebar-foot > div:last-child { display: none; }.workspace-grid { grid-template-columns: 1fr; }.voice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) { .app-shell { display: block; }.sidebar { display: none; }main { padding: 24px 14px 60px; }.topbar { align-items: start; }.header-actions .ghost-button { display: none; }.metrics { grid-template-columns: 1fr 1fr; }.metrics article:nth-child(2) { border-right: 0; }.metrics article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.control-row { grid-template-columns: 1fr; }.composer-footer, .library-head, .library-actions { align-items: stretch; flex-direction: column; }.composer-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; }.selected-voice-control { min-width: 0; max-width: none; }.expression-picker { width: 100%; }.expression-picker summary { justify-content: space-between; }.expression-menu { position: relative; top: 5px; width: 100%; }.expression-menu section { grid-template-columns: 1fr; }.library-actions > select { width: 100%; }.search { width: 100%; }.voice-grid { grid-template-columns: 1fr; }.history-item { grid-template-columns: 36px minmax(0,1fr) 30px; }.history-item audio { grid-column: 2 / 4; }.composer, .key-panel, .voice-library, .history-panel { padding: 20px; }.credit-warning { grid-template-columns: 24px 1fr; }.credit-warning a { grid-column: 2; } }
@media (max-width: 720px) { .expression-toolbar { grid-template-columns: 1fr; }.expression-toolbar small { white-space: normal; }.custom-expression { grid-template-columns: 1fr; } }