:root {
  --bg: #0b0a0e;
  --bg-2: #121018;
  --surface: #18151f;
  --surface-2: #211d2a;
  --border: #342e40;
  --gold: #e8b86d;
  --gold-2: #f5d29a;
  --ink: #ff5a7a;
  --cyan: #5eead4;
  --text: #f6f1e8;
  --muted: #9c93a6;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #fb7185;
  --shadow: 0 18px 50px rgba(0, 0, 0, .38);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(232, 184, 109, .12), transparent 50%),
    radial-gradient(900px 480px at 100% 0%, rgba(255, 90, 122, .1), transparent 46%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.auth-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 10, .94);
  padding: 1.25rem;
}
.auth-box {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.7rem;
  box-shadow: var(--shadow);
}
.auth-box h1 {
  font-size: 1.45rem;
  background: linear-gradient(90deg, var(--gold), var(--ink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-box p { color: var(--muted); margin: .55rem 0 1.1rem; font-size: .9rem; }

.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(12, 10, 16, .86);
  backdrop-filter: blur(16px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--ink));
  color: #1a1010; font-weight: 800; display: grid; place-items: center;
}
.brand h1 { font-size: 1.02rem; letter-spacing: .02em; }
.brand p { color: var(--muted); font-size: .74rem; }
.top-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.workbench-switch {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg);
  flex: 0 0 auto;
}
.workbench-switch button {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: .48rem 1.05rem;
  font-weight: 750;
}
.workbench-switch button.active {
  background: linear-gradient(90deg, var(--gold), #f08a6b);
  color: #2a1608;
}
body[data-bench="pipeline"] .nav button[data-bench="studio"] { display: none; }
body[data-bench="studio"] .nav button[data-bench="pipeline"] { display: none; }
body[data-surface="web"][data-role="creator"] .workbench-switch,
body[data-surface="web"][data-role="editor"] .workbench-switch,
body[data-surface="web"][data-role="creator"] .nav button[data-bench="pipeline"],
body[data-surface="web"][data-role="creator"] .nav button[data-bench="studio"],
body[data-surface="web"][data-role="editor"] .nav button[data-bench="pipeline"],
body[data-surface="web"][data-role="editor"] .nav button[data-bench="studio"] { display: none; }
body[data-surface="web"][data-role="creator"] #create-project-card { display: none; }
.pipeline-hero {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  margin-bottom: 1rem;
}
.pipeline-hero h2 { font-size: 1.15rem; color: var(--gold-2); }
.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: .85rem;
}
.csp-layer {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: .15rem .55rem;
  padding: .45rem .2rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.csp-layer strong { font-size: .82rem; }
.csp-layer.active { background: rgba(232, 184, 109, .08); border-radius: 8px; }
.csp-z {
  font-size: .68rem;
  color: var(--cyan);
  grid-row: span 2;
  align-self: center;
}
.nav {
  display: flex; gap: .35rem; padding: .45rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.nav button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: .42rem .75rem;
  border-radius: 999px;
}
.nav button.active {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(232, 184, 109, .18);
}

.wrap { padding: 1rem 1.1rem 2.5rem; max-width: 1680px; margin: 0 auto; width: 100%; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .85rem; }
.card, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.card { padding: 1rem 1.05rem; }
.card h3 { font-size: .98rem; margin-bottom: .35rem; }
.muted { color: var(--muted); font-size: .82rem; }
.tiny { font-size: .72rem; color: var(--muted); }

label { display: block; color: var(--muted); font-size: .78rem; margin: .15rem 0 .28rem; }
input, select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .58rem .7rem;
}
textarea { min-height: 88px; resize: vertical; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .7rem; }

