/* ==========================================================================
   VoiceIQ — minimal design system (v2). Loaded LAST on every page.
   White ground, one sans, tight display type, 6px controls, borderless
   marketing content, and a sidebar app shell for the member workspace.
   Tokens live in voiceiq-ui.css. No selector, id or DOM contract changes.
   ========================================================================== */

:root {
  --shell-bg: #f7f8f9;
  --shell-w: 248px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t: .18s;
  --shadow-1: 0 1px 2px rgba(16,18,20,.04), 0 2px 8px rgba(16,18,20,.04);
  --shadow-2: 0 2px 4px rgba(16,18,20,.05), 0 10px 28px rgba(16,18,20,.08);
}
html[data-theme="dark"] {
  --shell-bg: #0e1012;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3);
  --shadow-2: 0 2px 4px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html, body { background: var(--bg); }
body { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--text); font-weight: 450; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
strong, b { font-weight: 600; }
::selection { background: var(--surface-3); color: var(--text); }
.ambient, .ambient-one, .ambient-two { display: none !important; }
.container { width: min(1180px, calc(100% - 48px)); }
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 6px; }
.reveal { transform: translateY(6px); transition-duration: .4s; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
@keyframes shell-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------------------------
   Public header — floating centred pill
   -------------------------------------------------------------------------- */
.site-header, .unified-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px 0 0; pointer-events: none;
}
.site-header .nav, .unified-header .nav, html body .site-header .nav.container, html body .unified-header .nav.container, html[data-private-page] body .site-header .nav {
  pointer-events: auto; position: relative;
  width: max-content; max-width: min(1180px, calc(100% - 32px)); height: 48px; margin: 0 auto;
  padding: 4px 6px 4px 12px; gap: 10px;
  border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 2px rgba(16,18,20,.04), 0 6px 20px rgba(16,18,20,.05);
}
.site-header .brand, .unified-header .brand { gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--text); padding-right: 4px; }
.brand-iq { color: var(--text); }
.brand-mark { width: 22px; height: 22px; border-radius: 6px; }
/* The mark is drawn in CSS on every header from first paint, so a refresh never flashes a plain wordmark before the sidebar takes over. */
.site-header .brand::before, .unified-header .brand::before {
  content: ""; flex: 0 0 auto; width: 22px; height: 22px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M8 0h10a8 8 0 0 1 8 8v10a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8zm-1.2 10.2a1.3 1.3 0 0 1 2.6 0v5.6a1.3 1.3 0 0 1-2.6 0zm4.9-3.4a1.3 1.3 0 0 1 2.6 0v12.4a1.3 1.3 0 0 1-2.6 0zm4.9 2.2a1.3 1.3 0 0 1 2.6 0v8a1.3 1.3 0 0 1-2.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M8 0h10a8 8 0 0 1 8 8v10a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8zm-1.2 10.2a1.3 1.3 0 0 1 2.6 0v5.6a1.3 1.3 0 0 1-2.6 0zm4.9-3.4a1.3 1.3 0 0 1 2.6 0v12.4a1.3 1.3 0 0 1-2.6 0zm4.9 2.2a1.3 1.3 0 0 1 2.6 0v8a1.3 1.3 0 0 1-2.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site-header .nav-links, .unified-header .nav-links { gap: 2px; margin-left: 0; }
.site-header .nav-links a, .unified-header .nav-links a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px;
  font-size: 13px; font-weight: 450; color: var(--muted); letter-spacing: .01em; transition: color var(--t) var(--ease), background var(--t) var(--ease);
}
.site-header .nav-links a:hover, .unified-header .nav-links a:hover { color: var(--text); background: var(--surface-2); }
.site-header .nav-links a.active, .unified-header .nav-links a.active { color: var(--text); font-weight: 500; }
.site-header .nav-links a.active::after, .unified-header .nav-links a.active::after { display: none !important; }
.nav-cta, .nav-links a.nav-cta, .site-header .nav-links a.nav-cta, .unified-header .nav-links a.nav-cta {
  min-height: 30px; margin-left: 6px; padding: 0 12px; border-radius: 6px;
  background: var(--ink); color: var(--ink-text) !important; font-size: 13px; font-weight: 500;
}
.nav-cta:hover { opacity: .86; background: var(--ink); }
.voiceiq-theme-toggle, body .voiceiq-theme-toggle, .unified-header .voiceiq-theme-toggle {
  width: 30px; height: 30px; margin-left: 2px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 14px;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.voiceiq-theme-toggle:hover { background: var(--surface-2); color: var(--text); }
#voiceiqThemeToggle, body .voiceiq-theme-toggle { font-size: 0 !important; display: grid; place-items: center; }
#voiceiqThemeToggle::before, body .voiceiq-theme-toggle::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-theme="dark"] #voiceiqThemeToggle::before, html[data-theme="dark"] body .voiceiq-theme-toggle::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu-toggle { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; }
.menu-toggle span { width: 14px; margin: 3px auto; }
.unified-header .nav-links a { margin: 0; padding: 0 10px; border-radius: 8px; }
.unified-header .nav-links a:hover { background: var(--surface-2); }
.unified-header .nav-links a.active::after { display: none; }
.shell-label { display: none; }
.shell-foot { display: contents; }
.shell-user { display: none; }
.announcement-badge { background: var(--ink); color: var(--ink-text); font-family: var(--font-body); font-size: 10px; border-radius: 6px; }

/* Legal pages ship a bare <header>; give it the same pill */
html:has(> body > header:not(.site-header)) body > header:not(.site-header) {
  position: sticky; top: 12px; z-index: 60; width: max-content; max-width: calc(100% - 32px); min-height: 48px; margin: 12px auto 0;
  padding: 4px 6px 4px 14px; gap: 10px; border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 1px 2px rgba(16,18,20,.04), 0 6px 20px rgba(16,18,20,.05);
}
body > header:not(.site-header) > a { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
body > header:not(.site-header) nav { gap: 2px; }
body > header:not(.site-header) nav a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--muted); }
body > header:not(.site-header) nav a:hover { color: var(--text); background: var(--surface-2); }

/* --------------------------------------------------------------------------
   Controls — buttons, inputs, tabs, pills (global)
   -------------------------------------------------------------------------- */
html body button:not(.sample-play):not(.message-avatar):not(.profile-close):not(.clip-remove):not(.upgrade-close):not(.announcement-close):not(.record-button.recording):not(.menu-toggle):not(.voiceiq-theme-toggle):not([class*="avatar"]):not(.speech-player-play):not([class*="play-button"]):not(.history-play):not(.history-star):not(.model-star):not(.speech-play):not(.typing-sound-toggle):not(.delivery-close):not(.crypto-close):not(.picker-heading button),
html body a[class]:not(.brand):not([class*="avatar"]):not(.nav-links a):not(.shell-user),
html body dialog button:not(.upgrade-close):not(.announcement-close):not(.delivery-close):not(.crypto-close),
html body .modal button, html body .profile-modal button:not(.profile-close),
html body [class*="pill"], html body [class*="badge"], html body [class*="-tag"], html body [class*="chip"], html body [class*="count"]:not([class*="counter"]),
html body [class*="tabs"] > button, html body [class*="toggle-group"] > button, html body [class*="filters"] > button, html body [class*="segment"] > button, html body .crypto-coins > button {
  border-radius: 6px !important;
}
html body [class*="tabs"]:not(button), html body [class*="toggle-group"]:not(button), html body .voice-modes, html body [class*="filters"]:not(button), html body [class*="segment"]:not(button), html body .crypto-coins { border-radius: 8px !important; }

.button, .btn, .dashboard-button, .billing-button, .create-model-button, .owned-generate, .restore-button,
.record-button, .record-again, .submit-recording, .send-button, .chat-shell .send-button, .profile-billing-link,
.dashboard-footer a, .dashboard-footer button, .profile-footer button, .admin-footer button, .admin-shell .admin-footer button,
.member-toolbar.library-toolbar a, .creator-inline-links a, .creator-result-actions a, .access-key-box button,
.owned-key-button, .owned-download, .owned-tools button, .dashboard-text-link, .copy-prompt, .upgrade-cta,
.announcement-main button, .announcement-popup .announcement-actions a, .profile-actions button, .profile-actions a,
.profile-shell .profile-membership-actions a, .profile-membership-actions button, .premium-panel button,
.chat-back > a, .chat-shell .chat-back > a, .credit-activity button, .generation-settings button, .model-toggle,
.audio-action, .account-actions .btn, .recovery-change, .crypto-launch, .delivery-tools button, .delivery-presets button,
.voice-tags button, .design-examples button, #multiSpeaker button, .generation-history button, .recovery-card button, .delete-dialog-actions button {
  font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.button { min-height: 38px; padding: 0 14px; font-size: 13px; gap: 6px; }
