@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');
/* ============================================================
   Shine & Keen — shared design system  ·  "Refined SaaS" pass
   Linked AFTER each page's own <style> so these values win, which
   restyles every linked page from one file.

   Direction: Linear/Stripe-grade internal tooling. Neutral surfaces,
   a single teal accent used sparingly, soft elevation (no hard offset
   shadows), hairline borders, a strict radius + spacing scale, and a
   professional Thai/Latin UI face (IBM Plex Sans Thai). Motion is quick
   and functional — no rotations, wiggles or bobbing.
   ============================================================ */

/* ---------- palette ---------- */
/* Neutral cool-grey chrome, teal reserved for action/emphasis. All text
   pairs clear WCAG AA on their intended surfaces. */
:root{
  --sk-paper:#f4f6f8; --sk-surface:#ffffff; --sk-surface-2:#eef1f4;
  --sk-ink:#0f1b2a;                 /* 16:1 on white */
  --sk-ink-2:#43566a;               /* 7.4:1 */
  --sk-ink-3:#64778a;               /* 4.7:1 on white */
  --sk-line:#e3e8ee;  --sk-line-2:#eef2f5;
  --sk-accent:#0b7b8a;              /* teal · 4.9:1 as text on white */
  --sk-accent-2:#0a97a8;
  --sk-accent-soft:rgba(11,123,138,.10);
  --sk-accent-ring:rgba(11,123,138,.22);
  --sk-on-accent:#ffffff;
  --sk-good:#0f7d4d;  --sk-good-soft:rgba(15,125,77,.12);
  --sk-warn:#8a5a00;  --sk-warn-soft:rgba(138,90,0,.12);
  --sk-bad:#c0273a;   --sk-bad-soft:rgba(192,39,58,.10);
  --sk-shadow:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.06);
  --sk-shadow-lg:0 6px 16px rgba(16,24,40,.10), 0 12px 32px rgba(16,24,40,.10);
  --sk-r:12px; --sk-r-sm:9px; --sk-r-lg:16px; --sk-r-pill:999px;
}
@media (prefers-color-scheme:dark){:root{
  --sk-paper:#0d1117; --sk-surface:#161b22; --sk-surface-2:#1c232d;
  --sk-ink:#e6edf3;   --sk-ink-2:#aebccb;  --sk-ink-3:#8496a8;   /* 5.6:1 */
  --sk-line:#28313d;  --sk-line-2:#1e2630;
  --sk-accent:#2fd3c6;                 /* 9.5:1 as text on dark */
  --sk-accent-2:#4fe0d0;--sk-accent-soft:rgba(47,211,198,.14);
  --sk-accent-ring:rgba(47,211,198,.28);
  --sk-on-accent:#06231f;
  --sk-good:#4ad598;  --sk-good-soft:rgba(74,213,152,.16);
  --sk-warn:#ffc352;  --sk-warn-soft:rgba(255,195,82,.16);
  --sk-bad:#ff8090;   --sk-bad-soft:rgba(255,128,144,.16);
  --sk-shadow:0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.36);
  --sk-shadow-lg:0 8px 24px rgba(0,0,0,.44), 0 16px 40px rgba(0,0,0,.5);
}}
:root[data-theme="dark"]{
  --sk-paper:#0d1117; --sk-surface:#161b22; --sk-surface-2:#1c232d;
  --sk-ink:#e6edf3;   --sk-ink-2:#aebccb;  --sk-ink-3:#8496a8;
  --sk-line:#28313d;  --sk-line-2:#1e2630;
  --sk-accent:#2fd3c6; --sk-accent-2:#4fe0d0;--sk-accent-soft:rgba(47,211,198,.14);
  --sk-accent-ring:rgba(47,211,198,.28); --sk-on-accent:#06231f;
  --sk-good:#4ad598;  --sk-good-soft:rgba(74,213,152,.16);
  --sk-warn:#ffc352;  --sk-warn-soft:rgba(255,195,82,.16);
  --sk-bad:#ff8090;   --sk-bad-soft:rgba(255,128,144,.16);
  --sk-shadow:0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.36);
  --sk-shadow-lg:0 8px 24px rgba(0,0,0,.44), 0 16px 40px rgba(0,0,0,.5);
}
:root[data-theme="light"]{
  --sk-paper:#f4f6f8; --sk-surface:#ffffff; --sk-surface-2:#eef1f4;
  --sk-ink:#0f1b2a;   --sk-ink-2:#43566a;  --sk-ink-3:#64778a;
  --sk-line:#e3e8ee;  --sk-line-2:#eef2f5;
  --sk-accent:#0b7b8a;--sk-accent-2:#0a97a8;--sk-accent-soft:rgba(11,123,138,.10);
  --sk-accent-ring:rgba(11,123,138,.22); --sk-on-accent:#ffffff;
  --sk-good:#0f7d4d;  --sk-good-soft:rgba(15,125,77,.12);
  --sk-warn:#8a5a00;  --sk-warn-soft:rgba(138,90,0,.12);
  --sk-bad:#c0273a;   --sk-bad-soft:rgba(192,39,58,.10);
  --sk-shadow:0 1px 2px rgba(16,24,40,.04), 0 2px 6px rgba(16,24,40,.06);
  --sk-shadow-lg:0 6px 16px rgba(16,24,40,.10), 0 12px 32px rgba(16,24,40,.10);
}