.btn, .ghost, .danger {
  border: none;
  border-radius: 10px;
  padding: .58rem .85rem;
  font-weight: 650;
}
.btn {
  background: linear-gradient(90deg, var(--gold), #f08a6b);
  color: #2a1608;
}
.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.danger { background: rgba(251, 113, 133, .16); color: #fecdd3; border: 1px solid rgba(251,113,133,.3); }
.btn:disabled, .ghost:disabled { opacity: .5; cursor: not-allowed; }
a.btn, a.ghost { display: inline-block; text-decoration: none; text-align: center; }
.client-download { display: block; width: 100%; }
.auth-box a:not(.btn) { color: var(--gold-2); }

.badge {
  display: inline-flex; align-items: center;
  padding: .1rem .45rem; border-radius: 999px;
  font-size: .7rem; border: 1px solid var(--border); color: var(--gold-2);
  background: rgba(232, 184, 109, .08);
}
.badge.ink { color: #fecdd3; border-color: rgba(255,90,122,.35); }
.badge.ok { color: #bbf7d0; border-color: rgba(52,211,153,.35); }
.badge.warn { color: #fde68a; }

.split-3 {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(340px, 1.2fr) minmax(280px, .9fr);
  gap: .8rem;
  align-items: start;
}
.col { min-width: 0; }
.col .panel { padding: .85rem; }
.col h2 { font-size: .92rem; color: var(--gold-2); margin-bottom: .7rem; }

.shot-list { display: grid; gap: .55rem; max-height: calc(100vh - 210px); overflow: auto; padding-right: .2rem; }
.shot {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 12px;
  padding: .7rem;
  cursor: pointer;
}
.shot.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,184,109,.25); }
.shot .meta { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.thumb {
  width: 100%; aspect-ratio: 9/12; object-fit: cover; border-radius: 8px;
  background: #0e0c12; margin-top: .45rem;
}

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.asset {
  border: 1px solid var(--border); border-radius: 12px; padding: .75rem; background: var(--bg);
  cursor: pointer;
}
.asset.selected { border-color: var(--gold); }
.asset img { width: 100%; border-radius: 8px; margin: .4rem 0; background: #0e0c12; }
.asset img.sfx-thumb { background: #f3efe6; object-fit: contain; aspect-ratio: 16/9; }
.kind { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }

.canvas-work {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: .75rem;
  min-height: 72vh;
}
.tool-col, .layer-col { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: .8rem; }
.stage-wrap {
  background: #07060a;
  border: 1px solid var(--border);
  border-radius: 16px;
  min-height: 72vh;
  position: relative;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: 1rem;
}
#stage {
  position: relative;
  width: min(520px, 100%);
  background: #111;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
#stage img { width: 100%; border-radius: 8px; }
.pin {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: white; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(255,90,122,.25);
  cursor: pointer;
}
.safe-zone {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  border: 1.5px dashed rgba(120, 220, 180, 0.55);
  pointer-events: none;
  box-sizing: border-box;
}
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .4rem 0 .7rem; }
.preset-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .55rem .6rem;
  cursor: pointer;
  background: #121018;
}
.preset-card.active { border-color: var(--gold-2); box-shadow: 0 0 0 1px rgba(255, 214, 160, .35); }
.preset-thumb { height: 42px; border-radius: 8px; margin-bottom: .4rem; }
.preset-card h4 { margin: 0 0 .2rem; font-size: .85rem; }
.preset-card p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.35; }
.palette-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.swatch { display: inline-flex; align-items: center; gap: .35rem; font-size: 11px; color: var(--muted); }
.swatch i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(255,255,255,.25); }
.bubble-box, .sfx-box {
  position: absolute; border: 1.5px dashed rgba(255,255,255,.55);
  color: #111; background: rgba(255,255,255,.92); border-radius: 18px;
  padding: .35rem .5rem; font-size: 12px; line-height: 1.35;
  pointer-events: none;
}
.sfx-box {
  background: transparent; color: #ffe08a; border: none;
  font-weight: 900; font-size: 28px; text-shadow: 0 4px 0 #7a1d2b;
  transform: rotate(-8deg);
  transform-origin: center;
  white-space: nowrap;
}
.system-box {
  position: absolute;
  border: 1.5px solid rgba(103, 232, 249, .92);
  background: linear-gradient(180deg, rgba(8, 47, 73, .72), rgba(14, 116, 144, .55));
  color: #ecfeff;
  border-radius: 10px;
  padding: 15%;
  font-size: 2.6cqw;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(34, 211, 238, .55), inset 0 0 10px rgba(103, 232, 249, .28);
}
.system-box strong {
  display: block;
  font-size: 2.4cqw;
  letter-spacing: .08em;
  color: #a5f3fc;
  margin-bottom: .15rem;
}
.progress-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  min-width: 72px;
}
.progress-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f08a6b);
}
.daily-row { cursor: pointer; }
.daily-row td { vertical-align: middle; }
.font-sample {
  font-size: 1.55rem;
  line-height: 1.2;
  margin: .45rem 0 .2rem;
  color: var(--gold-2);
}
.sfx-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: contain;
  border-radius: 8px;
  background: #f3efe6;
  margin: .4rem 0;
}
.layer-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .35rem; border-bottom: 1px solid var(--border); font-size: .82rem;
}
.tools { display: grid; gap: .4rem; }
.tools button { text-align: left; }

