/* ============================================================================
   Grimshackle Shoppekeep — base stylesheet (desktop / all-screens).

   The app renders its markup in JS. Runtime-themed COLOURS (the paint light/dark
   theme, per-item rarity/tier tags) are still applied inline because they change
   on every render — increasingly via CSS custom properties (e.g. --ground, --ink)
   whose static rules live here. Structure/resets/animation/hover polish live here.

   Responsive overrides are in mobile.css, linked AFTER this file so it can be
   dropped (remove that one <link>) to disable the mobile layout entirely.
   ============================================================================ */

*{box-sizing:border-box}
body{margin:0;background:#d9d5c8}

@keyframes stampSlam{
  0%{opacity:0;transform:rotate(var(--rot,-12deg)) scale(2.8)}
  55%{opacity:1}
  100%{opacity:1;transform:rotate(var(--rot,-12deg)) scale(1)}
}

input[type=range]{accent-color:#9d5a33;height:6px;cursor:pointer}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c4ba9f;border-radius:6px;border:2px solid transparent;background-clip:content-box}

/* hover polish (DC style-hover equivalents) */
.sk-card:hover{border-color:#9d5a33 !important;box-shadow:0 5px 13px rgba(120,74,30,.15) !important}
.sk-darkbtn:hover{border-color:#9d5a33 !important;color:#f7f1e7 !important}
.sk-savebtn:hover{border-color:#c4a14b !important;color:#f7f1e7 !important}
.sk-clear:hover,.sk-x:hover{color:#b2503f !important}
.sk-row:hover{border-color:#41618a !important}

/* ── Structural chrome (migrated out of inline styles) ──────────────────────
   These elements carry no runtime-computed colours, so their whole rule lives
   here and the render just emits the class. Themed surfaces (bands, cards, the
   shop body) keep their paint/theme colours inline as they are converted. ── */

/* full-viewport app shell */
.sk-shell{height:100vh;min-height:680px;display:flex;flex-direction:column;background:#d9d5c8;font-family:'Hanken Grotesk',sans-serif;overflow:hidden;color:#211e15}

/* shop top bar + its right-hand action cluster */
.sk-topbar{height:60px;flex:0 0 auto;background:#262219;border-bottom:2px solid #9d5a33;display:flex;align-items:center;gap:13px;padding:0 20px}
.sk-topbtns{display:flex;align-items:center;gap:9px}

/* site footer — slim dark bar mirroring Rollstones/Tavernwright: badge + brand at
   left, a single Licenses link pushed right, and the beta version small underneath. */
.sk-foot{flex:0 0 auto;background:#161310;color:#8f836c}
.sk-foot-inner{max-width:1180px;margin:0 auto;padding:6px 16px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.sk-foot-badge{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#a4502c,#7d3a20);border-radius:5px}
.sk-foot-name{font:600 12px 'Spectral',serif;color:#cdbfa6}
.sk-foot-link{font:600 11px 'Hanken Grotesk',sans-serif;color:#8f836c;text-decoration:none;margin-left:auto;padding-left:8px}
.sk-foot-link:hover{color:#cdbfa6}
.sk-foot-beta{max-width:1180px;margin:0 auto;padding:0 16px 5px;font:500 10px 'JetBrains Mono',monospace;color:#6f6552;letter-spacing:.04em}

/* ── Shop theme palette ─────────────────────────────────────────────────────
   The paint engine picks a light or dark CONTENT theme by backdrop luminance.
   Following Tavernwright: the theme is a set of CSS variables on the shell, and
   .sk-dark (added to the shell for a dark paint) re-defines them — instead of the
   colours being threaded inline through every element. Per-shop/per-item accents
   (--sk-accent, section colours, rarity tags) and the paint backdrop stay inline
   as they are genuine per-element data. Values mirror paintCT() in the JS. ── */
.sk-shell{--sk-band:#efe9dc;--sk-ink:#211e15;--sk-sub:#8a7e64;--sk-border:#e0d7c4;--sk-card:#fdf9ef;--sk-shadow:0 4px 12px rgba(20,12,4,.16)}
.sk-shell.sk-dark{--sk-band:#241d13;--sk-ink:#f2e6cf;--sk-sub:#a99e83;--sk-border:#463726;--sk-card:#33291b;--sk-shadow:0 6px 16px rgba(0,0,0,.45)}

/* top-bar Buy/Sell tabs + action buttons */
.sk-brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.sk-brand-name{font:700 22px 'Spectral',serif;color:#f0e6d2;letter-spacing:.01em}
.sk-brand-sub{font:600 11px 'JetBrains Mono',monospace;letter-spacing:.26em;color:#c4a14b}
.sk-tabwrap{flex:1;display:flex;justify-content:center}
.sk-tabs{display:flex;background:#1c1810;border:1px solid #3d362a;border-radius:9px;padding:3px;gap:2px}
.sk-tab{padding:7px 22px;border-radius:6px;cursor:pointer;font:700 13px 'Hanken Grotesk',sans-serif}
.sk-btn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;font:600 12px 'Hanken Grotesk',sans-serif;cursor:pointer}
.sk-btn-dark{background:#241f15;border:1px solid #3d362a;color:#e6dcc6}
.sk-btn-clay{background:#9d5a33;border:1px solid #844a26;color:#f7f1e7;padding:0 13px}

/* flair band (crest + shop name) */
.sk-flair{flex:0 0 auto;background:var(--sk-band);border-bottom:1px solid var(--sk-border);display:flex;align-items:center;gap:16px;padding:13px 20px}
.sk-crest{width:120px;height:120px;flex:0 0 auto;object-fit:contain;display:block}
.sk-flair-txt{min-width:0;flex:1}
.sk-flair-type{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.2em;color:#9d5a33;text-transform:uppercase}
.sk-shopname{font:700 28px/1.04 'Spectral',serif;color:var(--sk-ink);margin-top:2px}

/* info band (keeper + coin + filters) */
.sk-info{flex:0 0 auto;background:var(--sk-band);border-bottom:1px solid var(--sk-border);display:flex;align-items:center;gap:14px;padding:11px 20px;min-height:66px;flex-wrap:wrap}
.sk-keeper{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.sk-keeper-av{width:40px;height:40px;flex:0 0 auto;border-radius:10px;background:#9d5a33;display:grid;place-items:center;font:800 16px 'Spectral',serif;color:#f7e6cf}
.sk-keeper-txt{min-width:0}
.sk-keeper-name{font:700 14px 'Hanken Grotesk',sans-serif;color:var(--sk-ink);line-height:1.12}
.sk-keeper-name span{font-weight:500;color:var(--sk-sub)}
.sk-keeper-dem{font:italic 400 12px 'Spectral',serif;color:var(--sk-sub)}
.sk-coin{display:flex;flex-direction:column;flex:0 0 auto;background:#e3dac6;border:1px solid var(--sk-border);border-radius:9px;padding:5px 13px;line-height:1.18}
.sk-dark .sk-coin{background:#1c1710}
.sk-coin-lbl{font:600 8px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--sk-sub);text-transform:uppercase}
.sk-coin-val{font:700 15px 'JetBrains Mono',monospace;color:#7a4a1e}
.sk-dark .sk-coin-val{color:#e0b257}
.sk-div{width:1px;height:34px;background:var(--sk-border);flex:0 0 auto}
.sk-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.sk-filters-lbl{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--sk-sub);text-transform:uppercase;margin-right:2px}
.sk-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;cursor:pointer;font:600 12.5px 'Hanken Grotesk',sans-serif}
.sk-chip-n{font:600 10px 'JetBrains Mono',monospace;opacity:.65}
.sk-sellbar{display:flex;align-items:center;gap:9px;flex:1;min-width:220px}
.sk-search{position:relative;flex:0 0 auto;width:230px;max-width:40vw}
.sk-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%)}
.sk-search input{width:100%;height:36px;border:1px solid #cdc4ad;border-radius:9px;background:#fff;padding:0 12px 0 32px;font:500 13px 'Hanken Grotesk',sans-serif;color:#211e15}

/* shop body: scrolling shelves column + fixed tally slip */
.sk-shopbody{flex:1;min-height:0;display:flex}
.sk-gridcol{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.sk-gridhead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:15px 20px 9px}
.sk-gridhead-l{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.14em;color:var(--sk-sub);text-transform:uppercase}
.sk-gridhead-r{font:500 11px 'Hanken Grotesk',sans-serif;color:var(--sk-sub)}
.sk-scroll{flex:1;min-height:0;overflow:auto;padding:6px 20px 22px}
.sk-buyscroll{display:flex;flex-direction:column;gap:16px}
.sk-section{background:var(--sk-card);border:1px solid var(--sk-border);border-left:3px solid var(--sk-secaccent,#9d5a33);border-radius:5px 14px 14px 5px;padding:14px 16px 16px}
.sk-section-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sk-section-dot{width:6px;height:6px;border-radius:50%;background:var(--sk-sectitle,#9d5a33);flex:0 0 auto}
.sk-section-title{font:700 14px 'Spectral',serif;color:var(--sk-sectitle,#9d5a33);letter-spacing:.01em}
.sk-section-count{font:600 10px 'JetBrains Mono',monospace;color:var(--sk-sub)}
.sk-itemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:9px}
.sk-sellgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:10px}

/* item / sell cards */
.sk-card{position:relative;background:var(--sk-card);border:1px solid var(--sk-border);border-radius:11px;padding:11px 12px 12px;cursor:pointer;box-shadow:0 1px 2px rgba(40,28,12,.05)}
.sk-card-name{font:700 13.5px/1.25 'Hanken Grotesk',sans-serif;color:var(--sk-ink)}
.sk-card-sub{font:500 11px/1.35 'Hanken Grotesk',sans-serif;color:var(--sk-sub);margin-top:4px;min-height:30px}
.sk-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:9px}
.sk-price{display:inline-flex;align-items:center;gap:5px;background:#2c2114;color:#e9c886;padding:4px 11px 4px 9px;font:600 12px 'JetBrains Mono',monospace;border-radius:3px 9px 9px 3px;transform:rotate(-4deg);box-shadow:0 4px 7px rgba(20,12,4,.34);margin-left:-16px;position:relative;z-index:1;flex:0 0 auto}
.sk-price-dot{width:6px;height:6px;border-radius:50%;background:#f3efe6;box-shadow:inset 0 0 0 1.5px #2c2114}
.sk-tag{font:600 8px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:3px 7px;white-space:nowrap}
.sk-card-foot-r{flex:0 0 auto}
.sk-disc{position:relative;display:inline-flex;align-items:center;font:800 12px 'JetBrains Mono',monospace;letter-spacing:.02em;padding:5px 12px 5px 18px;white-space:nowrap;border-radius:2px 5px 5px 2px;transform:rotate(3deg);box-shadow:0 3px 6px rgba(20,12,4,.3);clip-path:polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%)}
.sk-disc-dot{position:absolute;left:5px;top:50%;width:5px;height:5px;border-radius:50%;transform:translateY(-50%);opacity:.75}

/* tally / buying slip */
.sk-slip{width:288px;flex:0 0 auto;background:var(--sk-card);border-left:1px solid var(--sk-border);display:flex;flex-direction:column}
.sk-slip-head{flex:0 0 auto;padding:14px 18px;border-bottom:1px solid var(--sk-border);display:flex;align-items:center;gap:9px}
.sk-slip-title{font:700 17px 'Spectral',serif;color:var(--sk-ink)}
.sk-slip-clear{margin-left:auto;font:600 11px 'Hanken Grotesk',sans-serif;color:var(--sk-sub);cursor:pointer}
.sk-slip-body{flex:1;min-height:0;overflow:auto;padding:6px 18px}
.sk-slip-empty{height:100%;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px}
.sk-slip-empty-txt{font:italic 400 13px 'Spectral',serif;color:var(--sk-sub);margin-top:10px}
.sk-slip-foot{flex:0 0 auto;padding:14px 18px;border-top:1px solid var(--sk-border);background:var(--sk-band)}
.sk-hag-head{display:flex;justify-content:space-between;align-items:baseline}
.sk-hag-lbl{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--sk-sub);text-transform:uppercase}
.sk-sub-row{display:flex;justify-content:space-between;font:500 12px 'Hanken Grotesk',sans-serif;color:var(--sk-sub)}
.sk-sub-row span:last-child{font-family:'JetBrains Mono',monospace}
.sk-tot-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;padding-top:9px;border-top:2px solid var(--sk-ink)}
.sk-tot-lbl{font:700 15px 'Spectral',serif;color:var(--sk-ink)}
.sk-tot-val{font:700 22px 'JetBrains Mono',monospace;color:#7a4a1e}
.sk-dark .sk-tot-val{color:#e0b257}
.sk-deal-btn{height:42px;margin-top:13px;border-radius:9px;background:#9d5a33;border:1px solid #844a26;color:#f7f1e7;display:flex;align-items:center;justify-content:center;gap:8px;font:700 14px 'Hanken Grotesk',sans-serif;cursor:pointer}
.sk-range{width:100%;margin:9px 0 11px}

/* tally line */
.sk-tl{position:relative;padding:10px 0;border-bottom:1px solid var(--sk-border)}
.sk-tl-head{display:flex;justify-content:space-between;gap:7px}
.sk-tl-name{font:700 13px 'Hanken Grotesk',sans-serif;color:var(--sk-ink)}
.sk-tl-line{font:600 12px 'JetBrains Mono',monospace;color:var(--sk-sub);white-space:nowrap}
.sk-tl-qtyrow{display:flex;align-items:center;gap:9px;margin-top:7px}
.sk-stepper{display:flex;align-items:center;border:1px solid var(--sk-border);border-radius:7px;overflow:hidden}
.sk-step{width:25px;height:25px;display:grid;place-items:center;color:#9d5a33;cursor:pointer;font-size:16px;line-height:1}
.sk-step-n{width:26px;text-align:center;font:600 12px 'JetBrains Mono',monospace;color:var(--sk-ink)}
.sk-tl-unit{font:500 11px 'Hanken Grotesk',sans-serif;color:var(--sk-sub)}
.sk-tl-x{margin-left:auto;color:#c0b69c;cursor:pointer;font-size:15px}
.sk-tl-soldrow{display:flex;align-items:center;gap:8px;margin-top:6px}
.sk-tl-soldqty{font:600 11px 'Hanken Grotesk',sans-serif;color:var(--sk-sub)}
.sk-stamp{position:absolute;border-radius:6px;padding:0 7px;font-family:'Spectral',serif;letter-spacing:.08em;opacity:.92;animation:stampSlam .45s cubic-bezier(.2,.7,.3,1.5) both;pointer-events:none}

/* ── Setup / creation screen ────────────────────────────────────────────────
   These controls are a fixed light palette (they don't follow the paint theme),
   so their rules carry literal colours. Only per-element STATE colours — the
   active segment/tile/quality/location, the toggle box, the paint swatches —
   stay inline, exactly as Tavernwright keeps its dynamic bits inline. ── */
.sk-setup{flex:1;min-height:0;overflow:auto;display:grid;place-items:center;padding:28px}
.sk-setup-inner{display:flex;flex-direction:column;align-items:center}
/* min() caps the width intrinsically — a plain max-width:% is circular inside the
   centered grid and lets the fixed width overflow the viewport on a phone. The
   viewport bound subtracts the grid's 28px side padding so the form fits its
   content box exactly and never spills past the screen edge. */
.sk-setup-inner.sk-compact{width:min(860px, calc(100vw - 56px))}
.sk-setup-inner.sk-open{width:min(760px, calc(100vw - 56px))}
.sk-logo{width:400px;max-width:64%;height:auto;display:block;filter:drop-shadow(0 14px 24px rgba(33,20,8,.3))}
.sk-logo-fb{font:700 56px 'Spectral',serif;color:#6a4a26;letter-spacing:.01em;text-align:center;filter:drop-shadow(0 10px 18px rgba(33,20,8,.25))}
.sk-tagline{font:italic 500 16px 'Spectral',serif;color:#6a4a26;margin-top:8px}
.sk-layout{display:inline-flex;align-items:center;gap:9px;margin-top:12px}
.sk-layout-lbl{font:600 8px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8a7e64}
.sk-layout-sw{display:inline-flex;gap:3px;background:#e6ded0;border:1px solid #cdc4ad;border-radius:9px;padding:3px}
.sk-seg{padding:5px 12px;border-radius:7px;cursor:pointer;font:700 11px 'Hanken Grotesk',sans-serif;color:#7a6f58}
.sk-seg-on{background:#9d5a33;color:#f7f1e7}
.sk-fullw{width:100%}

/* expanded form */
.sk-form{width:100%;margin-top:16px;background:#f1ece0;border:1px solid #cdc4ad;border-radius:14px;box-shadow:0 16px 40px rgba(33,24,12,.14);padding:22px 24px}
.sk-form-lbl{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.14em;color:#8a7e64;text-transform:uppercase}
.sk-mt{margin:18px 0 9px}
.sk-mt2{margin:2px 0 9px}
.sk-sys-row{display:flex;gap:6px}
.sk-sys{flex:1;height:38px;border-radius:8px;display:grid;place-items:center;font:600 12.5px 'Hanken Grotesk',sans-serif;cursor:pointer}
.sk-trade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sk-tile{border-radius:11px;padding:13px 10px;text-align:center;cursor:pointer}
.sk-tile-ic{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 7px;border-radius:9px}
.sk-tile-name{font:700 14px 'Spectral',serif}
.sk-tile-sub{font:500 10px 'Hanken Grotesk',sans-serif}
.sk-loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sk-loc{height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:7px;font:600 13px 'Hanken Grotesk',sans-serif;cursor:pointer}
.sk-shelfstand{display:flex;gap:26px;margin-top:18px}
.sk-shelfcol{flex:1.25}
.sk-standcol{flex:1}
.sk-slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sk-slider-val{font:700 12px 'Hanken Grotesk',sans-serif;color:#7a4a1e}
.sk-slider-ends{display:flex;justify-content:space-between;margin-top:5px;font:500 10px 'Hanken Grotesk',sans-serif;color:#9a8d72}
.sk-qual-row{display:flex;gap:5px}
.sk-qual{flex:1;height:34px;border-radius:7px;display:grid;place-items:center;font:600 11.5px 'Hanken Grotesk',sans-serif;cursor:pointer}
.sk-check-row{display:flex;align-items:center;gap:9px;cursor:pointer}
.sk-check-row+.sk-check-row{margin-top:11px}
.sk-check-first{margin-top:18px}
.sk-check-on{display:grid;place-items:center;width:22px;height:22px;border-radius:6px}
.sk-check-off{width:22px;height:22px;border-radius:6px;background:#fff;border:1px solid #cdc4ad}
.sk-check-txt{font:600 13px 'Hanken Grotesk',sans-serif;color:#3a3326}
.sk-backdrop-row{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sk-backdrop-wrap{flex:0 0 auto;min-width:180px}
.sk-namesec{margin-top:18px;border-top:1px solid #e3dcc9;padding-top:16px}
.sk-namesec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sk-namesec-hint{font:500 11px 'Hanken Grotesk',sans-serif;color:#9a8d72}
.sk-name-row{display:flex;gap:9px}
.sk-name-input{flex:1;min-width:0;height:48px;border:1px solid #cdc4ad;border-radius:10px;background:#fff;padding:0 16px;font:600 18px 'Spectral',serif;color:#211e15}
.sk-dice{width:48px;height:48px;flex:0 0 auto;border-radius:10px;background:#9d5a33;border:1px solid #844a26;color:#f7f1e7;display:grid;place-items:center;cursor:pointer}
.sk-raise{height:52px;margin-top:20px;border-radius:11px;background:#9d5a33;border:1px solid #844a26;color:#f7f1e7;font:700 16px 'Hanken Grotesk',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 20px rgba(120,74,30,.26)}
.sk-belowform{margin-top:13px}
.sk-loadwrap{margin-top:14px;display:flex;justify-content:center}
.sk-surprise{font:600 12px 'Hanken Grotesk',sans-serif;color:#8a4d2a;cursor:pointer}
.sk-loadbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:10px;background:#41618a;border:1px solid #34507a;color:#eef2f8;font:700 13px 'Hanken Grotesk',sans-serif;cursor:pointer;box-shadow:0 6px 16px rgba(40,70,110,.22)}

/* compact form */
.sk-compactform{width:100%;margin-top:16px}
.sk-cbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#f1ece0;border:1px solid #cdc4ad;border-radius:14px;box-shadow:0 16px 40px rgba(33,24,12,.14);padding:10px 11px}
.sk-name-sm{flex:1 1 100px;min-width:96px;height:42px;border:1px solid #cdc4ad;border-radius:9px;background:#fff;padding:0 12px;font:600 15px 'Spectral',serif;color:#211e15}
.sk-dice-sm{width:42px;height:42px;flex:0 0 auto;border-radius:9px;background:#9d5a33;border:1px solid #844a26;color:#f7f1e7;display:grid;place-items:center;cursor:pointer}
.sk-raise-sm{flex:0 0 auto;height:42px;padding:0 15px;border-radius:9px;background:#9d5a33;border:1px solid #844a26;color:#f7f1e7;font:700 13.5px 'Hanken Grotesk',sans-serif;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:0 8px 20px rgba(120,74,30,.26)}
.sk-raise-mini{display:none}  /* short label shown only on mobile (see mobile.css) */
.sk-togglegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.sk-actions{margin-top:13px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.sk-loadbtn-sm{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;background:#41618a;border:1px solid #34507a;color:#eef2f8;font:700 13px 'Hanken Grotesk',sans-serif;cursor:pointer;box-shadow:0 6px 16px rgba(40,70,110,.22)}

/* dropdown (compact) */
.sk-dd{position:relative;flex:0 0 auto}
.sk-dd-btn{height:42px;padding:0 9px;border-radius:9px;background:#fff;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font:600 12px 'Hanken Grotesk',sans-serif;color:#3a3326;white-space:nowrap;border:1px solid #cdc4ad}
.sk-dd-caret{color:#9a8d72;font-size:9px}
.sk-ddmenu{position:absolute;top:calc(100% + 5px);left:0;min-width:150px;z-index:40;background:#fff;border:1px solid #cdc4ad;border-radius:11px;box-shadow:0 14px 34px rgba(33,24,12,.24);padding:5px}
.sk-dd-menulbl{font:600 8px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8a7e64;padding:5px 9px 4px}
.sk-dd-opt{padding:8px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;font:600 13px 'Hanken Grotesk',sans-serif;color:#3a3326}

/* toggle chip (compact) */
.sk-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 10px;border-radius:9px;border:1px solid #ddd3bd;background:#faf7ef}
.sk-toggle-box{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;border-radius:6px}
.sk-toggle-box-off{flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:#fff;border:1px solid #cdc4ad}
.sk-toggle-txt{min-width:0;line-height:1.15}
.sk-toggle-title{display:block;font:700 12px 'Hanken Grotesk',sans-serif;color:#3a3326}
.sk-toggle-sub{display:block;font:600 10px 'Hanken Grotesk',sans-serif}

/* paint picker */
.sk-paint{position:relative}
.sk-paint-chip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 10px;border-radius:9px;background:#faf7ef;border:1px solid #ddd3bd}
.sk-paint-sw{position:relative;flex:0 0 auto;width:22px;height:22px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
.sk-paint-txt{min-width:0;line-height:1.15}
.sk-paint-name{display:block;font:700 12px 'Hanken Grotesk',sans-serif;color:#3a3326}
.sk-paint-mode{display:block;font:600 10px 'Hanken Grotesk',sans-serif;color:#8a7e64}
.sk-paint-caret{margin-left:auto;color:#9a8d72;font-size:9px}
.sk-paint-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;padding:9px;background:#f3f1e9;border:1px solid #cac3b3;border-radius:12px;box-shadow:0 18px 40px rgba(20,12,4,.34);display:grid;grid-template-columns:repeat(8,30px);gap:6px;width:max-content;max-width:92vw}
.sk-paint-opt{position:relative;width:30px;height:30px;border-radius:7px;overflow:hidden;cursor:pointer}

/* load modal + loading overlay */
.sk-modal-bg{position:fixed;inset:0;z-index:60;background:rgba(26,18,9,.55);display:grid;place-items:center;padding:22px;font-family:'Hanken Grotesk',sans-serif}
.sk-modal{width:520px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;background:#f3f1e9;border:1px solid #cac3b3;border-radius:15px;box-shadow:0 28px 70px rgba(10,6,2,.5);overflow:hidden}
.sk-modal-head{padding:16px 20px;border-bottom:1px solid #e0d9c8;display:flex;align-items:center;gap:10px}
.sk-modal-title{font:700 19px 'Spectral',serif;color:#211e15}
.sk-modal-x{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#ece9df;border:1px solid #cac3b3;color:#7a6f58;font-size:16px;cursor:pointer}
.sk-modal-body{flex:1;min-height:0;overflow:auto;padding:12px 16px}
.sk-saved{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid #e0d9c8;border-radius:11px;margin-bottom:8px;cursor:pointer;background:#fff}
.sk-saved-txt{flex:1;min-width:0}
.sk-saved-name{font:700 15px 'Spectral',serif;color:#211e15}
.sk-saved-sub{font:500 11px 'Hanken Grotesk',sans-serif;color:#8a7e64}
.sk-saved-load{flex:0 0 auto;height:32px;padding:0 14px;border-radius:8px;background:#41618a;color:#eef2f8;font:700 12px 'Hanken Grotesk',sans-serif;display:grid;place-items:center;cursor:pointer}
.sk-saved-del{flex:0 0 auto;color:#c0b69c;cursor:pointer;font-size:18px;padding:0 3px}
.sk-modal-empty{text-align:center;padding:34px 20px;font:italic 400 14px 'Spectral',serif;color:#9a8d72}
.sk-loading{position:fixed;inset:0;z-index:80;background:rgba(26,18,9,.45);display:grid;place-items:center;font-family:'Hanken Grotesk',sans-serif}
.sk-loading-card{background:#f3f1e9;border:1px solid #cac3b3;border-radius:12px;padding:16px 26px;font:italic 500 15px 'Spectral',serif;color:#6a4a26;box-shadow:0 18px 50px rgba(10,6,2,.4)}