:root {
  color-scheme: dark;
  --bg: #0d1016;
  --panel: #151a23;
  --panel-2: #1a202b;
  --panel-3: #202735;
  --line: #2d3544;
  --text: #f5f7fb;
  --muted: #9aa5b8;
  --soft: #68748a;
  --blue: #6ea8ff;
  --blue-strong: #3e83f7;
  --purple: #9567f5;
  --green: #42d5a1;
  --amber: #f4bd59;
  --danger: #ff7c83;
  --radius: 8px;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; display: grid; grid-template-rows: 64px 1fr; }
.topbar { display: flex; align-items: center; gap: 28px; padding: 0 24px; border-bottom: 1px solid var(--line); background: #11151d; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.brand img { width: 42px; height: 42px; object-fit: contain; object-position: center; }
.brand strong { font-size: 16px; letter-spacing: 0; }
.brand span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.nav { display: flex; gap: 4px; height: 100%; align-items: center; }
.nav button { color: var(--muted); border: 0; background: transparent; padding: 9px 14px; border-radius: 6px; }
.nav button:hover, .nav button.active { color: var(--text); background: #222938; }
.account { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.balance { color: var(--amber); }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2672df, #7752d6); font-size: 12px; }

.layout { display: grid; grid-template-columns: 258px minmax(560px, 1fr) 330px; min-height: 0; }
.sidebar { border-right: 1px solid var(--line); background: #121720; padding: 18px 14px; overflow: auto; }
.sidebar h3 { font-size: 12px; color: var(--soft); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 8px 10px 12px; }
.side-project { padding: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); margin-bottom: 18px; }
.side-project .eyebrow { color: var(--muted); font-size: 11px; }
.side-project strong { display: block; margin-top: 5px; font-size: 14px; }
.side-project small { color: var(--soft); display: block; margin-top: 8px; }
.step-list { display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: var(--muted); text-align: left; padding: 10px; border-radius: 6px; }
.step:hover, .step.active { background: #222938; color: var(--text); }
.step .num { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-size: 11px; }
.step.done .num { color: #10231c; background: var(--green); border-color: var(--green); }
.step .hint { color: var(--soft); font-size: 11px; }
.side-footer { margin-top: 26px; display: grid; gap: 6px; }
.side-footer button { display: flex; gap: 9px; align-items: center; border: 0; background: transparent; color: var(--muted); text-align: left; padding: 9px 10px; border-radius: 6px; }
.side-footer button:hover { color: var(--text); background: #202735; }

.workspace { min-width: 0; display: grid; grid-template-rows: 58px 1fr; background: #11151c; }
.workspace-head { display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--line); }
.workspace-head h1 { font-size: 18px; margin: 0; }
.workspace-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.head-actions { display: flex; gap: 8px; }
.btn { border: 1px solid var(--line); background: #1a202b; color: var(--text); padding: 8px 12px; border-radius: 6px; font-size: 12px; }
.btn:hover { border-color: #50627e; background: #222938; }
.btn.primary { background: var(--blue-strong); border-color: var(--blue-strong); }
.btn.primary:hover { background: #5592ff; }
.btn.subtle { color: var(--muted); }
.btn.danger { color: var(--danger); }

.content { overflow: auto; padding: 22px; }
.canvas { position: relative; min-height: 230px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background-color: #111720; background-image: radial-gradient(#263041 1px, transparent 1px); background-size: 18px 18px; }
.canvas-tools { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 4px; }
.canvas-tools button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 5px; background: #171d27; color: var(--muted); }
.flow { display: flex; align-items: center; justify-content: center; gap: 0; min-height: 230px; padding: 40px 20px; }
.flow-node { min-width: 142px; border: 1px solid var(--line); border-radius: 8px; background: rgba(26, 32, 43, .96); padding: 13px; box-shadow: 0 10px 22px rgba(0,0,0,.16); }
.flow-node.active { border-color: var(--blue); box-shadow: 0 0 0 1px rgba(110,168,255,.15); }
.flow-node .icon { color: var(--blue); font-size: 18px; }
.flow-node strong { display: block; font-size: 13px; margin-top: 8px; }
.flow-node small { color: var(--muted); display: block; margin-top: 4px; font-size: 11px; }
.flow-line { width: 42px; height: 1px; background: #43516a; position: relative; }
.flow-line::after { content: ""; position: absolute; right: -1px; top: -3px; border-left: 6px solid #43516a; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }

.section { margin-top: 20px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-head h2 { margin: 0; font-size: 15px; }
.section-head span { color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 12px; }
.grid.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 14px; }
.card:hover { border-color: #4b5c77; }
.card .card-top { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.card strong { font-size: 13px; }
.card p { color: var(--muted); line-height: 1.55; font-size: 12px; margin: 9px 0 0; }
.tag { display: inline-flex; align-items: center; border: 1px solid #3c4a62; color: #b8c7e4; background: #1b2637; border-radius: 4px; padding: 3px 6px; font-size: 10px; }
.tag.green { color: #9af1d4; border-color: #286a58; background: #173d34; }
.tag.amber { color: #ffe0a0; border-color: #71592a; background: #3b3018; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1/-1; }
.field label { color: var(--muted); font-size: 12px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #111720; color: var(--text); padding: 9px 10px; outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }
.field textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.choice-row { display: flex; flex-wrap: wrap; gap: 7px; }
.choice { border: 1px solid var(--line); border-radius: 6px; background: #111720; color: var(--muted); padding: 8px 10px; font-size: 11px; }
.choice.active { background: #1f3a64; border-color: var(--blue); color: #eaf2ff; }
.helper { color: var(--soft); font-size: 11px; line-height: 1.5; }

.storyboard { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; }
.script-panel { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 14px; }
.script-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.script-toolbar strong { font-size: 13px; }
.shot { border-top: 1px solid var(--line); padding: 13px 0; }
.shot:first-of-type { border-top: 0; padding-top: 0; }
.shot-head { display: flex; align-items: center; gap: 8px; }
.shot-head strong { font-size: 12px; }
.shot textarea { margin-top: 9px; min-height: 70px; }
.shot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; }
.asset-rail { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 12px; }
.asset-rail h3 { margin: 0 0 10px; font-size: 12px; }
.asset-item { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 9px 0; }
.asset-thumb { width: 34px; height: 34px; border-radius: 5px; background: linear-gradient(135deg, #364761, #1d2637); display: grid; place-items: center; color: #b9c7df; font-size: 12px; }
.asset-item strong { font-size: 11px; display: block; }
.asset-item small { color: var(--soft); font-size: 10px; }
.timeline { display: flex; gap: 5px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.timeline button { flex: 1; min-width: 70px; padding: 8px 6px; border: 1px solid var(--line); color: var(--muted); background: #111720; border-radius: 5px; font-size: 10px; }
.timeline button.active { background: #1e3558; color: #e8f1ff; border-color: var(--blue); }

.inspector { border-left: 1px solid var(--line); background: #121720; padding: 18px 16px; overflow: auto; }
.inspector h2 { font-size: 15px; margin: 4px 0 5px; }
.inspector > p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 18px; }
.inspector-section { border-top: 1px solid var(--line); padding: 15px 0; }
.inspector-section:first-of-type { border-top: 0; }
.inspector-section h3 { font-size: 11px; text-transform: uppercase; color: var(--soft); margin: 0 0 10px; letter-spacing: .07em; }
.metric-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: var(--muted); font-size: 12px; }
.metric-row strong { color: var(--text); font-weight: 500; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.status.running::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(244,189,89,.12); }
.status.idle::before { background: var(--soft); }
.notice { border: 1px solid #3b4f6e; border-radius: 6px; background: #172337; color: #c9d8f1; padding: 10px; font-size: 11px; line-height: 1.5; }
.notice.warn { border-color: #735b2b; background: #332a17; color: #f6d58a; }
.check { display: flex; align-items: start; gap: 8px; color: var(--muted); font-size: 11px; line-height: 1.45; margin: 9px 0; }
.check input { accent-color: var(--blue-strong); margin-top: 2px; }

.empty { border: 1px dashed #3a465a; background: rgba(26,32,43,.55); color: var(--muted); padding: 24px; text-align: center; border-radius: var(--radius); }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: 360px; padding: 11px 14px; border: 1px solid #3c557a; border-radius: 7px; background: #18263b; color: #dfebff; box-shadow: 0 12px 32px rgba(0,0,0,.28); font-size: 12px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(4,7,12,.72); }
.modal { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 9px; background: #171d27; box-shadow: 0 28px 80px rgba(0,0,0,.5); padding: 20px; }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-head h2 { font-size: 17px; margin: 0; }
.modal-head p { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.close { border: 0; background: transparent; color: var(--muted); font-size: 20px; }
.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 18px; }

/* Evidence-matched full-screen workspaces from the supplied recording. */
.original-app { position: relative; min-height: 100vh; overflow: hidden; color: #f5f5f5; background: #070707; background-image: radial-gradient(#202020 0.7px, transparent 0.7px); background-size: 19px 19px; }
.original-top-left { position: absolute; z-index: 4; left: 20px; top: 16px; width: 301px; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 15px; background: #191919; }
.original-top-left span { font-size: 14px; font-weight: 600; }
.original-back, .original-layout { border: 0; background: transparent; color: #dedede; font-size: 22px; line-height: 1; padding: 4px 6px; }
.original-layout { margin-left: auto; font-size: 17px; }
.original-top-right { position: absolute; z-index: 4; right: 18px; top: 16px; display: flex; gap: 12px; align-items: center; }
.original-task, .original-balance { min-height: 46px; border: 0; border-radius: 13px; background: #191919; color: #f1f1f1; padding: 0 18px; font-weight: 600; }
.original-balance { color: #f7f7f7; min-width: 92px; }
.original-canvas { min-height: 100vh; padding-top: 84px; display: flex; flex-direction: column; align-items: center; }
.original-node-title { width: 950px; max-width: calc(100vw - 100px); display: flex; align-items: center; gap: 8px; padding: 20px 3px 14px; font-size: 14px; }
.node-spark { width: 20px; height: 20px; display: grid; place-items: center; color: #d8fff9; border-radius: 50% 45% 50% 45%; background: linear-gradient(135deg, #3bd2c5, #aaffea); transform: rotate(20deg); font-size: 11px; box-shadow: 0 0 15px rgba(65,224,200,.25); }
.original-project-card { width: 950px; max-width: calc(100vw - 100px); height: 685px; padding: 18px 19px; border-radius: 29px; background: #1b1b1b; box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.original-scroll { height: 100%; overflow: auto; padding: 0 0 8px; scrollbar-color: #575757 transparent; }
.original-label { color: #9b9b9b; font-size: 14px; margin: 8px 0 10px; }
.original-file-card { height: 101px; display: flex; align-items: center; gap: 14px; padding: 20px 23px; border-radius: 13px; background: #252525; }
.original-file-card strong { display: block; font-size: 14px; }
.original-file-card span { display: block; color: #8e8e8e; font-size: 13px; margin-top: 7px; }
.file-icon { width: 36px; height: 46px; display: grid; place-items: center; border-radius: 7px; border: 1px solid #5b6b6f; color: #9cf7ee; background: linear-gradient(160deg, #2c363b, #193d3e); font-size: 24px; }
.original-upload { margin-left: auto; border: 0; border-radius: 23px; background: #3a3a3a; color: #fff; padding: 10px 20px; }
.original-input-wrap { display: flex; align-items: center; height: 42px; border-radius: 8px; background: #252525; }
.original-input-wrap input { min-width: 0; flex: 1; border: 0; outline: none; background: transparent; color: #f5f5f5; padding: 0 14px; }
.original-input-wrap span { color: #767676; padding-right: 14px; font-size: 12px; }
.original-ratios { display: flex; gap: 10px; padding: 2px 0 10px; }
.ratio-card { width: 148px; height: 124px; border: 0; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: transparent; color: #777; }
.ratio-card.selected { background: #252525; color: #fff; }
.ratio-shape { display: block; border: 1px solid #858585; border-radius: 4px; }
.ratio-card.selected .ratio-shape { border-color: #fff; }
.ratio-9-16 { width: 27px; height: 48px; }
.ratio-3-4 { width: 28px; height: 38px; }
.ratio-4-3 { width: 40px; height: 29px; }
.ratio-16-9 { width: 47px; height: 27px; }
.ratio-1-1 { width: 34px; height: 34px; }
.original-styles { display: flex; gap: 8px; padding-bottom: 12px; }
.style-card { width: 140px; border: 0; border-radius: 10px; padding: 0 0 9px; color: #888; background: transparent; overflow: hidden; }
.style-card.selected { background: #252525; color: #fff; }
.style-preview { height: 120px; display: grid; place-items: center; font-size: 40px; font-weight: 700; color: rgba(255,255,255,.8); background-size: cover; background-position: center; }
.style-0 { background: linear-gradient(135deg,#516879,#d4c3af 46%,#2b3944); }
.style-1 { background: linear-gradient(135deg,#272d3c,#a0a3ba 48%,#232634); }
.style-2 { background: linear-gradient(135deg,#ffb5d1,#9b8dea 48%,#3d7ed7); }
.style-3 { background: linear-gradient(135deg,#9baee4,#333f7a 50%,#d7b6a5); }
.style-4 { background: linear-gradient(135deg,#ffc8d3,#8b6e85 50%,#6ea6d8); }
.style-5 { background: linear-gradient(135deg,#e3a16b,#2d2024 54%,#df7b49); }
.style-card > span:last-child { display: block; font-size: 13px; padding-top: 8px; }
.original-create-bar { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.original-cube { width: 44px; height: 44px; border: 0; border-radius: 50%; color: #c8c8c8; background: #191919; font-size: 20px; }
.original-start { min-width: 145px; height: 44px; border: 0; border-radius: 24px; color: #06201e; background: #18dfc7; font-size: 14px; font-weight: 700; }
.original-zoom { position: absolute; z-index: 5; left: 20px; bottom: 19px; display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 9px; border-radius: 13px; background: #191919; color: #e2e2e2; }
.zoom-button, .zoom-pin { width: 26px; height: 26px; border: 0; background: transparent; color: #e2e2e2; }
.zoom-pin { margin-left: 7px; border-left: 1px solid #3b3b3b; padding-left: 12px; width: 32px; }
.original-assistant { position: absolute; right: 0; bottom: 136px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 20px 0 0 20px; color: #7951df; background: #fff; box-shadow: 0 0 18px rgba(255,255,255,.18); }

.storyboard-app { padding: 114px 20px 18px; }
.storyboard-top { position: absolute; z-index: 4; top: 16px; left: 38px; right: 18px; display: flex; align-items: center; gap: 8px; }
.storyboard-switch { color: #8b8b8b; }
.storyboard-actions { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.remaining-button, .compose-button { height: 46px; border: 0; border-radius: 13px; padding: 0 18px; background: #191919; color: #f0f0f0; font-weight: 600; }
.compose-button { color: #666; }
.storyboard-shell { border-radius: 22px 22px 0 0; background: #1a1a1a; overflow: hidden; }
.storyboard-title { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 23px; }
.storyboard-title strong { font-size: 16px; }
.link-button { border: 0; background: transparent; color: #c0c0c0; padding: 5px 11px; }
.storyboard-main { display: grid; grid-template-columns: 270px minmax(0, 1fr) 300px; gap: 16px; min-height: 480px; padding: 0 20px 18px; }
.preview-empty { display: grid; place-items: center; border-radius: 16px; background: #242424; color: #8b8b8b; font-size: 14px; }
.script-view { min-width: 0; height: 480px; display: grid; grid-template-rows: 1fr auto; border-radius: 16px; background: #242424; overflow: hidden; }
.script-copy { overflow: auto; padding: 22px 20px 8px; color: #f0f0f0; line-height: 1.7; font-size: 13px; scrollbar-color: #555 transparent; }
.script-copy p { margin: 0 0 10px; }
.inline-chip, .duration-chip { display: inline-flex; align-items: center; gap: 3px; border-radius: 6px; padding: 1px 5px; background: #474747; color: #fff; font-size: 12px; }
.duration-chip { background: #454545; margin-left: 4px; }
.shot-mark { color: #ddd; }
.storyboard-controls { display: flex; align-items: center; gap: 13px; min-height: 54px; padding: 0 18px; border-top: 1px solid #333; color: #d8d8d8; font-size: 13px; }
.storyboard-controls > span { white-space: nowrap; }
.resolution-control, .edit-script, .generate-video { height: 37px; border: 0; border-radius: 20px; padding: 0 14px; color: #ddd; background: transparent; }
.resolution-control { background: #353535; }
.edit-script { margin-left: auto; background: #3a3a3a; }
.generate-video { color: #141414; background: #fff; font-weight: 700; }
.original-asset-rail { overflow: auto; padding: 6px 2px; scrollbar-color: #565656 transparent; }
.asset-rail-head { display: flex; align-items: center; gap: 10px; margin: 3px 2px 10px; }
.asset-rail-head span:last-child { margin-left: auto; font-size: 20px; }
.asset-subhead { display: block; color: #999; font-size: 12px; margin: 10px 2px 7px; }
.original-asset-card { display: inline-flex; width: 31%; margin: 0 1.5% 10px 0; border: 0; background: transparent; color: #bfbfbf; vertical-align: top; flex-direction: column; gap: 4px; font-size: 10px; text-align: left; }
.asset-person { height: 92px; display: grid; place-items: center; border-radius: 8px; color: rgba(255,255,255,.8); font-size: 20px; background: linear-gradient(150deg,#33485b,#b8a38b 52%,#1e2b36); }
.person-1 { background: linear-gradient(150deg,#4a5b6b,#625958 48%,#182330); }
.person-2 { background: linear-gradient(150deg,#293847,#3c6e8d 48%,#1c2432); }
.person-3 { background: linear-gradient(150deg,#9a8077,#47526b 48%,#241f24); }
.person-4 { background: linear-gradient(150deg,#605549,#34455d 50%,#14191f); }
.person-5 { background: linear-gradient(150deg,#4e5966,#958272 46%,#1f232a); }
.original-scene-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.original-scene-strip div { height: 86px; display: grid; place-items: end start; padding: 7px; border-radius: 8px; color: #fff; font-size: 11px; background: linear-gradient(160deg,#9cacba,#283f4b 55%,#11191d); }
.original-scene-strip div:last-child { background: linear-gradient(160deg,#8a6b52,#1b2629 60%,#090c0d); }
.original-timeline { padding-top: 15px; }
.timeline-meta { display: flex; justify-content: space-between; align-items: center; color: #8d8d8d; font-size: 12px; padding: 0 0 11px; }
.timeline-track { display: flex; gap: 2px; overflow: hidden; border-top: 1px solid #2a2a2a; }
.timeline-shot { min-width: 145px; flex: 1; height: 123px; border: 1px solid #252525; border-radius: 10px; color: #f0f0f0; background: #181818; text-align: left; padding: 18px 13px; }
.timeline-shot.active { border: 2px solid #16dfc5; padding: 17px 12px; }
.timeline-shot strong { display: block; font-size: 13px; }
.timeline-shot span { display: inline-block; margin-top: 25px; border-radius: 16px; padding: 5px 11px; background: #3b3b3b; color: #ededed; font-size: 11px; }

@media (max-width: 1000px) {
  .original-project-card, .original-node-title { width: calc(100vw - 48px); max-width: none; }
  .original-project-card { height: 620px; }
  .storyboard-main { grid-template-columns: 210px minmax(0, 1fr); }
  .original-asset-rail { display: none; }
}
@media (max-width: 700px) {
  .original-top-left { left: 10px; width: 200px; }
  .original-top-right { right: 10px; }
  .original-top-right .original-task { display: none; }
  .original-canvas { padding-top: 76px; }
  .original-project-card { width: calc(100vw - 24px); }
  .original-node-title { width: calc(100vw - 24px); }
  .original-styles, .original-ratios { overflow-x: auto; }
  .style-card { min-width: 116px; }
  .ratio-card { min-width: 102px; }
  .storyboard-app { padding-left: 10px; padding-right: 10px; }
  .storyboard-main { display: block; }
  .preview-empty { height: 170px; margin-bottom: 10px; }
  .storyboard-controls { overflow-x: auto; }
}

@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px minmax(500px, 1fr); }
  .inspector { display: none; }
}
@media (max-width: 760px) {
  .shell { grid-template-rows: auto 1fr; }
  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .brand { min-width: 170px; }
  .nav { order: 3; width: 100%; overflow: auto; }
  .layout { display: block; }
  .sidebar { display: none; }
  .workspace-head { padding: 12px 14px; height: auto; gap: 12px; }
  .head-actions { display: none; }
  .content { padding: 14px; }
  .flow { overflow-x: auto; justify-content: start; }
  .grid.cards, .form-grid { grid-template-columns: 1fr; }
  .storyboard { grid-template-columns: 1fr; }
}