/* ===== SaiTaMo Design Tokens (shared across every tool) ===== */
:root{
  --font: "Plus Jakarta Sans","Noto Sans Thai",system-ui,sans-serif;
  --navy-900:#0F172A; --navy-700:#1E3A8A; --sky-400:#38BDF8; --sky-100:#E0F2FE;
  --gold-500:#D4AF37; --gold-600:#C5A059;
  --bg:#F8FAFC; --surface:#FFFFFF; --surface-2:#F1F5F9; --border:#E2E8F0; --divider:#EEF2F6;
  --text:#0F172A; --text-2:#475569; --text-3:#64748B;
  --primary:#1E3A8A; --on-primary:#FFFFFF; --accent:#0369A1; --accent-soft:#E0F2FE;
  --gold:#C5A059; --gold-btn:#D4AF37; --on-gold:#0F172A;
  --success:#15803D; --warning:#B45309; --error:#B91C1C;
  --success-bg:#DCFCE7; --warning-bg:#FEF3C7; --error-bg:#FEE2E2;
  --focus:#0284C7;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-card:12px; --r-btn:8px; --r-tag:4px;
  --icon-s:16px; --icon-m:20px; --icon-l:24px; --icon-stroke:1.75;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.04);
  --c1:#1E3A8A; --c2:#0EA5E9; --c3:#C5A059; --c4:#15803D;
  --h1:28px/1.25 var(--font); --h2:20px/1.3 var(--font); --h3:16px/1.4 var(--font); --body:14px/1.6 var(--font); --cap:12px/1.5 var(--font);
}
:root[data-theme="dark"]{
  --bg:#0B0F19; --surface:#121826; --surface-2:#182033; --border:#263149; --divider:#1D2638;
  --text:#F1F5F9; --text-2:#B6C2D4; --text-3:#8D9BB2;
  --primary:#38BDF8; --on-primary:#0B0F19; --accent:#7DD3FC; --accent-soft:#0C2A40;
  --gold:#D4AF37; --success:#4ADE80; --warning:#FBBF24; --error:#F87171;
  --success-bg:#0F2A1B; --warning-bg:#33260A; --error-bg:#3A1414; --focus:#7DD3FC;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  --c1:#7DD3FC; --c2:#3B82F6; --c3:#D4AF37; --c4:#4ADE80;
}
*{box-sizing:border-box}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--text);font:var(--body)}
:root[data-theme="light"]{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
h1{font:700 var(--h1);margin:0}h2{font:700 var(--h2);margin:0}h3{font:600 var(--h3);margin:0}
.cap{font:var(--cap);color:var(--text-3)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
a{color:var(--accent)}
svg.i{width:var(--icon-m);height:var(--icon-m);stroke:currentColor;fill:none;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.i--s{width:var(--icon-s);height:var(--icon-s)}

/* Shell */
.st-header{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border)}
.st-header__inner{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s5);max-width:1320px;margin:auto}
.st-crumbs{display:flex;align-items:center;gap:var(--s2);font-weight:600;white-space:nowrap}
.st-logo{display:flex;align-items:center;gap:var(--s2);font:800 20px var(--font);color:var(--text);text-decoration:none;letter-spacing:-.02em}
.st-logo__mark{width:36px;height:36px;border-radius:9px;display:block}
.st-crumbs__sep{color:var(--text-3)}.st-crumbs__cur{color:var(--text-2)}
.st-search{flex:1;max-width:420px;margin-left:auto;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);height:40px;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--bg);color:var(--text-3)}
.st-search:focus-within{border-color:var(--focus);outline:2px solid var(--focus);outline-offset:0}
.st-search input{flex:1;border:0;background:transparent;font:inherit;color:var(--text);outline:0;min-width:0}
.st-sim-banner{display:flex;gap:var(--s2);align-items:center;justify-content:center;padding:var(--s2) var(--s4);background:var(--accent-soft);color:var(--text);font:var(--cap);text-align:center}
.st-frame{display:grid;grid-template-columns:300px 1fr;gap:var(--s5);max-width:1320px;margin:auto;padding:var(--s5)}
.st-sidebar{align-self:start;position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;display:flex;flex-direction:column;gap:var(--s4)}
.st-work{min-width:0}
.foot{font:var(--cap);color:var(--text-3);margin-top:var(--s6)}

