:root {
  --ink: #ffffff;
  --muted: #94a3b8;
  --line: #253047;
  --surface: #101827;
  --canvas: #070b14;
  --primary: #6c5ce7;
  --primary-dark: #5748ca;
  --primary-soft: rgba(108, 92, 231, .16);
  --accent: #00d9ff;
  --highlight: #7cffcb;
  --danger: #ff6b81;
  --warning: #ffc857;
  --radius: 16px;
  --shadow: 0 18px 54px rgba(0, 0, 0, .28);
  --type-page-title: 28px;
  --type-section-title: 16px;
  --type-body: 14px;
  --type-control: 13px;
  --type-support: 12px;
  --type-caption: 11px;
  --type-micro: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
.ui-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; pointer-events: none; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); }
a { color: var(--primary); text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 3vw, 2.55rem); line-height: 1.12; letter-spacing: -.045em; margin-bottom: .5rem; }
h2 { font-size: 1.1rem; letter-spacing: -.02em; margin-bottom: .35rem; }
.muted { color: var(--muted); }
.eyebrow { color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: #183725; font-size: 1.45rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.brand-mark.small { width: 38px; height: 38px; border-radius: 12px; font-size: 1.05rem; flex: 0 0 auto; }

.guest-body { background: #183b2d; }
.guest-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 1.1fr) minmax(420px, .9fr); }
.guest-brand { padding: clamp(2.5rem, 7vw, 7rem); display: flex; flex-direction: column; justify-content: space-between; color: white; background: radial-gradient(circle at 10% 80%, rgba(200,240,100,.2), transparent 30%), #183b2d; }
.guest-brand h1 { margin: 1rem 0 1.4rem; font-size: clamp(2.8rem, 5vw, 5.2rem); max-width: 760px; }
.guest-brand p { max-width: 640px; color: #bfd1c8; font-size: 1.1rem; line-height: 1.8; }
.guest-brand .eyebrow { color: var(--accent); }
.guest-feature-list { display: flex; flex-wrap: wrap; gap: .65rem; }
.guest-feature-list span { border: 1px solid rgba(255,255,255,.2); padding: .65rem .9rem; border-radius: 999px; color: #dbe7e0; font-size: .86rem; }
.guest-card-wrap { background: var(--canvas); display: grid; align-content: center; padding: clamp(2rem, 7vw, 7rem); }
.auth-card { width: min(100%, 470px); margin: auto; }
.auth-card h2 { font-size: 2rem; margin: .7rem 0 .5rem; }
.auth-card .muted { margin-bottom: 2rem; }
.auth-switch { color: var(--muted); text-align: center; margin: 1.5rem 0 0; }

.form-stack, .form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.compact { margin-top: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
label { display: grid; gap: .5rem; color: #3e4b45; font-size: .83rem; font-weight: 750; }
label small { color: var(--muted); font-weight: 500; }
input, textarea, select { width: 100%; color: var(--ink); border: 1px solid #d6dfda; background: #fbfcfb; border-radius: 12px; padding: .84rem .95rem; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; }
textarea { resize: vertical; line-height: 1.7; min-height: 150px; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); background: white; box-shadow: 0 0 0 3px rgba(28,107,79,.11); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 13px; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 800; letter-spacing: .01em; transition: transform .15s, background .15s, border-color .15s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(135deg, #7667ee, var(--primary)); box-shadow: 0 9px 24px rgba(108,92,231,.25); }
.button-primary:hover { background: linear-gradient(135deg, #8375f4, #6252dd); box-shadow: 0 12px 30px rgba(108,92,231,.34); }
.button-secondary { color: #e8edfa; border-color: var(--line); background: rgba(16,24,39,.86); }
.button-secondary:hover { border-color: #465371; background: #182236; }
.button-small { min-height: 30px; padding: 4px 8px; color: #071019; background: var(--highlight); font-size: 11px; }
.button-block { width: 100%; margin-top: .35rem; }
.text-button { display: inline-flex; align-items: center; gap: 5px; padding: .4rem; border: 0; color: var(--accent); background: transparent; font-weight: 750; white-space: nowrap; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 1.4rem 1.15rem; background: #15382b; color: white; display: flex; flex-direction: column; }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; color: white; padding: .2rem .35rem 1.8rem; }
.sidebar-brand strong { font-size: .98rem; }
.nav-list { display: grid; gap: .28rem; }
.nav-list > a { display: flex; align-items: center; gap: .75rem; color: #bed0c8; padding: .72rem .8rem; border-radius: 11px; font-size: .87rem; font-weight: 680; }
.nav-list > a span { width: 20px; text-align: center; color: #8eb2a1; }
.nav-list > a:hover, .nav-list > a.active { color: white; background: rgba(255,255,255,.09); }
.nav-list > a.active span { color: var(--accent); }
.nav-divider { color: #789487; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 1.3rem .8rem .4rem; }
.sidebar-foot { margin-top: auto; display: grid; gap: 1rem; }
.balance-card { display: grid; gap: .2rem; padding: 1rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.balance-card span { color: #a7bbb2; font-size: .72rem; }
.balance-card strong { color: var(--accent); font-size: 1.45rem; }
.user-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.avatar-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #285440; color: var(--accent); font-weight: 850; }
.user-row div { min-width: 0; display: grid; }
.user-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.user-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8da69a; font-size: .65rem; }
.main-content { min-width: 0; padding: clamp(1.4rem, 4vw, 3.5rem); }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin: 0 0 2rem; }
.page-header p { color: var(--muted); margin: 0; }
.hero-header { padding: 1.7rem 2rem; align-items: center; border-radius: var(--radius); background: linear-gradient(120deg, #dff2e9, #edf7d3); border: 1px solid #d7e9d6; }
.header-actions { display: flex; gap: .7rem; }
.back-link { display: inline-block; color: var(--muted); font-size: .8rem; font-weight: 700; margin-bottom: .65rem; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card { min-width: 0; background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .35rem; box-shadow: 0 8px 28px rgba(35,61,50,.035); }
.metric-card.accent { background: #173d2e; border-color: #173d2e; color: white; }
.metric-card > span { color: var(--muted); font-size: .76rem; font-weight: 750; }
.metric-card.accent > span, .metric-card.accent small { color: #b7cbc1; }
.metric-card strong { font-size: 2rem; letter-spacing: -.05em; }
.metric-card.accent strong { color: var(--accent); }
.metric-card small { color: #8b9590; font-size: .68rem; }
.content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1rem; }
.span-2 { min-width: 0; }
.panel { background: white; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: 0 8px 28px rgba(35,61,50,.035); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.panel-heading h2 { margin: 0 0 .2rem; }
.panel-heading p { margin: 0; color: var(--muted); font-size: .76rem; }
.panel-heading > a { font-size: .8rem; font-weight: 750; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th { color: #7c8782; font-size: .67rem; letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: .7rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: .9rem .7rem; border-bottom: 1px solid #edf1ef; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td strong, td small { display: block; }
td small { color: var(--muted); margin-top: .2rem; font-size: .68rem; }
.text-link { font-weight: 750; }
.status { display: inline-flex; padding: 3px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-queued, .status-submitted { color: #ffd979; border-color: rgba(255,200,87,.2); background: rgba(255,200,87,.1); }
.status-processing { color: #78eaff; border-color: rgba(0,217,255,.22); background: rgba(0,217,255,.1); }
.status-completed { color: var(--highlight); border-color: rgba(124,255,203,.2); background: rgba(124,255,203,.1); }
.status-failed { color: #ff9aaa; border-color: rgba(255,107,129,.22); background: rgba(255,107,129,.1); }
.status-neutral { color: #b4bfd0; border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.1); }
.ui-badge { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 3px 7px; border-radius: 7px; color: #bdc7da; background: rgba(148,163,184,.1); font-size: 10px; font-weight: 780; white-space: nowrap; }
.ui-badge-public { color: var(--highlight); background: rgba(124,255,203,.1); }
.ui-badge-code { color: var(--accent); background: rgba(0,217,255,.08); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.transaction-list { display: grid; }
.transaction-row { display: flex; align-items: center; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid #edf1ef; }
.transaction-row:last-child { border-bottom: 0; }
.transaction-row div { display: grid; gap: .25rem; }
.transaction-row strong { font-size: .78rem; }
.transaction-row small { color: var(--muted); font-size: .65rem; }
.positive { color: var(--primary); font-weight: 850; }
.negative { color: var(--danger); font-weight: 850; }

.alert { max-width: 1100px; padding: .85rem 1rem; margin: 0 0 1rem; border: 1px solid; border-radius: 12px; font-size: .82rem; font-weight: 650; }
.alert-error { color: #8f2f3b; border-color: #efc6cc; background: #fcedef; }
.alert-success { color: #155c42; border-color: #bde0d0; background: #e5f5ed; }
.notice { display: flex; gap: .7rem; align-items: center; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px; background: #fff7dc; border: 1px solid #f0dfa3; color: #745914; font-size: .8rem; }
.notice span { color: #8d752d; }

.creation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 1rem; }
.form-panel { padding: clamp(1.3rem, 3vw, 2rem); display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 .7rem; }
.form-panel > .form-grid, .form-panel > .choice-grid { grid-column: 2; width: 100%; }
.section-number { display: grid; place-items: center; align-self: start; width: 34px; height: 34px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); font-size: .72rem; font-weight: 900; }
.section-title { margin-bottom: 1.2rem; }
.section-title p { color: var(--muted); font-size: .76rem; margin: 0; }
.section-divider { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 1.7rem 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: grid; gap: .25rem; border: 1px solid var(--line); border-radius: 13px; padding: .9rem 1rem; background: #fbfcfb; }
.choice span small { color: var(--muted); }
.choice input:checked + span { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(28,107,79,.08); }
.submit-card { position: sticky; top: 1.5rem; background: #183b2d; color: white; border-radius: var(--radius); padding: 1.45rem; box-shadow: var(--shadow); }
.submit-card .eyebrow { color: #aaca9b; }
.submit-card > span:not(.eyebrow) { color: #b7c9c0; font-size: .78rem; }
.quote-number { display: block; color: var(--accent); font-size: 3.2rem; line-height: 1; margin: .9rem 0 .2rem; letter-spacing: -.06em; }
.submit-card dl { margin: 1.5rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.submit-card dl div { display: flex; justify-content: space-between; padding: .72rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .75rem; }
.submit-card dt { color: #aabcb3; }
.submit-card dd { margin: 0; font-weight: 750; }
.submit-card p { color: #91a79c; font-size: .68rem; line-height: 1.6; margin: .9rem 0 0; }

.detail-status { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: white; overflow: hidden; }
.detail-status h2 { margin: .8rem 0 .3rem; font-size: 1.35rem; }
.detail-status p { margin: 0; color: var(--muted); }
.status-orb { width: 92px; height: 92px; border-radius: 50%; background: var(--primary-soft); box-shadow: inset 0 0 0 22px white, 0 0 0 1px var(--line); }
.status-card-processing .status-orb, .status-card-submitted .status-orb { background: #bcdafa; }
.status-card-failed .status-orb { background: #f3bac2; }
.script-preview { padding: 1rem; background: #f7f9f8; border: 1px solid #e7ece9; border-radius: 12px; line-height: 1.85; font-size: .9rem; }
.detail-list { display: grid; margin: 0; }
.detail-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid #edf1ef; font-size: .76rem; }
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; font-weight: 700; text-align: right; }
.inline-error { margin-top: .8rem; padding: .7rem; border-radius: 9px; background: #fcedef; color: var(--danger); font-size: .72rem; }

.search-form { display: flex; gap: .6rem; width: min(100%, 500px); }
.inline-form { display: grid; grid-template-columns: 90px 120px auto; gap: .4rem; min-width: 320px; }
.inline-form input { padding: .45rem .55rem; border-radius: 8px; font-size: .72rem; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.span-all { grid-column: 1 / -1; }
.settings-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.settings-page-header { margin-bottom: 1.25rem; }
.settings-tabs-form { grid-template-columns: minmax(0, 1fr); gap: .85rem; margin-top: .85rem; }
.settings-tab-panel { min-height: 272px; }
.settings-tab-panel[hidden] { display: none !important; }
.settings-tab-panel .form-grid,
.settings-tab-panel .form-stack { max-width: 820px; }
.settings-panel-heading { align-items: flex-start; }
.settings-panel-heading .button { flex: 0 0 auto; }
.settings-panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.settings-actions { padding-top: .8rem; border-top: 1px solid var(--line); }
.toggle { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; }
.toggle input { width: 18px; height: 18px; }
.settings-note { margin-top: 1.2rem; padding: .85rem; border-radius: 10px; color: var(--muted); background: #f5f8f6; font-size: .72rem; line-height: 1.6; }
.settings-note code { color: var(--primary); }
.configured-mark { color: var(--primary); }
.model-settings-panel > .ui-tabs { margin: 14px 0; }
.model-tab-panel[hidden] { display: none !important; }
.model-tab-panel { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.model-configuration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; }
.model-selector-field,
.model-capability-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.model-field-label { min-height: 18px; color: var(--ink); font-size: var(--type-control); font-weight: 620; line-height: 18px; }
.model-selector-field select,
.model-capability-summary { min-height: 48px; }
.model-capability-summary { display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--soft); }
.model-capability-summary strong { font-size: var(--type-control); line-height: 16px; }
.model-capability-summary small { overflow: hidden; color: var(--muted); font-size: var(--type-caption); line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.provider-credential-grid { display: grid; gap: 12px; }
.provider-credential-card[hidden] { display: none !important; }
.provider-credential-card { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.provider-credential-card h3 { margin: 0 0 12px; font-size: .86rem; }
.provider-credential-card .form-grid { align-items: start; }
.provider-credential-card input,
.provider-credential-card select { min-height: 42px; height: 42px; }
.asset-model-options,
.wizard-model-options { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.asset-model-options > header,
.wizard-model-options > header { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.asset-model-options > header div,
.wizard-model-options > header div { display: flex; flex-direction: column; gap: 2px; }
.asset-model-options > header small,
.wizard-model-options > header small,
.asset-model-options > p,
.wizard-model-options-empty { color: var(--muted); font-size: .72rem; line-height: 1.55; }
.asset-model-options > p,
.wizard-model-options-empty { margin: 0; }
.wizard-model-options .toggle,
.asset-model-options .toggle { margin-top: 0; }
.wizard-model-options .form-stack.compact { gap: 10px; }
.wizard-video-options { margin-top: 12px; text-align: left; }
.secret-grid > .secret-field:last-child { grid-column: 1 / -1; }
.synthesis-secret-grid, .synthesis-options-grid { margin-top: 1rem; }
.synthesis-secret-grid > .secret-field:last-child { grid-column: auto; }

.authorization-review-panel { padding: 0; overflow: hidden; }
.authorization-review-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(7,11,20,.2); }
.authorization-review-summary > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.authorization-review-summary > span .ui-icon { color: var(--accent); }
.authorization-review-summary strong { color: var(--ink); font-size: 13px; }
.authorization-review-summary small { color: var(--muted); font-size: 10px; }
.authorization-review-table { min-width: 1120px; }
.authorization-review-table th:first-child { width: 220px; }
.authorization-review-table th:nth-child(2) { width: 150px; }
.authorization-review-table th:nth-child(3) { width: 190px; }
.authorization-review-table th:nth-child(5) { width: 180px; }
.authorization-review-table th:nth-child(6) { width: 190px; }
.authorization-review-table td { vertical-align: middle; }
.authorization-review-person { max-width: 220px; }
.authorization-review-person strong,
.authorization-review-person small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorization-review-cover { position: relative; display: grid; width: 86px; aspect-ratio: 3 / 4; place-items: center; overflow: hidden; padding: 0; border: 0; border-radius: 9px; color: #fff; background: #03060c; box-shadow: none; }
.authorization-review-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.authorization-review-cover-placeholder { display: grid; width: 100%; height: 100%; place-items: center; gap: 4px; color: var(--muted); background: radial-gradient(circle at 35% 20%, rgba(108,92,231,.24), transparent 44%), #0c1320; }
.authorization-review-cover-placeholder small { font-size: 9px; }
.authorization-review-cover-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(2,6,14,.18); opacity: 0; transition: opacity .16s, background .16s; }
.authorization-review-cover-play .ui-icon { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: rgba(2,6,14,.64); backdrop-filter: blur(6px); }
.authorization-review-cover:hover .authorization-review-cover-play,
.authorization-review-cover:focus-visible .authorization-review-cover-play { opacity: 1; background: rgba(2,6,14,.3); }
.authorization-review-code { display: inline-flex; padding: 7px 10px; color: var(--accent); border: 1px solid rgba(0,217,255,.2); border-radius: 7px; background: rgba(0,217,255,.07); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 13px; font-weight: 800; letter-spacing: .14em; white-space: nowrap; }
.authorization-code-missing { display: inline-flex; padding: 5px 8px; color: var(--muted); border: 1px solid var(--line); border-radius: 7px; background: rgba(148,163,184,.06); font-size: 10px; white-space: nowrap; }
.authorization-media-missing { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.authorization-review-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.authorization-review-status-cell { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.authorization-review-reason { display: -webkit-box; max-width: 172px; margin: 0; overflow: hidden; color: #ff9aaa; font-size: 10px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.authorization-review-actions { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.authorization-review-actions form { margin: 0; }
.authorization-review-actions .button { box-shadow: none; }
.authorization-review-processed { display: grid; gap: 2px; color: var(--ink); font-size: 11px; }
.authorization-review-processed strong { font-size: 11px; }
.authorization-review-processed small { margin: 0; color: var(--muted); font-size: 9px; }
.authorization-reject-dialog { width: min(92vw, 520px); }
.authorization-reject-form { display: grid; gap: 14px; padding: 16px 18px 18px; }
.authorization-reject-form textarea { min-height: 120px; }

.blank-home { min-height: 55vh; display: grid; align-content: center; justify-items: center; text-align: center; }
.blank-home h2 { font-size: 1.3rem; }
.blank-home p { color: var(--muted); }

.asset-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.asset-section { margin-top: 1rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 1rem; }
.section-heading h2 { margin-bottom: .2rem; font-size: 1.3rem; }
.section-heading p { margin: 0; color: var(--muted); font-size: .75rem; }
.asset-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.asset-card { overflow: hidden; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(35,61,50,.035); }
.asset-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: #e7eee9; color: var(--primary); font-size: 2rem; }
.asset-preview.video-preview { background: #1c2e27; color: var(--accent); }
.asset-preview img { width: 100%; height: 100%; object-fit: cover; }
.asset-card-body { padding: 1rem; }
.asset-card-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.asset-card-title > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-body p { color: var(--muted); font-size: .7rem; margin: .45rem 0 .65rem; }
.asset-card-body code { display: block; overflow: hidden; color: var(--primary); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-body > small { color: var(--warning); font-size: .67rem; }

.avatar-page-header { align-items: center; }
.avatar-empty-state.ui-empty-minimal { min-height: calc(100dvh - 205px); display: grid; align-content: center; justify-items: center; padding: 0; text-align: center; transform: none; }
.avatar-group-section { display: grid; }
.avatar-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 216px)); align-items: start; justify-content: start; gap: 12px; }
.avatar-group-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 6px 18px rgba(35, 61, 50, .045); clip-path: inset(0 round 14px); transition: transform .18s, box-shadow .18s, border-color .18s; }
.avatar-group-card:hover { transform: translateY(-2px); border-color: #ccd9d2; box-shadow: 0 12px 28px rgba(35, 61, 50, .08); }
.avatar-group-cover { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; overflow: clip; border-radius: inherit; background: linear-gradient(145deg, #e5f2eb, #d8e7df); color: var(--primary); clip-path: inset(0 round 14px); }
.avatar-group-cover.is-video { background: radial-gradient(circle at 25% 20%, #315446, transparent 35%), #172d25; color: var(--accent); }
.avatar-group-cover img, .avatar-group-cover video { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; clip-path: inset(0 round 14px); transition: transform .28s ease; }
.avatar-group-card:hover .avatar-group-cover > img, .avatar-group-card:hover .avatar-group-cover > video { transform: scale(1.025); }
.avatar-video-cover-placeholder { display: grid; width: 100%; height: 100%; place-content: center; justify-items: center; gap: 7px; color: rgba(255,255,255,.76); background: radial-gradient(circle at 50% 36%, rgba(108,92,231,.28), transparent 34%), linear-gradient(145deg, #18243a, #08101d); }
.avatar-video-cover-placeholder .ui-icon { color: rgba(255,255,255,.84); filter: drop-shadow(0 6px 18px rgba(0,0,0,.24)); }
.avatar-video-cover-placeholder small { color: rgba(255,255,255,.58); font-size: 10px; font-weight: 650; letter-spacing: .05em; }
.avatar-group-cover.is-empty { background: #f8f9fb; }
.avatar-group-cover.is-empty::after { position: absolute; inset: 0; content: ''; pointer-events: none; box-shadow: inset 0 -1px 0 rgba(148, 163, 184, .08); }
.avatar-empty-cover-image { display: block; object-position: center; }
.avatar-cover-status { position: absolute; z-index: 5; top: 9px; right: 9px; padding: 4px 8px; font-size: 10px; box-shadow: 0 5px 15px rgba(0,0,0,.15); backdrop-filter: blur(9px); }
.avatar-card-hit-area { position: absolute; z-index: 2; inset: 0; }
.avatar-card-hit-area:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 13px; }
.avatar-card-overlay { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 11px; pointer-events: none; background: linear-gradient(180deg, transparent 82%, rgba(4, 8, 16, .04) 87%, rgba(4, 8, 16, .42) 100%); }
.avatar-group-card.has-review-rejection .avatar-card-overlay { background: linear-gradient(180deg, transparent 70%, rgba(4,8,16,.06) 78%, rgba(4,8,16,.48) 100%); }
.avatar-card-overlay h2, html[data-theme="light"] .avatar-card-overlay h2 { margin: 0; overflow: hidden; color: #fff; background: none; font-size: 13px; line-height: 20px; font-weight: 750; text-overflow: ellipsis; text-shadow: none; -webkit-text-fill-color: #fff; white-space: nowrap; }
.avatar-rejection-reason { display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 4px; padding: 4px 6px; color: #ffe3e8; border: 1px solid rgba(255,154,170,.24); border-radius: 6px; background: rgba(98,20,35,.62); font-size: 9px; line-height: 14px; backdrop-filter: blur(8px); }
.avatar-rejection-reason .ui-icon { flex: 0 0 auto; }
.avatar-rejection-reason span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-card-hover-actions { position: absolute; z-index: 4; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: calc(100% - 22px); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, calc(-50% + 7px)); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.avatar-card-hover-actions form { display: contents; }
.avatar-card-hover-actions .avatar-card-action { flex: 0 0 auto; min-width: 0; min-height: 32px; padding: 5px 11px; border-radius: 999px; font-size: 10px; white-space: nowrap; box-shadow: none; backdrop-filter: blur(10px); }
.avatar-card-hover-actions .avatar-card-action .ui-icon { width: 13px; height: 13px; }
.avatar-card-hover-actions .button-secondary { color: #1e293b; border-color: rgba(255,255,255,.72); background: rgba(255,255,255,.9); }
.avatar-card-hover-actions .button-secondary:hover { background: #fff; }
.avatar-card-hover-actions .avatar-card-primary-action { color: #fff; background: linear-gradient(135deg, #7667ee, #6654e8); }
.avatar-group-card:hover .avatar-card-hover-actions, .avatar-group-card:focus-within .avatar-card-hover-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
.button-authorized { color: var(--highlight); border-color: rgba(124,255,203,.22); background: rgba(124,255,203,.08); }
.button:disabled { cursor: default; opacity: .78; transform: none; }

.asset-dialog { width: min(92vw, 620px); max-height: min(86vh, 820px); padding: 0; overflow: hidden auto; color: var(--ink); border: 0; border-radius: 22px; background: white; box-shadow: 0 28px 90px rgba(17,44,33,.28); }
.asset-dialog::backdrop { background: rgba(14, 33, 26, .58); backdrop-filter: blur(3px); }
.materials-dialog { width: min(94vw, 900px); }
.dialog-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.45rem 1.5rem 1.1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.dialog-header h2 { margin: .18rem 0 .25rem; font-size: 1.35rem; }
.dialog-header p { margin: 0; color: var(--muted); font-size: .75rem; }
.ui-icon-button { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; line-height: 1; transition: color .15s, border-color .15s, background .15s; }
.ui-icon-button:hover { color: var(--ink); border-color: var(--line); }
.ui-icon-button-subtle { color: var(--muted); background: rgba(148,163,184,.1); }
.ui-icon-button-danger { color: var(--danger); background: rgba(255,107,129,.08); }
.create-group-dialog > form { padding: 1.5rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .25rem; }
.materials-empty { margin: 1.3rem 1.5rem 0; padding: 2rem 1rem; text-align: center; border: 1px dashed #c4d1ca; border-radius: 15px; background: #f8faf9; }
.materials-empty p { margin: .4rem 0 0; color: var(--muted); font-size: .75rem; }
.material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; padding: 1.3rem 1.5rem 0; }
.material-card { position: relative; isolation: isolate; min-width: 0; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: 14px; background: white; clip-path: inset(0 round 14px); transition: transform .18s, border-color .18s, box-shadow .18s; }
.material-card:hover { transform: translateY(-2px); border-color: #3c4964; box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.material-preview { position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; overflow: clip; padding: 0; border-radius: inherit; color: var(--accent); background: #1c2e27; clip-path: inset(0 round 14px); }
.material-preview > img, .material-preview > video { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; clip-path: inset(0 round 14px); transition: transform .28s ease; }
.material-card:hover .material-preview > img, .material-card:hover .material-preview > video { transform: scale(1.025); }
.material-video-mark { position: absolute; z-index: 2; top: 9px; left: 9px; display: grid; place-items: center; width: 28px; height: 28px; padding-left: 2px; color: #fff; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(7,11,20,.52); backdrop-filter: blur(8px); }
.avatar-material-preview-trigger { position: absolute; z-index: 2; inset: 0; width: 100%; padding: 0; cursor: pointer; border: 0; border-radius: inherit; background: transparent; }
.avatar-material-preview-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.avatar-material-actions { position: absolute; z-index: 5; top: 8px; right: 8px; display: flex; align-items: center; gap: 5px; }
.avatar-material-actions form { display: contents; }
.avatar-material-feitian-status,
.avatar-material-model-status { position: absolute; z-index: 5; top: 8px; left: 8px; max-width: calc(100% - 92px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 5px 15px rgba(0,0,0,.16); backdrop-filter: blur(9px); }
.avatar-material-model-retry { display: flex; justify-content: flex-end; padding: 8px; }
.avatar-material-actions .ui-icon-button { width: 28px; height: 28px; border-radius: 8px; backdrop-filter: blur(9px); }
.avatar-material-download { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(7,11,20,.56); box-shadow: 0 5px 15px rgba(0,0,0,.16); }
.avatar-material-download:hover { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(7,11,20,.78); }
.avatar-material-retry { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(68,85,255,.72); box-shadow: 0 5px 15px rgba(0,0,0,.16); }
.avatar-material-retry:hover { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(68,85,255,.92); }
.avatar-material-overlay { position: absolute; z-index: 3; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 11px; pointer-events: none; background: linear-gradient(180deg, transparent 51%, rgba(2,6,14,.13) 67%, rgba(2,6,14,.9) 100%); }
.avatar-material-overlay > div { display: grid; min-width: 0; gap: 2px; }
.avatar-material-overlay strong { overflow: hidden; color: #fff; font-size: 12px; line-height: 18px; text-overflow: ellipsis; text-shadow: 0 1px 5px rgba(0,0,0,.7); white-space: nowrap; }
.avatar-material-overlay small { overflow: hidden; color: rgba(255,255,255,.72); font-size: 9px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-material-delete { color: #fff; border-color: rgba(255,255,255,.18); background: rgba(239,71,100,.84); box-shadow: 0 5px 15px rgba(0,0,0,.2); }
.avatar-material-delete:hover { color: #fff; border-color: rgba(255,255,255,.34); background: #ef4764; }
.media-playback-dialog { width: min(92vw, 880px); }
.media-playback-stage { display: grid; min-height: 300px; place-items: center; padding: 14px; background: #02050a; }
.media-playback-stage video { display: block; width: 100%; max-height: min(70vh, 720px); border-radius: 10px; background: #000; object-fit: contain; }
.material-upload-form { margin: 1.3rem 1.5rem 1.5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 15px; background: #f7faf8; }
.material-upload-form input { background: white; }
.upload-hint { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.upload-hint > span { color: var(--muted); font-size: .68rem; }

.voice-tab-panels { margin-top: 14px; }
.voice-library { min-height: 360px; }
.voice-library[hidden] { display: none !important; }
.voice-library.is-empty { min-height: calc(100dvh - 270px); display: grid; place-items: center; }
.voice-library.is-empty .ui-empty-minimal { transform: none; }
.voice-filter-toolbar { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 36px; margin-bottom: 14px; }
.voice-filter-groups { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; }
.voice-filter-dropdown { position: relative; }
.voice-filter-dropdown > summary { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--ink); background: transparent; font-size: 11px; font-weight: 650; list-style: none; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.voice-filter-dropdown > summary::-webkit-details-marker { display: none; }
.voice-filter-dropdown > summary:hover { border-color: var(--line); background: rgba(255,255,255,.035); }
.voice-filter-dropdown[open] > summary, .voice-filter-dropdown.has-value > summary { color: #ddd9ff; border-color: rgba(108,92,231,.22); background: rgba(108,92,231,.12); }
.voice-filter-dropdown > summary .ui-icon { color: var(--muted); transition: transform .15s; }
.voice-filter-dropdown[open] > summary .ui-icon { transform: rotate(180deg); }
.voice-filter-dropdown-menu { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; display: grid; width: max-content; min-width: 188px; max-height: 310px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(13,20,33,.98); box-shadow: 0 16px 42px rgba(0,0,0,.32); }
.voice-filter-dropdown:last-child .voice-filter-dropdown-menu { right: 0; left: auto; }
.voice-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; text-align: left; transition: color .15s, background .15s; }
.voice-filter-option:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.voice-filter-option.is-active { color: var(--ink); background: rgba(108,92,231,.12); }
.voice-filter-option .ui-icon { color: var(--primary); opacity: 0; }
.voice-filter-option.is-active .ui-icon { opacity: 1; }
.voice-filter-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
.voice-filter-search { position: relative; display: block; width: min(280px, 34vw); color: var(--muted); }
.voice-filter-search input { min-height: 34px; padding: 7px 34px 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(16,24,39,.72); font-size: 11px; font-weight: 500; box-shadow: none; }
.voice-filter-search input::placeholder { color: #67738a; }
.voice-filter-search input:focus { border-color: rgba(108,92,231,.55); background: rgba(16,24,39,.9); box-shadow: 0 0 0 3px rgba(108,92,231,.1); }
.voice-filter-search .ui-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.voice-filter-reset { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: rgba(16,24,39,.72); font-size: 11px; font-weight: 700; }
.voice-filter-reset:hover:not(:disabled) { border-color: #465371; background: #182236; }
.voice-filter-reset:disabled { color: #5f6b80; cursor: default; opacity: .62; }
.voice-filter-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.voice-filter-empty { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 6px; color: var(--muted); text-align: center; }
.voice-filter-empty[hidden], .voice-card-grid[hidden], .voice-asset-card[hidden] { display: none !important; }
.voice-filter-empty .ui-icon { color: #59657c; }
.voice-filter-empty strong { color: var(--ink); font-size: 12px; }
.voice-filter-empty span { font-size: 10px; }
.voice-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 264px)); align-items: start; gap: 12px; }
.voice-asset-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, rgba(18,27,44,.97), rgba(13,21,35,.97)); box-shadow: 0 8px 24px rgba(0,0,0,.13); transition: transform .16s, border-color .16s, box-shadow .16s; }
.voice-asset-card:hover { transform: translateY(-2px); border-color: #3c4964; box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.voice-card-trigger { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 92px; padding: 12px; text-align: left; border: 0; color: var(--ink); background: transparent; }
.voice-card-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.voice-card-trigger:disabled { cursor: default; }
.voice-card-play-icon { display: grid; place-items: center; width: 38px; height: 38px; padding-left: 2px; border: 1px solid rgba(0,217,255,.2); border-radius: 50%; color: var(--accent); background: rgba(0,217,255,.08); transition: color .15s, border-color .15s, background .15s, transform .15s; }
.voice-card-trigger:not(:disabled):hover .voice-card-play-icon { transform: scale(1.05); border-color: rgba(0,217,255,.42); background: rgba(0,217,255,.14); }
.voice-card-content { display: grid; min-width: 0; gap: 5px; }
.voice-card-heading { display: flex; align-items: center; min-width: 0; gap: 6px; }
.voice-card-heading strong { min-width: 0; overflow: hidden; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.voice-card-heading .ui-badge { flex: 0 0 auto; }
.voice-card-content > small { overflow: hidden; color: var(--muted); font-size: 9px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; }
.voice-waveform { display: flex; align-items: center; gap: 2px; height: 22px; overflow: hidden; }
.voice-waveform i { width: 3px; height: 7px; border-radius: 999px; background: #536079; opacity: .78; transform-origin: center; }
.voice-waveform i:nth-child(3n + 1) { height: 12px; }
.voice-waveform i:nth-child(4n + 2) { height: 18px; }
.voice-waveform i:nth-child(5n) { height: 9px; }
.voice-card-footer { display: grid; gap: 5px; min-height: 34px; padding: 6px 10px; border-top: 1px solid var(--line); background: rgba(7,11,20,.2); }
.voice-card-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-width: 0; }
.voice-card-play-hint { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.voice-card-footer [data-voice-clone-status] { display: inline-flex; flex: 0 0 auto; }
.voice-card-footer form { min-width: 0; margin: 0; }
.voice-card-footer-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px; min-width: 0; margin-left: auto; }
.voice-clone-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 25px; padding: 4px 8px; border: 1px solid rgba(108,92,231,.28); border-radius: 7px; color: #dcd8ff; background: rgba(108,92,231,.14); font-size: 9px; font-weight: 750; transition: color .15s, border-color .15s, background .15s; }
.voice-clone-button:hover:not(:disabled) { color: #fff; border-color: rgba(108,92,231,.55); background: rgba(108,92,231,.28); }
.voice-clone-button:disabled { cursor: default; opacity: .48; }
.voice-card-manage-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 25px; padding: 4px 6px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 700; transition: color .15s, border-color .15s, background .15s; }
.voice-card-manage-button:hover { color: var(--ink); border-color: var(--line); background: rgba(148,163,184,.08); }
.voice-card-manage-button.is-danger:hover { color: #ff9aaa; border-color: rgba(255,107,129,.25); background: rgba(255,107,129,.09); }
.voice-clone-progress { display: inline-flex; align-items: center; gap: 4px; }
.voice-clone-progress .ui-icon { animation: voice-clone-spin 1.4s linear infinite; }
@keyframes voice-clone-spin { to { transform: rotate(360deg); } }
.voice-asset-card.is-playing { border-color: rgba(0,217,255,.42); box-shadow: 0 12px 30px rgba(0,217,255,.08); }
.voice-asset-card.is-playing .voice-card-play-icon { color: #071019; border-color: var(--accent); background: var(--accent); }
.voice-asset-card.is-playing .voice-waveform i { background: var(--accent); animation: voice-wave 760ms ease-in-out infinite alternate; }
.voice-asset-card.is-playing .voice-waveform i:nth-child(2n) { animation-delay: -220ms; }
.voice-asset-card.is-playing .voice-waveform i:nth-child(3n) { animation-delay: -420ms; }
.voice-asset-card.is-unavailable { opacity: .72; }
.voice-asset-card.is-unavailable:hover { transform: none; border-color: var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.13); }
.voice-asset-card audio { display: none; }
.voice-upload-dialog { width: min(92vw, 650px); }
.voice-upload-form { display: grid; gap: 14px; padding: 18px; }
.voice-edit-dialog { width: min(92vw, 560px); }
.voice-edit-form { display: grid; gap: 15px; padding: 18px; }
.voice-upload-zone { min-height: 196px; }
.voice-upload-picker { min-height: 196px; }
.voice-upload-picker > strong { font-size: 14px; }
.voice-upload-zone.has-file { border-style: solid; border-color: rgba(124,255,203,.32); background: rgba(124,255,203,.035); }
.voice-upload-zone.is-processing { border-color: rgba(0,217,255,.35); background: rgba(0,217,255,.035); }
.voice-upload-ready { min-height: 194px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 34px; align-items: center; gap: 12px; padding: 22px; text-align: left; }
.voice-upload-ready[hidden] { display: none; }
.voice-ready-icon { display: grid; place-items: center; width: 48px; height: 48px; color: var(--highlight); border: 1px solid rgba(124,255,203,.2); border-radius: 14px; background: rgba(124,255,203,.08); }
.voice-ready-copy { display: grid; min-width: 0; gap: 5px; }
.voice-ready-copy strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.voice-ready-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.voice-upload-ready .ui-badge { justify-self: end; }
.voice-upload-ready .ui-icon-button { justify-self: end; }
.voice-extract-progress { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow: hidden; padding: 11px 12px 14px; border: 1px solid rgba(0,217,255,.2); border-radius: 10px; background: rgba(0,217,255,.055); }
.voice-extract-progress[hidden] { display: none; }
.voice-extract-spinner { width: 26px; height: 26px; border: 2px solid rgba(0,217,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: upload-progress-spin .75s linear infinite; }
.voice-extract-progress > div { display: grid; min-width: 0; gap: 2px; }
.voice-extract-progress strong { font-size: 11px; }
.voice-extract-progress small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.voice-extract-progress > span:not(.voice-extract-spinner) { color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.voice-extract-progress > i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(148,163,184,.12); }
.voice-extract-progress > i span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .2s ease; }
.voice-upload-error { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; color: #ff9aaa; border: 1px solid rgba(255,107,129,.2); border-radius: 9px; background: rgba(255,107,129,.07); font-size: 10px; line-height: 1.5; }
.voice-upload-error[hidden] { display: none; }
.voice-upload-error .ui-icon { flex: 0 0 auto; margin-top: 1px; }
@keyframes voice-wave { from { transform: scaleY(.55); opacity: .55; } to { transform: scaleY(1.18); opacity: 1; } }

.copy-list-section { display: grid; gap: 1rem; }
.copy-list-section.is-empty { min-height: calc(100dvh - 205px); place-items: center; }
.copy-list-section.is-empty .ui-empty-minimal { transform: none; }
.copy-create-dialog { width: min(92vw, 680px); }
.copy-create-form { display: grid; gap: 14px; padding: 18px; }
.copy-create-form textarea { min-height: 210px; }
.copy-card-head { display: flex; justify-content: space-between; gap: 1rem; }
.copy-card-head h2 { font-size: 1.05rem; }
.copy-card-head small { color: var(--muted); font-size: .66rem; }
.copy-card > p { color: #4f5c56; font-size: .83rem; line-height: 1.75; }
.copy-card details { border-top: 1px solid var(--line); padding-top: .8rem; }
.copy-card summary, .advanced-fields summary { color: var(--primary); font-size: .75rem; font-weight: 750; cursor: pointer; }
.compact-form { margin-top: 1rem; }
.advanced-fields { padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: #f8faf9; }
.advanced-fields .form-grid { margin-top: .8rem; }

.active-jobs { margin-bottom: 1rem; }
.active-job-row { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.active-job-row:last-child { border-bottom: 0; }
.active-job-row div { display: grid; gap: .2rem; }
.active-job-row small { color: var(--muted); font-size: .66rem; }
.work-empty { min-height: 45vh; display: grid; align-content: center; }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.work-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.work-cover { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: #193b2e; color: var(--accent); font-size: 2rem; }
.work-cover small { position: absolute; right: .65rem; bottom: .55rem; padding: .2rem .4rem; border-radius: 6px; background: rgba(0,0,0,.35); color: white; font-size: .6rem; }
.work-body { padding: 1rem; }
.work-body > p { color: var(--muted); margin: .4rem 0 .8rem; font-size: .68rem; }
.work-body > div { display: flex; gap: 1rem; }
.work-body a { font-size: .75rem; font-weight: 750; }
.works-page-header { margin-bottom: 14px; }
.works-tab-panels { margin-top: 14px; }
.works-tab-panels > section[hidden] { display: none !important; }
.video-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 224px)); align-items: start; gap: 16px; }
.video-work-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: #101827; box-shadow: 0 8px 22px rgba(0,0,0,.16); transition: transform .18s ease, box-shadow .18s ease; }
.video-work-card:hover, .video-work-card:focus-within { transform: translateY(-2px); box-shadow: 0 15px 34px rgba(0,0,0,.24); }
.video-work-card-preview { position: relative; overflow: hidden; width: 100%; background: #111827; isolation: isolate; }
.video-work-card.is-portrait .video-work-card-preview { aspect-ratio: 9 / 16; }
.video-work-card.is-landscape .video-work-card-preview { aspect-ratio: 16 / 9; }
.video-work-card-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #111827; }
.video-work-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.55); background: radial-gradient(circle at 30% 18%, rgba(108,92,231,.45), transparent 38%), linear-gradient(145deg, #17233a, #0b1220); }
.video-work-card-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(5,8,14,.03) 42%, rgba(5,8,14,.84) 100%); transition: background .18s ease; }
.video-work-card:hover .video-work-card-shade, .video-work-card:focus-within .video-work-card-shade { background: linear-gradient(180deg, rgba(5,8,14,.27), rgba(5,8,14,.38) 54%, rgba(5,8,14,.88) 100%); }
.video-work-card-meta { position: absolute; right: 12px; bottom: 12px; left: 12px; z-index: 2; display: grid; gap: 3px; min-width: 0; color: #fff; pointer-events: none; }
.video-work-card-meta strong, .video-work-card-meta time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-work-card-meta strong { color: #fff; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 5px rgba(0,0,0,.6); -webkit-text-fill-color: #fff; }
.video-work-card-meta time { color: rgba(255,255,255,.82); font-size: 11px; font-weight: 600; }
.video-work-card-actions { position: absolute; top: 50%; left: 50%; z-index: 3; display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none; transform: translate(-50%, calc(-50% + 8px)); transition: opacity .16s ease, transform .16s ease; }
.video-work-card:hover .video-work-card-actions, .video-work-card:focus-within .video-work-card-actions { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.video-work-card-actions a, .video-work-card-actions button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(15,23,42,.68); box-shadow: 0 5px 16px rgba(0,0,0,.24); backdrop-filter: blur(6px); cursor: pointer; transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.video-work-card-actions a:hover, .video-work-card-actions button:hover { border-color: #fff; background: rgba(15,23,42,.9); transform: scale(1.06); }
.video-work-card-actions a:focus-visible, .video-work-card-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.video-work-delete-form { margin: 0; }
.video-work-delete-form button:hover { color: #fff; border-color: rgba(255,139,155,.9); background: rgba(218,55,79,.9); }
.video-work-card.is-landscape .video-work-card-meta { bottom: 10px; }
.video-work-card.is-landscape .video-work-card-meta strong { font-size: 13px; }
.audio-active-job > div { min-width: 0; }
.audio-active-job small { max-width: min(760px, 70vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.audio-work-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow); transition: transform .16s, border-color .16s, box-shadow .16s; }
.audio-work-card:hover { transform: translateY(-2px); border-color: rgba(108,92,231,.54); box-shadow: 0 15px 32px rgba(0,0,0,.16); }
.audio-work-card-icon { width: 42px; height: 42px; display: grid; place-items: center; grid-row: 1 / span 2; border-radius: 12px; color: #dcd8ff; background: linear-gradient(145deg, rgba(108,92,231,.34), rgba(84,122,228,.2)); }
.audio-work-card-copy { min-width: 0; display: grid; gap: 4px; }
.audio-work-card-copy strong, .audio-work-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-work-card-copy strong { font-size: 13px; }
.audio-work-card-copy small { color: var(--muted); font-size: 10px; }
.audio-work-card-copy p { min-height: 38px; margin: 5px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.7; }
.audio-work-card-action { display: inline-flex; align-items: center; gap: 5px; justify-self: end; color: var(--primary); font-size: 10px; font-weight: 750; }
.audio-work-detail-header { align-items: flex-end; }
.audio-work-status-card { margin-bottom: 14px; }
.audio-work-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); gap: 14px; }
.audio-work-player-panel audio { width: 100%; margin-top: 14px; accent-color: var(--primary); }
.audio-work-player-art { min-height: 180px; display: grid; align-content: center; justify-items: center; gap: 9px; overflow: hidden; border: 1px solid rgba(108,92,231,.25); border-radius: 14px; color: #cfc9ff; background: radial-gradient(circle at 50% 110%, rgba(0,217,255,.14), transparent 50%), linear-gradient(145deg, rgba(108,92,231,.26), rgba(16,24,39,.25)); }
.audio-work-player-art .ui-icon { width: 38px; height: 38px; }
.audio-work-player-art span { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.audio-work-player-placeholder { min-height: 225px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }
.audio-work-player-placeholder strong { color: var(--ink); font-size: 14px; }
.audio-work-player-placeholder span { max-width: 340px; font-size: 11px; line-height: 1.7; }
.audio-work-script-panel { grid-column: 1 / -1; }
.audio-work-full-script { min-height: 150px; max-height: 420px; overflow: auto; white-space: normal; font-size: 13px; line-height: 1.9; }
.video-work-player-panel { margin-bottom: 14px; }
.video-work-player-panel video { display: block; width: min(100%, 860px); max-height: 68vh; margin: 0 auto; border-radius: 12px; background: #080d16; }

.error-page { min-height: 55vh; display: grid; place-items: center; align-content: center; text-align: center; padding: 2rem; }
.error-page > span { color: var(--primary); font-size: 5rem; font-weight: 900; letter-spacing: -.08em; opacity: .2; }
.error-page h1 { margin-top: -1rem; }
.error-page p { color: var(--muted); max-width: 520px; }
.error-page .button { margin-top: 1rem; }

@media (max-width: 1050px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creation-layout { grid-template-columns: 1fr; }
  .submit-card { position: static; }
  .settings-grid { grid-template-columns: 1fr; }
  .asset-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .avatar-group-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .guest-shell { grid-template-columns: 1fr; }
  .guest-brand { min-height: 42vh; padding: 2rem; }
  .guest-brand h1 { font-size: 2.5rem; }
  .guest-feature-list { margin-top: 2rem; }
  .guest-card-wrap { padding: 2.5rem 1.3rem; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: .8rem; }
  .sidebar-brand { padding-bottom: .7rem; }
  .nav-list { display: flex; overflow-x: auto; }
  .nav-list > a { white-space: nowrap; }
  .nav-divider, .sidebar-foot { display: none; }
  .main-content { padding: 1.1rem; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .hero-header { padding: 1.25rem; }
  .content-grid { grid-template-columns: 1fr; }
  .asset-action-grid { grid-template-columns: 1fr; }
  .asset-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .metric-grid, .form-grid.two, .choice-grid { grid-template-columns: 1fr; }
  .metric-card strong { font-size: 1.65rem; }
  .form-panel { grid-template-columns: 38px minmax(0, 1fr); padding: 1rem; }
  .header-actions { width: 100%; }
  .header-actions > * { flex: 1; }
  .header-actions .button { width: 100%; }
  .asset-card-grid, .work-grid { grid-template-columns: 1fr; }
  .avatar-group-grid, .material-grid { grid-template-columns: 1fr; }
  .asset-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); border-radius: 16px; }
  .dialog-header { padding: 1.1rem; }
  .create-group-dialog > form, .material-grid { padding: 1.1rem; }
  .materials-empty { margin: 1.1rem 1.1rem 0; }
  .material-upload-form { margin: 1.1rem; }
  .upload-hint { align-items: stretch; flex-direction: column; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .voice-card-grid { grid-template-columns: 1fr; }
}

/* Digital Human UI theme -------------------------------------------------- */
html { color-scheme: dark; }
body {
  background:
    radial-gradient(circle at 84% 8%, rgba(0, 217, 255, .07), transparent 24rem),
    radial-gradient(circle at 18% 92%, rgba(108, 92, 231, .09), transparent 28rem),
    var(--canvas);
  color: var(--ink);
}
::selection { color: #070b14; background: var(--highlight); }
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: var(--accent); }
h1, h2, h3, strong { color: var(--ink); }
.muted, .page-header p, .panel-heading p, .section-heading p { color: var(--muted); }
.eyebrow { color: var(--accent); }

.app-shell { grid-template-columns: 260px minmax(0, 1fr); }
.main-content { position: relative; min-height: 100vh; padding: clamp(1.4rem, 3.7vw, 3.5rem); }
.sidebar {
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(108, 92, 231, .08), transparent 22%),
    rgba(7, 11, 20, .96);
  box-shadow: 16px 0 45px rgba(0,0,0,.16);
}
.sidebar::after { content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 150px; background: linear-gradient(var(--accent), transparent); opacity: .75; }
.sidebar-brand { color: var(--ink); }
.brand-mark {
  color: white;
  background: linear-gradient(145deg, var(--primary), var(--accent));
  box-shadow: 0 0 24px rgba(0,217,255,.15), inset 0 0 0 1px rgba(255,255,255,.2);
}
.nav-list > a { color: var(--muted); border: 1px solid transparent; }
.nav-list > a span { color: #66748f; }
.nav-list > a:hover { color: var(--ink); border-color: rgba(108,92,231,.24); background: rgba(108,92,231,.08); }
.nav-list > a.active { color: var(--ink); border-color: rgba(108,92,231,.3); background: linear-gradient(90deg, rgba(108,92,231,.22), rgba(0,217,255,.06)); box-shadow: inset 3px 0 0 var(--primary); }
.nav-list > a.active span { color: var(--accent); }
.nav-divider { color: #58667f; }
.balance-card { border-color: var(--line); background: linear-gradient(145deg, rgba(108,92,231,.14), rgba(0,217,255,.04)); }
.balance-card span { color: var(--muted); }
.balance-card strong { color: var(--highlight); }
.avatar-dot { color: var(--highlight); background: rgba(124,255,203,.1); border: 1px solid rgba(124,255,203,.2); }
.user-row small { color: var(--muted); }

.page-header { padding-bottom: 1.25rem; border-bottom: 1px solid rgba(37,48,71,.72); }
.page-header h1 { background: linear-gradient(100deg, #fff 10%, #c4ccff 58%, var(--accent)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.hero-header { border-color: rgba(108,92,231,.28); background: linear-gradient(120deg, rgba(108,92,231,.17), rgba(0,217,255,.07)); }

label { color: #d6ddec; }
label small { color: var(--muted); }
input, textarea, select {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(7, 11, 20, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
input::placeholder, textarea::placeholder { color: #5f6c83; }
input:hover, textarea:hover, select:hover { border-color: #35435e; }
input:focus, textarea:focus, select:focus { border-color: var(--primary); background: #0b1220; box-shadow: 0 0 0 3px rgba(108,92,231,.18), 0 0 22px rgba(0,217,255,.04); }
input:disabled, textarea:disabled, select:disabled { color: #657188; background: rgba(7,11,20,.45); cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

.button-accent { color: #03131a; border-color: rgba(0,217,255,.5); background: linear-gradient(135deg, var(--accent), #72ecff); box-shadow: 0 9px 24px rgba(0,217,255,.16); }
.button-danger { color: #ffdce2; border-color: rgba(255,107,129,.34); background: rgba(255,107,129,.12); }
.button-danger:hover { background: rgba(255,107,129,.2); }
.button-ghost { color: var(--accent); border-color: transparent; background: transparent; }
.button-ghost:hover { background: rgba(0,217,255,.08); }

.panel,
.metric-card,
.detail-status,
.asset-card,
.avatar-group-card,
.work-card,
.material-card,
.asset-dialog {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(18,27,44,.97), rgba(13,21,35,.97));
  box-shadow: var(--shadow);
}
.panel { box-shadow: 0 12px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.018); }
.panel-heading { border-bottom-color: var(--line); }
.metric-card.accent { border-color: rgba(108,92,231,.42); background: linear-gradient(145deg, rgba(108,92,231,.24), rgba(0,217,255,.08)); }
.metric-card > span, .metric-card small, .metric-card.accent > span, .metric-card.accent small { color: var(--muted); }
.metric-card strong, .metric-card.accent strong { color: var(--highlight); }

th { color: #7f8da5; border-color: var(--line); }
td { border-color: rgba(37,48,71,.68); }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(108,92,231,.055); }
td small { color: var(--muted); }
.transaction-row, .active-job-row, .detail-list div { border-color: rgba(37,48,71,.68); }

.alert { display: flex; align-items: flex-start; gap: .45rem; color: #dce4f4; border-color: var(--line); background: rgba(16,24,39,.94); }
.alert strong { flex: 0 0 auto; }
.alert span { color: var(--muted); font-weight: 550; }
.alert-info { border-color: rgba(0,217,255,.25); background: rgba(0,217,255,.07); }
.alert-info strong { color: var(--accent); }
.alert-success { color: var(--highlight); border-color: rgba(124,255,203,.24); background: rgba(124,255,203,.07); }
.alert-success strong { color: var(--highlight); }
.alert-warning { border-color: rgba(255,200,87,.25); background: rgba(255,200,87,.07); }
.alert-warning strong { color: var(--warning); }
.alert-error { color: #ff9aaa; border-color: rgba(255,107,129,.26); background: rgba(255,107,129,.08); }
.alert-error strong { color: #ff9aaa; }
.notice { color: #ffdc85; border-color: rgba(255,200,87,.23); background: rgba(255,200,87,.08); }
.notice span { color: var(--warning); }

.choice span { border-color: var(--line); background: rgba(7,11,20,.58); }
.choice input:checked + span { border-color: var(--primary); background: rgba(108,92,231,.14); box-shadow: 0 0 0 2px rgba(108,92,231,.08); }
.choice span small { color: var(--muted); }
.submit-card { border: 1px solid rgba(108,92,231,.34); background: linear-gradient(155deg, rgba(108,92,231,.24), rgba(16,24,39,.98) 42%, rgba(0,217,255,.08)); }
.submit-card .eyebrow { color: var(--accent); }
.submit-card > span:not(.eyebrow), .submit-card dt, .submit-card p { color: var(--muted); }
.quote-number { color: var(--highlight); text-shadow: 0 0 24px rgba(124,255,203,.13); }
.submit-card dl, .submit-card dl div { border-color: rgba(148,163,184,.14); }

.detail-status { background: linear-gradient(120deg, rgba(108,92,231,.13), rgba(16,24,39,.96)); }
.status-orb { background: var(--highlight); box-shadow: inset 0 0 0 22px var(--surface), 0 0 0 1px var(--line), 0 0 28px rgba(124,255,203,.12); }
.status-card-processing .status-orb, .status-card-submitted .status-orb { background: var(--accent); }
.status-card-failed .status-orb { background: var(--danger); }
.script-preview, .advanced-fields, .settings-note { color: #d9e1f0; border-color: var(--line); background: rgba(7,11,20,.58); }
.inline-error { color: #ff9aaa; background: rgba(255,107,129,.08); }
.configured-mark { color: var(--highlight); }

.ui-empty-mark { color: var(--accent); border: 1px solid rgba(0,217,255,.2); background: rgba(0,217,255,.08); box-shadow: 0 0 28px rgba(0,217,255,.07); }
.asset-preview, .avatar-group-cover { color: var(--accent); background: linear-gradient(145deg, #151f32, #0b1321); }
.asset-preview.video-preview, .avatar-group-cover.is-video, .material-preview, .work-cover { color: var(--accent); background: radial-gradient(circle at 22% 18%, rgba(108,92,231,.34), transparent 36%), #080f1b; }
.avatar-group-card:hover { border-color: #3c4964; box-shadow: 0 10px 26px rgba(0,0,0,.25), 0 0 18px rgba(108,92,231,.05); }
.asset-dialog::backdrop { background: rgba(1,4,10,.78); backdrop-filter: blur(6px); }
.dialog-header { border-color: var(--line); background: rgba(12,18,30,.94); }
.materials-empty, .material-upload-form { border-color: var(--line); background: rgba(7,11,20,.48); }
.material-upload-form input { background: rgba(7,11,20,.72); }
.copy-card > p { color: #c2ccdc; }
.work-cover small { background: rgba(7,11,20,.72); }
.back-link { color: var(--muted); }

.guest-body { background: var(--canvas); }
.guest-shell { background: var(--canvas); }
.guest-brand { color: white; border-right: 1px solid var(--line); background: radial-gradient(circle at 15% 76%, rgba(108,92,231,.24), transparent 35%), radial-gradient(circle at 82% 20%, rgba(0,217,255,.1), transparent 28%), #070b14; }
.guest-brand p, .guest-feature-list span { color: #aebbd0; }
.guest-feature-list span { border-color: rgba(148,163,184,.22); background: rgba(16,24,39,.46); }
.guest-card-wrap { background: linear-gradient(145deg, #101827, #0b121f); }
.auth-card { padding: 1.5rem; border: 1px solid rgba(37,48,71,.65); border-radius: 20px; background: rgba(7,11,20,.24); box-shadow: 0 18px 56px rgba(0,0,0,.18); }
.auth-switch { color: var(--muted); }

/* Reusable component library -------------------------------------------- */
.ui-tabs { display: flex; align-items: center; gap: 4px; width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,11,20,.52); scrollbar-width: thin; }
.ui-tab { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 118px; min-height: 36px; padding: 7px 14px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 750; line-height: 1; white-space: nowrap; transition: color .15s, border-color .15s, background .15s; }
.ui-tab:hover { color: var(--ink); background: rgba(148,163,184,.07); }
.ui-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-tab.is-active { color: #fff; border-color: rgba(108,92,231,.38); background: linear-gradient(135deg, rgba(108,92,231,.24), rgba(0,217,255,.08)); box-shadow: inset 0 -2px 0 var(--primary); }
.ui-tab .ui-icon { color: currentColor; }
.component-tabs-demo { display: grid; gap: 10px; }
.component-tab-demo-panel { min-height: 74px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(7,11,20,.36); font-size: 12px; line-height: 1.65; }
.component-tab-demo-panel[hidden] { display: none !important; }
.secret-field { display: grid; gap: 6px; min-width: 0; }
.secret-field > label { margin: 0; }
.secret-field-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; min-height: 28px; overflow: visible; }
.configured-mark { min-width: 0; margin: 0; color: var(--highlight); font-size: 11px; line-height: 1.45; }
.configured-mark strong { flex: 0 0 auto; color: currentColor; font-size: inherit; }
.configured-mark span { overflow: hidden; color: var(--muted); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.secret-field-hint { color: var(--muted); font-size: 11px; font-weight: 500; line-height: 1.45; }
.secret-clear-control { position: relative; display: inline-flex; flex: 0 0 auto; margin: 0; cursor: pointer; }
input.secret-clear-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; clip-path: inset(50%); }
.secret-clear-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid rgba(255,107,129,.28); border-radius: 7px; color: #ff9aaa; background: rgba(255,107,129,.07); font-size: 10px; font-weight: 750; line-height: 1; transition: color .15s, border-color .15s, background .15s; }
.secret-clear-pill:hover { border-color: rgba(255,107,129,.5); background: rgba(255,107,129,.12); }
.secret-clear-default,
.secret-clear-active { display: inline-flex; align-items: center; gap: 5px; }
.secret-clear-active { display: none; }
.secret-clear-input:focus-visible + .secret-clear-pill { outline: 2px solid var(--accent); outline-offset: 2px; }
.secret-clear-input:checked + .secret-clear-pill { color: var(--warning); border-color: rgba(255,200,87,.34); background: rgba(255,200,87,.09); }
.secret-clear-input:checked + .secret-clear-pill .secret-clear-default { display: none; }
.secret-clear-input:checked + .secret-clear-pill .secret-clear-active { display: inline-flex; }
.secret-field.is-clearing [data-secret-value] { opacity: .55; }
.component-page-header { align-items: center; }
.component-version { flex: 0 0 auto; padding: .5rem .72rem; border: 1px solid rgba(0,217,255,.2); border-radius: 999px; color: var(--accent); background: rgba(0,217,255,.06); font-size: .68rem; font-weight: 750; }
.component-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.component-section { position: relative; overflow: hidden; }
.component-section::after { content: ""; position: absolute; top: 0; right: 0; width: 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--primary)); }
.component-section > .panel-heading > div { width: 100%; }
.component-section > .panel-heading h2 { display: inline-block; margin-left: .55rem; }
.component-index { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 .35rem; border-radius: 6px; color: var(--accent); background: rgba(0,217,255,.08); font-size: .62rem; font-weight: 850; letter-spacing: .06em; }
.component-span-2 { grid-column: 1 / -1; }
.palette-group + .palette-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.palette-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.palette-heading strong { font-size: 12px; }
.palette-heading span { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.color-token-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.color-token { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(7,11,20,.48); }
.color-chip { height: 78px; border-bottom: 1px solid var(--line); }
.color-token > div:last-child { display: grid; gap: .25rem; padding: .72rem .8rem; }
.color-token strong { font-size: .74rem; }
.color-token code { color: var(--muted); font-size: .66rem; }
.token-light-page .color-chip { background: #f5f7fb; }
.token-light-surface .color-chip { background: #fff; }
.token-light-action .color-chip { background: #5b4de8; }
.token-light-link .color-chip { background: #5146d9; }
.token-light-success .color-chip { background: #13795b; }
.token-light-text .color-chip { background: #1f2937; }
.token-light-muted .color-chip { background: #596579; }
.token-light-control .color-chip { background: #8995a8; }
.token-dark-page .color-chip { background: #0b0f17; }
.token-dark-surface .color-chip { background: #141b26; }
.token-dark-action .color-chip { background: #6659d6; }
.token-dark-link .color-chip { background: #a79fff; }
.token-dark-success .color-chip { background: #62e6b8; }
.token-dark-text .color-chip { background: #f3f6fa; }
.token-dark-muted .color-chip { background: #b6c0ce; }
.token-dark-control .color-chip { background: #5f6d83; }
.component-stack { display: grid; gap: 1rem; }
.component-row { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.component-note { display: flex; gap: .7rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(7,11,20,.45); font-size: .68rem; line-height: 1.55; }
.component-note code { flex: 0 0 auto; color: var(--accent); }
.component-subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 9px; padding-top: 14px; border-top: 1px solid var(--line); }
.component-subsection-heading strong { font-size: 12px; }
.component-subsection-heading small { color: var(--muted); font-size: 10px; }
.component-voice-cards { grid-template-columns: repeat(2, minmax(220px, 264px)); }
.component-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.component-textarea { grid-column: span 3; }
.component-switches { display: grid; gap: .5rem; }
.component-switches .toggle { margin: 0; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,11,20,.42); }
.alert-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.alert-demo-grid .alert { max-width: none; margin: 0; }
.component-metrics { margin: 0; }
.ui-empty { min-height: 260px; display: grid; align-content: center; justify-items: center; text-align: center; padding: 1.5rem; }
.ui-empty-mark { display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 1rem; border-radius: 21px; font-size: 1.45rem; font-weight: 850; }
.ui-empty h2 { margin-bottom: .35rem; }
.ui-empty p { max-width: 420px; margin: 0 0 1.1rem; color: var(--muted); font-size: .78rem; }
.ui-empty-minimal { min-height: 0; padding: 0; gap: 8px; color: #68758a; transform: translateY(-4vh); }
.ui-empty-minimal .ui-empty-mark { width: 64px; height: 54px; margin: 0; border: 0; border-radius: 0; color: currentColor; background: transparent; box-shadow: none; opacity: .42; }
.ui-empty-label { color: currentColor; font-size: 11px; opacity: .68; }
.blank-home.ui-empty { min-height: 55vh; }
.modal-demo-card { min-height: 260px; display: grid; align-content: center; justify-items: center; text-align: center; }
.modal-demo-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: .8rem; border: 1px solid rgba(108,92,231,.25); border-radius: 17px; color: #c2baff; background: rgba(108,92,231,.11); font-size: 1.25rem; }
.modal-demo-card p { max-width: 320px; margin: .4rem 0 1rem; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.component-dialog-content { display: grid; gap: 1.2rem; padding: 1.4rem; }
.component-dialog-summary { display: flex; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,11,20,.52); }
.component-dialog-summary > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--accent); background: rgba(0,217,255,.08); }
.component-dialog-summary > div { display: grid; gap: .2rem; }
.component-dialog-summary small { color: var(--muted); }

/* Self-hosted Tabler icon system ---------------------------------------- */
.back-link, .work-body a, .copy-card summary, .advanced-fields summary, .configured-mark { display: inline-flex; align-items: center; gap: 5px; }
.guest-feature-list span { display: inline-flex; align-items: center; gap: 6px; }
.material-provider-placeholder { display: grid; place-items: center; gap: 5px; color: var(--accent); }
.material-provider-placeholder small { color: var(--muted); font-size: 10px; }
.avatar-page-header .back-link { display: flex; width: max-content; margin-bottom: 8px; }
.avatar-material-header-actions { align-items: center; }
.avatar-material-header-actions form { margin: 0; }
.avatar-material-library { display: grid; gap: 16px; }
.avatar-material-library.is-empty { min-height: calc(100vh - 205px); place-items: center; }
.avatar-material-library .material-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 216px)); justify-content: start; gap: 12px; padding: 0; }
.avatar-material-library .material-card { border-radius: 14px; }
.upload-material-dialog { width: min(94vw, 720px); }
.upload-material-form { margin: 16px; }
.training-video-dialog { width: min(94vw, 680px); }
.training-video-form { display: grid; gap: 14px; padding: 16px 18px 18px; }
.training-upload-zone { position: relative; min-height: 190px; display: grid; overflow: hidden; text-align: center; border: 1px dashed #3b4965; border-radius: 12px; background: rgba(7,11,20,.46); transition: border-color .15s, background .15s; }
.training-upload-zone:hover { border-color: var(--accent); background: rgba(0,217,255,.035); }
.training-upload-zone.is-dragging { border-color: var(--accent); background: rgba(0,217,255,.07); box-shadow: 0 0 0 3px rgba(0,217,255,.1); }
.training-upload-picker { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; color: var(--ink); cursor: pointer; }
.training-upload-picker[hidden] { display: none; }
.training-upload-picker:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.training-upload-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.training-upload-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 3px; border: 1px solid rgba(0,217,255,.2); border-radius: 13px; color: var(--accent); background: rgba(0,217,255,.08); }
.training-upload-picker > strong { font-size: 14px; }
.training-upload-picker small, .training-upload-formats { color: var(--muted); font-size: 11px; font-weight: 550; }
.training-upload-formats { margin-top: 3px; }
.training-video-preview { position: relative; display: grid; min-height: 190px; align-items: center; padding: 12px; background: #02050a; }
.training-video-preview[hidden] { display: none; }
.training-video-preview video { display: block; width: 100%; max-height: 310px; border-radius: 9px; background: #000; object-fit: contain; }
.training-preview-meta { position: absolute; right: 19px; bottom: 19px; left: 19px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: #fff; background: rgba(2,6,14,.7); backdrop-filter: blur(9px); }
.training-file-name { min-width: 0; overflow: hidden; color: #fff; font-size: 11px; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.training-preview-meta .button { flex: 0 0 auto; min-height: 30px; color: #fff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.09); box-shadow: none; }
.upload-progress { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px 10px; overflow: hidden; padding: 10px 12px 13px; border: 1px solid rgba(0,217,255,.2); border-radius: 10px; background: rgba(0,217,255,.055); }
.upload-progress[hidden] { display: none; }
.upload-progress-spinner { grid-row: 1; width: 24px; height: 24px; border: 2px solid rgba(0,217,255,.18); border-top-color: var(--accent); border-radius: 50%; animation: upload-progress-spin .75s linear infinite; }
.upload-progress-copy { display: grid; min-width: 0; gap: 1px; text-align: left; }
.upload-progress-copy strong { font-size: 11px; }
.upload-progress-copy small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.upload-progress-value { color: var(--accent); font-size: 11px; font-variant-numeric: tabular-nums; }
.upload-progress-track { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: rgba(148,163,184,.12); }
.upload-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .18s ease; }
.upload-progress.is-processing .upload-progress-track i { animation: upload-progress-saving 1.25s ease-in-out infinite; }
.upload-progress.is-complete { border-color: rgba(124,255,203,.24); background: rgba(124,255,203,.07); }
.upload-progress.is-complete .upload-progress-spinner { border-color: var(--highlight); animation: none; }
.upload-progress.is-complete .upload-progress-spinner::after { content: ""; display: block; width: 8px; height: 4px; margin: 6px 0 0 6px; border-bottom: 2px solid var(--highlight); border-left: 2px solid var(--highlight); transform: rotate(-45deg); }
@keyframes upload-progress-spin { to { transform: rotate(360deg); } }
@keyframes upload-progress-saving { 0%, 100% { opacity: .58; } 50% { opacity: 1; } }
.authorization-verification-card { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,11,20,.36); }
.authorization-verification-card > header { display: flex; align-items: center; gap: 10px; }
.authorization-verification-card > header > span { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; color: var(--highlight); border: 1px solid rgba(124,255,203,.18); border-radius: 10px; background: rgba(124,255,203,.08); }
.authorization-verification-card h3 { margin: 0 0 3px; font-size: 13px; }
.authorization-verification-card header p { margin: 0; color: var(--muted); font-size: 10px; }
.authorization-statement { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 14px; border: 1px solid rgba(108,92,231,.25); border-radius: 10px; background: linear-gradient(135deg, rgba(108,92,231,.11), rgba(0,217,255,.035)); }
.authorization-statement > p { margin: 0; color: #d4dbea; font-size: 11px; line-height: 1.75; }
.authorization-code { min-width: 150px; padding-left: 16px; border-left: 1px solid rgba(148,163,184,.18); text-align: center; }
.authorization-code span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; }
.authorization-code strong { display: block; color: var(--accent); font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: .16em; text-shadow: 0 0 18px rgba(0,217,255,.14); white-space: nowrap; }
.authorization-verification-note { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.authorization-verification-note .ui-icon { flex: 0 0 auto; margin-top: 1px; color: var(--warning); }
.alert { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; }
.alert-icon { display: grid; place-items: center; margin-top: 1px; color: var(--accent) !important; }
.alert-content { display: grid; gap: 2px; min-width: 0; }
.alert-content > span { color: var(--muted); font-weight: 550; }
.alert-success .alert-icon { color: var(--highlight) !important; }
.alert-warning .alert-icon { color: var(--warning) !important; }
.alert-error .alert-icon { color: #ff9aaa !important; }
.ui-toast-region { position: fixed; z-index: 10000; top: 14px; left: 50%; display: grid; width: min(calc(100vw - 24px), 420px); gap: 8px; pointer-events: none; transform: translateX(-50%); }
.ui-toast { --toast-tone: var(--accent); position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; align-items: center; gap: 8px; min-height: 48px; overflow: hidden; padding: 8px 8px 10px 11px; border: 1px solid rgba(0,217,255,.24); border-radius: 10px; color: var(--ink); background: rgba(12,18,30,.96); box-shadow: 0 14px 38px rgba(0,0,0,.32); opacity: 0; pointer-events: auto; transform: translateY(-12px) scale(.98); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(16px); }
.ui-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.ui-toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(.98); }
.ui-toast-success { --toast-tone: var(--highlight); border-color: rgba(124,255,203,.25); }
.ui-toast-warning { --toast-tone: var(--warning); border-color: rgba(255,200,87,.28); }
.ui-toast-error { --toast-tone: #ff9aaa; border-color: rgba(255,107,129,.3); }
.ui-toast-icon { display: grid; place-items: center; color: var(--toast-tone); }
.ui-toast-copy { display: grid; min-width: 0; gap: 1px; }
.ui-toast-copy strong { overflow: hidden; font-size: 12px; line-height: 18px; text-overflow: ellipsis; }
.ui-toast-copy > span { color: var(--muted); font-size: 10px; line-height: 15px; }
.ui-toast-close { width: 28px; height: 28px; color: var(--muted); border-radius: 7px; }
.ui-toast-close:hover { color: var(--ink); }
.ui-toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--toast-tone); transform-origin: left; animation: toast-countdown var(--toast-duration, 5000ms) linear forwards; }
.ui-toast-progress.is-paused { animation-play-state: paused; }
@keyframes toast-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.icon-system-section { margin: 1rem 0; }
.component-guideline { flex: 0 0 auto; color: var(--muted); font-size: 10px; white-space: nowrap; }
.icon-library-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.icon-sample { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,11,20,.34); }
.icon-sample > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--accent); background: rgba(0,217,255,.07); }
.icon-sample strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.icon-sample code { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="light"] .icon-sample > span { color: var(--primary); border-color: #dedaff; background: #f1efff; }
html[data-theme="light"] .icon-sample { border-color: var(--line); background: #f8f9fb; }

@media (max-width: 1100px) {
  .color-token-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .component-textarea { grid-column: 1 / -1; }
  .icon-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar::after { display: none; }
  .model-configuration-grid { grid-template-columns: 1fr; }
  .component-layout { grid-template-columns: 1fr; }
  .component-span-2 { grid-column: auto; }
  .guest-brand { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .component-version { display: none; }
  .color-token-grid, .component-form-grid, .alert-demo-grid { grid-template-columns: 1fr; }
  .icon-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avatar-material-library .material-grid { grid-template-columns: minmax(0, 280px); justify-content: center; }
  .component-textarea { grid-column: auto; }
  .component-note { flex-direction: column; }
  .component-guideline { display: none; }
  .component-subsection-heading { align-items: flex-start; flex-direction: column; }
  .component-voice-cards { grid-template-columns: 1fr; }
  .ui-tab { min-width: 108px; padding-inline: 11px; }
  .settings-tab-panel .form-grid.two { grid-template-columns: 1fr; }
  .secret-grid > .secret-field:last-child { grid-column: auto; }
  .settings-panel-heading { align-items: stretch; flex-direction: column; }
  .settings-panel-heading .button { align-self: flex-start; }
  .settings-panel-actions { justify-content: flex-start; }
  .authorization-review-summary { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Compact application shell inspired by high-density creator platforms --- */
html { font-size: 14px; }
body { font-size: 1rem; line-height: 1.55; }
h1 { font-size: clamp(1.65rem, 2.2vw, 2rem); line-height: 1.28; letter-spacing: -.035em; }
h2 { font-size: 1.08rem; line-height: 1.5; }
h3 { font-size: 1rem; }
.eyebrow { font-size: .68rem; }

.app-shell { grid-template-columns: 218px minmax(0, 1fr); }
.app-frame { min-width: 0; min-height: 100vh; }
.sidebar { z-index: 30; width: auto; padding: 14px 12px 12px; }
.sidebar-brand { position: relative; gap: 9px; min-height: 42px; padding: 0 6px 16px; }
.sidebar-brand strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand > small { position: absolute; left: 53px; bottom: 8px; color: #65718a; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.brand-mark.small { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.nav-list { gap: 3px; }
.nav-list > a { min-height: 38px; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 580; }
.nav-list > a span { width: 18px; font-size: 13px; }
.nav-divider { padding: 16px 10px 5px; font-size: 10px; }

.sidebar-bottom { position: relative; margin-top: auto; display: grid; gap: 9px; }
.sidebar-create-link { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: rgba(148,163,184,.08); font-size: 12px; font-weight: 650; }
.sidebar-create-link > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: white; background: var(--primary); font-size: 14px; }
.sidebar-create-link i { color: var(--muted); font-style: normal; }
.sidebar-tools { display: grid; grid-template-columns: repeat(3, 36px); justify-content: space-between; align-items: center; padding: 0 3px; }
.sidebar-tools > button, .sidebar-more > summary { display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; list-style: none; font-size: 15px; transition: color .15s, border-color .15s, background .15s; }
.sidebar-tools > button:hover, .sidebar-more > summary:hover, .sidebar-more[open] > summary { color: var(--ink); border-color: var(--line); background: rgba(148,163,184,.1); }
.sidebar-more { position: relative; }
.sidebar-more summary::-webkit-details-marker, .topbar-popover summary::-webkit-details-marker { display: none; }
.sidebar-more-panel { position: absolute; z-index: 80; left: 0; bottom: 43px; width: 270px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.34); }
.sidebar-more-panel > strong { display: block; margin-bottom: 7px; font-size: 12px; }
.sidebar-more-panel > a, .sidebar-more-panel > button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 36px; padding: 7px 4px; border: 0; color: var(--muted); background: transparent; font-size: 12px; text-align: left; }
.sidebar-more-panel > a:hover, .sidebar-more-panel > button:hover { color: var(--ink); }
.sidebar-more-panel > a span { font-size: 11px; }
.sidebar-more-panel > button { margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.sidebar-more-panel > small { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.topbar { position: sticky; z-index: 24; top: 0; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(7,11,20,.88); backdrop-filter: blur(18px); }
.topbar-context { min-width: 0; color: var(--muted); font-size: 12px; font-weight: 560; }
.topbar-context span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-credit { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 5px 10px; border: 1px solid rgba(108,92,231,.24); border-radius: 999px; color: var(--ink); background: rgba(108,92,231,.1); font-size: 12px; }
.topbar-credit > span { color: var(--accent); font-size: 11px; }
.topbar-credit strong { color: var(--ink); font-size: 12px; }
.topbar-credit small { color: var(--muted); font-size: 11px; }
.topbar-popover { position: relative; }
.topbar-popover > summary { position: relative; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); list-style: none; cursor: pointer; font-size: 12px; }
.topbar-popover > summary:hover, .topbar-popover[open] > summary { color: var(--ink); border-color: var(--line); background: rgba(148,163,184,.08); }
.topbar-icon { display: grid; place-items: center; width: 20px; height: 20px; font-size: 16px; }
.notice-popover > summary > i { position: absolute; top: 4px; left: 24px; width: 6px; height: 6px; border: 1px solid var(--surface); border-radius: 50%; background: var(--danger); }
.topbar-avatar { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(108,92,231,.25); border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--primary), #7f71ef); font-size: 12px; font-weight: 750; }
.topbar-avatar.large { width: 38px; height: 38px; font-size: 14px; }
.topbar-dropdown { position: absolute; z-index: 90; top: calc(100% + 9px); right: 0; width: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 22px 65px rgba(0,0,0,.34); }
.dropdown-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.dropdown-heading strong { font-size: 13px; }
.dropdown-heading span { color: var(--muted); font-size: 11px; }
.notice-dropdown article { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.notice-dropdown article:last-child { border-bottom: 0; }
.notice-mark { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #657188; }
.notice-mark.is-new { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,217,255,.1); }
.notice-dropdown article > div { min-width: 0; }
.notice-dropdown article strong { display: block; font-size: 12px; }
.notice-dropdown article p { margin: 3px 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.notice-dropdown article small { color: #647088; font-size: 10px; }
.user-dropdown { width: 250px; padding: 12px; }
.user-dropdown-profile { display: flex; align-items: center; gap: 10px; padding-bottom: 11px; }
.user-dropdown-profile > div { min-width: 0; display: grid; }
.user-dropdown-profile strong, .user-dropdown-profile small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-dropdown-profile strong { font-size: 12px; }
.user-dropdown-profile small { color: var(--muted); font-size: 10px; }
.user-dropdown-meta { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.user-dropdown-meta strong { color: var(--highlight); font-size: 11px; }
.user-dropdown form { margin-top: 7px; }
.user-dropdown form button { display: flex; justify-content: space-between; width: 100%; min-height: 34px; padding: 7px 5px; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.user-dropdown form button:hover { color: var(--danger); }

.main-content { min-height: calc(100vh - 56px); padding: 22px 26px 32px; }
.page-header { gap: 18px; margin-bottom: 20px; padding-bottom: 14px; }
.page-header h1 { margin-bottom: 4px; }
.page-header p { font-size: 12px; }
.compact-page-header { margin-bottom: 14px; }
.panel { padding: 16px; }
.panel-heading { margin-bottom: 14px; }
.panel-heading h2 { font-size: 15px; }
.panel-heading p { font-size: 11px; }
.section-heading h2 { font-size: 17px; }
.section-heading p { font-size: 11px; }
label { gap: 6px; font-size: 12px; }
input, textarea, select { padding: 10px 11px; border-radius: 9px; font-size: 13px; }
textarea { line-height: 1.65; }
.metric-card { padding: 15px; }
.metric-card > span { font-size: 11px; }
.metric-card strong { font-size: 26px; }
.metric-card small { font-size: 10px; }
table { font-size: 12px; }
th { padding: 8px; font-size: 10px; }
td { padding: 10px 8px; }
.asset-card-body, .work-body { padding: 13px; }
.avatar-group-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 216px)); gap: 12px; }
.work-grid { grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; }
.asset-card-grid { gap: 12px; }
.asset-dialog { border-radius: 14px; }
.dialog-header { padding: 15px 16px 12px; }
.dialog-header h2 { font-size: 17px; }
.dialog-header p { font-size: 11px; }
.feedback-form { display: grid; gap: 13px; padding: 16px; }

.typography-section { margin: 1rem 0; }
.typography-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.typography-grid article { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 78px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(7,11,20,.34); }
.typography-grid article > div { flex: 0 0 auto; display: grid; gap: 2px; text-align: right; }
.typography-grid article strong { font-size: 11px; }
.typography-grid article small { color: var(--muted); font-size: 10px; }
.type-page-title { font-size: 28px; line-height: 36px; font-weight: 600; }
.type-section-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.type-body { font-size: 14px; line-height: 22px; }
.type-control { font-size: 13px; line-height: 20px; font-weight: 500; }
.type-support { color: var(--muted); font-size: 12px; line-height: 18px; }
.type-caption { color: var(--muted); font-size: 11px; line-height: 16px; font-weight: 600; }

.legal-page { width: min(100%, 820px); }
.legal-section { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legal-section > span { color: var(--primary); font-size: 11px; font-weight: 800; }
.legal-section h2 { margin-bottom: 4px; font-size: 14px; }
.legal-section p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.legal-updated { margin: 14px 0 0; color: var(--muted); font-size: 11px; }

/* Light theme ------------------------------------------------------------ */
html[data-theme="light"] {
  --ink: #182033;
  --muted: #667085;
  --line: #e3e8f2;
  --surface: #ffffff;
  --canvas: #f5f7fc;
  --primary: #6758e8;
  --primary-dark: #5546d3;
  --primary-soft: rgba(103,88,232,.1);
  --accent: #007f9f;
  --highlight: #11785b;
  --danger: #d13f58;
  --warning: #a96300;
  color-scheme: light;
}
html[data-theme="light"] body { color: var(--ink); background: var(--canvas); }
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] strong { color: var(--ink); }
html[data-theme="light"] .sidebar { border-color: var(--line); background: linear-gradient(180deg, #fbfbff 0%, #f8faff 100%); box-shadow: 8px 0 30px rgba(43,51,75,.045); }
html[data-theme="light"] .sidebar::after { background: linear-gradient(var(--primary), transparent); opacity: .38; }
html[data-theme="light"] .brand-mark { color: white; background: linear-gradient(145deg, #6758e8, #3f9fc1); box-shadow: 0 8px 22px rgba(103,88,232,.18), inset 0 0 0 1px rgba(255,255,255,.3); }
html[data-theme="light"] .sidebar-brand > small { color: #929bad; }
html[data-theme="light"] .nav-divider { color: #98a1b2; }
html[data-theme="light"] .nav-list > a { color: #525d70; }
html[data-theme="light"] .nav-list > a span { color: #7b879a; }
html[data-theme="light"] .nav-list > a:hover { color: #242b3a; border-color: #e9e6ff; background: #f3f1ff; }
html[data-theme="light"] .nav-list > a.active { color: #2d255f; border-color: #ddd8ff; background: linear-gradient(90deg, #eeebff, #edf8fb); box-shadow: inset 3px 0 0 var(--primary); }
html[data-theme="light"] .nav-list > a.active span { color: var(--primary); }
html[data-theme="light"] .sidebar-create-link { color: #3c346f; border-color: #dedaff; background: #f1efff; }
html[data-theme="light"] .sidebar-create-link > span { background: linear-gradient(145deg, #7466ef, var(--primary)); box-shadow: 0 4px 12px rgba(103,88,232,.18); }
html[data-theme="light"] .sidebar-tools > button:hover,
html[data-theme="light"] .sidebar-more > summary:hover,
html[data-theme="light"] .sidebar-more[open] > summary { border-color: #e1ddff; background: #f1efff; }
html[data-theme="light"] .topbar { border-color: rgba(227,232,242,.92); background: rgba(255,255,255,.88); box-shadow: 0 4px 18px rgba(43,51,75,.025); }
html[data-theme="light"] .topbar-credit { border-color: #ded9ff; background: #f2f0ff; }
html[data-theme="light"] .topbar-credit > span { color: var(--primary); }
html[data-theme="light"] .notice-popover > summary > i { border-color: #fff; }
html[data-theme="light"] .topbar-dropdown,
html[data-theme="light"] .sidebar-more-panel { border-color: var(--line); background: #fff; box-shadow: 0 20px 55px rgba(43,51,75,.13); }
html[data-theme="light"] .main-content { background: linear-gradient(180deg, #f9fafe 0%, var(--canvas) 38%, #f3f5fa 100%); }
html[data-theme="light"] .page-header { border-bottom-color: #e5e9f2; }
html[data-theme="light"] .page-header h1 { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .panel,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .detail-status,
html[data-theme="light"] .asset-card,
html[data-theme="light"] .avatar-group-card,
html[data-theme="light"] .work-card,
html[data-theme="light"] .material-card,
html[data-theme="light"] .asset-dialog { border-color: var(--line); background: #fff; box-shadow: 0 7px 22px rgba(43,51,75,.055); }
html[data-theme="light"] label { color: #354057; }
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select { color: var(--ink); border-color: #dce2ed; background: #fbfcff; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #9aa4b6; }
html[data-theme="light"] input:hover,
html[data-theme="light"] textarea:hover,
html[data-theme="light"] select:hover { border-color: #cdd5e3; }
html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(103,88,232,.11); }
html[data-theme="light"] .button-primary { background: linear-gradient(135deg, #7568ee, #6253dc); box-shadow: 0 8px 20px rgba(103,88,232,.2); }
html[data-theme="light"] .button-primary:hover { background: linear-gradient(135deg, #6d60e9, #5849cf); box-shadow: 0 10px 24px rgba(103,88,232,.27); }
html[data-theme="light"] .button-secondary { color: #3a4559; border-color: #dce2ed; background: #fff; box-shadow: 0 2px 7px rgba(43,51,75,.025); }
html[data-theme="light"] .button-secondary:hover { border-color: #d6d1fb; background: #f6f4ff; }
html[data-theme="light"] .button-ghost { color: var(--primary); }
html[data-theme="light"] .button-small { color: #fff; background: var(--primary); }
html[data-theme="light"] input:disabled,
html[data-theme="light"] textarea:disabled,
html[data-theme="light"] select:disabled { color: #8b95a7; border-color: #e3e8f2; background: #f1f3f8; }
html[data-theme="light"] .metric-card strong,
html[data-theme="light"] .metric-card.accent strong { color: var(--primary); }
html[data-theme="light"] .metric-card.accent { border-color: #dcd7ff; background: linear-gradient(145deg, #f0edff, #eef9fc); }
html[data-theme="light"] tbody tr:hover { background: #f5f3ff; }
html[data-theme="light"] .status-queued,
html[data-theme="light"] .status-submitted { color: #8b5a00; border-color: #f1dfb6; background: #fff8e8; }
html[data-theme="light"] .status-processing { color: #096f9b; border-color: #bfe9f5; background: #edfaff; }
html[data-theme="light"] .status-completed { color: #11724f; border-color: #bfe8d6; background: #ecfbf4; }
html[data-theme="light"] .status-failed { color: #bd3048; border-color: #f2c5cc; background: #fff0f2; }
html[data-theme="light"] .status-neutral { color: #5f6878; border-color: #dfe3ea; background: #f4f5f7; }
html[data-theme="light"] .ui-badge { color: #5c6575; background: #f0f2f5; }
html[data-theme="light"] .ui-badge-public { color: #11724f; background: #eaf8f1; }
html[data-theme="light"] .ui-badge-code { color: #087a96; background: #eaf8fb; }
html[data-theme="light"] .alert { color: #354057; background: #fff; }
html[data-theme="light"] .alert-info { border-color: #bfe6ef; background: #eefafd; }
html[data-theme="light"] .alert-success { border-color: #bfe3d4; background: #eef9f4; }
html[data-theme="light"] .alert-warning { border-color: #f0ddb2; background: #fff8e9; }
html[data-theme="light"] .alert-error { border-color: #efc7cf; background: #fff1f4; }
html[data-theme="light"] .dialog-header { background: rgba(255,255,255,.96); }
html[data-theme="light"] .ui-icon-button-subtle { color: #697386; background: #f0f2f7; }
html[data-theme="light"] .avatar-material-download { color: #fff; border-color: rgba(255,255,255,.28); background: rgba(15,23,42,.62); }
html[data-theme="light"] .avatar-material-download:hover { color: #fff; border-color: rgba(255,255,255,.48); background: rgba(15,23,42,.82); }
html[data-theme="light"] .button-authorized { color: #11785b; border-color: #bfe3d4; background: #eef9f4; }
html[data-theme="light"] .training-upload-zone { border-color: #d8deea; background: #f8f9fc; }
html[data-theme="light"] .training-upload-zone:hover { border-color: var(--primary); background: #f3f1ff; }
html[data-theme="light"] .training-upload-icon { color: var(--primary); border-color: #dcd7ff; background: #efedff; }
html[data-theme="light"] .voice-upload-zone.has-file { border-color: #bfe3d4; background: #f1faf6; }
html[data-theme="light"] .voice-ready-icon { color: #11724f; border-color: #cce8dc; background: #edf9f3; }
html[data-theme="light"] .voice-extract-progress { border-color: #c9e6ed; background: #effafd; }
html[data-theme="light"] .voice-upload-error { color: #bd3048; border-color: #efc7cf; background: #fff1f4; }
html[data-theme="light"] .training-video-preview { background: #e9edf5; }
html[data-theme="light"] .training-file-name { color: #fff; }
html[data-theme="light"] .upload-progress { border-color: #c9e6ed; background: #effafd; }
html[data-theme="light"] .upload-progress.is-complete { border-color: #bee3d3; background: #eef9f4; }
html[data-theme="light"] .authorization-verification-card { border-color: #dfe3ec; background: #f8f9fc; }
html[data-theme="light"] .authorization-verification-card > header > span { color: #11724f; border-color: #cde8dc; background: #edf9f3; }
html[data-theme="light"] .authorization-statement { border-color: #ddd8fa; background: linear-gradient(135deg, #f2efff, #f2fbfc); }
html[data-theme="light"] .authorization-statement > p { color: #414b60; }
html[data-theme="light"] .authorization-code { border-left-color: #dfe3ec; }
html[data-theme="light"] .authorization-code strong { color: var(--primary); text-shadow: none; }
html[data-theme="light"] .materials-empty,
html[data-theme="light"] .material-upload-form,
html[data-theme="light"] .script-preview,
html[data-theme="light"] .advanced-fields,
html[data-theme="light"] .settings-note,
html[data-theme="light"] .typography-grid article,
html[data-theme="light"] .component-note,
html[data-theme="light"] .component-switches .toggle,
html[data-theme="light"] .component-dialog-summary { color: #354057; border-color: var(--line); background: #f7f8fc; }
html[data-theme="light"] .ui-tabs { border-color: #dfe4ee; background: #f3f5f9; }
html[data-theme="light"] .ui-tab { color: #697386; }
html[data-theme="light"] .ui-tab:hover { color: #283248; background: #fff; }
html[data-theme="light"] .ui-tab.is-active { color: var(--primary); border-color: #d9d4fa; background: #fff; box-shadow: 0 2px 8px rgba(54,45,111,.07), inset 0 -2px 0 var(--primary); }
html[data-theme="light"] .component-tab-demo-panel { color: #4d576a; border-color: var(--line); background: #f8f9fc; }
html[data-theme="light"] .voice-filter-dropdown > summary:hover { border-color: #e1e5ed; background: #f6f7fa; }
html[data-theme="light"] .voice-filter-dropdown[open] > summary,
html[data-theme="light"] .voice-filter-dropdown.has-value > summary { color: var(--primary); border-color: #e2defb; background: #f3f1ff; }
html[data-theme="light"] .voice-filter-dropdown-menu { border-color: #dfe4ee; background: #fff; box-shadow: 0 12px 32px rgba(43,51,75,.14); }
html[data-theme="light"] .voice-filter-option:hover { color: #283248; background: #f6f7fa; }
html[data-theme="light"] .voice-filter-option.is-active { color: #283248; background: #f3f1ff; }
html[data-theme="light"] .voice-filter-search input { color: #283248; border-color: #dfe4ee; background: #fff; }
html[data-theme="light"] .voice-filter-search input::placeholder { color: #a6aebe; }
html[data-theme="light"] .voice-filter-search input:focus { border-color: #beb6f5; background: #fff; box-shadow: 0 0 0 3px rgba(103,88,232,.09); }
html[data-theme="light"] .voice-filter-reset { color: #354057; border-color: #dfe4ee; background: #f3f4f7; }
html[data-theme="light"] .voice-filter-reset:hover:not(:disabled) { border-color: #d3d7e2; background: #eaecf1; }
html[data-theme="light"] .voice-filter-reset:disabled { color: #9aa3b3; }
html[data-theme="light"] .voice-filter-empty .ui-icon { color: #a6afbf; }
html[data-theme="light"] .voice-asset-card { border-color: var(--line); background: #fff; box-shadow: 0 7px 20px rgba(43,51,75,.055); }
html[data-theme="light"] .voice-asset-card:hover { border-color: #d7d2fb; box-shadow: 0 10px 24px rgba(58,48,116,.08); }
html[data-theme="light"] .voice-card-play-icon { color: var(--primary); border-color: #ddd8fa; background: #f0edff; }
html[data-theme="light"] .voice-card-trigger:not(:disabled):hover .voice-card-play-icon { border-color: #c8c0f7; background: #e9e5ff; }
html[data-theme="light"] .voice-waveform i { background: #9ba5b8; }
html[data-theme="light"] .voice-card-footer { border-color: var(--line); background: #f8f9fc; }
html[data-theme="light"] .voice-clone-button { color: #5546d3; border-color: #ddd7ff; background: #f0edff; }
html[data-theme="light"] .voice-clone-button:hover:not(:disabled) { color: #fff; border-color: var(--primary); background: var(--primary); }
html[data-theme="light"] .voice-asset-card.is-playing { border-color: #bcb4f5; box-shadow: 0 10px 26px rgba(103,88,232,.1); }
html[data-theme="light"] .voice-asset-card.is-playing .voice-card-play-icon { color: #fff; border-color: var(--primary); background: var(--primary); }
html[data-theme="light"] .voice-asset-card.is-playing .voice-waveform i { background: var(--primary); }
html[data-theme="light"] .voice-asset-card.is-unavailable:hover { border-color: var(--line); box-shadow: 0 7px 20px rgba(43,51,75,.055); }
html[data-theme="light"] .authorization-review-summary { border-color: var(--line); background: #f8f9fc; }
html[data-theme="light"] .authorization-review-cover { background: #10131a; box-shadow: 0 4px 12px rgba(43,51,75,.08); }
html[data-theme="light"] .authorization-review-code { color: var(--primary); border-color: #d9d4fa; background: #f0edff; }
html[data-theme="light"] .authorization-code-missing { border-color: var(--line); background: #f5f6f9; }
html[data-theme="light"] .authorization-review-reason { color: #bd3048; }
html[data-theme="light"] .authorization-review-actions .button-danger { color: #bd3048; border-color: #efc7cf; background: #fff1f4; }
html[data-theme="light"] .authorization-review-actions .button-danger:hover { border-color: #e9adb8; background: #ffe9ed; }
html[data-theme="light"] .configured-mark { color: #11785b; }
html[data-theme="light"] .secret-clear-pill { color: #bd3048; border-color: #efc7cf; background: #fff1f4; }
html[data-theme="light"] .secret-clear-pill:hover { border-color: #e9adb8; background: #ffe9ed; }
html[data-theme="light"] .secret-clear-input:checked + .secret-clear-pill { color: #97620a; border-color: #efd59d; background: #fff7e5; }
html[data-theme="light"] .choice span { border-color: #dce2ed; background: #fbfcff; }
html[data-theme="light"] .choice input:checked + span { border-color: #bdb5f8; background: #f0edff; box-shadow: 0 0 0 2px rgba(103,88,232,.07); }
html[data-theme="light"] .color-token { border-color: var(--line); background: #fff; }
html[data-theme="light"] .color-chip { border-color: var(--line); }
html[data-theme="light"] .palette-heading span { border-color: #dfe3ee; background: #f7f8fc; }
html[data-theme="light"] .avatar-group-cover:not(.is-video) { color: var(--primary); background: linear-gradient(145deg, #efedff, #eaf7fa); }
html[data-theme="light"] .avatar-group-card:hover { border-color: #d7d2fb; box-shadow: 0 9px 22px rgba(58,48,116,.075); }
html[data-theme="light"] .avatar-material-overlay strong { color: #fff; -webkit-text-fill-color: #fff; }
html[data-theme="light"] .video-work-card-meta strong { color: #fff; -webkit-text-fill-color: #fff; }
html[data-theme="light"] .ui-toast { color: #182033; border-color: #dfe5ef; background: rgba(255,255,255,.97); box-shadow: 0 12px 34px rgba(38,48,73,.16); }
html[data-theme="light"] .ui-toast-success { border-color: #bfe3d4; }
html[data-theme="light"] .ui-toast-warning { border-color: #efd9aa; }
html[data-theme="light"] .ui-toast-error { border-color: #efc7cf; }
html[data-theme="light"] .user-dropdown-meta strong { color: #11724f; }
html[data-theme="light"] .copy-card > p { color: #4d5666; }
html[data-theme="light"] .guest-card-wrap { background: linear-gradient(145deg, #f8f9fd, #f1f4fa); }
html[data-theme="light"] .auth-card { border-color: var(--line); background: rgba(255,255,255,.92); box-shadow: 0 18px 50px rgba(43,51,75,.09); }

.avatar-group-card,
.material-card,
html[data-theme="light"] .avatar-group-card,
html[data-theme="light"] .material-card { border: 0; background: transparent; box-shadow: none; }
.avatar-group-card:hover,
.material-card:hover,
html[data-theme="light"] .avatar-group-card:hover,
html[data-theme="light"] .material-card:hover { border-color: transparent; box-shadow: none; }

@media (max-width: 1180px) {
  .avatar-group-grid { grid-template-columns: repeat(auto-fill, minmax(188px, 216px)); }
  .work-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
  .audio-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .typography-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; width: auto; height: auto; padding: 9px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar-brand { padding-bottom: 8px; }
  .sidebar-brand > small, .sidebar::after { display: none; }
  .nav-list { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .nav-list > a { flex: 0 0 auto; white-space: nowrap; }
  .nav-divider { display: none; }
  .sidebar-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
  .sidebar-create-link { width: min(240px, 60vw); }
  .sidebar-tools { grid-template-columns: repeat(3, 34px); gap: 4px; }
  .sidebar-more-panel { right: 0; left: auto; }
  .topbar { top: 0; padding: 0 14px; }
  .main-content { padding: 18px 14px 26px; }
  .avatar-group-grid { grid-template-columns: repeat(2, minmax(0, 216px)); }
  .work-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .audio-work-detail-grid { grid-template-columns: 1fr; }
  .audio-work-script-panel { grid-column: auto; }
}

@media (max-width: 620px) {
  .topbar-context, .topbar-label { display: none; }
  .topbar { justify-content: flex-end; min-height: 50px; }
  .topbar-dropdown { position: fixed; top: 58px; right: 8px; left: 8px; width: auto; }
  .topbar-credit { padding-inline: 8px; }
  .page-header { align-items: flex-start; }
  .avatar-group-grid { grid-template-columns: minmax(0, 280px); justify-content: center; }
  .work-grid, .typography-grid { grid-template-columns: 1fr; }
  .video-work-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 224px)); justify-content: center; }
  .audio-work-grid { grid-template-columns: 1fr; }
  .sidebar-create-link { width: auto; flex: 1; }
  .sidebar-more-panel { position: fixed; right: 8px; bottom: 8px; left: 8px; width: auto; }
  .training-video-form { padding: 12px; }
  .training-upload-zone { min-height: 180px; padding: 18px; }
  .training-upload-zone { padding: 0; }
  .training-upload-picker { min-height: 180px; padding: 18px; }
  .voice-filter-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 8px; }
  .voice-filter-groups { width: 100%; }
  .voice-filter-actions { width: 100%; }
  .voice-filter-search { flex: 1; width: auto; }
  .voice-upload-ready { min-height: 178px; grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 9px; padding: 16px; }
  .voice-upload-ready .ui-badge { grid-column: 2; justify-self: start; }
  .voice-ready-icon { width: 42px; height: 42px; }
  .training-preview-meta { right: 15px; bottom: 15px; left: 15px; }
  .media-playback-stage { min-height: 210px; padding: 8px; }
  .authorization-statement { grid-template-columns: 1fr; gap: 12px; }
  .authorization-code { padding: 10px 0 0; border-top: 1px solid rgba(148,163,184,.18); border-left: 0; }
}

.video-work-card.is-generating .video-work-card-media { filter: saturate(.86) brightness(.76); }
.video-generating-color { position: absolute; inset: 0; background: linear-gradient(125deg,rgba(91,73,225,.5),rgba(51,194,180,.24),rgba(213,86,208,.4),rgba(67,122,232,.44)); background-size: 260% 260%; animation: video-generating-shift 4s ease infinite; mix-blend-mode: screen; }
.video-generating-color::after { position: absolute; inset: 0; content: ''; background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 34%),linear-gradient(180deg,rgba(6,10,20,.05),rgba(6,10,20,.65)); }
@keyframes video-generating-shift { 0%,100% { background-position: 0 45%; } 50% { background-position: 100% 55%; } }
.video-generating-status { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; color: #fff; text-align: center; }
.video-generating-status i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(16,20,36,.3); backdrop-filter: blur(8px); animation: video-generating-pulse 1.8s ease-in-out infinite; }
.video-generating-status strong { font-size: 12px; }
.video-generating-status small { max-width: 150px; margin-top: 5px; color: rgba(255,255,255,.76); font-size: 8px; line-height: 1.55; }
@keyframes video-generating-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255,255,255,.07); } }
.video-work-card.is-generating .video-work-card-meta { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  .ui-toast, .ui-toast-progress, .upload-progress-spinner, .upload-progress-track i, .voice-extract-spinner { animation: none !important; transition: none !important; }
}

@media (hover: none) {
  .avatar-card-hover-actions { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%); }
}

/* Workbench editor ------------------------------------------------------- */
.main-content.workbench-main { height: calc(100vh - 56px); min-height: 0; overflow: hidden; padding: 0; }
html[data-theme="light"] .main-content.workbench-main { background: #f5f6fa; }
.dashboard-blank-page { width: 100%; height: 100%; min-height: calc(100vh - 56px); }
.workbench-editor { height: 100%; min-height: 620px; display: grid; grid-template-rows: 48px minmax(0, 1fr) 154px; overflow: hidden; color: var(--ink); background: #0b111d; }
.workbench-editor [hidden] { display: none !important; }
.workbench-editor button { border: 0; }
.workbench-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 0 14px 0 16px; border-bottom: 1px solid var(--line); background: rgba(16,24,39,.98); }
.workbench-project-name { min-width: 0; display: flex; align-items: center; gap: 9px; }
.workbench-project-name > div { min-width: 0; display: grid; }
.workbench-project-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.workbench-project-name small { color: var(--muted); font-size: 9px; }
.workbench-project-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #7769f2, #5e50d7); }
.workbench-toolbar-center { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.workbench-toolbar-center span { display: inline-flex; align-items: center; gap: 5px; }
.workbench-toolbar-center b { color: var(--ink); font-size: 10px; }
.workbench-toolbar-center i { width: 1px; height: 12px; background: var(--line); }
.workbench-toolbar-actions { display: flex; align-items: center; gap: 7px; }
.workbench-toolbar-actions button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 11px; border-radius: 8px; font-size: 11px; font-weight: 750; }
.workbench-secondary-button { color: var(--ink); border: 1px solid var(--line) !important; background: rgba(148,163,184,.07); }
.workbench-primary-button { color: #fff; background: linear-gradient(135deg, #7869ef, #6252dd); box-shadow: 0 7px 18px rgba(108,92,231,.22); }

.workbench-canvas { min-height: 0; display: grid; grid-template-columns: 268px minmax(360px, 1fr) 292px; }
.workbench-library, .workbench-inspector { min-width: 0; min-height: 0; overflow: hidden; border-color: var(--line); background: #101827; }
.workbench-library { display: grid; grid-template-rows: 49px 42px minmax(0, 1fr); border-right: 1px solid var(--line); }
.workbench-inspector { display: grid; grid-template-rows: 49px minmax(0, 1fr); border-left: 1px solid var(--line); }
.workbench-panel-tabs { display: flex; align-items: stretch; gap: 3px; padding: 7px 10px 0; border-bottom: 1px solid var(--line); }
.workbench-panel-tabs button { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px 9px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 720; }
.workbench-panel-tabs button::after { position: absolute; right: 17px; bottom: -1px; left: 17px; height: 2px; border-radius: 2px; background: transparent; content: ""; }
.workbench-panel-tabs button.is-active { color: var(--ink); }
.workbench-panel-tabs button.is-active::after { background: var(--primary); }
.workbench-library-search { display: flex; align-items: center; gap: 7px; margin: 7px 10px 0; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(7,11,20,.42); }
.workbench-library-search input { height: 32px; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; font-size: 11px; }
.workbench-library-search input:focus { border: 0; background: transparent; box-shadow: none; }
.workbench-library-panel { min-height: 0; overflow: auto; padding: 13px 10px 18px; scrollbar-width: thin; }
.workbench-library-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.workbench-library-heading > div { display: grid; gap: 2px; }
.workbench-library-heading strong { font-size: 12px; }
.workbench-library-heading small { color: var(--muted); font-size: 9px; }
.workbench-library-heading a { padding: 4px 7px; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 700; }
.workbench-avatar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 9px; }
.workbench-avatar-card { min-width: 0; padding: 0; color: var(--ink); background: transparent; text-align: left; }
.workbench-avatar-visual { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 6px; border: 2px solid transparent; border-radius: 10px; background: linear-gradient(145deg, #1d2940, #141d30); transition: border-color .16s, box-shadow .16s, transform .16s; }
.workbench-avatar-card:hover .workbench-avatar-visual { transform: translateY(-1px); border-color: rgba(108,92,231,.45); }
.workbench-avatar-card.is-selected .workbench-avatar-visual { border-color: #7969ef; box-shadow: 0 0 0 3px rgba(108,92,231,.13); }
.workbench-avatar-visual img { width: 100%; height: 100%; object-fit: cover; }
.workbench-avatar-fallback { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 50%; color: #8d83e8; background: rgba(108,92,231,.14); }
.workbench-avatar-visual > i { position: absolute; right: 5px; bottom: 5px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #fff; background: rgba(12,17,29,.72); opacity: 0; transform: scale(.86); transition: opacity .16s, transform .16s; }
.workbench-avatar-card:hover .workbench-avatar-visual > i, .workbench-avatar-card.is-selected .workbench-avatar-visual > i { opacity: 1; transform: scale(1); }
.workbench-avatar-card.is-selected .workbench-avatar-visual > i { background: var(--primary); }
.workbench-avatar-card > strong, .workbench-avatar-card > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workbench-avatar-card > strong { padding: 0 2px; font-size: 11px; }
.workbench-avatar-card > small { padding: 2px 2px 0; color: var(--muted); font-size: 9px; }
.workbench-mini-empty { min-height: 220px; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 18px; color: var(--muted); text-align: center; }
.workbench-mini-empty strong { font-size: 12px; }
.workbench-mini-empty span { max-width: 190px; font-size: 10px; line-height: 1.6; }
.workbench-mini-empty a { margin-top: 3px; padding: 6px 9px; border-radius: 7px; color: #fff; background: var(--primary); font-size: 10px; font-weight: 700; }
.workbench-subtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-bottom: 10px; padding: 3px; border-radius: 8px; background: rgba(148,163,184,.07); }
.workbench-subtabs button { padding: 6px 4px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 700; }
.workbench-subtabs button span { margin-left: 2px; color: #758198; font-size: 9px; }
.workbench-subtabs button.is-active { color: var(--ink); background: #1b263a; box-shadow: 0 2px 7px rgba(0,0,0,.16); }
.workbench-audio-list { display: grid; gap: 7px; }
.workbench-audio-card { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line) !important; border-radius: 9px; color: var(--ink); background: rgba(7,11,20,.33); text-align: left; transition: border-color .16s, background .16s; }
.workbench-audio-card:hover { border-color: #4a4b83 !important; background: rgba(108,92,231,.08); }
.workbench-audio-card.is-selected { border-color: #7667ee !important; background: rgba(108,92,231,.13); box-shadow: 0 0 0 2px rgba(108,92,231,.08); }
.workbench-audio-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #9b91ef; background: linear-gradient(145deg, rgba(108,92,231,.2), rgba(0,217,255,.08)); }
.workbench-audio-copy { min-width: 0; display: grid; gap: 2px; }
.workbench-audio-copy strong, .workbench-audio-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workbench-audio-copy strong { font-size: 10px; }
.workbench-audio-copy small { color: var(--muted); font-size: 8px; }
.workbench-audio-add { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); background: rgba(148,163,184,.08); }
.workbench-audio-card.is-selected .workbench-audio-add { color: #fff; background: var(--primary); }
.workbench-audio-card.is-unavailable { opacity: .58; }
.workbench-audio-card.is-unavailable:hover { border-color: var(--line) !important; background: rgba(7,11,20,.33); }
.workbench-audio-card.is-unavailable .workbench-audio-add { color: #8993a5; background: rgba(148,163,184,.05); }
.workbench-text-actions button:disabled { cursor: wait; opacity: .68; }

.workbench-stage-area { min-width: 0; min-height: 0; display: grid; grid-template-rows: 36px minmax(0, 1fr) 28px; overflow: hidden; background: radial-gradient(circle at 50% 42%, rgba(108,92,231,.08), transparent 33%), #0a0f19; }
.workbench-stage-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; color: var(--muted); font-size: 9px; }
.workbench-stage-toolbar b { color: var(--ink); font-size: 9px; }
.workbench-stage-toolbar > div { display: flex; gap: 4px; }
.workbench-stage-toolbar button { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--muted); background: rgba(148,163,184,.06); }
.workbench-stage-shell { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 10px 28px; }
.workbench-stage { position: relative; height: min(100%, 490px); max-width: 84%; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid rgba(148,163,184,.18); border-radius: 3px; background: #c9ced7; box-shadow: 0 22px 58px rgba(0,0,0,.28); transition: aspect-ratio .2s, width .2s, height .2s; }
.workbench-stage.is-landscape { width: min(86%, 680px); height: auto; max-height: 84%; aspect-ratio: 16 / 9; }
.workbench-stage > img, .workbench-stage > video { width: 100%; height: 100%; object-fit: cover; }
.workbench-stage-empty { height: 100%; display: grid; align-content: center; justify-items: center; gap: 7px; padding: 18px; color: #667085; text-align: center; background: linear-gradient(160deg, #e2e6ed, #cbd1da); }
.workbench-stage-empty > span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(103,88,232,.2); border-radius: 18px; color: #6758e8; background: rgba(255,255,255,.55); }
.workbench-stage-empty strong { color: #333b4c; font-size: 12px; }
.workbench-stage-empty small { color: #747f91; font-size: 9px; }
.workbench-stage-overlay { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 2px; padding: 28px 12px 10px; color: #fff; background: linear-gradient(transparent, rgba(4,8,15,.76)); }
.workbench-stage-overlay span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 750; }
.workbench-stage-overlay small { overflow: hidden; color: rgba(255,255,255,.72); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.workbench-stage-play { position: absolute; bottom: 20px; left: 50%; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 50%; color: #fff; background: rgba(14,20,32,.76); box-shadow: 0 8px 24px rgba(0,0,0,.26); transform: translateX(-50%); backdrop-filter: blur(10px); }
.workbench-stage-status { overflow: hidden; padding: 4px 14px; color: var(--muted); font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.workbench-inspector-tabs { padding-inline: 18px; }
.workbench-inspector-panel { min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; }
.workbench-selected-avatar { display: grid; grid-template-columns: 43px minmax(0, 1fr); align-items: center; gap: 9px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(7,11,20,.35); }
.workbench-selected-avatar > span { display: grid; place-items: center; width: 43px; height: 43px; overflow: hidden; border-radius: 8px; color: #9a90eb; background: rgba(108,92,231,.12) center / cover no-repeat; }
.workbench-selected-avatar > span.has-image { color: transparent; }
.workbench-selected-avatar > div { min-width: 0; display: grid; gap: 3px; }
.workbench-selected-avatar small { color: var(--muted); font-size: 9px; }
.workbench-selected-avatar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.workbench-fieldset { min-width: 0; margin: 15px 0 0; padding: 0; border: 0; }
.workbench-fieldset legend { width: 100%; margin-bottom: 7px; color: var(--ink); font-size: 10px; font-weight: 720; }
.workbench-fieldset legend span { float: right; color: var(--muted); font-size: 8px; font-weight: 500; }
.workbench-segmented { display: flex; padding: 3px; border-radius: 8px; background: rgba(148,163,184,.07); }
.workbench-segmented button { flex: 1; min-height: 29px; border-radius: 6px; color: var(--muted); background: transparent; font-size: 9px; font-weight: 650; }
.workbench-segmented button.is-active { color: var(--ink); background: #202b3d; box-shadow: 0 2px 7px rgba(0,0,0,.16); }
.workbench-choice-stack { display: grid; gap: 6px; }
.workbench-choice-stack button { display: flex; align-items: center; justify-content: space-between; padding: 8px 9px; border: 1px solid var(--line) !important; border-radius: 8px; color: var(--ink); background: rgba(7,11,20,.28); text-align: left; }
.workbench-choice-stack button > span { display: grid; gap: 1px; }
.workbench-choice-stack button strong { font-size: 9px; }
.workbench-choice-stack button small { color: var(--muted); font-size: 8px; }
.workbench-choice-stack button > i { width: 11px; height: 11px; border: 1px solid #536077; border-radius: 50%; }
.workbench-choice-stack button.is-active { border-color: #6f61e6 !important; background: rgba(108,92,231,.1); }
.workbench-choice-stack button.is-active > i { border: 3px solid var(--primary); background: #fff; }
.workbench-range-field { display: grid; gap: 8px; margin-top: 15px; color: var(--ink); }
.workbench-range-field > span { display: flex; justify-content: space-between; }
.workbench-range-field strong, .workbench-range-field output { font-size: 10px; }
.workbench-range-field output { color: var(--muted); }
.workbench-range-field input { height: 3px; padding: 0; border: 0; accent-color: var(--primary); }
.workbench-api-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 16px; padding: 9px; border-radius: 8px; color: #b5aef4; background: rgba(108,92,231,.1); font-size: 8px; line-height: 1.55; }
.workbench-text-panel { display: grid; grid-template-rows: minmax(200px, 1fr) auto auto auto auto; gap: 10px; }
.workbench-text-editor { min-height: 240px; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border-radius: 9px; background: rgba(7,11,20,.38); }
.workbench-text-editor textarea { min-height: 0; resize: none; padding: 12px; border: 0; border-radius: 0; color: var(--ink); background: transparent; box-shadow: none; font-size: 11px; line-height: 1.7; }
.workbench-text-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px; }
.workbench-text-footer > div { display: flex; gap: 4px; }
.workbench-text-footer button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--muted); background: rgba(148,163,184,.08); font-size: 8px; }
.workbench-text-footer > span { color: var(--muted); font-size: 8px; white-space: nowrap; }
.workbench-text-footer b { color: var(--muted); font-weight: 500; }
.workbench-voice-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; color: var(--muted); background: rgba(148,163,184,.07); text-align: left; }
.workbench-voice-summary span { font-size: 9px; }
.workbench-voice-summary strong { overflow: hidden; color: var(--ink); font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.workbench-subtitle-toggle { grid-template-columns: minmax(0, 1fr) 34px; align-items: center; gap: 9px; color: var(--ink); }
.workbench-subtitle-toggle > span { display: grid; gap: 2px; }
.workbench-subtitle-toggle strong { font-size: 10px; }
.workbench-subtitle-toggle small { font-size: 8px; }
.workbench-subtitle-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.workbench-subtitle-toggle > i { position: relative; width: 34px; height: 19px; border-radius: 999px; background: #414b5e; }
.workbench-subtitle-toggle > i::after { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .16s; content: ""; }
.workbench-subtitle-toggle input:checked + i { background: var(--primary); }
.workbench-subtitle-toggle input:checked + i::after { transform: translateX(15px); }
.workbench-text-actions { display: grid; grid-template-columns: 1.15fr .85fr; gap: 7px; }
.workbench-text-actions button { min-height: 34px; border-radius: 7px; color: var(--ink); background: rgba(148,163,184,.09); font-size: 9px; font-weight: 720; }
.workbench-text-actions .workbench-dark-button { display: flex; align-items: center; justify-content: center; gap: 5px; color: #fff; background: #090e17; }
.workbench-generation-feedback { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 6px; padding: 8px 9px; border: 1px solid rgba(108,92,231,.24); border-radius: 8px; color: #b9b3f3; background: rgba(108,92,231,.08); font-size: 9px; line-height: 1.55; }
.workbench-generation-feedback[hidden] { display: none !important; }
.workbench-generation-feedback p { margin: 0; }
.workbench-generation-feedback[data-tone="error"] { border-color: rgba(255,107,129,.28); color: #ff9aaa; background: rgba(255,107,129,.08); }
.workbench-generation-feedback[data-tone="success"] { border-color: rgba(69,209,158,.28); color: #76dfb9; background: rgba(69,209,158,.08); }
.workbench-generation-feedback[data-tone="loading"] .ui-icon { animation: voice-clone-spin 1.4s linear infinite; }

.workbench-timeline { min-width: 0; display: grid; grid-template-rows: 34px minmax(0, 1fr); border-top: 1px solid var(--line); background: #101827; }
.workbench-timeline-header { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); }
.workbench-timeline-header > div { display: flex; align-items: center; gap: 8px; }
.workbench-timeline-header strong { font-size: 10px; }
.workbench-timeline-header span { color: var(--muted); font-size: 8px; }
.workbench-timeline-header button { width: 22px; height: 22px; border-radius: 6px; color: var(--muted); background: rgba(148,163,184,.07); font-size: 12px; }
.workbench-timeline-header input { width: 70px; height: 3px; padding: 0; border: 0; accent-color: var(--primary); }
.workbench-timeline-body { min-height: 0; display: grid; grid-template-columns: 68px minmax(0, 1fr); }
.workbench-track-labels { display: grid; grid-template-rows: 22px 39px 39px; padding-top: 1px; border-right: 1px solid var(--line); }
.workbench-track-labels span { display: flex; align-items: center; gap: 5px; padding-left: 10px; border-bottom: 1px solid rgba(148,163,184,.07); color: var(--muted); font-size: 9px; }
.workbench-track-labels span:first-child { grid-row: 2; }
.workbench-track-labels span:last-child { grid-row: 3; }
.workbench-tracks { position: relative; min-width: 0; display: grid; grid-template-rows: 22px 39px 39px; overflow: hidden; }
.workbench-ruler { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-bottom: 1px solid rgba(148,163,184,.07); color: #657086; font-size: 7px; }
.workbench-track { position: relative; min-width: 0; display: flex; align-items: center; padding: 3px 8px; border-bottom: 1px solid rgba(148,163,184,.07); background-image: linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px); background-size: 10% 100%; }
.workbench-track-placeholder { color: #566176; font-size: 8px; }
.workbench-timeline-clip { position: relative; width: min(48%, 540px); height: 30px; display: flex; align-items: center; gap: 7px; overflow: hidden; padding: 3px 28px 3px 5px; border: 1px solid #7b6cf0; border-radius: 6px; color: #e9e7ff; background: linear-gradient(90deg, rgba(108,92,231,.35), rgba(108,92,231,.16)); }
.workbench-timeline-clip > span { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border-radius: 4px; color: #c8c3fa; background: rgba(0,0,0,.15) center / cover no-repeat; }
.workbench-timeline-clip > span.has-image { color: transparent; }
.workbench-timeline-clip strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-timeline-clip small { margin-left: auto; color: #b8b3e9; font-size: 7px; }
.workbench-timeline-clip > button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; color: #dcd8ff; background: rgba(0,0,0,.16); }
.workbench-audio-track .workbench-timeline-clip { border-color: #547ae4; color: #e2ecff; background: linear-gradient(90deg, rgba(83,121,225,.4), rgba(91,79,212,.2)); }
.workbench-audio-track .workbench-timeline-clip > span { color: #d9e4ff; }
.workbench-waveform { min-width: 50px; flex: 1; height: 15px; opacity: .42; background: repeating-linear-gradient(90deg, #d9e4ff 0 1px, transparent 1px 4px); mask-image: linear-gradient(180deg, transparent 5%, #000 35%, #000 65%, transparent 95%); }
.workbench-playhead { position: absolute; z-index: 4; top: 17px; bottom: 0; left: 22%; width: 1px; pointer-events: none; background: #ff6c74; }
.workbench-playhead i { position: absolute; top: -3px; left: -4px; width: 9px; height: 7px; clip-path: polygon(0 0, 100% 0, 50% 100%); background: #ff6c74; }

html[data-theme="light"] .workbench-editor { color: #1d2535; background: #f5f6fa; }
html[data-theme="light"] .workbench-toolbar,
html[data-theme="light"] .workbench-library,
html[data-theme="light"] .workbench-inspector,
html[data-theme="light"] .workbench-timeline { background: #fff; }
html[data-theme="light"] .workbench-library-search,
html[data-theme="light"] .workbench-audio-card,
html[data-theme="light"] .workbench-selected-avatar,
html[data-theme="light"] .workbench-choice-stack button,
html[data-theme="light"] .workbench-text-editor { background: #f6f7fa; }
html[data-theme="light"] .workbench-subtabs,
html[data-theme="light"] .workbench-segmented,
html[data-theme="light"] .workbench-voice-summary { background: #f2f3f7; }
html[data-theme="light"] .workbench-subtabs button.is-active,
html[data-theme="light"] .workbench-segmented button.is-active { background: #fff; box-shadow: 0 2px 7px rgba(43,51,75,.08); }
html[data-theme="light"] .workbench-avatar-visual { background: linear-gradient(145deg, #edf0f7, #e5e8f1); }
html[data-theme="light"] .workbench-audio-card:hover { border-color: #d9d4fa !important; background: #f5f3ff; }
html[data-theme="light"] .workbench-audio-card.is-selected { border-color: #7667ee !important; background: #f1efff; }
html[data-theme="light"] .workbench-stage-area { background: radial-gradient(circle at 50% 42%, rgba(108,92,231,.07), transparent 33%), #f1f2f6; }
html[data-theme="light"] .workbench-stage { border-color: #dfe3ec; box-shadow: 0 22px 52px rgba(43,51,75,.13); }
html[data-theme="light"] .workbench-choice-stack button.is-active { background: #f3f1ff; }
html[data-theme="light"] .workbench-text-actions .workbench-dark-button { background: #171c26; }
html[data-theme="light"] .workbench-track { background-color: #fafbfc; }
html[data-theme="light"] .workbench-timeline-clip strong { color: #fff; }

@media (max-width: 1250px) {
  .workbench-canvas { grid-template-columns: 236px minmax(330px, 1fr) 270px; }
  .workbench-avatar-grid { gap: 9px 7px; }
}

@media (max-width: 1050px) {
  .main-content.workbench-main { height: auto; min-height: calc(100vh - 56px); overflow: visible; }
  .workbench-editor { min-height: 920px; height: auto; grid-template-rows: 48px 720px 154px; }
  .workbench-canvas { grid-template-columns: 220px minmax(300px, 1fr) 250px; }
  .workbench-toolbar-center { display: none; }
}

@media (max-width: 900px) {
  .main-content.workbench-main { padding: 0; }
  .workbench-editor { min-height: 1400px; grid-template-rows: 48px auto 154px; }
  .workbench-canvas { grid-template-columns: 1fr; grid-template-rows: 360px 520px 430px; }
  .workbench-library { border-right: 0; border-bottom: 1px solid var(--line); }
  .workbench-inspector { border-top: 1px solid var(--line); border-left: 0; }
  .workbench-avatar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .workbench-project-name small { display: none; }
  .workbench-toolbar-actions .workbench-secondary-button { display: none; }
  .workbench-toolbar-actions button { padding-inline: 8px; }
  .workbench-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workbench-timeline-body { grid-template-columns: 52px minmax(0, 1fr); }
  .workbench-track-labels span { padding-left: 6px; }
  .workbench-timeline-header span { display: none; }
  .workbench-timeline-clip { width: 72%; }
}

/* Product typography baseline ------------------------------------------ */
body { font-size: var(--type-body); line-height: 1.57; }
.page-header h1 { font-size: var(--type-page-title); line-height: 36px; }
.page-header p,
.section-heading p,
.panel-heading p,
.dialog-header p { font-size: var(--type-support); line-height: 18px; }
.section-heading h2,
.panel-heading h2 { font-size: var(--type-section-title); line-height: 24px; }
.dialog-header h2 { font-size: 18px; line-height: 26px; }
.eyebrow { font-size: var(--type-caption); line-height: 16px; }

.nav-list > a { font-size: var(--type-body); line-height: 20px; }
.nav-divider,
.sidebar-brand > small { font-size: var(--type-micro); line-height: 14px; }
.sidebar-create-link,
.topbar-context,
.topbar-credit,
.topbar-popover > summary { font-size: var(--type-control); line-height: 20px; }
.topbar-credit > span,
.topbar-credit strong,
.topbar-credit small { font-size: var(--type-support); }
.notice-dropdown article strong,
.user-dropdown-profile strong,
.user-dropdown form button { font-size: var(--type-control); }
.notice-dropdown article p,
.user-dropdown-meta { font-size: var(--type-support); }
.notice-dropdown article small,
.user-dropdown-profile small { font-size: var(--type-caption); }

label { font-size: var(--type-control); line-height: 20px; }
input,
textarea,
select,
.button { font-size: var(--type-control); line-height: 20px; }
.button-small { font-size: var(--type-support); }
.ui-tab { font-size: var(--type-control); line-height: 20px; }
.status,
.ui-badge { font-size: var(--type-caption); line-height: 16px; }
.alert,
.notice,
.settings-note,
.inline-error { font-size: var(--type-control); line-height: 20px; }
.configured-mark,
.secret-field-hint,
.secret-clear-pill { font-size: var(--type-caption); line-height: 16px; }

table { font-size: var(--type-control); line-height: 20px; }
th { font-size: var(--type-support); line-height: 18px; }
td small,
.metric-card > span,
.authorization-review-summary > span,
.authorization-review-time { font-size: var(--type-support); line-height: 18px; }
.metric-card small,
.user-row small,
.transaction-row small,
.authorization-review-summary small,
.authorization-review-processed small,
.authorization-review-reason,
.authorization-review-cover-placeholder small { font-size: var(--type-caption); line-height: 16px; }
.submit-card p,
.asset-card-body > small,
.upload-hint > span,
.copy-card-head small,
.active-job-row small,
.work-body > p { font-size: var(--type-support); line-height: 18px; }
.asset-card-body code,
.work-cover small { font-size: var(--type-caption); line-height: 16px; }

.component-version,
.component-index,
.palette-heading span,
.color-token code,
.component-note,
.upload-progress-copy small,
.authorization-code span,
.icon-sample code { font-size: var(--type-caption); line-height: 16px; }

.voice-filter-dropdown > summary,
.voice-filter-option,
.voice-filter-search input,
.voice-filter-reset { font-size: var(--type-control); line-height: 20px; }
.voice-card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 300px)); }
.voice-filter-empty strong,
.voice-card-heading strong { font-size: var(--type-body); line-height: 20px; }
.voice-filter-empty span,
.voice-card-content > small,
.voice-card-play-hint { font-size: var(--type-caption); line-height: 16px; }
.voice-clone-button,
.voice-card-manage-button { font-size: var(--type-caption); line-height: 16px; }
.voice-ready-copy strong,
.voice-upload-picker > strong { font-size: var(--type-body); line-height: 22px; }
.voice-ready-copy small,
.voice-extract-progress strong,
.voice-extract-progress > span:not(.voice-extract-spinner),
.voice-upload-error { font-size: var(--type-support); line-height: 18px; }
.voice-extract-progress small { font-size: var(--type-caption); line-height: 16px; }

.avatar-card-overlay h2,
.avatar-material-overlay strong,
.video-work-card-meta strong,
.audio-work-card-copy strong { font-size: var(--type-body); line-height: 20px; }
.avatar-card-hover-actions .avatar-card-action,
.audio-work-card-action { font-size: var(--type-support); line-height: 18px; }
.avatar-rejection-reason,
.avatar-material-overlay small,
.video-work-card-meta time,
.audio-work-card-copy small { font-size: var(--type-caption); line-height: 16px; }
.audio-work-card-copy p { font-size: var(--type-control); line-height: 20px; }

/* The workbench stays dense, but no readable copy falls below 10px. */
.workbench-panel-tabs button,
.workbench-toolbar-actions button { font-size: var(--type-control); line-height: 20px; }
.workbench-library-search input,
.workbench-library-heading strong,
.workbench-avatar-card > strong,
.workbench-mini-empty strong,
.workbench-audio-copy strong,
.workbench-stage-empty strong,
.workbench-stage-overlay span,
.workbench-selected-avatar strong,
.workbench-subtitle-toggle strong,
.workbench-text-actions button,
.workbench-timeline-header strong { font-size: var(--type-support); line-height: 18px; }
.workbench-library-heading small,
.workbench-library-heading a,
.workbench-project-name small,
.workbench-avatar-card > small,
.workbench-mini-empty span,
.workbench-mini-empty a,
.workbench-subtabs button,
.workbench-audio-copy small,
.workbench-stage-toolbar,
.workbench-stage-toolbar b,
.workbench-stage-empty small,
.workbench-stage-overlay small,
.workbench-stage-status,
.workbench-selected-avatar small,
.workbench-fieldset legend,
.workbench-fieldset legend span,
.workbench-segmented button,
.workbench-choice-stack button strong,
.workbench-choice-stack button small,
.workbench-range-field strong,
.workbench-range-field output,
.workbench-api-note,
.workbench-text-footer > span,
.workbench-voice-summary span,
.workbench-voice-summary strong,
.workbench-subtitle-toggle small,
.workbench-generation-feedback,
.workbench-track-labels span { font-size: var(--type-caption); line-height: 16px; }
.workbench-text-editor textarea { font-size: var(--type-control); line-height: 20px; }
.workbench-text-footer button,
.workbench-subtabs button span,
.workbench-timeline-header span,
.workbench-ruler,
.workbench-track-placeholder,
.workbench-timeline-clip strong,
.workbench-timeline-clip small { font-size: var(--type-micro); line-height: 14px; }

/* Guided video creation */
.creation-wizard-header { align-items: flex-end; }
.creation-wizard { --wizard-accent: var(--primary); display: flex; min-height: max(690px,calc(100vh - 205px)); flex-direction: column; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.creation-wizard [hidden] { display: none !important; }
.wizard-progress { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 36px; }
.wizard-progress > span { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; min-height: 28px; color: var(--muted); }
.wizard-progress > span:not(:last-child)::after { width: 24px; height: 1px; margin-left: 11px; content: ''; background: var(--line); }
.wizard-progress b { display: block; min-width: 18px; color: var(--muted); background: transparent; font-size: 12px; line-height: 28px; font-weight: 750; text-align: center; transition: color .16s, transform .16s; }
.wizard-progress > span.is-active b { color: var(--primary); font-weight: 900; transform: scale(1.14); }
.wizard-progress > span.is-complete b { color: var(--primary-dark); }
.wizard-progress > span.is-complete::after { background: rgba(108,92,231,.42); }
.wizard-stage { min-height: 570px; flex: 1 0 auto; padding: 42px 48px 48px; }
.wizard-panel { width: min(1180px,100%); margin: 0 auto; animation: wizard-panel-in .24s ease both; }
@keyframes wizard-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.wizard-panel-heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.wizard-panel-heading > span { display: none; }
.wizard-panel-heading h2 { margin: 0 0 8px; font-size: 27px; line-height: 1.35; letter-spacing: -.03em; }
.wizard-panel-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.wizard-title-field { position: relative; display: block; max-width: 700px; margin: 48px auto 24px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.wizard-title-field > span { display: block; margin-bottom: 13px; color: var(--ink); font-size: 14px; font-weight: 800; }
.wizard-title-field input { width: 100%; height: 64px; padding: 0 74px 0 20px; border-color: rgba(108,92,231,.68); border-radius: 11px; font-size: 17px; font-weight: 650; box-shadow: 0 0 0 3px rgba(108,92,231,.07); }
.wizard-title-field small { position: absolute; top: 56px; right: 16px; color: var(--muted); font-size: 10px; }
.wizard-title-field small b { color: var(--ink); }
.wizard-title-field em { display: block; margin-top: 18px; color: var(--muted); font-size: 11px; font-style: normal; font-weight: 500; }
.wizard-avatar-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,180px)); justify-content: center; gap: 16px; width: min(820px,100%); margin: 0 auto; }
.wizard-avatar-card { min-width: 0; padding: 7px; border: 1px solid transparent; border-radius: 13px; color: var(--ink); background: transparent; text-align: left; transition: .18s ease; }
.wizard-avatar-card:hover { transform: translateY(-2px); border-color: rgba(108,92,231,.28); background: rgba(108,92,231,.04); }
.wizard-avatar-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(108,92,231,.13); }
.wizard-avatar-media { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg,#e7ecf5,#cdd5e3); }
.wizard-avatar-media img,.wizard-avatar-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.wizard-avatar-media i { position: absolute; right: 7px; bottom: 7px; display: none; place-items: center; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.wizard-avatar-card.is-selected .wizard-avatar-media i { display: grid; }
.wizard-avatar-card > strong,.wizard-avatar-card > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-avatar-card > strong { margin: 8px 3px 2px; font-size: 11px; text-align: center; }
.wizard-avatar-card > small { display: none; }
.wizard-audio-tabs { display: flex; gap: 5px; width: fit-content; margin: 0 auto 20px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.wizard-audio-tabs button { min-height: 32px; padding: 5px 14px; border-radius: 7px; color: var(--muted); font-size: 10px; font-weight: 750; }
.wizard-audio-tabs button.is-active { color: #fff; background: var(--primary); box-shadow: 0 5px 13px rgba(108,92,231,.2); }
.wizard-audio-tabs button span { margin-left: 4px; color: inherit; opacity: .8; }
.wizard-audio-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,420px)); justify-content: center; gap: 14px; width: min(860px,100%); margin: 0 auto; }
.wizard-audio-card { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 92px; padding: 15px 44px 15px 15px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: rgba(255,255,255,.022); text-align: left; transition: .16s ease; }
.wizard-audio-card:hover { border-color: rgba(108,92,231,.38); background: rgba(108,92,231,.045); }
.wizard-audio-card.is-selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(108,92,231,.11); }
.wizard-audio-play { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#d95598,#ba3f83); box-shadow: 0 8px 18px rgba(191,64,133,.18); }
.wizard-audio-card:nth-child(4n+2) .wizard-audio-play { background: linear-gradient(145deg,#8888e9,#6669cc); box-shadow: 0 8px 18px rgba(103,105,205,.18); }
.wizard-audio-card:nth-child(4n+3) .wizard-audio-play { background: linear-gradient(145deg,#47a8df,#328fc8); box-shadow: 0 8px 18px rgba(50,143,200,.18); }
.wizard-audio-card:nth-child(4n+4) .wizard-audio-play { background: linear-gradient(145deg,#5abd88,#40a871); box-shadow: 0 8px 18px rgba(64,168,113,.18); }
.wizard-audio-card > span:nth-child(2) { min-width: 0; }
.wizard-audio-card strong,.wizard-audio-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-audio-card strong { font-size: 12px; }
.wizard-audio-card small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.wizard-audio-card > i { position: absolute; top: 12px; right: 12px; color: var(--primary); opacity: 0; }
.wizard-audio-card.is-selected > i { opacity: 1; }
.wizard-inline-empty { grid-column: 1/-1; display: grid; place-items: center; min-height: 220px; color: var(--muted); font-size: 11px; }
.wizard-script-layout { display: grid; grid-template-columns: minmax(0,1.42fr) minmax(260px,.68fr); gap: 18px; width: min(900px,100%); margin: 0 auto; }
.wizard-script-editor,.wizard-audio-preview,.wizard-review-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); }
.wizard-script-editor { padding: 18px; }
.wizard-script-editor label > span,.wizard-script-editor > label { color: var(--muted); font-size: 10px; font-weight: 700; }
.wizard-script-editor select { margin: 7px 0 14px; }
.wizard-script-editor textarea { width: 100%; min-height: 270px; margin-top: 7px; padding: 14px; resize: vertical; font-size: 12px; line-height: 1.8; }
.wizard-script-tools { display: flex; align-items: center; gap: 7px; margin-top: 9px; }
.wizard-script-tools button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 8px; }
.wizard-script-tools button:hover { color: var(--ink); border-color: rgba(108,92,231,.38); }
.wizard-script-tools span { margin-left: auto; color: var(--muted); font-size: 8px; }
.wizard-script-tools b { color: var(--ink); }
.wizard-script-help { margin: 10px 0 0; color: var(--muted); font-size: 8px; line-height: 1.7; }
.wizard-script-help code { color: #9d94f7; }
.wizard-audio-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 18px; text-align: center; }
.wizard-selected-voice-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #b9b2ff; background: linear-gradient(145deg,rgba(108,92,231,.22),rgba(55,103,214,.12)); }
.wizard-audio-preview > small { margin-top: 14px; color: var(--muted); font-size: 8px; }
.wizard-audio-preview > strong { max-width: 100%; margin-top: 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wizard-price-line { display: flex; justify-content: space-between; width: 100%; margin: 24px 0 11px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.wizard-price-line strong { color: var(--ink); }
.wizard-audio-preview > .button { width: 100%; }
.wizard-generation-state { margin-top: 13px; color: #9e95f8; font-size: 9px; }
.wizard-generation-state span { display: inline-flex; animation: voice-clone-spin 1.2s linear infinite; }
.wizard-generation-state p { margin: 5px 0; }
.wizard-audio-preview audio { width: 100%; height: 34px; margin-top: 15px; }
.wizard-review-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; width: min(900px,100%); margin: 0 auto; }
.wizard-review-card { min-width: 0; padding: 14px; }
.wizard-review-card > small,.wizard-review-card > strong { display: block; }
.wizard-review-card > small { margin-top: 12px; color: var(--muted); font-size: 8px; }
.wizard-review-card > strong { margin-top: 3px; font-size: 12px; }
.wizard-review-video > div { display: grid; place-items: center; min-height: 250px; border-radius: 10px; color: #8e86bc; background: linear-gradient(145deg,#242d42,#151b29) center/cover no-repeat; }
.wizard-review-video > div.has-image > span { display: none; }
.wizard-review-audio { display: grid; grid-template-columns: 46px minmax(0,1fr); column-gap: 11px; align-content: start; }
.wizard-review-wave { grid-row: 1/3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: #aba3ff; background: rgba(108,92,231,.13); }
.wizard-review-audio > small,.wizard-review-audio > strong { margin-top: 2px; }
.wizard-review-audio audio { grid-column: 1/-1; width: 100%; height: 36px; margin-top: 15px; }
.wizard-review-script { grid-column: 1/-1; max-height: 165px; overflow: auto; margin-top: 14px; padding: 13px; border-radius: 9px; color: var(--muted); background: rgba(0,0,0,.11); font-size: 9px; line-height: 1.8; white-space: pre-wrap; }
.wizard-output-row { display: grid; grid-template-columns: 180px 180px 1fr; gap: 12px; align-items: end; width: min(900px,100%); margin: 15px auto 0; }
.wizard-output-row label { color: var(--muted); font-size: 9px; }
.wizard-output-row select { margin-top: 6px; }
.wizard-final-price { justify-self: end; text-align: right; }
.wizard-final-price span,.wizard-final-price small { display: block; color: var(--muted); font-size: 8px; }
.wizard-final-price strong { display: block; margin: 3px 0; color: #968cf7; font-size: 18px; }
.wizard-footer { position: sticky; z-index: 14; bottom: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; min-height: 86px; margin-top: auto; padding: 15px 6px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.wizard-footer-side { display: flex; align-items: center; min-width: 150px; }
.wizard-footer-left { justify-content: flex-start; }
.wizard-footer-right { justify-content: flex-end; }
.wizard-footer-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 340px; }
.wizard-footer-center p { display: none; margin: 3px 0 0; color: var(--muted); font-size: 8px; text-align: center; }
.wizard-footer-center p.is-error { display: block; color: #f28d9c; }
.wizard-nav-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 100px; min-height: 40px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: rgba(255,255,255,.04); box-shadow: 0 4px 14px rgba(4,11,28,.05); font-size: 12px; font-weight: 750; }
.wizard-nav-action:hover { color: var(--primary); border-color: rgba(108,92,231,.42); background: rgba(108,92,231,.06); }
.wizard-nav-action[hidden],.wizard-footer-right .button[hidden] { display: none; }
.wizard-generating-panel { padding: 36px 20px 54px; text-align: center; }
.wizard-progress-ring { --progress: 20; position: relative; display: grid; place-items: center; width: 134px; height: 134px; margin: 0 auto 14px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--progress) * 1%),#e5e1ff 0); }
.wizard-progress-ring::before { position: absolute; inset: 10px; border-radius: 50%; content: ''; background: var(--surface,#fff); }
.wizard-progress-ring > div { z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; }
.wizard-progress-ring strong { color: var(--primary); font-size: 22px; font-weight: 850; }
.wizard-generation-success { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: #2ca56f; font-size: 10px; font-weight: 750; }
.wizard-generating-panel h2 { margin: 8px 0 6px; font-size: 24px; }
.wizard-generating-panel > p { max-width: 560px; margin: 0 auto; color: var(--muted); font-size: 11px; line-height: 1.8; }
.wizard-generation-phases { display: grid; grid-template-columns: repeat(4,1fr); width: min(620px,100%); margin: 34px auto 0; }
.wizard-generation-phases span { position: relative; padding-top: 22px; color: var(--muted); font-size: 9px; }
.wizard-generation-phases span::before { position: absolute; top: 2px; left: 50%; z-index: 2; width: 9px; height: 9px; border: 3px solid #e2e9f5; border-radius: 50%; content: ''; background: #fff; transform: translateX(-50%); }
.wizard-generation-phases span:not(:last-child)::after { position: absolute; top: 8px; left: calc(50% + 7px); width: calc(100% - 14px); height: 2px; content: ''; background: #e2e9f5; }
.wizard-generation-phases span.is-done,.wizard-generation-phases span.is-active { color: var(--primary); font-weight: 750; }
.wizard-generation-phases span.is-done::before,.wizard-generation-phases span.is-active::before { border-color: var(--primary); background: var(--primary); }
.wizard-generation-phases span.is-done::after { background: var(--primary); }
.wizard-generation-phases span.is-active::before { box-shadow: 0 0 0 5px rgba(108,92,231,.12); }
.wizard-generation-actions { display: flex; justify-content: center; gap: 9px; margin-top: 30px; }
html[data-theme="light"] .creation-wizard { background: transparent; box-shadow: none; }
html[data-theme="light"] .wizard-footer { background: transparent; box-shadow: none; }
html[data-theme="light"] .wizard-nav-action { background: #fff; }
html[data-theme="light"] .wizard-avatar-card,html[data-theme="light"] .wizard-audio-card,html[data-theme="light"] .wizard-script-editor,html[data-theme="light"] .wizard-audio-preview,html[data-theme="light"] .wizard-review-card,html[data-theme="light"] .wizard-title-field { background: #fff; }
html[data-theme="light"] .wizard-title-field { background: transparent; box-shadow: none; }
html[data-theme="light"] .wizard-progress-ring::before { background: #fff; }
@media (max-width: 900px) {
  .wizard-script-layout,.wizard-review-grid { grid-template-columns: 1fr; }
  .wizard-avatar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .wizard-output-row { grid-template-columns: 1fr 1fr; }
  .wizard-final-price { grid-column: 1/-1; justify-self: stretch; text-align: left; }
}
@media (max-width: 620px) {
  .wizard-stage { padding: 20px 14px; }
  .wizard-avatar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wizard-audio-grid,.wizard-output-row { grid-template-columns: 1fr; }
  .wizard-panel-heading h2 { font-size: 23px; }
  .wizard-title-field { margin-top: 32px; padding: 22px 18px; }
  .wizard-script-tools { flex-wrap: wrap; }
  .wizard-script-tools span { width: 100%; margin-left: 0; }
  .wizard-footer { grid-template-columns: minmax(64px,1fr) auto minmax(64px,1fr); gap: 6px; padding: 10px 0; }
  .wizard-footer-side { min-width: 0; }
  .wizard-footer-center { min-width: 0; }
  .wizard-progress { gap: 2px; }
  .wizard-progress > span,.wizard-progress b { min-width: 20px; width: 20px; height: 24px; }
  .wizard-progress > span:not(:last-child)::after { width: 5px; margin-left: 2px; }
  .wizard-nav-action { min-width: 0; padding-inline: 7px; font-size: 9px; }
  .wizard-footer-right .button { min-height: 34px; padding-inline: 9px; font-size: 9px; }
}

/* Product design refresh · 2026-07
   A light application shell with a focused media stage and a 12px readable floor. */
:root {
  --type-page-title: 28px;
  --type-section-title: 16px;
  --type-body: 14px;
  --type-control: 13px;
  --type-support: 12px;
  --type-caption: 12px;
  --type-micro: 12px;
  --radius: 12px;
  --shadow: 0 8px 24px rgba(43, 51, 75, .06);
}

body { line-height: 1.55; }
.app-shell { grid-template-columns: 216px minmax(0, 1fr); }
.sidebar { padding: 16px 12px 12px; }
.sidebar-brand { gap: 10px; padding: 0 6px 18px; }
.sidebar-brand strong { font-size: 14px; }
.sidebar-brand > small { font-size: 9px; letter-spacing: .18em; }
.nav-list { gap: 4px; }
.nav-list > a { min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; font-size: 14px; font-weight: 650; }
.nav-divider { padding: 16px 10px 5px; font-size: 11px; }
.sidebar-create-link { min-height: 40px; border-radius: 10px; font-size: 13px; }
.topbar { min-height: 56px; height: 56px; padding: 0 22px; }
.topbar-context { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 700; }
.topbar-back-link { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -7px; border-radius: 8px; color: var(--ink); }
.topbar-back-link:hover { color: var(--primary); background: var(--primary-soft); }
.main-content { padding: 22px 26px 30px; }
.page-header { align-items: center; margin-bottom: 18px; padding-bottom: 14px; }
.page-header h1 { margin: 2px 0 3px; font-size: 28px; line-height: 36px; letter-spacing: -.035em; }
.page-header p { font-size: 13px; line-height: 20px; }
.eyebrow { font-size: 11px; line-height: 16px; }
.panel { border-radius: 12px; box-shadow: var(--shadow); }
.panel-heading h2 { font-size: 16px; line-height: 24px; }
.panel-heading p { font-size: 12px; line-height: 18px; }
.button { min-height: 40px; padding: 8px 14px; border-radius: 9px; font-size: 13px; }
.button-small { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.status, .ui-badge { font-size: 12px; line-height: 16px; }
.ui-tabs { width: auto; padding: 3px; border-radius: 9px; }
.ui-tab { min-width: 120px; min-height: 36px; font-size: 13px; }
.ui-empty h2 { font-size: 18px; line-height: 26px; }
.ui-empty p, .ui-empty-label { font-size: 13px; line-height: 20px; }
.ui-empty-minimal { gap: 10px; }
.ui-empty-minimal .ui-empty-mark { height: 58px; }
.avatar-empty-state.ui-empty-minimal,
.copy-list-section.is-empty,
.voice-library.is-empty { min-height: calc(100dvh - 190px); }

html[data-theme="light"] .sidebar {
  background: #fff;
  box-shadow: 8px 0 24px rgba(43, 51, 75, .035);
}
html[data-theme="light"] .topbar { background: rgba(255, 255, 255, .96); }
html[data-theme="light"] .main-content { background: #f7f8fc; }
html[data-theme="light"] .panel,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .detail-status,
html[data-theme="light"] .asset-dialog,
html[data-theme="light"] .voice-asset-card,
html[data-theme="light"] .audio-work-card {
  box-shadow: 0 6px 20px rgba(43, 51, 75, .055);
}

/* Dashboard */
.main-content.workbench-main {
  height: calc(100vh - 56px);
  overflow: auto;
  padding: 22px 26px 26px;
}
.dashboard-overview { width: min(100%, 1180px); margin: 0 auto; }
.dashboard-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 78px; margin-bottom: 16px; }
.dashboard-welcome h1 { margin: 2px 0 3px; font-size: 28px; line-height: 36px; letter-spacing: -.035em; }
.dashboard-welcome p { margin: 0; color: var(--muted); font-size: 13px; }
.dashboard-welcome-actions { display: flex; gap: 9px; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.dashboard-metrics > a { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: 11px; min-height: 82px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: var(--shadow); }
.dashboard-metrics > a:hover { border-color: #d6d0fb; transform: translateY(-1px); }
.dashboard-metrics > a > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--primary); background: #f0edff; }
.dashboard-metrics > a > div { min-width: 0; display: grid; }
.dashboard-metrics strong { font-size: 22px; line-height: 28px; }
.dashboard-metrics small { color: var(--muted); font-size: 12px; }
.dashboard-metrics > a > .ui-icon:last-child { color: #a3acbb; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 14px; }
.dashboard-panel { min-width: 0; min-height: 292px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.dashboard-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dashboard-panel-heading h2 { margin: 0; font-size: 16px; line-height: 24px; }
.dashboard-panel-heading p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.dashboard-panel-heading > a { display: inline-flex; align-items: center; gap: 4px; color: var(--primary); font-size: 12px; font-weight: 700; }
.dashboard-recent-list { display: grid; }
.dashboard-recent-list > a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 56px; padding: 7px 2px; color: var(--ink); border-bottom: 1px solid var(--line); }
.dashboard-recent-list > a:last-child { border-bottom: 0; }
.dashboard-recent-cover { display: grid; place-items: center; width: 54px; height: 42px; overflow: hidden; border-radius: 8px; color: #8f84ef; background: #ece9ff; }
.dashboard-recent-cover img { width: 100%; height: 100%; object-fit: cover; }
.dashboard-recent-copy { min-width: 0; display: grid; gap: 2px; }
.dashboard-recent-copy strong, .dashboard-recent-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-recent-copy strong { font-size: 13px; }
.dashboard-recent-copy small { color: var(--muted); font-size: 12px; }
.dashboard-inline-empty { min-height: 210px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: left; }
.dashboard-inline-empty > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--primary); background: #f0edff; }
.dashboard-inline-empty > div { display: grid; }
.dashboard-inline-empty strong { color: var(--ink); font-size: 14px; }
.dashboard-inline-empty small { font-size: 12px; }
.dashboard-inline-empty > a { color: var(--primary); font-size: 12px; font-weight: 700; }
.dashboard-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.dashboard-checklist li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 56px; border-bottom: 1px solid var(--line); }
.dashboard-checklist li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #8a94a7; background: #f1f3f7; }
.dashboard-checklist li.is-ready > span { color: #11724f; background: #eaf8f1; }
.dashboard-checklist li > div { min-width: 0; display: grid; }
.dashboard-checklist strong { font-size: 13px; }
.dashboard-checklist small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-checklist a { color: var(--primary); font-size: 12px; }
.dashboard-primary-link { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 14px; padding: 0 13px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, #7568ee, #6253dc); box-shadow: 0 8px 20px rgba(103, 88, 232, .18); font-size: 13px; font-weight: 750; }
.dashboard-primary-link > span { display: inline-flex; align-items: center; gap: 7px; }

/* Asset libraries */
.avatar-group-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 204px)); gap: 14px; }
.avatar-group-cover { border-radius: 12px; }
.voice-filter-toolbar { margin: 14px 0; }
.voice-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 264px)); justify-content: start; gap: 12px; }
.voice-asset-card { min-height: 0; border-radius: 12px; }
.voice-card-heading strong { font-size: 14px; line-height: 20px; }
.voice-card-meta { font-size: 12px; line-height: 18px; }
.voice-card-footer { min-height: 42px; }
.copy-list-section:not(.is-empty) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.copy-card { min-height: 210px; }
.copy-card-head h2 { font-size: 16px; line-height: 24px; }
.copy-card-head small, .copy-card summary { font-size: 12px; }
.copy-card > p { display: -webkit-box; min-height: 84px; overflow: hidden; font-size: 13px; line-height: 21px; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }

/* Works */
.video-work-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 208px)); justify-content: start; gap: 14px; }
.video-work-card { border-radius: 12px; box-shadow: 0 8px 22px rgba(16, 24, 39, .14); }
.video-work-card-meta { right: 14px; bottom: 13px; left: 14px; }
.video-work-card-meta strong { font-size: 14px; line-height: 20px; }
.video-work-card-meta time { font-size: 12px; line-height: 18px; }
.video-generating-status strong, .video-generating-status small { font-size: 12px; line-height: 18px; }
.audio-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.audio-work-card { min-height: 154px; grid-template-columns: 44px minmax(0, 1fr); padding: 15px; border-radius: 12px; }
.audio-work-card-copy strong { font-size: 14px; }
.audio-work-card-copy small, .audio-work-card-action { font-size: 12px; }
.audio-work-card-copy p { display: -webkit-box; min-height: 42px; overflow: hidden; font-size: 13px; line-height: 21px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* Detail screens */
.detail-status { min-height: 88px; margin-bottom: 12px; padding: 14px 16px; border-radius: 12px; }
.detail-status h2 { margin: 6px 0 2px; font-size: 18px; line-height: 26px; }
.detail-status p { font-size: 12px; line-height: 18px; }
.status-orb { width: 42px; height: 42px; box-shadow: inset 0 0 0 10px #fff, 0 0 0 1px var(--line); }
.video-work-player-panel { padding: 14px; }
.video-work-player-panel .panel-heading { margin-bottom: 10px; }
.video-work-player-panel video { display: block; width: 100%; height: min(398px, calc(100vh - 322px)); min-height: 250px; margin: 0 auto; border-radius: 10px; background: #151927; object-fit: contain; }
.video-detail-ready-grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; align-items: stretch; gap: 12px; }
.video-detail-ready-grid > .panel { min-width: 0; }
.video-detail-inspector { min-width: 0; display: grid; align-content: start; gap: 12px; }
.video-detail-inspector .panel { padding: 14px; }
.video-detail-inspector .panel-heading { margin-bottom: 8px; }
.video-detail-script { max-height: 112px; overflow: auto; }
.audio-work-detail-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 12px; }
.audio-work-player-art { min-height: 96px; }
.audio-work-player-panel { grid-column: 1; grid-row: 1; }
.audio-work-info-panel { grid-column: 2; grid-row: 1 / span 2; }
.audio-work-script-panel { grid-column: 1; grid-row: 2; }
.audio-work-full-script { max-height: 104px; overflow: auto; }
.script-preview { font-size: 13px; line-height: 21px; }

/* Admin */
.search-form { width: min(100%, 560px); }
.search-form input { min-width: 0; }
.search-form .button { flex: 0 0 auto; min-width: 86px; white-space: nowrap; }
.inline-form { grid-template-columns: 76px minmax(90px, 1fr) auto; min-width: 0; }
.inline-form .button { white-space: nowrap; }
.authorization-review-table { min-width: 0; table-layout: fixed; }
.authorization-review-table th:first-child { width: 23%; }
.authorization-review-table th:nth-child(2) { width: 12%; }
.authorization-review-table th:nth-child(3) { width: 15%; }
.authorization-review-table th:nth-child(4) { width: 14%; }
.authorization-review-table th:nth-child(5) { width: 17%; }
.authorization-review-table th:nth-child(6) { width: 19%; }
.authorization-review-table th,
.authorization-review-table td { overflow: hidden; padding: 9px 7px; }
.authorization-review-person strong,
.authorization-review-person small,
.authorization-review-processed strong,
.authorization-review-processed small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.authorization-review-cover { width: 76px; height: 58px; }
.authorization-review-code { padding: 7px 8px; font-size: 12px; letter-spacing: .16em; }
.authorization-review-actions { flex-wrap: wrap; gap: 6px; }
.authorization-review-actions .button { min-height: 30px; padding: 5px 8px; }
.settings-tabs-form { padding-bottom: 66px; }
.settings-actions { position: sticky; z-index: 8; bottom: 0; min-height: 58px; margin: 0 -1px -1px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .96); box-shadow: 0 -8px 20px rgba(43, 51, 75, .06); backdrop-filter: blur(12px); }
.settings-note, .configured-mark, .secret-field-hint { font-size: 12px; line-height: 18px; }
.component-version, .component-index, .palette-heading span, .color-token code, .typography-grid article small, .component-note { font-size: 12px; }

/* Guided creation: selected focused production-desk direction */
.main-content.creation-main { height: calc(100vh - 56px); min-height: 600px; display: flex; flex-direction: column; overflow: hidden; padding: 0; background: #f7f8fc; }
.creation-main > .creation-wizard-header { display: none; }
.creation-main > .alert { flex: 0 0 auto; max-width: none; margin: 8px 14px 0; }
.creation-wizard { min-height: 0; flex: 1 1 auto; display: grid; grid-template-rows: minmax(0, 1fr) 76px; overflow: hidden; }
.wizard-stage { min-height: 0; overflow: auto; padding: 22px 28px; }
.wizard-panel { min-height: 100%; }
.wizard-panel-heading { margin: 0 auto 18px; }
.wizard-panel-heading h2 { margin-bottom: 4px; font-size: 24px; line-height: 32px; }
.wizard-panel-heading p { font-size: 13px; line-height: 20px; }
.wizard-title-field { max-width: 660px; margin: 56px auto 0; }
.wizard-title-field > span { font-size: 14px; }
.wizard-title-field input { height: 58px; font-size: 16px; }
.wizard-title-field small { top: 52px; font-size: 12px; }
.wizard-title-field em { margin-top: 12px; font-size: 12px; }
.wizard-avatar-grid { grid-template-columns: repeat(4, minmax(132px, 164px)); gap: 13px; width: min(760px, 100%); }
.wizard-avatar-card { padding: 6px; border-radius: 11px; }
.wizard-avatar-card > strong { margin-top: 7px; font-size: 12px; line-height: 18px; }
.wizard-audio-tabs { margin-bottom: 14px; }
.wizard-audio-tabs button { min-height: 34px; padding: 6px 14px; font-size: 12px; }
.wizard-audio-grid { grid-template-columns: repeat(2, minmax(280px, 380px)); gap: 12px; width: min(800px, 100%); }
.wizard-audio-card { min-height: 76px; padding: 12px 42px 12px 12px; border-radius: 11px; }
.wizard-audio-play { width: 42px; height: 42px; }
.wizard-audio-card strong, .wizard-audio-card small { font-size: 12px; line-height: 18px; }
.wizard-inline-empty { min-height: 180px; font-size: 13px; }
.wizard-script-layout { grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr); gap: 14px; width: min(900px, 100%); }
.wizard-script-editor, .wizard-audio-preview { border-radius: 12px; }
.wizard-script-editor { padding: 15px; }
.wizard-script-editor label > span, .wizard-script-editor > label { font-size: 12px; }
.wizard-script-editor textarea { min-height: 210px; max-height: 230px; font-size: 13px; line-height: 21px; }
.wizard-script-tools { gap: 7px; }
.wizard-script-tools button, .wizard-script-tools span, .wizard-script-help { font-size: 12px; line-height: 18px; }
.wizard-audio-preview { padding: 20px 16px; }
.wizard-audio-preview > small, .wizard-audio-preview > strong, .wizard-price-line, .wizard-generation-state { font-size: 12px; line-height: 18px; }
.wizard-selected-voice-icon { width: 54px; height: 54px; border-radius: 15px; }
.wizard-footer { position: relative; min-height: 76px; margin: 0; padding: 12px 24px; border-top: 1px solid var(--line); background: #fff; }
.wizard-footer-center { min-width: 300px; }
.wizard-progress { gap: 8px; }
.wizard-progress > span { min-width: 28px; min-height: 32px; }
.wizard-progress b { min-width: 28px; height: 28px; border: 1px solid #dfe4ee; border-radius: 50%; color: #596477; background: #fff; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 26px; }
.wizard-progress > span:not(:last-child)::after { width: 20px; margin-left: 8px; }
.wizard-progress > span.is-active b { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 5px 14px rgba(103, 88, 232, .22); transform: none; }
.wizard-progress > span.is-complete b { color: var(--primary); border-color: #d5cffb; background: #f0edff; }
.wizard-footer-center p { font-size: 12px; }
.wizard-nav-action { min-width: 104px; min-height: 40px; font-size: 13px; }
.wizard-footer-right .button { min-width: 124px; }

.wizard-stage:has([data-wizard-step="4"].is-active) { padding: 0; overflow: hidden; }
.wizard-panel[data-wizard-step="4"] { width: 100%; height: 100%; }
.wizard-confirm-layout { display: grid; grid-template-columns: 300px minmax(320px, 1.3fr) minmax(320px, 1fr); width: 100%; height: 100%; min-height: 0; }
.wizard-confirm-checklist { min-width: 0; overflow: auto; padding: 28px 24px 22px 30px; background: #fff; }
.wizard-confirm-checklist header { margin-bottom: 18px; }
.wizard-confirm-checklist header h2 { margin: 0 0 5px; font-size: 22px; line-height: 30px; }
.wizard-confirm-checklist header p { margin: 0; color: var(--muted); font-size: 12px; line-height: 19px; }
.wizard-confirm-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: start; gap: 10px; min-height: 82px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.wizard-confirm-item > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: var(--primary); }
.wizard-confirm-item > div { min-width: 0; display: grid; gap: 6px; }
.wizard-confirm-item strong { font-size: 14px; line-height: 20px; }
.wizard-confirm-item small { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 18px; text-overflow: ellipsis; }
.wizard-confirm-item small b { overflow: hidden; color: var(--muted); font-size: inherit; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.wizard-confirm-item button { padding: 1px 0; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.wizard-confirm-item button:hover { color: var(--primary); }
.wizard-confirm-avatar-row i { display: inline-block; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px; background: #eceffa center / cover no-repeat; }
.wizard-confirm-stage { min-width: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 36%, #252b3b, #151927 68%); }
.wizard-confirm-media { position: relative; width: auto; max-width: 100%; height: min(87%, 670px); aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid #394155; border-radius: 12px; background: #0d111d center / cover no-repeat; box-shadow: 0 18px 46px rgba(4, 8, 18, .32); }
.wizard-confirm-media.has-image .wizard-confirm-media-empty { display: none; }
.wizard-confirm-media-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #8c95aa; }
.wizard-confirm-media-empty small { font-size: 12px; }
.wizard-confirm-media-bar { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 12px; color: #fff; background: rgba(7, 11, 20, .78); backdrop-filter: blur(8px); }
.wizard-confirm-media-bar span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.wizard-confirm-media-bar strong { overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wizard-confirm-summary { min-width: 0; overflow: auto; padding: 22px 20px; background: #f8f9fd; }
.wizard-confirm-summary section,
.wizard-confirm-metrics > div { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.wizard-confirm-summary h3 { margin: 0 0 11px; font-size: 15px; line-height: 22px; }
.wizard-confirm-audio > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; }
.wizard-confirm-audio > div > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: var(--primary); background: #f0edff; }
.wizard-confirm-audio > div > div { min-width: 0; display: grid; }
.wizard-confirm-audio strong, .wizard-confirm-audio small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wizard-confirm-audio strong { font-size: 13px; }
.wizard-confirm-audio small { color: var(--muted); font-size: 12px; }
.wizard-confirm-audio-preview { width: 100%; min-height: 42px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 4px 8px 4px 4px; border: 0; border-radius: 10px; color: var(--muted); background: #f5f6fa; text-align: left; }
.wizard-confirm-audio-preview > span:first-child { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--primary); background: #ebe7ff; }
.wizard-confirm-audio-preview .voice-waveform { min-width: 0; }
.wizard-confirm-audio-preview .voice-waveform i { flex: 1 1 3px; max-width: 3px; background: #a8b2c5; }
.wizard-confirm-audio-preview > strong { color: var(--muted); font-size: 12px; font-weight: 650; white-space: nowrap; }
.wizard-confirm-audio-preview.is-playing .voice-waveform i { background: var(--primary); animation: voice-wave 760ms ease-in-out infinite alternate; }
.wizard-confirm-audio-preview.is-playing .voice-waveform i:nth-child(2n) { animation-delay: -220ms; }
.wizard-confirm-audio-preview.is-playing .voice-waveform i:nth-child(3n) { animation-delay: -420ms; }
.wizard-confirm-script { margin-top: 10px; }
.wizard-confirm-script p { display: -webkit-box; min-height: 42px; margin: 0; overflow: hidden; color: #4e596c; font-size: 12px; line-height: 20px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wizard-confirm-script > small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; text-align: right; }
.wizard-confirm-metrics { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.wizard-confirm-metrics > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 12px; }
.wizard-confirm-metrics > div > span { color: var(--primary); }
.wizard-confirm-metrics small { color: var(--muted); font-size: 12px; }
.wizard-confirm-metrics strong { font-size: 13px; }
.wizard-output-row { grid-template-columns: 1fr 1fr; gap: 9px; width: 100%; margin-top: 10px; }
.wizard-output-row label { font-size: 12px; }
.wizard-output-row select { min-height: 38px; margin-top: 5px; padding: 8px 9px; font-size: 12px; }
.wizard-balance-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; text-align: right; }
.wizard-generating-panel { align-self: center; min-height: 0; padding: 30px 20px; }
.wizard-generation-success, .wizard-generating-panel > p, .wizard-generation-phases span { font-size: 12px; line-height: 18px; }

/* Authentication stays within one 720px viewport. */
.guest-shell { height: 100vh; min-height: 620px; overflow: hidden; grid-template-columns: minmax(430px, 1.05fr) minmax(420px, .95fr); }
.guest-brand { padding: clamp(36px, 5vw, 72px); }
.guest-brand h1 { margin: 12px 0 16px; font-size: clamp(42px, 4vw, 60px); line-height: 1.22; }
.guest-brand p { font-size: 14px; line-height: 23px; }
.guest-feature-list span { padding: 8px 11px; font-size: 12px; }
.guest-card-wrap { overflow: auto; padding: 20px clamp(34px, 6vw, 72px); }
.auth-card { width: min(100%, 430px); padding: 22px; border-radius: 16px; }
.auth-card h2 { margin: 6px 0 3px; font-size: 26px; line-height: 34px; }
.auth-card .muted { margin-bottom: 14px; font-size: 13px; }
.auth-card .form-stack { gap: 10px; }
.auth-card label { gap: 4px; font-size: 12px; }
.auth-card input { min-height: 42px; padding: 9px 11px; }
.auth-switch { margin-top: 12px; font-size: 12px; }

@media (max-width: 1180px) {
  .voice-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 264px)); justify-content: start; }
  .copy-list-section:not(.is-empty) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-confirm-layout { grid-template-columns: 236px minmax(250px, 1fr) 264px; }
  .wizard-confirm-checklist { padding-inline: 22px; }
  .wizard-confirm-summary { padding-inline: 16px; }
}

@media (max-width: 1050px) and (min-width: 901px) {
  .wizard-confirm-layout { grid-template-columns: 220px minmax(236px, 1fr) 246px; }
  .wizard-confirm-checklist { padding-inline: 18px; }
  .wizard-confirm-summary { padding-inline: 12px; }
  .wizard-confirm-summary section,
  .wizard-confirm-metrics > div { padding: 12px; }
  .wizard-confirm-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .wizard-confirm-media { width: min(100%, 270px); }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .main-content.workbench-main, .main-content.creation-main { height: auto; min-height: calc(100vh - 56px); overflow: visible; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .wizard-confirm-layout { grid-template-columns: 1fr; height: auto; }
  .wizard-confirm-checklist, .wizard-confirm-summary { overflow: visible; }
  .wizard-confirm-stage { min-height: 560px; }
  .creation-wizard { min-height: 760px; }
  .authorization-review-table { min-width: 860px; }
  .guest-shell { height: auto; min-height: 100vh; overflow: visible; grid-template-columns: 1fr; }
  .guest-brand { min-height: 360px; }
  .video-detail-ready-grid { grid-template-columns: 1fr; }
  .video-work-player-panel video { height: auto; max-height: 520px; }
  .audio-work-player-panel,
  .audio-work-info-panel,
  .audio-work-script-panel { grid-column: 1; grid-row: auto; }
}

@media (max-width: 620px) {
  .main-content { padding: 16px 14px 24px; }
  .dashboard-welcome { align-items: flex-start; flex-direction: column; }
  .dashboard-welcome-actions { width: 100%; }
  .dashboard-welcome-actions .button { flex: 1; }
  .dashboard-metrics, .voice-card-grid, .copy-list-section:not(.is-empty), .audio-work-grid { grid-template-columns: 1fr; }
  .wizard-stage { padding: 18px 14px; }
  .wizard-avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-audio-grid, .wizard-script-layout { grid-template-columns: 1fr; }
  .wizard-footer { grid-template-columns: 1fr auto 1fr; padding-inline: 10px; }
  .wizard-footer-center { min-width: 0; }
  .wizard-progress > span:not(:last-child)::after { width: 5px; margin-left: 2px; }
  .wizard-progress b { min-width: 26px; width: 26px; height: 26px; line-height: 24px; }
  .guest-brand { min-height: 300px; padding: 28px 22px; }
  .guest-brand h1 { font-size: 36px; }
  .guest-card-wrap { padding: 20px 14px; }
}