/* ==========================================================================
   BLOCKPLAN — design system
   A dark, editor-grade UI (Blender/Axiom/Figma register) built on a cool
   graphite surface scale with two material-inspired accents: brass/gold for
   primary actions & selection, and a teal-emerald for information/secondary
   state — evoking Minecraft's own gold/copper/emerald materials without
   leaning on literal block colors or a single neon "pop" accent.
   ========================================================================== */
:root{
  /* ---- surfaces (cool graphite, not pure grey) ---- */
  --bg-0:#0a0c10;         /* canvas letterbox / deepest recess */
  --bg-1:#101318;         /* app shell */
  --bg-2:#161a20;         /* panels: toolbars, sidebar, modal */
  --bg-3:#1d222a;         /* raised: cards, hovered rows, inputs-on-panel */
  --bg-4:#0c0e12;         /* inset: text inputs, code, track */
  --bg-glass:rgba(16,19,24,0.82);
  --border:#262c35;
  --border-soft:#1e232b;
  --border-strong:#3a4250;

  /* ---- text ---- */
  --text:#eef1f5;
  --text-dim:#9aa5b3;
  --text-faint:#5e6875;
  --text-on-accent:#241704;
  --text-on-accent-2:#052420;

  /* ---- accents ---- */
  --accent:#d9a441;             /* brass / gold — primary, selection, active tool */
  --accent-strong:#f0bb5c;
  --accent-soft:rgba(217,164,65,0.14);
  --accent-border:rgba(217,164,65,0.45);
  --accent-2:#3f9c88;           /* teal-emerald — info, links, secondary state */
  --accent-2-strong:#52bfa8;
  --accent-2-soft:rgba(63,156,136,0.14);
  --danger:#e0554a;
  --danger-strong:#ff6f5f;
  --danger-soft:rgba(224,85,74,0.14);
  --good:#5cbf7d;
  --good-soft:rgba(92,191,125,0.14);
  --warn:#e3ab3f;

  /* ---- shape / motion ---- */
  --r-sm:4px; --r-md:7px; --r-lg:11px; --r-xl:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:0 6px 20px rgba(0,0,0,0.38);
  --shadow-lg:0 14px 44px rgba(0,0,0,0.48);
  --ease:cubic-bezier(.2,.7,.3,1);
  color-scheme:dark; /* deliberately single-theme: a dark building workspace */
}
*{box-sizing:border-box;}
html,body{ height:100%; margin:0; padding:0; background:var(--bg-0); color:var(--text); font:400 13.5px/1.5 'Inter',-apple-system,BlinkMacSystemFont,sans-serif; overflow:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Sora',-apple-system,sans-serif; letter-spacing:-0.01em; }
#app{ position:relative; height:100%; width:100%; display:flex; flex-direction:column; }
.icon{ width:15px; height:15px; flex:none; display:block; }
.icon-lg{ width:20px; height:20px; }
.icon-flip{ transform:scaleX(-1); }
::selection{ background:var(--accent); color:var(--text-on-accent); }

/* ==========================================================================
   BUTTONS / INPUTS — shared primitives
   ========================================================================== */
button{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.01em;
  border:1px solid var(--border-strong); background:var(--bg-3); color:var(--text);
  padding:6.5px 12px; cursor:pointer; border-radius:var(--r-md);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background .12s var(--ease),border-color .12s var(--ease),box-shadow .12s var(--ease),transform .06s var(--ease),color .12s var(--ease);
}
button:hover{ border-color:var(--text-faint); background:#242a33; }
button:active{ transform:translateY(1px); }
button:disabled{ opacity:.35; cursor:not-allowed; }
button:disabled:hover{ background:var(--bg-3); border-color:var(--border-strong); }
button:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
button.primary{ background:var(--accent); border-color:var(--accent); color:var(--text-on-accent); box-shadow:var(--shadow-sm); }
button.primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); }
button.primary.danger,button.danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
button.primary.danger:hover,button.danger:hover{ background:var(--danger-strong); border-color:var(--danger-strong); }
button.ghost{ background:transparent; border-color:transparent; color:var(--text-dim); padding:6px 10px; }
button.ghost:hover{ background:var(--bg-3); color:var(--text); border-color:var(--border); }
button.toggle{ background:transparent; border-color:transparent; color:var(--text-dim); }
button.toggle:hover{ background:var(--bg-3); border-color:var(--border); color:var(--text); }
button.toggle.active{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-strong); }
button.icon-only{ padding:6.5px; width:30px; justify-content:center; }
button.sm{ padding:4.5px 9px; font-size:11.5px; border-radius:var(--r-sm); }

