/* ==========================================================================
   BLOCKPLAN — editor shell (menu bar, tool rail, panels, inspector, home).
   Loaded after style.css; reuses its tokens. Layout goal: one compact top
   bar, a large viewport, and controls that appear where/when they're needed.
   ========================================================================== */

/* The `hidden` attribute must always win over component display rules
   (button{display:inline-flex}, .sb-item{display:flex}, …). */
[hidden]{ display:none !important; }

/* ---- light theme (the 3D viewport keeps its own day/night palette) ---- */
:root[data-theme="light"]{
  --bg-0:#dfe3e8; --bg-1:#eef1f4; --bg-2:#f7f8fa; --bg-3:#ffffff; --bg-4:#eef0f3;
  --bg-glass:rgba(250,251,252,0.86);
  --border:#d6dbe2; --border-soft:#e4e8ed; --border-strong:#c3cad3;
  --text:#161b22; --text-dim:#4d5866; --text-faint:#7d8896;
  --accent:#b9821f; --accent-strong:#9c6a10; --accent-soft:rgba(185,130,31,0.12); --accent-border:rgba(185,130,31,0.45);
  --accent-2:#23806c; --accent-2-strong:#1d6d5c; --accent-2-soft:rgba(35,128,108,0.1);
  --shadow-md:0 6px 20px rgba(20,30,45,0.12); --shadow-lg:0 14px 44px rgba(20,30,45,0.18);
  color-scheme:light;
}
:root[data-theme="light"] button:hover{ background:#eef1f4; }
:root[data-theme="light"] button.primary:hover{ background:var(--accent-strong); }
:root[data-theme="light"] #close-modal:hover{ background:var(--bg-4); }

/* ==========================================================================
   TOP BAR
   ========================================================================== */
#topbar{ display:flex; align-items:center; gap:6px; height:46px; padding:0 10px; flex:none; flex-wrap:nowrap; row-gap:0;
  background:var(--bg-2); border-bottom:1px solid var(--border-soft); box-shadow:none; z-index:40; position:relative; }
.brand-btn{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid transparent; padding:5px 8px 5px 5px; margin-right:4px; }
.brand-btn:hover{ background:var(--bg-3); border-color:var(--border); }
/* One logo everywhere (img/logo.svg — also the favicon, app icons and link preview; see tools/make_brand_images.py) */
.mark{ width:24px; height:24px; flex:none; display:inline-block; background:url('../img/logo.svg') center/contain no-repeat; }
.brand-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; letter-spacing:-0.01em; color:var(--text); }

#menubar{ display:flex; align-items:center; gap:1px; }
.menu{ position:relative; }
.menu-trigger{ background:transparent; border:1px solid transparent; color:var(--text-dim); font-weight:500; font-size:13px; padding:6px 10px; border-radius:var(--r-sm); }
.menu-trigger:hover, .menu.open .menu-trigger{ background:var(--bg-3); color:var(--text); border-color:var(--border-soft); }
.menu-panel{ display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:250px; padding:5px; z-index:60;
  background:var(--bg-2); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); animation:modal-in .1s var(--ease); }
.menu-panel.menu-wide{ min-width:300px; }
.menu.open .menu-panel{ display:flex; flex-direction:column; }
.menu-panel > button, .menu-panel > .menu-link{ display:flex; align-items:center; gap:9px; width:100%; justify-content:flex-start; text-align:left;
  background:transparent; border:1px solid transparent; color:var(--text); font-weight:500; font-size:13px; padding:7px 9px; border-radius:var(--r-sm); text-decoration:none; }
.menu-panel > button .icon{ color:var(--text-faint); width:15px; height:15px; }
.menu-panel > button:hover:not(:disabled), .menu-panel > button:focus-visible, .menu-panel > .menu-link:hover{ background:var(--accent-soft); border-color:transparent; color:var(--text); outline:none; }
.menu-panel > button:hover .icon{ color:var(--accent-strong); }
.menu-panel > button.toggle.active{ background:transparent; color:var(--text); border-color:transparent; }
.menu-panel > button.toggle::after{ content:''; margin-left:auto; width:26px; height:15px; border-radius:999px; background:var(--bg-4); border:1px solid var(--border-strong); flex:none;
  background-image:radial-gradient(circle at 7px 50%, var(--text-faint) 4.5px, transparent 5px); transition:background .12s; }
.menu-panel > button.toggle.active::after{ background-color:var(--accent-soft); border-color:var(--accent-border); background-image:radial-gradient(circle at 18px 50%, var(--accent) 4.5px, transparent 5px); }
.menu-panel > button:not(.toggle) .btn-label, .menu-panel > button .btn-label{ flex:1; }
.menu-panel .kbd-hint{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); padding-left:14px; }
.menu-panel > button.toggle .kbd-hint{ margin-left:0; }
.menu-sep{ height:1px; background:var(--border-soft); margin:5px 4px; }
.menu-label{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); padding:7px 9px 3px; }

.pro-chip{ font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:600; letter-spacing:.06em; color:var(--accent-strong); background:var(--accent-soft);
  border:1px solid var(--accent-border); border-radius:999px; padding:1px 6px; line-height:1.4; flex:none; }
.menu-panel .pro-chip{ margin-left:auto; }
.pro-user .menu-panel .pro-chip{ display:none; }

#doc-title{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:8px; }
#doc-name{ background:transparent; border:1px solid transparent; font-weight:600; font-size:13px; color:var(--text); max-width:320px; overflow:hidden; text-overflow:ellipsis; padding:5px 9px; }
#doc-name:hover{ background:var(--bg-3); border-color:var(--border); }
.doc-status{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); white-space:nowrap; }
.doc-status.saved{ color:var(--good); }
.doc-status.dirty{ color:var(--warn); }