.button-large { min-height: 42px; padding-inline: 18px; font-size: 14px; }
.button-small { min-height: 32px; padding-inline: 12px; font-size: 13px; }
.button-dark, .button-accent, .btn-primary, .btn-accent, .dashboard-button-primary, .billing-button, .create-model-button,
.owned-generate, .restore-button, .record-button, .submit-recording, .send-button, .chat-shell .send-button, .upgrade-cta,
.announcement-main button, .announcement-popup .announcement-actions a, .profile-shell .profile-membership-actions a,
.profile-membership-actions button, .premium-panel button, .access-key-box button, .creator-result-actions a:first-child, .plus-button,
#multiSpeaker .primary, .delivery-apply, .crypto-dialog .crypto-primary, .recovery-card button, .profile-avatar-actions .primary {
  background: var(--ink) !important; color: var(--ink-text) !important; border-color: var(--ink) !important;
}
.button-dark:hover, .btn-primary:hover, .dashboard-button-primary:hover, .billing-button:not(:disabled):hover, .create-model-button:not(:disabled):hover,
.owned-generate:not(:disabled):hover, .send-button:not(:disabled):hover, .upgrade-cta:hover, #multiSpeaker .primary:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.button-ghost, .button-light, .btn, .dashboard-button-secondary, .profile-billing-link, .dashboard-footer a, .member-toolbar.library-toolbar a,
.creator-inline-links a, .creator-result-actions a, .owned-key-button, .owned-download, .owned-tools button, .record-again, .copy-prompt,
.profile-actions button, .profile-actions a, .profile-shell .profile-footer button, .credit-activity button, .chat-shell .chat-back > a,
.profile-membership-actions button[data-portal], .announcement-main .ann-toolbar button, .announcement-main .ann-controls button, #annCancel,
.generation-history button, .recovery-change, .crypto-launch, .delivery-tools button, .voice-tags button, .design-examples button, #multiSpeaker button {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
}
.button-ghost:hover, .button-light:hover, .btn:hover, .dashboard-button-secondary:hover, .profile-billing-link:hover, .dashboard-footer a:hover,
.member-toolbar.library-toolbar a:hover, .creator-inline-links a:hover, .owned-tools button:hover, .generation-history button:hover:not(:disabled),
.voice-tags button:hover, .design-examples button:hover, #multiSpeaker button:hover:not(:disabled), .credit-activity button:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--text); }
.btn { min-height: 32px; padding: 0 12px; font-size: 13px; }
.dashboard-button { min-height: 36px; padding: 0 14px; font-size: 13px; }
.dashboard-button-light { background: var(--ink) !important; color: var(--ink-text) !important; }
.dashboard-text-link { min-height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); color: var(--text); font-size: 13px; }
.dashboard-text-link:hover { background: var(--surface-2); border-color: var(--line-strong); }
.create-model-button, .owned-generate, .billing-button, .submit-recording, #multiSpeaker .primary { min-height: 42px !important; font-size: 14px !important; }
.btn-danger, .owned-tools .owned-delete, .profile-actions .danger, .announcement-main .ann-controls button.ann-danger, .profile-avatar-actions .danger { background: var(--surface) !important; border: 1px solid var(--line-strong) !important; color: var(--danger) !important; }
.btn-danger:hover, .owned-tools .owned-delete:hover, .profile-avatar-actions .danger:hover { background: var(--danger-soft) !important; border-color: transparent !important; opacity: 1; }
.btn-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
button:disabled, .button:disabled { transform: none !important; }
.member-toolbar.library-toolbar > a { border-color: transparent; background: transparent; color: var(--muted); padding-left: 0; }
.library-toolbar svg { color: var(--muted); }
.voice-tags button[aria-pressed=true], .design-examples button[aria-pressed=true], #multiSpeaker .block-speakers button[aria-pressed=true] { background: var(--ink) !important; color: var(--ink-text) !important; border-color: var(--ink) !important; }

/* Inputs */
.creator-name, .search, .public-search, .restore-input, .model-alias, .modal input, .modal select, .announcement-main input,
.announcement-main textarea, .ann-options select, .owned-field textarea, .composer textarea, .auth-form .creator-name, .profile-security .creator-name,
#multiSpeaker input, #multiSpeaker select, #multiSpeaker textarea, .picker-search, .recovery-card input, .delivery-dialog input, .crypto-dialog input, .creator-main #designPrompt {
  min-height: 40px; padding-inline: 12px; border: 1px solid var(--line-strong); border-radius: 6px !important; background: var(--surface); font-size: 14px; box-shadow: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
textarea.creator-name, .owned-field textarea, .announcement-main textarea, #multiSpeaker textarea, .creator-main #designPrompt { padding: 12px; }
.composer textarea { height: 44px; min-height: 44px; padding: 12px; }
.creator-name:focus, .search:focus, .public-search:focus, .restore-input:focus, .model-alias:focus, .modal input:focus, .modal select:focus,
.owned-field textarea:focus, .composer textarea:focus, .announcement-main input:focus, .announcement-main textarea:focus, #multiSpeaker input:focus,
#multiSpeaker select:focus, #multiSpeaker textarea:focus, .picker-search:focus, .recovery-card input:focus, .creator-main #designPrompt:focus { border-color: var(--text); box-shadow: var(--ring); background: var(--surface); }
select.creator-name, .modal select, .ann-options select, #multiSpeaker select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.auth-form .creator-name { min-height: 40px; }
.auth-form .create-model-button { min-height: 40px; margin-top: 10px; }
.auth-form { gap: 6px; margin-top: 20px; }
.auth-form label { margin-top: 10px; }
.auth-message { border-radius: 6px; background: var(--surface-2); color: var(--text); border-color: var(--line); }
input[type="range"], .generation-settings input[type=range], #multiSpeaker .turn-settings input[type=range] { accent-color: var(--text); }
.generation-settings input[type=range] { background: linear-gradient(to right, var(--text) 0%, var(--text) var(--range-fill), var(--line-strong) var(--range-fill), var(--line-strong) 100%); }
.generation-settings input[type=range]::-webkit-slider-thumb, #multiSpeaker .turn-settings input[type=range]::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb { background: var(--text); border-color: var(--surface); }
#multiSpeaker .turn-settings input[type=range] { background: linear-gradient(to right, var(--text) var(--fill), var(--line-strong) var(--fill)); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--text); }

/* Segmented tabs */
.admin-tabs, .auth-tabs, .library-tabs, .mode-toggle, .model-toggle-group, .voice-modes, .history-filters, .picker-tabs, .crypto-coins { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.admin-tabs button, .auth-tabs button, .library-tabs button, .mode-toggle button, .voice-modes button, .model-toggle-group button, .history-filters button, .picker-tabs button, .crypto-coins button {
  min-height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--muted); background: transparent;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.admin-tabs button.active, .auth-tabs button.active, .library-tabs button[aria-pressed="true"], .mode-toggle button[aria-pressed="true"], .voice-modes button[aria-pressed="true"],
.model-toggle-group button[aria-pressed="true"], .history-filters [aria-pressed=true], .picker-tabs button[aria-pressed=true], .crypto-coins button[aria-pressed=true] {
  background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: 0 1px 2px rgba(16,18,20,.06);
}
html[data-theme="dark"] .admin-tabs { background: var(--surface-2) !important; }
html[data-theme="dark"] .admin-tabs button.active { background: var(--surface) !important; }

/* Kickers, meta text */
.mini-label, .kicker, .section-label, .card-number, .step-index, .field-label, .account-kicker, .dashboard-kicker, .admin-kicker,
.voice-entry-index, .chat-kicker, .upgrade-label, .profile-plus-label, .announcement-eyebrow, .ann-category, .billing-balance span,
.dashboard-stat span, .admin-stat span, .admin-identity span, .chat-identity small, .dashboard-card-topline, .creator-title span,
.owned-selected small, .generation-credit-box small, .owned-meta, .setting-ends, .generation-settings label, .pack-choice span,
.plan-price span, .membership-plans .plan-price span, .profile-stat span, .models-title, .admin-footer, .auth-form label, .modal label,
.announcement-main label, .trust-row, .logo-strip, .footer, .site-legal-footer, .sample-time, .record-timer, .prompt-foot, .review-copy small,
.account-name small, .account-meta small, .audit-actor small, .audit-copy small, .audit-target, .message-time, .char-count, .chat-head small,
.dashboard-model-copy small, .clip-info small, .owned-card small, .sample-badge, .generation-note, .database-count, .eyebrow, .team-index,
.fake-file, .generate-pill, .auth-points span, .creator-side .kicker, .voice-tags legend, #multiSpeaker .speaker label, #multiSpeaker .turn label,
#multiSpeaker .turn summary, #multiSpeaker .take-actions span, #multiSpeaker .delivery-ends, #multiSpeaker #conv-count, .picker-voice small,
.picker-selected, .delivery-eyebrow, .delivery-dialog label, .crypto-dialog label, .crypto-dialog small, .recovery-card label, .history-card time,
.history-settings, .history-page, .speech-time, .invite-code strong, #recoveryEmailBadge, .invite-friends summary span, .quality-pass, .quality-note,
.emotion-menu [role=option], .emotion-hint, .choose-voice span, #multiSpeaker .choose-voice span {
  font-family: var(--font-body); letter-spacing: .01em; text-transform: none; font-weight: 500; font-size: 12px; color: var(--muted);
}
.field-label, .auth-form label, .modal label, .announcement-main label, .recovery-card label, .delivery-dialog label, .crypto-dialog label, #multiSpeaker .speaker label, #multiSpeaker .turn label { font-size: 13px; font-weight: 500; color: var(--text); letter-spacing: 0; }
.kicker, .section-label, .dashboard-kicker, .admin-kicker, .account-kicker, .mini-label, .chat-kicker, .profile-plus-label, .upgrade-label, .ann-category, .billing-balance span, .dashboard-stat span, .admin-stat span, .creator-side .kicker { font-size: 12.5px; font-weight: 450; }
.dashboard-kicker::before, .chat-kicker::before, .admin-hero .admin-kicker::before, .auth-intro .account-kicker::before, .dashboard-live-dot::before { display: none; }
.eyebrow, .page-hero .eyebrow, .hero .eyebrow, .trust-row, .logo-strip, .auth-points { display: none !important; }
.count-pill, .live-pill, .owned-badge, .community-status, .database-count, .dashboard-model-badge, .plus-pill, .badge, .role-tag, .audit-role,
.profile-special-tag, .custom-member-tag, .sample-badge, .generation-note, .library-count, .creator-title span, .team-index, .custom-chat-tag,
.credit-activity .activity-balance, .announcement-badge, .premium-panel .plus-pill, #recoveryEmailBadge, .invite-friends summary span, .quality-pass, .quality-note, .signup-state {
  border-radius: 6px; min-height: 22px; padding: 0 8px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  background: var(--surface-2); color: var(--muted);
}
.count-pill, .plus-pill, .public-count { background: var(--surface-2); color: var(--text); }
.live-pill { background: var(--signal-soft); color: var(--signal-text); }
.badge.badge-admin, .role-tag.admin, .audit-role.admin { background: var(--ink); color: var(--ink-text); }
.badge.badge-owner, .role-tag.owner, .audit-role.owner { background: var(--surface-3); color: var(--text); }
.badge.badge-banned { background: var(--danger-soft); color: var(--danger); }
.badge.badge-active, #recoveryEmailBadge.verified, .quality-pass { background: var(--success-soft); color: var(--success); }
.badge.badge-chat { background: var(--warn-soft); color: var(--warn); }
html body .premium-panel .plus-pill, html body .membership-plans .premium-panel .plus-pill { background: var(--ink) !important; color: var(--ink-text) !important; }
html body .membership-plans .premium-panel .plus-benefits li:before, html body .premium-panel .plus-benefits li:before { color: var(--text) !important; background: var(--surface-2); }
html body .premium-panel, html body .membership-plans .premium-panel { border-color: var(--line) !important; }