input[type=number],input[type=text],input[type=search]{
  background:var(--bg-4); border:1px solid var(--border); color:var(--text);
  font-family:'JetBrains Mono',monospace; font-size:12px; padding:6px 8px; border-radius:var(--r-sm);
  transition:border-color .12s var(--ease),box-shadow .12s var(--ease);
}
input[type=number]{ width:52px; font-variant-numeric:tabular-nums; }
select{
  background:var(--bg-4); border:1px solid var(--border); color:var(--text);
  font-family:'Inter',sans-serif; font-size:12px; font-weight:500; padding:6px 26px 6px 8px; border-radius:var(--r-sm);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239aa5b3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:14px;
}
input[type=number]:focus,input[type=text]:focus,input[type=search]:focus,select:focus{ outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-2-soft); }
input[type=checkbox]{ width:15px; height:15px; accent-color:var(--accent); }
label{ font-size:12px; color:var(--text-dim); }

/* custom range slider (layer + wall-height) */
input[type=range]{ -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; }
input[type=range]::-webkit-slider-runnable-track{ height:4px; background:var(--bg-4); border-radius:2px; border:1px solid var(--border); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:15px; height:15px; margin-top:-6.5px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-1); box-shadow:0 0 0 1px var(--accent-border); }
input[type=range]::-moz-range-track{ height:4px; background:var(--bg-4); border-radius:2px; border:1px solid var(--border); }
input[type=range]::-moz-range-thumb{ width:13px; height:13px; border-radius:50%; background:var(--accent); border:2px solid var(--bg-1); }

.mono-dim{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim); }
.mono{ font-family:'JetBrains Mono',monospace; }
.chip-label{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.details-summary{ cursor:pointer; color:var(--accent-2-strong); font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; }

/* ==========================================================================
   TOP CHROME — brand bar + command bar
   ========================================================================== */
#topbar,#toolbar2{ display:flex; align-items:center; gap:14px; padding:9px 14px; background:var(--bg-2); border-bottom:1px solid var(--border-soft); z-index:20; flex-wrap:wrap; row-gap:8px; }
#topbar{ padding:10px 14px; box-shadow:0 1px 0 rgba(0,0,0,0.3); }
#toolbar2{ padding:7px 14px; background:#12151a; }

#brand{ display:flex; align-items:center; gap:9px; padding-right:14px; margin-right:2px; border-right:1px solid var(--border-soft); }
#brand .mark{ width:26px; height:26px; border-radius:var(--r-sm); flex:none; position:relative;
  background:linear-gradient(155deg,var(--accent-strong),var(--accent) 55%,#8a5f1f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 3px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.4); }
#brand .mark::after{ content:''; position:absolute; inset:5px; border-radius:2px; background:rgba(255,255,255,0.14); }
#brand h1{ font-size:16.5px; font-weight:700; margin:0; line-height:1.1; color:var(--text); }
#brand span.tag{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); letter-spacing:.03em; }

.group{ display:flex; align-items:center; gap:7px; padding:0 12px; border-right:1px solid var(--border-soft); }
.group:last-child{ border-right:none; }
.group label{ font-size:10px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }

/* toolbar "chip" segment: a bordered group that reads as one control cluster */
#toolbar2 .group{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:4px 5px; gap:3px; }
#toolbar2 .group label{ padding:0 6px; }
#toolbar2 button{ padding:6px 10px; }
#toolbar2 button.icon-only{ width:30px; }

/* ==========================================================================
   MAIN LAYOUT
   ========================================================================== */
#main{ flex:1; display:flex; min-height:0; }

/* ---- palette sidebar ---- */
#palette{ width:242px; flex:none; background:var(--bg-2); border-right:1px solid var(--border-soft); display:flex; flex-direction:column; z-index:10; }
#palette-tabs{ display:flex; flex-wrap:wrap; gap:4px; padding:12px 12px 0; }
.cat-tab{ display:inline-flex; align-items:center; gap:6px; font-family:'Inter',sans-serif; font-weight:600; font-size:11px; padding:5.5px 10px 5.5px 8px; background:transparent; border:1px solid transparent; color:var(--text-dim); border-radius:999px; }
.cat-dot{ width:7px; height:7px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.35); }
.cat-tab:hover{ background:var(--bg-3); color:var(--text); }
.cat-tab.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-border); }
#palette-search-wrap{ position:relative; margin:10px 12px 8px; }
#palette-search-wrap .icon{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }
#palette-search{ width:100%; padding-left:29px; }
#palette-list{ flex:1; overflow-y:auto; padding:4px 10px 10px; display:grid; grid-template-columns:1fr 1fr; gap:7px; align-content:start; }
.swatch{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 4px 7px; background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-md); cursor:pointer; transition:border-color .12s var(--ease),background .12s var(--ease),transform .08s var(--ease); }
.swatch:hover{ border-color:var(--border-strong); transform:translateY(-1px); }
.swatch.selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-border); }
.swatch canvas.chip{ width:34px; height:34px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,0.14); image-rendering:pixelated; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.25); }
.swatch .label{ font-size:9.5px; font-weight:500; text-align:center; color:var(--text-dim); line-height:1.25; }
.swatch.selected .label{ color:var(--accent-strong); }
.swatch .swatch-check{ position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%; background:var(--accent); color:var(--text-on-accent); display:none; align-items:center; justify-content:center; }
.swatch.selected .swatch-check{ display:flex; }
.swatch .swatch-check svg{ width:9px; height:9px; }
.swatch-fav{ position:absolute; top:2px; left:2px; width:17px; height:17px; padding:0; background:transparent; border:none; color:var(--text-faint); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .1s,color .1s; }
.swatch-fav svg{ width:12px; height:12px; }
.swatch:hover .swatch-fav, .swatch-fav.active{ opacity:1; }
.swatch-fav.active{ color:var(--accent-strong); }
.swatch-fav:hover{ background:transparent; border-color:transparent; color:var(--accent-strong); }
.cat-tab-icon{ width:11px; height:11px; }
.cat-tab-special.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-border); }
.palette-empty{ grid-column:1 / -1; padding:20px 10px; text-align:center; font-size:11.5px; color:var(--text-faint); line-height:1.6; }
#palette-foot{ padding:10px 14px; border-top:1px solid var(--border-soft); font-size:11px; color:var(--text-faint); line-height:1.6; }