.topbar-right{ display:flex; align-items:center; gap:6px; }
.search-btn{ background:var(--bg-4); border-color:var(--border); color:var(--text-faint); font-weight:500; min-width:150px; justify-content:flex-start; }
.search-btn kbd{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); border:1px solid var(--border-strong); border-radius:4px; padding:0 5px; }
.search-btn:hover{ color:var(--text-dim); }
#undo-btn .btn-label, #redo-btn .btn-label{ display:none; }
#undo-btn, #redo-btn{ width:32px; padding:6px; justify-content:center; }
#account-group{ gap:6px; align-items:center; border:none; padding:0; margin-left:4px; }
.upgrade-btn{ background:linear-gradient(135deg,var(--accent-soft),rgba(63,156,136,0.12)); border-color:var(--accent-border); color:var(--accent-strong); }
.upgrade-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* ==========================================================================
   MAIN: rail | palette | viewport | inspector
   ========================================================================== */
#main{ flex:1; display:flex; min-height:0; }
#toolbar2{ display:none; }

#toolrail{ width:48px; flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0; background:var(--bg-2); border-right:1px solid var(--border-soft); z-index:15; }
.rail-btn{ width:36px; height:36px; padding:0; justify-content:center; border-radius:var(--r-md); position:relative; }
.rail-btn .btn-label{ display:none; }
.rail-btn .icon{ width:18px; height:18px; }
.rail-btn.toggle.active{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-strong); }
.rail-sep{ width:24px; height:1px; background:var(--border-soft); margin:5px 0; }
.rail-fill{ flex:1; }
#toolrail .rail-btn[data-tip]:hover::after{ content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap;
  background:var(--bg-3); border:1px solid var(--border-strong); color:var(--text); font-size:12px; font-weight:500; padding:5px 9px; border-radius:var(--r-sm); box-shadow:var(--shadow-md); pointer-events:none; z-index:70; }

#palette{ width:236px; transition:width .16s var(--ease), opacity .16s; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px 0; }
.panel-title{ font-family:'Sora',sans-serif; font-weight:700; font-size:13px; }
#palette-search-wrap{ margin:9px 12px 6px; }
#palette-tabs{ padding:0 12px 6px; }
.palette-collapsed #palette{ width:0; opacity:0; overflow:hidden; border-right:none; }
.palette-collapsed #rail-palette-btn{ color:var(--text-faint); }

#inspector{ width:268px; flex:none; background:var(--bg-2); border-left:1px solid var(--border-soft); overflow-y:auto; z-index:10; transition:width .16s var(--ease), opacity .16s; }
.inspector-collapsed #inspector{ width:0; opacity:0; overflow:hidden; border-left:none; }
.insp-sec{ padding:13px 14px 14px; border-bottom:1px solid var(--border-soft); display:flex; flex-direction:column; gap:9px; }
.insp-sec[hidden]{ display:none; }
.insp-head{ display:flex; align-items:center; gap:8px; }
.insp-head h4{ margin:0; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.insp-head .mono-dim{ margin-left:auto; }
#insp-tool .insp-head h4{ font-family:'Sora',sans-serif; font-size:14px; text-transform:none; letter-spacing:0; color:var(--text); }
.insp-tool-icon{ width:28px; height:28px; border-radius:var(--r-md); background:var(--accent-soft); border:1px solid var(--accent-border); color:var(--accent-strong); display:flex; align-items:center; justify-content:center; }
.insp-tool-icon .icon{ width:16px; height:16px; }
.insp-help{ margin:0; font-size:12px; line-height:1.55; color:var(--text-dim); }
.insp-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.insp-row:empty{ display:none; }
.insp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.insp-grid button{ justify-content:flex-start; padding:6px 9px; font-size:12px; }
.size-row{ flex-wrap:nowrap; }
.size-row input[type=number]{ width:100%; min-width:0; flex:1; }
.axis-label{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:700; }
.axis-x{ color:#e0655a; } .axis-y{ color:#5cbf7d; } .axis-z{ color:#5a9be0; }
/* big-edit progress (07-edit.js commitEdit) + preview block count (06-raycast.js) */
#job-progress{ position:absolute; left:50%; bottom:128px; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:var(--bg-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border); box-shadow:var(--shadow-md); font-size:12.5px; min-width:320px; }
#job-progress[hidden]{ display:none; }
#job-progress .jp-track{ flex:1; height:6px; border-radius:3px; background:var(--bg-4); overflow:hidden; min-width:120px; }
#job-progress .jp-bar{ height:100%; background:var(--accent); width:0; transition:width .12s linear; }
#job-progress .jp-detail{ font-size:11px; white-space:nowrap; }
#preview-info{ position:absolute; top:calc(50% + 14px); left:50%; transform:translateX(-50%); pointer-events:none; font:600 11px 'JetBrains Mono',monospace; color:#fff; text-shadow:0 0 3px #000,0 0 2px #000; white-space:nowrap; }
#preview-info[hidden]{ display:none; }
/* cinematic mode (js/38-cinematic.js): nothing on screen but the build (and the capture bar while the cursor is free) */
body.cinematic #topbar, body.cinematic #toolrail, body.cinematic #palette, body.cinematic #inspector, body.cinematic #bottomdock,
body.cinematic #hud, body.cinematic #viewhint, body.cinematic #gizmo, body.cinematic #stats-panel, body.cinematic #statusbar,
body.cinematic #buildbar, body.cinematic #build-keys, body.cinematic #lock-hint, body.cinematic #empty-state, body.cinematic #tool-tip,
body.cinematic #preview-info, body.cinematic #guide-bar, body.cinematic #crosshair, body.cinematic #restore-bar{ display:none !important; }
body.cinematic #main{ height:100vh; }
#cine-bar{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:5px; padding:6px 8px; border-radius:14px;
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); box-shadow:var(--shadow-md);
  max-width:calc(100% - 24px); overflow-x:auto; font-size:12.5px; transition:opacity .2s; }
