:root {
  --ink: #253630;
  --ink-soft: #dce8e2;
  --paper: #f3f5f2;
  --surface: #fdfdfb;
  --white: #ffffff;
  --line: #d6ded9;
  --line-dark: #b8c7bf;
  --muted: #687871;
  --green: #2d7356;
  --green-dark: #225a44;
  --green-soft: #e1eee7;
  --sidebar: #e7efeb;
  --sidebar-strong: #d5e3dc;
  --gold: #b48a49;
  --blue: #506d79;
  --blue-soft: #e4edf1;
  --coral: #b6543d;
  --danger-bg: #f2ddd7;
  --shadow: 0 16px 42px rgba(49, 70, 61, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, select, input[type="range"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 236px minmax(0, 1fr); }

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 30px 16px 22px;
  color: var(--ink);
  background: var(--sidebar);
  border-right: 1px solid #cad8d1;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 30px; border-bottom: 1px solid #c8d7cf; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: var(--white); background: var(--green); border-radius: 4px;
  font-family: "Songti SC", serif; font-size: 22px; font-weight: 700;
}
.brand-name { font-size: 20px; font-weight: 700; }
.brand-copy { min-width: 0; }
.brand-en { margin-top: 2px; color: var(--blue); font-size: 9px; font-weight: 700; }
.brand-audio-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-left: auto; color: var(--gold); }
.brand-audio-icon svg { width: 20px; height: 20px; }