/* ---- viewport ---- */
#viewport-wrap{ flex:1; position:relative; min-width:0; background:var(--bg-0); }
#canvas-holder{ position:absolute; inset:0; cursor:crosshair; }
#canvas-holder canvas{ display:block; width:100%; height:100%; }

/* Overlay "inspector" cards — the shared look for HUD / viewhint / stats. */
.inspector{ position:absolute; background:var(--bg-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-md); pointer-events:none; }
#hud{ top:14px; left:14px; padding:11px 14px; min-width:200px; max-width:270px; }
.hud-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:2.5px 0; }
.hud-row .hk{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; letter-spacing:.03em; text-transform:uppercase; }
.hud-row .hk .icon{ width:12px; height:12px; }
.hud-row b{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
#hud-hint-wrap{ margin-top:7px; padding-top:8px; border-top:1px solid var(--border-soft); min-height:1px; }
#hud-hint{ color:var(--accent-strong); font-size:11.5px; font-weight:600; line-height:1.5; }
#hud-rotation{ color:var(--accent-2-strong); font-size:10.5px; font-family:'JetBrains Mono',monospace; margin-top:3px; }

#viewhint{ top:14px; right:14px; padding:10px 13px; text-align:right; }
.hint-row{ display:flex; align-items:center; justify-content:flex-end; gap:7px; font-size:10.5px; color:var(--text-faint); padding:1.5px 0; }
.hint-row kbd{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-dim); background:var(--bg-3); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:3px; padding:1px 5px; }

#stats-panel{ top:14px; right:14px; padding:10px 13px; min-width:180px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim); line-height:1.75; }
#stats-panel .stat-row{ display:flex; justify-content:space-between; gap:16px; }
#stats-panel b{ color:var(--text); font-weight:600; }
#stats-panel .stat-warn{ color:var(--warn); }

/* ---- bottom dock: layer control + hotbar, one cohesive unit ---- */
#bottomdock{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; }
#bottomdock > *{ pointer-events:auto; }
#layerbar{ display:flex; align-items:center; gap:11px; background:var(--bg-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border-soft); padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-md); }
#layerbar label{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; }
#layer-slider{ width:190px; }
#layer-readout{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; color:var(--accent-strong); min-width:28px; text-align:center; }

#hotbar{ display:flex; gap:4px; background:var(--bg-glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--border-soft); padding:5px; border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.hotbar-slot{ position:relative; width:38px; height:38px; background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .1s,transform .08s; }
.hotbar-slot:hover{ transform:translateY(-1px); border-color:var(--border-strong); }
.hotbar-slot.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border), 0 0 10px -2px var(--accent); }
.hotbar-slot canvas.chip{ width:30px; height:30px; border-radius:2px; image-rendering:pixelated; }
.hotbar-num{ position:absolute; top:1px; left:2.5px; font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:600; color:var(--text-faint); pointer-events:none; }