#cine-bar[hidden]{ display:none; }
body.cinematic.locked #cine-bar{ opacity:0; pointer-events:none; } /* flying: out of the shot */
body.cine-recording #cine-bar{ opacity:.9; }
#cine-bar input[type=text]{ width:150px; }
#cine-bar select{ width:auto; }
#cine-bar .cine-dur{ display:inline-flex; align-items:center; gap:4px; color:var(--text-dim); }
#cine-bar .cine-dur input{ width:48px; }
#cine-bar .cine-dur .icon{ width:14px; height:14px; }
/* first-use tour + tool tips (js/37-tour.js) */
#tour{ position:fixed; inset:0; z-index:200; }
#tour .tour-spot{ position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(4,6,9,0.62); outline:2px solid var(--accent); outline-offset:2px; transition:all .22s var(--ease); pointer-events:none; }
#tour .tour-card{ position:fixed; width:380px; max-width:calc(100vw - 24px); background:var(--bg-2); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg, 0 20px 50px rgba(0,0,0,.45)); padding:16px 18px 14px; transition:left .22s var(--ease), top .22s var(--ease); }
#tour .tour-step{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
#tour h3{ margin:6px 0 6px; font:700 17px 'Sora',sans-serif; }
#tour p{ margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--text-dim); }
#tour .tour-actions{ display:flex; align-items:center; gap:8px; }
#tour .tour-fill{ flex:1; }
#tour [hidden]{ display:none; }
#tool-tip{ position:absolute; left:50%; top:62px; transform:translateX(-50%); z-index:26; display:flex; align-items:center; gap:10px; max-width:min(560px, calc(100% - 24px)); padding:9px 8px 9px 12px; border-radius:12px; background:var(--bg-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--accent-border); box-shadow:var(--shadow-md); font-size:12.5px; line-height:1.45; }
#tool-tip[hidden]{ display:none; }
#tool-tip .tt-icon{ color:var(--accent-strong); display:flex; }
#tool-tip .tt-icon .icon{ width:16px; height:16px; }
/* pattern editor */
.pat-top, .pat-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:10px; }
.pat-tools input[type=search]{ flex:1; min-width:140px; }
.pat-brush{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); max-width:180px; }
.pat-brush span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pat-brush canvas, .pat-sw canvas{ width:20px; height:20px; image-rendering:pixelated; border-radius:3px; display:block; }
.pat-results, .pat-used{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-bottom:8px; font-size:11.5px; }
.pat-results:empty, .pat-used:empty{ display:none; }
.pat-used .mono-dim{ margin-right:4px; }
.pat-sw{ padding:3px; border-radius:6px; background:var(--bg-3); border:1px solid var(--border-soft); line-height:0; }
.pat-sw.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pat-canvas-wrap{ overflow:auto; max-height:460px; background:var(--bg-1); border:1px solid var(--border-soft); border-radius:8px; padding:8px; display:flex; justify-content:center; }
#pat-canvas{ image-rendering:pixelated; cursor:crosshair; touch-action:none; display:block; }
.pat-stats{ margin:8px 0 0; font-size:11.5px; }
.opt-num{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-dim); }
.opt-num input{ width:54px; }
.opt-num[hidden], #insp-tool-options .check[hidden]{ display:none; }
.sel-bounds{ display:grid; grid-template-columns:auto 1fr auto 1fr; gap:5px 6px; align-items:center; font-size:11.5px; }
.sel-bounds input{ width:100%; min-width:0; }
.sel-bounds .axis-label{ text-align:right; }
.insp-more > summary{ cursor:pointer; font-size:12px; color:var(--text-dim); list-style:none; display:flex; align-items:center; gap:6px; }
.insp-more > summary::-webkit-details-marker{ display:none; }
.insp-more > summary::before{ content:'▸'; font-size:10px; color:var(--text-faint); transition:transform .12s; }
.insp-more[open] > summary::before{ transform:rotate(90deg); }
.insp-more > summary .muted{ color:var(--text-faint); font-size:11px; }
.insp-more > * + *{ margin-top:8px; }
.insp-note{ margin:0; font-size:11.5px; line-height:1.5; color:var(--text-faint); }
.insp-more select{ flex:1; min-width:0; }
.seg-sm .seg-btn{ padding:4px 8px; font-size:11px; }
#insp-snap .check.sm{ line-height:1.4; align-items:flex-start; }
#insp-snap .check.sm input{ margin-top:1px; flex:none; }
.insp-pro-card{ background:linear-gradient(160deg,var(--accent-soft),rgba(63,156,136,0.08)); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:12px; display:flex; flex-direction:column; gap:8px; }
.insp-pro-card p{ margin:0; font-size:12px; color:var(--text-dim); line-height:1.5; }
.insp-pro-card b{ font-family:'Sora',sans-serif; font-size:13px; }

/* ---- viewport overlays ---- */
#hud{ top:12px; left:12px; min-width:0; max-width:320px; padding:8px 12px; }
#viewhint{ top:12px; right:12px; }
#stats-panel{ top:48px; right:12px; }
#gizmo{ position:absolute; left:12px; bottom:12px; width:96px; height:96px; pointer-events:none; opacity:.95; }
#gizmo[hidden]{ display:none; }
#gizmo canvas{ width:96px; height:96px; }
#lock-hint{ background:radial-gradient(ellipse at center, rgba(15,18,23,0.45), rgba(6,7,9,0.72)); }
.lock-card{ background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-xl); padding:22px 26px; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; align-items:center; gap:12px; max-width:560px; }
.lock-card h3{ margin:0; font-size:20px; }
.lock-sub{ margin:0; color:var(--text-dim); font-size:13px; }
.lock-sub kbd, .lock-hints kbd{ font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--bg-3); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:0 5px; color:var(--text-dim); }
#lock-hint.hidden{ display:none; }
/* hold-to-build axis lock + sprint, shown right at the crosshair */
#crosshair::after{ content:attr(data-axis); position:absolute; left:12px; top:-5px; font:700 10px 'JetBrains Mono',monospace; color:#fff; text-shadow:0 0 3px #000, 0 0 2px #000; white-space:nowrap; }
#crosshair[data-axis="X"]::after{ color:#ff8a80; } #crosshair[data-axis="Y"]::after{ color:#8ee6a8; } #crosshair[data-axis="Z"]::after{ color:#8cc1ff; }
#crosshair.sprinting::before{ content:'»'; position:absolute; right:12px; top:-7px; font:700 12px 'Inter',sans-serif; color:#fff; text-shadow:0 0 3px #000; }

