:root {
  color-scheme: light;
  --bg: #f1f2f4;
  --surface: #ffffff;
  --surface-soft: #f7f7f8;
  --stage: #1c1d21;
  --stage-raised: #25262b;
  --ink: #191a1e;
  --muted: #727278;
  --line: #dedfe3;
  --line-strong: #c7c8cd;
  --gold: #b58a49;
  --gold-dark: #8c6733;
  --gold-soft: #f4eee5;
  --blue: #286fb5;
  --success: #2a7b43;
  --danger: #bd3934;
  --shadow: 0 18px 42px rgba(20, 21, 24, 0.08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button, input, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }

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

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 16px;
  border-right: 1px solid #e1e2e5;
  background: rgba(250, 250, 251, 0.96);
  backdrop-filter: saturate(160%) blur(20px);
  z-index: 5;
}

.brand { margin-bottom: 28px; }
.brand-lockup { min-height: 126px; display: block; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.brand-wordmark { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.brand-product { min-width: 0; margin-top: 10px; padding: 2px 0 0 12px; border-left: 1px solid var(--gold); display: flex; flex-direction: column; color: var(--ink); }
.brand-product span, .brand-product strong { font-size: 12px; line-height: 1.18; font-weight: 500; }
.brand-product strong { font-weight: 800; }
.brand-product small { margin-top: 8px; color: var(--muted); font-size: 8px; line-height: 1.35; }

.nav-list { display: grid; gap: 6px; }
.nav-item {
  width: 100%;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  color: #53545a;
  text-align: left;
  cursor: pointer;
}
.nav-item:hover { background: #f0f0f2; }
.nav-item.active { border-color: #2a2b2f; background: var(--stage); color: #fff; box-shadow: 0 6px 16px rgba(22, 23, 26, 0.13); }
.nav-item.active .nav-icon { color: #d8b370; }
.nav-icon { font-size: 18px; line-height: 1; }
.talking-icon { font-size: 22px; font-weight: 800; }
.nav-count { min-width: 22px; padding: 2px 6px; border-radius: 10px; background: #e1e1e4; color: #626267; text-align: center; font-size: 11px; }
.nav-item.active .nav-count { background: #34353a; color: #d8d8dc; }
.sidebar-foot { margin-top: auto; }
.connection { display: flex; align-items: center; gap: 8px; margin: 14px 11px 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8e8e93; }
.connection.online .status-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(42, 123, 67, 0.11); }
.connection.warning .status-dot { background: var(--gold); }

.main-content { min-width: 0; padding: 0 30px 52px; }
.topbar { height: 104px; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e1e4; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.product-signature { width: 220px; display: flex; align-items: center; }
.product-signature img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.mobile-brand-lockup { display: none; align-items: center; width: 112px; }
.mobile-wordmark { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.account-button { min-width: 76px; height: 34px; border: 1px solid var(--line-strong); border-radius: 17px; background: #fff; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; color: #3d3e43; cursor: pointer; }
.account-button span { color: var(--gold); font-size: 8px; }
.account-button b { max-width: 90px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow { margin: 0 0 6px; color: var(--gold-dark); font-size: 10px; font-weight: 800; letter-spacing: 0; }
h1 { margin: 0; font-size: 28px; line-height: 1.08; letter-spacing: 0; }
h2 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: 0; }
.mobile-settings { display: none !important; }

.view { display: none; max-width: 1400px; margin: 22px auto 0; }
.view.active { display: block; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 22px; align-items: start; }
.media-column { min-width: 0; display: grid; gap: 22px; }
.section-block { min-width: 0; }
.section-heading { min-height: 38px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-heading > div { display: flex; align-items: center; gap: 10px; }
.section-heading.compact { margin-bottom: 22px; }
.step-number { min-width: 24px; color: var(--gold-dark); font-size: 10px; font-weight: 800; font-variant-numeric: tabular-nums; }
.section-meta { color: var(--muted); font-size: 11px; }

.media-workspace { padding: 18px; border: 1px solid #2b2c31; border-radius: 8px; background: var(--stage); box-shadow: 0 18px 44px rgba(18, 19, 22, 0.13); }
.media-workspace .section-heading { margin-bottom: 12px; padding: 0 2px; }
.media-workspace h2 { color: #f7f7f8; }
.media-workspace .step-number { color: #d2aa67; }
.media-workspace .section-meta { color: #92939a; }
.workspace-product-lockup { display: flex; align-items: center; padding-right: 2px; color: #c5c5ca; }
.workspace-product-lockup span { display: flex; flex-direction: column; gap: 3px; padding-right: 10px; border-right: 1px solid #c7a05f; color: #a8a8ae; font-size: 9px; line-height: 1.2; text-align: right; }
.workspace-product-lockup b { color: #e0bd80; font-size: 8px; letter-spacing: 0; }
.upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dropzone { position: relative; min-height: 390px; border: 1px solid #3a3b41; border-radius: 6px; overflow: hidden; background: var(--stage-raised); cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.dropzone:hover, .dropzone.dragging { border-color: #c09958; background: #292a30; transform: translateY(-1px); }
.dropzone-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #96979e; }
.dropzone-empty strong { margin-top: 8px; color: #f3f3f5; font-size: 15px; }
.dropzone-empty span:last-child { font-size: 11px; }
.upload-symbol { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #4a4b51; border-radius: 50%; background: #303137; color: #d6ad6b; font-size: 21px; }
.upload-symbol.play { padding-left: 3px; font-size: 14px; }
.media-preview { position: absolute; inset: 0; background: #111216; }
.media-preview img, .media-preview video { width: 100%; height: 100%; display: block; object-fit: cover; }
.remove-media { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(18, 19, 22, 0.78); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
.media-name { position: absolute; left: 10px; right: 50px; bottom: 10px; padding: 8px 10px; border-radius: 5px; overflow: hidden; background: rgba(18, 19, 22, 0.76); color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; backdrop-filter: blur(8px); }

.control-panel { position: sticky; top: 18px; padding: 24px; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.field-label { display: block; margin: 19px 0 8px; color: #55565b; font-size: 11px; font-weight: 700; }
.text-input { width: 100%; height: 43px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--surface-soft); color: var(--ink); padding: 0 12px; }
.text-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(181, 138, 73, 0.13); background: #fff; }
.description-input { min-height: 82px; padding-top: 11px; padding-bottom: 11px; resize: vertical; font: inherit; line-height: 1.55; }
.field-hint { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.segmented-control { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 6px; background: #ececef; }
.segmented-control button { min-height: 34px; border: 0; border-radius: 4px; background: transparent; color: #626269; cursor: pointer; font-size: 11px; }
.segmented-control button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.13); font-weight: 700; }
.ratio-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ratio-button { min-width: 0; height: 78px; border: 1px solid var(--line); border-radius: 6px; background: #fafafa; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 12px 8px; text-align: left; cursor: pointer; }
.ratio-button.active { border-color: var(--gold-dark); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold-dark); }
.ratio-button strong { align-self: end; font-size: 12px; }
.ratio-button small { align-self: start; color: var(--muted); font-size: 10px; }
.ratio-shape { grid-row: 1 / 3; place-self: center; border: 1.5px solid #6e6f74; border-radius: 1px; }
.ratio-button.active .ratio-shape { border-color: var(--gold-dark); }
.ratio-shape.portrait { width: 12px; height: 21px; }
.ratio-shape.landscape { width: 22px; height: 13px; }
.ratio-shape.square { width: 17px; height: 17px; }
.slider-field { margin-top: 21px; }
.slider-field > div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #55565b; font-size: 11px; font-weight: 700; }
.slider-field output { min-width: 38px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; height: 4px; margin: 8px 0; accent-color: var(--gold-dark); cursor: pointer; }
.advanced-settings { margin-top: 21px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.advanced-settings summary { min-height: 44px; list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; cursor: pointer; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings[open] summary span { transform: rotate(180deg); }
.advanced-content { padding: 0 0 12px; }
.compact-slider { margin-top: 6px; }
.select-row, .toggle-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ececef; color: #55565b; font-size: 11px; font-weight: 700; }
.select-row select { border: 0; outline: none; background: transparent; color: var(--ink); text-align: right; }
.switch { position: relative; width: 38px; height: 22px; }
.switch input { position: absolute; opacity: 0; }
.switch i { position: absolute; inset: 0; border-radius: 11px; background: #c8c9ce; transition: background 160ms ease; }
.switch i::after { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24); transition: transform 160ms ease; }
.switch input:checked + i { background: var(--gold-dark); }
.switch input:checked + i::after { transform: translateX(16px); }
.control-summary { margin: 18px 0; padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.control-summary div { display: flex; flex-direction: column; gap: 4px; }
.control-summary div:last-child { text-align: right; }
.control-summary span { color: var(--muted); font-size: 10px; }
.control-summary strong { font-size: 12px; }
.control-summary .estimate-summary { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ececef; }
.control-summary .estimate-summary strong { color: var(--gold-dark); }
.generate-button { width: 100%; height: 50px; border: 0; border-radius: 6px; background: var(--stage); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 17px; font-weight: 700; cursor: pointer; transition: background 160ms ease, transform 160ms ease; }
.generate-button > span:last-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #17181b; }
.generate-button:hover { background: #292a2f; }
.generate-button:active { transform: scale(0.995); }
.generate-button:disabled { background: #929399; cursor: wait; }
.reset-button, .refresh-button { border: 0; background: transparent; color: var(--gold-dark); cursor: pointer; font-size: 11px; font-weight: 700; }

.output-block { margin-top: 4px; }
.status-badge { padding: 5px 9px; border-radius: 12px; background: #e7e7ea; color: #59595e; font-size: 11px; font-weight: 700; }
.status-badge.running { background: #e7f0f9; color: var(--blue); }
.status-badge.success { background: #e8f3eb; color: var(--success); }
.status-badge.failed { background: #faeae9; color: var(--danger); }
.result-stage { position: relative; min-height: 420px; max-height: 680px; border-radius: 8px; overflow: hidden; background: var(--stage); display: grid; place-items: center; }
.result-stage video, .result-stage img { width: 100%; height: 100%; max-height: 680px; object-fit: contain; background: #111216; }
.processing-state { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; text-align: center; }
.processing-state > span:last-child { color: #a0a1a8; font-size: 11px; }
.progress-orbit { width: 48px; height: 48px; margin-bottom: 12px; border: 1px solid #4b4c52; border-radius: 50%; position: relative; animation: rotate 1.7s linear infinite; }
.progress-orbit span { position: absolute; width: 7px; height: 7px; top: -4px; left: 20px; border-radius: 50%; background: #d4aa66; }
@keyframes rotate { to { transform: rotate(360deg); } }
.task-footer { padding-top: 12px; }
.progress-track { height: 3px; overflow: hidden; border-radius: 2px; background: #dadae0; }
.progress-track span { display: block; width: 8%; height: 100%; background: var(--gold); transition: width 300ms ease; }
.task-footer-row { display: flex; align-items: center; gap: 14px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.task-timing { margin-left: auto; font-variant-numeric: tabular-nums; }
.task-result-actions { display: flex; align-items: center; gap: 12px; }
.text-button { border: 0; background: transparent; color: var(--gold-dark); padding: 0; text-decoration: none; font-weight: 700; cursor: pointer; }
.text-button:disabled { color: var(--muted); cursor: wait; }

.product-intro { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 0 2px 14px; border-bottom: 1px solid #d8d9dd; }
.product-intro > div { display: flex; align-items: center; gap: 13px; }
.product-intro strong { font-size: 13px; }
.product-intro p { max-width: 520px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: right; }
.product-index { color: var(--gold-dark); font-size: 9px; font-weight: 800; }
.talking-workspace { padding-bottom: 16px; }
.talking-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.talking-photo-zone, .audio-dropzone { min-height: 390px; }
.audio-empty { gap: 14px; padding: 24px; }
.audio-empty strong { margin: 0; }
.audio-empty-copy { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.audio-empty-copy span { color: #999aa1; font-size: 9px; }
.audio-source-actions { width: min(100%, 250px); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.audio-source-actions button { min-height: 40px; border: 1px solid #4a4b51; border-radius: 5px; background: #303137; color: #eeeef0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; font-size: 10px; font-weight: 700; cursor: pointer; }
.audio-source-actions button:hover { border-color: #b58a49; background: #36373d; }
.audio-source-actions button > span:first-child { color: #d6ad6b; font-size: 14px; }
.record-dot { width: 8px; height: 8px; border-radius: 50%; background: #d7544f; }
.audio-wave { width: 46px; height: 46px; border: 1px solid #4a4b51; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; }
.audio-wave i { width: 2px; border-radius: 1px; background: #d6ad6b; }
.audio-wave i:nth-child(1), .audio-wave i:nth-child(5) { height: 9px; }
.audio-wave i:nth-child(2), .audio-wave i:nth-child(4) { height: 18px; }
.audio-wave i:nth-child(3) { height: 25px; }
.audio-preview { position: absolute; inset: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; align-items: center; gap: 13px; padding: 24px 54px 24px 24px; background: #25262b; color: #fff; }
.audio-preview > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.audio-preview .media-name { position: static; padding: 0; background: transparent; font-size: 12px; }
.audio-preview small { overflow: hidden; color: #999aa1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.audio-preview audio { width: 100%; height: 36px; grid-column: 1 / -1; }
.audio-disc { width: 40px; height: 40px; border: 1px solid #4a4b51; border-radius: 50%; display: grid; place-items: center; padding-left: 2px; color: #d6ad6b; font-size: 11px; }
.recording-state { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-content: center; align-items: center; gap: 18px 12px; padding: 24px; background: #25262b; color: #fff; }
.recording-state > div { display: flex; flex-direction: column; gap: 4px; }
.recording-state strong { font-size: 12px; }
.recording-state time { color: #b5b6bb; font-size: 10px; font-variant-numeric: tabular-nums; }
.recording-state button { min-height: 38px; grid-column: 1 / -1; border: 1px solid #78413e; border-radius: 5px; background: #3a2829; color: #f2cac8; padding: 0 13px; font-size: 10px; font-weight: 700; cursor: pointer; }
.recording-pulse { width: 13px; height: 13px; justify-self: center; border-radius: 50%; background: #df5b55; box-shadow: 0 0 0 7px rgba(223, 91, 85, 0.14); animation: recordPulse 1.4s ease-in-out infinite; }
@keyframes recordPulse { 50% { box-shadow: 0 0 0 12px rgba(223, 91, 85, 0.03); } }
.talking-control-panel { border-top-color: #316d79; }
.topic-row { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; }
.draft-button { min-height: 43px; border: 1px solid #afc8cc; border-radius: 6px; background: #edf5f6; color: #285d66; font-size: 11px; font-weight: 700; cursor: pointer; }
.draft-button:hover { border-color: #6d9ea6; background: #e3eff1; }
.draft-button:disabled { border-color: var(--line); background: #ededf0; color: var(--muted); cursor: wait; }
.talking-options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.talking-options-row .segmented-control button { padding: 0 5px; }
.script-label { display: flex; align-items: center; justify-content: space-between; }
.script-label span { color: var(--muted); font-size: 9px; font-weight: 500; font-variant-numeric: tabular-nums; }
.talking-script-input { min-height: 172px; padding-top: 12px; padding-bottom: 12px; resize: vertical; font: inherit; line-height: 1.7; }
.action-prompt-input { min-height: 66px; padding-top: 10px; padding-bottom: 10px; resize: vertical; font: inherit; line-height: 1.55; }
.talking-summary { grid-template-columns: 1fr 1fr; }
.talking-result-stage { min-height: 520px; }
.talking-history { margin-top: 38px; padding-top: 25px; border-top: 1px solid #d8d9dd; }
.talking-history-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.talking-history-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(20, 21, 24, 0.06); }
.talking-history-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage); display: grid; place-items: center; }
.talking-history-media video, .talking-history-media img { width: 100%; height: 100%; display: block; object-fit: contain; }
.talking-history-body { padding: 12px; }
.talking-history-body h3 { margin: 0 0 7px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.talking-history-body p { min-height: 31px; margin: 0 0 9px; overflow: hidden; color: #696a70; display: -webkit-box; font-size: 10px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.talking-history-actions { display: flex; gap: 7px; margin-top: 11px; }
.talking-history-actions button { flex: 1; min-height: 34px; border: 1px solid #d5bf9e; border-radius: 5px; background: var(--gold-soft); color: var(--gold-dark); font-size: 10px; font-weight: 700; cursor: pointer; }
.talking-history-placeholder { display: flex; flex-direction: column; align-items: center; gap: 7px; color: #d5b474; }
.talking-history-placeholder span { font-size: 24px; }
.talking-history-placeholder small { color: #999aa1; font-size: 9px; }

.image-control-panel { border-top-color: #9d783f; }
.image-reference-zone { width: 100%; min-height: 390px; display: block; }
.image-reference-hint { margin: 11px 2px 0; color: #92939a; font-size: 10px; line-height: 1.5; }
.image-reference-hint.required { color: #e3c58f; }
.image-prompt-label { display: flex; align-items: center; justify-content: space-between; }
.image-prompt-label span { color: var(--muted); font-size: 9px; font-weight: 500; font-variant-numeric: tabular-nums; }
.image-prompt-input { min-height: 146px; padding-top: 12px; padding-bottom: 12px; resize: vertical; font: inherit; line-height: 1.65; }
.image-prompt-button { width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-color: #d2bd9a; background: #f6f0e7; color: #76572d; }
.image-prompt-button:hover { border-color: var(--gold); background: #efe4d4; }
.image-prompt-button b { color: var(--gold-dark); font-size: 13px; }
.image-style-control { grid-template-columns: repeat(4, 1fr); }
.image-ratio-options { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.image-ratio-options .ratio-button { height: 72px; grid-template-columns: 1fr; grid-template-rows: 27px 18px 14px; padding: 7px 3px; text-align: center; }
.image-ratio-options .ratio-shape { grid-row: 1; }
.ratio-shape.tall { width: 10px; height: 23px; }
.image-ratio-options strong, .image-ratio-options small { align-self: center; }
.image-result-stage { min-height: 480px; max-height: none; padding: 12px; }
.image-result-grid { width: 100%; min-height: 456px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; }
.image-result-grid.single { grid-template-columns: 1fr; }
.image-result-item { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #393a40; border-radius: 6px; background: #111216; display: grid; place-items: center; }
.image-result-item img { width: 100%; height: 100%; max-height: 620px; object-fit: contain; }
.image-result-download { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.32); border-radius: 50%; background: rgba(19,20,24,0.78); color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; backdrop-filter: blur(8px); }
.image-history-media { aspect-ratio: 1 / 1; }
.image-history-media img { object-fit: cover; }

.public-gallery { margin-top: 38px; padding-top: 25px; border-top: 1px solid #d8d9dd; }
.gallery-heading { min-height: 48px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gallery-heading h2 { font-size: 20px; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 10px 26px rgba(20, 21, 24, 0.06); }
.gallery-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage); display: grid; place-items: center; }
.gallery-media video, .gallery-media img { width: 100%; height: 100%; display: block; object-fit: contain; }
.gallery-source { position: absolute; left: 9px; top: 9px; z-index: 4; padding: 5px 7px; border-radius: 4px; background: rgba(22, 23, 26, 0.78); color: #e2c28b; font-size: 9px; backdrop-filter: blur(8px); }
.gallery-body { padding: 12px; }
.gallery-body h3 { margin: 0 0 6px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.gallery-description { min-height: 31px; margin: 0 0 8px; overflow: hidden; color: #696a70; display: -webkit-box; font-size: 10px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.gallery-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.remix-button { width: 100%; height: 36px; margin-top: 12px; border: 1px solid #d5bf9e; border-radius: 5px; background: var(--gold-soft); color: var(--gold-dark); font-size: 11px; font-weight: 700; cursor: pointer; }
.remix-button:hover { border-color: var(--gold); background: #efe4d4; }
.gallery-empty { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); }
.gallery-empty span { color: var(--gold); font-size: 24px; }
.gallery-empty strong { font-size: 12px; }

.creations-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.compact-tabs { width: 280px; }
.refresh-button { width: 36px; height: 36px; border-radius: 50%; background: #e4e4e7; color: var(--ink); font-size: 19px; }
.creation-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 8px; background: var(--line); box-shadow: var(--shadow); }
.creation-item { min-height: 92px; display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 14px; background: var(--surface); }
.creation-thumb { position: relative; width: 62px; height: 62px; border-radius: 6px; overflow: hidden; background: var(--stage); color: #d5b474; display: grid; place-items: center; }
.creation-thumb video, .creation-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-media video[data-preview-video], .creation-thumb video[data-preview-video], .talking-history-media video[data-preview-video] { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 180ms ease; }
.gallery-media.frame-ready video[data-preview-video], .creation-thumb.frame-ready video[data-preview-video], .talking-history-media.frame-ready video[data-preview-video] { opacity: 1; }
.video-fallback { position: absolute; inset: 0; z-index: 0; color: #d5b474; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; background: #1b1c20; transition: opacity 180ms ease; }
.video-fallback b { width: 38px; height: 38px; border: 1px solid rgba(213, 180, 116, 0.56); border-radius: 50%; display: grid; place-items: center; padding-left: 2px; font-size: 13px; }
.video-fallback small { color: #a3a4aa; font-size: 9px; }
.frame-ready .video-fallback { opacity: 0; }
.preview-error .video-fallback { z-index: 2; opacity: 1; }
.preview-error video[data-preview-video] { opacity: 0; }
.preview-play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid rgba(255,255,255,0.46); border-radius: 50%; background: rgba(16,17,20,0.74); color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; backdrop-filter: blur(9px); transition: background 160ms ease, transform 160ms ease, opacity 160ms ease; }
.preview-play:hover { background: rgba(16,17,20,0.9); transform: scale(1.05); }
.preview-play.playing { opacity: 0; }
.gallery-media:hover .preview-play.playing, .preview-play.playing:focus-visible { opacity: 1; }
.preview-play span { display: block; font-size: 13px; line-height: 1; }
.creation-thumb .preview-play { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.creation-thumb .preview-play span { font-size: 10px; }
.creation-thumb .video-fallback small { display: none; }
.creation-thumb .video-fallback b { width: 26px; height: 26px; font-size: 9px; }
.creation-info { min-width: 0; }
.creation-info h3 { margin: 0 0 6px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.creation-info p { margin: 0; color: var(--muted); font-size: 11px; }
.creation-actions { display: flex; align-items: center; gap: 12px; }
.creation-actions a, .creation-actions button { border: 0; background: transparent; color: var(--gold-dark); font-size: 11px; font-weight: 700; text-decoration: none; cursor: pointer; }
.empty-state { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); }
.empty-state h2 { margin: 12px 0 20px; color: var(--ink); }
.empty-symbol { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #d8c4a5; border-radius: 50%; background: var(--gold-soft); color: var(--gold-dark); font-size: 22px; }

.icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #e8e8eb; display: grid; place-items: center; cursor: pointer; font-size: 18px; }
.settings-dialog { width: min(500px, calc(100vw - 32px)); padding: 0; border: 0; border-top: 3px solid var(--gold); border-radius: 8px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24); }
.settings-dialog::backdrop { background: rgba(18, 19, 22, 0.34); backdrop-filter: blur(11px); }
.settings-sheet { padding: 24px; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.dialog-header h2 { font-size: 20px; }
.dialog-title-group { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dialog-wordmark { width: 142px; height: auto; flex: 0 0 auto; display: block; mix-blend-mode: multiply; }
.password-field { position: relative; }
.password-field .text-input { padding-right: 44px; }
.password-field button { position: absolute; right: 6px; top: 5px; width: 34px; height: 33px; border: 0; background: transparent; cursor: pointer; }
.privacy-note { display: flex; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.lock-symbol { color: var(--success); font-size: 8px; padding-top: 3px; }
.runninghub-links { margin-top: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.runninghub-links a { min-width: 0; min-height: 66px; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; padding: 10px 12px; color: var(--ink); text-decoration: none; }
.runninghub-links a:nth-child(odd) { border-right: 1px solid var(--line); }
.runninghub-links a:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.runninghub-links a:hover { background: #f5f2ec; }
.runninghub-links span { grid-row: 1 / 3; align-self: center; color: var(--gold-dark); font-size: 9px; font-weight: 800; }
.runninghub-links strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.runninghub-links small { color: var(--muted); font-size: 9px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.primary-button, .secondary-button { min-height: 38px; border-radius: 6px; padding: 0 15px; cursor: pointer; font-weight: 700; }
.primary-button { border: 0; background: var(--stage); color: #fff; }
.secondary-button { border: 1px solid var(--line-strong); background: #fff; color: var(--ink); }
.auth-dialog { width: min(880px, calc(100vw - 32px)); max-width: 880px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-top: 3px solid var(--gold); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 30px 90px rgba(20, 21, 24, 0.28); }
.auth-dialog::backdrop { background: rgba(28, 29, 33, 0.4); backdrop-filter: blur(12px); }
.auth-sheet { min-height: 560px; max-height: calc(100dvh - 35px); display: grid; grid-template-columns: minmax(270px, 34%) minmax(0, 1fr); overflow: hidden; }
.auth-brand-panel { position: relative; min-width: 0; padding: 38px; overflow: hidden; border-right: 1px solid #e0e1e4; background: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.auth-brand-panel::before, .auth-brand-panel::after { content: ""; position: absolute; pointer-events: none; }
.auth-brand-panel::before { left: 38px; top: 214px; width: 54px; height: 1px; background: var(--gold); }
.auth-brand-panel::after { left: 38px; right: 38px; bottom: 88px; height: 1px; background: #e0e1e4; }
.auth-master-lockup { position: relative; z-index: 1; max-width: 250px; display: block; }
.auth-wordmark { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
.auth-product-name { margin-top: 28px; padding-left: 22px; border-left: 1px solid var(--gold); display: flex; flex-direction: column; color: var(--ink); }
.auth-product-name span, .auth-product-name strong { font-size: 31px; line-height: 1; font-weight: 300; }
.auth-product-name strong { margin-top: 5px; font-weight: 750; }
.auth-brand-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #707176; }
.auth-brand-footer span { font-size: 10px; }
.auth-brand-footer b { color: #d5ae69; font-size: 11px; }
.auth-content { min-width: 0; min-height: 0; padding: 44px 48px; overflow-y: auto; background: #f7f7f8; display: flex; flex-direction: column; justify-content: center; }
.auth-content > * { width: min(100%, 430px); margin-left: auto; margin-right: auto; }
.auth-content .dialog-header { align-items: flex-start; gap: 24px; }
.auth-content .dialog-header h2 { font-size: 29px; }
.guest-button { min-height: 34px; flex: 0 0 auto; border: 0; border-bottom: 1px solid #d2b684; background: transparent; color: var(--gold-dark); padding: 0 0 2px; cursor: pointer; font-size: 11px; font-weight: 700; }
.phone-login-note { min-height: 62px; margin-bottom: 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; }
.phone-login-note > span { color: var(--gold-dark); font-size: 10px; font-weight: 800; }
.phone-login-note div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.phone-login-note strong { font-size: 12px; }
.phone-login-note small { color: var(--muted); font-size: 10px; }
.auth-content .field-label { margin-top: 15px; }
.phone-input-field { height: 44px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; overflow: hidden; }
.phone-input-field > span { height: 24px; border-right: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: 11px; }
.phone-input-field .text-input { height: 42px; border: 0; border-radius: 0; background: transparent; }
.phone-input-field:focus-within { border-color: var(--gold-dark); box-shadow: 0 0 0 2px rgba(161, 121, 61, 0.12); }
.auth-submit { width: 100%; height: 48px; margin-top: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 17px; }
.auth-submit b { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--stage); display: grid; place-items: center; }
.auth-privacy { display: flex; gap: 8px; margin: 14px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.auth-privacy span { color: var(--success); font-size: 7px; padding-top: 4px; }
.account-panel { min-height: 310px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.account-avatar { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--stage); color: #d7af6d; font-size: 20px; font-weight: 800; }
.account-panel strong { font-size: 17px; }
.account-panel span { margin-top: 5px; color: var(--muted); font-size: 11px; }
.account-panel .secondary-button { margin-top: 28px; }
.download-dialog { width: min(520px, calc(100vw - 32px)); max-width: 520px; margin: auto; padding: 0; border: 0; border-top: 3px solid var(--gold); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 70px rgba(20, 21, 24, 0.26); }
.download-dialog::backdrop { background: rgba(28, 29, 33, 0.36); backdrop-filter: blur(9px); }
.download-sheet { padding: 24px; background: #fff; }
.download-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.download-header h2 { margin-top: 5px; font-size: 21px; }
.download-file-row { min-width: 0; margin-top: 26px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.download-file-icon { width: 42px; height: 42px; border: 1px solid #d8c4a5; border-radius: 50%; background: var(--gold-soft); display: grid; place-items: center; color: var(--gold-dark); font-size: 19px; }
.download-file-row div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.download-file-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.download-file-row small { color: var(--muted); font-size: 10px; }
.download-file-row > b { min-width: 42px; text-align: right; color: var(--gold-dark); font-size: 13px; }
.download-progress-track { height: 7px; margin-top: 18px; overflow: hidden; border-radius: 4px; background: #e8e8eb; }
.download-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold); transition: width 160ms ease; }
.download-progress-track.indeterminate span { width: 36%; animation: download-progress 1.2s ease-in-out infinite; }
.download-status { min-height: 34px; margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.download-background-button { width: 100%; margin-top: 14px; }
@keyframes download-progress { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: min(440px, calc(100vw - 32px)); padding: 11px 16px; border-left: 3px solid var(--gold); border-radius: 6px; background: rgba(28, 29, 33, 0.96); color: #fff; box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { border-left-color: #e16b64; background: rgba(137, 35, 31, 0.97); }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
  .sidebar { padding-left: 10px; padding-right: 10px; }
  .brand { display: none; }
  .brand-product, .nav-item > span:nth-child(2), .nav-count, .connection span:last-child { display: none; }
  .nav-item { grid-template-columns: 1fr; place-items: center; padding: 0; }
  .connection { justify-content: center; margin-left: 0; margin-right: 0; }
  .studio-grid { grid-template-columns: 1fr; }
  .control-panel { position: static; }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .talking-history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .talking-control-panel { position: static; }
}

@media (max-width: 680px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; top: auto; bottom: 0; width: 100%; height: 70px; flex-direction: row; align-items: center; border: 0; border-top: 1px solid #323338; padding: 7px 14px max(7px, env(safe-area-inset-bottom)); background: rgba(28, 29, 33, 0.96); backdrop-filter: blur(18px); }
  .brand, .sidebar-foot .nav-item, .connection { display: none; }
  .nav-list { width: 100%; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .nav-item { min-height: 48px; border: 0; grid-template-columns: 1fr; place-items: center; gap: 2px; color: #d5d5d9; font-size: 10px; }
  .nav-item:hover { background: #25262b; }
  .nav-item.active { background: #303136; color: #fff; box-shadow: none; }
  .nav-item > span:nth-child(2) { display: block; }
  .nav-icon { font-size: 17px; }
  .main-content { padding: 0 16px 94px; }
  .topbar { height: 96px; }
  .topbar-actions { gap: 8px; }
  .product-signature { display: none; }
  .account-button { min-width: 34px; width: 34px; padding: 0; }
  .account-button b { display: none; }
  .settings-dialog .dialog-title-group { gap: 10px; }
  .settings-dialog .dialog-wordmark { width: 84px; }
  .settings-dialog .dialog-header h2 { font-size: 18px; white-space: nowrap; }
  .runninghub-links { grid-template-columns: 1fr; }
  .runninghub-links a:nth-child(odd) { border-right: 0; }
  .runninghub-links a:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .mobile-settings { display: grid !important; }
  .mobile-brand-lockup { display: flex; }
  h1 { font-size: 24px; }
  .view { margin-top: 16px; }
  .studio-grid { gap: 18px; }
  .media-workspace { padding: 12px; }
  .upload-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dropzone { min-height: 220px; }
  .dropzone-empty span:last-child { display: none; }
  .workspace-product-lockup span { padding-right: 7px; font-size: 8px; }
  .workspace-product-lockup span { font-size: 8px; }
  .control-panel { padding: 18px; }
  .ratio-button { height: 88px; grid-template-columns: 1fr; grid-template-rows: 28px 18px 16px; text-align: center; }
  .ratio-shape { grid-row: 1; }
  .ratio-button strong, .ratio-button small { align-self: center; }
  .result-stage { min-height: 360px; }
  .product-intro { align-items: flex-start; flex-direction: column; gap: 7px; }
  .product-intro p { text-align: left; }
  .talking-upload-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .talking-photo-zone, .audio-dropzone { min-height: 220px; }
  .audio-empty { gap: 8px; padding: 14px 8px; }
  .audio-wave { width: 38px; height: 38px; }
  .audio-empty-copy span { display: none; }
  .audio-source-actions { width: 100%; grid-template-columns: 1fr; gap: 6px; }
  .audio-source-actions button { min-height: 34px; padding: 0 6px; font-size: 9px; }
  .audio-preview { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; padding: 16px 10px 44px; text-align: center; }
  .audio-preview .audio-disc { display: none; }
  .audio-preview > div { align-items: center; max-width: 100%; }
  .audio-preview small { display: none; }
  .audio-preview audio { grid-column: 1; height: 32px; }
  .recording-state { grid-template-columns: 1fr; justify-items: center; gap: 12px; padding: 16px 10px; text-align: center; }
  .recording-state > div { align-items: center; }
  .recording-state button { grid-column: 1; width: 100%; }
  .talking-options-row { grid-template-columns: 1fr; }
  .talking-result-stage { min-height: 460px; }
  .talking-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .talking-history-body { padding: 10px; }
  .image-reference-zone { min-height: 290px; }
  .image-ratio-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .image-ratio-options .ratio-button { height: 70px; }
  .image-result-stage { min-height: 360px; }
  .image-result-grid { min-height: 336px; }
  .task-footer-row { flex-wrap: wrap; gap: 5px 10px; }
  .task-timing { margin-left: 0; order: 3; width: 100%; }
  .task-result-actions { margin-left: auto; }
  .creation-item { grid-template-columns: 52px minmax(0, 1fr); }
  .creation-thumb { width: 52px; height: 52px; }
  .creation-actions { grid-column: 2; justify-content: flex-start; }
  .dialog-wordmark { width: 112px; }
  .public-gallery { margin-top: 26px; padding-top: 20px; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gallery-body { padding: 10px; }
  .auth-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .auth-sheet { min-height: 0; max-height: calc(100dvh - 23px); grid-template-columns: 1fr; grid-template-rows: 146px minmax(0, 1fr); }
  .auth-brand-panel { min-height: 146px; padding: 18px 20px; border-right: 0; border-bottom: 1px solid #e0e1e4; }
  .auth-brand-panel::before { left: 20px; top: 92px; width: 40px; }
  .auth-brand-panel::after { left: 20px; right: 20px; bottom: 38px; }
  .auth-master-lockup { width: min(100%, 230px); }
  .auth-wordmark { width: 190px; }
  .auth-product-name { margin-top: 13px; padding-left: 14px; flex-direction: row; gap: 5px; }
  .auth-product-name span, .auth-product-name strong { margin-top: 0; font-size: 20px; }
  .auth-brand-footer span { font-size: 8px; }
  .auth-brand-footer b { font-size: 9px; }
  .auth-content { min-height: 0; padding: 22px 20px max(22px, env(safe-area-inset-bottom)); justify-content: flex-start; }
  .auth-content .dialog-header { margin-bottom: 16px; }
  .auth-content .dialog-header h2 { font-size: 23px; }
  .guest-button { margin-top: 0; font-size: 10px; }
  .phone-login-note { min-height: 54px; margin-bottom: 12px; }
  .auth-content .field-label { margin-top: 12px; }
  .auth-submit { margin-top: 20px; }
  .download-dialog { width: calc(100vw - 20px); }
  .download-sheet { padding: 20px; }
  .download-file-row { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .download-file-icon { width: 38px; height: 38px; }
}

@media (max-width: 380px) {
  .mobile-brand-lockup { display: none; }
  .settings-dialog .dialog-wordmark { display: none; }
  .topbar { height: 84px; }
  h1 { font-size: 21px; }
  .auth-sheet { grid-template-rows: 132px minmax(0, 1fr); }
  .auth-brand-panel { min-height: 132px; }
  .auth-wordmark { width: 166px; }
  .auth-product-name span, .auth-product-name strong { font-size: 18px; }
  .auth-brand-panel::before { top: 84px; }
  .auth-brand-panel::after { bottom: 32px; }
  .auth-content { padding-top: 18px; }
  .auth-content .dialog-header { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: 0.001ms !important; }
}