/* ---- bottom status bar (document-level readouts, keeps the HUD lean) ---- */
#statusbar{ display:flex; align-items:center; gap:0; background:var(--bg-2); border-top:1px solid var(--border-soft); padding:0 6px; height:26px; font-size:11px; color:var(--text-dim); flex:none; z-index:20; }
.sb-item{ display:flex; align-items:center; gap:6px; padding:0 11px; height:100%; border-right:1px solid var(--border-soft); font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.sb-item .icon{ width:12px; height:12px; color:var(--text-faint); }
.sb-item b{ color:var(--text); font-weight:600; }
.sb-item.sb-link{ cursor:pointer; }
.sb-item.sb-link:hover{ color:var(--text); background:var(--bg-3); }
.sb-item.sb-ok b{ color:var(--good); }
.sb-item.sb-warn b{ color:var(--warn); }
.sb-fill{ flex:1; }

#crosshair{ position:absolute; top:50%; left:50%; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border:1.5px solid rgba(255,255,255,0.9); border-radius:50%; display:none; pointer-events:none; box-shadow:0 0 3px rgba(0,0,0,0.7),0 0 0 1px rgba(0,0,0,0.3); }
#crosshair.show{ display:block; }
#lock-hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background:radial-gradient(ellipse at center, rgba(15,18,23,0.55), rgba(6,7,9,0.78)); cursor:pointer; text-align:center; padding:20px; }
#lock-hint h3{ font-size:21px; margin:0; font-weight:700; }
#lock-hint.hidden{ display:none; }
.lock-hints{ display:grid; grid-template-columns:repeat(2,minmax(190px,1fr)); gap:7px 26px; }
.lock-hints .hint-row{ justify-content:flex-start; font-size:11.5px; }
.lock-hints .hint-row span{ color:var(--text-dim); }
@media (max-width:640px){ .lock-hints{ grid-template-columns:1fr; } }
#boot-loading{ position:absolute; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--bg-0); color:var(--text-dim); font-size:13px; letter-spacing:.02em; }
.boot-mark{ width:44px; height:44px; border-radius:var(--r-md); background:linear-gradient(155deg,var(--accent-strong),var(--accent) 55%,#8a5f1f); box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 16px rgba(0,0,0,0.4); animation:boot-pulse 1.4s ease-in-out infinite; }
@keyframes boot-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(.92); } }

/* ==========================================================================
   MODALS
   ========================================================================== */
#modal-backdrop{ position:fixed; inset:0; background:rgba(6,8,11,0.72); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
#modal-backdrop.show{ display:flex; }
#modal{ width:min(660px,100%); max-height:88vh; overflow-y:auto; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); animation:modal-in .16s var(--ease); }
@keyframes modal-in{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
#modal.wide{ width:min(1120px,100%); max-height:92vh; }
#modal-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border-soft); background:var(--bg-2); position:sticky; top:0; z-index:2; border-radius:var(--r-xl) var(--r-xl) 0 0; }
#modal-head-title{ display:flex; align-items:center; gap:10px; }
#modal-head-title .icon{ width:18px; height:18px; color:var(--accent-strong); }
#modal-head h2{ margin:0; font-size:16px; font-weight:700; }
#modal-body-content{ padding:20px 22px 24px; }
#modal-body-content h3{ font-size:11px; color:var(--accent-2-strong); font-family:'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; margin:20px 0 9px; }
#modal-body-content h3:first-child{ margin-top:0; }
#modal-body-content p,#modal-body-content li{ font-size:13px; line-height:1.65; color:var(--text); margin:0 0 8px; }
#modal-body-content ol,#modal-body-content ul{ margin:0 0 8px; padding-left:20px; }
#modal-body-content code{ font-family:'JetBrains Mono',monospace; background:var(--bg-4); border:1px solid var(--border); padding:1.5px 6px; border-radius:4px; font-size:12px; color:var(--accent-2-strong); }
#modal-body-content pre{ font-family:'JetBrains Mono',monospace; background:var(--bg-4); border:1px solid var(--border); padding:11px 13px; border-radius:var(--r-md); font-size:12px; color:var(--text); overflow-x:auto; line-height:1.6; }
.modal-actions{ display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
#close-modal{ background:transparent; border:1px solid transparent; color:var(--text-dim); width:30px; height:30px; padding:0; justify-content:center; border-radius:var(--r-md); }
#close-modal:hover{ color:var(--text); background:var(--bg-3); border-color:var(--border); }
.section-divider{ height:1px; background:var(--border-soft); margin:18px 0; border:none; }
#pattern-grid{ display:grid; gap:3px; margin:10px 0; }
.pcell{ width:26px; height:26px; border:1px solid var(--border); border-radius:2px; cursor:pointer; transition:background .08s; }

/* generic card used inside modals */
.card{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px 16px; }
.callout{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--r-md); border:1px solid; font-size:12.5px; line-height:1.55; }
.callout .icon{ flex:none; margin-top:1px; }
.callout-info{ background:var(--accent-2-soft); border-color:rgba(63,156,136,0.35); color:var(--text); }
.callout-info .icon{ color:var(--accent-2-strong); }
.callout-warn{ background:rgba(227,171,63,0.1); border-color:rgba(227,171,63,0.35); color:var(--text); }
.callout-warn .icon{ color:var(--warn); }
.callout-danger{ background:var(--danger-soft); border-color:rgba(224,85,74,0.4); color:var(--text); }
.callout-danger .icon{ color:var(--danger-strong); }
.callout-good{ background:var(--good-soft); border-color:rgba(92,191,125,0.35); color:var(--text); }
.callout-good .icon{ color:var(--good); }

/* segmented control (size/scope/style pickers) */
.segmented{ display:inline-flex; background:var(--bg-4); border:1px solid var(--border); border-radius:var(--r-md); padding:2px; gap:2px; }
.seg-btn{ background:transparent; border:none; color:var(--text-dim); font-size:11.5px; font-weight:600; padding:5.5px 11px; border-radius:5px; cursor:pointer; transition:background .1s,color .1s; }
.seg-btn:hover{ color:var(--text); }
.seg-btn.active{ background:var(--accent); color:var(--text-on-accent); }

/* ---- toast ---- */
#toast{ position:fixed; bottom:76px; left:50%; transform:translateX(-50%) translateY(10px); background:var(--bg-3); border:1px solid var(--border-strong); color:var(--text); padding:10px 16px; font-size:12.5px; font-weight:500; border-radius:var(--r-md); box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease); z-index:200; }
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#export-progress-track{ height:7px; background:var(--bg-4); border:1px solid var(--border); border-radius:4px; overflow:hidden; }
#export-progress-bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); transition:width .1s linear; }

/* ==========================================================================
   SHARED MODAL BITS
   ========================================================================== */
.export-form{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:12px 0 4px; }
.export-form label{ font-size:10px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; letter-spacing:.05em; text-transform:uppercase; }
.export-form #export-name{ width:240px; font-family:'Inter',sans-serif; font-size:13px; }
.export-form label.check{ flex-basis:100%; font-family:'Inter',sans-serif; font-weight:500; font-size:12.5px; color:var(--text); display:flex; gap:9px; align-items:center; }
.export-form input[type=number]{ width:72px; }
.export-errors{ margin-top:12px; padding:12px 14px; border:1px solid rgba(224,85,74,0.4); background:var(--danger-soft); border-radius:var(--r-md); }
.export-errors li{ font-family:'JetBrains Mono',monospace; font-size:11.5px !important; }
#export-result{ margin-top:14px; }
#export-result ol{ margin-top:10px; }

/* ---- Minecraft auto-link card ---- */
.link-card{ background:linear-gradient(160deg,rgba(217,164,65,0.1),rgba(63,156,136,0.06)); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:15px 16px; margin:14px 0; }
.link-card-head{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.link-card-head .icon{ color:var(--accent-strong); }
.link-card-head h4{ margin:0; font-size:13.5px; font-weight:700; font-family:'Sora',sans-serif; }
.link-card-head .chip-label{ margin-left:auto; }
.link-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:9px; }
.link-target{ flex:1; min-width:200px; background:var(--bg-4); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.link-target .icon{ color:var(--accent-2-strong); flex:none; }
.link-target b{ color:var(--text); font-weight:600; }
.link-manual{ display:none; margin-top:9px; gap:8px; }
.link-manual.show{ display:flex; }
.link-manual input{ flex:1; font-size:11.5px; }
.link-status{ margin-top:11px; font-size:12px; line-height:1.6; }
.link-status ul{ margin:6px 0 0; padding-left:18px; }
.link-unavailable{ font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:8px; }
.link-unavailable .icon{ color:var(--text-faint); flex:none; }
.link-candidates{ margin-top:8px; display:flex; flex-direction:column; gap:5px; max-height:150px; overflow-y:auto; }
.link-cand{ display:flex; align-items:center; gap:9px; padding:8px 10px; background:var(--bg-4); border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; text-align:left; font-size:11.5px; }
.link-cand:hover{ border-color:var(--accent-2); }
.link-cand.picked{ border-color:var(--accent); background:var(--accent-soft); }
.link-cand .lc-path{ flex:1; font-family:'JetBrains Mono',monospace; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-cand .lc-meta{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); flex:none; }

/* ==========================================================================
   STRUCTURES LIBRARY — asset browser
   ========================================================================== */
.lib{ display:flex; flex-direction:column; gap:12px; }
.lib-toolbar{ display:flex; flex-direction:column; gap:0; }
#lib-search-wrap{ position:relative; }
#lib-search-wrap .icon{ position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--text-faint); }
.lib-toolbar #lib-search{ width:100%; padding:9px 12px 9px 33px; font-size:13px; font-family:'Inter',sans-serif; }
.lib-body{ display:grid; grid-template-columns:168px 1fr 340px; gap:14px; min-height:440px; }

/* vertical category rail */
.lib-rail{ display:flex; flex-direction:column; gap:2px; background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:6px; overflow-y:auto; max-height:66vh; }
.lib-rail-btn{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:transparent; border:1px solid transparent; color:var(--text-dim); padding:8px 9px; border-radius:var(--r-sm); font-size:12px; font-weight:600; }
.lib-rail-btn:hover{ background:var(--bg-2); color:var(--text); }
.lib-rail-btn.active{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-border); }
.lib-rail-dot{ width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.3); }
.lib-rail-count{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-faint); }
.lib-rail-btn.active .lib-rail-count{ color:var(--accent-strong); }