#empty-state{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:6; }
#empty-state[hidden]{ display:none; }
.empty-card{ pointer-events:auto; background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px 22px; box-shadow:var(--shadow-lg); width:min(560px, calc(100% - 32px)); }
.empty-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); }
.empty-card h3{ margin:4px 0 12px; font-size:18px; }
.empty-actions{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.empty-action{ flex-direction:column; align-items:flex-start; gap:2px; white-space:normal; text-align:left; padding:11px 12px; background:var(--bg-3); border-color:var(--border-soft); }
.empty-action:hover{ border-color:var(--accent-border); background:var(--accent-soft); }
.ea-title{ font-weight:600; font-size:13px; color:var(--text); display:flex; align-items:center; gap:6px; }
.ea-sub{ font-weight:400; font-size:11.5px; color:var(--text-dim); }

#lock-hint.compact{ inset:auto 0 118px 0; background:none; pointer-events:none; }
#lock-hint.compact .lock-card{ pointer-events:auto; flex-direction:row; padding:7px 14px; gap:10px; border-radius:999px; margin:0 auto; cursor:pointer; }
#lock-hint.compact .lock-card h3{ font-size:13px; font-family:'Inter',sans-serif; font-weight:600; }
#lock-hint.compact .lock-sub, #lock-hint.compact .lock-hints{ display:none; }
#lock-hint.compact #shortcuts-link{ font-size:11.5px; }
#guide-bar{ position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:12; display:flex; align-items:center; gap:10px;
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:8px 10px; box-shadow:var(--shadow-md); }
#guide-bar[hidden]{ display:none; }
#guide-bar .gb-step{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:var(--accent-strong); min-width:76px; text-align:center; }
#guide-bar .gb-title{ font-size:12.5px; font-weight:600; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#guide-bar .gb-mats{ display:flex; gap:4px; }
#guide-bar .gb-mat{ display:flex; align-items:center; gap:4px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-soft); border-radius:999px; padding:2px 7px 2px 3px; }
#guide-bar .gb-mat i{ width:12px; height:12px; border-radius:3px; display:inline-block; }
#guide-bar button{ padding:5px 8px; }
#guide-bar .gb-progress{ width:90px; height:5px; background:var(--bg-4); border-radius:3px; overflow:hidden; }
#guide-bar .gb-progress > span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }

/* ---- status bar ---- */
#statusbar{ height:24px; }

/* ---- keyboard shortcut sheet ---- */
.shortcut-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 24px; }
.shortcut-grid h4{ grid-column:1 / -1; margin:12px 0 2px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent-2-strong); }
.shortcut-grid h4:first-child{ margin-top:0; }
.sc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; padding:3px 0; border-bottom:1px solid var(--border-soft); }
.sc-row kbd{ font-family:'JetBrains Mono',monospace; font-size:10.5px; background:var(--bg-3); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:1px 6px; color:var(--text-dim); white-space:nowrap; }

/* ==========================================================================
   PRICING / UPGRADE
   ========================================================================== */
.plans-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:880px; margin:0 auto; }
.plan-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); padding:20px; display:flex; flex-direction:column; gap:12px; }
.plan-card.pro{ border-color:var(--accent-border); background:linear-gradient(170deg,rgba(217,164,65,0.08),var(--bg-2) 45%); box-shadow:0 0 0 1px var(--accent-soft); }
.plan-name{ font-family:'Sora',sans-serif; font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; }
.plan-price{ font-family:'Sora',sans-serif; font-size:28px; font-weight:700; }
.plan-price small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--text-dim); }
.plan-pitch{ margin:0; color:var(--text-dim); font-size:13px; line-height:1.5; }
.plan-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.plan-list li{ display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.45; }
.plan-list li .icon{ color:var(--good); flex:none; margin-top:2px; }
.plan-card.pro .plan-list li .icon{ color:var(--accent-strong); }
.plan-list li.muted{ color:var(--text-faint); }
.plan-list li.muted .icon{ color:var(--text-faint); }
.plan-card .plan-cta{ margin-top:auto; }
.plan-card .plan-cta button{ width:100%; justify-content:center; padding:10px; }
.plan-note{ font-size:11.5px; color:var(--text-faint); margin:0; text-align:center; }
.pricing-modal .plans-grid{ max-width:none; }
.pricing-compare{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
.pricing-compare th, .pricing-compare td{ padding:7px 10px; border-top:1px solid var(--border-soft); text-align:left; }
.pricing-compare th{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.pricing-compare td.v{ text-align:center; font-variant-numeric:tabular-nums; }
.pricing-compare td.v.pro{ color:var(--accent-strong); font-weight:600; }
.upsell{ display:grid; grid-template-columns:200px 1fr; gap:18px; align-items:center; }
.upsell canvas{ width:200px; height:140px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--bg-4); }
.upsell h3{ margin:0 0 6px !important; font-family:'Sora',sans-serif !important; font-size:17px !important; letter-spacing:0 !important; text-transform:none !important; color:var(--text) !important; }
.upsell ul{ margin:8px 0 0; padding-left:18px; }
.upsell-actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
@media (max-width:640px){ .upsell{ grid-template-columns:1fr; } .plans-grid{ grid-template-columns:1fr; } }

/* ---- cloud project cards ---- */
.cloud-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px; }
.cloud-card{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:8px; display:flex; flex-direction:column; gap:8px; }
.cloud-card.current{ border-color:var(--accent-border); box-shadow:0 0 0 1px var(--accent-soft); }
.cloud-thumb{ aspect-ratio:16/10; border-radius:var(--r-md); background:var(--bg-4); border:1px solid var(--border-soft); overflow:hidden; display:flex; align-items:center; justify-content:center; color:var(--text-faint); }
.cloud-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cloud-card-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.cloud-card .cloud-project-name{ display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-card .cloud-project-actions button{ padding:4px 8px; font-size:11.5px; }
.account-panel h3{ margin:10px 0 0 !important; }

/* ---- usage meter ---- */
.meter{ display:flex; flex-direction:column; gap:4px; }
.meter-top{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim); }
.meter-track{ height:6px; background:var(--bg-4); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.meter-track > span{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); }
.meter.full .meter-track > span{ background:var(--danger); }

