/* HexaEcom Pallet Planner · shared site styles and theme tokens */
:root{
  --bg:#f4f5f7; --panel:#ffffff; --panel2:#f7f8fa; --seg:#eceff3; --ink:#14171c; --muted:#5d6878; --faint:#8a94a3; --line:#dde2e9; --line2:#eef1f5;
  --brand:#111418; --brand-ink:#ffffff; --accent:#2b59c3; --accent-soft:#e8eefb; --ring:#b7c9f3;
  --ok:#1a8a4a; --warn:#b76e00; --err:#c0262d; --info:#1d5fc4;
  --ok-bg:#e8f6ee; --warn-bg:#fff4e0; --err-bg:#fdecec; --info-bg:#e9f1fd;
  --ok-ink:#135f34; --warn-ink:#7a4a00; --err-ink:#8d1a20; --info-ink:#153f86;
  --hl-bg:#fff8e6; --hl-line:#f1d58f;
  --head:#ffffff; --head-ink:#111418; --head-muted:#5d6878; --head-btn:#f2f4f7; --head-line:#dde2e9;
  --hero:#eef2f8; --hero-ink:#111418; --hero-muted:#4a5565; --hero-eyebrow:#2b59c3; --hero-shadow:0 -10px 40px rgba(16,24,40,.12);
  --view3d:#eef2f7; --floor3d:#dfe5ec; --cfloor3d:#d9dee5; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --radius:10px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1115; --panel:#161a20; --panel2:#1b2027; --seg:#222830; --ink:#e8ebef; --muted:#a2acb9; --faint:#7d8794; --line:#2a313b; --line2:#222830;
    --brand:#f2f4f7; --brand-ink:#111418; --accent:#7ea3ff; --accent-soft:#1b2640; --ring:#33508f;
    --ok-bg:#12291d; --warn-bg:#2d2210; --err-bg:#311517; --info-bg:#132341;
    --ok-ink:#7fd6a2; --warn-ink:#f3c26b; --err-ink:#ff9a9f; --info-ink:#9bbcff;
    --ok:#4cc27e; --warn:#e2a23a; --err:#ff6b70; --info:#7ea3ff;
    --hl-bg:#2a2414; --hl-line:#5a4a1f;
    --head:#0a0c0f; --head-ink:#ffffff; --head-muted:#a6b0bf; --head-btn:#181d24; --head-line:#262d37;
    --hero:#0a0c0f; --hero-ink:#ffffff; --hero-muted:#c4ccd8; --hero-eyebrow:#9bb7ff; --hero-shadow:0 -10px 60px rgba(0,0,0,.45);
    --view3d:#1a2029; --floor3d:#28303b; --cfloor3d:#6b7581; --shadow:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1115; --panel:#161a20; --panel2:#1b2027; --seg:#222830; --ink:#e8ebef; --muted:#a2acb9; --faint:#7d8794; --line:#2a313b; --line2:#222830;
  --brand:#f2f4f7; --brand-ink:#111418; --accent:#7ea3ff; --accent-soft:#1b2640; --ring:#33508f;
  --ok-bg:#12291d; --warn-bg:#2d2210; --err-bg:#311517; --info-bg:#132341;
  --ok-ink:#7fd6a2; --warn-ink:#f3c26b; --err-ink:#ff9a9f; --info-ink:#9bbcff;
  --ok:#4cc27e; --warn:#e2a23a; --err:#ff6b70; --info:#7ea3ff;
  --hl-bg:#2a2414; --hl-line:#5a4a1f;
  --head:#0a0c0f; --head-ink:#ffffff; --head-muted:#a6b0bf; --head-btn:#181d24; --head-line:#262d37;
    --hero:#0a0c0f; --hero-ink:#ffffff; --hero-muted:#c4ccd8; --hero-eyebrow:#9bb7ff; --hero-shadow:0 -10px 60px rgba(0,0,0,.45);
  --view3d:#1a2029; --floor3d:#28303b; --cfloor3d:#6b7581; --shadow:none;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;overflow-x:hidden}
a{color:var(--accent)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--panel);padding:8px 12px;z-index:200}
.skip:focus{left:8px;top:8px}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--head);color:var(--head-ink);display:flex;align-items:center;gap:14px;padding:10px 18px;flex-wrap:wrap;border-bottom:1px solid var(--head-line)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.brand img{width:30px;height:37px;flex:none;display:block}
.brand b{font-size:16px;display:block;white-space:nowrap;letter-spacing:-.01em}
.brand small{color:var(--head-muted);font-size:12px;display:block;white-space:nowrap}
.brand .by{font-weight:600;color:var(--head-muted);font-size:13px}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:var(--head-muted);text-decoration:none;padding:6px 10px;border-radius:7px;font-weight:600;font-size:13px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--head-ink);background:var(--head-btn)}
.top .spacer{flex:1}

/* buttons */
.btn{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:6px 11px;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;text-decoration:none;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:var(--faint)}
.top .btn{background:var(--head-btn);border-color:var(--head-line);color:var(--head-ink)}
.top .btn:hover{border-color:var(--faint)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.top .btn.primary{background:var(--head-ink);border-color:var(--head-ink);color:var(--head)}
.btn.small{padding:3px 8px;font-size:12px}
.btn.big{padding:11px 18px;font-size:15px;border-radius:10px}
.btn.danger{color:var(--err)}
.btn.icon{padding:6px 8px}

/* footer */
.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:22px 18px 30px;margin-top:20px}
.site-foot .in{max-width:1180px;margin:0 auto;display:flex;gap:14px 24px;align-items:center;flex-wrap:wrap}
.site-foot img{width:22px;height:27px}
.site-foot .credit{display:flex;align-items:center;gap:10px}
.site-foot nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.site-foot a{color:var(--muted)}

/* shared bits */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.note{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.badge{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;background:var(--seg);color:var(--muted)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.err{background:var(--err-bg);color:var(--err)}
.toast{position:fixed;right:16px;bottom:16px;left:auto;max-width:calc(100vw - 32px);background:#111418;color:#fff;padding:10px 14px;border-radius:8px;font-size:13px;z-index:99;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);padding:20px;width:min(560px,calc(100vw - 32px));box-shadow:0 20px 50px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(10,12,16,.55)}
dialog h2{margin:0 0 6px;font-size:18px}
.unitpick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.unitpick .btn{flex-direction:column;padding:16px;font-size:15px;white-space:normal;text-align:center}
.unitpick small{font-weight:500;color:var(--muted);font-size:12px}
@media (max-width:520px){.unitpick{grid-template-columns:1fr}}
:root[data-theme="dark"] .mark-ink{filter:invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark-ink{filter:invert(1)}}
.btn[data-act="theme"][data-mode="light"] svg path{fill:none}
.btn[data-act="theme"][data-mode="dark"] svg circle{fill:currentColor}
.themebtn{gap:6px}
.themebtn .tl{font-size:12.5px}
@media (max-width:520px){.themebtn .tl{display:none}}