/* ---------- map onto every page's existing variable names ----------
   Pages carry their own `:root[data-theme]` blocks that outrank a plain
   `:root`; match that specificity so these aliases win. One UI face for
   both display and body reads as a single, deliberate system. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"]{
  --disp:'IBM Plex Sans Thai','Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --sans:'IBM Plex Sans Thai','Sarabun',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"IBM Plex Sans Thai",monospace;

  /* index.html + products.html */
  --bg:var(--sk-paper); --card:var(--sk-surface); --card-2:var(--sk-surface-2);
  --ink:var(--sk-ink); --ink-2:var(--sk-ink-2); --ink-3:var(--sk-ink-3);

  /* import.html */
  --surface:var(--sk-surface); --surface-2:var(--sk-surface-2); --band:var(--sk-surface-2);
  --text:var(--sk-ink); --text-2:var(--sk-ink-2); --text-3:var(--sk-ink-3);
  --stamp:var(--sk-bad); --stamp-soft:var(--sk-bad-soft);
  --need:var(--sk-ink-3); --req:var(--sk-warn); --recv:var(--sk-accent);
  --ok:var(--sk-good); --na:var(--sk-ink-3);

  /* 7cf-sample-order.html */
  --bg2:var(--sk-paper); --cardAlt:var(--sk-surface-2);
  --text2:var(--sk-ink-2); --text3:var(--sk-ink-3);
  --border:var(--sk-line); --borderSoft:var(--sk-line-2);
  --pos:var(--sk-good); --neg:var(--sk-bad);
  --nav:color-mix(in srgb,var(--sk-paper) 82%,transparent);

  /* planner.html */
  --paper:var(--sk-paper); --accent-2:var(--sk-accent-2);

  /* shared */
  --line:var(--sk-line); --line-2:var(--sk-line-2);
  --accent:var(--sk-accent); --accent-soft:var(--sk-accent-soft);
  --good:var(--sk-good); --good-soft:var(--sk-good-soft);
  --warn:var(--sk-warn); --warn-soft:var(--sk-warn-soft);
  --bad:var(--sk-bad); --bad-soft:var(--sk-bad-soft);
  --shadow:var(--sk-shadow);
}

a,button,label,summary,[role="button"],[data-theme-toggle],.home,.tbtn{-webkit-tap-highlight-color:transparent}