/* ==========================================================================
   HOME / LANDING
   ========================================================================== */
/* Site shell (every page except the editor) — js/35-router.js */
#site{ position:fixed; inset:0; z-index:40; background:var(--bg-1); overflow:hidden; }
#site[hidden], #app[hidden]{ display:none !important; }
.site-scroll{ height:100%; overflow-y:auto; display:flex; flex-direction:column; }
.site-nav{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:18px; padding:10px clamp(16px,4vw,40px);
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-soft); }
.site-brand{ display:flex; align-items:center; gap:9px; font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:var(--text); text-decoration:none; }

.site-brand.small{ font-size:14px; }
.site-links{ display:flex; align-items:center; gap:4px; flex:1; }
.site-links > a, .site-menu-btn{ color:var(--text-dim); text-decoration:none; font-size:13.5px; font-weight:600; padding:7px 11px; border-radius:var(--r-md); background:none; border:none; }
.site-links > a:hover, .site-menu-btn:hover, .site-menu.open .site-menu-btn{ color:var(--text); background:var(--bg-3); }
.site-links > a.active{ color:var(--text); }
.site-menu{ position:relative; }
.site-menu-btn::after{ content:''; display:inline-block; margin-left:6px; width:6px; height:6px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:translateY(-3px) rotate(45deg); }
.site-menu-panel{ display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:300px; padding:6px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.site-menu.open .site-menu-panel{ display:grid; }
.site-menu-panel a{ display:grid; grid-template-columns:1fr auto; gap:1px 10px; padding:9px 11px; border-radius:var(--r-md); text-decoration:none; color:var(--text); }
.site-menu-panel a:hover, .site-menu-panel a.active{ background:var(--bg-3); }
.site-menu-panel a b{ font-size:13.5px; font-weight:600; }
.site-menu-panel a span{ grid-column:1; font-size:12px; color:var(--text-dim); }
.site-menu-panel a .pro-chip{ grid-row:1 / span 2; grid-column:2; align-self:center; font-style:normal; }
.site-right{ display:flex; align-items:center; gap:10px; }
.site-account{ color:var(--text-dim); font-weight:600; font-size:13.5px; text-decoration:none; padding:7px 10px; border-radius:var(--r-md); }
.site-account:hover{ color:var(--text); background:var(--bg-3); }
.btn-primary-link{ display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#1a1204; font-weight:700; font-size:13.5px; padding:8px 14px; border-radius:var(--r-md); text-decoration:none; border:1px solid transparent; }
.btn-primary-link:hover{ filter:brightness(1.07); }
.btn-primary-link.lg{ font-size:15px; padding:12px 20px; border-radius:var(--r-lg); }
.site-burger{ display:none; margin-left:auto; }
#site-main{ flex:1; outline:none; }
.site-foot{ border-top:1px solid var(--border-soft); padding:28px clamp(16px,4vw,48px) 28px; color:var(--text-faint); font-size:12.5px; }
.site-foot-cols{ display:grid; grid-template-columns:1.6fr repeat(3, 1fr); gap:24px; max-width:1240px; margin:0 auto 18px; }
.site-foot-cols > div{ display:flex; flex-direction:column; gap:7px; }
.site-foot-cols b{ color:var(--text); font-size:12.5px; }
.site-foot-cols p{ margin:4px 0 0; line-height:1.55; max-width:320px; }
.site-foot a{ color:var(--text-dim); text-decoration:none; }
.site-foot a:hover{ color:var(--text); }
.site-foot-legal{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:1240px; margin:0 auto; }
@media (max-width:860px){
  .site-burger{ display:inline-flex; }
  .site-links, .site-right{ display:none; }
  .site-nav.mobile-open{ flex-wrap:wrap; }
  .site-nav.mobile-open .site-links{ display:flex; flex-direction:column; align-items:stretch; flex-basis:100%; order:3; }
  .site-nav.mobile-open .site-right{ display:flex; flex-basis:100%; order:4; padding-bottom:6px; }
  .site-nav.mobile-open .site-menu-panel{ position:static; display:grid; box-shadow:none; border:none; min-width:0; padding:0 0 0 8px; }
  .site-nav.mobile-open .site-menu-btn{ display:none; }
  .site-foot-cols{ grid-template-columns:1fr 1fr; }
}

/* Pages */
.page{ max-width:1240px; width:100%; margin:0 auto; padding:clamp(18px,3vw,32px) clamp(16px,4vw,40px) 48px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.page-title{ display:flex; gap:14px; align-items:flex-start; }
.page-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-strong); border:1px solid var(--accent-border); flex:none; }
.page-icon .icon{ width:22px; height:22px; }
.page-title h1{ margin:0; font-size:clamp(22px,2.6vw,30px); font-weight:800; letter-spacing:-0.015em; display:flex; align-items:center; gap:10px; }
.page-title p{ margin:5px 0 0; color:var(--text-dim); font-size:14px; max-width:680px; line-height:1.5; }
.page-body.tool-surface{ background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:clamp(14px,2vw,22px); }
.page-body.narrow{ max-width:620px; }
.empty-page{ text-align:center; padding:48px 16px; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--text-dim); }
.feature-pitch{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(18px,3vw,40px); align-items:center; }
.feature-pitch canvas{ width:100%; height:auto; aspect-ratio:560/340; border-radius:var(--r-xl); border:1px solid var(--border); background:var(--bg-3); }
.feature-pitch h2{ margin:0 0 10px; font-size:clamp(20px,2.2vw,26px); }
.feature-pitch p{ color:var(--text-dim); line-height:1.6; }
.feature-pitch ul{ margin:10px 0 16px; padding-left:18px; line-height:1.8; }
.feature-pitch-cta{ margin:14px 0 10px; }
@media (max-width:860px){ .feature-pitch{ grid-template-columns:1fr; } }
.faq{ max-width:760px; margin:40px auto 0; }
.faq h2{ text-align:center; }
.faq details{ border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:12px 16px; margin-bottom:8px; background:var(--bg-2); }
.faq summary{ cursor:pointer; font-weight:600; }
.faq details p{ color:var(--text-dim); line-height:1.6; margin:10px 0 2px; }
/* Settings: tabs down the left, the section on the right (tabs scroll across on phones) */
.settings-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; max-width:980px; }
.settings-tabs{ display:flex; flex-direction:column; gap:2px; position:sticky; top:16px; }
.settings-tab{ display:flex; align-items:center; gap:10px; justify-content:flex-start; padding:9px 12px; border-radius:var(--r-md); background:none; border:1px solid transparent; color:var(--text-dim); font-size:13.5px; text-align:left; }
.settings-tab .icon{ width:16px; height:16px; flex:none; }
.settings-tab:hover{ background:var(--bg-3); color:var(--text); }
.settings-tab.active{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--text); }
.settings-panel h2{ font-size:18px; margin:0 0 14px; }
.settings-panel .account-panel h3{ margin-top:20px; }
.settings-ctl{ display:flex; align-items:center; gap:10px; flex:none; }
.settings-ctl input[type=range]{ width:150px; }
.settings-ctl output{ font:600 12px 'JetBrains Mono',monospace; min-width:42px; text-align:right; color:var(--text-dim); }
.btn-link{ display:inline-flex; align-items:center; padding:7px 12px; border-radius:var(--r-md); border:1px solid var(--border); color:var(--text); text-decoration:none; font-size:13px; }
.btn-link:hover{ background:var(--bg-3); }
.switch{ position:relative; display:inline-block; width:38px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch span{ position:absolute; inset:0; border-radius:11px; background:var(--bg-4); border:1px solid var(--border); transition:background .15s; cursor:pointer; }
.switch span::after{ content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-dim); transition:transform .15s, background .15s; }
.switch input:checked + span{ background:var(--accent); border-color:var(--accent); }
.switch input:checked + span::after{ transform:translateX(16px); background:#fff; }
.switch input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:760px){
  .settings-layout{ grid-template-columns:1fr; gap:14px; }
  .settings-tabs{ flex-direction:row; overflow-x:auto; position:static; padding-bottom:4px; }
  .settings-tab{ flex:none; }
  .settings-row{ flex-wrap:wrap; }
}
.settings-sec{ margin-bottom:26px; }
.settings-sec h2{ font-size:15px; margin:0 0 10px; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid var(--border-soft); border-radius:var(--r-lg); background:var(--bg-2); margin-bottom:8px; }
.settings-row > div{ display:flex; flex-direction:column; gap:3px; }
.settings-row b{ font-size:13.5px; }
.settings-row span{ font-size:12.5px; color:var(--text-dim); }
#site-main.bare .home-hero{ padding-top:clamp(28px,6vw,72px); }
.why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:18px; }
.why-grid > div{ background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:18px; }
.why-grid b{ font-size:15px; }
.why-grid p{ margin:8px 0 0; color:var(--text-dim); font-size:13.5px; line-height:1.6; }
@media (max-width:760px){ .why-grid{ grid-template-columns:1fr; } }
a.feature-card{ color:inherit; text-decoration:none; }
.final-cta{ text-align:center; }
.final-cta h2{ margin-bottom:18px !important; }