.main-nav { display: grid; gap: 5px; margin-top: 22px; padding-bottom: 18px; border-bottom: 1px solid #c8d7cf; }
.main-nav-button {
  min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 4px; color: #52665d; background: transparent; text-align: left;
  font-size: 12px; font-weight: 700;
}
.main-nav-button svg { width: 16px; height: 16px; }
.main-nav-button:hover { color: var(--green-dark); background: rgba(255, 255, 255, 0.58); }
.main-nav-button.active { color: var(--green-dark); background: var(--white); border-color: #cbdad2; box-shadow: 0 5px 15px rgba(52, 83, 68, 0.07); }

.nav-block { margin-top: 22px; }
.nav-title { padding: 0 10px 10px; color: var(--blue); font-size: 10px; font-weight: 700; }
.preset-button {
  width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px; border: 0; border-left: 2px solid transparent;
  border-radius: 0; color: #40544b; background: transparent; text-align: left;
}
.preset-button span { font-size: 13px; font-weight: 650; }
.preset-button small { color: #74867d; font-size: 9px; white-space: nowrap; }
.preset-button:hover { background: rgba(255, 255, 255, 0.52); }
.preset-button.active { color: var(--green-dark); background: #f7faf8; border-left-color: var(--gold); }
.preset-button.active small { color: var(--blue); }

.privacy-note { margin-top: auto; display: flex; gap: 10px; align-items: flex-start; padding: 16px 10px 0; border-top: 1px solid #c8d7cf; }
.privacy-dot { width: 8px; height: 8px; margin-top: 4px; flex: none; border-radius: 50%; background: #58a878; }
.privacy-note strong { display: block; color: var(--gold); font-family: Arial, sans-serif; font-size: 9px; }
.privacy-note small { display: block; margin-top: 6px; color: #667b70; font-size: 9px; line-height: 1.55; }

.workspace { min-width: 0; padding: 25px 28px 22px; }
.topbar { height: 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.eyebrow, .section-index { margin: 0 0 5px; color: var(--gold); font-family: Arial, sans-serif; font-size: 9px; font-weight: 800; }
h1, h2, p { letter-spacing: 0; }
h1 { margin: 0; font-family: "Songti SC", serif; font-size: 28px; line-height: 1.15; }
h2 { margin: 0; font-size: 17px; line-height: 1.25; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.quota-pill { height: 34px; display: flex; align-items: baseline; gap: 3px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.quota-pill > span { color: var(--green); font-size: 12px; font-weight: 800; }
.quota-pill small { color: var(--muted); font-size: 9px; }
.user-chip { height: 38px; display: flex; align-items: center; gap: 8px; padding-right: 5px; }
.user-chip > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); font-size: 11px; font-weight: 800; }
.user-chip strong, .user-chip small { display: block; white-space: nowrap; }
.user-chip strong { font-size: 10px; }
.user-chip small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--surface); }
.icon-button:hover { border-color: var(--line-dark); background: #e3dfd5; }
.icon-button svg { width: 16px; height: 16px; }

.icon-text-button, .secondary-button, .primary-button {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 5px; font-weight: 700;
}
.icon-text-button { padding: 0 14px; color: var(--ink); background: var(--blue-soft); }
.icon-text-button:hover, .secondary-button:hover { background: #d7e4e9; }
.icon-text-button svg, .secondary-button svg, .primary-button svg { width: 16px; height: 16px; }

.status-pill { height: 34px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 17px; font-size: 10px; }
.status-pill span { width: 7px; height: 7px; border-radius: 50%; }
.status-pill.ready, .status-pill.success { color: var(--green); background: var(--green-soft); }
.status-pill.ready span, .status-pill.success span { background: #409567; }
.status-pill.loading { color: #856126; background: #eee2c9; }
.status-pill.loading span { background: var(--gold); animation: pulse 1s infinite; }
.status-pill.error { color: var(--coral); background: var(--danger-bg); }
.status-pill.error span { background: var(--coral); }

.studio-grid { min-height: calc(100vh - 117px); display: grid; grid-template-columns: minmax(0, 1fr) 326px; gap: 14px; }
.composer-panel, .control-panel { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.composer-panel { min-width: 0; display: flex; flex-direction: column; padding: 22px; }
.control-panel { padding: 20px; overflow-y: auto; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-heading.compact { margin-bottom: 16px; }
.char-count { color: var(--muted); font-size: 10px; }

.template-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.select-wrap { position: relative; min-width: 150px; display: block; }
.select-wrap select {
  width: 100%; height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line);
  border-radius: 5px; color: var(--ink); background: var(--white); appearance: none;
}
.select-wrap svg { position: absolute; top: 12px; right: 11px; width: 15px; height: 15px; pointer-events: none; }
.select-wrap.full { width: 100%; min-width: 0; }
.secondary-button { min-height: 40px; padding: 0 14px; color: var(--ink); background: var(--blue-soft); }
.reference-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid var(--green); border-radius: 5px; color: var(--green); background: var(--white); font-weight: 750; }
.reference-button:hover { color: var(--white); background: var(--green); }
.reference-button svg { width: 16px; height: 16px; }
.reference-library-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid var(--blue); border-radius: 5px; color: var(--blue); background: var(--white); font-weight: 750; }
.reference-library-button:hover { color: var(--white); background: var(--blue); }
.reference-library-button svg { width: 16px; height: 16px; }
.active-reference { min-height: 52px; display: grid; grid-template-columns: 34px minmax(0, 1fr) 32px; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 9px; border: 1px solid #bfd4ca; border-left: 3px solid var(--gold); border-radius: 5px; background: var(--green-soft); }
.active-reference[hidden] { display: none; }
.reference-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--green); }
.reference-icon svg { width: 15px; height: 15px; }
.active-reference div { min-width: 0; }
.active-reference strong, .active-reference small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-reference strong { font-size: 10px; }
.active-reference small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.active-reference button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 4px; color: var(--muted); background: transparent; }
.active-reference button:hover { color: var(--coral); background: var(--danger-bg); }
.active-reference button svg { width: 14px; height: 14px; }

.script-field { min-height: 250px; flex: 1; display: flex; }
.script-field textarea {
  width: 100%; min-height: 250px; resize: none; padding: 21px; border: 1px solid var(--line);
  border-radius: 5px; color: var(--ink); background: var(--white);
  font-size: 16px; line-height: 1.95;
}

.wave-stage { position: relative; height: 112px; margin-top: 13px; overflow: hidden; border: 1px solid #c8d8d0; border-radius: 5px; background: var(--ink-soft); }
#waveCanvas { width: 100%; height: 100%; display: block; background: var(--ink-soft); }
.audio-result {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(140px, 1fr) minmax(210px, 1.4fr) auto;
  align-items: center; gap: 14px; padding: 16px 20px; background: rgba(241, 247, 244, 0.96);
}
.audio-result[hidden] { display: none; }
.audio-meta { min-width: 0; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.audio-meta > svg { width: 25px; height: 25px; color: var(--gold); flex: none; }
.audio-meta div { min-width: 0; }
.audio-meta strong, .audio-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-meta strong { font-size: 12px; }
.audio-meta small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.audio-result audio { width: 100%; height: 38px; }
.audio-result-actions { display: flex; align-items: center; gap: 6px; }
.audio-download-button, .audio-share-button { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px; border: 1px solid var(--green); border-radius: 4px; color: var(--green); background: var(--white); font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.audio-download-button:hover, .audio-share-button:hover { color: var(--white); background: var(--green); }
.audio-download-button svg, .audio-share-button svg { width: 14px; height: 14px; }

.composer-footer { min-height: 55px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 14px; }
.composer-footer p { max-width: 66%; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.primary-button { min-width: 150px; min-height: 44px; padding: 0 20px; color: var(--white); background: var(--green); }
.primary-button:hover { background: var(--green-dark); }
.primary-button:disabled { cursor: wait; opacity: 0.72; }

.selected-voice { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 10px; border-left: 3px solid var(--gold); background: var(--blue-soft); }
.selected-voice > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--white); background: var(--green); font-family: "Songti SC", serif; font-weight: 700; }
.selected-voice strong, .selected-voice small { display: block; }
.selected-voice strong { font-size: 12px; }
.selected-voice small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.control-group { margin-top: 17px; }
.control-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 11px; font-weight: 700; }
.control-label output { color: var(--green); font-family: Arial, sans-serif; }
input[type="range"] { width: 100%; height: 18px; margin: 0; accent-color: var(--green); }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.field-label > span:first-child, .format-control legend { display: block; margin-bottom: 6px; color: var(--ink); font-size: 10px; font-weight: 700; }
.field-title-row { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.field-title-row a { color: var(--green); font-size: 9px; text-decoration: none; }
.field-title-row a:hover { text-decoration: underline; }
.field-label input[type="text"], .field-label input[type="password"] {
  width: 100%; height: 39px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--white);
}
.full-row { display: block; margin-top: 14px; }

.format-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px 0 0; padding: 0; border: 0; }
.format-control legend { grid-column: 1 / -1; }
.format-control label { position: relative; }
.format-control input { position: absolute; opacity: 0; pointer-events: none; }
.format-control span { height: 34px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); background: var(--white); font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; }
.format-control input:checked + span { border-color: var(--green); color: var(--white); background: var(--green); }

.api-settings { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.api-settings summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; font-size: 12px; font-weight: 750; }
.api-settings summary::-webkit-details-marker { display: none; }
.api-settings summary svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.api-settings[open] summary svg { transform: rotate(180deg); }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 38px !important; }
.password-wrap button { position: absolute; top: 1px; right: 1px; width: 37px; height: 37px; display: grid; place-items: center; border: 0; border-radius: 4px; color: var(--muted); background: transparent; }
.password-wrap button:hover { color: var(--green); background: #eeeae1; }
.password-wrap svg { width: 15px; height: 15px; }
.key-entry-row { display: flex; align-items: stretch; gap: 7px; }
.key-entry-row .password-wrap { min-width: 0; flex: 1; }
.validate-key-button { height: 39px; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid var(--green); border-radius: 5px; color: var(--green); background: var(--white); font-size: 10px; font-weight: 750; white-space: nowrap; }
.validate-key-button:hover { color: var(--white); background: var(--green); }
.validate-key-button:disabled { cursor: wait; opacity: 0.65; }
.validate-key-button svg { width: 14px; height: 14px; }
.key-validation-status { min-height: 22px; display: flex; align-items: center; gap: 7px; padding-top: 7px; color: var(--muted); font-size: 10px; }
.key-validation-status i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #a9a49b; }
.key-validation-status.loading { color: #856126; }
.key-validation-status.loading i { background: var(--gold); animation: pulse 1s infinite; }
.key-validation-status.success { color: var(--green); }
.key-validation-status.success i { background: #409567; }
.key-validation-status.error { color: var(--coral); }
.key-validation-status.error i { background: var(--coral); }

.auth-screen {
  min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 0.86fr) minmax(420px, 1.14fr);
  align-items: stretch; background: var(--surface);
}
.auth-brand { min-width: 0; display: flex; flex-direction: column; padding: 42px; color: var(--ink); background: var(--sidebar); border-right: 1px solid #c8d7cf; }
.auth-brand-heading { display: flex; align-items: center; gap: 12px; }
.auth-soundscape { width: min(520px, 90%); align-self: center; flex: 1; display: grid; place-items: center; align-content: center; gap: 34px; }
.auth-sound-icon { width: 126px; height: 126px; display: grid; place-items: center; border: 1px solid #c1d3ca; border-radius: 50%; color: var(--green); background: rgba(255, 255, 255, 0.68); box-shadow: 0 22px 55px rgba(60, 89, 76, 0.1); }
.auth-sound-icon svg { width: 58px; height: 58px; stroke-width: 1.35; }
.auth-waveform { width: 100%; height: 92px; display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1.15vw, 13px); padding: 0 10px; }
.auth-waveform span { width: 4px; height: 24%; flex: none; border-radius: 2px; background: var(--green); opacity: 0.78; }
.auth-waveform span:nth-child(2), .auth-waveform span:nth-child(16) { height: 34%; background: var(--blue); }
.auth-waveform span:nth-child(3), .auth-waveform span:nth-child(15) { height: 50%; }
.auth-waveform span:nth-child(4), .auth-waveform span:nth-child(14) { height: 72%; background: var(--gold); }
.auth-waveform span:nth-child(5), .auth-waveform span:nth-child(13) { height: 46%; }
.auth-waveform span:nth-child(6), .auth-waveform span:nth-child(12) { height: 84%; background: var(--blue); }
.auth-waveform span:nth-child(7), .auth-waveform span:nth-child(11) { height: 62%; }
.auth-waveform span:nth-child(8), .auth-waveform span:nth-child(10) { height: 96%; background: var(--gold); }
.auth-waveform span:nth-child(9) { height: 56%; }
.auth-sound-tools { display: flex; align-items: center; gap: 16px; }
.auth-sound-tools span { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #c4d5cd; border-radius: 50%; color: var(--green); background: rgba(255, 255, 255, 0.72); }
.auth-sound-tools span:nth-child(2) { color: var(--gold); }
.auth-sound-tools span:nth-child(3) { color: var(--blue); }
.auth-sound-tools svg { width: 20px; height: 20px; }
.auth-form { width: min(470px, calc(100% - 64px)); align-self: center; justify-self: center; display: grid; gap: 16px; padding: 52px 0; }
.auth-form h1 { margin-bottom: 8px; font-size: 30px; }
.auth-form label, .stack-form label { display: grid; gap: 7px; color: var(--ink); font-size: 10px; font-weight: 750; }
.auth-form input, .stack-form input, .compact-field input {
  width: 100%; height: 46px; padding: 0 13px; border: 1px solid var(--line); border-radius: 5px;
  color: var(--ink); background: var(--white);
}
.auth-form input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(45, 115, 86, 0.08); }
.primary-button.wide { width: 100%; }
.form-error { min-height: 18px; margin: 0; color: var(--coral); font-size: 10px; line-height: 1.5; }

.app-view { min-height: calc(100vh - 117px); }
.avatar-workbench { min-height: calc(100vh - 117px); display: grid; grid-template-columns: minmax(230px, 0.9fr) minmax(260px, 1fr) minmax(300px, 1.1fr); gap: 14px; }
.avatar-source-panel, .avatar-output-panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.avatar-source-panel { align-self: start; }
.avatar-output-panel { display: flex; flex-direction: column; }
.step-state { padding: 5px 7px; border-radius: 3px; color: var(--muted); background: #e9e6df; font-size: 8px; font-weight: 800; }
.step-state.ready { color: var(--green); background: var(--green-soft); }
.source-mode-control { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 18px 0 16px; padding: 0; border: 0; }
.source-mode-control label { position: relative; }
.source-mode-control input { position: absolute; opacity: 0; pointer-events: none; }
.source-mode-control span { height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--white); font-size: 9px; font-weight: 750; }
.source-mode-control input:checked + span { border-color: var(--green); color: var(--white); background: var(--green); }
.source-mode-control svg { width: 14px; height: 14px; }
.avatar-source-content { display: grid; gap: 12px; }
.avatar-source-content audio { width: 100%; height: 38px; }
.avatar-file-field .file-picker { min-height: 136px; background: #f3f6f4; }
.avatar-visual-picker { position: relative; min-height: 330px !important; overflow: hidden; padding: 15px; }
.avatar-placeholder { width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #bfd4ca; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.avatar-placeholder svg { width: 30px; height: 30px; }
.avatar-visual-picker img, .avatar-visual-picker video { width: 100%; max-height: 245px; display: block; object-fit: contain; border-radius: 4px; background: #dce8e2; }
.provider-state { height: 26px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 13px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.provider-state i { width: 6px; height: 6px; border-radius: 50%; }
.provider-state.pending { color: #856126; background: #f3ecdf; }
.provider-state.pending i { background: var(--gold); }
.provider-state.ready { color: var(--green); background: var(--green-soft); }
.provider-state.ready i { background: var(--green); }
.avatar-render-stage { min-height: 360px; flex: 1; display: grid; place-items: center; margin-top: 18px; overflow: hidden; border: 1px solid #c8d8d0; border-radius: 5px; background: var(--ink-soft); }
.avatar-render-empty { display: grid; place-items: center; gap: 8px; color: var(--muted); text-align: center; }
.avatar-render-empty > span { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); }
.avatar-render-empty svg { width: 29px; height: 29px; }
.avatar-render-empty strong { color: var(--ink); font-size: 12px; }
.avatar-render-empty small { font-size: 8px; }
.avatar-render-stage video { width: 100%; height: 100%; max-height: 560px; object-fit: contain; background: var(--ink); }
.avatar-output-settings { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 9px; margin-top: 14px; }
.avatar-consent { margin: 13px 0 0; }
.avatar-status-message { min-height: 32px; margin: 12px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.55; }
.avatar-status-message.error { color: var(--coral); }
.avatar-status-message.success { color: var(--green); }
.history-download-button, .history-share-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 4px; color: var(--green); background: var(--white); text-decoration: none; }
.history-download-button:hover, .history-share-button:hover { color: var(--white); background: var(--green); }
.history-download-button svg, .history-share-button svg { width: 14px; height: 14px; }
.view-toolbar { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.data-panel, .member-form-panel, .voice-upload-panel, .admin-system-panel { border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.data-panel { min-width: 0; padding: 20px; }
.member-form-panel, .voice-upload-panel { padding: 20px; }
.toggle-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; }
.toggle-label input, .switch-field input { accent-color: var(--green); }

.history-list, .users-list { display: grid; }
.history-row { min-width: 0; min-height: 72px; display: grid; grid-template-columns: minmax(170px, 1fr) auto minmax(210px, 340px); align-items: center; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.history-row:last-child, .user-row:last-child { border-bottom: 0; }
.history-main { min-width: 0; }
.history-main strong, .history-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-main strong { font-size: 12px; }
.history-main small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.history-row audio { width: 100%; height: 34px; }
.history-audio-actions { min-width: 0; display: grid; grid-template-columns: minmax(160px, 1fr) 34px 34px 34px; align-items: center; gap: 7px; }
.history-audio-actions audio { min-width: 0; }
.history-audio-actions.no-audio { display: flex; justify-content: flex-end; }
.record-status { padding: 4px 7px; border-radius: 3px; font-size: 9px; font-weight: 800; }
.record-status.complete { color: var(--green); background: var(--green-soft); }
.record-status.running { color: #856126; background: #eee2c9; }
.record-status.failed { color: var(--coral); background: var(--danger-bg); }
.record-error { grid-column: 1 / -1; color: var(--coral); font-size: 9px; }
.loading-list, .empty-list { min-height: 180px; place-items: center; color: var(--muted); font-size: 11px; }

.admin-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.admin-summary article { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.admin-summary article > span { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.admin-summary article:nth-child(2) > span { color: var(--blue); background: var(--blue-soft); }
.admin-summary article:nth-child(3) > span { color: var(--gold); background: #f2eadc; }
.admin-summary svg { width: 17px; height: 17px; }
.admin-summary small, .admin-summary strong { display: block; }
.admin-summary small { color: var(--muted); font-size: 9px; }
.admin-summary strong { margin-top: 5px; font-size: 15px; }
.admin-usage-panel { margin-bottom: 14px; }
.billing-rate-bar { display: grid; grid-template-columns: minmax(190px, 0.7fr) minmax(190px, 0.7fr) auto minmax(210px, 1fr); align-items: end; gap: 12px; margin: 14px 0 16px; padding: 13px; border: 1px solid var(--line); border-radius: 5px; background: var(--green-soft); }
.billing-rate-bar > label { display: grid; gap: 6px; color: var(--ink); font-size: 8px; font-weight: 700; }
.billing-rate-bar > p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
.rate-input { height: 34px; display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.rate-input b, .rate-input small { color: var(--muted); font-size: 9px; }
.rate-input input { width: 100%; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; font-size: 10px; }
.rate-input input:focus { outline: 0; }
.usage-table-wrap { width: 100%; overflow-x: auto; }
.usage-table-header, .admin-usage-row { min-width: 920px; display: grid; grid-template-columns: minmax(130px, 1.15fr) 112px 112px 88px 70px 94px 94px 76px; align-items: center; gap: 10px; }
.usage-table-header { min-height: 34px; padding: 0 10px; color: var(--muted); background: var(--panel-soft); font-size: 8px; font-weight: 800; }
.admin-usage-row { min-height: 58px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 9px; }
.admin-usage-row:last-child { border-bottom: 0; }
.usage-person strong, .usage-person small { display: block; }
.usage-person strong { font-size: 10px; }
.usage-person small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.admin-usage-row > span { color: var(--muted); }
.admin-usage-row .usage-value { color: var(--ink); font-weight: 700; }
.admin-usage-row .usage-cost { color: var(--green); font-size: 11px; font-weight: 800; }
.team-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; }
.voices-grid { min-height: calc(100vh - 117px); display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 14px; }
.admin-system-panel { margin-top: 14px; padding: 20px; }
.admin-system-grid { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-service-mark { width: 88px; height: 88px; display: grid; place-items: center; justify-self: center; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.admin-service-mark svg { width: 36px; height: 36px; stroke-width: 1.45; }
.admin-api-settings { display: grid; grid-template-columns: minmax(260px, 1.45fr) minmax(210px, 0.8fr); gap: 16px; margin: 0; padding: 0; border: 0; }
.admin-api-settings .field-label { min-width: 0; }
.admin-api-settings .field-label > span:first-child { margin-bottom: 6px; }
.stack-form { display: grid; gap: 13px; margin-top: 20px; }
.stack-form textarea { width: 100%; resize: vertical; padding: 10px 11px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--white); line-height: 1.5; }
.member-credentials { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid #bfd4ca; border-left: 3px solid var(--gold); border-radius: 5px; background: var(--green-soft); }
.member-credentials div { min-width: 0; }
.member-credentials small, .member-credentials strong { display: block; }
.member-credentials small { color: var(--muted); font-size: 8px; }
.member-credentials strong { margin-top: 3px; overflow-wrap: anywhere; font-family: Arial, sans-serif; font-size: 11px; }
.member-credentials .secondary-command { width: 100%; margin-top: 2px; background: var(--white); }
.field-grid.no-margin { margin-top: 0; }
.user-row { min-width: 0; display: grid; grid-template-columns: minmax(150px, 1.3fr) 90px 105px 60px 78px; align-items: end; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.user-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.user-identity > span { width: 34px; height: 34px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--white); background: var(--green); font-size: 10px; font-weight: 800; }
.user-identity strong, .user-identity small, .member-usage strong, .member-usage small { display: block; }
.user-identity strong { font-size: 11px; }
.user-identity small, .member-usage small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.member-usage strong { margin-top: 4px; font-size: 10px; }
.compact-field { display: grid; gap: 5px; }
.compact-field span { font-size: 8px; font-weight: 700; }
.compact-field input { height: 34px; padding: 0 8px; font-size: 10px; }
.switch-field { min-height: 34px; display: flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700; }
.save-user-button { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--green); border-radius: 4px; color: var(--green); background: var(--white); font-size: 9px; font-weight: 800; }
.save-user-button:hover { color: var(--white); background: var(--green); }
.save-user-button svg { width: 13px; height: 13px; }

.file-field { display: grid; gap: 7px; }
.file-field > span:first-child, .usage-mode-control legend { color: var(--ink); font-size: 10px; font-weight: 750; }
.file-field input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-picker { min-height: 94px; display: grid; place-items: center; align-content: center; gap: 6px; padding: 14px; border: 1px dashed var(--line-dark); border-radius: 5px; color: var(--green); background: #f5f2eb; text-align: center; cursor: pointer; }
.file-picker:hover { border-color: var(--green); background: var(--green-soft); }
.file-picker svg { width: 22px; height: 22px; }
.file-picker b { font-size: 10px; }
.file-picker small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.usage-mode-control { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 0; padding: 0; border: 0; }
.usage-mode-control legend { grid-column: 1 / -1; margin-bottom: 1px; }
.usage-mode-control label { position: relative; }
.usage-mode-control input { position: absolute; opacity: 0; pointer-events: none; }
.usage-mode-control span { height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); background: var(--white); font-size: 9px; font-weight: 750; }
.usage-mode-control input:checked + span { border-color: var(--green); color: var(--white); background: var(--green); }
.usage-mode-control svg { width: 14px; height: 14px; }
.consent-field { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 8px !important; font-size: 9px !important; line-height: 1.5; }
.consent-field input { width: 15px !important; height: 15px !important; flex: none; margin: 0; accent-color: var(--green); }

.client-voices-list { display: grid; }
.client-voice-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, 300px); gap: 12px 18px; padding: 17px 3px; border-bottom: 1px solid var(--line); }
.client-voice-row:last-child { border-bottom: 0; }
.client-voice-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.voice-identity { min-width: 0; display: flex; align-items: center; gap: 10px; }
.voice-identity > span { width: 37px; height: 37px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--white); background: var(--green); font-size: 10px; font-weight: 800; }
.voice-identity strong, .voice-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-identity strong { font-size: 11px; }
.voice-identity small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.voice-badges { display: flex; align-items: center; gap: 5px; }
.voice-badges span { padding: 4px 6px; border-radius: 3px; font-size: 8px; font-weight: 800; white-space: nowrap; }
.voice-mode.frequent { color: var(--green); background: var(--green-soft); }
.voice-mode.one_time { color: #856126; background: #eee2c9; }
.voice-training-status { color: var(--muted); background: #e9e6df; }
.client-voice-meta { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 8px; }
.client-voice-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-voice-row audio { width: 100%; height: 34px; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.client-voice-settings { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px; }
.client-voice-settings select, .client-voice-settings input { width: 100%; height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--white); font-size: 9px; }
.client-voice-actions { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.voice-readonly-note { color: var(--muted); font-size: 9px; }
.secondary-command { height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--white); font-size: 9px; font-weight: 750; }
.secondary-command:hover { border-color: var(--green); color: var(--green); }
.secondary-command svg, .delete-command svg { width: 13px; height: 13px; }
.delete-command { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #ddc1ba; border-radius: 4px; color: var(--coral); background: var(--white); }
.delete-command:hover { color: var(--white); background: var(--coral); }

.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(79, 100, 90, 0.28); backdrop-filter: blur(4px); z-index: 30; }
.reference-dialog { width: min(580px, 100%); display: grid; gap: 17px; padding: 23px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.voice-library-dialog { width: min(760px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow-y: auto; }
.reference-library-list { display: grid; }
.reference-library-row { min-width: 0; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(210px, 300px) auto; align-items: center; gap: 14px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.reference-library-row:last-child { border-bottom: 0; }
.reference-library-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.reference-library-heading > span { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.reference-library-heading svg { width: 16px; height: 16px; }
.reference-library-heading div { min-width: 0; }
.reference-library-heading strong, .reference-library-heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-library-heading strong { font-size: 10px; }
.reference-library-heading small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.reference-library-row audio { width: 100%; height: 36px; }
.reference-use-button { min-width: 82px; min-height: 36px; padding: 0 12px; font-size: 9px; }
.reference-dialog-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr) 38px; align-items: center; gap: 12px; }
.reference-dialog-heading > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); }
.reference-dialog-heading > span svg { width: 19px; height: 19px; }
.reference-dialog-heading .icon-button { grid-column: 3; }
.reference-file-field .file-picker { min-height: 120px; background: #f3f6f4; }
.reference-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.reference-process span { min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--white); }
.reference-process span:nth-child(2) { color: #856126; background: #f3ecdf; }
.reference-process span:nth-child(3) { color: var(--blue); background: var(--blue-soft); }
.reference-process svg { width: 15px; height: 15px; }
.reference-process b { font-size: 9px; }
.reference-actions { display: flex; justify-content: flex-end; gap: 8px; }
.reference-actions .primary-button { min-height: 38px; }
.confirm-dialog { width: min(410px, 100%); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px; padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.confirm-icon { width: 42px; height: 42px; display: grid; place-items: center; grid-row: 1 / 3; border-radius: 50%; color: var(--coral); background: var(--danger-bg); }
.confirm-icon svg { width: 18px; height: 18px; }
.confirm-dialog h2 { font-size: 16px; }
.confirm-dialog > p { grid-column: 1 / -1; margin: 4px 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 7px; margin-top: 4px; }
.danger-button { height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--white); background: var(--coral); font-size: 9px; font-weight: 800; }
.danger-button:hover { background: #984431; }
.danger-button svg { width: 13px; height: 13px; }

.toast { position: fixed; right: 22px; bottom: 22px; max-width: min(380px, calc(100vw - 44px)); padding: 12px 15px; border-radius: 5px; color: var(--white); background: var(--coral); box-shadow: var(--shadow); font-size: 11px; line-height: 1.55; z-index: 20; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; width: 100%; min-width: 0; max-width: 100vw; height: auto; padding: 16px; overflow: hidden; }
  .brand { padding: 0 0 14px; }
  .main-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 12px; padding-bottom: 12px; }
  .main-nav-button { justify-content: center; }
  .nav-block { width: 100%; min-width: 0; max-width: 100%; margin-top: 14px; display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); overflow-x: auto; }
  .nav-title { display: none; }
  .preset-button { border-left: 0; border-bottom: 2px solid transparent; }
  .preset-button.active { border-left-color: transparent; border-bottom-color: var(--gold); }
  .privacy-note { display: none; }
  .workspace { padding: 20px; }
  .studio-grid { grid-template-columns: 1fr; min-height: 0; }
  .control-panel { overflow: visible; }
  .team-grid { grid-template-columns: 1fr; }
  .voices-grid { grid-template-columns: 1fr; }
  .avatar-workbench { min-height: 0; grid-template-columns: 1fr 1fr; }
  .avatar-output-panel { grid-column: 1 / -1; }
  .member-form-panel { grid-row: 1; }
  .voice-upload-panel { grid-row: 1; }
  .admin-system-grid { grid-template-columns: 86px minmax(0, 1fr); }
  .admin-api-settings { grid-template-columns: 1fr; }
  .billing-rate-bar { grid-template-columns: 1fr 1fr auto; }
  .billing-rate-bar > p { grid-column: 1 / -1; }
  .auth-screen { grid-template-columns: minmax(290px, 0.72fr) minmax(400px, 1fr); }
  .auth-brand { padding: 32px; }
  .auth-soundscape { width: 100%; }
  .auth-sound-icon { width: 106px; height: 106px; }
}

@media (max-width: 620px) {
  .sidebar { padding: 13px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 17px; }
  .nav-block { grid-template-columns: repeat(5, 145px); }
  .preset-button { min-height: 48px; }
  .preset-button small { display: none; }
  .workspace { padding: 15px 12px 18px; }
  .topbar { height: auto; min-height: 92px; align-items: flex-start; }
  .topbar-actions { max-width: 220px; justify-content: flex-end; flex-wrap: wrap; }
  .quota-pill { order: 3; }
  .status-pill { order: 4; }
  .user-chip div { display: none; }
  h1 { font-size: 23px; }
  .topbar-actions .icon-text-button span { display: none; }
  .topbar-actions .icon-text-button { width: 38px; padding: 0; }
  .studio-grid { gap: 10px; }
  .composer-panel, .control-panel { padding: 16px; }
  .template-row { align-items: stretch; }
  .select-wrap { min-width: 0; flex: 1; }
  .secondary-button { padding: 0 11px; }
  .secondary-button span { display: none; }
  .script-field { min-height: 300px; }
  .script-field textarea { min-height: 300px; padding: 16px; font-size: 15px; }
  .audio-result { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; }
  .audio-result audio { grid-column: 1 / -1; grid-row: 2; }
  .audio-result-actions { grid-column: 2; grid-row: 1; }
  .audio-download-button, .audio-share-button { width: 38px; padding: 0; }
  .audio-download-button span, .audio-share-button span { display: none; }
  .wave-stage { height: 148px; }
  .composer-footer { align-items: stretch; flex-direction: column; gap: 10px; }
  .composer-footer p { max-width: 100%; }
  .primary-button { width: 100%; }
  .field-grid { grid-template-columns: 1fr; }
  .key-entry-row { flex-direction: column; }
  .validate-key-button { width: 100%; }
  .auth-screen { grid-template-columns: 1fr; align-content: start; }
  .auth-brand { min-height: 202px; padding: 22px; border-right: 0; border-bottom: 1px solid #c8d7cf; }
  .auth-soundscape { min-height: 116px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-content: center; }
  .auth-sound-icon { width: 62px; height: 62px; }
  .auth-sound-icon svg { width: 28px; height: 28px; }
  .auth-waveform { height: 58px; gap: 5px; padding: 0; }
  .auth-waveform span { width: 3px; }
  .auth-sound-tools { display: none; }
  .auth-form { width: calc(100% - 32px); padding: 34px 0 46px; }
  .history-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .history-row audio { grid-column: 1 / -1; }
  .history-audio-actions { grid-column: 1 / -1; }
  .user-row { grid-template-columns: minmax(140px, 1fr) 84px 58px; align-items: center; }
  .member-usage { display: none; }
  .compact-field { grid-column: 1 / 2; }
  .save-user-button { grid-column: 3 / 4; grid-row: 1 / 2; }
  .main-nav-button { padding: 0 6px; font-size: 9px; }
  .main-nav-button svg { width: 14px; height: 14px; }
  .member-mode .main-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-summary { grid-template-columns: 1fr; gap: 7px; }
  .admin-summary article { min-height: 62px; }
  .billing-rate-bar { grid-template-columns: 1fr; }
  .billing-rate-bar > p { grid-column: auto; }
  .billing-rate-bar .secondary-command { width: 100%; }
  .admin-system-panel { padding: 16px; }
  .admin-system-grid { grid-template-columns: 1fr; gap: 12px; }
  .admin-service-mark { display: none; }
  .client-voice-row { grid-template-columns: 1fr; }
  .client-voice-row audio, .client-voice-actions { grid-column: 1; grid-row: auto; }
  .client-voice-settings { grid-template-columns: 1fr; }
  .client-voice-actions { justify-content: stretch; }
  .secondary-command { flex: 1; }
  .reference-button, .reference-library-button { flex: 1 1 calc(50% - 4px); }
  .reference-dialog { max-height: calc(100vh - 24px); padding: 17px; overflow-y: auto; }
  .reference-process { grid-template-columns: 1fr; }
  .reference-process span { min-height: 42px; justify-content: flex-start; padding: 0 13px; }
  .reference-actions { align-items: stretch; }
  .reference-actions .primary-button, .reference-actions .secondary-command { flex: 1; }
  .voice-library-dialog { max-height: calc(100vh - 24px); }
  .reference-library-row { grid-template-columns: 1fr; gap: 9px; }
  .reference-use-button { width: 100%; }
  .avatar-workbench { grid-template-columns: 1fr; gap: 10px; }
  .avatar-output-panel { grid-column: auto; }
  .avatar-source-panel, .avatar-output-panel { padding: 16px; }
  .avatar-visual-picker { min-height: 300px !important; }
  .avatar-render-stage { min-height: 390px; }
  .avatar-output-settings { grid-template-columns: 1fr; }
}