:root {
  --ink: #101116;
  --muted: #77777f;
  --line: #e8e5df;
  --paper: #f6f4ef;
  --white: #ffffff;
  --coral: #ff603f;
  --coral-deep: #e94627;
  --lavender: #8b85ff;
  --dark: #0e1118;
  --sidebar: 224px;
  --topbar: 70px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Noto Sans SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(255, 96, 63, .3); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  height: var(--topbar);
  padding: 0 24px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: var(--sidebar) 1fr auto;
  align-items: center;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 29px; height: 29px; display: flex; gap: 2px; align-items: flex-end; padding: 5px; background: var(--ink); }
.brand-mark i { width: 5px; display: block; background: #fff; transform: skewY(-20deg); }
.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 18px; background: var(--coral); }
.brand-mark i:nth-child(3) { height: 13px; }
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.brand-name em { font: 500 10px/1 "DM Mono", monospace; letter-spacing: .12em; font-style: normal; color: #9b9a9c; margin-left: 3px; }
.topbar-center { justify-self: center; color: #929095; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.save-dot { width: 6px; height: 6px; border-radius: 50%; background: #70b889; box-shadow: 0 0 0 4px #edf8f0; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-button, .avatar { border: 1px solid var(--line); background: var(--white); display: grid; place-items: center; cursor: pointer; transition: .2s ease; text-decoration: none; }
.icon-button { width: 36px; height: 36px; border-radius: 50%; font: 500 15px "DM Mono", monospace; }
.icon-button:hover { border-color: #c8c4bb; transform: translateY(-1px); }
.credit-box { display: flex; align-items: baseline; gap: 8px; height: 38px; padding: 9px 13px; background: #f6f4ef; font-size: 11px; color: #89878b; }
.credit-box strong { color: var(--ink); font: 600 12px "DM Mono", monospace; }
.avatar { width: 36px; height: 36px; border: 0; border-radius: 50%; color: #3e3732; background: #ffd7c2; font-size: 13px; }

.sidebar {
  position: fixed;
  z-index: 40;
  inset: var(--topbar) auto 0 0;
  width: var(--sidebar);
  padding: 24px 14px 18px;
  background: #fbfaf7;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.primary-nav { display: grid; gap: 4px; }
.nav-item { height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: #646369; border-left: 2px solid transparent; font-size: 13px; font-weight: 500; transition: .2s; }
.nav-item:hover { background: #f3f0ea; color: var(--ink); }
.nav-item.active { color: var(--ink); background: #f0ede6; border-left-color: var(--coral); }
.nav-icon { width: 18px; text-align: center; font-size: 17px; }
.nav-item small { margin-left: auto; min-width: 22px; padding: 2px 5px; background: #dedad2; text-align: center; font: 500 9px "DM Mono", monospace; }
.sidebar-section { margin-top: 30px; }
.section-label { padding: 0 8px 10px 12px; display: flex; align-items: center; justify-content: space-between; color: #aaa6a0; font: 500 9px "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.section-label button { border: 0; background: none; color: #8c8985; cursor: pointer; font-size: 18px; }
.project-link { width: 100%; border: 0; padding: 9px 10px; display: flex; gap: 10px; align-items: flex-start; text-align: left; color: inherit; text-decoration: none; background: transparent; cursor: pointer; }
.project-link:hover, .project-link.active { background: #f3f0ea; }
.project-color { margin-top: 4px; width: 6px; height: 28px; flex: 0 0 auto; }
.project-color.orange { background: #f17952; }
.project-color.blue { background: #88a9cb; }
.project-color.lilac { background: #a49ac8; }
.project-link span:last-child { min-width: 0; display: grid; gap: 3px; }
.project-link strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.project-link small { color: #aaa7a1; font-size: 10px; }
.sidebar-tip { margin-top: auto; padding: 13px 10px; background: #11131a; color: #fff; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: start; }
.tip-spark { color: #ff8b64; }
.sidebar-tip strong { display: block; font-size: 10px; font-weight: 600; }
.sidebar-tip p { margin: 3px 0 0; color: #757982; font-size: 8px; line-height: 1.5; }
.online-dot { width: 6px; height: 6px; border-radius: 50%; background: #65d58b; margin-top: 3px; box-shadow: 0 0 0 3px rgba(101,213,139,.12); }
.online-dot.offline { background: #ff7358; box-shadow: 0 0 0 3px rgba(255,115,88,.12); }
.sidebar-empty { padding: 12px 10px; color: #9a9792; font-size: 9px; border: 1px dashed #ddd9d1; }
.mobile-close, .mobile-menu { display: none; }

.workspace { min-height: 100vh; margin-left: var(--sidebar); padding: calc(var(--topbar) + 38px) clamp(28px, 4vw, 70px) 44px; }
.workspace-head { max-width: 1320px; margin: 0 auto 28px; display: flex; align-items: flex-end; justify-content: space-between; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--coral); font: 500 9px "DM Mono", monospace; letter-spacing: .15em; }
.eyebrow-line { width: 38px; height: 1px; background: #e6a08e; }
.workspace-head h1 { margin: 9px 0 5px; font: 700 clamp(28px, 3vw, 44px)/1.15 "Noto Serif SC", serif; letter-spacing: .02em; }
.workspace-head p { margin: 0; color: #7d7a7c; font-size: 12px; }
.secondary-button { border: 1px solid #dcd8d0; background: rgba(255,255,255,.55); padding: 10px 14px; font-size: 11px; cursor: pointer; }
.secondary-button:hover { background: #fff; }

.studio-grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: minmax(400px, .9fr) minmax(480px, 1.1fr); background: var(--white); border: 1px solid var(--line); box-shadow: 0 22px 65px rgba(44,38,30,.07); }
.control-panel { padding: 25px 28px 20px; border-right: 1px solid var(--line); }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); background: #f4f1eb; border: 1px solid #eae6df; padding: 4px; }
.mode-tab { min-height: 62px; border: 0; background: transparent; display: flex; align-items: center; gap: 11px; padding: 9px 14px; text-align: left; cursor: pointer; color: #969398; transition: .2s; }
.mode-tab.active { background: var(--white); color: var(--ink); box-shadow: 0 4px 12px rgba(40,34,29,.07); }
.mode-icon { width: 28px; height: 28px; border: 1px solid #ded9d1; display: grid; place-items: center; font-size: 10px; color: #8f8b86; }
.mode-tab.active .mode-icon { color: var(--coral); border-color: #ffc7b8; background: #fff5f1; }
.mode-tab strong { display: block; font-size: 12px; }
.mode-tab small { display: block; margin-top: 2px; font-size: 9px; color: #aaa7aa; font-weight: 400; }
.image-upload-block { margin-top: 18px; }
.image-dropzone { position: relative; overflow: hidden; min-height: 122px; border: 1px dashed #c8c2b8; background: linear-gradient(135deg,#fbfaf7,#f2eee8); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; text-align: center; }
.image-dropzone:hover { border-color: var(--coral); }
.image-dropzone input { position: absolute; opacity: 0; pointer-events: none; }
.image-dropzone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: .2s; }
.image-dropzone.has-image img { opacity: 1; }
.image-dropzone.has-image::after { content: "更换参考图"; position: absolute; right: 8px; bottom: 8px; padding: 5px 7px; background: rgba(10,12,17,.75); color: #fff; font-size: 8px; }
.image-dropzone.has-image > span,.image-dropzone.has-image > strong,.image-dropzone.has-image > small { opacity: 0; }
.upload-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--coral); background: #fff; box-shadow: 0 4px 12px rgba(30,25,20,.08); font-size: 17px; }
.image-dropzone strong { margin-top: 8px; font-size: 10px; }
.image-dropzone small { margin-top: 5px; max-width: 360px; color: #a09c99; font-size: 7px; line-height: 1.6; }
.pipeline-mini { min-height: 35px; padding: 0 7px; border: 1px solid #e9e5de; border-top: 0; display: flex; align-items: center; justify-content: center; gap: 7px; color: #aaa6a3; font-size: 7px; }
.pipeline-mini span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pipeline-mini i { width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; background: #e9e5de; font: normal 6px ui-monospace,monospace; }
.pipeline-mini span.active { color: #4d4b50; }
.pipeline-mini span.active i { color: #fff; background: var(--coral); }
.pipeline-mini b { color: #d0cbc4; font-weight: 400; }
.field-block { margin-top: 21px; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.field-block label, .field-label-row label { font-size: 11px; font-weight: 650; }
.text-action { border: 0; background: none; color: #939096; font-size: 9px; cursor: pointer; }
.text-action:hover { color: var(--coral); }
.editor-wrap { border: 1px solid #ddd9d1; background: #fdfcf9; transition: .2s; }
.editor-wrap:focus-within { border-color: #aaa39a; box-shadow: 0 0 0 3px rgba(16,17,22,.04); }
.editor-wrap textarea { display: block; width: 100%; height: 145px; resize: vertical; border: 0; outline: 0; padding: 15px 16px 10px; background: transparent; color: #3b3b40; line-height: 1.8; font-size: 12px; }
.editor-footer { padding: 8px 12px; border-top: 1px solid #ede9e3; display: flex; justify-content: space-between; color: #aaa6a4; font: 400 8px "DM Mono", monospace; }
kbd { padding: 1px 4px; border: 1px solid #d9d4cb; background: #f2eee7; box-shadow: 0 1px 0 #d0ccc4; font: inherit; }
.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.style-card { position: relative; border: 1px solid #e2ded7; background: #fff; min-height: 58px; padding: 7px; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; transition: .18s; }
.style-card:hover { border-color: #bbb5ab; }
.style-card.active { border-color: #27272c; box-shadow: inset 0 0 0 1px #27272c; }
.style-card i { position: absolute; display: none; place-items: center; width: 15px; height: 15px; right: 3px; top: 3px; color: #fff; background: #24252b; border-radius: 50%; font-size: 8px; font-style: normal; }
.style-card.active i { display: grid; }
.style-swatch { width: 40px; height: 40px; flex: 0 0 auto; background: #ddd; overflow: hidden; }
.style-swatch.cinematic { background: radial-gradient(circle at 65% 32%, #f9b067 0 7%, transparent 8%), linear-gradient(150deg, #182b3b 0 48%, #9c4c34 49% 60%, #e9b772 61%); }
.style-swatch.oriental { background: radial-gradient(circle at 70% 28%, #eb6c54 0 14%, transparent 15%), linear-gradient(140deg, transparent 48%, #273d35 49% 53%, transparent 54%), #e5dac8; }
.style-swatch.illustration { background: radial-gradient(circle at 65% 40%, #ffd369 0 17%, transparent 18%), linear-gradient(160deg, #b8d8d6 0 48%, #8b7fc2 49% 66%, #f5b499 67%); }
.style-card strong { display: block; font-size: 10px; white-space: nowrap; }
.style-card small { display: block; font: 400 7px "DM Mono", monospace; color: #aaa6a2; margin-top: 3px; }
.settings-row { display: grid; grid-template-columns: 1.5fr .7fr; gap: 18px; }
.compact-field label { display: block; margin-bottom: 9px; }
.ratio-group { height: 42px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #dfdbd4; }
.ratio-group button { border: 0; border-right: 1px solid #e9e5df; background: #fff; color: #989499; cursor: pointer; font: 500 8px "DM Mono", monospace; display: flex; justify-content: center; align-items: center; gap: 5px; }
.ratio-group button:last-child { border-right: 0; }
.ratio-group button.active { background: #1b1c21; color: #fff; }
.ratio-icon { border: 1px solid currentColor; display: inline-block; opacity: .8; }
.ratio-icon.landscape { width: 12px; height: 7px; }
.ratio-icon.portrait { width: 6px; height: 10px; }
.ratio-icon.square { width: 8px; height: 8px; }
.select-like { width: 100%; height: 42px; border: 1px solid #dfdbd4; padding: 0 11px; background: #fff; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 10px; }
.advanced-options { margin-top: 17px; border-top: 1px solid #efebe5; border-bottom: 1px solid #efebe5; }
.advanced-options summary { list-style: none; height: 38px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; }
.advanced-options summary::-webkit-details-marker { display: none; }
.advanced-options summary small { color: #aaa5a2; font-weight: 400; }
.advanced-options summary i { margin-left: auto; font-style: normal; transition: .2s; }
.advanced-options[open] summary i { transform: rotate(180deg); }
.advanced-body { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 0 12px; }
.advanced-body label { font-weight: 400; color: #6f6c6d; font-size: 9px; }
.advanced-body input { accent-color: var(--coral); vertical-align: middle; }
.generate-button { position: relative; overflow: hidden; margin-top: 18px; width: 100%; height: 53px; border: 0; background: var(--ink); color: #fff; display: flex; align-items: center; padding: 0 17px; cursor: pointer; transition: .2s; }
.generate-button:hover { background: #25262c; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(20,20,25,.14); }
.generate-button:disabled { cursor: wait; opacity: .88; transform: none; }
.button-shine { position: absolute; width: 110px; height: 110px; right: -45px; top: -65px; background: radial-gradient(circle, rgba(255,114,76,.45), transparent 65%); }
.generate-icon { width: 27px; color: #ff7657; font-size: 17px; }
#generateText { font-size: 12px; font-weight: 650; }
.credit-cost { margin-left: auto; color: #85858e; font-size: 8px; }
.privacy-note { margin: 9px 0 0; color: #a5a1a0; text-align: center; font-size: 8px; }

.preview-panel { min-width: 0; padding: 25px 28px 20px; background: #f9f8f5; }
.preview-head { min-height: 40px; display: flex; justify-content: space-between; align-items: start; }
.panel-kicker { color: #aaa6a2; font: 500 7px "DM Mono", monospace; letter-spacing: .16em; }
.preview-head h2 { margin: 3px 0 0; font-size: 14px; font-weight: 650; }
.preview-actions { display: flex; gap: 6px; }
.preview-actions .icon-button { width: 29px; height: 29px; font-size: 12px; background: transparent; }
.stage { position: relative; aspect-ratio: 16/9; margin-top: 10px; overflow: hidden; background: #151821; color: #fff; }
.stage > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 8s ease; }
.stage.playing > img { transform: scale(1.05); }
.stage-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,9,15,.34) 0%, transparent 45%, rgba(6,8,13,.62) 100%); }
.stage-top { position: absolute; inset: 13px 14px auto; display: flex; justify-content: space-between; color: rgba(255,255,255,.74); font: 400 7px "DM Mono", monospace; letter-spacing: .06em; }
.play-button { position: absolute; inset: 50% auto auto 50%; width: 48px; height: 48px; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.68); border-radius: 50%; background: rgba(7,10,16,.38); color: #fff; backdrop-filter: blur(8px); cursor: pointer; display: grid; place-items: center; transition: .2s; }
.play-button:hover { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,.18); }
.play-button span { margin-left: 3px; font-size: 13px; }
.stage-caption { position: absolute; left: 16px; bottom: 14px; }
.scene-index { display: inline-block; color: #ff9a73; font: 500 7px "DM Mono", monospace; letter-spacing: .12em; margin-bottom: 4px; }
.stage-caption p { margin: 0; font: 600 clamp(12px, 1.3vw, 18px)/1.65 "Noto Serif SC", serif; letter-spacing: .04em; text-shadow: 0 2px 12px #000; }
.generation-overlay { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(8,10,15,.86); backdrop-filter: blur(6px); text-align: center; }
.generation-overlay.active { display: flex; }
.orbit { width: 56px; height: 56px; position: relative; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; display: grid; place-items: center; margin-bottom: 13px; }
.orbit span { position: absolute; inset: -4px; border: 2px solid transparent; border-top-color: var(--coral); border-radius: 50%; animation: spin 1.2s linear infinite; }
.orbit i { font-style: normal; color: #ff7958; }
.generation-overlay strong { font-size: 12px; }
.generation-overlay small { color: #8c919c; margin-top: 5px; font-size: 8px; }
.progress-track { width: 150px; height: 2px; background: #30333a; margin-top: 15px; }
.progress-track i { display: block; width: 12%; height: 100%; background: linear-gradient(90deg, var(--coral), #ffb074); transition: width .35s; }
.generation-overlay em { margin-top: 6px; color: #747985; font: normal 7px "DM Mono", monospace; }
@keyframes spin { to { transform: rotate(360deg); } }
.timeline-head { margin: 16px 0 8px; display: flex; align-items: center; justify-content: space-between; }
.timeline-head span { font-size: 10px; font-weight: 650; }
.timeline-head small { color: #aaa7a2; font: 400 7px "DM Mono", monospace; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr) 48px; gap: 6px; }
.shot { min-width: 0; border: 0; padding: 0; background: transparent; text-align: left; cursor: pointer; }
.shot-thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border: 2px solid transparent; opacity: .66; transition: .2s; background: #232833; }
.shot:hover .shot-thumb, .shot.active .shot-thumb { opacity: 1; }
.shot.active .shot-thumb { border-color: var(--coral); }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.65); filter: saturate(.85); }
.shot-one img { object-position: 70% 36%; }
.shot-two img { object-position: 22% 48%; }
.shot-three img { object-position: 87% 48%; }
.shot-four img { object-position: 50% 70%; }
.shot-thumb b { position: absolute; z-index: 2; left: 4px; top: 3px; color: #fff; font: 500 7px "DM Mono", monospace; text-shadow: 0 1px 4px #000; }
.shot-time { display: block; margin-top: 4px; color: #aaa7a2; font: 400 7px "DM Mono", monospace; }
.add-shot { border: 1px dashed #cfcbc4; height: calc(100% - 13px); display: grid; place-content: center; text-align: center; color: #aaa7a2; }
.add-shot span { font-size: 17px; line-height: 1; }
.add-shot small { font-size: 7px; margin-top: 3px; }
.result-summary { margin-top: 13px; min-height: 52px; padding: 10px 12px; border: 1px solid #e7e3dc; background: #fff; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.summary-icon { width: 29px; height: 29px; display: grid; place-items: center; background: #fff1ec; color: var(--coral); }
.result-summary strong { display: block; font-size: 9px; }
.result-summary p { margin: 3px 0 0; color: #99969a; font-size: 8px; }
.result-summary button { border: 0; background: none; color: #6d6a6c; font-size: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 26px; transform: translate(-50%, 30px); padding: 10px 15px; display: flex; gap: 8px; align-items: center; background: #111319; color: #fff; opacity: 0; pointer-events: none; transition: .3s; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast span { color: #74d594; }
.toast p { margin: 0; font-size: 10px; }
.modal { position: fixed; z-index: 110; inset: 0; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(13,14,18,.62); backdrop-filter: blur(3px); }
.modal-card { position: absolute; top: 50%; left: 50%; width: min(720px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 50px)); transform: translate(-50%, -50%); background: #fff; box-shadow: 0 28px 80px rgba(0,0,0,.28); overflow: hidden; }
.modal-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.modal-head h2 { margin: 4px 0 0; font: 700 21px "Noto Serif SC", serif; }
.modal-head button { border: 0; background: none; font-size: 26px; cursor: pointer; color: #8b8886; }
.modal-content { padding: 20px 24px 26px; overflow: auto; max-height: calc(100vh - 150px); }
.plan-summary { margin: 0 0 18px; padding: 13px 15px; color: #686569; background: #f7f4ef; font-size: 11px; line-height: 1.8; }
.plan-scene { display: grid; grid-template-columns: 42px 1fr auto; gap: 13px; padding: 14px 0; border-bottom: 1px solid #eeeae4; }
.plan-number { font: 500 12px "DM Mono", monospace; color: var(--coral); }
.plan-scene h3 { margin: 0 0 5px; font-size: 12px; }
.plan-scene p { margin: 0; color: #7a7778; font-size: 10px; line-height: 1.7; }
.plan-scene small { font: 400 8px "DM Mono", monospace; color: #a29e9b; }

@media (max-width: 1080px) {
  :root { --sidebar: 190px; }
  .workspace { padding-left: 25px; padding-right: 25px; }
  .studio-grid { grid-template-columns: minmax(360px, .88fr) minmax(390px, 1.12fr); }
  .control-panel, .preview-panel { padding: 22px 20px 18px; }
  .style-card { padding: 5px; gap: 5px; }
  .style-swatch { width: 32px; height: 36px; }
}

@media (max-width: 840px) {
  :root { --sidebar: 224px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 16px; }
  .topbar-center, .credit-box, .help-button { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.16); }
  .sidebar.open { transform: translateX(0); }
  .mobile-close { display: block; position: absolute; right: 9px; top: 6px; border: 0; background: none; font-size: 23px; cursor: pointer; }
  .workspace { margin-left: 0; padding: calc(var(--topbar) + 25px) 18px 32px; }
  .mobile-menu { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid #ded9d1; background: #fff; margin-right: 13px; }
  .workspace-head { align-items: flex-start; }
  .workspace-head > div { flex: 1; }
  .studio-grid { grid-template-columns: 1fr; }
  .control-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-panel { padding-bottom: 25px; }
}

@media (max-width: 560px) {
  .topbar { height: 60px; }
  :root { --topbar: 60px; }
  .brand-name em { display: none; }
  .workspace-head p { max-width: 300px; line-height: 1.6; }
  .history-button { display: none; }
  .workspace-head h1 { font-size: 29px; }
  .control-panel, .preview-panel { padding: 18px 14px; }
  .mode-tab { padding: 8px; gap: 7px; }
  .mode-icon { display: none; }
  .style-grid { grid-template-columns: 1fr; }
  .style-card { min-height: 54px; }
  .style-swatch { width: 52px; }
  .settings-row { grid-template-columns: 1fr; gap: 0; }
  .timeline { grid-template-columns: repeat(4, minmax(75px, 1fr)) 45px; overflow-x: auto; padding-bottom: 5px; }
  .shot { min-width: 75px; }
  .add-shot { min-width: 45px; }
  .stage-caption p { font-size: 12px; }
  .credit-cost { display: none; }
  .plan-scene { grid-template-columns: 32px 1fr; }
  .plan-scene small { grid-column: 2; }
}

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