/* Full-screen build mode — js/36-buildmode.js */
#buildbar, #build-keys{ display:none; }
body.build-mode #topbar, body.build-mode #bottomdock .layer-row, body.build-mode #empty-state, body.build-mode #lock-hint:not(.compact){ display:none !important; }
body.build-mode #main{ height:100vh; }
body.build-mode #buildbar{ display:flex; position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:25; align-items:center; gap:4px; padding:5px 6px; border-radius:12px;
  background:var(--bg-glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--border); box-shadow:var(--shadow-md); max-width:calc(100% - 24px); overflow-x:auto; }
.bb-btn{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; font-size:12.5px; border-radius:8px; }
.bb-btn.icon-only{ padding:6px 7px; }
.bb-btn[hidden]{ display:none; }
.bb-sep{ width:1px; height:20px; background:var(--border); margin:0 3px; flex:none; }
.bb-doc{ font-size:12.5px; font-weight:600; color:var(--text-dim); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-block{ display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 5px; font-size:12.5px; border-radius:8px; max-width:220px; }
.bb-block span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bb-block canvas{ width:22px; height:22px; image-rendering:pixelated; border-radius:4px; flex:none; }
body.build-mode #build-keys{ display:block; position:absolute; right:12px; bottom:44px; z-index:24; width:230px; border-radius:12px; background:var(--bg-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border-soft); font-size:11.5px; opacity:.88; }
#build-keys .bk-head{ display:flex; align-items:center; gap:7px; width:100%; background:none; border:none; padding:8px 10px; font-size:12px; font-weight:600; color:var(--text-dim); }
#build-keys .bk-list{ display:grid; grid-template-columns:1fr auto; gap:5px 10px; margin:0; padding:0 10px 10px; }
#build-keys dt{ color:var(--text-dim); } #build-keys dd{ margin:0; text-align:right; }
#build-keys kbd{ font-size:10.5px; }
#build-keys.collapsed .bk-list{ display:none; }
#build-keys.collapsed{ width:auto; }
@media (max-width:760px){ body.build-mode #build-keys{ display:none; } .bb-doc, .bb-btn span{ display:none; } }
.home-hero{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(20px,4vw,56px); align-items:center; padding:clamp(28px,6vw,80px) clamp(16px,4vw,48px) clamp(24px,4vw,48px); max-width:1240px; margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-strong); margin-bottom:12px; }
.home-hero h1{ font-size:clamp(30px,4.6vw,52px); line-height:1.06; margin:0 0 16px; font-weight:800; letter-spacing:-0.025em; }
.hero-sub{ font-size:clamp(14px,1.4vw,16.5px); line-height:1.65; color:var(--text-dim); margin:0 0 22px; max-width:560px; }
.hero-ctas{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
button.lg{ font-size:14.5px; padding:12px 20px; border-radius:var(--r-lg); }
.ghost-link{ color:var(--text-dim); font-weight:600; font-size:13.5px; text-decoration:none; }
.ghost-link:hover{ color:var(--text); }
.hero-points{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:6px; }
.hero-points li{ font-size:13px; color:var(--text-dim); padding-left:20px; position:relative; }
.hero-points li::before{ content:''; position:absolute; left:2px; top:6px; width:8px; height:8px; border-radius:2px; background:var(--accent); }
.hero-visual{ position:relative; }
.hero-visual canvas{ width:100%; height:auto; aspect-ratio:4/3; display:block; border-radius:var(--r-xl); border:1px solid var(--border); background:radial-gradient(ellipse at 60% 30%, #1e2a36, #0c1016 70%); box-shadow:var(--shadow-lg); }
:root[data-theme="light"] .hero-visual canvas{ background:radial-gradient(ellipse at 60% 30%, #cfe3f2, #9fb8cc 80%); }
.home-section{ padding:clamp(28px,5vw,64px) clamp(16px,4vw,48px); max-width:1240px; margin:0 auto; }
.home-section h2{ font-size:clamp(22px,2.8vw,32px); margin:0 0 8px; text-align:center; font-weight:700; }
.section-sub{ text-align:center; color:var(--text-dim); margin:0 0 28px; font-size:14.5px; }
.feature-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.feature-card{ background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:14px 14px 16px; display:flex; flex-direction:column; gap:8px; transition:border-color .15s, transform .15s; }
.feature-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); }
.feature-preview{ width:100%; height:auto; aspect-ratio:16/9; border-radius:var(--r-md); background:var(--bg-4); border:1px solid var(--border-soft); display:block; }
.feature-card h3{ font-size:15.5px; margin:6px 0 0; line-height:1.3; }
.feature-card p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-dim); }
.tier{ align-self:flex-start; margin-top:auto; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-dim); }
.tier.pro{ color:var(--accent-strong); border-color:var(--accent-border); background:var(--accent-soft); }
.how-steps{ list-style:none; padding:0; margin:18px auto 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:900px; counter-reset:step; }
.how-steps li{ counter-increment:step; background:var(--bg-2); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:4px; }
.how-steps li::before{ content:counter(step); font-family:'Sora',sans-serif; font-weight:800; font-size:20px; color:var(--accent-strong); }
.how-steps b{ font-size:14px; } .how-steps span{ color:var(--text-dim); font-size:13px; }
.home-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:22px clamp(16px,4vw,48px) 32px; border-top:1px solid var(--border-soft); color:var(--text-faint); font-size:12px; max-width:1240px; margin:0 auto; }
.home-foot a{ color:var(--text-dim); }
@media (max-width:980px){ .home-hero{ grid-template-columns:1fr; } .feature-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .feature-grid, .how-steps{ grid-template-columns:1fr; } }