.table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.table th, .table td { border-bottom: 1px solid var(--border); padding: .5rem; text-align: left; }
.status { margin-top: .6rem; font-size: .82rem; color: var(--muted); }
.status.err { color: var(--err); }
.status.ok { color: var(--ok); }

.rule { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.board-shell {
  margin-top: .8rem;
  background: #07060a;
  border: 1px solid var(--border);
  border-radius: 16px;
  min-height: 68vh;
  overflow: hidden;
  position: relative;
}
.board-hint { position: absolute; top: .6rem; left: 1rem; z-index: 2; }
.board-viewport { width: 100%; height: 68vh; overflow: hidden; cursor: grab; }
.board-viewport.dragging { cursor: grabbing; }
.board-world { position: relative; width: 4200px; height: 2400px; transform-origin: 0 0; }
.board-panel {
  position: absolute;
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .55rem;
}
.board-panel.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(232,184,109,.35); }
.board-panel img { width: 100%; border-radius: 8px; background: #111; }
.review-desk-shell {
  margin-top: .8rem;
  background: #07060a;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.review-desk-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid var(--border);
  background: #0d0b12;
}
.review-desk-toolbar input[type="range"] { width: 160px; accent-color: #c0392b; }
.review-desk {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 280px;
  min-height: 72vh;
}
.review-strip, .review-ai-sidebar {
  overflow: auto;
  max-height: 72vh;
  padding: .7rem;
  background: #0b0910;
  border-right: 1px solid var(--border);
}
.review-ai-sidebar { border-right: 0; border-left: 1px solid var(--border); }
.review-strip-card, .review-ai-item, .review-pin-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .45rem;
  margin: .4rem 0;
  color: inherit;
  cursor: pointer;
}
.review-strip-card.active, .review-ai-item:hover, .review-pin-item:hover { border-color: #c0392b; }
.review-strip-card img { width: 100%; border-radius: 6px; display: block; background: #111; }
.review-strip.grid #review-strip-list { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.review-canvas-viewport {
  position: relative;
  overflow: hidden;
  background: #111014;
  cursor: grab;
  min-height: 72vh;
}
.review-canvas-viewport.dragging, .review-canvas-viewport.space { cursor: grabbing; }
.review-canvas-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.review-canvas-world img { display: block; width: 720px; max-width: none; background: #1a1814; }
.review-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.review-overlay .mark { fill: none; stroke: #c0392b; stroke-width: 0.008; }
.review-overlay .mark.fill { fill: rgba(192,57,43,.12); }
.review-pin {
  fill: #c0392b;
  stroke: #fff8f0;
  stroke-width: 0.004;
}
.review-pin-num { fill: #fff8f0; font-size: 0.045px; font-family: inherit; }
.review-ai-item.warn { border-color: rgba(232,184,109,.4); }
.review-ai-item.error { border-color: rgba(192,57,43,.55); }
#review-workflow-chip { color: #e8b86d; }
.helper-lamp {
  text-decoration: none;
  padding: .42rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: .74rem;
  color: var(--text);
  background: rgba(251, 113, 133, .08);
}
.helper-lamp.on {
  background: rgba(52, 211, 153, .12);
  border-color: rgba(52, 211, 153, .35);
  color: #bbf7d0;
}
.badge.refine { color: #99f6e4; border-color: rgba(94, 234, 212, .35); }
.webcanvas-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 4, 10, .72);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.webcanvas-dialog {
  width: min(980px, 100%);
  max-height: 94vh;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow);
}
.webcanvas-dialog h2 { font-size: 1rem; color: var(--gold-2); }
.webcanvas-shell { display: grid; gap: .65rem; margin-top: .7rem; }
.webcanvas-tools, .webcanvas-layers { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.webcanvas-stage {
  background: #0a0810;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: auto;
  max-height: 64vh;
}
.letter-work {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: .75rem;
  align-items: start;
}
#lettering-strip { display: grid; gap: .4rem; }
.letter-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .65rem;
}
.letter-panel.active { border-color: var(--gold); }
.letter-stage {
  position: relative;
  width: min(420px, 100%);
  min-height: 320px;
  margin: .45rem auto 0;
  background: #0a0810;
  border-radius: 10px;
  overflow: hidden;
  container-type: inline-size;
}
.letter-stage > img { width: 100%; display: block; border-radius: 10px; }
.letter-behind, .letter-front {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.letter-behind { z-index: 2; }
.letter-front { z-index: 6; }
.letter-stage .safe-zone {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  border: 1px dashed rgba(232, 184, 109, .4);
  pointer-events: none;
  z-index: 4;
  box-sizing: border-box;
}
.speed-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.letter-balloon-asset {
  position: absolute;
  z-index: 4;
  cursor: grab;
  pointer-events: auto;
  box-sizing: border-box;
}
.letter-balloon-asset .letter-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.letter-dialog-text { background: transparent; border-color: transparent; box-shadow: none; z-index: 6; }
.letter-nameplate {
  position: absolute;
  z-index: 7;
  padding: 4px 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  border: 1px solid #67e8f9;
  border-radius: 4px;
  font-size: 12px;
  cursor: grab;
}
.clip-to-below { overflow: hidden; }
.alpha-lock { outline: 1px dashed rgba(251, 191, 36, 0.4); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.csp-xform {
  position: absolute;
  z-index: 20;
  border: 1px dashed #38bdf8;
  pointer-events: none;
  box-sizing: border-box;
}
.csp-xform-h {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #38bdf8;
  border: 1px solid #0f172a;
  pointer-events: auto;
  cursor: nwse-resize;
}
.csp-xform-h.nw { left: -4px; top: -4px; }
.csp-xform-h.ne { right: -4px; top: -4px; cursor: nesw-resize; }
.csp-xform-h.sw { left: -4px; bottom: -4px; cursor: nesw-resize; }
.csp-xform-h.se { right: -4px; bottom: -4px; }
.csp-xform-h.rotate { left: 50%; top: -18px; margin-left: -4px; border-radius: 50%; cursor: grab; background: #fbbf24; }
.csp-xform-h.skew { right: -4px; top: 50%; margin-top: -4px; cursor: ew-resize; background: #a78bfa; }
.csp-dialog { border: 1px solid #333; background: #2a2a2a; color: #eee; padding: 12px 16px; }
.csp-dialog label { display: block; margin: 6px 0; }
.csp-check { display: inline-flex; align-items: center; gap: 4px; color: #ddd; font-size: 12px; }
.csp-speed-tools, .csp-text-props { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.csp-speed-tools button { background: #3a3a3a; border: 1px solid #111; color: #eee; padding: 4px 6px; }
.letter-balloon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #1a120c;
  background: #fffef8;
  border: 2px solid #1a120c;
  border-radius: 48% / 42%;
  padding: 15%;
  font-size: max(13px, 2.9cqw);
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-family: "Noto Sans SC", "ZCOOL QingKe HuangYou", sans-serif;
  cursor: grab;
  box-shadow: 0 5px 0 rgba(0,0,0,.14);
  box-sizing: border-box;
}
.letter-balloon.kind-thought { border-radius: 50%; background: #f8fafc; border-style: dashed; }
.letter-balloon.kind-shout { border-radius: 8px; transform: rotate(-2deg); font-weight: 800; }
.letter-balloon.kind-narration {
  border-radius: 48% / 42%;
  background: #fffef8;
  color: #1a120c;
  font-style: italic;
}
.letter-balloon.kind-system {
  border-radius: 12px;
  background: rgba(14,116,144,.88);
  color: #ecfeff;
  border-color: #67e8f9;
}
.letter-balloon.vector {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.letter-balloon.kind-narration.vector { color: #1a120c; }
.letter-balloon.kind-system.vector { color: #ecfeff; }
.balloon-outline { fill: #fffef8; stroke: #1a120c; stroke-width: 0.01; }
.balloon-outline.kind-thought { fill: #f8fafc; stroke-dasharray: 0.02 0.014; }
.balloon-outline.kind-shout { fill: #fff7ed; }
.balloon-outline.kind-narration { fill: #fffef8; stroke: #1a120c; }
.balloon-outline.kind-system { fill: rgba(14,116,144,.88); stroke: #67e8f9; }
.balloon-tail-poly { fill: #fffef8; stroke: none; }
.letter-panel.ground-page { background: #f3eee6; }
.letter-panel.ground-halftone { background: #f7f1e8; }
.letter-panel.ground-void { background: #0a0a0c; }
.letter-panel.ground-night { background: #10121c; }
.letter-panel.overlap { position: relative; z-index: 2; }
.letter-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4; overflow: visible;
}
.balloon-tail { stroke: #1a120c; stroke-width: 0.012; }
.tail-handle {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--cyan); transform: translate(-50%,-50%); z-index: 6; cursor: crosshair;
}
.tail-handle.node { border-radius: 2px; background: #67e8f9; width: 10px; height: 10px; }
.tail-handle.tip { width: 14px; height: 14px; }
.letter-sfx {
  position: absolute; z-index: 6; font-weight: 900; font-size: 3.4cqw;
  white-space: nowrap; pointer-events: none; transform-origin: center;
  text-shadow: 0 4px 0 #7a1d2b;
}
.letter-sfx.review { pointer-events: auto; cursor: grab; }
.letter-stage.review { overflow: visible; }
.letter-layer-item {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  padding: .4rem 0; border-bottom: 1px solid var(--border);
}
.letter-balloon.kind-memory { background: rgba(255,254,248,.55); border: none; font-style: italic; }
.letter-sfx.behind { z-index: 2; opacity: .92; }
.letter-sfx.burst { letter-spacing: .04em; filter: drop-shadow(0 0 6px rgba(255,208,80,.45)); }
.char-mask {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  border-radius: 42% 42% 36% 36%;
}
.char-mask img {
  position: absolute;
  max-width: none;
  display: block;
  border-radius: 0;
}
.letter-gutter-gap { background: transparent; border-radius: 0; }
.letter-gutter-gap.ground-page { background: #f3eee6; }
.letter-gutter-gap.ground-halftone { background: repeating-radial-gradient(circle at 2px 2px, #e4dcd0 0 1px, #f7f1e8 1px 8px); }
.letter-gutter-gap.ground-void { background: #0a0a0c; }
.letter-gutter-gap.ground-night { background: #10121c; }
.webcanvas-view {
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  background:
    linear-gradient(45deg, #1b1722 25%, transparent 25%),
    linear-gradient(-45deg, #1b1722 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1b1722 75%),
    linear-gradient(-45deg, transparent 75%, #1b1722 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
  cursor: crosshair;
}
.hidden { display: none !important; }
.mt { margin-top: .7rem; }
.flex { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.space { justify-content: space-between; }

@media (max-width: 1100px) {
  .split-3, .canvas-work, .letter-work, .row, .row-3 { grid-template-columns: 1fr; }
  .shot-list { max-height: none; }
}

body[data-bench="studio"] .wrap { max-width: none; padding: 0; }
body[data-bench="studio"] .nav { background: #2f2f2f; border-color: #1f1f1f; }
body[data-bench="studio"] {
  background: #4a4a4a;
}
.csp-workspace {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 118px);
  background: #3a3a3a;
  color: #e8e8e8;
  font-size: 12px;
}
.csp-menubar, .csp-commandbar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #2d2d2d;
  border-bottom: 1px solid #1a1a1a;
  padding: 0 8px;
  min-height: 28px;
}
.csp-menu {
  background: transparent;
  border: none;
  color: #ddd;
  padding: 4px 10px;
  border-radius: 0;
  font-weight: 600;
}
.csp-menu:hover, .csp-menu.ai { background: #4a90d9; color: #fff; }
.csp-menu-title { margin-left: auto; color: #9ad; font-size: 11px; }
.csp-commandbar button, .csp-commandbar label, .csp-viewbar button {
  background: #3f3f3f;
  border: 1px solid #222;
  color: #eee;
  border-radius: 3px;
  padding: 3px 8px;
  font-weight: 600;
}
.csp-commandbar label { display: flex; align-items: center; gap: 6px; margin: 0; color: #ccc; }
.csp-commandbar input[type="range"], .csp-subtool input[type="range"] { width: 90px; padding: 0; }
.csp-commandbar select, .csp-viewbar select {
  background: #2a2a2a;
  border: 1px solid #111;
  color: #eee;
  border-radius: 3px;
  padding: 2px 6px;
  width: auto;
}
.csp-sep { width: 1px; height: 18px; background: #111; margin: 0 6px; }
.csp-body {
  display: grid;
  grid-template-columns: 48px 168px minmax(0, 1fr) 260px;
  flex: 1;
  min-height: 0;
}
.csp-toolrail {
  background: #2b2b2b;
  border-right: 1px solid #111;
  display: flex;
  flex-direction: column;
  padding: 4px 3px;
  gap: 2px;
}
.csp-toolrail button {
  width: 40px;
  height: 28px;
  border: 1px solid transparent;
  background: #333;
  color: #ddd;
  border-radius: 3px;
  font-size: 11px;
  padding: 0;
}
.csp-toolrail button.active, .csp-sub.active {
  background: #4a90d9;
  color: #fff;
  border-color: #2d6cb5;
}
.csp-subtool {
  background: #323232;
  border-right: 1px solid #111;
  padding: 8px;
  overflow: auto;
}
.csp-subtool h3 { color: #9cf; font-size: 12px; margin-bottom: 6px; }
.csp-sub { display: block; width: 100%; text-align: left; margin-bottom: 3px; background: #3a3a3a; border: 1px solid #222; color: #eee; padding: 4px 6px; }
.csp-viewport {
  background:
    linear-gradient(45deg, #4e4e4e 25%, #555 25%, #555 50%, #4e4e4e 50%, #4e4e4e 75%, #555 75%, #555);
  background-size: 16px 16px;
  overflow: hidden;
  position: relative;
}
.csp-viewbar {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 5;
  display: flex;
  gap: 4px;
  align-items: center;
}
.csp-paper {
  width: min(720px, 92%);
  margin: 48px auto 32px;
  transform-origin: top center;
  background: #d8d2c8;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  min-height: 70vh;
}
.csp-paper .letter-stage, .csp-paper #stage { background: #f3eee6; }
.csp-paint-host {
  position: absolute;
  inset: 48px 8% 24px;
  z-index: 6;
  background: rgba(20,20,20,.55);
  padding: 8px;
}
.csp-docks {
  background: #2f2f2f;
  border-left: 1px solid #111;
  overflow: auto;
}
.csp-dock { border-bottom: 1px solid #111; padding: 8px; }
.csp-dock h3 { color: #ccc; font-size: 11px; letter-spacing: .06em; margin-bottom: 6px; }
.csp-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.csp-swatches button { height: 22px; border: 1px solid #111; border-radius: 2px; padding: 0; }
.csp-layer-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.csp-layer-toolbar button { background: #3a3a3a; border: 1px solid #111; color: #eee; padding: 2px 6px; }
.csp-layer-row {
  display: grid;
  grid-template-columns: 22px 22px 52px 1fr 36px;
  gap: 4px;
  align-items: center;
  padding: 3px 2px;
  border-bottom: 1px solid #222;
  cursor: pointer;
}
.csp-layer-row.active { background: #3d5a80; }
.csp-layer-row.folder { color: #9ad; }
.csp-eye, .csp-lock { background: transparent; border: none; color: #bbb; padding: 0; width: 22px; }
.csp-kind { font-size: 10px; color: #8cf; }
.csp-name { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csp-ai-dock textarea { min-height: 64px; background: #1f1f1f; border-color: #111; }
.csp-ai-actions { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.csp-ai-actions button { background: #3a3a3a; border: 1px solid #111; color: #eee; padding: 5px 8px; text-align: left; }
.csp-ai-dock.collapsed { display: none; }
body[data-bench="studio"] .csp-commandbar .status { color: #9f9; margin: 0; }
.drop-zone {
  border: 1px dashed var(--border);
  padding: 12px;
  text-align: center;
  color: var(--muted);
  border-radius: 6px;
}
.drop-zone.active { border-color: var(--gold-2); background: rgba(243, 201, 139, 0.08); }
.asset.deprecated { opacity: 0.45; }
#csp-material-drawer select, #csp-material-drawer button {
  width: 100%;
  margin-top: 6px;
  background: #3a3a3a;
  border: 1px solid #111;
  color: #eee;
  padding: 4px 6px;
}

@media (max-width: 1100px) {
  .csp-body { grid-template-columns: 44px 1fr; }
  .csp-subtool, .csp-docks { display: none; }
}