:root {
  color-scheme: dark;
  --bg: #090a0f;
  --panel: rgba(17, 18, 25, 0.76);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f4f2ea;
  --muted: #96979e;
  --dim: #6d6e76;
  --accent: #f2cb70;
  --accent-deep: #d98545;
  --danger: #ff8d83;
  --success: #8fd0a3;
  --ease: cubic-bezier(.2, .75, .25, 1);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.ambient { position: fixed; z-index: -1; border-radius: 999px; filter: blur(110px); pointer-events: none; opacity: .32; }
.ambient-a { width: 420px; height: 420px; top: 12%; right: -160px; background: #6a4f9c; }
.ambient-b { width: 360px; height: 360px; bottom: -120px; left: -130px; background: #8c4b2d; }

.topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
  padding: 0 clamp(20px, 3.5vw, 58px);
  border-bottom: 1px solid var(--line);
  background: rgba(9, 10, 15, .72);
  backdrop-filter: blur(22px);
}
.brand { display: inline-flex; align-items: center; gap: 13px; }
.brand-mark { position: relative; display: grid; place-items: center; width: 34px; height: 34px; }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(242, 203, 112, .36); border-radius: 50%; }
.brand-mark::after { inset: 8px -3px; transform: rotate(45deg); }
.brand-mark i { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9de, var(--accent) 48%, var(--accent-deep)); box-shadow: 0 0 20px rgba(242, 203, 112, .68); }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 16px; letter-spacing: .18em; font-weight: 650; }
.brand-copy small { color: var(--dim); font-size: 8px; letter-spacing: .32em; }
.topbar-actions { display: flex; align-items: center; gap: 24px; }
.service-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.service-state i, .stage-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 11px rgba(143, 208, 163, .74); }
.login-trigger, .account-button { min-height: 40px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 18px; background: rgba(255, 255, 255, .045); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.login-trigger:hover, .account-button:hover { border-color: rgba(242, 203, 112, .52); background: rgba(242, 203, 112, .07); transform: translateY(-1px); }
.account-area { display: flex; align-items: center; gap: 10px; }
.balance-chip { display: flex; align-items: center; gap: 10px; padding: 0 5px 0 14px; min-height: 42px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); }
.balance-chip > span { display: flex; flex-direction: column; }
.balance-chip small { color: var(--dim); font-size: 9px; letter-spacing: .12em; }
.balance-chip strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.balance-chip a { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--accent); color: #17130b; font-size: 19px; }
.account-button { display: flex; align-items: center; gap: 9px; padding: 0 11px 0 5px; }
.avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: linear-gradient(135deg, #5a5568, #2a2931); color: #fff8e9; font-size: 11px; }
.account-button span:last-child { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

.primary-nav { position: absolute; left: 50%; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); }
.primary-nav button { min-height: 36px; border: 0; border-radius: 999px; padding: 0 16px; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; transition: color .2s, background .2s; }
.primary-nav button:hover, .primary-nav button.active { color: var(--text); background: rgba(255,255,255,.055); }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 34px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.mode-switch button { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; font-weight: 650; transition: color .25s, background .25s, box-shadow .25s; }
.mode-switch button svg { width: 15px; fill: currentColor; }
.mode-switch button.active { color: #211a0d; background: var(--accent); box-shadow: 0 7px 22px rgba(197,125,54,.16); }
.mode-switch button:disabled { cursor: wait; opacity: .62; }
.mode-count { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; background: rgba(255,255,255,.08); font-size: 8px; }
.mode-switch button.active .mode-count { background: rgba(25,20,10,.13); }

.availability { color: #8fcca1 !important; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; height: 47px; appearance: none; border: 1px solid var(--line); border-radius: 12px; outline: 0; padding: 0 42px 0 14px; background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s; }
.select-wrap select:focus { border-color: rgba(242,203,112,.45); background: rgba(255,255,255,.052); }
.select-wrap select:disabled { cursor: not-allowed; color: var(--dim); }
.select-wrap option, .llm-picker option { color: #eeeae1; background: #171820; }
.select-wrap svg { position: absolute; right: 13px; top: 50%; width: 17px; transform: translateY(-50%); fill: var(--dim); pointer-events: none; }
.model-description, .refine-note { margin: -2px 0 0; color: var(--dim); font-size: 9px; line-height: 1.55; }

.refine-row { display: flex; align-items: stretch; gap: 8px; }
.refine-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-width: 106px; min-height: 39px; border: 1px solid rgba(242,203,112,.3); border-radius: 10px; background: rgba(242,203,112,.065); color: var(--accent); cursor: pointer; font-size: 10px; font-weight: 650; transition: background .2s, transform .2s; }
.refine-button:hover:not(:disabled) { background: rgba(242,203,112,.12); transform: translateY(-1px); }
.refine-button:disabled { cursor: not-allowed; opacity: .42; }
.refine-button svg { width: 14px; fill: currentColor; }
.refine-button.loading svg { animation: twinkle .8s linear infinite; }
.llm-toggle { display: inline-flex; flex: 0 0 auto; min-height: 39px; align-items: center; gap: 7px; color: var(--dim); cursor: pointer; font-size: 9px; white-space: nowrap; }
.llm-toggle input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.llm-toggle-track { position: relative; display: inline-flex; width: 31px; height: 18px; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255,255,255,.06); transition: background .18s, border-color .18s; }
.llm-toggle-track i { display: block; width: 12px; height: 12px; margin-left: 3px; border-radius: 50%; background: #8d8c91; transition: transform .18s, background .18s; }
.llm-toggle input:checked + .llm-toggle-track { border-color: rgba(242,203,112,.55); background: rgba(242,203,112,.2); }
.llm-toggle input:checked + .llm-toggle-track i { background: var(--accent); transform: translateX(12px); }
.llm-toggle input:focus-visible + .llm-toggle-track { outline: 2px solid var(--accent); outline-offset: 3px; }
.llm-toggle:has(input:disabled) { cursor: not-allowed; opacity: .42; }
.llm-picker { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; min-height: 39px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: rgba(255,255,255,.025); color: var(--dim); font-size: 9px; }
.llm-picker select { min-width: 0; flex: 1; appearance: none; overflow: hidden; border: 0; outline: 0; background: transparent; color: #c7c5be; text-overflow: ellipsis; font-size: 9px; }

.option-row { flex-direction: row; align-items: end; justify-content: space-between; gap: 14px; }
.option-group { display: flex; min-width: 0; flex-direction: column; gap: 10px; }
.option-row .price-note { max-width: 128px; padding-bottom: 8px; text-align: right; line-height: 1.45; }
.model-empty { border-left: 1px solid rgba(242,203,112,.44); padding: 4px 0 4px 15px; }
.model-empty span { color: #dcd7ca; font-size: 11px; }
.model-empty p { margin: 6px 0 0; color: var(--dim); font-size: 9px; line-height: 1.6; }
.generate-button:disabled { cursor: not-allowed; filter: saturate(.35); opacity: .5; }

.workspace { display: grid; grid-template-columns: minmax(370px, 445px) minmax(0, 1fr); min-height: calc(100svh - 82px); scroll-margin-top: 20px; }
.composer { display: flex; flex-direction: column; padding: clamp(34px, 4.3vw, 66px) clamp(24px, 3.4vw, 52px) 42px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(15, 16, 22, .78), rgba(10, 11, 16, .45)); }
.eyebrow { color: var(--accent); font-size: 9px; line-height: 1; letter-spacing: .32em; font-weight: 700; }
.composer-heading h1 { margin: 19px 0 14px; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(39px, 4.1vw, 61px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; }
.composer-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.settings-panel { display: flex; flex-direction: column; gap: 24px; margin-top: clamp(32px, 4vw, 56px); }
.field-block { display: flex; flex-direction: column; gap: 11px; }
.field-label-row { display: flex; justify-content: space-between; align-items: center; }
.field-label, .field-label-row label { color: #d8d6d0; font-size: 12px; font-weight: 600; letter-spacing: .05em; }
.field-label-row > span, .price-note { color: var(--dim); font-size: 10px; }
.price-note { color: #bcb08c !important; }
.prompt-wrap { position: relative; }
textarea { width: 100%; min-height: 142px; resize: vertical; border: 1px solid var(--line); border-radius: 16px; outline: 0; padding: 16px 48px 16px 17px; color: var(--text); background: rgba(255,255,255,.035); line-height: 1.72; font-size: 13px; transition: border-color .25s, box-shadow .25s, background .25s; }
textarea::placeholder { color: #5d5f68; }
textarea:focus { border-color: rgba(242, 203, 112, .45); background: rgba(255,255,255,.052); box-shadow: 0 0 0 3px rgba(242, 203, 112, .06); }
.reference-mention-picker { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; max-height: 238px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 13px; padding: 8px; background: rgba(20,21,28,.98); box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.reference-mention-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: 17px 14px; column-gap: 7px; align-items: center; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 5px; background: rgba(255,255,255,.025); color: var(--text); cursor: pointer; text-align: left; }
.reference-mention-item:hover, .reference-mention-item:focus-visible { border-color: rgba(242,203,112,.55); background: rgba(242,203,112,.08); outline: 0; }
.reference-mention-item img { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: #111219; }
.reference-mention-item span { overflow: hidden; color: var(--accent); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.reference-mention-item small { overflow: hidden; color: var(--dim); text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
.reference-mention-empty { grid-column: 1 / -1; padding: 12px; color: var(--dim); text-align: center; font-size: 9px; }
.surprise-button { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.045); cursor: pointer; }
.surprise-button svg { width: 15px; fill: var(--accent); }
.surprise-button:hover svg { animation: twinkle .55s var(--ease); }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.segmented input, .ratio-options input, .quality-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; transition: .22s var(--ease); }
.segmented b { font-size: 13px; }
.segmented small { margin-top: 4px; color: var(--dim); font-size: 9px; }
.segmented input:checked + span { border-color: rgba(242,203,112,.55); background: linear-gradient(145deg, rgba(242,203,112,.13), rgba(217,133,69,.05)); box-shadow: inset 0 0 18px rgba(242,203,112,.035); }
.segmented input:checked + span b { color: var(--accent); }
.segmented label:hover span, .ratio-options label:hover span { border-color: var(--line-strong); transform: translateY(-1px); }
.ratio-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ratio-options label > span { display: grid; grid-template-columns: 23px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-height: 55px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); cursor: pointer; transition: .22s var(--ease); }
.ratio-options b { align-self: end; font-size: 11px; }
.ratio-options small { align-self: start; color: var(--dim); font-size: 9px; }
.ratio-shape { grid-row: 1 / 3; display: block; justify-self: center; border: 1.5px solid #7b7d84; border-radius: 2px; }
.ratio-shape.square { width: 17px; height: 17px; }
.ratio-shape.landscape { width: 21px; height: 13px; }
.ratio-shape.portrait { width: 13px; height: 21px; }
.ratio-options input:checked + span { border-color: rgba(242,203,112,.55); background: rgba(242,203,112,.08); }
.ratio-options input:checked + span .ratio-shape { border-color: var(--accent); box-shadow: 0 0 7px rgba(242,203,112,.18); }
.compact-options { flex-direction: row; justify-content: space-between; align-items: end; }
.compact-options > div { display: flex; flex-direction: column; gap: 10px; }
.quality-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.quality-toggle span { display: grid; place-items: center; min-width: 62px; min-height: 30px; border-radius: 7px; color: var(--muted); font-size: 10px; cursor: pointer; }
.quality-toggle input:checked + span { color: #1e180b; background: var(--accent); font-weight: 700; }
.final-billing { max-width: 132px; color: var(--dim); font-size: 9px; text-align: right; line-height: 1.5; }
.generate-button { position: relative; display: grid; place-items: center; min-height: 54px; overflow: hidden; border: 0; border-radius: 14px; color: #18140c; background: linear-gradient(115deg, #ead28c, #f3bf64 56%, #dd8f4d); box-shadow: 0 12px 36px rgba(197, 125, 54, .15); cursor: pointer; font-weight: 750; letter-spacing: .08em; transition: transform .25s var(--ease), box-shadow .25s; }
.generate-button::after { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.38), transparent 80%); transition: transform .7s; }
.generate-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 17px 42px rgba(197,125,54,.24); }
.generate-button:hover::after { transform: translateX(110%); }
.generate-button:disabled { cursor: progress; opacity: .85; }
.button-default, .button-loading { display: flex; align-items: center; gap: 9px; }
.button-default svg { width: 18px; fill: currentColor; }
.button-loading { display: none; }
.button-loading i { width: 17px; height: 17px; border: 2px solid rgba(24,20,12,.24); border-top-color: #18140c; border-radius: 50%; animation: spin .8s linear infinite; }
.generate-button.loading .button-default { display: none; }
.generate-button.loading .button-loading { display: flex; }
.form-hint { margin: -14px 0 0; color: var(--dim); font-size: 9px; text-align: center; line-height: 1.5; }

.canvas-stage { display: flex; flex-direction: column; min-width: 0; padding: clamp(26px, 3vw, 46px) clamp(22px, 3.5vw, 58px) 26px; }
.stage-toolbar { display: flex; justify-content: space-between; align-items: center; min-height: 42px; margin-bottom: 21px; }
.stage-toolbar > div:first-child { display: flex; align-items: center; gap: 18px; }
.stage-title { color: #d6d4cf; font-size: 12px; }
.result-actions { display: flex; align-items: center; gap: 8px; }
.result-actions button, .result-actions a { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; font-size: 10px; }
.result-actions svg { width: 14px; fill: currentColor; }
.result-actions button:hover, .result-actions a:hover { color: var(--text); border-color: var(--line-strong); }
.canvas-frame { position: relative; flex: 1; display: grid; place-items: center; min-height: 490px; overflow: hidden; border: 1px solid var(--line); border-radius: clamp(18px, 2vw, 27px); background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), radial-gradient(circle at center, rgba(255,255,255,.04), transparent 55%), #0d0e14; background-size: 46px 46px, 46px 46px, auto, auto; box-shadow: inset 0 0 80px rgba(0,0,0,.28), 0 30px 80px rgba(0,0,0,.18); }
.canvas-frame::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(255,255,255,.04); border-radius: 18px; pointer-events: none; }
.empty-canvas { display: flex; flex-direction: column; align-items: center; gap: 50px; animation: reveal 1s var(--ease) both; }
.light-orbit { position: relative; display: grid; place-items: center; width: 210px; height: 210px; }
.orbit-ring { position: absolute; border: 1px solid rgba(242,203,112,.17); border-radius: 50%; }
.ring-one { inset: 13px; animation: orbit 18s linear infinite; }
.ring-one::after { content: ""; position: absolute; width: 5px; height: 5px; top: 20px; left: 24px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.ring-two { inset: 40px; border-style: dashed; opacity: .6; animation: orbit 12s linear reverse infinite; }
.light-core { width: 55px; height: 55px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fffbe9 0 9%, #f6d580 32%, #d97f44 70%, rgba(216,117,55,.1)); box-shadow: 0 0 30px rgba(242,203,112,.48), 0 0 95px rgba(217,133,69,.25); animation: breathe 4s ease-in-out infinite; }
.empty-copy { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.empty-copy span { font-family: Georgia, "Noto Serif SC", serif; font-size: 18px; letter-spacing: .12em; }
.empty-copy small { color: var(--dim); font-size: 10px; }
.generating-canvas { position: absolute; inset: 0; display: grid; place-items: center; }
.scan-field { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at center, rgba(242,203,112,.08), transparent 48%); }
.scan-field::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; top: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 20px rgba(242,203,112,.9); animation: scan 3.6s ease-in-out infinite; }
.scan-field i { position: absolute; border: 1px solid rgba(242,203,112,.13); border-radius: 50%; animation: ripple 4s ease-out infinite; }
.scan-field i:nth-child(1) { inset: 33%; }
.scan-field i:nth-child(2) { inset: 25%; animation-delay: 1.2s; }
.scan-field i:nth-child(3) { inset: 17%; animation-delay: 2.4s; }
.progress-copy { position: relative; text-align: center; }
.progress-copy span { font-family: Georgia, serif; font-size: clamp(68px, 8vw, 118px); font-variant-numeric: tabular-nums; font-weight: 400; color: #ece6d7; }
.progress-copy sup { color: var(--accent); font-size: 20px; }
.progress-copy p { margin: 14px 0 9px; font-size: 13px; letter-spacing: .1em; }
.progress-copy small { color: var(--dim); font-size: 9px; }
.result-canvas { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; animation: resultIn .8s var(--ease) both; }
.result-canvas img, .result-canvas video { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; box-shadow: 0 28px 70px rgba(0,0,0,.46); }
.result-canvas figcaption { position: absolute; left: 35px; bottom: 30px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(9,10,15,.76); backdrop-filter: blur(12px); color: #c7c4bd; font-size: 9px; }
.stage-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: var(--dim); font-size: 9px; }
.stage-foot span:first-child { display: flex; align-items: center; gap: 8px; }
.stage-foot b { color: #85868d; font-weight: 500; }

.asset-library { padding: 78px clamp(22px, 4vw, 64px) 100px; border-top: 1px solid var(--line); scroll-margin-top: 10px; }
.asset-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.asset-heading h2 { margin: 14px 0 8px; font-family: Georgia, "Noto Serif SC", serif; font-size: clamp(29px, 3vw, 42px); font-weight: 500; letter-spacing: -.02em; }
.asset-heading p { margin: 0; color: var(--dim); font-size: 10px; }
.asset-controls { display: flex; align-items: center; gap: 9px; }
.asset-filters { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.asset-filters button, .refresh-assets { min-height: 33px; border: 0; border-radius: 7px; padding: 0 12px; background: transparent; color: var(--dim); cursor: pointer; font-size: 9px; transition: color .2s, background .2s; }
.asset-filters button.active { background: rgba(255,255,255,.07); color: var(--text); }
.refresh-assets { border: 1px solid var(--line); }
.refresh-assets:hover { color: var(--text); border-color: var(--line-strong); }
.asset-empty { display: grid; min-height: 240px; place-items: center; align-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); text-align: center; }
.asset-empty span { font-family: Georgia, "Noto Serif SC", serif; font-size: 19px; }
.asset-empty p { margin: 9px 0 0; color: var(--dim); font-size: 10px; }
.asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.asset-item { position: relative; aspect-ratio: 4 / 3; min-width: 0; overflow: hidden; border-radius: 14px; outline: none; background: #111219; cursor: pointer; }
.asset-item > img, .asset-item > video { width: 100%; height: 100%; object-fit: cover; transition: transform .48s var(--ease), filter .35s; }
.asset-item:hover > img, .asset-item:hover > video, .asset-item:focus-visible > img, .asset-item:focus-visible > video { transform: scale(1.035); filter: brightness(.62); }
.video-badge { position: absolute; top: 11px; left: 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 5px 7px; background: rgba(8,9,13,.58); color: #e6e1d6; font-size: 7px; letter-spacing: .18em; backdrop-filter: blur(8px); }
.asset-overlay { position: absolute; inset: auto 0 0; display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 48px 12px 12px; background: linear-gradient(transparent, rgba(6,7,10,.94)); opacity: 0; transform: translateY(9px); transition: opacity .25s, transform .3s var(--ease); }
.asset-item:hover .asset-overlay, .asset-item:focus-visible .asset-overlay { opacity: 1; transform: translateY(0); }
.asset-overlay > div:first-child { min-width: 0; }
.asset-overlay span { display: block; overflow: hidden; color: #f0ede5; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.asset-overlay small { display: block; margin-top: 5px; overflow: hidden; color: #96969b; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
.asset-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.asset-actions a, .asset-actions button { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(9,10,15,.74); color: #d8d5ce; cursor: pointer; font-size: 16px; backdrop-filter: blur(8px); }
.asset-actions a:hover { border-color: rgba(242,203,112,.46); color: var(--accent); }
.asset-actions button:hover { border-color: rgba(255,141,131,.4); color: var(--danger); }

.history-section { padding: 74px clamp(22px, 4vw, 64px) 96px; border-top: 1px solid var(--line); }
.history-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
.history-heading h2 { margin: 13px 0 0; font-family: Georgia, "Noto Serif SC", serif; font-size: 31px; font-weight: 500; }
.history-heading button { border: 0; border-bottom: 1px solid var(--line-strong); padding: 6px 0; background: none; color: var(--dim); cursor: pointer; font-size: 10px; }
.history-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.history-item { position: relative; min-height: 230px; overflow: hidden; border-radius: 15px; background: #111219; cursor: pointer; }
.history-item img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; transition: transform .5s var(--ease), filter .4s; }
.history-item:hover img { transform: scale(1.035); filter: brightness(.75); }
.history-item div { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 5px; padding: 40px 14px 14px; background: linear-gradient(transparent, rgba(7,8,12,.9)); transform: translateY(15px); opacity: 0; transition: .3s var(--ease); }
.history-item:hover div { transform: translateY(0); opacity: 1; }
.history-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.history-item small { color: #a5a3a0; font-size: 8px; }
.history-note { margin: 16px 0 0; color: var(--dim); font-size: 9px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3,4,8,.78); backdrop-filter: blur(18px); animation: fadeIn .25s ease; }
.auth-modal { position: relative; width: min(100%, 440px); border: 1px solid var(--line-strong); border-radius: 24px; padding: 35px; background: linear-gradient(155deg, rgba(27,28,37,.98), rgba(13,14,20,.99)); box-shadow: 0 40px 120px rgba(0,0,0,.54); animation: modalIn .45s var(--ease); }
.modal-close { position: absolute; right: 18px; top: 16px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 25px; cursor: pointer; }
.auth-brand { display: flex; align-items: center; gap: 10px; }
.auth-brand small { color: var(--dim); font-size: 8px; letter-spacing: .28em; }
.auth-copy { margin-top: 28px; }
.auth-copy h2 { margin: 14px 0 8px; font-family: Georgia, "Noto Serif SC", serif; font-size: 29px; font-weight: 500; }
.auth-copy p { margin: 0; color: var(--muted); font-size: 11px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 27px; border-bottom: 1px solid var(--line); }
.auth-tabs button { border: 0; border-bottom: 1px solid transparent; padding: 12px; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; }
.auth-tabs button.active { border-bottom-color: var(--accent); color: var(--accent); }
#authForm { display: flex; flex-direction: column; gap: 15px; margin-top: 22px; }
#authForm label { display: flex; flex-direction: column; gap: 8px; color: #cbc9c3; font-size: 10px; }
#authForm input { width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 11px; outline: 0; padding: 0 13px; color: var(--text); background: rgba(255,255,255,.035); font-size: 12px; }
#authForm input:focus { border-color: rgba(242,203,112,.45); box-shadow: 0 0 0 3px rgba(242,203,112,.05); }
.auth-error { min-height: 14px; margin: -2px 0; color: var(--danger); font-size: 10px; line-height: 1.45; }
.auth-submit { height: 47px; border: 0; border-radius: 11px; background: var(--accent); color: #19150c; cursor: pointer; font-weight: 750; }
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-foot { margin: 18px 0 0; color: var(--dim); text-align: center; font-size: 8px; }
.account-menu { position: fixed; z-index: 90; top: 70px; right: clamp(20px, 3.5vw, 58px); width: 210px; border: 1px solid var(--line-strong); border-radius: 14px; padding: 8px; background: rgba(18,19,26,.98); box-shadow: 0 22px 55px rgba(0,0,0,.4); backdrop-filter: blur(20px); }
.account-menu a, .account-menu button { display: flex; align-items: center; width: 100%; min-height: 38px; border: 0; border-radius: 8px; padding: 0 11px; background: transparent; color: var(--muted); cursor: pointer; font-size: 10px; }
.account-menu a:hover, .account-menu button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.account-menu hr { height: 1px; border: 0; background: var(--line); }
.toast-region { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: flex; flex-direction: column; align-items: end; gap: 8px; pointer-events: none; }
.toast { max-width: 330px; border: 1px solid var(--line-strong); border-radius: 11px; padding: 12px 15px; background: rgba(22,23,31,.96); box-shadow: 0 15px 45px rgba(0,0,0,.3); color: #dcd9d2; font-size: 11px; line-height: 1.5; animation: toastIn .35s var(--ease); }
.toast.error { border-color: rgba(255,141,131,.35); color: #ffc1bb; }
.toast.success { border-color: rgba(143,208,163,.35); color: #bfe5ca; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 50% { transform: scale(1.28) rotate(25deg); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.08); box-shadow: 0 0 48px rgba(242,203,112,.58), 0 0 120px rgba(217,133,69,.32); } }
@keyframes scan { 0%, 100% { top: 7%; opacity: 0; } 15%, 85% { opacity: 1; } 50% { top: 93%; } }
@keyframes ripple { 0% { transform: scale(.5); opacity: 0; } 25% { opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
@keyframes resultIn { from { opacity: 0; transform: scale(.975); filter: blur(8px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: minmax(340px, 390px) minmax(0, 1fr); }
  .composer { padding-left: 30px; padding-right: 30px; }
  .canvas-stage { padding-left: 28px; padding-right: 28px; }
  .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 801px) and (max-height: 820px) {
  .topbar { height: 70px; }
  .workspace { min-height: calc(100svh - 70px); }
  .composer { padding-top: 28px; padding-bottom: 24px; }
  .mode-switch { margin-bottom: 22px; }
  .composer-heading h1 { margin-top: 11px; margin-bottom: 6px; font-size: 38px; }
  .composer-heading p { display: none; }
  .settings-panel { gap: 12px; margin-top: 16px; }
  textarea { height: 78px; min-height: 78px; resize: none; line-height: 1.45; }
  .select-wrap select { height: 41px; }
  .refine-row { min-height: 35px; }
  .segmented label > span { min-height: 49px; }
  .ratio-options label > span { min-height: 47px; padding-top: 6px; padding-bottom: 6px; }
  .quality-toggle span { min-height: 27px; }
  .generate-button { min-height: 48px; }
  .canvas-stage { padding-top: 25px; padding-bottom: 18px; }
  .stage-toolbar { margin-bottom: 13px; }
  .canvas-frame { min-height: 430px; }
  .stage-foot { margin-top: 10px; }
}
@media (max-width: 800px) {
  .topbar { height: 70px; }
  .primary-nav, .service-state, .balance-chip { display: none; }
  .brand-copy strong { font-size: 14px; }
  .workspace { display: block; min-height: 0; }
  .composer { border-right: 0; border-bottom: 1px solid var(--line); padding: 38px 22px 36px; }
  .composer-heading h1 { font-size: 43px; }
  .mode-switch { margin-bottom: 30px; }
  .settings-panel { margin-top: 32px; }
  .canvas-stage { min-height: 680px; padding: 34px 18px 22px; }
  .canvas-frame { min-height: 550px; }
  .asset-heading { align-items: flex-start; flex-direction: column; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asset-overlay { opacity: 1; transform: none; }
}

/* Keep recent creations visible above the fixed composer. */
body[data-app-view="create"] .canvas-stage { padding-bottom: 365px; }
@media (max-width: 800px) {
  body[data-app-view="create"] .canvas-stage { padding-bottom: 370px; }
}

/* V13 · recoverable generation, creation thumbnails and reference markup */
.generation-error-canvas {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 28px;
  text-align: center;
}
.generation-error-canvas::before {
  content: "!";
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255,141,131,.34);
  border-radius: 50%;
  color: #ffaaa1;
  font-family: Georgia, serif;
  font-size: 22px;
}
.generation-error-canvas span { color: #ebe7df; font-size: 16px; }
.generation-error-canvas p { max-width: 520px; margin: 9px 0 20px; color: #929198; font-size: 11px; line-height: 1.65; }
.generation-error-canvas button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  padding: 0 14px;
  background: rgba(255,255,255,.035);
  color: #d6d3cd;
  cursor: pointer;
  font-size: 10px;
}
.creation-history { min-width: 0; margin-top: 11px; }
.creation-history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; color: #b7b4ae; font-size: 9px; }
.creation-history-head small { color: #66676f; font-size: 8px; }
.creation-strip { display: flex; min-width: 0; gap: 7px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.creation-thumb {
  position: relative;
  width: 68px;
  height: 52px;
  flex: 0 0 68px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  padding: 0;
  background: #101117;
  cursor: pointer;
  opacity: .66;
  transition: opacity .2s, border-color .2s, transform .2s;
}
.creation-thumb:hover { opacity: 1; transform: translateY(-1px); }
.creation-thumb.active { border-color: rgba(242,203,112,.72); box-shadow: 0 0 0 2px rgba(242,203,112,.08); opacity: 1; }
.creation-thumb img,.creation-thumb video { width: 100%; height: 100%; object-fit: cover; }
.creation-thumb i { position: absolute; right: 3px; bottom: 3px; border-radius: 3px; padding: 2px 3px; background: rgba(5,6,9,.76); color: #d6d3cc; font-size: 5px; font-style: normal; letter-spacing: .08em; }

.reference-thumb .reference-edit-trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: transparent;
  cursor: crosshair;
}
.reference-thumb .reference-edit-trigger img { display: block; transition: filter .2s, transform .2s; }
.reference-thumb .reference-edit-trigger span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,6,9,.46); color: #fff; font-size: 16px; opacity: 0; transition: opacity .2s; }
.reference-thumb:hover .reference-edit-trigger img { filter: brightness(.7); transform: scale(1.03); }
.reference-thumb:hover .reference-edit-trigger span { opacity: 1; }
.reference-thumb .reference-remove { z-index: 2; top: -6px; right: -6px; }

.reference-editor-backdrop {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(3,4,7,.94);
  backdrop-filter: blur(18px);
}
.reference-editor {
  display: grid;
  width: min(1420px, 100%);
  height: calc(100svh - 24px);
  max-height: 960px;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 15px;
  outline: 0;
  background: #090a0e;
  box-shadow: 0 34px 100px rgba(0,0,0,.62);
  animation: modalIn .28s var(--ease);
}
.reference-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(255,255,255,.075); padding: 16px 18px; }
.reference-editor-head h2 { margin: 5px 0 3px; font-size: 16px; font-weight: 580; }
.reference-editor-head p { margin: 0; color: #777880; font-size: 9px; }
.reference-editor-head > button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.025); color: #aaa8a3; cursor: pointer; font-size: 22px; }
.reference-editor-stage { position: relative; display: grid; min-height: 0; place-items: center; overflow: hidden; padding: 18px; background: #050609; }
.reference-paint-surface { position: relative; width: auto; max-width: 100%; height: auto; max-height: 100%; overflow: hidden; border-radius: 4px; box-shadow: 0 20px 70px rgba(0,0,0,.5); }
.reference-paint-surface img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.reference-paint-surface canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.reference-editor-loading { color: #86878f; font-size: 11px; }
.reference-editor-toolbar { display: flex; min-height: 70px; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,.075); padding: 12px 16px; background: #0d0e13; }
.paint-colors { display: flex; align-items: center; gap: 7px; }
.paint-colors button { width: 25px; height: 25px; border: 2px solid transparent; border-radius: 50%; padding: 3px; background: var(--paint-color) content-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); cursor: pointer; }
.paint-colors button.active { border-color: #eee9dc; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.paint-size { display: flex; align-items: center; gap: 8px; color: #85868d; font-size: 9px; }
.paint-size input { width: 110px; accent-color: #f2cb70; }
.paint-history-actions { display: flex; gap: 6px; margin-left: auto; }
.paint-history-actions button,.save-painted-reference { min-height: 36px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; padding: 0 13px; background: rgba(255,255,255,.025); color: #bdbab4; cursor: pointer; font-size: 9px; }
.paint-history-actions button:disabled,.save-painted-reference:disabled { cursor: not-allowed; opacity: .35; }
.save-painted-reference { border-color: rgba(242,203,112,.38); background: #f2cb70; color: #18140c; font-weight: 700; }
.upload-progress-float { position: fixed; z-index: 210; right: 20px; bottom: 20px; width: min(330px,calc(100vw - 28px)); border: 1px solid rgba(255,255,255,.13); border-radius: 11px; padding: 13px 14px; background: rgba(19,20,27,.97); box-shadow: 0 18px 55px rgba(0,0,0,.42); }
.upload-progress-float > div { display: flex; align-items: center; justify-content: space-between; color: #d7d4ce; font-size: 10px; }
.upload-progress-float strong { color: #f2cb70; font-size: 11px; }
.upload-progress-float > i { display: block; height: 3px; overflow: hidden; margin: 10px 0 7px; border-radius: 3px; background: rgba(255,255,255,.07); }
.upload-progress-float > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: #f2cb70; transition: width .16s linear; }
.upload-progress-float small { color: #74757d; font-size: 8px; }

@media (max-width: 800px) {
  .result-actions span { display: none; }
  .result-actions button,.result-actions a { width: 36px; justify-content: center; padding: 0; }
  .creation-thumb { width: 60px; height: 46px; flex-basis: 60px; }
  .reference-editor-backdrop { padding: 0; }
  .reference-editor { width: 100%; height: 100svh; max-height: none; border: 0; border-radius: 0; }
  .reference-editor-head { padding: 12px; }
  .reference-editor-head p { display: none; }
  .reference-editor-stage { padding: 8px; }
  .reference-editor-toolbar { flex-wrap: wrap; gap: 9px; padding: 10px 11px max(10px,env(safe-area-inset-bottom)); }
  .paint-colors { width: 100%; justify-content: center; }
  .paint-colors button { width: 27px; height: 27px; }
  .paint-size { flex: 1; }
  .paint-size input { width: 100%; }
  .paint-history-actions { margin-left: 0; }
  .save-painted-reference { flex: 1; }
  .upload-progress-float { left: 14px; right: 14px; bottom: 14px; width: auto; }
}
@media (max-width: 520px) {
  .topbar { padding: 0 16px; }
  .brand-copy small { display: none; }
  .login-trigger { min-height: 40px; padding: 0 13px; font-size: 11px; }
  .account-button span:last-child { display: none; }
  .account-button { padding-right: 5px; }
  .composer { padding-left: 17px; padding-right: 17px; }
  .surprise-button { width: 40px; height: 40px; right: 9px; bottom: 9px; }
  textarea { padding-right: 56px; }
  .composer-heading h1 { font-size: 39px; }
  .refine-row { align-items: stretch; flex-direction: column; }
  .refine-button { width: 100%; }
  .llm-picker { min-height: 40px; }
  .reference-mention-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmented label > span { min-height: 57px; }
  .ratio-options label > span { grid-template-columns: 1fr; grid-template-rows: 22px auto auto; text-align: center; padding: 8px 4px; }
  .ratio-shape { grid-row: auto; }
  .option-row { align-items: stretch; flex-direction: column; }
  .option-row .price-note { max-width: none; padding: 0; text-align: left; }
  .canvas-stage { min-height: 585px; }
  .canvas-frame { min-height: 455px; }
  .stage-toolbar > div:first-child { gap: 10px; }
  .stage-title { display: none; }
  .result-actions span { display: none; }
  .result-actions button, .result-actions a { width: 36px; padding: 0; justify-content: center; }
  .light-orbit { width: 180px; height: 180px; }
  .empty-canvas { gap: 36px; }
  .empty-copy span { font-size: 16px; }
  .stage-foot span:last-child { display: none; }
  .result-canvas { padding: 13px; }
  .result-canvas figcaption { left: 23px; bottom: 20px; }
  .asset-library { padding: 55px 17px 75px; }
  .asset-heading { gap: 20px; }
  .asset-controls { width: 100%; justify-content: space-between; }
  .asset-filters { flex: 1; }
  .asset-filters button { flex: 1; padding: 0 8px; }
  .asset-grid { grid-template-columns: 1fr; }
  .asset-item { aspect-ratio: 4 / 3; }
  .auth-modal { padding: 30px 22px; }
  .toast-region { left: 14px; right: 14px; bottom: 14px; align-items: stretch; }
  .toast { max-width: none; }
}
@media (hover: none) {
  .asset-overlay { opacity: 1; transform: none; }
  .asset-item > img, .asset-item > video { filter: brightness(.78); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* V3 · creation and hierarchical asset workspace */
.app-view.active { animation: viewIn .34s var(--ease) both; }
.modal-open { overflow: hidden; }
.mobile-only { display: none !important; }
.workspace { grid-template-columns: 340px minmax(0, 1fr); height: calc(100svh - 82px); min-height: 620px; overflow: hidden; }
.composer { overflow-y: auto; padding: 27px 24px 24px; }
.mode-switch { margin-bottom: 22px; }
.composer-heading h1 { margin: 13px 0 7px; font-size: 32px; line-height: 1.08; letter-spacing: 0; }
.composer-heading p { font-size: 10px; line-height: 1.55; }
.settings-panel { gap: 18px; margin-top: 22px; }
.settings-panel .ratio-options label > span { min-height: 50px; padding: 7px 8px; }
.settings-panel .select-wrap select { height: 42px; }
.canvas-stage { min-height: 0; padding: 24px clamp(22px, 3vw, 48px) 300px; }
.canvas-frame { min-height: 280px; }

.creation-dock {
  position: fixed;
  z-index: 50;
  left: calc(340px + (100vw - 340px) / 2);
  bottom: 18px;
  display: flex;
  width: min(780px, calc(100vw - 390px));
  max-height: calc(100svh - 116px);
  flex-direction: column;
  gap: 8px;
  transform: translateX(-50%);
  overflow: visible;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px;
  background: rgba(18, 19, 26, .97);
  box-shadow: 0 18px 58px rgba(0, 0, 0, .48);
  backdrop-filter: blur(24px);
  animation: dockIn .3s var(--ease) both;
}
body[data-app-view="assets"] .creation-dock {
  left: calc(258px + (100vw - 258px) / 2);
  width: min(780px, calc(100vw - 306px));
}
.dock-reference-section { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.dock-reference-head { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 14px; }
.dock-reference-head > div { display: flex; min-width: 0; align-items: baseline; gap: 10px; }
.dock-reference-head .reference-note { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.dock-action { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; background: rgba(255, 255, 255, .035); color: #cbc8c0; cursor: pointer; font-size: 9px; }
.dock-action:hover:not(:disabled) { border-color: rgba(242, 203, 112, .45); color: var(--accent); }
.dock-action:disabled { cursor: not-allowed; opacity: .38; }
.dock-action svg { width: 13px; fill: currentColor; }
.creation-dock .reference-tray { min-height: 62px; gap: 7px; overflow-y: hidden; padding: 6px; border-style: solid; border-radius: 7px; }
.creation-dock .reference-empty { min-height: 48px; }
.creation-dock .reference-thumb { flex-basis: 50px; height: 50px; border-radius: 6px; }
.creation-dock .reference-thumb img { border-radius: 5px; }
.dock-prompt-meta { display: flex; align-items: center; justify-content: space-between; color: var(--dim); font-size: 9px; }
.dock-prompt-meta label { color: #d8d6d0; font-size: 11px; font-weight: 600; }
.dock-compose-row { display: grid; grid-template-columns: minmax(0, 1fr) 142px; gap: 8px; align-items: stretch; }
.creation-dock .prompt-wrap { min-width: 0; }
.creation-dock textarea { height: 72px; min-height: 72px; resize: none; border-radius: 7px; padding: 11px 45px 11px 12px; line-height: 1.55; font-size: 12px; }
.creation-dock .surprise-button { right: 9px; bottom: 9px; width: 29px; height: 29px; border-radius: 6px; }
.creation-dock .generate-button { min-height: 72px; border-radius: 7px; box-shadow: none; font-size: 11px; }
.creation-dock .reference-mention-picker { top: auto; bottom: calc(100% + 8px); border-radius: 7px; }
.dock-footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 14px; }
.dock-footer .refine-row { flex: 1; max-width: 410px; }
.dock-footer .refine-button, .dock-footer .llm-picker { min-height: 31px; border-radius: 6px; }
.dock-footer .refine-button { min-width: 92px; }
.dock-footer .form-hint { max-width: 300px; margin: 0; text-align: right; }
body.dock-open[data-app-view="assets"] .asset-main { padding-bottom: 285px; }
body.dock-open[data-app-view="assets"] .selection-bar { bottom: 246px; }
body.dock-open[data-app-view="create"] .stage-foot { visibility: hidden; }

@keyframes dockIn { from { opacity: 0; transform: translate(-50%, 10px); } }
.text-action { border: 0; padding: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 9px; }
.text-action:hover { color: #ffe5a4; }
.text-action:disabled { color: var(--dim); cursor: not-allowed; }
.reference-actions { display: flex; align-items: center; gap: 13px; }

.reference-block { min-width: 0; }
.reference-tray { display: flex; min-height: 76px; gap: 8px; overflow-x: auto; padding: 7px; border: 1px dashed rgba(255,255,255,.14); border-radius: 13px; background: rgba(255,255,255,.018); scrollbar-width: thin; }
.reference-empty { display: grid; flex: 1 0 100%; min-height: 58px; place-items: center; color: var(--dim); text-align: center; font-size: 9px; }
.reference-thumb { position: relative; flex: 0 0 62px; height: 62px; overflow: visible; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #111219; }
.reference-thumb img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }
.reference-thumb button { position: absolute; top: -6px; right: -6px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; padding: 0; background: #20212a; color: #ddd9d0; cursor: pointer; font-size: 12px; }
.reference-thumb figcaption { position: absolute; left: 4px; bottom: 4px; min-width: 17px; border-radius: 999px; padding: 2px 4px; background: rgba(8,9,13,.78); color: #eee7d8; text-align: center; font-size: 7px; }
.reference-note { margin: -3px 0 0; color: var(--dim); font-size: 9px; }
.reference-note.warning { color: var(--danger); }
.save-folder-block .select-wrap select { height: 42px; }

.asset-library { position: relative; display: grid; grid-template-columns: 258px minmax(0, 1fr); height: calc(100svh - 82px); min-height: 560px; overflow: hidden; border-top: 0; padding: 0; }
.folder-sidebar { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); padding: 31px 17px 20px; background: rgba(13,14,20,.77); }
.folder-sidebar-head { display: flex; align-items: start; justify-content: space-between; padding: 0 9px; }
.folder-sidebar-head h2 { margin: 9px 0 0; font-family: Georgia, "Noto Serif SC", serif; font-size: 25px; font-weight: 500; }
.new-folder-primary { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; margin: 25px 4px 18px; border: 1px solid rgba(242,203,112,.3); border-radius: 10px; background: rgba(242,203,112,.075); color: var(--accent); cursor: pointer; font-size: 10px; font-weight: 650; }
.new-folder-primary:hover { border-color: rgba(242,203,112,.52); background: rgba(242,203,112,.12); }
.new-folder-primary span { font-size: 17px; font-weight: 300; }
.folder-tree { min-height: 0; flex: 1; overflow-y: auto; padding: 2px 3px 15px; scrollbar-width: thin; }
.folder-node .folder-node { padding-left: 17px; }
.folder-node-row { display: grid; min-width: 0; grid-template-columns: 20px minmax(0, 1fr); align-items: center; }
.folder-caret-button,
.folder-caret-spacer { display: grid; width: 20px; height: 30px; place-items: center; }
.folder-caret-button { border: 0; padding: 0; background: transparent; color: #70717a; cursor: pointer; }
.folder-caret-button span { display: block; font-size: 15px; line-height: 1; transform: rotate(90deg); transition: color .18s, transform .22s var(--ease); }
.folder-node.collapsed > .folder-node-row .folder-caret-button span { transform: rotate(0deg); }
.folder-caret-button:hover { color: var(--accent); }
.folder-row { display: flex; align-items: center; width: 100%; min-width: 0; min-height: 37px; gap: 7px; border: 0; border-radius: 8px; padding: 0 8px; background: transparent; color: #aaa9ad; cursor: pointer; text-align: left; font-size: 10px; transition: background .18s, color .18s; }
.folder-row:hover { color: #e8e4db; background: rgba(255,255,255,.04); }
.folder-row.active { color: #f4ebd8; background: rgba(242,203,112,.09); }
.root-row { margin-left: 20px; width: calc(100% - 20px); }
.folder-icon { position: relative; width: 15px; height: 11px; flex: 0 0 15px; border: 1px solid #73747c; border-radius: 2px; }
.folder-icon::before { content: ""; position: absolute; left: 1px; top: -4px; width: 7px; height: 4px; border: 1px solid #73747c; border-bottom: 0; border-radius: 2px 2px 0 0; }
.folder-row.active .folder-icon, .folder-row.active .folder-icon::before { border-color: var(--accent); }
.folder-icon.all-assets { height: 14px; border-radius: 3px; }
.folder-icon.all-assets::before { inset: 3px; width: auto; height: auto; border: 1px solid #73747c; border-radius: 1px; }
.folder-icon.inbox::before { display: none; }
.folder-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-tree-divider { height: 1px; margin: 9px 8px 12px; background: var(--line); }
.tree-empty { margin: 15px 10px; color: var(--dim); font-size: 9px; }
.folder-hint { margin: 12px 8px 0; color: #5f6068; font-size: 8px; line-height: 1.65; }

.asset-main { min-width: 0; overflow-y: auto; padding: 35px clamp(24px, 3.5vw, 56px) 120px; }
.asset-library .asset-heading { position: relative; align-items: end; min-height: 92px; margin-bottom: 28px; }
.asset-heading-copy { min-width: 0; }
.asset-library .asset-heading h2 { margin: 9px 0 7px; font-size: clamp(28px, 3vw, 42px); }
.breadcrumbs { display: flex; min-height: 18px; align-items: center; gap: 6px; overflow: hidden; color: var(--dim); font-size: 8px; }
.breadcrumbs button { max-width: 130px; overflow: hidden; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs button:hover { color: var(--accent); }
.asset-controls { position: relative; }
.upload-assets-button { color: var(--accent); border-color: rgba(242,203,112,.3); }
.upload-assets-button:hover { color: #ffe5a4; border-color: rgba(242,203,112,.55); }
.upload-assets-button span { margin-right: 3px; font-size: 13px; line-height: 0; }
.folder-more { width: 34px; min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--muted); cursor: pointer; letter-spacing: .08em; }
.folder-more:hover { color: var(--text); border-color: var(--line-strong); }
.folder-context-menu { position: absolute; z-index: 35; top: 42px; right: 0; width: 155px; border: 1px solid var(--line-strong); border-radius: 11px; padding: 6px; background: rgba(20,21,28,.98); box-shadow: 0 16px 46px rgba(0,0,0,.38); }
.folder-context-menu button { width: 100%; min-height: 34px; border: 0; border-radius: 7px; padding: 0 9px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 9px; }
.folder-context-menu button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.folder-context-menu .danger-action { color: #e89d96; }

.asset-library .asset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.asset-library .asset-item { aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: 12px; transition: border-color .2s, transform .25s var(--ease); }
.asset-library .asset-item:hover { transform: translateY(-2px); }
.asset-library .asset-item.selected { border-color: rgba(242,203,112,.74); box-shadow: 0 0 0 2px rgba(242,203,112,.09); }
.asset-check { position: absolute; z-index: 4; top: 10px; right: 10px; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 7px; padding: 0; background: rgba(9,10,15,.62); color: #18140c; cursor: pointer; backdrop-filter: blur(8px); font-size: 11px; }
.asset-item.selected .asset-check { border-color: var(--accent); background: var(--accent); }
.asset-library .asset-overlay { padding-top: 65px; }
.asset-library .asset-actions { opacity: .9; }

.selection-bar { position: fixed; z-index: 45; left: calc(258px + (100vw - 258px) / 2); bottom: 24px; display: flex; width: min(760px, calc(100vw - 310px)); min-height: 58px; align-items: center; justify-content: space-between; gap: 18px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 15px; padding: 9px 11px 9px 17px; background: rgba(20,21,28,.94); box-shadow: 0 20px 65px rgba(0,0,0,.45); backdrop-filter: blur(24px); animation: selectionIn .3s var(--ease); }
.selection-bar > span { flex: 0 0 auto; color: #c9c6bf; font-size: 10px; }
.selection-bar > span b { color: var(--accent); font-size: 15px; }
.selection-bar > div { display: flex; align-items: center; gap: 6px; }
.selection-bar button { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 11px; background: rgba(255,255,255,.035); color: #b8b6b1; cursor: pointer; font-size: 9px; }
.selection-bar button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.selection-bar button:disabled { opacity: .35; cursor: not-allowed; }
.selection-bar .danger-action { color: #f0a29b; }
.selection-bar .icon-action { width: 35px; padding: 0; font-size: 17px; }

.utility-modal { position: relative; width: min(100%, 430px); border: 1px solid var(--line-strong); border-radius: 21px; padding: 33px; background: linear-gradient(155deg, rgba(27,28,37,.99), rgba(13,14,20,.99)); box-shadow: 0 40px 120px rgba(0,0,0,.54); animation: modalIn .38s var(--ease); }
.utility-modal h2 { margin: 15px 0 8px; font-family: Georgia, "Noto Serif SC", serif; font-size: 27px; font-weight: 500; }
.utility-modal > p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
#folderForm { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
#folderForm label { display: flex; flex-direction: column; gap: 8px; color: #cbc9c3; font-size: 10px; }
#folderForm input, #folderForm select { width: 100%; height: 45px; border: 1px solid var(--line); border-radius: 10px; outline: 0; padding: 0 12px; background: rgba(255,255,255,.035); color: var(--text); font-size: 11px; }
#folderForm select option { background: #171820; color: var(--text); }
#folderForm input:focus, #folderForm select:focus { border-color: rgba(242,203,112,.45); box-shadow: 0 0 0 3px rgba(242,203,112,.05); }
.utility-error { min-height: 14px; margin: -3px 0 !important; color: var(--danger) !important; font-size: 9px !important; }
.icon-action { display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); cursor: pointer; }

@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes selectionIn { from { opacity: 0; transform: translate(-50%, 12px); } }

@media (max-width: 1180px) {
  .asset-library .asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .topbar { position: sticky; top: 0; }
  .brand-copy { display: none; }
  .primary-nav { position: static; left: auto; display: flex; transform: none; }
  .primary-nav button { min-height: 34px; padding: 0 12px; }
  .mobile-only { display: grid !important; }
  .workspace { display: block; height: auto; min-height: calc(100svh - 70px); overflow: visible; }
  .composer { min-height: calc(100svh - 70px); overflow: visible; border-right: 0; padding: 24px 18px 270px; }
  .composer-heading h1 { font-size: 31px; }
  .settings-panel { margin-top: 20px; }
  .canvas-stage { min-height: calc(100svh - 70px); padding: 24px 18px 270px; }
  .creation-dock,
  body[data-app-view="assets"] .creation-dock { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: min(48svh, 410px); transform: none; overflow-y: auto; padding: 10px; animation-name: fadeIn; }
  .dock-compose-row { grid-template-columns: minmax(0, 1fr) 112px; }
  .dock-footer .form-hint { display: none; }
  .dock-footer .refine-row { max-width: none; }
  .creation-dock .reference-mention-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.dock-open[data-app-view="assets"] .asset-main { padding-bottom: 290px; }
  body.dock-open[data-app-view="assets"] .selection-bar { bottom: 244px; }
  .asset-library { display: block; height: calc(100svh - 70px); min-height: 0; }
  .folder-sidebar { position: fixed; z-index: 80; top: 0; bottom: 0; left: 0; width: min(84vw, 310px); transform: translateX(-105%); border-right-color: var(--line-strong); padding-top: 26px; background: rgba(14,15,21,.985); box-shadow: 25px 0 65px rgba(0,0,0,.45); transition: transform .3s var(--ease); }
  .folder-sidebar.open { transform: translateX(0); }
  .folder-scrim { position: fixed; z-index: 75; inset: 0; background: rgba(3,4,8,.62); backdrop-filter: blur(8px); }
  .folder-sidebar-head .icon-action { width: 36px; height: 36px; font-size: 22px; }
  .asset-main { height: 100%; padding: 24px 18px 110px; }
  .asset-library .asset-heading { align-items: flex-start; flex-direction: column; min-height: 0; gap: 19px; margin-bottom: 23px; }
  .asset-heading-copy { width: 100%; }
  .directory-toggle { display: inline-grid !important; min-height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; font-size: 9px; }
  .breadcrumbs { margin-top: 13px; }
  .asset-library .asset-heading h2 { font-size: 32px; }
  .asset-controls { width: 100%; }
  .asset-filters { flex: 1; }
  .asset-filters button { flex: 1; }
  .asset-library .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .asset-library .asset-overlay { opacity: 1; transform: none; padding: 44px 8px 8px; }
  .asset-library .asset-overlay > div:first-child { display: none; }
  .asset-library .asset-actions { margin-left: auto; }
  .asset-library .asset-actions a, .asset-library .asset-actions button { width: 27px; height: 27px; font-size: 13px; }
  .selection-bar { left: 12px; right: 12px; bottom: 12px; width: auto; min-height: 0; flex-direction: column; align-items: stretch; gap: 7px; transform: none; border-radius: 13px; padding: 10px; }
  .selection-bar > span { padding-left: 4px; }
  .selection-bar > div { display: grid; grid-template-columns: repeat(5, 1fr); }
  .selection-bar button { min-width: 0; overflow: hidden; padding: 0 5px; text-overflow: ellipsis; white-space: nowrap; }
  @keyframes selectionIn { from { opacity: 0; transform: translateY(12px); } }
}

@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .primary-nav { margin-left: auto; }
  .primary-nav button { padding: 0 9px; font-size: 10px; }
  .topbar-actions { gap: 0; }
  .account-button { min-height: 36px; }
  .login-trigger { min-height: 36px; padding: 0 9px; font-size: 9px; }
  .dock-reference-head .reference-note { display: none; }
  .dock-reference-head > div { flex: 0 0 auto; }
  .creation-dock .reference-tray { min-height: 56px; }
  .creation-dock .reference-thumb { flex-basis: 44px; height: 44px; }
  .creation-dock textarea { height: 66px; min-height: 66px; }
  .creation-dock .generate-button { min-height: 66px; }
  .dock-footer .llm-picker > span { display: none; }
  .asset-library .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-tray { min-height: 72px; }
  .utility-modal { padding: 30px 21px; }
  .selection-bar > div { grid-template-columns: repeat(4, 1fr); }
  #selectAllAssetsButton { display: none; }
}

/* Creation dock controls and prompt presets */
.creation-dock {
  width: min(940px, calc(100vw - 372px));
  gap: 9px;
  border-radius: 12px;
  padding: 13px;
}
body[data-app-view="assets"] .creation-dock {
  width: min(940px, calc(100vw - 290px));
}
.dock-control-bar {
  display: grid;
  grid-template-columns: 166px minmax(190px, 1.35fr) minmax(142px, .8fr) minmax(215px, 1.2fr);
  gap: 9px;
  align-items: end;
}
.dock-kind-switch {
  align-self: end;
  min-width: 0;
  margin: 0;
  border-radius: 8px;
  padding: 3px;
}
.dock-kind-switch button {
  min-height: 43px;
  border-radius: 6px;
  font-size: 12px;
}
.dock-kind-switch button svg { width: 16px; }
.dock-control {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: #d8d6d0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .03em;
}
.dock-control > span:first-child {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dock-control .availability {
  overflow: hidden;
  color: #8fcca1;
  font-size: 9px;
  font-style: normal;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-control .select-wrap { display: block; min-width: 0; }
.dock-control .select-wrap select {
  height: 43px;
  border-radius: 7px;
  padding-left: 11px;
  font-size: 12px;
}
.preset-picker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px !important;
}
.preset-manage-button,
.preset-new-button,
.preset-cancel-edit {
  min-height: 43px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 11px;
  background: rgba(255,255,255,.035);
  color: #cbc8c0;
  cursor: pointer;
  font-size: 11px;
}
.preset-manage-button:hover:not(:disabled),
.preset-new-button:hover,
.preset-cancel-edit:hover { border-color: rgba(242,203,112,.45); color: var(--accent); }
.preset-manage-button:disabled { cursor: not-allowed; opacity: .4; }
.dock-context-row {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 17px;
  color: var(--dim);
  font-size: 10px;
}
.dock-context-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-context-row .price-note {
  flex: 0 0 auto;
  font-size: 10px;
}
.dock-reference-head .field-label,
.dock-prompt-meta label { font-size: 12px; }
.dock-reference-head .reference-note,
.creation-dock .reference-empty,
.dock-prompt-meta,
.creation-dock .dock-action,
.dock-footer .form-hint { font-size: 10px; }
.creation-dock textarea {
  height: 78px;
  min-height: 78px;
  font-size: 14px;
}
.creation-dock .generate-button {
  min-height: 78px;
  font-size: 12px;
  letter-spacing: .04em;
}
.creation-dock .button-default { justify-content: center; }
.generate-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.generate-copy strong { font-size: 13px; line-height: 1.15; }
.generate-copy small {
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
  opacity: .72;
  white-space: nowrap;
}
.dock-footer .refine-button,
.dock-footer .llm-picker { font-size: 10px; }
.canvas-stage { padding-bottom: 365px; }
body.dock-open[data-app-view="assets"] .asset-main { padding-bottom: 360px; }
body.dock-open[data-app-view="assets"] .selection-bar { bottom: 320px; }

.preset-modal {
  display: grid;
  width: min(900px, 100%);
  max-height: min(86svh, 760px);
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 22px 26px;
  overflow: hidden;
  padding: 34px;
}
.preset-modal-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-right: 34px;
}
.preset-modal-heading h2 { margin: 13px 0 6px; }
.preset-modal-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.preset-new-button { flex: 0 0 auto; color: var(--accent); }
.preset-list {
  min-height: 260px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  scrollbar-width: thin;
}
.preset-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  padding: 15px 3px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}
.preset-list-item:last-child { border-bottom: 0; }
.preset-list-item > div { min-width: 0; }
.preset-list-item strong { display: block; font-size: 13px; }
.preset-list-item p {
  display: -webkit-box;
  overflow: hidden;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.preset-list-item > span { display: flex; gap: 5px; }
.preset-list-item button {
  min-height: 31px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  cursor: pointer;
  font-size: 9px;
}
.preset-list-item button:hover { color: var(--text); border-color: var(--line-strong); }
.preset-list-item .danger-action:hover { color: var(--danger); border-color: rgba(255,141,131,.35); }
.preset-list-empty {
  display: grid;
  min-height: 260px;
  place-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}
.preset-list-empty strong { color: #d8d6d0; font-size: 14px; }
.preset-list-empty span { font-size: 10px; }
.preset-form {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 13px;
}
.preset-form h3 { margin: 0 0 3px; font-size: 15px; }
.preset-form label { display: flex; flex-direction: column; gap: 7px; color: #cbc9c3; font-size: 11px; }
.preset-form input,
.preset-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: 0;
  padding: 11px 12px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 12px;
}
.preset-form input { height: 44px; }
.preset-form textarea { min-height: 145px; resize: vertical; line-height: 1.6; }
.preset-form input:focus,
.preset-form textarea:focus { border-color: rgba(242,203,112,.45); box-shadow: 0 0 0 3px rgba(242,203,112,.05); }
.preset-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.preset-form-actions .auth-submit { min-width: 128px; padding: 0 15px; }
.preset-cancel-edit { min-height: 47px; }

@media (max-width: 1180px) and (min-width: 801px) {
  .dock-control-bar { grid-template-columns: 156px minmax(180px, 1.2fr) 140px minmax(190px, 1fr); }
  .creation-dock { left: calc(340px + (100vw - 340px) / 2); width: calc(100vw - 368px); }
}

@media (max-width: 800px) {
  .creation-dock,
  body[data-app-view="assets"] .creation-dock {
    width: auto;
    max-height: min(67svh, 560px);
    gap: 8px;
    padding: 11px;
  }
  .dock-control-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dock-kind-switch { grid-column: 1 / 2; }
  .dock-model-control { grid-column: 2 / 3; }
  .dock-preset-control { grid-column: 1 / -1; }
  .dock-control .select-wrap select { height: 40px; font-size: 11px; }
  .dock-kind-switch button { min-height: 40px; }
  .preset-manage-button { min-height: 40px; }
  .dock-context-row > span:first-child { display: none; }
  .dock-context-row { justify-content: flex-end; min-height: 14px; }
  .dock-context-row .price-note { font-size: 9px; }
  .creation-dock textarea { height: 72px; min-height: 72px; font-size: 13px; }
  .creation-dock .generate-button { min-height: 72px; }
  .canvas-stage { padding-bottom: 430px; }
  body.dock-open[data-app-view="assets"] .asset-main { padding-bottom: 430px; }
  body.dock-open[data-app-view="assets"] .selection-bar { bottom: 386px; }
  .preset-modal { display: flex; max-height: 90svh; flex-direction: column; overflow-y: auto; padding: 29px 21px; }
  .preset-modal-heading { align-items: flex-start; flex-direction: column; gap: 14px; padding-right: 30px; }
  .preset-list { min-height: 180px; max-height: 250px; }
  .preset-list-empty { min-height: 180px; }
}

@media (max-width: 520px) {
  .dock-control-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dock-control > span:first-child { font-size: 10px; }
  .dock-control .availability { display: none; }
  .dock-preset-control { grid-column: 1 / -1; }
  .creation-dock .reference-tray { min-height: 52px; }
  .creation-dock .reference-empty { min-height: 44px; }
  .creation-dock .reference-thumb { flex-basis: 42px; height: 42px; }
  .creation-dock textarea { height: 68px; min-height: 68px; }
  .creation-dock .generate-button { min-height: 68px; }
  .generate-copy strong { font-size: 12px; }
  .generate-copy small { font-size: 8px; }
  .preset-list-item { align-items: start; grid-template-columns: 1fr; }
  .preset-list-item > span { justify-content: flex-end; }
}

/* V8 · minimal single-canvas creation workspace */
body[data-app-view="create"] .workspace {
  display: block;
  height: calc(100svh - 82px);
  min-height: 620px;
  overflow: hidden;
}
body[data-app-view="create"] .canvas-stage {
  width: min(1560px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: 24px clamp(24px, 3.6vw, 58px) 342px;
}
body[data-app-view="create"] .canvas-frame {
  flex: 1;
  min-height: 300px;
  border-color: rgba(255,255,255,.075);
  border-radius: 16px;
  background-color: #0b0c11;
}
body[data-app-view="create"] .creation-dock {
  left: 50%;
  bottom: 18px;
  width: min(1120px, calc(100vw - 48px));
  transform: translateX(-50%);
  border-color: rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px 16px;
  background: rgba(15,16,22,.96);
  box-shadow: 0 22px 70px rgba(0,0,0,.42);
}
body[data-app-view="create"] .dock-control-bar {
  grid-template-columns: 156px minmax(190px, 1.3fr) minmax(120px, .65fr) minmax(160px, .9fr) minmax(210px, 1.15fr);
  gap: 10px;
}
body[data-app-view="create"] .dock-control-bar:has(.dock-duration-control:not([hidden])) {
  grid-template-columns: 145px minmax(180px, 1.2fr) 120px 110px minmax(150px,.85fr) minmax(190px,1fr);
}
.dock-control .select-wrap select,
.dock-kind-switch,
.preset-manage-button {
  border-color: rgba(255,255,255,.085);
  background: rgba(255,255,255,.022);
}
.dock-control .select-wrap select:hover:not(:disabled) { border-color: rgba(255,255,255,.17); }
.dock-control > span:first-child { color: #a6a5aa; font-size: 10px; font-weight: 550; }
.inline-control-action {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 9px;
}
.dock-context-row {
  min-height: 15px;
  padding: 0 2px;
}
.dock-context-row > span:first-child { display: none; }
.dock-context-row { justify-content: flex-end; }
.dock-reference-section {
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.075);
}
.creation-dock .reference-tray {
  min-height: 56px;
  border-color: rgba(255,255,255,.09);
  background: transparent;
}
.creation-dock .reference-empty { min-height: 42px; }
.creation-dock textarea {
  height: 72px;
  min-height: 72px;
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.018);
}
.creation-dock .generate-button { min-height: 72px; }
.dock-footer { padding-top: 1px; }
.model-empty {
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  background: rgba(242,203,112,.055);
}
.model-empty p { display: inline; margin-left: 8px; }

@media (max-width: 800px) {
  body[data-app-view="create"] .workspace {
    height: auto;
    min-height: calc(100svh - 70px);
    overflow: visible;
  }
  body[data-app-view="create"] .canvas-stage {
    min-height: calc(100svh - 70px);
    padding: 18px 14px 430px;
  }
  body[data-app-view="create"] .creation-dock {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: min(68svh, 570px);
    transform: none;
    padding: 11px;
  }
  body[data-app-view="create"] .dock-control-bar,
  body[data-app-view="create"] .dock-control-bar:has(.dock-duration-control:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .dock-kind-switch { grid-column: 1; }
  .dock-model-control { grid-column: 2; }
  .dock-folder-control { grid-column: 2; }
  .dock-preset-control { grid-column: 1 / -1; }
  .dock-duration-control { grid-column: 1; }
  body[data-app-view="create"] .canvas-frame { min-height: 440px; }
}

@media (max-width: 520px) {
  body[data-app-view="create"] .canvas-stage { padding-bottom: 440px; }
  body[data-app-view="create"] .creation-dock { max-height: min(69svh, 580px); }
  .dock-control > span:first-child { font-size: 9px; }
  .dock-context-row { min-height: 12px; }
  .creation-dock .reference-tray { min-height: 50px; }
  .creation-dock textarea { height: 66px; min-height: 66px; }
  .creation-dock .generate-button { min-height: 66px; }
}

/* V9 · prompt-first compact composer */
body[data-app-view="create"] .canvas-stage {
  padding-bottom: 292px;
}
body[data-app-view="create"] .creation-dock {
  width: min(1080px, calc(100vw - 48px));
  gap: 7px;
  padding: 12px 14px;
}
.dock-reference-section {
  gap: 6px;
  padding-top: 0;
  border-top: 0;
}
.dock-reference-head {
  min-height: 28px;
  gap: 10px;
}
.dock-reference-head > div { flex: 0 1 auto; }
.reference-actions { gap: 6px; }
.save-folder-inline {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 6px;
  background: rgba(255,255,255,.022);
}
.save-folder-inline select {
  width: 122px;
  height: 100%;
  appearance: none;
  overflow: hidden;
  border: 0;
  outline: 0;
  padding: 0 8px;
  background: transparent;
  color: #aaa9ae;
  cursor: pointer;
  text-overflow: ellipsis;
  font-size: 9px;
}
.save-folder-inline select option,
.compact-picker select option { color: #eeeae1; background: #171820; }
.save-folder-inline button {
  width: 27px;
  height: 100%;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.075);
  padding: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
}
.creation-dock .reference-tray { min-height: 52px; }
.creation-dock .reference-empty { min-height: 38px; }
.creation-dock .reference-thumb { flex-basis: 42px; height: 42px; }
.dock-prompt-meta { min-height: 16px; }
.dock-compose-row {
  grid-template-columns: 82px minmax(0, 1fr) 138px;
  gap: 7px;
}
.dock-kind-switch {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  height: 70px;
  margin: 0;
  padding: 3px;
  border-radius: 7px;
}
.dock-kind-switch button {
  min-height: 0;
  border-radius: 5px;
  gap: 5px;
  padding: 0 7px;
  font-size: 10px;
}
.dock-kind-switch button svg { width: 13px; }
.dock-kind-switch .mode-count {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  font-size: 7px;
}
.creation-dock textarea {
  height: 70px;
  min-height: 70px;
  border-radius: 7px;
  font-size: 13px;
}
.creation-dock .generate-button {
  min-height: 70px;
  border-radius: 7px;
}
.dock-footer {
  min-width: 0;
  gap: 8px;
  padding-top: 1px;
}
.dock-tool-row {
  display: flex;
  min-width: 0;
  max-width: none !important;
  flex: 1;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
}
.dock-footer .form-hint { display: none; }
.dock-tool-row .refine-button {
  width: auto;
  min-width: 86px;
  min-height: 34px;
  border-radius: 6px;
  font-size: 10px;
}
.dock-tool-row .llm-picker {
  width: 150px;
  min-height: 34px;
  flex: 0 1 150px;
  border-radius: 6px;
  padding: 0 8px;
}
.dock-tool-row .llm-picker > span { display: none; }
.dock-tool-row .llm-picker select { font-size: 9px; }
.compact-picker {
  display: flex;
  min-width: 0;
  height: 34px;
  flex: 1 1 160px;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 6px;
  padding: 0 8px;
  background: rgba(255,255,255,.022);
  color: #777880;
  font-size: 8px;
  white-space: nowrap;
}
.compact-picker > span { flex: 0 0 auto; }
.compact-picker select {
  min-width: 0;
  height: 100%;
  flex: 1;
  appearance: none;
  overflow: hidden;
  border: 0;
  outline: 0;
  background: transparent;
  color: #c4c2bc;
  cursor: pointer;
  text-overflow: ellipsis;
  font-size: 10px;
}
.compact-picker select:disabled { color: #62636a; cursor: not-allowed; }
.compact-picker .availability { display: none; }
.dock-model-control { flex-basis: 210px; }
.dock-duration-control { flex: 0 1 100px; }
.preset-inline {
  display: flex;
  min-width: 190px;
  flex: 1.1 1 220px;
  align-items: center;
  gap: 5px;
}
.folder-inline {
  display: flex;
  min-width: 150px;
  flex: .85 1 170px;
  align-items: center;
  gap: 5px;
}
.folder-inline .compact-picker { flex: 1; }
.folder-inline .preset-manage-button {
  width: 34px;
  min-height: 34px;
  border-radius: 6px;
  padding: 0;
  font-size: 14px;
}
.preset-inline .compact-picker { flex: 1; }
.preset-inline .preset-manage-button {
  min-height: 34px;
  border-radius: 6px;
  padding: 0 9px;
  font-size: 9px;
}

@media (max-width: 800px) {
  body[data-app-view="create"] .canvas-stage { padding-bottom: 300px; }
  body[data-app-view="create"] .creation-dock {
    max-height: min(55svh, 455px);
    gap: 6px;
    padding: 10px;
  }
  .dock-reference-head { gap: 6px; }
  .dock-reference-head .reference-note { display: none; }
  .save-folder-inline select { width: 88px; }
  .reference-actions { gap: 4px; }
  .creation-dock .dock-action { padding: 0 7px; font-size: 9px; }
  .dock-compose-row { grid-template-columns: 64px minmax(0, 1fr) 104px; gap: 6px; }
  .dock-kind-switch { height: 66px; }
  .dock-kind-switch button { padding: 0 4px; font-size: 9px; }
  .dock-kind-switch button svg { width: 12px; }
  .dock-kind-switch .mode-count { display: none; }
  .creation-dock textarea { height: 66px; min-height: 66px; padding-left: 10px; font-size: 12px; }
  .creation-dock .generate-button { min-height: 66px; }
  .generate-copy strong { font-size: 11px; }
  .generate-copy small { font-size: 7px; }
  .dock-tool-row {
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .dock-tool-row::-webkit-scrollbar { display: none; }
  .dock-tool-row > * { flex-shrink: 0; }
  .dock-tool-row .refine-button { min-width: 80px; }
  .dock-tool-row .llm-picker { width: 130px; flex-basis: 130px; }
  .compact-picker { width: 145px; flex-basis: 145px; }
  .dock-model-control { width: 180px; flex-basis: 180px; }
  .dock-duration-control { width: 94px; flex-basis: 94px; }
  .preset-inline { min-width: 190px; flex-basis: 190px; }
  .folder-inline { min-width: 160px; flex-basis: 160px; }
  body[data-app-view="create"] .canvas-frame { min-height: 440px; }
}

@media (max-width: 520px) {
  body[data-app-view="create"] .canvas-stage { padding-bottom: 300px; }
  body[data-app-view="create"] .creation-dock { max-height: min(56svh, 455px); }
  .dock-reference-head > div { display: none; }
  .dock-reference-head { justify-content: flex-end; }
  .save-folder-inline select { width: 91px; }
  .creation-dock .reference-tray { min-height: 48px; }
  .dock-prompt-meta { min-height: 14px; }
}

/* V11 · full-size asset viewer */
.asset-viewer-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(3, 4, 7, .92);
  backdrop-filter: blur(18px);
  animation: fadeIn .2s ease;
}
.asset-viewer {
  position: relative;
  display: grid;
  width: min(1440px, 100%);
  height: calc(100svh - 24px);
  max-height: 960px;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 16px;
  outline: 0;
  background: #08090d;
  box-shadow: 0 35px 110px rgba(0, 0, 0, .66);
  animation: modalIn .32s var(--ease);
}
.asset-viewer-stage {
  position: relative;
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 18px 72px;
  background: #050609;
}
.asset-viewer-stage img,
.asset-viewer-stage video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .46);
}
.asset-viewer-stage video { width: 100%; height: 100%; }
.asset-viewer-close,
.asset-viewer-nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(15, 16, 22, .72);
  color: #e7e4dd;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: border-color .2s, background .2s, transform .2s;
}
.asset-viewer-close:hover,
.asset-viewer-nav:hover:not(:disabled) {
  border-color: rgba(242, 203, 112, .42);
  background: rgba(28, 29, 37, .9);
}
.asset-viewer-close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 24px;
}
.asset-viewer-nav {
  top: calc(50% - 42px);
  width: 42px;
  height: 58px;
  border-radius: 10px;
  font-size: 34px;
  line-height: 1;
}
.asset-viewer-prev { left: 16px; }
.asset-viewer-next { right: 16px; }
.asset-viewer-nav:disabled { opacity: .2; cursor: default; }
.asset-viewer-footer {
  display: flex;
  min-height: 108px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 18px 22px;
  background: #0d0e13;
}
.asset-viewer-copy { min-width: 0; flex: 1; }
.asset-viewer-count {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .13em;
}
.asset-viewer-copy h2 { margin: 0; font-size: 16px; font-weight: 580; }
.asset-viewer-copy p {
  overflow: hidden;
  margin: 5px 0 0;
  color: var(--dim);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.asset-viewer-copy .asset-viewer-prompt {
  max-width: min(720px, 56vw);
  color: #b8b6b0;
  font-size: 10px;
}
.asset-viewer-prompt-editor {
  display: grid;
  width: min(820px, 60vw);
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  color: #8c8d94;
  font-size: 9px;
}
.asset-viewer-prompt-field { position: relative; display: block; min-width: 0; }
.asset-viewer-prompt-field textarea {
  width: 100%;
  min-height: 52px;
  max-height: 110px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: 0;
  padding: 9px 58px 9px 10px;
  background: rgba(255,255,255,.025);
  color: #d8d5cf;
  font-size: 10px;
  line-height: 1.45;
}
.asset-viewer-prompt-field textarea:focus { border-color: rgba(242,203,112,.42); box-shadow: 0 0 0 3px rgba(242,203,112,.05); }
.asset-viewer-prompt-field small { position: absolute; right: 9px; bottom: 8px; color: #666872; font-size: 7px; }
.asset-viewer-prompt-editor > button {
  min-height: 38px;
  border: 1px solid rgba(242,203,112,.3);
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(242,203,112,.07);
  color: var(--accent);
  cursor: pointer;
  font-size: 9px;
}
.asset-viewer-prompt-editor > button:disabled { opacity: .45; cursor: wait; }
.asset-viewer-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; }
.asset-viewer-actions button,
.asset-viewer-actions a {
  display: inline-grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 13px;
  background: rgba(255, 255, 255, .025);
  color: #c5c2bc;
  cursor: pointer;
  font-size: 9px;
  text-decoration: none;
}
.asset-viewer-actions button:hover,
.asset-viewer-actions a:hover { border-color: rgba(242, 203, 112, .38); color: var(--accent); }
.asset-viewer-actions a { background: var(--accent); color: #17130a; font-weight: 700; }
.asset-viewer-actions a:hover { color: #17130a; background: #ffe09a; }

@media (max-width: 800px) {
  .asset-viewer-backdrop { padding: 0; }
  .asset-viewer {
    width: 100%;
    height: 100svh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .asset-viewer-stage { padding: 58px 12px 16px; }
  .asset-viewer-stage img,
  .asset-viewer-stage video { max-height: 100%; }
  .asset-viewer-close { top: 10px; right: 10px; }
  .asset-viewer-nav { top: calc(50% - 75px); width: 38px; height: 50px; }
  .asset-viewer-prev { left: 8px; }
  .asset-viewer-next { right: 8px; }
  .asset-viewer-footer {
    min-height: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
    padding: 15px 14px max(15px, env(safe-area-inset-bottom));
  }
  .asset-viewer-copy .asset-viewer-prompt { max-width: none; }
  .asset-viewer-prompt-editor {
    width: 100%;
    grid-template-columns: 1fr auto;
    gap: 7px;
  }
  .asset-viewer-prompt-editor > span:first-child { grid-column: 1 / -1; }
  .asset-viewer-prompt-field textarea { min-height: 58px; }
  .asset-viewer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .asset-viewer-actions button,
  .asset-viewer-actions a { min-width: 0; padding: 0 7px; }
}

/* V13 final layout override: keep recent creations above the fixed composer. */
body[data-app-view="create"] .canvas-stage { padding-bottom: 365px; }
@media (max-width: 800px) {
  body[data-app-view="create"] .canvas-stage { padding-bottom: 370px; }
}

/* V14 mobile layout override: keep the creation path vertical and readable. */
@media (max-width: 800px) {
  body[data-app-view="create"] .workspace {
    min-height: 0;
  }

  body[data-app-view="create"] .canvas-stage {
    min-height: 0;
    padding: 16px 14px 12px;
  }

  body[data-app-view="create"] .canvas-frame {
    min-height: 360px;
  }

  body[data-app-view="create"] .creation-dock,
  body[data-app-view="assets"] .creation-dock {
    position: static;
    width: auto;
    max-height: none;
    gap: 9px;
    overflow: visible;
    overscroll-behavior: contain;
    transform: none;
    margin: 0 14px calc(16px + env(safe-area-inset-bottom));
    padding: 12px;
    border-radius: 16px;
  }

  .dock-reference-head {
    align-items: flex-start;
  }

  .dock-reference-head > div {
    display: flex;
  }

  .dock-reference-head .reference-note {
    display: none;
  }

  .dock-compose-row {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 8px;
  }

  .dock-kind-switch {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    height: 42px;
  }

  .dock-kind-switch button {
    min-height: 34px;
  }

  .creation-dock textarea {
    height: 82px;
    min-height: 82px;
    font-size: 13px;
  }

  .creation-dock .generate-button {
    min-height: 82px;
  }

  .dock-tool-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    overflow: visible;
    padding-bottom: 0;
  }

  .dock-tool-row > *,
  .dock-tool-row .refine-button,
  .dock-tool-row .llm-picker,
  .dock-tool-row .compact-picker,
  .dock-model-control,
  .dock-duration-control,
  .folder-inline,
  .preset-inline {
    width: auto;
    min-width: 0;
    flex: initial;
    flex-basis: auto;
  }

  .dock-tool-row .refine-button,
  .dock-tool-row .llm-picker,
  .compact-picker {
    min-height: 38px;
  }

  .folder-inline,
  .preset-inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (max-width: 520px) {
  .topbar {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    padding: 0 12px;
    gap: 8px;
  }

  .primary-nav {
    justify-self: center;
    margin-left: 0;
  }

  .primary-nav button {
    padding: 0 9px;
  }

  .topbar-actions,
  .account-area {
    min-width: 0;
  }

  .login-trigger {
    min-height: 34px;
    padding: 0 10px;
    white-space: nowrap;
  }

  .service-state {
    display: none;
  }

  body[data-app-view="create"] .canvas-stage {
    padding: 14px 12px 10px;
  }

  body[data-app-view="create"] .canvas-frame {
    min-height: 268px;
  }

  body[data-app-view="create"] .creation-dock,
  body[data-app-view="assets"] .creation-dock {
    margin: 0 8px calc(12px + env(safe-area-inset-bottom));
    padding: 12px;
  }

  .dock-reference-head {
    justify-content: space-between;
  }

  .dock-reference-head > div {
    display: flex;
  }

  .reference-actions {
    flex: 0 0 auto;
  }

  .dock-compose-row {
    grid-template-columns: 1fr;
  }

  .creation-dock textarea {
    height: 96px;
    min-height: 96px;
  }

  .creation-dock .generate-button {
    min-height: 54px;
  }

  .creation-dock .button-default {
    justify-content: center;
  }

  .generate-copy {
    align-items: center;
    text-align: center;
  }

  .dock-tool-row {
    grid-template-columns: 1fr;
  }

  .dock-model-control,
  .dock-folder-control,
  .dock-preset-control,
  .dock-duration-control {
    grid-column: auto;
  }

  .dock-tool-row .refine-button,
  .dock-tool-row .llm-picker,
  .dock-tool-row .compact-picker,
  .dock-model-control,
  .dock-duration-control {
    width: 100%;
  }

  .folder-inline,
  .preset-inline {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 40px;
  }
}

/* V15 · keep the result media inside the canvas frame.
   The auto grid track made max-height:100% circular, so tall images
   rendered at natural size and got cut off by the frame overflow. */
.result-canvas {
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}

/* V16 . the generated result opens in the existing lightbox.
   The image itself is clickable; #zoomResultButton is the keyboard path. */
#resultImage { cursor: zoom-in; }

/* V17 . fullscreen lightbox.
   Before: .asset-viewer was a centered min(1440px,100%) x max-height:960px card
   and the media used width:auto / max-width:100%, so a 1024px image never scaled
   up on a large display -- black bands on all four sides. Now the shell fills the
   viewport and the media fills its stage with object-fit: contain. */
.asset-viewer-backdrop { padding: 0; }
.asset-viewer {
  width: 100%;
  height: 100svh;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.asset-viewer-stage {
  padding: 0;
  /* The implicit row is auto, so height:100% on the media would be circular
     (row sizes to the image, image sizes to the row) and overflow the stage.
     Definite + shrinkable tracks make the percentage resolve. Same fix as V15. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
}
.asset-viewer-stage img,
.asset-viewer-stage video {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}
@media (max-width: 800px) {
  .asset-viewer-stage { padding: 52px 0 12px; }
}

/* V18 . create view becomes a two column split: prompt rail left, preview right.
   Before: .creation-dock was a fixed bar floating over the bottom of the canvas and
   .canvas-stage reserved padding-bottom: 342px for it, so the preview frame only got
   about half the column height (1444x519 of a 998px tall column at 1920x1080).
   The dock stays a body level element because the assets view still floats it over
   the grid; it is only turned into a rail here. Everything is scoped to >= 1024px,
   so the stacked phone and tablet layouts are untouched. */
@keyframes railIn { from { opacity: 0; transform: translateX(-12px); } }

@media (min-width: 1024px) {
  /* Grid on body rather than a fixed rail plus canvas offset: the topbar is the only
     other in flow child, so the row track absorbs its height automatically and the
     70px topbar variants keep working without duplicating the height math. */
  body[data-app-view="create"] {
    --rail: clamp(358px, 25vw, 438px);
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }
  body[data-app-view="create"] .topbar { grid-column: 1 / -1; }

  /* The dock stops floating and becomes the left rail. */
  body[data-app-view="create"] .creation-dock {
    position: static;
    z-index: auto;
    left: auto;
    bottom: auto;
    grid-row: 2;
    grid-column: 1;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: none;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    padding: 17px 17px 22px;
    background: linear-gradient(180deg, rgba(15, 16, 22, .8), rgba(10, 11, 16, .5));
    box-shadow: none;
    backdrop-filter: none;
    animation: railIn .34s var(--ease) both;
  }

  /* Right column: the preview reclaims the height the dock used to cover.
     Definite shrinkable tracks instead of percentage heights, so nothing resolves
     against an auto track (the circularity that bit V15 and V17). */
  body[data-app-view="create"] .workspace {
    display: grid;
    grid-row: 2;
    grid-column: 2;
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  body[data-app-view="create"] .canvas-stage {
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 21px clamp(20px, 2.4vw, 42px) 15px;
  }
  body[data-app-view="create"] .canvas-frame { min-height: 0; }
  /* The rail no longer covers the stage footer, so let it show again. */
  body.dock-open[data-app-view="create"] .stage-foot { visibility: visible; }

  /* Rail interior becomes one column. display: contents lifts the compose row's
     three children into the rail flow so the generate button can sit under the
     prompt instead of beside it. */
  body[data-app-view="create"] .dock-compose-row { display: contents; }
  body[data-app-view="create"] .dock-kind-switch { order: 1; align-self: stretch; }
  body[data-app-view="create"] .model-empty { order: 2; }
  body[data-app-view="create"] .dock-reference-section { order: 3; }
  body[data-app-view="create"] .dock-prompt-meta { order: 4; }
  body[data-app-view="create"] .creation-dock .prompt-wrap { order: 5; }
  body[data-app-view="create"] .creation-dock .generate-button { order: 6; }
  body[data-app-view="create"] .dock-footer { order: 7; }

  /* The kind switch carries margin-bottom: 22px from the old stacked composer;
     the rail uses flex gap, so that margin would double count. */
  body[data-app-view="create"] .creation-dock .dock-kind-switch { margin-bottom: 0; }

  /* The prompt takes the leftover height rather than leaving a hole above the
     parameter rows, but is capped so it does not balloon on tall screens.
     min-height lets it shrink first when the rail runs short, which keeps the
     generate button on screen instead of forcing a scroll. */
  body[data-app-view="create"] .creation-dock .prompt-wrap {
    display: flex;
    flex: 1 1 auto;
    min-height: 120px;
    max-height: clamp(180px, 38vh, 430px);
  }
  body[data-app-view="create"] .creation-dock textarea {
    height: auto;
    min-height: 120px;
    flex: 1;
    resize: vertical;
  }
  body[data-app-view="create"] .creation-dock .generate-button { min-height: 54px; }
  body[data-app-view="create"] .creation-dock .reference-mention-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 208px;
  }

  /* Parameter row wraps into two columns instead of one long flex line that would
     overflow a 358px rail. */
  body[data-app-view="create"] .dock-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    margin-top: 0;
  }
  body[data-app-view="create"] .dock-footer .dock-tool-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: initial;
    max-width: none;
    gap: 8px;
  }
  body[data-app-view="create"] .dock-footer .dock-tool-row > * {
    width: auto;
    min-width: 0;
    flex: initial;
    flex-basis: auto;
  }
  body[data-app-view="create"] .dock-footer .form-hint {
    max-width: none;
    text-align: left;
  }
}


/* V19 · custom dropdown layer.
   Native <select> popups are OS-drawn and cannot be styled, so the list always
   looked foreign no matter what the closed control looked like. xselect.js keeps
   the native element as the source of truth (display:none) and renders a trigger
   plus a body-level fixed listbox.

   The trigger inherits each host pill's geometry, so no existing media-query
   tier needs touching. The 8px inline label inside each pill is moved into the
   popup header instead: it was eating 16-24px of a 37-62px pill in the
   801-1023px band, leaving as little as 10px for the value itself. */
select.xs-native { display: none; }

/* the pill's own caption moves to the popup header, freeing the value */
.compact-picker > span,
.llm-picker > span { display: none; }

.xs-trigger {
  display: inline-flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
  appearance: none;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: #c4c2bc;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 10.5px;
  letter-spacing: .002em;
  transition: color .18s;
}
.xs-trigger .xs-value {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xs-trigger .xs-caret {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .38;
  transition: transform .22s var(--ease), opacity .2s;
}
.xs-trigger:hover:not(:disabled) { color: var(--text); }
.xs-trigger:hover:not(:disabled) .xs-caret { opacity: .75; }
.xs-trigger.is-open { color: var(--text); }
.xs-trigger.is-open .xs-caret { opacity: .95; transform: rotate(180deg); }
.xs-trigger.is-placeholder .xs-value { color: #6d6e77; }
.xs-trigger:disabled { cursor: not-allowed; color: #62636a; }
.xs-trigger:disabled .xs-caret { opacity: .2; }
.xs-trigger:focus-visible {
  outline: 2px solid rgba(242,203,112,.5);
  outline-offset: 3px;
  border-radius: 4px;
}

/* host pills keep their own frame; the trigger fills them edge to edge */
.compact-picker .xs-trigger { height: 100%; }
.llm-picker .xs-trigger { font-size: 9.5px; color: #c7c5be; }
.compact-picker:hover:not(:has(.xs-trigger:disabled)),
.llm-picker:hover:not(:has(.xs-trigger:disabled)) {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.038);
}
.compact-picker:has(.xs-trigger.is-open),
.llm-picker:has(.xs-trigger.is-open) {
  border-color: rgba(242,203,112,.42);
  background: rgba(242,203,112,.05);
}
.compact-picker, .llm-picker { transition: border-color .18s, background .18s; }

/* full-width field context (folder modal) */
#folderForm .xs-trigger {
  display: flex;
  width: 100%;
  height: 45px;
  flex: initial;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  font-size: 11px;
}
#folderForm .xs-trigger:hover:not(:disabled) { border-color: rgba(255,255,255,.2); }
#folderForm .xs-trigger.is-open {
  border-color: rgba(242,203,112,.45);
  box-shadow: 0 0 0 3px rgba(242,203,112,.05);
}

/* the listbox — body-level and fixed, so the rail's overflow-y:auto and the
   modal's stacking context can never clip it. z-index clears 210 (upload float). */
.xs-popup {
  position: fixed;
  z-index: 260;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 5px;
  background: rgba(19,20,27,.97);
  box-shadow: 0 24px 68px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.38);
  backdrop-filter: blur(28px) saturate(1.3);
  transform-origin: top center;
  animation: xsPopIn .17s var(--ease) both;
}
.xs-popup.is-above { transform-origin: bottom center; animation-name: xsPopInUp; }
.xs-popup[hidden] { display: none; }

.xs-head {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 1px 3px 4px;
  padding: 6px 8px 9px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  color: #6f7078;
  font-size: 9px;
}
.xs-head b {
  color: #cfcabc;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
}
.xs-head span { flex: 0 0 auto; font-size: 8px; letter-spacing: .12em; }
.xs-head[hidden] { display: none; }

/* --xs-max-rows is the row budget; xselect.js turns it into a pixel cap snapped
   to whole rows, so a capped list never slices its last row in half */
.xs-popup { --xs-max-rows: 10; }
.xs-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  outline: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.13) transparent;
}
.xs-list::-webkit-scrollbar { width: 9px; }
.xs-list::-webkit-scrollbar-track { background: transparent; }
.xs-list::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 9px;
  background-clip: content-box;
  background-color: rgba(255,255,255,.14);
}
.xs-list::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.24); }

.xs-option {
  position: relative;
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 10px;
  border-radius: 9px;
  padding: 7px 11px 7px 13px;
  color: #b7b5b0;
  cursor: pointer;
  font-size: 11px;
  line-height: 1.45;
  transition: background .13s, color .13s;
}
.xs-option .xs-option-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.xs-option .xs-tick {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s, transform .15s var(--ease);
}
.xs-option.is-active { background: rgba(255,255,255,.055); color: var(--text); }
.xs-option.is-selected { color: #f0e6cf; }
.xs-option.is-selected .xs-tick { opacity: 1; transform: none; }
.xs-option.is-selected::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 2px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 2px;
  background: var(--accent);
}
.xs-option.is-disabled { color: #5b5c64; cursor: not-allowed; }
.xs-option.is-disabled .xs-tick { display: none; }

@keyframes xsPopIn { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
@keyframes xsPopInUp { from { opacity: 0; transform: translateY(5px) scale(.985); } }

@media (prefers-reduced-motion: reduce) {
  .xs-popup { animation: none; }
  .xs-trigger .xs-caret,
  .xs-option,
  .xs-option .xs-tick { transition: none; }
}

/* touch targets get taller rows; the pills themselves already grow here */
@media (max-width: 800px) {
  .xs-popup { border-radius: 13px; --xs-max-rows: 7; }
  .xs-option { min-height: 40px; font-size: 12px; }
  .xs-trigger { font-size: 11px; }
}

/* 801-1023px squeeze band: the V18 rail is not engaged yet and the tool row is a
   nowrap flex with 8 children and no width floor, so every pill shrinks until its
   value ellipses to nothing ("5 秒" fell to 13px). Same remedy the <=800px tier
   already uses -- fixed floors, no shrink, scroll as the escape hatch. Floors are
   measured from the real strings, and the per-pill chrome is trimmed from 38px to
   ~33px so the whole row still fits 900px without waking the scrollbar.
   The upper bound is 1023.98px, not 1023px: on a fractional device pixel ratio
   the layout viewport can sit just above 1023 while still below the V18 rail's
   min-width:1024, and an integer bound leaves that sliver matching neither. */
@media (min-width: 801px) and (max-width: 1023.98px) {
  .dock-tool-row {
    overflow-x: auto;
    padding-bottom: 1px;
    scrollbar-width: none;
  }
  .dock-tool-row::-webkit-scrollbar { display: none; }
  .dock-tool-row > .llm-picker,
  .dock-tool-row .compact-picker { gap: 5px; padding: 0 6px; }
  .dock-tool-row .xs-trigger { gap: 5px; }
  .dock-tool-row .xs-trigger .xs-caret { width: 11px; height: 11px; }
  /* .dock-tool-row .llm-picker already carries flex:1, which outranks a plain
     "> *" reset, so every floor below states its own flex. The two -inline spans
     also carry base min-width floors (150/190) that would outrank a width, so
     they are cleared explicitly. Each -inline also holds a manage button beside
     its pill, hence the wider wrapper for a narrower pill. */
  .dock-tool-row > * { flex-shrink: 0; }
  .dock-tool-row > .refine-button { min-width: 62px; flex-shrink: 0; }
  .dock-tool-row > .llm-picker { width: 92px; flex: 0 0 92px; }
  .dock-tool-row > .compact-picker { width: 114px; flex: 0 0 114px; }
  .dock-tool-row > .dock-model-control { width: 118px; flex: 0 0 118px; }
  .dock-tool-row > .dock-duration-control { width: 62px; flex: 0 0 62px; }
  .dock-tool-row > .folder-inline { min-width: 0; width: 126px; flex: 0 0 126px; }
  .dock-tool-row > .preset-inline { min-width: 0; width: 130px; flex: 0 0 130px; }
}
/* V20 · three column create view: examples rail / composer / queue rail.
   V18 turned the composer into a left rail with the preview canvas on the right.
   V20 keeps the composer in the middle and gives it the wide track, because the
   prompt is the thing being edited; the canvas is retired at desktop widths since
   the queue rail now carries every result as a thumbnail (click to enlarge in the
   V17 lightbox), which is also what makes room for a real queue.

   Below 1024px nothing is re-plumbed: both rails are ordinary in-flow blocks
   above and below the existing stacked layout, and the canvas stays visible with
   mirrorQueueToCanvas() keeping it in step. That matters because /draw/ serves
   index.html at every width -- desktop.html is an alias, not a separate page. */

.rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.rail-head .eyebrow { display: block; }
.rail-title {
  display: block;
  margin-top: 3px;
  color: #d9d5cb;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.rail-foot {
  margin: 10px 0 0;
  color: #6f6c66;
  font-size: 10px;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------- examples */

.example-rail,
.queue-rail {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px 14px 14px;
  background: linear-gradient(180deg, rgba(15, 16, 22, .72), rgba(10, 11, 16, .46));
}

.example-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 11px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.example-tabs::-webkit-scrollbar { display: none; }
.example-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 10px;
  height: 27px;
  background: rgba(255, 255, 255, .012);
  color: #8d8a83;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .01em;
  transition: color .18s, border-color .18s, background .18s;
}
.example-tab i {
  color: #605d57;
  font-style: normal;
  font-size: 9px;
}
.example-tab:hover {
  border-color: rgba(214, 199, 162, .3);
  color: #c9c5bb;
}
.example-tab.is-active {
  border-color: rgba(214, 199, 162, .46);
  background: rgba(214, 199, 162, .1);
  color: #e6e1d5;
}
.example-tab.is-active i { color: #b8a87e; }

/* V21: three-column grid; each card is thumb-above + title-below. The old
   horizontal list (.example-card-copy / .example-card-append) is replaced by
   a dedicated detail overlay that the user opens by tapping a card. */
.example-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.example-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .014);
  transition: border-color .18s, background .18s;
}
.example-card:hover {
  border-color: rgba(214, 199, 162, .28);
  background: rgba(214, 199, 162, .05);
}
.example-card-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.example-thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
}
.example-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.example-thumb.is-empty {
  display: grid;
  place-items: center;
  color: #0d0e13;
  font-size: 18px;
  font-weight: 600;
}
/* Placeholder tones live here because the page CSP forbids inline styles. */
.example-thumb.is-empty[data-tone="0"] { background: linear-gradient(140deg, #cdbf9c, #9d9276); }
.example-thumb.is-empty[data-tone="1"] { background: linear-gradient(140deg, #a9bcc4, #7d8f99); }
.example-thumb.is-empty[data-tone="2"] { background: linear-gradient(140deg, #c4a9a9, #997d80); }
.example-thumb.is-empty[data-tone="3"] { background: linear-gradient(140deg, #aec2ac, #7f9481); }
.example-thumb.is-empty[data-tone="4"] { background: linear-gradient(140deg, #bbb0c6, #8d849b); }
.example-thumb.is-empty[data-tone="5"] { background: linear-gradient(140deg, #c9bda4, #97907c); }

/* Title bar below the thumbnail, replaces the old .example-card-copy block. */
.example-card-title {
  padding: 5px 7px 7px;
  color: #c5c1b8;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.example-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 4px;
  color: #6b6862;
  text-align: center;
  font-size: 11px;
}

/* ------------------------------------------------------------------- queue */

.queue-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.queue-summary {
  color: #7d7a74;
  font-size: 10px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.rail-collapse {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  height: 24px;
  background: transparent;
  color: #8d8a83;
  cursor: pointer;
  font-size: 10px;
  transition: color .18s, border-color .18s;
}
.rail-collapse:hover {
  border-color: rgba(214, 199, 162, .34);
  color: #ded8ca;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-height: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.queue-tile {
  display: flex;
  align-items: stretch;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, .014);
  transition: border-color .2s, background .2s;
}
.queue-tile.is-running { border-color: rgba(214, 199, 162, .3); }
.queue-tile.is-failed { border-color: rgba(196, 118, 108, .34); }
.queue-tile.is-completed:hover {
  border-color: rgba(214, 199, 162, .3);
  background: rgba(214, 199, 162, .05);
}

.queue-media {
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
  cursor: default;
}
.queue-media.is-openable { cursor: zoom-in; }
.queue-media img,
.queue-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.queue-media.is-openable:hover img,
.queue-media.is-openable:hover video { opacity: .82; }
.queue-badge {
  position: absolute;
  right: 3px;
  bottom: 3px;
  border-radius: 4px;
  padding: 0 3px;
  background: rgba(9, 10, 14, .74);
  color: #d6c7a2;
  font-style: normal;
  font-size: 7px;
  letter-spacing: .06em;
}
.queue-state {
  color: #7d7a74;
  font-size: 9.5px;
  letter-spacing: .01em;
}
.queue-state.is-failed { color: #c4766c; }

/* Conic-gradient ring driven by the --p custom property the tile writes, so the
   dial redraws on each render without a second element per task. */
.queue-ring {
  display: grid;
  place-items: center;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    conic-gradient(rgba(214, 199, 162, .82) calc(var(--p, 0) * 1%), rgba(255, 255, 255, .07) 0);
}
.queue-ring::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #12131a;
}
.queue-ring b {
  position: relative;
  color: #cfc9ba;
  font-size: 9.5px;
  font-weight: 600;
}

.queue-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.queue-copy p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: #cdc9bf;
  font-size: 11px;
  line-height: 1.45;
}
.queue-copy small {
  overflow: hidden;
  color: #75726c;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.5px;
}
.queue-bar {
  display: block;
  height: 2px;
  margin-top: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.queue-bar b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #a08f66, #d6c7a2);
  transition: width .5s linear;
}

.queue-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
}
.queue-act {
  min-width: 24px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 5px;
  height: 22px;
  background: transparent;
  color: #7d7a74;
  cursor: pointer;
  font-size: 10px;
  transition: color .18s, border-color .18s, background .18s;
}
.queue-act:hover {
  border-color: rgba(214, 199, 162, .34);
  background: rgba(214, 199, 162, .08);
  color: #ded8ca;
}
.queue-act:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.queue-empty {
  padding: 20px 6px;
  color: #6b6862;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
}

/* -------------------------------------------------- stacked tiers (<1024px) */

/* The rails are plain blocks here. Order in the DOM is examples -> canvas ->
   composer -> queue, which reads top to bottom as inspiration, result, input,
   history. The lists get their own caps so neither rail can push the composer
   off screen on a phone. */
@media (max-width: 1023.98px) {
  .example-rail,
  .queue-rail {
    margin: 0 auto;
    width: min(100%, 760px);
  }
  .example-rail { margin-bottom: 14px; }
  .queue-rail { margin-top: 14px; }
  .example-list { max-height: 264px; }
  .queue-list { max-height: 300px; }
}

@media (max-width: 800px) {
  .example-rail,
  .queue-rail {
    border-radius: 13px;
    padding: 13px 12px;
  }
  .example-list { max-height: none; }
  .queue-list { max-height: 268px; }
  .queue-media { width: 46px; height: 46px; }
}

/* --------------------------------------------------- three column (>=1024px) */

/* Overrides V18's two column grid. This block must stay after it in the file:
   same specificity, later wins. The middle track is minmax(0, 1fr) so the
   composer absorbs everything the two fixed rails do not take -- at 1920px that
   is ~1300px against V18's 438px cap, which is the "middle bigger" ask. */
@media (min-width: 1024px) {
  body[data-app-view="create"] {
    --examples-rail: clamp(298px, 22vw, 366px);
    --queue-rail: clamp(272px, 20vw, 340px);
    grid-template-columns: var(--examples-rail) minmax(0, 1fr) var(--queue-rail);
  }

  body[data-app-view="create"] .example-rail {
    grid-row: 2;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    width: auto;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    padding: 17px 14px 20px;
    background: linear-gradient(180deg, rgba(13, 14, 20, .6), rgba(10, 11, 16, .34));
    animation: railIn .34s var(--ease) both;
  }
  body[data-app-view="create"] .example-list {
    flex: 1;
    max-height: none;
  }

  /* The composer moves to the middle track. V18 put it in column 1 and gave it a
     right border; here the border sits on the rails instead, so the composer
     reads as the open middle rather than a bordered panel. */
  body[data-app-view="create"] .creation-dock {
    grid-column: 2;
    border-right: 0;
    padding: 19px clamp(20px, 2.2vw, 40px) 24px;
    background: none;
    animation: none;
  }

  body[data-app-view="create"] .queue-rail {
    grid-row: 2;
    grid-column: 3;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    width: auto;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    padding: 17px 14px 20px;
    background: linear-gradient(180deg, rgba(13, 14, 20, .6), rgba(10, 11, 16, .34));
    animation: railIn .34s var(--ease) both;
  }
  body[data-app-view="create"] .queue-list {
    flex: 1;
    max-height: none;
  }

  /* The canvas stage is retired at these widths: the queue rail shows every
     result and the lightbox handles enlargement, so a second preview surface
     would only compete for the middle track. app.js keeps writing to these
     nodes (mirrorQueueToCanvas) and that stays harmless while hidden -- it is
     what the narrow tiers still render. */
  body[data-app-view="create"] .workspace { display: none; }

  /* With the canvas gone the prompt is the focal point, so it gets a real height
     budget instead of V18's rail-sized cap. */
  body[data-app-view="create"] .creation-dock .prompt-wrap {
    min-height: 200px;
    max-height: clamp(240px, 48vh, 620px);
  }
  body[data-app-view="create"] .creation-dock textarea {
    min-height: 200px;
    font-size: 13px;
    line-height: 1.68;
  }

  /* The middle track is wide now, so the parameter row goes back to one line and
     the reference tray can breathe. Both were squeezed into two columns only
     because the V18 rail was 358px. */
  body[data-app-view="create"] .dock-footer .dock-tool-row {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: none;
    gap: 8px;
  }
  body[data-app-view="create"] .dock-footer .dock-tool-row > * { flex: 0 0 auto; }
  body[data-app-view="create"] .dock-footer .dock-tool-row > .llm-picker,
  body[data-app-view="create"] .dock-footer .dock-tool-row > .compact-picker { min-width: 132px; }
  body[data-app-view="create"] .dock-footer .dock-tool-row > .dock-model-control { min-width: 186px; }
  body[data-app-view="create"] .creation-dock .reference-mention-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* The kind switch and generate button no longer need to span the whole middle
     track; centring them keeps the composer from looking stretched at 1920px. */
  body[data-app-view="create"] .dock-kind-switch { align-self: flex-start; }
  body[data-app-view="create"] .creation-dock .generate-button {
    align-self: stretch;
    max-width: 420px;
  }
}

/* At 1024-1199px three columns leave the middle around 500px, which is still
   wider than V18's rail but tight for a one line parameter row. Trim the rails
   first, then let the row wrap again. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  body[data-app-view="create"] {
    --examples-rail: 196px;
    --queue-rail: 252px;
  }
  body[data-app-view="create"] .creation-dock { padding: 17px 18px 20px; }
  body[data-app-view="create"] .creation-dock .prompt-wrap { min-height: 168px; }
  body[data-app-view="create"] .creation-dock textarea { min-height: 168px; }
  body[data-app-view="create"] .queue-media { width: 46px; height: 46px; }
  body[data-app-view="create"] .creation-dock .reference-mention-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* The rail is too narrow here for three legible tiles; two keeps the title
     readable instead of clipping every one of them to a single character. */
  body[data-app-view="create"] .example-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------- V21 example detail (lightbox) */

/* Its own overlay rather than a second tenant in #assetViewer: that dialog is
   built around a generated asset (download, save, prev/next across results) and
   is owned by app.js, while this one is owned by examples.js and shows a prompt.
   Keeping them apart is what lets examples.js stay a standalone file. */
.example-viewer-backdrop {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 20px;
  background: rgba(6, 7, 10, .78);
  backdrop-filter: blur(3px);
  animation: exampleViewerIn .2s var(--ease) both;
}
@keyframes exampleViewerIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.example-viewer {
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: #12131a;
  overflow: hidden;
  outline: none;
}
.example-viewer-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 11, 15, .66);
  color: #ded8ca;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  transition: background .18s, color .18s;
}
.example-viewer-close:hover {
  background: rgba(10, 11, 15, .9);
  color: #fff;
}

/* The full image. Square keeps the rail thumb and this view consistent, and
   flex-shrink lets the body win space on a short viewport instead of pushing
   the 引用 button off the bottom edge. */
.example-viewer-figure {
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.example-viewer-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.example-viewer-figure .example-thumb {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.example-viewer-figure .example-thumb.is-empty { font-size: 64px; }
.example-viewer-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: 52vh;
}
.example-viewer-category {
  margin: 0;
  color: #6b6862;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.example-viewer-title {
  margin: 0;
  color: #d9d5cb;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.example-viewer-prompt {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  color: #a09d97;
  font-size: 11.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-all;
  cursor: text;
  user-select: text;
}
.example-viewer-actions {
  display: flex;
  gap: 8px;
}
.example-viewer-use {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #a08f66, #d6c7a2);
  color: #0c0d12;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: opacity .18s;
}
.example-viewer-use:hover { opacity: .86; }
.example-viewer-append {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(214, 199, 162, .26);
  border-radius: 9px;
  background: transparent;
  color: #908e89;
  cursor: pointer;
  font-size: 11.5px;
  transition: border-color .18s, color .18s, background .18s;
}
.example-viewer-append:hover {
  border-color: rgba(214, 199, 162, .55);
  color: #d6c7a2;
  background: rgba(214, 199, 162, .06);
}
.example-viewer-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px;
  height: 52px;
  border: 0;
  background: rgba(0, 0, 0, .42);
  color: #d9d5cb;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  transition: background .18s, color .18s;
}
.example-viewer-nav:hover { background: rgba(0, 0, 0, .68); color: #fff; }
.example-viewer-prev { left: 0; border-radius: 0 8px 8px 0; }
.example-viewer-next { right: 0; border-radius: 8px 0 0 8px; }

/* ── V22: dock text legibility ──────────────────────────────────────────────
   compact-picker labels and select values were 8-10 px and very dim;
   bumped to 10/12 px and a readable grey. llm-toggle and refine-button
   similarly lifted from 9-10 px to 11-12 px.                            ── */
.compact-picker              { font-size: 10px; color: #9b9ca4; }
.compact-picker select       { font-size: 12px; color: #d4d2cb; }
.dock-tool-row .llm-picker select { font-size: 11px; }
.dock-tool-row .refine-button     { font-size: 12px; }
.llm-toggle                       { font-size: 11px; color: #9b9ca4; }
.llm-toggle input:checked ~ span:last-child { color: #d6c7a2; }

/* ── V23: tool row + generate button → same horizontal line ─────────────────
   Switch creation-dock from flex to a 2-column grid in the ≥1024px three-
   column create view.  dock-footer (tools) lands in the left column and
   generate-button in the right fixed-width column on the same row.
   display:contents on dock-compose-row still works inside a grid parent —
   its children (dock-kind-switch, prompt-wrap, generate-button) become direct
   grid items, exactly as they were flex items.                             ── */
@media (min-width: 1024px) {
  body[data-app-view="create"] .creation-dock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
  }
  /* Every content row spans both columns. */
  body[data-app-view="create"] .creation-dock .dock-kind-switch       { grid-row: 1; grid-column: 1 / -1; order: unset; }
  body[data-app-view="create"] .creation-dock .model-empty            { grid-row: 2; grid-column: 1 / -1; order: unset; }
  body[data-app-view="create"] .creation-dock .dock-reference-section { grid-row: 3; grid-column: 1 / -1; order: unset; }
  body[data-app-view="create"] .creation-dock .dock-prompt-meta       { grid-row: 4; grid-column: 1 / -1; order: unset; }
  body[data-app-view="create"] .creation-dock .prompt-wrap            { grid-row: 5; grid-column: 1 / -1; order: unset; }
  /* Bottom row: tools left, generate button right. */
  body[data-app-view="create"] .creation-dock .dock-footer            { grid-row: 6; grid-column: 1;      order: unset; align-self: start; }
  body[data-app-view="create"] .creation-dock .generate-button        { grid-row: 6; grid-column: 2;      order: unset; align-self: stretch; max-width: none; }
}