:root {
  color-scheme: dark;
  --bg: #0b0b0a;
  --panel: rgba(24, 23, 20, .86);
  --panel-2: rgba(34, 31, 26, .86);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 183, 77, .34);
  --text: #fffaf1;
  --muted: #aaa397;
  --accent: #ff9f2f;
  --accent-2: #ff5c35;
  --green: #67d49a;
  --red: #ff766d;
  --shadow: 0 24px 80px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, rgba(255, 128, 40, .12), transparent 34%),
    radial-gradient(circle at 90% 20%, rgba(255, 195, 70, .08), transparent 25%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button, .choice-card, .slot-card, .template-card, .hook-card, .sound-card { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.ambient { position: fixed; width: 32rem; height: 32rem; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: -1; opacity: .12; }
.ambient-a { background: #ff6a2a; top: -15rem; left: -12rem; }
.ambient-b { background: #ffcf57; right: -15rem; top: 32rem; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 70px; padding: 12px max(18px, calc((100vw - 1280px) / 2));
  background: rgba(11, 11, 10, .78); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #1c1003; font-size: 20px; font-weight: 900; background: linear-gradient(135deg, #ffd36b, #ff7d2b); box-shadow: 0 8px 24px rgba(255, 128, 38, .25); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: .02em; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.save-state { color: #7e776d; font-size: 11px; }
.ghost-link { padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; color: #c9c2b7; font-size: 12px; text-decoration: none; background: rgba(255, 255, 255, .03); }

.shell { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 46px 0 90px; }
.hero { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 42px; padding: 18px 8px 40px; }
.eyebrow { display: inline-flex; padding: 6px 10px; border: 1px solid rgba(255, 159, 47, .25); border-radius: 999px; color: #ffc174; background: rgba(255, 159, 47, .08); font-size: 12px; font-weight: 700; }
.hero h1 { max-width: 760px; margin: 18px 0 14px; font-size: clamp(38px, 5.5vw, 72px); line-height: 1.04; letter-spacing: -.055em; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.hero-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; padding-bottom: 8px; }
.hero-formula span { padding: 8px 11px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: #ddd5ca; font-size: 12px; }
.hero-formula i { color: #6e675e; font-style: normal; }

.step-nav { position: sticky; top: 70px; z-index: 20; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 14px; background: #191713; box-shadow: 0 14px 38px rgba(0,0,0,.25); }
.step-nav a { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 56px; padding: 8px; color: #a49d93; text-decoration: none; background: rgba(255,255,255,.015); transition: .2s ease; }
.step-nav a:hover { color: var(--text); background: rgba(255, 159, 47, .08); }
.step-nav b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #1c1003; background: #c9b38d; font-size: 11px; }
.step-nav span { font-size: 12px; font-weight: 650; }

.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 22px; }
.flow-column { min-width: 0; }
.step-card, .summary-card { border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, var(--panel), rgba(18,17,15,.94)); box-shadow: var(--shadow); }
.step-card { margin-bottom: 18px; padding: 24px; scroll-margin-top: 145px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.section-head h2 { margin: 4px 0 0; font-size: 20px; letter-spacing: -.02em; }
.section-head p { max-width: 400px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; text-align: right; }
.step-no, .summary-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.field-title { margin: 22px 0 10px; color: #ddd5ca; font-size: 12px; }

.choice-grid { display: grid; gap: 10px; }
.format-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.format-group { padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.018); }
.format-group > header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.format-group > header > span { font-size: 20px; }
.format-group > header strong, .format-group > header small { display: block; }
.format-group > header strong { font-size: 12px; }
.format-group > header small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.format-group-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.format-group-grid .format-card:only-child { grid-column: 1 / -1; }
.cinema-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cinema-style-card { min-height: 100px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: .18s ease; }
.cinema-style-card:hover { transform: translateY(-2px); border-color: rgba(255,159,47,.3); }
.cinema-style-card.selected { border-color: var(--accent); background: rgba(255,159,47,.08); box-shadow: inset 0 0 0 1px rgba(255,159,47,.14); }
.cinema-style-card span, .cinema-style-card strong, .cinema-style-card small { display: block; }
.cinema-style-card span { font-size: 22px; }
.cinema-style-card strong { margin-top: 8px; font-size: 12px; }
.cinema-style-card small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.business-grid { grid-template-columns: repeat(3, 1fr); }
.goal-grid { grid-template-columns: repeat(4, 1fr); }
.choice-card, .sound-card, .template-card, .hook-card {
  position: relative; width: 100%; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.choice-card { min-height: 90px; padding: 14px; }
.choice-card:hover, .sound-card:hover, .template-card:hover, .hook-card:hover { transform: translateY(-2px); border-color: rgba(255,159,47,.3); }
.choice-card.selected, .sound-card.selected, .template-card.selected, .hook-card.selected { border-color: var(--accent); background: rgba(255,159,47,.08); box-shadow: inset 0 0 0 1px rgba(255,159,47,.14); }
.choice-card .icon { font-size: 22px; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { margin-top: 9px; font-size: 13px; }
.choice-card small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.recommend-note { margin-top: 12px; padding: 10px 12px; border-radius: 10px; color: #dbcaaf; background: rgba(255,159,47,.07); font-size: 11px; }
.format-card { position: relative; min-height: 126px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.025); cursor: pointer; text-align: left; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.format-card:hover { transform: translateY(-2px); border-color: rgba(255,159,47,.3); }
.format-card.selected { border-color: var(--accent); background: rgba(255,159,47,.08); box-shadow: inset 0 0 0 1px rgba(255,159,47,.14); }
.format-card .format-icon { font-size: 23px; }
.format-card strong, .format-card small, .format-card em { display: block; }
.format-card strong { margin-top: 8px; font-size: 12px; }
.format-card small { margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.format-card em { margin-top: 8px; color: #dcb783; font-size: 9px; font-style: normal; }
.format-meta { position: absolute; top: 8px; right: 8px; padding: 3px 6px; border-radius: 6px; color: #1c1003; background: #ffc866; font-size: 8px; font-weight: 850; }

.slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slot-card { position: relative; overflow: hidden; min-height: 150px; padding: 0; border: 1px dashed rgba(255,255,255,.18); border-radius: 14px; color: #cbc2b7; background: rgba(255,255,255,.02); cursor: pointer; }
.slot-card.required { border-color: rgba(255,159,47,.28); }
.slot-card:hover { border-color: var(--accent); }
.slot-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.slot-inner { display: grid; place-items: center; align-content: center; height: 100%; min-height: 150px; padding: 14px; text-align: center; }
.slot-icon { font-size: 25px; }
.slot-label { margin-top: 8px; font-size: 12px; font-weight: 750; }
.slot-label em { color: var(--accent); font-size: 9px; font-style: normal; }
.slot-hint { margin-top: 5px; color: #827b72; font-size: 9px; line-height: 1.45; }
.slot-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.slot-overlay { position: absolute; inset: auto 0 0; padding: 34px 10px 10px; background: linear-gradient(transparent, rgba(0,0,0,.84)); }
.slot-overlay strong, .slot-overlay small { display: block; }
.slot-overlay strong { font-size: 11px; }
.slot-overlay small { margin-top: 2px; color: #d0c9bf; font-size: 9px; }
.slot-remove { position: absolute; top: 7px; right: 7px; z-index: 2; width: 26px; height: 26px; border: 0; border-radius: 50%; color: white; background: rgba(0,0,0,.68); cursor: pointer; }

.continuity-panel { margin-top: 14px; padding: 15px; border: 1px solid rgba(255,159,47,.2); border-radius: 14px; background: rgba(255,159,47,.035); }
.continuity-copy h3, .continuity-copy p { margin: 0; }
.continuity-copy h3 { color: #ffd095; font-size: 13px; }
.continuity-copy p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.continuity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
.continuity-field { display: grid; gap: 5px; }
.continuity-field:last-child { grid-column: 1 / -1; }
.continuity-field span { color: #c9c0b5; font-size: 10px; }
.continuity-field input { width: 100%; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; color: var(--text); background: rgba(0,0,0,.16); font-size: 11px; }
.continuity-field input:focus { border-color: var(--accent); }

.sound-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.sound-copy { display: flex; align-items: center; gap: 12px; }
.sound-icon { font-size: 24px; }
.sound-copy h3, .sound-copy p { margin: 0; }
.sound-copy h3 { font-size: 13px; }
.sound-copy p { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.audio-upload { padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; color: #ffc174; background: rgba(255,159,47,.08); cursor: pointer; font-size: 11px; }
.audio-upload input { display: none; }
#audioPreview { grid-column: 1 / -1; width: 100%; height: 34px; }
.sound-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sound-card { padding: 11px; }
.sound-card strong { display: block; font-size: 11px; }
.sound-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.music-preview { width: min(100%, 420px); margin-top: 10px; height: 34px; }
.sound-note { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }

.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fact-field { display: grid; gap: 6px; }
.fact-field span { color: #c9c0b5; font-size: 11px; }
.fact-field span em { color: var(--accent); font-style: normal; }
.fact-field input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--text); background: rgba(255,255,255,.035); font-size: 12px; }
.fact-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,159,47,.08); }
.validation-box { margin-top: 14px; padding: 11px 13px; border-radius: 10px; color: #c9c0b4; background: rgba(255,255,255,.03); font-size: 11px; line-height: 1.7; }
.validation-box.ok { color: #8de5b5; background: rgba(53,190,115,.08); }
.validation-box.warn { color: #ffbf86; background: rgba(255,123,57,.08); }

.template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.template-card { min-height: 96px; padding: 13px; }
.template-card .template-icon { font-size: 21px; }
.template-card strong, .template-card small { display: block; }
.template-card strong { margin-top: 8px; font-size: 12px; }
.template-card small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.template-card .recommended { position: absolute; top: 7px; right: 7px; padding: 2px 5px; border-radius: 5px; color: #1a1205; background: #ffc35a; font-size: 8px; font-weight: 800; }
.hook-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.hook-card { padding: 12px; }
.hook-card strong { display: block; font-size: 11px; }
.hook-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.hook-copy { margin-top: 10px; padding: 13px; border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; color: #f1e5d6; background: rgba(255,159,47,.06); font-size: 12px; line-height: 1.7; }
.hook-copy small { display: block; margin-top: 4px; color: var(--muted); }

.platform-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.platform-tab { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: #b5ada2; background: rgba(255,255,255,.02); cursor: pointer; font-size: 10px; }
.platform-tab.selected { border-color: var(--accent); color: #ffd198; background: rgba(255,159,47,.08); }
.preview-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.phone-stage { padding: 10px; border-radius: 30px; background: #050505; box-shadow: 0 15px 44px rgba(0,0,0,.44); }
.phone-screen { position: relative; overflow: hidden; aspect-ratio: 9/16; border-radius: 22px; background: linear-gradient(160deg, #3d281b, #17120f 60%); }
.phone-screen > img { width: 100%; height: 100%; object-fit: cover; }
.preview-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; color: #897e72; }
.preview-empty span { font-size: 42px; }
.preview-empty p { font-size: 10px; }
.safe-zone { position: absolute; z-index: 2; color: rgba(255,255,255,.76); background: repeating-linear-gradient(135deg, rgba(255,77,55,.18), rgba(255,77,55,.18) 5px, rgba(255,77,55,.08) 5px, rgba(255,77,55,.08) 10px); pointer-events: none; font-size: 8px; }
.safe-zone span { position: absolute; padding: 2px 4px; border-radius: 4px; background: rgba(0,0,0,.52); }
.safe-top { top: 0; left: 0; right: 0; height: 12%; }
.safe-top span { bottom: 4px; left: 8px; }
.safe-right { top: 12%; right: 0; bottom: 26%; width: 16%; }
.safe-right span { top: 50%; left: 50%; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.safe-bottom { right: 0; bottom: 0; left: 0; height: 26%; }
.safe-bottom span { top: 5px; left: 8px; }
.safe-left { top: 12%; bottom: 26%; left: 0; width: 6%; }
.safe-frame { position: absolute; z-index: 3; border: 1px dashed rgba(255,255,255,.62); pointer-events: none; }
.preview-title, .preview-subtitle { position: absolute; z-index: 4; left: 50%; width: 68%; transform: translateX(-50%); color: white; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.88); pointer-events: none; }
.preview-title { top: 19%; font-size: 18px; font-weight: 900; line-height: 1.15; }
.preview-subtitle { bottom: 30%; padding: 5px 7px; border-radius: 7px; background: rgba(0,0,0,.48); font-size: 9px; line-height: 1.4; }
.storyboard { display: grid; gap: 7px; }
.story-item { display: grid; grid-template-columns: 60px 1fr; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.story-time { color: var(--accent); font-size: 10px; font-weight: 800; }
.story-body strong { display: block; font-size: 11px; }
.story-body p { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.story-body small { display: block; margin-top: 5px; color: #dbb886; font-size: 9px; }
.narration-field { display: grid; gap: 7px; margin-top: 16px; }
.narration-field span { color: #c8c0b4; font-size: 11px; }
.narration-field b { float: right; color: var(--muted); font-size: 10px; font-weight: 500; }
.narration-field textarea { width: 100%; resize: vertical; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; color: var(--text); background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.65; }

.action-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.primary-action, .secondary-action { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 10px; min-height: 76px; padding: 14px 16px; border-radius: 13px; cursor: pointer; text-align: left; }
.primary-action { border: 0; color: #1c1003; background: linear-gradient(135deg, #ffd167, #ff8731); box-shadow: 0 12px 28px rgba(255,130,40,.2); }
.secondary-action { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.035); }
.primary-action > span, .secondary-action > span { grid-row: 1/3; font-size: 25px; }
.primary-action strong, .secondary-action strong { font-size: 13px; }
.primary-action small, .secondary-action small { opacity: .7; font-size: 9px; }
.primary-action:disabled { filter: grayscale(.7); opacity: .55; cursor: not-allowed; }
.generation-panel, .result-panel, .error-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.progress-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.progress-head > span { font-size: 24px; }
.progress-head strong, .progress-head p { margin: 0; }
.progress-head strong { font-size: 12px; }
.progress-head p { margin-top: 3px; color: var(--muted); font-size: 9px; }
.progress-head b { color: var(--accent); font-size: 11px; }
.progress-track { height: 6px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8a32, #ffd36a); transition: width .35s ease; }
.result-panel video { width: 100%; max-height: 520px; border-radius: 10px; background: #000; }
.clip-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.clip-result { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.18); }
.clip-result header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.clip-result header strong { font-size: 10px; }
.clip-result header span { color: var(--muted); font-size: 9px; }
.clip-result video { max-height: 300px; }
.clip-result a { display: block; margin-top: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; color: #e6d9c9; font-size: 9px; text-align: center; text-decoration: none; }
.clip-result.approved { border-color: rgba(74,205,132,.35); }
.continuity-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.continuity-frame { display: grid; gap: 4px; }
.continuity-frame img { width: 100%; aspect-ratio: 9/16; object-fit: cover; border-radius: 7px; background: #080808; }
.continuity-frame small { color: var(--muted); font-size: 8px; text-align: center; }
.clip-review { display: flex; gap: 7px; margin-top: 8px; }
.clip-review button { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(255,255,255,.04); cursor: pointer; font-size: 9px; }
.clip-review .approve { border-color: rgba(74,205,132,.4); color: #9aebbb; background: rgba(74,205,132,.08); }
.clip-review button:disabled { opacity: .4; cursor: not-allowed; }
.clip-status { display: block; margin-top: 7px; color: #9aebbb; font-size: 9px; text-align: center; }
.continuity-risk { display: block; margin-top: 7px; padding: 7px; border-radius: 7px; font-size: 9px; text-align: center; }
.continuity-risk.low { color: #9aebbb; background: rgba(74,205,132,.08); }
.continuity-risk.medium { color: #ffd08a; background: rgba(255,184,77,.08); }
.continuity-risk.high { color: #ffaaa4; background: rgba(255,70,45,.08); }
.merged-result { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.merged-result h3 { margin: 0 0 9px; color: #ffd095; font-size: 12px; }
.result-actions { display: flex; gap: 8px; margin-top: 10px; }
.result-actions a, .result-actions button { flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(255,255,255,.04); cursor: pointer; text-align: center; text-decoration: none; font-size: 11px; }
.error-panel { border-color: rgba(255,90,70,.25); color: #ffaaa4; background: rgba(255,70,45,.06); font-size: 11px; line-height: 1.6; }
.deliverable { margin-top: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.deliverable summary { padding: 12px 13px; cursor: pointer; color: #ddd4c8; font-size: 11px; font-weight: 700; }
.copy-pack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 12px 12px; }
.copy-item { padding: 10px; border-radius: 9px; background: rgba(0,0,0,.18); }
.copy-item strong { display: block; color: var(--accent); font-size: 9px; }
.copy-item p { margin: 5px 0 0; color: #c9c0b4; font-size: 9px; line-height: 1.55; white-space: pre-wrap; }
.deliverable pre { max-height: 360px; overflow: auto; margin: 0; padding: 0 13px 13px; color: #bfb6aa; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }

.side-summary { position: sticky; top: 148px; display: grid; gap: 12px; }
.summary-card { padding: 18px; }
.summary-card h3 { margin: 8px 0 16px; font-size: 16px; line-height: 1.35; }
.summary-card dl { margin: 0; }
.summary-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.summary-card dt { color: var(--muted); font-size: 10px; }
.summary-card dd { margin: 0; max-width: 160px; font-size: 10px; text-align: right; }
.truth-badge { margin-top: 12px; padding: 8px; border-radius: 8px; color: #87dda9; background: rgba(65,190,115,.08); font-size: 9px; text-align: center; }
.checklist-card ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.checklist-card li { display: flex; gap: 7px; color: #a9a197; font-size: 9px; line-height: 1.45; }
.checklist-card li.done { color: #87dda9; }

.toast { position: fixed; z-index: 60; right: 20px; bottom: 20px; max-width: 360px; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 10px; opacity: 0; transform: translateY(14px); color: #f8e8d4; background: #272018; box-shadow: var(--shadow); pointer-events: none; font-size: 11px; transition: .25s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr; }
  .side-summary { position: static; grid-template-columns: 1fr 1fr; order: -1; }
  .hero { grid-template-columns: 1fr; }
  .hero-formula { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 20px, 1280px); padding-top: 24px; }
  .topbar { padding-inline: 12px; }
  .save-state { display: none; }
  .hero { padding: 8px 4px 26px; }
  .hero h1 { font-size: 39px; }
  .step-nav { top: 70px; grid-template-columns: repeat(6, minmax(62px, 1fr)); overflow-x: auto; }
  .step-nav a { flex-direction: column; gap: 3px; min-width: 66px; }
  .step-card { padding: 17px; border-radius: 15px; }
  .section-head { display: block; }
  .section-head p { margin-top: 8px; text-align: left; }
  .format-grid, .business-grid, .template-grid { grid-template-columns: 1fr; }
  .cinema-style-grid { grid-template-columns: repeat(2, 1fr); }
  .goal-grid, .hook-grid, .sound-grid { grid-template-columns: repeat(2, 1fr); }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .fact-grid { grid-template-columns: 1fr; }
  .continuity-grid { grid-template-columns: 1fr; }
  .continuity-field:last-child { grid-column: auto; }
  .sound-panel { grid-template-columns: 1fr; }
  .preview-layout { grid-template-columns: 1fr; }
  .phone-stage { width: min(280px, 86%); margin: 0 auto; }
  .action-grid, .copy-pack, .side-summary { grid-template-columns: 1fr; }
  .clip-results { grid-template-columns: 1fr; }
}

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