/* ==========================================================================
   GENERIC TOOL LAYOUTS (generators / toolkit modals)
   ========================================================================== */
.tool-layout{ display:grid; grid-template-columns:300px 1fr; gap:18px; }
.tool-side{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.tool-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.tool-field{ display:flex; flex-direction:column; gap:5px; }
.tool-field > label, .tool-label{ font-size:10.5px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; }
.tool-field input[type=text], .tool-field input[type=number], .tool-field select, .tool-field input[type=search]{ width:100%; }
.tool-field .range-row{ display:flex; align-items:center; gap:10px; }
.tool-field .range-row input[type=range]{ flex:1; }
.tool-field .range-row output{ font-family:'JetBrains Mono',monospace; font-size:12px; min-width:48px; text-align:right; color:var(--text); }
.tool-canvas{ width:100%; border:1px solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-4); display:block; }
.stat-pills{ display:flex; gap:6px; flex-wrap:wrap; }
.stat-pill{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-soft); border-radius:999px; padding:3px 9px; }
.stat-pill b{ color:var(--text); font-weight:600; }
.kv-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.kv-table td, .kv-table th{ padding:6px 9px; border-top:1px solid var(--border-soft); text-align:left; }
.kv-table th{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:600; }
.kv-table td.num{ text-align:right; font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',monospace; }
.bedrock-note{ font-size:11.5px; color:var(--text-dim); display:flex; gap:7px; align-items:flex-start; background:var(--accent-2-soft); border:1px solid rgba(63,156,136,0.3); border-radius:var(--r-sm); padding:7px 9px; line-height:1.5; }
.bedrock-note .icon{ color:var(--accent-2-strong); flex:none; margin-top:1px; }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--border-soft); margin-bottom:12px; flex-wrap:wrap; }
.tab{ background:transparent; border:none; border-bottom:2px solid transparent; border-radius:0; color:var(--text-dim); font-weight:600; padding:8px 11px; }
.tab:hover{ background:transparent; color:var(--text); border-color:transparent; border-bottom-color:var(--border-strong); }
.tab.active{ color:var(--accent-strong); border-bottom-color:var(--accent); }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{ font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--bg-3); border:1px solid var(--border); color:var(--text-dim); cursor:pointer; }
.chip:hover{ color:var(--text); border-color:var(--border-strong); }
.chip.active{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-strong); }
.swatch-strip{ display:flex; border-radius:var(--r-sm); overflow:hidden; height:26px; border:1px solid var(--border-soft); }
.swatch-strip > span{ flex:1; }
.pal-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; max-height:56vh; overflow-y:auto; padding-right:4px; align-content:start; }
.pal-card{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:8px; display:flex; flex-direction:column; gap:6px; cursor:pointer; text-align:left; white-space:normal; align-items:stretch; }
.pal-card:hover{ border-color:var(--border-strong); }
.pal-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border); }
.pal-card .pal-name{ font-size:12.5px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.pal-card .pal-tags{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-faint); }
.pal-blocks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:5px; }
.pal-block{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-dim); background:var(--bg-4); border:1px solid var(--border-soft); border-radius:var(--r-sm); padding:4px 7px; overflow:hidden; }
.pal-block i{ width:14px; height:14px; border-radius:3px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.3); }
.pal-block span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px){ .tool-layout{ grid-template-columns:1fr; } }

