:root {
  --ink: #171512;
  --muted: #756f67;
  --paper: #f4efe6;
  --surface: #fffdf9;
  --line: #ddd5ca;
  --red: #b72c30;
  --red-dark: #8f2025;
  --gold: #b7863f;
  --green: #3d7654;
  --shadow: 0 18px 55px rgba(54, 40, 24, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 3%, rgba(183, 44, 48, .09), transparent 26rem),
    linear-gradient(180deg, #f8f4ed, #eee8df);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}
button, textarea { font: inherit; }
button { cursor: pointer; }
.app { width: 100%; max-width: 1660px; min-height: 100vh; margin: auto; overflow: hidden; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 72px; padding: 0 38px;
  border-bottom: 1px solid rgba(23,21,18,.12);
  background: rgba(248,244,237,.9); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: var(--red); font-family: SimSun, serif; font-size: 22px; }
.brand b, .brand small { display: block; }
.brand b { font-size: 16px; letter-spacing: .14em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .16em; }
.nav { display: flex; height: 100%; }
.nav-item { position: relative; padding: 0 21px; border: 0; color: var(--muted); background: transparent; font-size: 12px; }
.nav-item.active { color: var(--ink); font-weight: 700; }
.nav-item.active:after { content: ""; position: absolute; right: 20px; bottom: 0; left: 20px; height: 2px; background: var(--red); }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.online { color: var(--muted); font-size: 10px; }
.online i, .sync-state i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #50a06e; }

.primary-button, .outline-button {
  border: 0; transition: .2s ease;
}
.primary-button { padding: 12px 19px; color: #fff; background: var(--red); box-shadow: 0 8px 18px rgba(183,44,48,.2); }
.primary-button:hover:not(:disabled) { background: var(--red-dark); transform: translateY(-1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .38; box-shadow: none; }
.primary-button.full { width: 100%; }
.outline-button { padding: 10px 16px; border: 1px solid var(--line); color: var(--ink); background: transparent; }
.outline-button:hover { border-color: var(--ink); }

main { padding: 0 38px 60px; }
.mode-switcher { display: flex; gap: 10px; padding: 18px 0 0; }
.mode-card { flex: 1; display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,253,249,.55); text-align: left; }
.mode-card > span { font-family: Georgia, serif; font-size: 10px; }
.mode-card b, .mode-card small { display: block; }
.mode-card b { color: var(--ink); font-family: SimSun, serif; font-size: 14px; }
.mode-card small { margin-top: 4px; font-size: 8px; }
.mode-card.active { border-color: var(--red); background: var(--surface); box-shadow: inset 3px 0 var(--red); }
.intro { display: flex; align-items: flex-end; justify-content: space-between; min-height: 245px; padding: 48px 14px 32px; }
.eyebrow { display: block; margin-bottom: 12px; color: var(--red); font-family: Georgia, serif; font-size: 9px; font-weight: 700; letter-spacing: .24em; }
.intro h1 { margin: 0; font-family: SimSun, serif; font-size: clamp(38px, 4.2vw, 66px); font-weight: 500; line-height: 1.12; letter-spacing: -.04em; }
.intro h1 em { color: var(--red); font-style: normal; }
.intro p { max-width: 680px; margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.intro-metric { display: flex; gap: 44px; padding: 15px 10px; }
.intro-metric div { display: grid; gap: 4px; }
.intro-metric strong { font-family: Georgia, serif; font-size: 28px; }
.intro-metric span { color: var(--muted); font-size: 10px; }

.flow-bar { display: flex; align-items: center; margin-bottom: 16px; padding: 14px 20px; border: 1px solid var(--line); background: rgba(255,253,249,.65); }
.flow-step { display: flex; align-items: center; gap: 8px; color: #aaa199; font-size: 10px; white-space: nowrap; }
.flow-step b { font-family: Georgia, serif; }
.flow-step.active { color: var(--ink); }
.flow-step.active b { color: var(--red); }
.flow-step.done { color: var(--green); }
.flow-bar > i { flex: 1; height: 1px; margin: 0 13px; background: var(--line); }

.main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 325px; gap: 14px; }
.chat-card, .brief-card, .panel { border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.chat-card { display: flex; flex-direction: column; min-height: 610px; }
.card-header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: 14px 20px; border-bottom: 1px solid #ebe5dd; }
.card-header > div { display: flex; align-items: center; gap: 11px; }
.card-header h2, .card-header p { margin: 0; }
.card-header h2 { font-family: SimSun, serif; font-size: 17px; }
.card-header p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.card-header.compact { min-height: auto; margin-bottom: 18px; padding: 0 0 16px; }
.ai-avatar { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border-radius: 50%; background: var(--ink); font-family: Georgia, serif; font-size: 11px; }
.case-tag, .supplier-badge { padding: 5px 8px; color: #55725c; border: 1px solid #c9dacd; background: #edf5ef; font-size: 9px; }

.chat-stream { flex: 1; min-height: 390px; max-height: 540px; padding: 25px; overflow-y: auto; background-image: radial-gradient(#ded8d0 .6px, transparent .6px); background-size: 15px 15px; }
.message { display: flex; gap: 10px; margin-bottom: 18px; }
.message.user-message { justify-content: flex-end; }
.mini-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; color: #fff; border-radius: 50%; background: var(--red); font-family: SimSun, serif; font-size: 13px; }
.bubble { max-width: min(610px, 82%); padding: 14px 16px; border: 1px solid var(--line); background: #fffdf9; box-shadow: 0 8px 22px rgba(47,35,23,.05); }
.user-message .bubble { color: #fff; border-color: var(--ink); background: var(--ink); }
.bubble p { margin: 0; font-size: 12px; line-height: 1.75; }
.bubble strong { color: var(--red); }
.prompt-examples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.prompt-examples button, .quick-replies button {
  padding: 7px 10px; border: 1px solid var(--line); color: var(--ink); background: #f8f4ed; font-size: 9px;
}
.prompt-examples button:hover, .quick-replies button:hover { border-color: var(--red); color: var(--red); }
.quick-replies { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.typing { display: flex; gap: 4px; align-items: center; height: 18px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: bounce 1s infinite alternate; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { to { transform: translateY(-5px); opacity: .4; } }

.composer { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 9px; padding: 14px; border-top: 1px solid #e8e1d8; background: #fff; }
.composer textarea { width: 100%; min-height: 48px; max-height: 120px; padding: 13px; border: 1px solid var(--line); outline: 0; resize: none; color: var(--ink); background: #faf8f4; line-height: 1.5; }
.composer textarea:focus { border-color: var(--red); background: #fff; }
.attach-button { display: grid; place-items: center; width: 44px; height: 48px; border: 1px solid var(--line); background: #faf8f4; }
.attach-button svg { width: 19px; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.send-button { height: 48px; padding: 0 18px; border: 0; color: #fff; background: var(--red); font-size: 11px; }
.send-button span { margin-left: 7px; font-size: 15px; }
.upload-preview { margin: 0 14px 14px; padding: 8px 11px; color: var(--green); border: 1px solid #c8dbcd; background: #edf5ef; font-size: 9px; }

.brief-card { padding: 20px; }
.section-num { color: var(--red); font-family: Georgia, serif; font-size: 9px; }
.sync-state { color: var(--muted); font-size: 9px; }
.brief-status { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; padding: 13px; background: #f4eee5; }
.ring { display: flex; align-items: baseline; justify-content: center; width: 54px; height: 54px; padding-top: 16px; border: 4px solid #d7c9bc; border-top-color: var(--red); border-radius: 50%; }
.ring strong { font-family: Georgia, serif; font-size: 16px; }
.ring span { font-size: 8px; }
.brief-status b, .brief-status p { display: block; margin: 0; }
.brief-status b { font-size: 11px; }
.brief-status p { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.brief-fields { border-top: 1px solid var(--line); }
.brief-fields > div { display: grid; grid-template-columns: 78px 1fr; gap: 8px; padding: 12px 2px; border-bottom: 1px solid #eee8e1; }
.brief-fields span { color: var(--muted); font-size: 9px; }
.brief-fields b { font-size: 10px; text-align: right; }
.brief-fields b.filled { color: var(--red); }
.missing-card { display: flex; gap: 10px; margin: 17px 0; padding: 12px; border-left: 2px solid var(--gold); background: #f6efe1; }
.missing-card > span { color: var(--gold); font-family: Georgia, serif; }
.missing-card b { font-size: 10px; }
.missing-card p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }

.stage-section, .production-section { padding-top: 52px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 17px; }
.section-heading h2 { margin: 0; font-family: SimSun, serif; font-size: 29px; font-weight: 500; }
.section-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; text-align: right; }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.option-card { border: 1px solid var(--line); background: var(--surface); transition: .2s; overflow: hidden; }
.option-grid:not(.locked) .option-card { cursor: pointer; }
.option-grid:not(.locked) .option-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.option-card.selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.option-image { position: relative; height: 310px; overflow: hidden; background: linear-gradient(180deg,#e9e1d7 0 72%,#cfc2b4 72%); perspective: 900px; }
.generated-image { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.option-image.has-generated .generated-image { opacity: 1; }
.scene-floor { position: absolute; right: -8%; bottom: -22%; left: -8%; z-index: 1; height: 48%; background: linear-gradient(180deg,rgba(255,255,255,.15),rgba(71,52,37,.15)); transform: rotateX(66deg); transform-origin: top; }
.option-image.has-generated > .arch-panel,
.option-image.has-generated > .circle-panel,
.option-image.has-generated > .side-panel,
.option-image.has-generated > .rear-panel,
.option-image.has-generated > .scene-floor { display: none; }
.option-image > span { position: absolute; z-index: 2; }
.rear-panel { left: 12%; bottom: 12%; width: 30%; height: 72%; border-radius: 48% 48% 0 0; background: #d7c2aa; box-shadow: -8px 8px 0 #b8a38e, 0 18px 24px rgba(0,0,0,.2); transform: rotateY(5deg); }
.arch-panel { left: 22%; bottom: 8%; width: 38%; height: 82%; border-radius: 48% 48% 0 0; background: #eee4d7; box-shadow: -7px 7px 0 #c8b9a8, 0 20px 30px rgba(0,0,0,.2); transform: translateZ(30px) rotateY(3deg); }
.circle-panel { left: 43%; bottom: 12%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #f8f1e8; box-shadow: 7px 7px 0 #c7b8a8, 0 18px 26px rgba(0,0,0,.23); transform: translateZ(70px); }
.side-panel { right: 8%; bottom: 6%; width: 20%; height: 70%; background: #cda59d; box-shadow: 7px 7px 0 #9d7a74, 0 20px 26px rgba(0,0,0,.24); transform: translateZ(95px) rotateY(-5deg); }
.design-b { background: #5b171c; }
.design-b .arch-panel { background: #8f2329; }
.design-b .circle-panel { border: 1px solid #d6ae6d; background: #751d23; }
.design-b .side-panel { background: #d1a25b; }
.design-b .rear-panel { background: #4a1116; box-shadow: -8px 8px 0 #26080b, 0 18px 24px rgba(0,0,0,.3); }
.design-c { background: #d7c6b8; }
.design-c .arch-panel { background: #b8c3a8; }
.design-c .circle-panel { background: #eee4d8; }
.design-c .side-panel { background: #9f775f; }
.design-c .rear-panel { background: #9daf91; box-shadow: -8px 8px 0 #72806b, 0 18px 24px rgba(0,0,0,.22); }
.design-copy {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
.design-copy .copy-kicker { position: static; margin-bottom: 4px; font-family: Georgia, serif; font-size: 8px; letter-spacing: .28em; }
.design-copy strong { font-family: SimSun, serif; font-size: 66px; line-height: .95; }
.design-copy strong i, .design-copy h4 i { font-style: normal; font-weight: 400; }
.design-copy h4 { margin: 8px 0 4px; font-family: SimSun, serif; font-size: 16px; font-weight: 500; letter-spacing: .1em; }
.design-copy p { margin: 0; font-family: SimSun, serif; font-size: 9px; letter-spacing: .22em; }
.copy-a { padding-left: 18%; color: #92232b; }
.copy-a .copy-kicker, .copy-a p { color: #765d4c; }
.copy-b { color: #e9c17e; text-shadow: 0 2px 4px rgba(0,0,0,.35); }
.copy-b strong { font-size: 72px; }
.copy-c { color: #684b39; }
.copy-c strong { font-family: Georgia, serif; font-size: 39px; letter-spacing: .12em; }
.option-image.has-generated .design-copy { background: radial-gradient(circle at center, rgba(255,253,249,.16), transparent 42%); }
.lock-cover { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 8px; color: #fff; background: rgba(23,21,18,.68); backdrop-filter: blur(3px); }
.lock-cover span { color: #d9b36d; font-size: 24px; }
.lock-cover b { font-size: 10px; letter-spacing: .08em; }
.option-grid:not(.locked) .lock-cover { display: none; }
.option-info { display: flex; align-items: center; justify-content: space-between; padding: 15px; }
.option-info span { color: var(--red); font-family: Georgia, serif; font-size: 8px; }
.option-info h3 { margin: 4px 0 0; font-family: SimSun, serif; font-size: 17px; }
.option-info > b { font-family: Georgia, serif; font-size: 17px; }
.option-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 13px; padding: 13px 15px; border: 1px solid var(--line); background: var(--surface); }
.option-actions > div { margin-right: auto; }
.option-actions span, .option-actions b { display: block; }
.option-actions span { color: var(--muted); font-size: 8px; }
.option-actions b { margin-top: 3px; font-size: 10px; }
.model-status { margin-top: 9px; color: var(--muted); font-size: 9px; text-align: right; }
.model-status.ready { color: var(--green); }
.model-status.error { color: var(--red); }

.production-grid { display: grid; grid-template-columns: 1.35fr 1fr .92fr; gap: 14px; }
.panel { box-shadow: none; }
.panel header { display: flex; align-items: center; gap: 9px; height: 58px; padding: 0 17px; border-bottom: 1px solid #ebe5dd; }
.panel header h3 { margin: 0; font-family: SimSun, serif; font-size: 16px; }
.panel header > :last-child { margin-left: auto; }
.pending-pill { padding: 5px 8px; color: var(--muted); border: 1px solid var(--line); font-size: 8px; }
.pending-pill.ready { color: var(--green); border-color: #c8dbcd; background: #edf5ef; }
.blueprint { position: relative; height: 340px; margin: 20px; overflow: hidden; background-color: #ede8df; background-image: linear-gradient(#d9d2c9 1px, transparent 1px), linear-gradient(90deg, #d9d2c9 1px, transparent 1px); background-size: 20px 20px; }
.bp-board { position: absolute; display: grid; place-content: center; justify-items: center; border: 2px dashed #6f675f; color: #5e5650; background: rgba(255,253,249,.68); }
.bp-board b { display: grid; place-items: center; width: 23px; height: 23px; margin-bottom: 5px; color: #fff; background: var(--ink); font-family: Georgia, serif; font-size: 10px; }
.bp-board span { font-family: Georgia, serif; font-size: 8px; }
.bp-a { left: 7%; bottom: 8%; width: 38%; height: 78%; border-radius: 45% 45% 0 0; }
.bp-b { left: 36%; bottom: 19%; width: 45%; aspect-ratio: 1; border-radius: 50%; }
.bp-c { right: 5%; bottom: 9%; width: 23%; height: 71%; }
.bp-d { z-index: 3; left: 51%; top: 41%; width: 23%; aspect-ratio: 1; border-color: var(--red); color: var(--red); background: transparent; }
.width-line, .height-line { position: absolute; color: var(--red); font-family: Georgia, serif; font-size: 8px; font-style: normal; }
.width-line { right: 7%; bottom: 2%; left: 5%; border-top: 1px solid var(--red); text-align: center; }
.height-line { top: 8%; right: 1%; bottom: 7%; border-left: 1px solid var(--red); writing-mode: vertical-rl; text-align: center; }
.blueprint-lock { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; color: var(--muted); background: rgba(237,232,223,.82); backdrop-filter: blur(2px); font-size: 10px; }
.blueprint.ready .blueprint-lock { display: none; }
.check-list { padding: 8px 17px; }
.check-list > div { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; min-height: 43px; border-bottom: 1px solid #eee9e2; }
.check-list i { width: 11px; height: 11px; border: 1px solid #aaa199; border-radius: 50%; }
.check-list span { font-size: 9px; }
.check-list b { color: #a59d94; font-size: 8px; }
.check-list .passed i { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px #fff; }
.check-list .passed b { color: var(--green); }
.supplier { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; margin: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.supplier-logo { display: grid; place-items: center; width: 37px; height: 37px; color: #fff; background: var(--red); font-family: SimSun, serif; }
.supplier b, .supplier p { display: block; margin: 0; }
.supplier b { font-size: 10px; }
.supplier p { margin-top: 4px; color: var(--muted); font-size: 8px; }
.supplier > strong { color: var(--gold); font-family: Georgia, serif; font-size: 14px; }
.quote { padding: 0 16px; }
.quote > div { display: flex; justify-content: space-between; padding: 8px 0; color: var(--muted); font-size: 9px; }
.quote > div b { color: var(--ink); }
.quote .quote-total { margin-top: 4px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--ink); }
.quote-total b { color: var(--red) !important; font-family: Georgia, serif; font-size: 19px; }
.delivery { display: flex; justify-content: space-between; margin: 12px 16px; padding: 11px; background: #f4eee5; font-size: 8px; }
.order-panel .primary-button { width: calc(100% - 32px); margin: 0 16px; }
.order-note { display: block; padding: 9px 16px 16px; color: var(--muted); font-size: 7px; text-align: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(17,15,13,.72); backdrop-filter: blur(5px); }
.modal { position: relative; width: min(430px, 100%); padding: 36px; background: var(--surface); text-align: center; }
.modal-close { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 23px; }
.modal-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 18px; color: #fff; border-radius: 50%; background: var(--green); font-size: 20px; }
.modal h2 { margin: 0; font-family: SimSun, serif; font-size: 25px; }
.modal p { color: var(--muted); font-size: 10px; line-height: 1.7; }
.package-list { display: grid; gap: 7px; margin: 19px 0; text-align: left; }
.package-list span { padding: 9px 11px; border: 1px solid var(--line); font-size: 9px; }
.package-list span:before { content: "✓"; margin-right: 8px; color: var(--green); }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; padding: 11px 18px; color: #fff; background: var(--ink); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.poster-intro { display: flex; align-items: flex-end; justify-content: space-between; padding: 47px 14px 28px; }
.poster-intro h1 { margin: 0; font-family: SimSun, serif; font-size: clamp(38px, 4vw, 62px); font-weight: 500; line-height: 1.12; }
.poster-intro h1 em { color: var(--red); font-style: normal; }
.poster-intro p { max-width: 680px; margin: 17px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.express-badge { padding: 9px 12px; color: var(--green); border: 1px solid #c8dbcd; background: #edf5ef; font-size: 9px; }
.poster-workspace { display: grid; grid-template-columns: 350px minmax(0,1fr); gap: 14px; }
.poster-form-body { padding: 18px; }
.poster-field { display: block; margin-bottom: 14px; }
.poster-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.poster-field input, .poster-field select, .poster-field textarea { width: 100%; border: 1px solid var(--line); outline: 0; color: var(--ink); background: #faf8f4; }
.poster-field input, .poster-field select { height: 40px; padding: 0 10px; }
.poster-field textarea { padding: 10px; resize: vertical; line-height: 1.6; }
.poster-field input:focus, .poster-field select:focus, .poster-field textarea:focus { border-color: var(--red); background: #fff; }
.poster-field-row { display: grid; grid-template-columns: 1fr; gap: 0; }
.style-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.style-chips button { padding: 7px 9px; border: 1px solid var(--line); color: var(--ink); background: #f8f4ed; font-size: 9px; }
.style-chips button.active { color: #fff; border-color: var(--red); background: var(--red); }
.cost-hint { margin: 9px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; text-align: center; }
.poster-results { min-height: 650px; }
.outline-button.small { padding: 7px 10px; font-size: 9px; }
.poster-empty { display: grid; place-items: center; align-content: center; min-height: 570px; color: var(--muted); text-align: center; background-image: radial-gradient(#ded8d0 .6px, transparent .6px); background-size: 15px 15px; }
.poster-empty > span { color: var(--gold); font-size: 30px; }
.poster-empty b { margin-top: 9px; color: var(--ink); font-size: 11px; }
.poster-empty p { font-size: 9px; }
.poster-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; padding: 16px; }
.poster-design { position: relative; aspect-ratio: 3/4; overflow: hidden; color: #fff; background: #a72b28; box-shadow: 0 13px 30px rgba(39,27,19,.14); }
.poster-design > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.poster-design.has-generated > img { opacity: 1; }
.poster-one { background: radial-gradient(circle at 55% 28%, #e37b37, #9f171b 58%, #39090c); }
.poster-two { color: #2e271f; background: linear-gradient(150deg, #eee1c9, #caa579); }
.poster-three { background: linear-gradient(155deg, #153e39, #d04b2e 70%, #eaa748); }
.poster-overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 10% 9%; background: linear-gradient(180deg, rgba(0,0,0,.32), transparent 37%, rgba(0,0,0,.48)); }
.poster-two .poster-overlay { background: linear-gradient(180deg, rgba(255,248,233,.62), transparent 40%, rgba(239,220,187,.7)); }
.poster-overlay .poster-label { font-family: Georgia, serif; font-size: 7px; letter-spacing: .16em; }
.poster-overlay h2 { margin: 15% 0 4%; font-family: SimSun, serif; font-size: clamp(30px, 3.5vw, 57px); font-weight: 700; line-height: .98; letter-spacing: .04em; }
.poster-overlay h4 { margin: 0; font-family: SimSun, serif; font-size: 12px; font-weight: 400; letter-spacing: .15em; }
.poster-overlay p { margin: auto 0 12%; font-size: 11px; font-weight: 700; line-height: 1.9; }
.poster-overlay small { font-size: 7px; letter-spacing: .08em; }
.poster-download { position: absolute; right: 9px; bottom: 9px; z-index: 5; padding: 7px 9px; border: 1px solid rgba(255,255,255,.55); color: #fff; background: rgba(0,0,0,.28); backdrop-filter: blur(5px); font-size: 8px; opacity: 0; transition: .2s; }
.poster-two .poster-download { color: #2e271f; border-color: rgba(46,39,31,.35); }
.poster-design:hover .poster-download { opacity: 1; }

@media (max-width: 1050px) {
  .main-grid { grid-template-columns: 1fr; }
  .brief-card { display: grid; grid-template-columns: 220px 1fr; gap: 0 20px; }
  .brief-card .card-header { grid-column: 1 / -1; }
  .brief-fields { grid-row: span 3; }
  .production-grid { grid-template-columns: 1fr 1fr; }
  .order-panel { grid-column: 1 / -1; }
  .poster-workspace { grid-template-columns: 300px minmax(0,1fr); }
  .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 780px) {
  .topbar { grid-template-columns: 1fr auto; height: 62px; padding: 0 14px; }
  .nav { display: none; }
  .online { display: none; }
  main { padding: 0 12px 35px; }
  .intro { min-height: auto; padding: 34px 4px 24px; }
  .intro-metric { display: none; }
  .intro p { font-size: 12px; }
  .flow-bar { overflow-x: auto; padding: 12px; }
  .flow-bar > i { min-width: 28px; }
  .chat-card { min-height: 570px; }
  .chat-stream { padding: 16px; }
  .bubble { max-width: 90%; }
  .brief-card { display: block; }
  .option-grid { grid-template-columns: 1fr; }
  .option-image { height: 300px; }
  .option-actions { align-items: stretch; flex-direction: column; }
  .option-actions > div { margin: 0 0 5px; }
  .production-grid { grid-template-columns: 1fr; }
  .order-panel { grid-column: auto; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 9px; text-align: left; }
  .mode-switcher { overflow-x: auto; }
  .mode-card { min-width: 220px; }
  .poster-intro { display: block; }
  .express-badge { display: inline-block; margin-top: 15px; }
  .poster-workspace { grid-template-columns: 1fr; }
  .poster-grid { grid-template-columns: 1fr; }
  .poster-design { max-width: 420px; width: 100%; margin: auto; }
}
@media (max-width: 480px) {
  .top-actions { display: none; }
  .brand small { display: none; }
  .intro h1 { font-size: 34px; }
  .composer { grid-template-columns: auto 1fr; }
  .send-button { grid-column: 1 / -1; }
  .prompt-examples { display: grid; }
  .prompt-examples button { width: 100%; }
  .option-image { height: 245px; }
  .blueprint { height: 290px; margin: 13px; }
}