.lib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(154px,1fr)); gap:9px; align-content:start; max-height:66vh; overflow-y:auto; padding-right:4px; }
.lib-card{ position:relative; display:flex; flex-direction:column; align-items:stretch; gap:2px; padding:7px 7px 9px; text-align:left; background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-md); white-space:normal; cursor:pointer; transition:border-color .12s var(--ease),transform .1s var(--ease),box-shadow .12s var(--ease); }
.lib-card:hover{ border-color:var(--border-strong); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.lib-card.selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border), var(--shadow-sm); }
.lib-thumb{ width:100%; height:auto; aspect-ratio:154/112; background:var(--bg-4); border:1px solid var(--border-soft); border-radius:var(--r-sm); image-rendering:auto; }
.lib-card-name{ font-size:12px; font-weight:600; margin-top:5px; color:var(--text); }
.lib-card-meta{ font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--text-faint); display:flex; align-items:center; gap:5px; }
.lib-star{ position:absolute; top:7px; right:7px; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.8); background:rgba(8,10,13,0.55); border-radius:var(--r-sm); cursor:pointer; backdrop-filter:blur(2px); }
.lib-star .icon{ width:13px; height:13px; }
.lib-star.on{ color:var(--accent-strong); }
.lib-star:hover{ color:var(--accent-strong); }