/* header wrap safety on phones */
@media (max-width:600px){
  .nav-in,.top-in{flex-wrap:wrap;row-gap:8px;height:auto!important;min-height:52px;padding-top:8px;padding-bottom:8px}
  .sk-user{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- typography ---------- */
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.003em}
.lab,.sec-lab .lab{font-size:11.5px;letter-spacing:.02em;text-transform:none}
.mods .mod .slab{font-size:12px;color:var(--sk-ink-3)}
.pcat,.mod .stat,.cnt,.meta-s,.kpi .sub,.kpi .l,.alert .txt .s,.dnth,.hero-eyebrow{font-size:12px}
.stepper .step .sn{font-size:11px}
.pmod .pt{font-size:13px}
.fstep2 .ft2{font-size:13.5px}
small,.small{font-size:12px}
h1,h2,.brand b,.panel-h h2,.sec-lab h2,.sh-head h3{font-family:var(--disp);letter-spacing:-.02em}
h1{font-weight:700}

/* ---------- header ---------- */
.top{background:color-mix(in srgb,var(--sk-paper) 80%,transparent)!important;border-bottom:1px solid var(--sk-line-2)}
.logo{background:var(--sk-accent)!important;border:none!important;box-shadow:none!important;
  border-radius:10px!important;color:var(--sk-on-accent)}
.home,[data-theme-toggle],.tbtn{border:1px solid var(--sk-line)!important;background:var(--sk-surface)!important;border-radius:10px!important}

/* ---------- cards & panels — soft elevation ---------- */
.mod,.pcard,.panel,.ship,.kpi{
  border:1px solid var(--sk-line)!important;
  border-radius:var(--sk-r-lg)!important;
  box-shadow:var(--sk-shadow)!important;
  background:var(--sk-surface);
  transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}
a.mod:hover,.pcard:hover,.ship:hover,a.kpi:hover{
  transform:translateY(-2px)!important;
  border-color:var(--sk-line)!important;
  box-shadow:var(--sk-shadow-lg)!important;
}
.mod .ic,.pcard .ic{border:none;border-radius:11px}
.mod.soon{border-style:dashed!important;border-color:var(--sk-line)!important;box-shadow:none!important;background:var(--sk-surface-2)}
.mod.soon:hover{transform:none!important;box-shadow:none!important}

/* import tracker groups + documents */
.grp{border:1px solid var(--sk-line)!important;border-radius:var(--sk-r-lg)!important;box-shadow:var(--sk-shadow)!important}
.doc{border-bottom:1px solid var(--sk-line-2)}
.dhead{border:1px solid var(--sk-line)!important;border-radius:var(--sk-r-lg)!important;box-shadow:var(--sk-shadow)!important}
.step{border:1px solid var(--sk-line)!important;border-radius:10px!important}
.step.cur{border-color:var(--sk-accent)!important;box-shadow:0 0 0 3px var(--sk-accent-soft)!important}
.step.done{border-color:var(--sk-good)!important}

/* ---------- buttons ---------- */
.btn.primary,.btn-new,button.primary,.seedbtn{
  border:1px solid transparent!important;
  background:var(--sk-accent)!important;color:var(--sk-on-accent)!important;
  border-radius:10px!important;box-shadow:var(--sk-shadow)!important;font-weight:600!important;
}
.btn.primary:hover,.btn-new:hover,button.primary:hover{background:var(--sk-accent-2)!important}
.btn.primary:active,.btn-new:active,button.primary:active{transform:translateY(1px);box-shadow:none!important}
.btn.ghost,.btn:not(.primary){border-radius:10px!important;border:1px solid var(--sk-line)!important}
.chip{border-radius:var(--sk-r-pill)!important;border:1px solid var(--sk-line)!important}
.chip.on{background:var(--sk-accent)!important;color:var(--sk-on-accent)!important;border-color:transparent!important;font-weight:600}
.seg{background:var(--sk-surface-2);border:1px solid var(--sk-line);border-radius:10px}
.seg button.on{background:var(--sk-surface);color:var(--sk-ink);box-shadow:var(--sk-shadow)}

/* ---------- modals ---------- */
.sheet{border:1px solid var(--sk-line)!important;border-radius:var(--sk-r-lg)!important;box-shadow:var(--sk-shadow-lg)!important}
.sh-head{border-bottom:1px solid var(--sk-line-2)}
.sh-foot{border-top:1px solid var(--sk-line-2)}
input:not([type=checkbox]):not([type=radio]),select,textarea{
  background:var(--sk-surface);color:var(--sk-ink);border-radius:var(--sk-r-sm);border:1px solid var(--sk-line);
}
input::placeholder,textarea::placeholder{color:var(--sk-ink-3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sk-accent);box-shadow:0 0 0 3px var(--sk-accent-ring)}

/* ============================================================
   Dashboard — calm, no rotations
   ============================================================ */
.hero-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-radius:var(--sk-r-lg)!important;padding:20px 22px;
  text-decoration:none;transform:none!important;transition:box-shadow .16s ease, transform .16s ease;margin-bottom:16px;
  border:1px solid var(--sk-line)!important;box-shadow:var(--sk-shadow)!important}
.hero-card:hover{transform:translateY(-2px)!important;box-shadow:var(--sk-shadow-lg)!important}
.hero-ic{width:48px;height:48px;border-radius:12px!important;display:grid;place-items:center;font-size:22px;font-weight:700;flex:none;box-shadow:none!important;border:none!important}
.hero-tx{flex:1;min-width:200px}
.hero-eyebrow{font-family:var(--sans);font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;font-weight:600}
.hero-title{font-size:clamp(18px,2.4vw,23px);font-weight:700;letter-spacing:-.02em;margin-top:5px;line-height:1.3}
.hero-btn{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:9px 15px;border-radius:10px;white-space:nowrap;flex:none}