/* build guide step list */
.guide-row{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; width:100%; text-align:left; background:transparent; border:none; border-top:1px solid var(--border-soft); border-radius:0; padding:7px 10px; font-weight:500; color:var(--text); white-space:normal; }
.guide-row:hover{ background:var(--bg-3); border-color:var(--border-soft); }
.guide-row.current{ background:var(--accent-soft); }
.guide-row.done{ color:var(--text-faint); }
.guide-row.done .mono-dim::after{ content:' ✓'; color:var(--good); }
.guide-row .gb-mats{ display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; }
.guide-row .gb-mat, #guide-bar .gb-mat{ display:flex; align-items:center; gap:4px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-soft); border-radius:999px; padding:2px 7px 2px 3px; }
.guide-row .gb-mat i{ width:12px; height:12px; border-radius:3px; display:inline-block; }

/* piano-roll for the note-block editor */
.roll-wrap{ position:relative; border:1px solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-4); overflow:auto; max-height:320px; }
.roll-wrap canvas{ display:block; }
.transport{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* map picker */
.map-box{ position:relative; width:100%; aspect-ratio:4/3; min-height:260px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border); background:#dfe6ea; user-select:none; touch-action:none; }
.map-box #rw-map{ position:absolute; inset:0; }
.map-box canvas{ outline:none; }
#rw-square{ position:absolute; pointer-events:none; border:2px dashed #d9a441; background:rgba(217,164,65,0.13); box-shadow:0 0 0 9999px rgba(10,14,20,0.18); border-radius:2px; z-index:2; }
#rw-square::before{ content:attr(data-label); position:absolute; left:-2px; bottom:100%; margin-bottom:4px; font:600 11.5px Inter,sans-serif; color:#fff; background:#b47f1c; padding:1px 6px; border-radius:4px; white-space:nowrap; }
.map-box .map-loading{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:13px; color:#55606c; z-index:3; pointer-events:none; }
.map-box.ready .map-loading{ display:none; }
.map-fallback{ position:absolute; inset:0; display:flex; gap:8px; align-items:center; justify-content:center; padding:20px; text-align:center; color:#444; font-size:13px; }
.map-box .maplibregl-ctrl-attrib{ font-size:10.5px; }
.map-attrib{ position:absolute; right:0; bottom:0; font-size:10px; background:rgba(255,255,255,0.85); color:#333; padding:1px 5px; }
.map-attrib a{ color:#1d4f8c; }
.map-controls{ position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:4px; }
.map-controls button{ width:30px; height:30px; padding:0; justify-content:center; background:rgba(255,255,255,0.92); color:#222; border-color:#bbb; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1180px){ .search-btn{ min-width:0; } .search-btn .search-btn-label, .search-btn kbd{ display:none; } #doc-status{ display:none; } }
@media (max-width:980px){
  #inspector{ position:absolute; right:0; top:46px; bottom:24px; box-shadow:var(--shadow-lg); z-index:30; }
  #app:not(.inspector-open-mobile) #inspector{ width:0; opacity:0; overflow:hidden; border-left:none; }
  #doc-title{ justify-content:flex-start; }
}
@media (max-width:760px){
  #menubar .menu-trigger{ padding:6px 7px; font-size:12.5px; }
  .brand-name{ display:none; }
  #doc-title{ display:none; }
  #palette{ position:absolute; left:48px; top:46px; bottom:24px; z-index:30; box-shadow:var(--shadow-lg); }
  #export-btn .btn-label{ display:none; }
  #hud, #viewhint{ display:none; }
  .empty-actions{ grid-template-columns:1fr; }
  .menu-panel{ position:fixed; left:8px !important; right:8px; top:52px; min-width:0; max-height:calc(100vh - 70px); overflow-y:auto; }
  #layer-slider{ width:120px; }
}
@media (max-width:520px){
  #menubar{ overflow-x:auto; }
  #account-btn .btn-label, #upgrade-btn .btn-label{ display:none; }
  #restore-bar{ left:56px; right:8px; transform:none; flex-wrap:wrap; }
  #restore-bar > span{ flex:1 1 100%; }
  #toolrail{ width:42px; }
  .rail-btn{ width:32px; height:32px; }
  .hotbar-slot{ width:30px; height:30px; }
  .hotbar-slot canvas.chip{ width:24px; height:24px; }
}

/* inline "this part is Pro" card */
.pro-lock{ display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--accent-border); background:linear-gradient(180deg, var(--accent-soft), transparent 70%); border-radius:var(--r-lg); }
.pro-lock-head{ display:flex; align-items:center; gap:8px; font-family:Sora, sans-serif; font-size:15px; }
.pro-lock-head .icon{ color:var(--accent); }
.pro-lock-points{ margin:0; padding-left:18px; color:var(--text-dim); font-size:13px; line-height:1.6; }
body.build-mode #restore-bar{ top:64px; }