.lib-detail{ background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-lg); padding:14px; max-height:66vh; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.lib-big{ width:100%; height:auto; aspect-ratio:308/226; display:block; background:var(--bg-4); border:1px solid var(--border-soft); border-radius:var(--r-md); }
.lib-view-row{ display:flex; align-items:center; gap:6px; }
.lib-view-row .mono-dim{ margin-left:auto; }
.lib-title{ font-size:15.5px !important; color:var(--text) !important; font-family:'Sora',sans-serif !important; font-weight:700 !important; margin:0 !important; letter-spacing:0 !important; display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lib-chip{ font-family:'JetBrains Mono',monospace; font-size:9.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--text-on-accent-2); background:var(--accent-2); padding:2px 7px; border-radius:999px; }
.lib-desc{ font-size:12.5px !important; color:var(--text-dim) !important; line-height:1.55 !important; margin:0 !important; }
.lib-dims{ margin:0 !important; }
.lib-label{ display:block; font-size:10px; color:var(--text-faint); font-family:'JetBrains Mono',monospace; letter-spacing:.06em; text-transform:uppercase; margin:0 0 6px; }
.lib-detail select{ width:100%; }
.lib-field{ display:flex; flex-direction:column; gap:0; }

/* material swatches for the STYLE picker */
.lib-palette-row{ display:flex; flex-wrap:wrap; gap:6px; }
.lib-pal-btn{ display:flex; align-items:center; gap:7px; padding:6px 10px 6px 6px; background:var(--bg-4); border:1px solid var(--border); border-radius:999px; cursor:pointer; font-size:11px; font-weight:600; color:var(--text-dim); }
.lib-pal-btn:hover{ border-color:var(--border-strong); color:var(--text); }
.lib-pal-btn.active{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-strong); }
.lib-pal-swatch{ display:flex; border-radius:50%; overflow:hidden; width:16px; height:16px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.4); }
.lib-pal-swatch span{ flex:1; height:100%; }