.flowstrip{background:var(--sk-surface);border:1px solid var(--sk-line);border-radius:var(--sk-r-lg);
  box-shadow:var(--sk-shadow);padding:16px 18px;margin-bottom:8px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.fstep2{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.fic{width:42px;height:42px;border-radius:12px;background:var(--sk-accent-soft);color:var(--sk-accent);font-size:18px;
  display:grid;place-items:center;border:1px solid var(--sk-line);transition:none}
.fstep2:hover .fic{transform:none}
.fic.off{background:var(--sk-surface-2);color:var(--sk-ink-3);border-color:var(--sk-line)}
.fstep2 .ft2{font-size:13px;font-weight:600}

.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.mods .mod{border:1px solid var(--sk-line)!important;border-radius:var(--sk-r-lg)!important;padding:18px!important;
  display:block!important;text-decoration:none;color:inherit;background:var(--sk-surface)}
.mods .mod .mtop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mods .mod .ic{width:40px;height:40px;border-radius:11px!important;color:var(--sk-accent)!important;display:grid;place-items:center;
  font-size:18px;flex:none;border:none!important;transition:none;background:var(--sk-accent-soft)!important;box-shadow:none!important}
.mods .mod:hover .ic{transform:none}
.mods .mod .ic svg{width:20px;height:20px}
.fic svg{width:20px;height:20px}
.mods .mod h3 .marrow{font-size:15px;color:var(--sk-ink-3);font-weight:400}
.mods .mod .num{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;text-align:right}
.mods .mod .slab{font-size:11px;color:var(--sk-ink-3);margin-top:3px;text-align:right}
.mods .mod h3{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.01em;margin-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:8px}

.planned{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;opacity:.8}
.pmod{background:var(--sk-surface-2);border:1px dashed var(--sk-line);border-radius:12px;padding:14px 10px;
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.pmod .pic{font-size:22px}
.pmod .pt{font-size:12.5px;font-weight:600;line-height:1.3}

/* ============================================================
   Import Tracker controls
   ============================================================ */
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.stepper .step{flex:0 0 auto!important;width:62px;padding:10px 4px!important;display:flex;flex-direction:column;
  align-items:center;gap:4px;cursor:pointer;background:var(--sk-surface);position:relative}
.stepper .step .sic{font-size:19px;line-height:1}
.stepper .step .sn{font-family:var(--sans);font-size:11px;font-weight:600;color:var(--sk-ink-3)}
.stepper .step.done{background:var(--sk-good-soft)}
.stepper .step.done .sn{color:var(--sk-good)}
.stepper .step.cur{background:var(--sk-accent-soft);border-color:var(--sk-accent)!important}
.stepper .step.cur .sn{color:var(--sk-accent)}
.stepper .step.gate::after{content:"⚑";position:absolute;margin:-26px 0 0 26px;font-size:9px;color:var(--sk-bad)}

.stgrp{display:inline-flex;gap:3px;background:var(--sk-surface-2);border:1px solid var(--sk-line);border-radius:var(--sk-r-pill);padding:3px}
.sbtn{width:30px;height:30px;border-radius:50%;border:none;background:none;cursor:pointer;
  font-size:14px;line-height:1;display:grid;place-items:center;color:var(--sk-ink-3);padding:0;transition:transform .12s}
.sbtn:hover{transform:scale(1.1)}
.sbtn.on{color:var(--sk-on-accent);font-weight:600}
.sbtn.on.s-needed{background:var(--sk-ink-3)}
.sbtn.on.s-requested{background:var(--sk-warn)}
.sbtn.on.s-received{background:var(--sk-accent)}
.sbtn.on.s-verified{background:var(--sk-good)}
.sbtn.on.s-na{background:var(--sk-line);color:var(--sk-ink-3)}

.rchip{font-size:14px!important;line-height:1;padding:4px 9px!important;display:inline-grid;place-items:center}
.sdsdot{font-size:13px!important;padding:4px 7px!important;line-height:1}
.pcard .pname{font-size:14px;font-weight:600;line-height:1.35}

/* ---------- empty states ---------- */
.empty{text-align:center;padding:56px 20px!important}
.empty::before{content:attr(data-icon);display:block;font-size:44px;line-height:1;margin-bottom:14px;opacity:.7}
.empty h3{font-family:var(--disp);font-size:16px;font-weight:600;margin-bottom:4px}
.empty p{font-size:13px;color:var(--sk-ink-3);max-width:34ch;margin:0 auto}

/* ---------- misc ---------- */
.toast{border-radius:12px}
.pip{border:1px solid var(--sk-line)}
.modeban{border-radius:10px}

/* room for the bottom tab bar on phones (injected by nav.js) */
@media (max-width:760px){
  body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 62px)!important}
  .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 74px)!important}
}