/* Primitives */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4);box-shadow:var(--shadow)}
.card h3{margin-bottom:var(--s3)}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-tag);background:var(--surface-2);color:var(--text-2);font:600 12px var(--font);border:1px solid var(--border)}
.tag--gold{background:transparent;border-color:var(--gold);color:var(--gold)}
.tag--ok{background:var(--success-bg);color:var(--success);border-color:transparent}
.tag--warn{background:var(--warning-bg);color:var(--warning);border-color:transparent}
.tag--bad{background:var(--error-bg);color:var(--error);border-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);height:40px;padding:0 var(--s4);border-radius:var(--r-btn);border:1px solid transparent;font:600 14px var(--font);cursor:pointer;background:var(--primary);color:var(--on-primary);transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px);filter:brightness(.95)}
.btn:focus-visible,.chip:focus-visible,.tabs button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn--gold{background:var(--gold-btn);color:var(--on-gold)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn--ghost:hover{background:var(--surface-2);filter:none}
.btn--sm{height:32px;padding:0 var(--s3);font-size:13px}
.btn--icon{width:40px;padding:0}
.btn--danger{background:var(--error);color:#fff}
.input,select.input{height:40px;width:100%;padding:0 var(--s3);border:1px solid var(--border);border-radius:var(--r-btn);background:var(--surface);color:var(--text);font:inherit}
.input:hover{border-color:var(--text-3)}.input:disabled{background:var(--surface-2);color:var(--text-3)}
label.f{display:flex;flex-direction:column;gap:var(--s1);font:600 13px var(--font);color:var(--text-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{padding:6px 12px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--surface);color:var(--text-2);font:600 13px var(--font);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:var(--s3)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.pos{color:var(--success)}.neg{color:var(--error)}.muted{color:var(--text-3)}
.tabs{display:flex;gap:var(--s1);border-bottom:1px solid var(--border);margin-bottom:var(--s5);overflow-x:auto}
.tabs button{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);background:none;border:0;border-bottom:2px solid transparent;color:var(--text-2);font:600 14px var(--font);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--gold)}
input[type=range]{width:100%;accent-color:var(--primary)}
.slider-h{display:flex;justify-content:space-between;font:600 13px var(--font);color:var(--text-2)}

/* Fund cards */
.fund{display:grid;grid-template-columns:44px 1fr auto;gap:var(--s3) var(--s4);align-items:start}
.rank{width:40px;height:40px;border-radius:var(--r-btn);display:grid;place-items:center;font:800 16px var(--font);background:var(--surface-2);color:var(--text-2)}
.fund.top .rank{background:var(--gold-btn);color:var(--on-gold)}
.metrics{grid-column:2/4;display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--divider)}
.metric b{display:block;font:700 15px var(--font)}.metric span{font:var(--cap);color:var(--text-3)}
.score{text-align:right}.score b{font:800 26px var(--font);color:var(--primary);display:block;line-height:1}
.bar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}.bar i{display:block;height:100%;background:var(--gold)}
.why{grid-column:2/4;font:var(--cap);color:var(--text-2)}
.cmp{display:flex;align-items:center;gap:var(--s2);font:var(--cap)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.stat{padding:var(--s4);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface)}
.stat span{font:var(--cap);color:var(--text-3)}.stat b{display:block;font:800 22px var(--font);margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font:600 12px var(--font);color:var(--text-3);text-align:right;padding:8px;border-bottom:1px solid var(--border)}th:first-child,td:first-child{text-align:left}
td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--divider)}
.tw{overflow-x:auto}
.empty{text-align:center;padding:var(--s6);color:var(--text-3)}
.empty b{display:block;color:var(--text);font:600 16px var(--font);margin-bottom:var(--s1)}
dialog{width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 32px);border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);color:var(--text);padding:0;overflow:auto}
dialog::backdrop{background:rgba(11,15,25,.6)}
.dlg-h{position:sticky;top:0;background:var(--surface);display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);z-index:1}
.dlg-b{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s5)}
.chart{width:100%;height:240px;display:block}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font:var(--cap)}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--navy-900);color:#fff;padding:12px 18px;border-radius:var(--r-btn);opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.alloc{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
@media(max-width:900px){
  .st-frame{grid-template-columns:1fr;padding:var(--s4)}.st-sidebar{position:static;max-height:none}
  .st-header__inner{padding:var(--s3) var(--s4);flex-wrap:wrap}.st-search{order:3;max-width:none;flex-basis:100%;margin:0}
  .fund{grid-template-columns:40px 1fr}.fund .score{grid-column:2;text-align:left;display:flex;gap:var(--s3);align-items:baseline}
  .metrics,.why{grid-column:1/-1}.grid2{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}