.lib-blocks{ list-style:none; padding:0 !important; margin:0 !important; }
.lib-blocks li{ display:flex; align-items:center; gap:8px; font-size:11.5px !important; border-bottom:1px solid var(--border-soft); padding:5px 0 !important; margin:0 !important; }
.lib-block-swatch{ width:14px; height:14px; border-radius:3px; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,0.35); }
.lib-blocks li span.bname{ flex:1; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-blocks b{ font-family:'JetBrains Mono',monospace; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.lib-empty{ color:var(--text-faint) !important; font-size:12.5px !important; padding:26px 10px; text-align:center; }
.lib-foot{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; border-top:1px solid var(--border-soft); padding-top:11px; }
.pack-list li{ justify-content:space-between; gap:14px; }
.pack-list li>span:first-child{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pack-list li>span:last-child{ display:flex; gap:6px; flex:none; }
.lib-foot span{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); margin-right:auto; }

/* ==========================================================================
   MATERIALS MODAL
   ========================================================================== */
.mat-scroll{ max-height:52vh; overflow-y:auto; border:1px solid var(--border-soft); border-radius:var(--r-md); }
.mat-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.mat-table th{ position:sticky; top:0; background:var(--bg-3); text-align:left; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); font-weight:600; padding:8px 10px; }
.mat-table td{ padding:6px 10px; border-top:1px solid var(--border-soft); }
.mat-table .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mat-swatch{ width:13px; height:13px; border-radius:3px; display:inline-block; vertical-align:-2px; margin-right:7px; box-shadow:0 0 0 1px rgba(0,0,0,0.35); }

/* ==========================================================================
   IN-PAGE CONFIRM / PROMPT
   ========================================================================== */
#ask-backdrop{ position:fixed; inset:0; background:rgba(6,8,11,0.7); backdrop-filter:blur(2px); display:flex; align-items:center; justify-content:center; z-index:150; padding:16px; }
#ask-backdrop[hidden]{ display:none; }
#ask{ width:min(420px,100%); background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:20px 22px; animation:modal-in .14s var(--ease); }
#ask-message{ margin:0 0 13px; font-size:13.5px; line-height:1.6; }
#ask-input{ width:100%; }
#ask .modal-actions{ justify-content:flex-end; margin-top:15px; }

/* ==========================================================================
   PHOTO TO BLOCK ART
   ========================================================================== */
.photoart{ display:grid; grid-template-columns:300px 1fr; gap:18px; }
.photoart-controls{ display:flex; flex-direction:column; gap:13px; min-width:0; }
.photoart-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:22px 12px; border:1.5px dashed var(--border); border-radius:var(--r-lg); background:var(--bg-3); cursor:pointer; transition:border-color .12s,background .12s; }
.photoart-drop .icon{ width:26px; height:26px; color:var(--text-faint); }
.photoart-drop span:not(.mono-dim){ font-size:12.5px; color:var(--text-dim); font-weight:500; }
.photoart-drop:hover, .photoart-drop.over{ border-color:var(--accent); background:var(--accent-soft); }
.photoart-drop:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.photoart-sliders{ display:flex; flex-direction:column; gap:4px; }
.photoart-sliders .lib-label{ display:flex; justify-content:space-between; margin:8px 0 4px; }
.photoart-sliders .lib-label span{ color:var(--text-dim); font-weight:600; }
.photoart-cats{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; }
.photoart-custom-list{ max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; margin-top:8px; padding-right:4px; }
.check.sm{ font-family:'Inter',sans-serif; font-size:12px; color:var(--text-dim); display:flex; align-items:center; gap:7px; font-weight:500; }
.check.sm .lib-block-swatch{ width:12px; height:12px; }
#pa-error:empty{ display:none; }
.photoart-preview{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.photoart-preview-pane{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.photoart-preview-pane canvas{ max-width:100%; border:1px solid var(--border-soft); border-radius:var(--r-md); background:repeating-conic-gradient(var(--bg-4) 0% 25%, var(--bg-3) 0% 50%) 50% / 16px 16px; image-rendering:pixelated; }
@media (max-width:820px){ .photoart{ grid-template-columns:1fr; } }

/* ==========================================================================
   AUTOSAVE RESTORE BAR
   ========================================================================== */
#restore-bar{ position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:11px; background:var(--bg-glass); backdrop-filter:blur(10px); border:1px solid var(--accent-border); padding:9px 13px; border-radius:var(--r-md); z-index:30; font-size:12px; box-shadow:var(--shadow-md); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){ .lib-body{ grid-template-columns:140px 1fr; } .lib-detail{ grid-column:1 / -1; max-height:none; } }
@media (max-width:900px){ .lib-body{ grid-template-columns:1fr; } .lib-rail{ flex-direction:row; flex-wrap:wrap; max-height:none; } }
@media (max-width:800px){ #palette{ width:160px; } #hud,#viewhint,#statusbar .sb-item:nth-child(n+4){ display:none; } .group label{ display:none; } }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:6px; border:2px solid var(--bg-2); background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--text-faint); background-clip:padding-box; }

/* ==========================================================================
   ACCOUNT / AUTH
   ========================================================================== */
#account-group button .icon{ width:15px; height:15px; }
.account-unverified .icon{ color:var(--accent-strong); }
.auth-form{ display:flex; flex-direction:column; gap:14px; max-width:360px; }
.auth-tabs{ display:flex; gap:4px; background:var(--bg-3); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:3px; }
.auth-tab{ flex:1; background:transparent; border:none; color:var(--text-dim); font-weight:600; font-size:12.5px; padding:7px 10px; border-radius:calc(var(--r-md) - 3px); }
.auth-tab:hover{ background:var(--bg-4); border-color:transparent; }
.auth-tab.active{ background:var(--accent-soft); color:var(--accent-strong); }
.field-list{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field label{ font-weight:600; color:var(--text-dim); }
.field input{ width:100%; box-sizing:border-box; }
.form-error{ background:var(--danger-soft); border:1px solid rgba(224,85,74,0.4); color:var(--danger-strong); font-size:12.5px; padding:8px 11px; border-radius:var(--r-sm); }
.form-hint{ font-size:12px; color:var(--text-dim); margin:0; line-height:1.55; }
.auth-submit{ width:100%; padding:9px; }
.link-btn{ background:transparent; border:none; color:var(--accent-2-strong); font-size:12px; font-weight:600; padding:2px 0; align-self:flex-start; }
.link-btn:hover{ background:transparent; border-color:transparent; text-decoration:underline; }
.turnstile-box{ min-height:1px; }
.account-panel{ display:flex; flex-direction:column; gap:11px; max-width:360px; }
.account-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.account-email{ font-weight:700; font-size:14px; }
.plan-badge{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-dim); }
.plan-badge.plan-pro{ color:var(--accent-strong); border-color:var(--accent-border); background:var(--accent-soft); }
.account-unverified-hint{ color:var(--accent-strong); }
.danger-text{ color:var(--danger-strong); }
.danger-text:hover{ border-color:var(--danger); background:var(--danger-soft); }

/* ---- Cloud Projects modal ---- */
.cloud-panel{ display:flex; flex-direction:column; gap:14px; }
.cloud-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cloud-project-list{ display:flex; flex-direction:column; gap:1px; background:var(--border-soft); border:1px solid var(--border-soft); border-radius:var(--r-md); overflow:hidden; }
.cloud-project-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg-2); padding:10px 12px; flex-wrap:wrap; }
.cloud-project-name{ font-weight:600; font-size:13px; }
.cloud-project-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.cloud-project-actions button{ padding:5px 9px; font-size:11.5px; }

/* ---- Pricing modal ---- */
.pricing-panel{ display:flex; flex-direction:column; gap:14px; max-width:420px; }
.pricing-head{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pricing-plan-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:15px; padding:8px 10px; border-radius:var(--r-md); background:var(--bg-3); border:1px solid var(--border-soft); }
.pricing-plan-name.pricing-pro{ background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent-strong); }
.pricing-price{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:13px; }
.pricing-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.pricing-table td{ padding:7px 10px; border-top:1px solid var(--border-soft); }
.pricing-feature{ color:var(--text-dim); }
.pricing-value{ text-align:center; font-variant-numeric:tabular-nums; }
.pricing-value.pricing-pro{ color:var(--accent-strong); font-weight:600; }
.pricing-cta{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pricing-cta button{ width:100%; padding:9px; }

/* ==========================================================================
   LAYERS PANEL
   ========================================================================== */
.layer-row{ display:flex; align-items:center; gap:12px; background:var(--bg-2); padding:9px 12px; flex-wrap:wrap; }
.layer-row.active{ background:var(--accent-soft); }
.layer-toggles{ display:flex; gap:4px; flex:none; }
.icon-toggle{ width:26px; height:26px; padding:0; display:flex; align-items:center; justify-content:center; background:var(--bg-3); border:1px solid var(--border-soft); color:var(--text-dim); border-radius:var(--r-sm); }
.icon-toggle svg{ width:14px; height:14px; }
.icon-toggle.off{ color:var(--text-faint); background:var(--bg-4); }
.icon-toggle.on{ color:var(--accent-strong); border-color:var(--accent-border); background:var(--accent-soft); }
.layer-name-btn{ font-size:13px; font-weight:600; color:var(--text); padding:0; }
.layer-name-btn:hover{ color:var(--accent-2-strong); text-decoration:underline; }

/* ==========================================================================
   COMMAND PALETTE (Ctrl+K)
   ========================================================================== */
#cmdk-backdrop{ position:fixed; inset:0; background:rgba(6,8,11,0.55); backdrop-filter:blur(2px); display:flex; align-items:flex-start; justify-content:center; z-index:200; padding:16px; padding-top:12vh; }
#cmdk-backdrop[hidden]{ display:none; }
#cmdk{ width:min(560px,100%); background:var(--bg-2); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); animation:modal-in .12s var(--ease); overflow:hidden; }
#cmdk-input-wrap{ position:relative; border-bottom:1px solid var(--border-soft); }
#cmdk-input-wrap .icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); pointer-events:none; }
#cmdk-input{ width:100%; box-sizing:border-box; background:transparent; border:none; padding:14px 14px 14px 40px; font-size:14px; color:var(--text); }
#cmdk-input:focus{ outline:none; box-shadow:none; }
#cmdk-results{ max-height:min(360px,50vh); overflow-y:auto; padding:6px; }
.cmdk-row{ padding:8px 11px; border-radius:var(--r-sm); font-size:13px; color:var(--text-dim); cursor:pointer; }
.cmdk-row.active{ background:var(--accent-soft); color:var(--accent-strong); }
.cmdk-empty{ padding:14px 11px; font-size:12.5px; color:var(--text-faint); text-align:center; }