:root {
  color-scheme: dark;
  --bg: #06101a;
  --panel: #0b1723;
  --panel-2: #0f1e2c;
  --panel-3: #132638;
  --line: rgba(147, 177, 201, .17);
  --line-strong: rgba(156, 199, 229, .28);
  --text: #eff6fb;
  --muted: #7890a4;
  --accent: #5cf2c2;
  --accent-2: #59a7ff;
  --danger: #ff6d7a;
  --shadow: 0 26px 60px rgba(0,0,0,.34);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--text); }
body { overflow: hidden; }
button, input, select { font: inherit; }
button { color: inherit; }
button, label.dropzone { -webkit-tap-highlight-color: transparent; }
.app-shell { min-height: 100vh; background:
  radial-gradient(circle at 58% -20%, rgba(74,132,187,.17), transparent 34%),
  radial-gradient(circle at 2% 100%, rgba(52,243,184,.08), transparent 28%), var(--bg); }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); background: rgba(6,16,26,.86); backdrop-filter: blur(20px); }
.brand-wrap { display:flex; align-items:center; gap:11px; }
.brand-mark { width: 38px; height: 38px; border:1px solid rgba(92,242,194,.55); border-radius: 11px; display:grid; place-items:center; color: var(--accent); font-weight:900; letter-spacing:-2px; box-shadow: inset 0 0 24px rgba(92,242,194,.09); }
.brand { font-size:15px; font-weight:850; letter-spacing:.12em; }
.brand-sub { font-size:9px; color:var(--muted); letter-spacing:.13em; margin-top:2px; }
.top-actions { display:flex; gap:8px; }
.workspace-grid { height: calc(100vh - 68px); display:grid; grid-template-columns: 292px minmax(0, 1fr) 326px; }
.sidebar { overflow-y:auto; background: rgba(9,22,34,.82); scrollbar-width:thin; scrollbar-color: var(--panel-3) transparent; }
.left-panel { border-right:1px solid var(--line); }
.right-panel { border-left:1px solid var(--line); }
.panel-section { padding:18px; border-bottom:1px solid var(--line); }
.eyebrow { font-size:9px; font-weight:800; color:#6f8aa2; letter-spacing:.17em; margin-bottom:5px; }
h2 { font-size:15px; margin:0; letter-spacing:-.02em; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border:1px solid var(--line); border-radius:10px; background:#07131f; }
.segmented button, .inspector-tabs button { border:0; background:transparent; color:#758fa5; cursor:pointer; font-weight:800; }
.segmented button { padding:8px 4px; border-radius:7px; font-size:11px; }
.segmented button.active { color:#06110e; background:var(--accent); box-shadow:0 0 20px rgba(92,242,194,.14); }
.game-note { color:#71889a; font-size:10px; line-height:1.45; margin-top:10px; min-height:28px; }
.dropzone { display:flex; min-height:106px; align-items:center; justify-content:center; gap:12px; border:1px dashed rgba(104,159,194,.35); border-radius:12px; background:linear-gradient(145deg, rgba(17,37,54,.78), rgba(6,17,28,.8)); cursor:pointer; text-align:left; padding:14px; transition:.2s ease; }
.dropzone:hover, .dropzone.dragover { border-color: var(--accent); transform:translateY(-1px); background:rgba(20,46,59,.9); }
.dropzone.compact { min-height:72px; }
.dropzone b { font-size:11px; }
.dropzone small { color:var(--muted); font-size:9px; line-height:1.45; }
.drop-icon { color:var(--accent); font-size:21px; }
.drop-icon.large { font-size:30px; }
.status-dot { width:8px; height:8px; background:#516273; border-radius:999px; box-shadow:0 0 0 3px rgba(255,255,255,.03); display:inline-block; }
.status-dot.green { background:var(--accent); box-shadow:0 0 12px rgba(92,242,194,.55); }
.row-gap { display:grid; gap:10px; margin-top:10px; }
.ghost-btn, .primary-btn, .icon-btn, .tool-grid button { border:1px solid var(--line); background:#0b1926; cursor:pointer; border-radius:9px; transition:.15s ease; }
.ghost-btn { padding:8px 11px; font-size:10px; font-weight:750; color:#b3c6d4; }
.ghost-btn:hover, .icon-btn:hover, .tool-grid button:hover { border-color:var(--line-strong); background:#122536; }
.ghost-btn.full, .primary-btn.full { width:100%; }
.ghost-btn.mini { padding:6px 8px; font-size:9px; }
.primary-btn { padding:9px 13px; background:linear-gradient(135deg, #49e4b2, #69f0cc); color:#05130f; border:0; border-radius:9px; cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.07em; box-shadow:0 8px 24px rgba(92,242,194,.12); }
.primary-btn:hover { filter:brightness(1.06); transform:translateY(-1px); }
.icon-btn { width:31px; height:31px; display:grid; place-items:center; padding:0; color:#9db2c3; }
.icon-btn.danger { color:var(--danger); background:rgba(10,20,30,.76); }
.switch-row { display:flex !important; align-items:center; justify-content:space-between; font-size:10px; color:#a8bac8; gap:12px; }
.switch-row input { accent-color:var(--accent); }
.control-stack { display:grid; gap:12px; margin-top:13px; }
.control-stack label, .game-fields label { display:grid; gap:6px; font-size:10px; color:#8ca1b1; }
.label-line { display:flex; align-items:center; justify-content:space-between; }
.label-line b { color:#dce8ef; }
select, input[type="text"], input[type="number"], input:not([type]) { width:100%; background:#081521; border:1px solid var(--line); color:#d9e5ec; border-radius:8px; padding:8px 9px; outline:none; font-size:10px; }
select:focus, input:focus { border-color:rgba(92,242,194,.5); box-shadow:0 0 0 2px rgba(92,242,194,.07); }
input[type="range"] { accent-color:var(--accent); width:100%; }
.tool-section { padding-bottom:22px; }
.tool-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.tool-grid button { min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; font-size:16px; }
.tool-grid span { font-size:8px; color:#718a9f; }
.badge { border:1px solid var(--line-strong); color:#9db7c9; font-size:8px; font-weight:850; letter-spacing:.08em; padding:4px 6px; border-radius:999px; }
.badge.ai { color:var(--accent); border-color:rgba(92,242,194,.3); background:rgba(92,242,194,.06); }
.badge.ready { color:#86f0cc; border-color:rgba(92,242,194,.25); }
.concept-preview-wrap { position:relative; margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:#050d15; }
.concept-preview-wrap img { display:block; width:100%; height:102px; object-fit:cover; opacity:.9; }
.concept-preview-wrap .icon-btn { position:absolute; right:7px; top:7px; }
.hidden { display:none !important; }

.center-stage { min-width:0; display:flex; flex-direction:column; background:rgba(4,12,20,.45); }
.canvas-toolbar { height:44px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid var(--line); background:rgba(8,19,29,.7); }
.canvas-meta, .canvas-controls { display:flex; align-items:center; gap:9px; font-size:9px; color:#9bb0bf; }
.muted { color:#60798e; }
.canvas-viewport { position:relative; flex:1; overflow:hidden; display:grid; place-items:center; background:
  radial-gradient(circle at center, rgba(44,83,110,.18), transparent 46%),
  linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
  linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size:auto, 32px 32px, 32px 32px; }
.canvas-checker { position:relative; width:min(76vh, 70vw); aspect-ratio:1; transform-origin:center; transition:transform .12s ease; box-shadow:var(--shadow); border:1px solid rgba(159,195,220,.16); background-color:#101b24; background-image: linear-gradient(45deg,#15232f 25%,transparent 25%), linear-gradient(-45deg,#15232f 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#15232f 75%), linear-gradient(-45deg,transparent 75%,#15232f 75%); background-size:22px 22px; background-position:0 0, 0 11px, 11px -11px, -11px 0px; }
#editorCanvas { width:100%; height:100%; display:block; cursor:crosshair; }
.empty-state { position:absolute; display:grid; place-items:center; text-align:center; gap:7px; max-width:330px; pointer-events:none; }
.empty-state h3 { margin:3px 0 0; font-size:16px; }
.empty-state p { margin:0 0 8px; color:var(--muted); font-size:10px; line-height:1.5; }
.empty-state button { pointer-events:auto; }
.empty-orbit { width:60px; height:60px; border:1px solid rgba(92,242,194,.3); border-radius:50%; position:relative; }
.empty-orbit::before, .empty-orbit::after { content:""; position:absolute; inset:8px -10px; border:1px solid rgba(89,167,255,.2); border-radius:50%; transform:rotate(58deg); }
.empty-orbit::after { transform:rotate(-58deg); }
.statusbar { height:31px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; font-size:9px; border-top:1px solid var(--line); background:#07131f; }
.statusbar > div { display:flex; align-items:center; gap:7px; }

.inspector-tabs { height:44px; display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:4; background:#091622; }
.inspector-tabs button { font-size:9px; letter-spacing:.08em; border-bottom:2px solid transparent; }
.inspector-tabs button.active { color:var(--accent); border-bottom-color:var(--accent); background:rgba(92,242,194,.03); }
.inspector-content { display:none; padding:18px; }
.inspector-content.active { display:block; }
.layer-list { display:grid; gap:6px; }
.layer-row { display:grid; grid-template-columns:28px minmax(0,1fr) 28px; gap:8px; align-items:center; padding:8px; border:1px solid var(--line); border-radius:9px; background:#0b1824; cursor:pointer; }
.layer-row.active { border-color:rgba(92,242,194,.45); background:rgba(20,47,55,.7); }
.layer-thumb { width:28px; height:28px; border-radius:6px; border:1px solid var(--line); background:#142536; display:grid; place-items:center; font-size:10px; font-weight:900; overflow:hidden; }
.layer-thumb img { width:100%; height:100%; object-fit:cover; }
.layer-main { min-width:0; }
.layer-name { font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer-meta { font-size:8px; color:#657f92; margin-top:2px; }
.layer-eye { border:0; background:transparent; color:#71899c; cursor:pointer; }
.divider { height:1px; background:var(--line); margin:14px 0; }
.empty-inspector { color:#6b8498; font-size:10px; line-height:1.55; }
.layer-inspector { display:grid; gap:10px; }
.layer-inspector label { display:grid; gap:5px; font-size:9px; color:#7e96aa; }
.dual { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.inline-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.danger-btn { background:rgba(255,109,122,.08); color:#ff9ba5; border:1px solid rgba(255,109,122,.2); border-radius:8px; padding:8px; font-size:9px; cursor:pointer; }
.analysis-empty { padding:26px 8px; text-align:center; font-size:10px; color:#678096; border:1px dashed var(--line); border-radius:10px; margin-top:13px; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:13px; }
.metric { border:1px solid var(--line); background:#0a1824; border-radius:9px; padding:9px; }
.metric span { display:block; font-size:7px; color:#657f94; letter-spacing:.08em; }
.metric b { display:block; font-size:14px; margin-top:3px; }
.subhead { font-size:9px; font-weight:800; color:#8ea5b7; margin:16px 0 7px; }
.palette-row { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.palette-swatch { aspect-ratio:1; border-radius:7px; border:1px solid rgba(255,255,255,.13); position:relative; cursor:pointer; }
.palette-swatch::after { content:attr(data-hex); position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); font-size:6px; color:#5f788c; opacity:0; transition:.15s; pointer-events:none; }
.palette-swatch:hover::after { opacity:1; }
.tag-row { display:flex; flex-wrap:wrap; gap:5px; }
.tag { padding:5px 7px; font-size:8px; border-radius:999px; background:#102334; color:#8facbf; border:1px solid var(--line); }
.layout-map { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:4px; background:#07131e; border:1px solid var(--line); border-radius:8px; }
.layout-cell { aspect-ratio:1.55; border-radius:4px; }
.export-card { border:1px solid rgba(92,242,194,.18); background:linear-gradient(145deg, rgba(20,49,52,.44), rgba(9,25,37,.7)); border-radius:11px; padding:12px; margin:12px 0; }
.export-title { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:900; }
.export-card p { font-size:9px; color:#7590a2; line-height:1.5; margin:7px 0 0; }
.game-fields { display:grid; gap:10px; padding:12px; margin-top:12px; border:1px solid var(--line); border-radius:10px; background:#081521; }
.export-main { margin-top:13px; }
.export-note { margin-top:10px; font-size:8px; color:#637d90; line-height:1.5; }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 16px); opacity:0; pointer-events:none; background:#102436; border:1px solid var(--line-strong); color:#dcebf4; padding:9px 12px; border-radius:9px; font-size:10px; box-shadow:var(--shadow); transition:.22s ease; z-index:99; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 1120px) { .workspace-grid { grid-template-columns:260px minmax(0,1fr) 300px; } .canvas-checker { width:min(68vh, 62vw); } }
@media (max-width: 860px) { body { overflow:auto; } .workspace-grid { height:auto; grid-template-columns:1fr; } .sidebar { overflow:visible; } .center-stage { min-height:72vh; order:-1; } .left-panel,.right-panel { border:0; } .canvas-checker { width:min(88vw, 620px); } }
.layer-empty,.analysis-empty,.empty-inspector{border:1px dashed var(--line);border-radius:10px;padding:18px;color:var(--muted);font-size:10px;line-height:1.55;text-align:center}.layer-vis,.layer-more{border:0;background:transparent;color:#7890a4;cursor:pointer}.layer-meta{min-width:0;display:grid;gap:2px}.layer-meta b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-meta small{font-size:8px;color:#647d91}.layer-inspector{display:grid;gap:10px}.layer-inspector label{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;color:#8299aa;font-size:9px}.layer-inspector input{min-width:0}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.divider{height:1px;background:var(--line);margin:16px 0}.subhead{font-size:9px;color:#7890a4;letter-spacing:.11em;text-transform:uppercase;margin:15px 0 8px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.metric{border:1px solid var(--line);border-radius:9px;padding:10px;background:#0b1824}.metric span{display:block;color:#6f899d;font-size:7px;letter-spacing:.08em}.metric b{display:block;font-size:16px;margin-top:4px}.palette-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.swatch{aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:var(--sw);cursor:pointer}.tag-row{display:flex;flex-wrap:wrap;gap:5px}.tag{font-size:8px;border:1px solid var(--line-strong);padding:5px 7px;border-radius:999px;color:#9fb6c6}.layout-map{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.layout-map i{height:44px;border-radius:6px;border:1px solid var(--line)}.export-card{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,#0e2030,#0a1723)}.export-title{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:850}.export-card p,.export-note{font-size:9px;color:var(--muted);line-height:1.55}.game-fields{display:grid;gap:10px;margin-top:12px}.game-fields label{display:grid;gap:6px;color:#8ca1b1;font-size:10px}.export-main{margin-top:14px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);padding:10px 14px;border-radius:9px;background:#102638;border:1px solid var(--line-strong);font-size:10px;opacity:0;pointer-events:none;transition:.2s ease;box-shadow:var(--shadow);z-index:100}.toast.show{opacity:1;transform:translate(-50%,0)}.toast[data-kind="error"]{border-color:rgba(255,109,122,.45);color:#ffb7be}.sticky-title{position:relative}.status-dot.green{background:var(--accent)}
@media (max-width: 1100px){body{overflow:auto}.workspace-grid{height:auto;grid-template-columns:250px minmax(520px,1fr)}.right-panel{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:160px 1fr}.inspector-tabs{height:auto;grid-template-columns:1fr;align-content:start}.inspector-content{min-height:300px}.center-stage{min-height:720px}}
@media (max-width: 760px){.topbar{position:sticky;top:0;z-index:10}.workspace-grid{display:block}.sidebar,.center-stage{border:0}.center-stage{min-height:70vh}.right-panel{display:block}.inspector-tabs{grid-template-columns:repeat(3,1fr);height:44px}.canvas-checker{width:92vw}.brand-sub{display:none}.top-actions .ghost-btn{display:none}}

/* PitCanvas AI generation modes */
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.mode-switch button{min-height:60px;padding:9px 8px;border:1px solid var(--line);border-radius:9px;background:#091722;color:#7890a4;cursor:pointer;text-align:left;transition:.16s ease}.mode-switch button:hover{border-color:var(--line-strong);background:#0d1d2b}.mode-switch button.active{color:#eaf6ff;border-color:rgba(47,139,255,.8);background:linear-gradient(145deg,rgba(36,100,255,.24),rgba(10,31,49,.94));box-shadow:inset 0 0 0 1px rgba(70,177,255,.12)}.mode-switch b{display:block;font-size:10px;letter-spacing:.07em}.mode-switch small{display:block;margin-top:5px;font-size:7px;line-height:1.35;color:#7690a3}.mode-switch button.active small{color:#9bc9ea}

/* QA / Cloudflare feedback */
:root { --accent:#2b8cff; --accent-2:#6758ff; --cyan:#12c8ff; }
.brand-mark { border-color:rgba(43,140,255,.55); color:var(--accent); background:linear-gradient(145deg,rgba(43,140,255,.12),rgba(18,200,255,.03)); }
.brand-mark svg{width:28px;height:28px;display:block;filter:drop-shadow(0 0 12px rgba(43,140,255,.22))}
.qa-chip{font-size:8px;vertical-align:2px;padding:2px 5px;border:1px solid rgba(43,140,255,.45);border-radius:999px;color:#8cc9ff;background:rgba(43,140,255,.09);letter-spacing:.12em}
.feedback-launch{border-color:rgba(43,140,255,.32);color:#a7d2ff;background:linear-gradient(180deg,rgba(43,140,255,.11),rgba(43,140,255,.045))}
.feedback-launch:hover{border-color:rgba(43,140,255,.65);box-shadow:0 0 0 3px rgba(43,140,255,.08)}
.modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(1,7,13,.74);backdrop-filter:blur(12px);display:grid;place-items:center;padding:22px}
.modal-backdrop.hidden{display:none}
.feedback-modal{width:min(760px,96vw);max-height:92vh;overflow:auto;border:1px solid rgba(131,176,217,.24);border-radius:18px;background:linear-gradient(180deg,#0d1926,#08131d);box-shadow:0 35px 100px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.025) inset}
.feedback-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px 12px;border-bottom:1px solid var(--line)}
.feedback-head h2{font-size:19px}
.feedback-help{margin:14px 22px 0;color:#93a8ba;font-size:12px;line-height:1.6}
.feedback-form{padding:18px 22px 22px;display:grid;gap:14px}
.feedback-form label{display:grid;gap:7px;font-size:11px;color:#91a9bd}
.feedback-form input,.feedback-form select,.feedback-form textarea{width:100%;border:1px solid rgba(135,172,202,.2);background:#091521;color:#eaf4fc;border-radius:9px;padding:10px 11px;outline:none}
.feedback-form input:focus,.feedback-form select:focus,.feedback-form textarea:focus{border-color:rgba(43,140,255,.7);box-shadow:0 0 0 3px rgba(43,140,255,.09)}
.feedback-form textarea{min-height:92px;resize:vertical;line-height:1.5}
.feedback-grid.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feedback-context{border:1px solid rgba(135,172,202,.13);padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.018)}
.feedback-context span{display:grid;gap:2px}.feedback-context small{color:#66839a}
.feedback-context-preview{font:10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7f9bb0;background:#06101a;border:1px solid rgba(135,172,202,.12);border-radius:9px;padding:10px 12px;white-space:pre-wrap;max-height:105px;overflow:auto}
.feedback-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:3px}.feedback-actions>div{display:flex;gap:8px}
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
#feedbackStatus[data-state="error"]{color:#ff8792}#feedbackStatus[data-state="ok"]{color:#73e8bd}
@media(max-width:760px){.feedback-grid.two{grid-template-columns:1fr}.feedback-actions{align-items:flex-start;flex-direction:column}.feedback-actions>div{width:100%}.feedback-actions button{flex:1}}

/* Approved workstation layout */
:root{--bg:#090d13;--panel:#111720;--panel-2:#151e2a;--accent:#2b8cff;--accent-2:#5245ff;--text:#e7edf6;--muted:#8794a6;--line:rgba(159,178,207,.15)}
body{overflow:hidden}button,input,select,textarea{font:inherit}button{font-size:11px}button:disabled{opacity:.5;cursor:default;transform:none}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label.dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.app-shell{background:#090d13}.topbar{height:72px;display:grid;grid-template-columns:210px minmax(300px,480px) 1fr;gap:20px;background:#0d121b;padding:0 18px}
.brand{font-size:20px;letter-spacing:-.04em;font-weight:800;font-style:italic}.brand-sub{font-size:9px;letter-spacing:.2em}.brand-mark{border:0;box-shadow:none;background:none;border-radius:0;width:30px}
.brand-mark svg{width:32px;height:32px}.top-actions{justify-content:flex-end;align-items:center;gap:8px}.top-actions .primary-btn{min-width:116px}
.segmented{border:0;background:none;padding:0;gap:5px}.segmented button{text-align:left;background:linear-gradient(120deg,#1b2431,#141b25);border:1px solid var(--line);font-size:12px;padding:8px 14px;border-radius:5px;color:#cdd9e8}
.segmented small{display:block;font-size:8px;color:#8194ad;font-weight:400;margin-top:3px}.segmented button.active{background:linear-gradient(120deg,#202e43,#172539);color:#fff;border-color:#3c6088;box-shadow:inset 0 -3px #2b8cff}.segmented button.active small{color:#afc4de}
.workspace-grid{height:calc(100vh - 72px);grid-template-columns:250px minmax(0,1fr) 280px}.sidebar{background:#10151e}.panel-section{padding:16px 14px}
.eyebrow{color:#8794a6;font-size:9px;letter-spacing:.13em;margin-bottom:6px}h2{font-size:13px;font-weight:700}.game-note{font-size:10px;color:#91a1b6;min-height:0;margin-bottom:12px}
.field{display:grid;gap:7px;font-size:10px;color:#9cadc2;margin-top:12px}.helper{display:block;font-size:10px;line-height:1.5;color:#7e90a9;margin:8px 0 0}
input:not([type]),input[type="text"],input[type="number"],select{font-size:11px;padding:9px 10px;background:#171f2a;border-radius:5px}
.ghost-btn,.icon-btn,.tool-grid button{background:#19212d;border-radius:5px}.ghost-btn{font-size:10px;color:#bdd0e6}.primary-btn{background:linear-gradient(120deg,#2473ff,#228fff);color:white;box-shadow:0 4px 15px rgba(25,102,255,.12);font-size:11px;border-radius:5px;padding:10px 14px}
.dropzone{border-radius:6px;background:#131b26;border-color:#42516a;min-height:82px}.dropzone.compact{min-height:64px;padding:10px}.dropzone small{display:block;font-size:9px;margin-top:4px}.dropzone b{font-size:10px}
.switch-row{font-size:11px}.switch-row input{width:16px;height:16px}.layer-section h2 small{font-size:10px;color:#7289a4;margin-left:6px}
.layer-list{gap:4px}.layer-row{grid-template-columns:22px minmax(0,1fr) 22px 22px;gap:4px;border-radius:5px;padding:6px;background:#141c27}.layer-row.active{background:linear-gradient(120deg,#1750d0,#216eff);border-color:#408aff}
.layer-meta b{font-size:10px}.layer-meta small{font-size:8px}.layer-vis,.layer-more,.layer-lock{border:0;background:none;color:#bbcbe0;cursor:pointer;padding:0;min-height:24px}
.layer-row.active .layer-meta small{color:#b8d4ff}.layer-empty,.empty-inspector p{font-size:11px;color:#758ca6;line-height:1.7}.tool-grid{grid-template-columns:repeat(2,1fr)}.tool-grid button{min-height:42px;flex-direction:row;font-size:16px;gap:12px}.tool-grid span{font-size:10px;color:#becce0}
.center-stage{min-height:0;min-width:0;background:#0b1018}.canvas-toolbar{flex-shrink:0;background:#111822}.canvas-meta{font-size:10px}.preview-note{font-size:9px}.active-badge{border:0;background:#245aff;border-radius:4px;color:#fff}
.canvas-viewport{min-height:190px;flex:1;overflow:auto;background-color:#0b111a;background-image:linear-gradient(90deg,rgba(166,190,226,.07) 1px,transparent 1px),linear-gradient(rgba(166,190,226,.07) 1px,transparent 1px);background-size:24px 24px}
.canvas-checker{width:min(90%,calc(100vh - 420px));max-width:720px;flex-shrink:0;border-color:#2c3747;border-radius:2px;background-color:#101722;background-size:18px 18px}
#editorCanvas{touch-action:none}.empty-state{padding:20px;border-radius:12px;background:rgba(10,17,28,.8)}.empty-orbit{display:grid;place-items:center;border:0;color:#4596ff;font-size:27px;font-weight:900;font-style:italic}
.empty-orbit:before,.empty-orbit:after{display:none}.empty-state p{font-size:11px;line-height:1.7}.statusbar{flex-shrink:0;background:#0f1723;font-size:9px;color:#9cabbe}.statusbar #cursorInfo{color:#7a91ae}
.reference-dock{background:#101720;border-top:1px solid var(--line);flex-shrink:0;padding:13px 15px 15px}.dock-title{display:flex;gap:8px;align-items:center;margin-bottom:12px}.dock-title .badge{font-size:7px;margin-left:auto}.accent-symbol{color:#2b8cff;font-size:18px}
.reference-grid{display:grid;grid-template-columns:1fr 1.13fr 1fr;gap:14px}.reference-source .dropzone{min-height:58px;padding:10px}
.concept-preview-wrap{margin-top:8px;border-radius:5px}.concept-preview-wrap img{height:100px;object-fit:contain}
.reference-source .helper{font-size:9px}.reference-analysis{background:#151f2d;padding:11px;border-radius:6px;min-height:160px}.analysis-empty{font-size:11px;line-height:1.8;color:#8094b1;padding:28px 8px}
.palette-row{display:flex;gap:7px;margin:0 0 12px}.swatch{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:var(--sw);cursor:pointer}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.metric{padding:5px 0;background:none;border:0;border-radius:0}.metric span{font-size:6px;color:#8096b3}.metric b{font-size:14px;margin-top:5px;color:#bcd8ff}
.tag-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:12px}.tag{font-size:6px;border:1px solid var(--line);padding:4px;border-radius:3px;color:#a5b8d1}.layout-map{display:flex;gap:2px;margin-top:9px}.layout-map i{height:9px;flex:1;border-radius:2px}
.mode-switch{gap:5px;margin-top:0}.mode-switch button{min-height:50px;border-radius:5px;padding:8px;background:#172131}.mode-switch button.active{background:#203654;border-color:#3e82ec}.mode-switch b{font-size:9px}.mode-switch small{font-size:8px}
.reference-controls .field{margin:8px 0}.reference-controls .primary-btn{background:linear-gradient(120deg,#4a36ff,#3655ff)}
.inspector-tabs{grid-template-columns:1fr 1fr;background:#111a26}.inspector-content{padding:18px 14px}.layer-inspector{margin-top:16px;display:grid;gap:11px}.layer-inspector label{display:grid;gap:6px;font-size:10px;color:#93a6bf}
.layer-inspector input[type="color"]{width:100%;height:31px;border:1px solid var(--line);padding:3px;background:#171f2a;border-radius:5px}
.layer-inspector .switch-row{display:flex}.inspector-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}.export-card{margin-top:16px;border-radius:6px;background:#172132}
.export-note,.export-card p{font-size:10px;line-height:1.7}.game-fields label{font-size:10px}.feedback-form textarea{font-family:inherit;font-size:12px}
.feedback-form .switch-row input{width:18px;height:18px;flex:0 0 auto}.feedback-context small{display:block;font-size:10px;margin-top:3px}.feedback-actions{font-size:11px}.feedback-actions>span{max-width:400px;line-height:1.5}.toast{font-size:12px}
@media(max-width:1230px) and (min-width:1051px){.topbar{grid-template-columns:185px minmax(260px,1fr) auto;gap:10px}.brand-sub{font-size:8px}.segmented small{display:none}.workspace-grid{grid-template-columns:220px minmax(0,1fr) 252px}.reference-grid{grid-template-columns:1fr 1fr}.reference-controls{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;align-items:center}.reference-controls .helper{display:none}.reference-controls .field{margin:0}.reference-analysis{min-height:140px}.canvas-checker{width:min(90%,calc(100vh - 475px))}.preview-note{display:none}}
@media(max-width:1050px){body{overflow:auto}.topbar{height:auto;min-height:72px;grid-template-columns:190px 1fr;gap:10px;padding:12px 14px}.top-actions{grid-column:1/-1;grid-row:2;justify-content:flex-end}.workspace-grid{height:auto;grid-template-columns:220px minmax(0,1fr)}.center-stage{min-height:780px}.canvas-checker{width:min(90%,450px)}.right-panel{grid-column:1/-1;display:block;border-top:1px solid var(--line)}.inspector-tabs{height:44px;grid-template-columns:1fr 1fr}.inspector-content{min-height:0}.layer-inspector{grid-template-columns:repeat(3,1fr)}.layer-inspector .subhead,.layer-inspector .inspector-actions{grid-column:1/-1}.reference-grid{grid-template-columns:1fr 1fr}.reference-controls{grid-column:1/-1}.canvas-viewport{min-height:380px}.reference-dock{height:auto}}
@media(max-width:760px){.topbar{position:relative;grid-template-columns:1fr}.brand-wrap{justify-content:center}.brand-sub{display:block}.top-actions{grid-row:3;justify-content:center}.top-actions .feedback-launch{display:block}.segmented{grid-row:2}.segmented small{font-size:7px}.workspace-grid{display:block}.sidebar{border:0}.left-panel{display:grid;grid-template-columns:1fr 1fr}.layer-section,.tool-section{grid-column:1/-1}.layer-list{max-height:230px;overflow:auto}.center-stage{min-height:0}.canvas-viewport{min-height:400px}.canvas-checker{width:min(88vw,360px)}.preview-note{display:none}.reference-grid{grid-template-columns:1fr}.reference-controls{grid-column:auto}.reference-source .helper{font-size:10px}.reference-analysis{min-height:100px}.concept-preview-wrap img{height:170px}.layer-inspector{grid-template-columns:1fr 1fr}.feedback-modal{max-height:92vh}.modal-backdrop{padding:10px}.feedback-head{padding:16px}.feedback-form{padding:16px}.feedback-help{margin:12px 16px 0}.feedback-actions>div{display:flex}.feedback-grid.two{grid-template-columns:1fr}.game-fields{max-width:460px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}