/* Cards, empty states, dialogs */
.member-card, .panel-card, .admin-stat, .dashboard-stat, .dashboard-side-card, .dashboard-recent-card, .chat-card, .creator-main, .creator-side,
.auth-card, .creator-account-card, .profile-stat, .owner-control, .my-library, .my-workspace, .prompt-card, .recorder-card, .credit-activity,
.billing-grid .purchase-panel, .membership-plans .purchase-panel, .premium-panel, .announcement-main article, .announcement-main form, .profile-shell .member-card {
  border: 1px solid var(--line); border-radius: var(--radius-l) !important; background: var(--surface); box-shadow: none;
}
.premium-panel, .membership-plans .premium-panel, .upgrade-plans .upgrade-premium { border-color: var(--line); background: var(--surface); }
.premium-panel .plus-pill, .upgrade-premium .upgrade-label { background: var(--ink); color: var(--ink-text); }
.empty, .dashboard-empty-state, .owned-empty, .workspace-placeholder, .messages .chat-empty, #announcementList:not(:has(article)):not(:empty), .picker-empty { border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); background: transparent; }
.modal, .profile-modal, .plus-upgrade, .announcement-popup, .voice-picker, .delivery-dialog, .crypto-dialog, .model-delete-dialog { border-radius: var(--radius-l); box-shadow: var(--shadow-2); border-color: var(--line); }
.modal-backdrop, .profile-backdrop, .plus-upgrade::backdrop, .announcement-popup::backdrop, .voice-picker::backdrop, .delivery-dialog::backdrop, .crypto-dialog::backdrop, .model-delete-dialog::backdrop { background: rgba(16,18,20,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.profile-close, .upgrade-close, .announcement-close, .delivery-close, .crypto-dialog .crypto-close, .picker-heading button { border-radius: 8px !important; border: 0; background: var(--surface-2); color: var(--muted); }
.profile-close:hover, .upgrade-close:hover, .picker-heading button:hover { background: var(--surface-3); color: var(--text); }

/* --------------------------------------------------------------------------
   Marketing pages
   -------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: 48px; row-gap: 0; align-items: end; padding: 84px 0 40px; text-align: left; }
.hero h1 { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(40px, 5.6vw, 68px); line-height: .98; letter-spacing: -.05em; font-weight: 600; max-width: 14ch; }
.hero h1 span, .page-hero h1 span, .section-heading h2 span, .cta-panel h2 span, .auth-intro h1 span, .member-shell h1 span, .dashboard-hero h1 span, .dark-panel h2 span { color: var(--muted) !important; font-weight: 600 !important; }
.hero-copy { grid-column: 2; grid-row: 1; max-width: 420px; margin: 0 0 6px; font-size: 16px; line-height: 1.5; color: var(--text); }
.hero-actions { grid-column: 2; grid-row: 2; justify-content: flex-start; margin-top: 14px; gap: 8px; }
.hero .voice-card { grid-column: 1 / -1; grid-row: 3; }
.voice-card { margin: 56px auto 0; width: 100%; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-2); }
.voice-card h3 { margin: 4px 0 0; font-size: 18px; letter-spacing: -.02em; }
.voice-card-top { align-items: center; }
.sample-grid { gap: 10px; margin-top: 18px; }
.sample-card { padding: 16px; border-radius: var(--radius); background: var(--surface-2); border-color: transparent; transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.sample-card:hover { border-color: var(--line-strong); }
.sample-avatar { background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 600; border: 1px solid var(--line); }
.sample-play { width: 36px; height: 36px; background: var(--ink); color: var(--ink-text); transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.sample-play:hover { transform: scale(1.05); }
.sample-wave span { background: var(--line-strong); }
.sample-wave span.active { background: var(--text); }
.generation-note > span { background: var(--signal); }
.page-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 48px; align-items: end; padding: 84px 0 48px; }
.page-hero h1 { grid-column: 1; margin: 0; max-width: 14ch; font-size: clamp(38px, 5.2vw, 60px); line-height: 1; letter-spacing: -.05em; }
.page-hero p { grid-column: 2; max-width: 440px; margin: 0 0 6px; font-size: 16px; line-height: 1.5; color: var(--text); }
.page-hero .hero-actions { grid-column: 2; grid-row: auto; }
.section { padding: 80px 0; }
.section.compact { padding-top: 24px; padding-bottom: 80px; }
.section-heading { margin-bottom: 32px; }
.section-heading h2, .dark-panel h2, .cta-panel h2 { max-width: 20ch; margin: 6px 0 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -.04em; font-weight: 600; }
.section-heading.centered h2 { margin-inline: auto; }
.section-heading p { max-width: 520px; margin: 12px 0 0; font-size: 15px; line-height: 1.55; }
.contrast-section { padding: 80px 0; background: var(--surface-2); border: 0; }
html[data-theme="dark"] .contrast-section { background: var(--surface); }
.info-grid, .steps { gap: 24px; }
.info-card, .step, .feature-card { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; display: block; }
.info-card:hover, .feature-card:hover { border-color: transparent; }
.info-icon, .feature-icon {
  width: 100%; height: 160px; margin: 0 0 16px; border: 0; border-radius: var(--radius); background: var(--surface-2);
  display: grid; place-items: center; color: var(--text); font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em;
}
.feature-card h3, .step h3, .info-card h3 { margin: 0 0 6px; font-size: 16px; letter-spacing: -.02em; font-weight: 600; }
.feature-card p, .step p, .info-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.info-card p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.feature-card.large { background: var(--surface-2); color: var(--text); border: 0; min-height: 0; padding: 24px; border-radius: var(--radius); }
.feature-card.large::after { display: none; }
.step { padding: 0; }
.step-visual { border: 0; border-radius: var(--radius); background: var(--surface-2); }
.database-toolbar { margin-bottom: 16px; }
.database-grid { gap: 10px; }
.voice-entry { min-height: 96px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.voice-entry:hover { background: var(--surface); border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.voice-entry strong { font-size: 14px; }
.team-photo-wrap { border: 0; border-radius: var(--radius); }
.team-photo { filter: grayscale(100%); }
.team-info { padding: 12px 0 0; }
.team-info h3 { margin: 0 0 4px; font-size: 15px; letter-spacing: -.02em; }
.team-info p { font-size: 13px; }
.dark-panel { min-height: 0; padding: 56px; border-radius: var(--radius-l); background: var(--ink); color: var(--ink-text); gap: 48px; }
.dark-panel::after { display: none; }
html[data-theme="dark"] .dark-panel { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.dark-panel .kicker, .dark-panel .mini-label { color: color-mix(in srgb, currentColor 60%, transparent) !important; }
.dark-panel h2 span { color: color-mix(in srgb, currentColor 55%, transparent) !important; }
.dark-copy p { font-size: 15px; }
.safety-card { padding: 20px 22px; border-radius: var(--radius); }
.shield-mark { width: 40px; height: 40px; margin-bottom: 18px; border-radius: 8px; background: var(--ink-text); color: var(--ink); font-size: 16px; }
html[data-theme="dark"] .shield-mark { background: var(--ink); color: var(--ink-text); }
.safety-line { padding: 12px 0; font-size: 13px; }
.cta-panel, html[data-private-page] .cta-panel {
  margin: 0 0 80px; padding: 72px 48px; border: 0; border-radius: var(--radius-l); background: var(--ink); color: var(--ink-text);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center;
}
html[data-theme="dark"] .cta-panel { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.cta-panel::before { display: none; }
.cta-panel h2 { max-width: 18ch; margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; color: inherit; }
.cta-panel h2 span { color: color-mix(in srgb, currentColor 55%, transparent) !important; }
.cta-panel p { max-width: 560px; margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: color-mix(in srgb, currentColor 66%, transparent); }
.cta-panel p + p { margin-top: 10px; }
.cta-actions { gap: 8px; }
.cta-panel .button-dark, .cta-panel .button-ghost { background: var(--ink-text) !important; color: var(--ink) !important; border-color: transparent !important; }
.cta-panel .button-ghost { background: color-mix(in srgb, currentColor 12%, transparent) !important; color: inherit !important; }
.contrast-section .cta-actions { justify-content: center; }
.footer { padding: 32px 0 48px; border-top: 1px solid var(--line); align-items: center; gap: 24px; color: var(--muted); font-size: 13px; letter-spacing: 0; }
.footer > span::before { content: "VoiceIQ"; display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.footer-links { gap: 20px; }
.footer-links a { padding: 0; color: var(--muted); font-size: 13px; }
.footer-links a:hover { color: var(--text); }
.site-legal-footer { width: min(1180px, calc(100% - 48px)); margin: 32px auto 0; padding: 28px 0 40px; border-top: 1px solid var(--line); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.site-legal-footer nav { justify-content: flex-start; gap: 20px; }
.site-legal-footer nav::before { content: "© 2026 VoiceIQ"; margin-right: auto; color: var(--faint); }
.site-legal-footer a { color: var(--muted); }
html[data-private-page] .footer { display: none; }
html[data-private-page] .site-legal-footer { display: block; }
body:has(.footer) > .site-legal-footer { display: none !important; }
html[data-private-page]:has(.footer) > body > .site-legal-footer { display: block !important; }
body > main:not(.container):not([class]) { margin-top: 56px; }
main h1 + p { font-family: var(--font-body); font-size: 13px; font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--muted); }
.member-gate h1 { font-size: 24px; }
.member-gate a { color: var(--text); }

/* Auth */
.auth-shell { min-height: 0; padding: 72px 0 96px; gap: 56px; }
.auth-intro h1 { font-size: clamp(38px, 5.2vw, 60px); line-height: 1; letter-spacing: -.05em; font-weight: 600; }
.auth-intro > p { margin-top: 18px; font-size: 16px; color: var(--text); }
.auth-intro .account-kicker { margin-bottom: 14px; }
.auth-card { padding: 24px; }
.auth-tabs { gap: 2px; padding: 3px; border-radius: 8px; }
.auth-tabs button { min-height: 32px; border-radius: 6px; }
.signup-agreement a { color: var(--text); }
.auth-footnote { font-size: 12px; }
.recovery-card { box-shadow: var(--shadow-2); }
.recovery-card h1 { font-size: 26px; }

/* ==========================================================================
   MEMBER APP SHELL
   ========================================================================== */
@media (min-width: 1001px) {
  html[data-private-page][data-authenticated] body { padding-left: var(--shell-w); }
  html[data-private-page][data-authenticated] .unified-header {
    position: fixed; left: 0; top: 0; bottom: 0; width: var(--shell-w); padding: 0; z-index: 70; pointer-events: auto;
    border-right: 1px solid var(--line); background: var(--shell-bg);
  }
  html[data-private-page][data-authenticated] .unified-header .nav, html[data-private-page][data-authenticated] body .unified-header .nav.container, html[data-private-page][data-authenticated] body .site-header .nav {
    width: 100%; max-width: none; height: 100%; margin: 0; padding: 18px 12px 14px;
    flex-direction: column; align-items: stretch; gap: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html[data-private-page][data-authenticated] .unified-header .brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 18px; font-size: 15.5px; letter-spacing: -.025em; }
  html[data-private-page][data-authenticated] .unified-header .brand::before {
    content: ""; flex: 0 0 auto; width: 26px; height: 26px; background: var(--ink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M8 0h10a8 8 0 0 1 8 8v10a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8zm-1.2 10.2a1.3 1.3 0 0 1 2.6 0v5.6a1.3 1.3 0 0 1-2.6 0zm4.9-3.4a1.3 1.3 0 0 1 2.6 0v12.4a1.3 1.3 0 0 1-2.6 0zm4.9 2.2a1.3 1.3 0 0 1 2.6 0v8a1.3 1.3 0 0 1-2.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' d='M8 0h10a8 8 0 0 1 8 8v10a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8V8a8 8 0 0 1 8-8zm-1.2 10.2a1.3 1.3 0 0 1 2.6 0v5.6a1.3 1.3 0 0 1-2.6 0zm4.9-3.4a1.3 1.3 0 0 1 2.6 0v12.4a1.3 1.3 0 0 1-2.6 0zm4.9 2.2a1.3 1.3 0 0 1 2.6 0v8a1.3 1.3 0 0 1-2.6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[data-private-page][data-authenticated] .unified-header .nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; margin: 0; overflow: visible; }
  html[data-private-page][data-authenticated] .shell-label { display: block; padding: 14px 10px 6px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  html[data-private-page][data-authenticated] .shell-label:first-child { padding-top: 0; }
  html[data-private-page][data-authenticated] .unified-header .nav-links a {
    display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 13.5px; color: var(--muted); white-space: nowrap;
    transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  html[data-private-page][data-authenticated] .unified-header .nav-links a::before {
    content: ""; flex: 0 0 auto; width: 16px; height: 16px; background: currentColor; opacity: .7;
    -webkit-mask: var(--nav-icon) center / contain no-repeat; mask: var(--nav-icon) center / contain no-repeat; transition: opacity var(--t) var(--ease);
  }
  html[data-private-page][data-authenticated] .unified-header .nav-links a:hover { background: color-mix(in srgb, var(--surface) 70%, var(--shell-bg)); color: var(--text); }
  html[data-private-page][data-authenticated] .unified-header .nav-links a.active { background: var(--surface); color: var(--text); font-weight: 500; box-shadow: var(--shadow-1); }
  html[data-private-page][data-authenticated] .unified-header .nav-links a.active::before { opacity: 1; }
  html[data-private-page][data-authenticated] .announcement-badge { margin-left: auto; }
  html[data-private-page][data-authenticated] .shell-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 14px; }
  html[data-private-page][data-authenticated] .shell-user {
    display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
    color: var(--text); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  }
  html[data-private-page][data-authenticated] .shell-user:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
  html[data-private-page][data-authenticated] .shell-avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-size: 12.5px; font-weight: 600; }
  html[data-private-page][data-authenticated] .shell-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html[data-private-page][data-authenticated] .shell-user-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  html[data-private-page][data-authenticated] .shell-user-name { font-size: 13px; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-private-page][data-authenticated] .shell-user-meta { font-size: 11.5px; color: var(--muted); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-private-page][data-authenticated] .unified-header .voiceiq-theme-toggle, html[data-private-page][data-authenticated] .shell-foot .voiceiq-theme-toggle { flex: 0 0 auto; order: 0; width: 34px; height: 34px; margin: 0; border-radius: 8px; }
  html[data-private-page][data-authenticated] .voiceiq-online-toggle { left: calc(var(--shell-w) + 16px); right: auto; }
  html[data-private-page][data-authenticated] .voiceiq-online-panel { left: calc(var(--shell-w) + 16px); right: auto; }
  /* Online members docked in the sidebar */
  html[data-private-page][data-authenticated] .shell-online { display: flex; flex-direction: column; min-height: 0; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  html[data-private-page][data-authenticated] .shell-online:empty { display: none; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-toggle, html[data-private-page][data-authenticated] body .shell-online .voiceiq-online-toggle {
    position: static; display: flex !important; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; margin: 0;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--muted); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; transform: none;
  }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-toggle:hover { background: color-mix(in srgb, var(--surface) 70%, var(--shell-bg)); color: var(--text); transform: none; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-toggle::before { width: 7px; height: 7px; box-shadow: 0 0 0 3px var(--signal-soft); }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-toggle::after {
    content: ""; margin-left: auto; width: 14px; height: 14px; background: currentColor; opacity: .6; transition: transform var(--t) var(--ease);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-panel, html[data-private-page][data-authenticated] body .shell-online .voiceiq-online-panel {
    position: static; display: none; width: auto; max-height: min(34vh, 320px); margin: 4px 0 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: none; opacity: 1; transform: none; pointer-events: auto; overflow: hidden;
  }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-panel.open { display: block; animation: fade-in .2s var(--ease); }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-head { display: none; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-list { max-height: min(34vh, 320px); padding: 6px; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-user { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; width: 100%; padding: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; cursor: pointer; align-items: center; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-user:hover { background: var(--surface-2); }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-avatar { display: grid; place-items: center; overflow: hidden; width: 28px; height: 28px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 11px; font-weight: 600; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-avatar img { width: 100%; height: 100%; object-fit: cover; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-copy { display: block; min-width: 0; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-tag { display: inline-flex; margin-top: 3px; padding: 0 6px; min-height: 16px; border-radius: 5px; font-size: 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-name strong { font-size: 12.5px; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-role { font-size: 9px; padding: 3px 5px; }
  html[data-private-page][data-authenticated] .shell-online .voiceiq-online-empty { padding: 14px 8px; font-size: 12px; }
  html[data-private-page][data-authenticated] .container, html[data-private-page][data-authenticated] .chat-shell, html[data-private-page][data-authenticated] .announcement-main { width: min(1120px, calc(100% - 72px)); }
  html[data-private-page][data-authenticated] .member-toolbar.library-toolbar, html[data-private-page][data-authenticated] .chat-back { display: none !important; }
  html[data-private-page][data-authenticated] main { animation: shell-in .32s var(--ease) both; }
}
@media (min-width: 1001px) and (max-width: 1240px) {
  :root { --shell-w: 224px; }
}
.unified-header .nav-links a[href="/dashboard"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/my-models"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/create-model"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/support"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M5.6 5.6l3.9 3.9M14.5 14.5l3.9 3.9M18.4 5.6l-3.9 3.9M9.5 14.5l-3.9 3.9'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/soundboard"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M8 9v6M12 8v8M16 10v4'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/chat"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/profile"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21v-2a7 7 0 0 1 14 0v2'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/announcements"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/admin"], .unified-header .nav-links a[href="/owner"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/owner"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18M4 16l1.5-9 4.5 4 2-6 2 6 4.5-4L20 16z'/%3E%3C/svg%3E"); }
.unified-header .nav-links a[href="/billing"] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }

/* --------------------------------------------------------------------------
   Layout primitives (used by page-*.css layouts)
   -------------------------------------------------------------------------- */
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 24px; }
.ph-copy { min-width: 0; }
.ph-kicker { display: block; font-size: 12.5px; color: var(--muted); }
.ph h1 { margin: 4px 0 6px; max-width: 24ch; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.12; }
.ph p { margin: 0; max-width: 560px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.ph-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 0 auto; }
.card { border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); padding: 20px 22px; }
.card-soft { border: 0; background: var(--surface-2); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.02em; font-weight: 600; }
.card-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.card-kicker { display: block; font-size: 12.5px; color: var(--muted); }
.grid { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.stat-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--text); }
.stat-label { display: block; font-size: 12.5px; color: var(--muted); }
.stat-value { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.stat-meta { display: block; margin-top: 5px; font-size: 12px; color: var(--faint); }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
a.tile:hover, button.tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.tile-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--text); }
.tile strong { font-size: 14px; font-weight: 500; }
.tile small { font-size: 12.5px; color: var(--muted); }
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.list-row:first-child { border-top: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; border-radius: 6px; background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 500; }
.chip-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
.divider { height: 1px; margin: 16px 0; background: var(--line); }
.muted { color: var(--muted); }
.avatar { display: grid; place-items: center; border-radius: 999px; background: var(--surface-2); color: var(--text); font-weight: 600; overflow: hidden; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .ph { flex-direction: column; align-items: flex-start; gap: 14px; } }

/* Shared page-header rhythm inside the shell */
.member-shell, .dashboard-shell, .profile-shell, .billing-shell, .admin-shell { padding-top: 32px; padding-bottom: 64px; }
html[data-private-page] .page-hero { display: block; padding: 32px 0 22px; }
html[data-private-page] .page-hero h1, .member-shell h1, .dashboard-hero h1, .profile-heading h1, .billing-heading h1, .chat-hero h1, .admin-hero h1, .announcement-main h1 {
  margin: 4px 0 6px; max-width: 24ch; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.12; font-weight: 600;
}
html[data-private-page] .page-hero p, .member-intro, .dashboard-hero p, .chat-hero p, .admin-hero p, .announcement-main > p { max-width: 560px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
html[data-private-page] .page-hero h1 span, .dashboard-hero h1 span { color: var(--muted) !important; }
.member-toolbar.library-toolbar { margin-top: 24px !important; }

/* Section headers inside cards */
.dashboard-card-heading h2, .dashboard-card-heading-row h2, .library-section-head h3, .panel-head h2, .purchase-panel h2, .credit-activity h2,
.generation-history .history-heading h2, .profile-plus-focus .profile-membership h2, .announcement-main article h2, .ann-editor-heading h2, #multiSpeaker h2, #multiSpeaker h3 {
  margin: 2px 0 0; font-size: 16px; letter-spacing: -.02em; font-weight: 600;
}

/* ==========================================================================
   OVERVIEW (dashboard)
   ========================================================================== */
.dashboard-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 26px; }
.dashboard-hero-actions { gap: 8px; }
.dashboard-stats { gap: 12px; }
.dashboard-stat { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 16px 18px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
a.dashboard-stat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.dashboard-stat-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 15px; }
.dashboard-stat span { font-size: 12.5px; }
.dashboard-stat strong { margin-top: 4px; font-size: 22px; letter-spacing: -.035em; }
.dashboard-stat small { margin-top: 4px; font-size: 12px; }
.dashboard-grid-modern { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr); gap: 12px; margin-top: 12px; }
.dashboard-create-card, html[data-theme="dark"] .dashboard-create-card {
  --panel-bg: var(--surface); --panel-fg: var(--text); --panel-btn-bg: var(--ink); --panel-btn-fg: var(--ink-text);
  position: relative; overflow: hidden; min-height: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--text);
}
.dashboard-create-card::after { display: none; }
.dashboard-card-topline { color: var(--muted); font-size: 12.5px; }
.dashboard-live-dot { display: inline-flex; align-items: center; gap: 6px; }
.dashboard-live-dot::before { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.dashboard-create-content { min-height: 0; padding-top: 26px; }
.dashboard-create-content h2 { max-width: 16ch; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.035em; line-height: 1.12; }
.dashboard-create-content > div { max-width: calc(100% - 200px); }
.dashboard-create-content p { max-width: 400px; margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.dashboard-card-actions { margin-top: 22px; gap: 8px; }
.dashboard-wave { display: flex; right: 24px; bottom: 24px; width: 160px; height: 60px; opacity: 1; transform: none; gap: 4px; align-items: center; justify-content: flex-end; }
.dashboard-wave span { width: 4px; border-radius: 999px; background: var(--line-strong); animation-duration: 3.2s; }
.decor-wave { display: none; }
.dashboard-side-card, .dashboard-recent-card { padding: 20px 22px; }
.dashboard-action-row { padding: 12px 0; gap: 12px; transition: color var(--t) var(--ease); }
.dashboard-action-row:first-of-type { margin-top: 12px; }
.dashboard-action-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: 12px; transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
.dashboard-action-row:hover { color: var(--text); }
.dashboard-action-row:hover .dashboard-action-icon { background: var(--surface-3); transform: translateX(1px); }
.dashboard-action-row strong { font-size: 14px; font-weight: 500; }
.dashboard-action-row small { font-size: 12px; }
.dashboard-action-row b { transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.dashboard-action-row:hover b { transform: translateX(2px); }
.admin-action .dashboard-action-icon { background: var(--ink); color: var(--ink-text); }
.dashboard-recent-card { margin-top: 12px; }
.dashboard-card-heading-row { margin-bottom: 14px; }
.dashboard-card-heading-row > a { color: var(--muted); font-size: 13px; font-weight: 500; }
.dashboard-card-heading-row > a:hover { color: var(--text); }
.dashboard-recent-list { gap: 6px; }
.dashboard-model-row { padding: 10px 12px; border-radius: 10px; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.dashboard-model-row:hover { background: var(--surface-2); border-color: var(--line-strong); }
.dashboard-model-avatar { width: 36px; height: 36px; background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
.dashboard-model-copy strong { font-weight: 500; }
.dashboard-empty-state { min-height: 72px; padding: 16px 18px; }
.dashboard-empty-icon { background: var(--surface-2); color: var(--text); border-radius: 9px; }
.dashboard-empty-state > a { color: var(--text); }
.dashboard-footer { margin-top: 24px; padding-top: 18px; font-size: 13px; }
.featured-card { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.featured-card::after { display: none; }
.featured-card .kicker, .featured-card p { color: var(--muted); }
.card-icon, .member-card .card-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); color: var(--text); font-size: 16px; }
.member-card h2 { margin-top: 14px; font-size: 16px; letter-spacing: -.02em; }
.member-card a { color: var(--text); }
.workspace-bottom { border-radius: var(--radius-l); }

/* ==========================================================================
   MY MODELS — model dashboard
   ========================================================================== */
body[data-page="my-models"] .page-hero { padding-bottom: 20px; }
body[data-page="my-models"] .my-layout, .my-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px) !important; gap: 16px; align-items: start; }
.my-library { padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.my-library .library-tabs { display: none !important; }
.my-library .library-section[hidden] { display: block !important; }
.my-library #favoritesLibraryPanel[hidden] { display: flex !important; }
.my-library #ownedLibraryPanel { order: 1; }
.my-library #favoritesLibraryPanel { order: 2; }
.my-library #publicLibraryPanel { order: 3; }
.my-library .library-section, .my-library #favoritesLibraryPanel { margin: 0 !important; padding: 18px 18px 16px !important; border: 1px solid var(--line) !important; border-radius: var(--radius-l); background: var(--surface); }
.my-library #favoritesLibraryPanel::before { content: "Favorites"; display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.my-library #favoritesLibraryPanel::after { content: "Starred models from your library and the public database."; display: block; order: -1; margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.my-library #favoritesLibraryPanel { display: flex !important; flex-direction: column; }
.my-library #favoritesLibraryPanel::before { order: -2; }
.my-library #favoritesLibraryPanel .owned-list { margin-top: 0; }
.my-library .kicker { display: inline-block !important; margin-bottom: 2px; }
.my-library .library-section-head { margin-bottom: 4px; align-items: flex-start; }
.my-library .library-section-head h3 { font-size: 16px; margin: 0; }
.my-library .library-section-copy { margin: 2px 0 0; font-size: 13px; }
.my-library .library-count { align-self: flex-start; }
.my-library .public-search, .my-library #ownedSearch { margin-top: 12px; min-height: 38px; font-size: 13px; padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9199' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px 50%; background-size: 15px; }
.my-library .public-search-row { margin-top: 0; }
.my-library .owned-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 88px; gap: 10px; margin-top: 12px; height: auto; max-height: 300px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.my-library .owned-list::-webkit-scrollbar { display: block; width: 6px; }
.my-library .owned-card { padding: 12px 12px 10px; border-radius: 10px; background: var(--surface); border-color: var(--line); transition: background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.my-library .owned-card:hover { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.my-library .owned-card.active, .my-library .public-model-list .owned-card.active { background: var(--surface-2); border-color: var(--text); box-shadow: 0 0 0 1px var(--text); transform: none; }
.my-library .owned-card strong { font-size: 13.5px; font-weight: 500; }
.my-library .owned-badge { color: var(--faint); font-size: 11.5px; font-weight: 450; }
.my-library .owned-card.plus-pinned, .voice-entry.plus-pinned { background: var(--surface-2); border-color: var(--line-strong); }
.my-library .plus-pinned .owned-badge { color: var(--text); }
.my-library .owned-card.plus-pinned.active { box-shadow: 0 0 0 1px var(--text); }
.my-library .favorite-model-row > .model-star { font-size: 16px; right: 4px; top: 4px; color: var(--faint); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.my-library .model-star:hover { transform: scale(1.15); color: var(--text); }
.my-library .model-star[aria-pressed="true"] { color: var(--text); }
.my-library .owned-empty { padding: 22px 14px; font-size: 13px; }
.my-workspace { position: sticky !important; top: 20px; padding: 20px !important; }
.my-workspace .voice-modes { margin-bottom: 16px; }
.my-workspace .workspace-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 260px; padding: 40px 20px; font-size: 13.5px; }
.my-workspace .workspace-placeholder::before { content: ""; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 12px; background: var(--surface-2); -webkit-mask: none; mask: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23485259' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 12v2M8 8v8M12 5v14M16 9v6M20 11v2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px; }
.my-workspace .workspace-placeholder b { font-size: 16px; letter-spacing: -.02em; margin-bottom: 4px; }
.my-workspace .owned-top { flex-direction: column; align-items: stretch; gap: 12px; }
.my-workspace .owned-selected { gap: 12px; }
.my-workspace .generation-credit-box { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.my-workspace .generation-credit-box small { margin-top: 0; text-align: right; }
.my-workspace .generation-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.my-workspace .generation-settings { margin-top: 0; padding: 14px 14px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.my-workspace .generation-settings label { grid-column: auto; }
.my-workspace .generation-settings input[type=range] { margin: 12px 0 8px; }
.my-workspace .generation-settings .setting-ends { margin-bottom: 8px; }
.my-workspace .generation-settings button { grid-column: 1 / -1; margin: 6px auto 0; }
.my-workspace .owned-field textarea { min-height: 130px; }
.my-workspace .owned-field { margin-top: 0; }
.my-workspace .owned-key-button { align-self: flex-start; }
.my-layout #pinPublicModel:not([hidden]) { display: inline-flex !important; }
.owned-avatar { width: 40px; height: 40px; background: var(--ink); color: var(--ink-text); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
.owned-selected strong { font-size: 16px; letter-spacing: -.02em; }
.generation-credit-box { border-radius: 8px; background: var(--surface-2); border-color: transparent; }
.generation-credit-box strong { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; }
.generation-credit-box.admin { background: var(--surface-2); }
.generation-credit-box.admin strong, .generation-credit-box.admin small { color: var(--text); }
.owned-field textarea { min-height: 160px; border-radius: 10px !important; background: var(--surface); }
.generation-settings { border-radius: var(--radius); background: var(--surface-2); border-color: transparent; }
.generation-settings output { background: var(--surface); font-family: var(--font-body); }
.owned-tools { gap: 6px; }
.owned-result { margin-top: 18px; padding-top: 18px; }
.speech-player { border-radius: 10px; background: var(--surface-2); border-color: transparent; padding: 12px 14px; }
.speech-play, .generation-history .speech-play { border-radius: 50% !important; width: 38px; height: 38px; flex-basis: 38px; }
.speech-wave rect.played { fill: var(--text); }
.library-count { border-radius: 6px; }
.emotion-menu { border-radius: 10px; box-shadow: var(--shadow-2); }
.emotion-menu [role=option] { color: var(--text); font-weight: 500; border-radius: 6px; }
.emotion-menu [aria-selected=true], .emotion-menu [role=option]:hover { background: var(--surface-2); color: var(--text); }
.emotion-tag { color: var(--signal-text); -webkit-text-fill-color: var(--signal-text); background: var(--signal-soft); box-shadow: 0 0 0 1px var(--signal-soft); font-weight: inherit; }
.delivery-tools { gap: 6px; }
.delivery-tools button { min-height: 32px; font-size: 12.5px; }

/* Multi-speaker studio */
#multiSpeaker .speaker { border-radius: 10px; background: var(--surface-2); border-color: transparent; }
#multiSpeaker .turn { border-radius: 10px; background: var(--surface); border-left-width: 3px; }
#multiSpeaker .choose-voice { border-radius: 8px !important; }
#multiSpeaker .choose-voice span { color: var(--text); }
#multiSpeaker .turn-settings { border-radius: 8px; background: var(--surface-2); border-color: transparent; }
#multiSpeaker .turn-settings output { background: var(--surface); font-family: var(--font-body); }
#multiSpeaker .add-turn { border-radius: 8px !important; }
#multiSpeaker .dialogue { margin-top: 20px; padding-top: 18px; }
.picker-voice { border-radius: 10px; background: var(--surface); transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.picker-voice:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); background: var(--surface); }
.picker-avatar { background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-weight: 600; }
.voice-picker .picker-voice.is-pinned { background: var(--surface-2); border-color: var(--line-strong); }
.picker-voice.is-pinned .picker-avatar { background: var(--ink); color: var(--ink-text); }
.picker-voice.is-pinned small, .picker-selected { color: var(--text); }
.picker-heading h2 { font-size: 20px; }

/* Generation history */
.my-layout > .generation-history, .generation-history { grid-column: 1 / -1; margin-top: 4px; padding: 20px 22px; }
.history-filters { margin: 14px 0 12px; }
.history-card { border-radius: 10px; background: var(--surface); padding: 18px; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.history-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.history-card time, .history-settings, .history-page { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-weight: 450; font-size: 12px; }
.history-prompt { margin: 12px 0 10px; font-size: 14px; }
.generation-history .history-regenerate { background: var(--surface-2); color: var(--text); border-color: transparent; }
.generation-history .history-star[aria-pressed=true] { color: var(--text); }
.generation-history button { min-height: 34px; font-size: 13px; }

/* ==========================================================================
   CREATE MODEL
   ========================================================================== */
body[data-page="create-model"] .creator-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 16px; }
.creator-main { padding: 24px; }
.creator-section { margin: 0 0 22px; padding: 0 0 22px; }
.creator-title { margin-bottom: 12px; }
.creator-title strong { font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.creator-account-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 14px 16px !important; background: var(--surface-2) !important; border: 0 !important; border-radius: 10px !important; }
.creator-account-card strong { margin: 0; flex: 0 0 auto; font-size: 13.5px; }
.creator-account-card #creatorAccountStatus { flex: 1 1 200px; margin: 0; font-size: 13px; }
.creator-inline-links { width: auto; margin: 0; margin-left: auto; gap: 6px; }
.creator-inline-links a { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.creation-methods { gap: 10px; }
.creation-methods button, .creation-methods button[aria-pressed="true"] { padding: 16px 16px 16px 56px; border-radius: 10px !important; position: relative; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.creation-methods button::before { content: ""; position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); }
.creation-methods button::after { content: ""; position: absolute; left: 22px; top: 22px; width: 16px; height: 16px; background: var(--text); -webkit-mask: var(--method-icon) center / contain no-repeat; mask: var(--method-icon) center / contain no-repeat; }
.creation-methods button[data-method="clone"] { --method-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.creation-methods button[data-method="design"] { --method-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7L18.5 9.5l-4.7 1.8L12 16l-1.8-4.7L5.5 9.5l4.7-1.8zM19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/%3E%3C/svg%3E"); }
.creation-methods button[aria-pressed="true"] { border-color: var(--text) !important; background: var(--surface) !important; box-shadow: 0 0 0 1px var(--text); }
.creation-methods button[aria-pressed="true"]::before { background: var(--ink); }
.creation-methods button[aria-pressed="true"]::after { background: var(--ink-text); }
.creation-methods button strong { font-size: 14px; }
.creation-methods button span, .creation-methods button[aria-pressed="true"] span { color: var(--muted) !important; font-size: 12.5px; }
.visibility-grid { gap: 10px; }
.visibility-card { padding: 16px; border-radius: 10px; background: var(--surface); transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.visibility-card.active { border-color: var(--text); background: var(--surface); box-shadow: 0 0 0 1px var(--text); }
.visibility-card.active p { color: var(--muted); }
.visibility-icon { width: 30px; height: 30px; margin-bottom: 12px; border-radius: 8px; font-size: 0; position: relative; background: var(--surface-2); border: 0; }
.visibility-icon::after { content: ""; position: absolute; inset: 7px; background: var(--text); -webkit-mask: var(--vis-icon) center / contain no-repeat; mask: var(--vis-icon) center / contain no-repeat; }
.visibility-card[data-visibility="private"] .visibility-icon { --vis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.visibility-card[data-visibility="public"] .visibility-icon { --vis-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.visibility-card.active .visibility-icon { background: var(--ink); border-color: transparent; }
.visibility-card.active .visibility-icon::after { background: var(--ink-text); }
.visibility-card strong { font-size: 14px; }
.visibility-card p { font-size: 12.5px; }
.audio-actions { gap: 10px; }
.audio-action { border-radius: 10px !important; min-height: 118px; gap: 6px; background: var(--surface-2); border: 1px dashed var(--line-strong); color: var(--text); transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.audio-action:hover { border-color: var(--text); background: var(--surface-2); color: var(--text); transform: translateY(-1px); }
.audio-action .icon { width: 34px; height: 34px; margin-bottom: 2px; border-radius: 999px; background: var(--surface); color: var(--text); font-size: 14px; border: 1px solid var(--line); }
.audio-action:hover .icon { background: var(--ink); color: var(--ink-text); border-color: transparent; }
.audio-action .record-clock { font-size: 11.5px; color: var(--muted); }
.audio-action.recording { background: var(--danger-soft); border-style: solid; border-color: var(--danger); color: var(--danger); }
.audio-action.recording .icon { background: var(--danger); color: #fff; }
.clip-row { border-radius: 8px; }
.clip-number { font-family: var(--font-body); }
.creator-consent { border-radius: 10px; background: var(--surface-2); border: 0; padding: 14px 16px; }
.creator-result { border-radius: 10px; background: var(--surface-2); border: 0; }
.creator-result > strong { font-size: 16px; }
.creator-side { position: sticky; top: 20px; padding: 20px !important; background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line) !important; }
.creator-side::after { display: none; }
.creator-side .kicker { color: var(--muted) !important; }
.creator-step { border-top: 1px solid var(--line); padding: 14px 0; gap: 12px; }
.creator-step-num { width: 24px; height: 24px; background: var(--surface-2) !important; color: var(--text) !important; font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.creator-step strong { font-weight: 500; font-size: 13.5px; }
.creator-step p { color: var(--muted) !important; font-size: 12.5px; }
.creator-prompt { border: 0 !important; background: var(--surface-2) !important; color: var(--muted) !important; border-radius: 10px !important; font-size: 12.5px; }
.creator-prompt b, .creator-side .creator-prompt b { color: var(--text) !important; }
.voice-tags fieldset { margin: 14px 0; }
.voice-tags button, .design-examples button { min-height: 32px; font-size: 12.5px; }
.tag-help { font-size: 12.5px; }
.creation-preview > strong { font-size: 14px; }

/* ==========================================================================
   CHAT
   ========================================================================== */
.chat-shell { margin-top: 28px; }
html[data-private-page][data-authenticated] .chat-shell { display: flex; flex-direction: column; min-height: calc(100vh - 32px); margin: 0 auto; padding: 32px 0 24px; }
.chat-hero, html[data-theme="dark"] .chat-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 20px; border: 0; border-radius: 0; background: transparent; color: var(--text); margin-bottom: 0; }
.chat-hero::after { display: none; }
.chat-hero p { font-size: 14px; color: var(--muted); }
.chat-identity { min-width: 0; padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.chat-identity::before { content: ""; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.chat-identity small { color: var(--muted); font-size: 11.5px; }
.chat-identity strong { margin: 0; font-size: 13.5px; }
html[data-private-page][data-authenticated] .chat-card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 14px 18px; }
.chat-head strong { font-size: 14px; }
html[data-private-page][data-authenticated] .messages { flex: 1; height: auto; min-height: 360px; }
.messages { background: var(--surface); padding: 16px 18px; }
.message-row { margin-bottom: 12px; }
.message-avatar { font-family: var(--font-body); font-weight: 600; font-size: 13px; transition: transform var(--t) var(--ease); }
.message-avatar:hover { transform: scale(1.05); }
.message-row.owner .message-avatar { background: var(--surface-3); color: var(--text); }
.message-name { font-weight: 500; }
.bubble { border-radius: 4px 12px 12px 12px; padding: 10px 13px; }
.message-row.owner .bubble { background: var(--surface-2); border-color: var(--line-strong); }
.message-row.admin .bubble { background: var(--surface); border-color: var(--line-strong); }
.message-row.plus .bubble { background: var(--surface-2); border-color: var(--line); }
.composer { padding: 12px 16px 14px; }
.composer-row { align-items: center; }
.chat-shell .composer .send-button { min-width: 0; min-height: 40px !important; padding: 0 16px; font-size: 13px !important; }
.profile-avatar { background: var(--surface-2); color: var(--text); font-family: var(--font-body); }
.profile-copy h2 { font-size: 20px; }
.profile-stats .profile-stat { border-radius: 8px; }
.profile-stat strong { font-size: 17px; }

/* ==========================================================================
   ACCOUNT (profile)
   ========================================================================== */
.profile-shell { max-width: 920px; }
.profile-heading { margin-bottom: 18px; align-items: center; }
.profile-shell .member-card { padding: 22px; }
.profile-shell .profile-overview { gap: 20px; }
.profile-avatar-preview { width: 72px !important; height: 72px !important; font-size: 26px !important; background: var(--surface-2) !important; color: var(--text) !important; font-family: var(--font-body) !important; font-weight: 600 !important; }
.profile-name-row #profileUsername { font-size: 20px; letter-spacing: -.03em; }
.profile-shell #credentialStatus { font-size: 13px; margin-top: 4px; }
.profile-avatar-actions { margin-top: 12px; gap: 6px; }
.profile-avatar-actions button { min-height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 6px !important; }
.profile-photo-hint { font-size: 12px; }
.profile-plus-focus { margin-top: 12px; }
.profile-plus-focus .profile-membership h2 { font-size: 18px; margin-top: 6px; }
.profile-plus-focus .profile-membership p { margin-bottom: 18px; font-size: 13.5px; }
.profile-membership ul { gap: 10px; font-size: 13.5px; }
.profile-membership li:before, .plus-benefits li:before { background: var(--surface-2); color: var(--text); }
.profile-plus-focus .profile-membership-actions { max-width: 260px; gap: 8px; }
.profile-shell .profile-membership-actions a, .profile-membership-actions button { min-height: 38px; font-size: 13px; }
.membership-comparison { border-radius: 10px; margin-bottom: 18px; }
.membership-comparison th:last-child, .membership-comparison td:last-child, .membership-comparison thead th:last-child { background: var(--surface-2); color: var(--text); }
.membership-comparison thead th { font-family: var(--font-body); letter-spacing: 0; text-transform: none; font-size: 12px; }
.profile-quiet-settings { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); overflow: hidden; }
.profile-quiet-settings details { border-bottom: 1px solid var(--line); }
.profile-quiet-settings details:last-child { border-bottom: 0; }
.profile-quiet-settings summary { padding: 15px 18px; font-size: 14px; font-weight: 500; transition: background var(--t) var(--ease); }
.profile-quiet-settings summary:hover { background: var(--surface-2); }
.profile-quiet-settings details[open] summary { background: var(--surface-2); }
.profile-quiet-settings summary:after { width: 24px; height: 24px; border-radius: 6px; font-family: var(--font-body); font-size: 15px; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.profile-quiet-settings details[open] summary:after { background: var(--ink); border-color: var(--ink); color: var(--ink-text); }
.profile-settings-content { max-width: 480px; padding: 18px 18px 22px; }
.profile-settings-content > p { font-size: 13px; }
.profile-security .field-label { margin: 14px 0 6px; }
.profile-security .create-model-button { min-height: 38px; margin-top: 16px; font-size: 13px !important; }
#recoveryEmailBadge { margin-right: 6px; }
.invite-stats { gap: 8px; }
.invite-stats span { border-radius: 8px; background: var(--surface-2); border: 0; }
.invite-stats strong { font-family: var(--font-body); font-size: 18px; }
.invite-code strong { border-radius: 6px; font-family: var(--font-body); letter-spacing: .08em; }
.invite-warning { border-radius: 8px; }
.profile-shell .profile-footer { margin-top: 18px; padding-top: 0; }
.profile-shell .profile-footer button { min-height: 34px; font-size: 13px; }

/* ==========================================================================
   BILLING
   ========================================================================== */
.billing-shell { max-width: 1040px; }
.billing-heading { margin-bottom: 18px; align-items: center; }
.billing-balance { padding: 12px 16px; border-radius: var(--radius); gap: 4px; }
.billing-balance strong { font-size: 22px; }
.billing-grid { gap: 12px; }
.billing-grid .purchase-panel, .membership-plans .purchase-panel { padding: 22px 24px; }
.purchase-panel h2 { margin: 4px 0 4px; font-size: 18px; letter-spacing: -.03em; }
.purchase-panel .billing-muted { font-size: 13.5px; margin-bottom: 16px; }
.pack-choices { gap: 10px; margin: 12px 0 18px; }
.pack-choice { border-radius: 10px; padding: 18px 12px 16px; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.pack-choice:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.pack-choice:has(input:checked) { border-color: var(--text); background: var(--surface); box-shadow: 0 0 0 1px var(--text); transform: none; }
.pack-choice strong { font-size: 24px; }
.pack-choice:has(input:checked) span { color: var(--text); }
.membership-plans { gap: 12px; margin-top: 12px; }
.plus-title .billing-muted { font-size: 12.5px; }
.plan-price, .membership-plans .plan-price, .premium-panel .plan-price { margin: 16px 0 14px; font-size: 34px; letter-spacing: -.05em; }
.plus-benefits { gap: 8px; font-size: 13px; }
.plus-benefits li { padding-left: 28px; }
.billing-actions { gap: 8px; }
.billing-note, .member-card p.billing-note { font-size: 12px; }
.billing-details { font-size: 12.5px; }
.launch-sale { border-radius: 10px; background: var(--surface-2); color: var(--text); border-color: transparent; font-size: 13.5px; }
.launch-sale::before { background: var(--signal); box-shadow: none; }
.credit-activity { padding: 20px 22px; margin-top: 12px; }
.credit-activity > p { margin-bottom: 4px; }
.activity-row { padding: 12px 0; font-size: 13.5px; }
.activity-row strong { font-family: var(--font-body); color: var(--text); }
.crypto-launch, .billing-shell .member-card button.crypto-launch { min-height: 38px; font-size: 13px; }
.crypto-orders button { border-radius: 8px; }
.crypto-value { border-radius: 10px; }
.crypto-status { border-radius: 8px; background: var(--surface-2); color: var(--text); }

/* ==========================================================================
   ANNOUNCEMENTS
   ========================================================================== */
.announcement-main { max-width: 820px; margin-top: 32px; }
.announcement-main article, .announcement-main form { margin: 12px 0; padding: 22px 24px; }
.announcement-main article { transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.announcement-main article:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.announcement-main article:first-of-type, #announcementList { margin-top: 20px; }
.announcement-main .ann-pinned { border-color: var(--text); }
.announcement-main article h2 { font-size: 17px; margin: 4px 0 4px; }
.ann-category { color: var(--text); }
.ann-meta { margin: 10px 0 16px; padding-bottom: 14px; font-size: 12.5px; }
.announcement-main article p, .announcement-main .ann-body p, .announcement-main .ann-body li { font-size: 14px; line-height: 1.65; }
.ann-body h3 { font-size: 16px; }
.announcement-main form { background: var(--surface); }
.announcement-main label { margin: 14px 0; }
.announcement-main textarea { min-height: 180px; }
.announcement-main button { min-height: 38px; font-size: 13px; }
.ann-toolbar { gap: 4px; }
.ann-toolbar button, .announcement-main .ann-toolbar button, .announcement-main .ann-controls button, #annCancel { min-height: 30px !important; padding: 0 10px !important; font-size: 12.5px !important; }
.announcement-symbol { border-radius: 8px; background: var(--surface-2); color: var(--text); }
.announcement-popup h2 { font-size: 22px; }

/* ==========================================================================
   ADMIN / OWNER
   ========================================================================== */
.admin-hero, html[data-theme="dark"] .admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 22px; border: 0; border-radius: 0; background: transparent; color: var(--text); }
.admin-hero::after { display: none; }
.admin-identity { min-width: 0; padding: 8px 12px 8px 8px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.admin-identity::before { content: ""; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.admin-identity span { color: var(--muted); font-size: 11.5px; }
.admin-identity strong { margin: 0; font-size: 13.5px; }
.admin-stats { gap: 12px; margin-top: 0; }
.admin-stat { padding: 16px 18px; }
.admin-stat span { font-size: 12.5px; }
.admin-stat strong { margin-top: 6px; font-size: 24px; letter-spacing: -.035em; }
.admin-stat small { margin-top: 4px; font-size: 12px; }
.owner-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 14px 18px; }
.owner-control-copy strong { display: block; font-size: 14px; font-weight: 500; }
.owner-control-copy small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.owner-control-status { display: flex; align-items: center; gap: 10px; }
.admin-tabs { margin: 18px 0 12px; }
.panel-head { padding: 16px 20px; align-items: center; }
.panel-head p { margin-top: 2px; font-size: 12.5px; }
.accounts-tools .search { min-height: 36px; font-size: 13px; }
.review-row, .account-main { padding: 12px 20px; gap: 14px; transition: background var(--t) var(--ease); }
.review-icon, .account-avatar { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); color: var(--text); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.account-avatar { border-radius: 999px; }
.review-copy strong, .account-name strong { font-weight: 500; }
.account-meta strong { font-family: var(--font-body); font-size: 14px; }
.review-actions, .account-actions { gap: 6px; }
.account-actions .btn, .model-toggle { min-height: 30px; padding: 0 10px; font-size: 12.5px; }
.audit-row { padding: 12px 20px; }
html[data-theme="dark"] .audit-row { background: transparent !important; }
.audit-copy strong { font-size: 13px; }
.models-inner { border-radius: 8px; background: var(--surface-2); border: 0; }
.mini-model strong { font-weight: 500; }
.model-toggle { background: var(--surface); border: 1px solid var(--line-strong); }
.admin-message { font-size: 13px; }
.admin-footer { margin-top: 20px; padding-top: 18px; font-size: 12.5px; }
.modal { padding: 24px; }
.modal h3 { font-size: 18px; letter-spacing: -.025em; }
.modal p { font-size: 13.5px; }
.modal input, .modal select { min-height: 40px; }
.modal-actions { margin-top: 18px; }
.empty { margin: 14px; padding: 30px 20px; font-size: 13px; }

/* Dark mode: theme.css pins a few staff/dashboard surfaces to legacy hex values (kept for its
   test contract); re-align them to the neutral tokens with a more specific selector. */
html[data-theme="dark"] body[data-page="dashboard"] .dashboard-stat.dashboard-stat,
html[data-theme="dark"] body[data-page="dashboard"] .dashboard-model-row.dashboard-model-row,
html[data-theme="dark"] .audit-row.audit-row, html[data-theme="dark"] .modal.modal { background: var(--surface) !important; border-color: var(--line) !important; }
html[data-theme="dark"] body[data-page="dashboard"] .dashboard-model-row.dashboard-model-row:hover, html[data-theme="dark"] .audit-row.audit-row:hover { background: var(--surface-2) !important; }
html[data-theme="dark"] .admin-tabs.admin-tabs { background: var(--surface-2) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .admin-tabs.admin-tabs button.active { background: var(--surface) !important; border-color: var(--line) !important; }

/* ==========================================================================
   Online users panel + upgrade dialogs
   ========================================================================== */
body .voiceiq-online-toggle { top: auto; bottom: 18px; border-radius: 8px; font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 500; min-height: 34px; padding: 0 12px 0 10px; box-shadow: var(--shadow-2); transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
body .voiceiq-online-toggle:hover { transform: translateY(-1px); }
body .voiceiq-online-toggle::before { box-shadow: 0 0 0 3px var(--signal-soft); }
body .voiceiq-online-panel { top: auto; bottom: 62px; border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
@media (min-width: 1450px) { body .voiceiq-online-panel { transform: none; opacity: 1; pointer-events: auto; } body .voiceiq-online-toggle { display: none; } }
body .voiceiq-online-head strong, body .voiceiq-online-head span, body .voiceiq-online-role, body .voiceiq-online-tag, body .voiceiq-online-avatar { font-family: var(--font-body); letter-spacing: 0; text-transform: none; }
body .voiceiq-online-head strong { font-size: 13px; font-weight: 500; color: var(--text); }
body .voiceiq-online-head span { border-radius: 6px; }
body .voiceiq-online-user { border-radius: 8px; }
body .voiceiq-online-user.owner .voiceiq-online-avatar { background: var(--surface-3); color: var(--text); }
body .voiceiq-online-role { border-radius: 5px; font-size: 10px; }
body .voiceiq-online-role.owner { background: var(--surface-3); color: var(--text); }
body .voiceiq-online-tag { border-radius: 5px; }
.plus-upgrade h2 { font-size: 26px; }
.upgrade-plans section { border-radius: 10px; }
.upgrade-plans .upgrade-premium { border-color: var(--line-strong); }
.upgrade-premium .upgrade-label { background: var(--ink); color: var(--ink-text); border-radius: 5px; padding: 2px 6px; }
.upgrade-plans li:before, .upgrade-premium li:before { color: var(--text); }
.upgrade-benefits span { color: var(--text); }
.new-login-name { border-radius: 8px; font-family: var(--font-body); font-weight: 600; }
.delete-dialog-icon { border-radius: 10px; }
.model-delete-dialog h2 { font-size: 20px; }
.delete-dialog-actions .delete-dialog-confirm { background: var(--danger) !important; border-color: var(--danger) !important; color: #fff !important; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .unified-header .nav { width: max-content; max-width: calc(100% - 32px); height: auto; min-height: 48px; padding: 4px 6px 4px 12px; flex-wrap: nowrap; }
  .unified-header .nav-links { order: 0; flex-basis: auto; width: auto; padding: 0; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .unified-header .voiceiq-theme-toggle { order: 3; }
  .my-layout, body[data-page="my-models"] .my-layout { grid-template-columns: 1fr !important; }
  .my-workspace { position: static !important; }
  .my-library .owned-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-hero, .admin-hero { align-items: flex-start; flex-direction: column; }
  .chat-identity, .admin-identity { width: auto; }
}
@media (max-width: 900px) {
  .dashboard-hero { align-items: flex-start; flex-direction: column; gap: 14px; }
  .dashboard-hero-actions { width: auto; }
}
@media (max-width: 900px) {
  .hero, .page-hero { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding-top: 56px; min-width: 0; }
  .hero h1, .hero-copy, .hero-actions, .page-hero h1, .page-hero p, .page-hero .hero-actions, .hero .voice-card { grid-column: 1; grid-row: auto; min-width: 0; }
  .hero h1, .page-hero h1 { max-width: none; overflow-wrap: anywhere; }
  .hero-copy { margin: 0; }
  .hero-actions { margin-top: 0; }
  .hero .voice-card { margin-top: 24px; }
  .voice-card, .sample-card, .sample-wave-wrap { min-width: 0; max-width: 100%; }
  .info-icon, .feature-icon { height: 120px; }
  .cta-panel, html[data-private-page] .cta-panel { grid-template-columns: 1fr; padding: 48px 28px; }
  .dark-panel { padding: 32px; }
  body[data-page="create-model"] .creator-layout { grid-template-columns: 1fr; }
  .creator-side { position: static; }
  .dashboard-wave { display: none; }
  .owner-control { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 780px) {
  .site-header .nav { width: calc(100% - 32px); max-width: none; }
  .site-header .nav-links { left: 0; right: 0; top: 52px; padding: 6px; border-radius: 12px; box-shadow: var(--shadow-2); }
  .site-header .nav-links a { padding: 10px 12px; font-size: 14px; border-radius: 8px; }
  .site-header .nav-links a.nav-cta { margin: 6px 0 0; }
  .menu-toggle { margin-left: auto; }
}
@media (max-width: 640px) {
  .unified-header .nav { width: calc(100% - 24px); padding-left: 10px; }
  .hero { padding-top: 40px; }
  .hero h1, .page-hero h1, .auth-intro h1 { font-size: clamp(32px, 9vw, 42px); }
  .voice-card { padding: 14px; }
  .section { padding: 56px 0; }
  .section.compact { padding-bottom: 56px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cta-panel, html[data-private-page] .cta-panel { padding: 40px 22px; margin-bottom: 56px; }
  .site-legal-footer { width: calc(100% - 32px); }
  .site-legal-footer nav { flex-wrap: wrap; gap: 12px 18px; }
  .site-legal-footer nav::before { flex-basis: 100%; }
  .my-library .owned-list { grid-template-columns: 1fr 1fr; }
  .my-workspace .generation-settings { grid-template-columns: 1fr; }
  .creator-account-card { align-items: flex-start; flex-direction: column; }
  .creator-inline-links { margin-left: 0; }
  .creation-methods { grid-template-columns: 1fr; }
  .dashboard-hero { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, main, .dashboard-wave span { animation: none !important; transition: none !important; }
  * { transition-duration: 0s !important; }
}