/* Nebrix Radar — brand styles (Sarabun · navy/purple/teal/gold) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Sarabun',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.radar-root{
  color-scheme:dark;
  --navy:#0B1437; --navy-mid:#1E2D5A; --purple:#7f77dd; --purple-l:#afa9ec; --teal:#12b589;
  --page:#0B1437; --surface-1:#16234d; --surface-2:#1E2D5A;
  --text-primary:#fff; --text-secondary:#c7d0e8; --muted:#8291b5;
  --grid:#243258; --baseline:#33436f; --border:rgba(255,255,255,0.09);
  --s1:#199e70; --s2:#c98500; --s3:#9085e9; --s4:#d95926; --s5:#3987e5;
  --good:#12b589; --warning:#E8A020; --serious:#ec835a; --critical:#e5544f;
  background:var(--page); color:var(--text-primary);
  min-height:100vh; padding:24px; max-width:1240px; margin:0 auto;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
.radar-root.light{
  color-scheme:light;
  --page:#eef2fb; --surface-1:#fff; --surface-2:#f0f4ff;
  --text-primary:#0f1c3f; --text-secondary:#3d4a6b; --muted:#5a6a8a;
  --grid:#dbe3f4; --baseline:#c4cfe6; --border:#d9e0f1;
  --s1:#1a936b; --s2:#b57e00; --s3:#6a5fd0; --s4:#c94e22; --s5:#2a6fc4;
  --good:#1a936b; --warning:#c98500; --serious:#d06a3a; --critical:#d03b3b;
}

.card{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:20px}
.grid{display:grid;gap:14px}
.sec-title{font-size:15px;font-weight:620;margin:24px 0 12px}
.sub{color:var(--muted);font-size:13px}

/* nav */
.nbx-nav{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--navy),var(--navy-mid));
  border:1px solid var(--border);border-radius:16px;padding:14px 20px;margin-bottom:20px;flex-wrap:wrap}
.nbx-logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.nbx-mark{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--purple),var(--teal));
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0}
.nbx-title{font-size:19px;font-weight:800;color:#fff;line-height:1.1}
.nbx-title span{color:var(--purple-l)}
.nbx-tag{font-size:11px;color:rgba(255,255,255,.5);display:block;margin-top:1px}
.nbx-badge{font-size:11px;font-weight:700;color:var(--teal);border:1px solid rgba(18,181,137,.4);
  background:rgba(18,181,137,.12);border-radius:20px;padding:4px 12px;white-space:nowrap}
.toggle{background:var(--surface-2);border:1px solid var(--border);color:var(--text-secondary);
  border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer;font-family:inherit}
.toggle:hover{color:var(--text-primary)}
h1{font-size:22px;font-weight:700;letter-spacing:-.01em}

/* hero */
.hero-wrap{grid-template-columns:1.1fr 2fr;margin:16px 0}
@media(max-width:820px){.hero-wrap{grid-template-columns:1fr}}
.hero-num{font-size:62px;font-weight:680;line-height:1;letter-spacing:-.02em;margin:6px 0 2px}
.hero-band{display:inline-block;font-size:13px;font-weight:600;padding:3px 10px;border-radius:20px;margin-top:4px;color:#fff}
.meter{height:12px;border-radius:8px;background:var(--surface-2);margin-top:16px;overflow:hidden}
.meter>span{display:block;height:100%;border-radius:8px}
.meter-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}

/* factor bars */
.fac{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:13px}
.fac .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fac .fn{flex:1;color:var(--text-secondary)}
.fac .ft{flex:0 0 110px;height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.fac .ff{display:block;height:100%;border-radius:5px;background:var(--s3)}
.fac .fv{flex:0 0 36px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:var(--text-primary)}

/* ความเข้มปัจจัยมหภาค — จัดกลุ่ม + heatmap + แรงหนุน */
.fcallout{display:flex;gap:6px;align-items:flex-start;background:var(--surface-2);border-radius:10px;padding:8px 11px;font-size:12px;margin-bottom:12px;color:var(--text-secondary);line-height:1.5}
.fcallout b{color:var(--text-primary)}
.fgrp{margin-top:12px}
.fgrp:first-of-type{margin-top:2px}
.fghead{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-secondary);margin:0 0 6px}
.fghead .cnt{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.fgrow{display:flex;align-items:center;gap:10px;margin:7px 0;font-size:13px}
.fgrow .fn{flex:1;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fgrow .ft{flex:0 0 116px;height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.fgrow .ff{display:block;height:100%;border-radius:5px}
.fgrow .fv{flex:0 0 26px;text-align:right;font-variant-numeric:tabular-nums;font-size:13px;font-weight:800;color:var(--text-primary)}
.sevchip{flex:0 0 auto;min-width:50px;text-align:center;font-size:10px;font-weight:700;color:#fff;padding:2px 7px;border-radius:99px;letter-spacing:.2px}
.frelief{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.frelief .rnote{font-size:11px;color:var(--muted);margin:7px 0 0;line-height:1.5}
.frelief .rnote b{color:var(--good)}
.flegend{display:flex;flex-wrap:wrap;gap:5px 12px;margin-top:14px;padding-top:11px;border-top:1px solid var(--border);font-size:11px;color:var(--muted)}
.flegend .lg{display:flex;align-items:center;gap:5px}
.flegend .sw{width:18px;height:7px;border-radius:99px}

/* help popovers (วิธีคิด) */
.hq{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;line-height:1;padding:0;cursor:pointer;font-family:inherit;flex:0 0 auto}
.hq:hover{color:var(--text-primary);border-color:var(--muted)}
.help-head{position:relative;display:flex;align-items:center;gap:6px}
.fn-help{cursor:help;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--baseline)}
.help-backdrop{position:fixed;inset:0;z-index:40;background:transparent}
.fgrow{position:relative}
.help-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:50;width:min(300px,80vw);background:var(--surface-1);border:1px solid var(--border);border-radius:11px;padding:11px 13px;font-size:12px;font-weight:400;line-height:1.6;color:var(--text-secondary);box-shadow:0 10px 30px rgba(0,0,0,.28);white-space:normal;text-align:left}
.help-pop b{color:var(--text-primary);font-weight:700}
.help-pop .hp-map{display:block;margin-top:5px;color:var(--muted);font-size:11px}
.help-pop-row{width:min(320px,82vw)}
.help-pop .hp-w{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);color:var(--text-secondary);font-size:11px}
.help-pop .hp-w-off{color:var(--muted)}
.off-tag{flex:0 0 auto;font-size:9.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:1px 6px;letter-spacing:.2px;white-space:nowrap}

/* chart legend */
.legend{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0 4px}
.legend span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block}

/* tiles */
.tiles{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:15px 16px}
.tile .t-label{font-size:12px;color:var(--muted)}
.tile .t-val{font-size:26px;font-weight:640;margin-top:3px}
.tile .t-delta{font-size:13px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.up{color:var(--good)} .down{color:var(--critical)} .flat{color:var(--muted)}

/* food */
.fbar{display:flex;align-items:center;gap:10px;margin:9px 0;font-size:13px}
.fbar .fn{flex:0 0 150px;color:var(--text-secondary)}
.fbar .ftrack{flex:1;height:9px;background:var(--surface-2);border-radius:5px;overflow:hidden;position:relative}
.fbar .ffill{display:block;height:100%;border-radius:5px}
.fbar .fv{flex:0 0 100px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}

/* two-col */
.two{grid-template-columns:1.4fr 1fr}
@media(max-width:820px){.two{grid-template-columns:1fr}}

/* sme */
.fbtn{background:var(--surface-2);border:1px solid var(--border);color:var(--text-secondary);border-radius:20px;
  padding:5px 13px;font-size:12.5px;cursor:pointer;font-family:inherit}
.fbtn.on{background:var(--s5);border-color:var(--s5);color:#fff}
.sme-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.sme-grid{grid-template-columns:1fr}}
.sme{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:9px}
.sme-top{display:flex;align-items:center;gap:10px}
.sme-ic{width:34px;height:34px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sme-name{font-size:14px;font-weight:600;line-height:1.25;flex:1}
.sme-badge{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:6px;color:#fff;white-space:nowrap}
.sme-scale{height:7px;border-radius:5px;background:linear-gradient(90deg,var(--critical),var(--surface-2) 50%,var(--good));position:relative;margin:2px 0 4px}
.sme-scale .pin{position:absolute;top:50%;width:3px;height:13px;border-radius:2px;background:var(--text-primary);transform:translate(-50%,-50%)}
.sme-scale-lbl{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.sme-f{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary)}
.sme-f .fa{font-weight:700;width:14px;text-align:center;flex-shrink:0}
.sme-tip{font-size:12px;color:var(--text-primary);background:var(--surface-2);border-radius:8px;padding:8px 10px;line-height:1.45;margin-top:auto}

/* portfolio */
.pf-grid{grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:820px){.pf-grid{grid-template-columns:1fr}}
.pf-row{display:flex;align-items:center;gap:10px;margin:7px 0}
.pf-row label{flex:1;font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}
.pf-row .sw{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.pf-row input[type=range]{flex:1.3;accent-color:var(--s5)}
.pf-row .pin{width:52px;flex-shrink:0;background:var(--surface-2);border:1px solid var(--border);color:var(--text-primary);
  border-radius:7px;padding:5px 7px;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.pf-total{font-size:12px;color:var(--muted);margin-top:8px;text-align:right}
.pf-total.bad{color:var(--critical)}
.pval-in{width:100%;background:var(--surface-2);border:1px solid var(--border);color:var(--text-primary);
  border-radius:8px;padding:8px 10px;font-size:14px;margin-top:4px;font-family:inherit;font-variant-numeric:tabular-nums}
.out-num{font-size:30px;font-weight:660}
.out-lbl{font-size:12px;color:var(--muted)}

/* การ์ดซ้าย (เกจความเสี่ยงรวม) — เติมสรุปให้คุ้มความสูง สมดุลกับการ์ดขวา */
.hero-card{display:flex;flex-direction:column}
.hero-advice{font-size:12.5px;line-height:1.55;color:var(--text-secondary);background:var(--surface-2);border-radius:10px;padding:9px 12px;margin-top:14px}
.hero-tally{display:flex;gap:10px;margin-top:8px}
.hero-tally .ht{flex:1;background:var(--surface-2);border-radius:10px;padding:11px 8px;text-align:center;display:flex;flex-direction:column;gap:3px}
.hero-tally .ht b{font-size:23px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.hero-tally .ht span{font-size:11px;color:var(--muted)}
.hero-foot{font-size:11px;color:var(--muted);margin-top:auto;padding-top:14px;line-height:1.5}
.stat-row{display:flex;gap:22px;flex-wrap:wrap;margin-top:6px}
.verdict{border-radius:9px;padding:11px 13px;font-size:12.5px;margin-top:12px;line-height:1.5;border:1px solid var(--border)}
.alloc-bar{display:flex;height:16px;border-radius:6px;overflow:hidden;margin-top:8px}
.alloc-bar>span{height:100%}

/* signals + events */
.sig{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px}
.sig .ic{width:22px;height:22px;border-radius:6px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ev{display:flex;gap:11px;padding:9px 4px;border-bottom:1px solid var(--border);align-items:flex-start}
.ev:last-child{border-bottom:none}
.ev .ic{width:26px;height:26px;border-radius:7px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.ev .etitle{font-size:13px;font-weight:550;line-height:1.35}
.ev .emeta{font-size:11px;color:var(--muted);margin-top:2px}
.badge{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;color:#fff;white-space:nowrap}
.evlist{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}

.disc{background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--warning);
  border-radius:8px;padding:11px 14px;font-size:12px;color:var(--text-secondary);margin-top:16px}
.footer{color:var(--muted);font-size:11.5px;margin-top:22px;line-height:1.7;border-top:1px solid var(--border);padding-top:14px}

/* thai context + food (2-col) */
.th-food{grid-template-columns:1.1fr 1fr}
@media(max-width:820px){.th-food{grid-template-columns:1fr}}
.th-stats{grid-template-columns:1fr 1fr;gap:12px}
.thstat{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:13px 15px}
.thstat.hl{border-color:var(--s5)}
.thstat-lbl{font-size:12px;color:var(--muted)}
.thstat-val{font-size:23px;font-weight:660;margin-top:3px;font-variant-numeric:tabular-nums}
.thstat-d{font-size:13px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.thstat-sub{font-size:12px;color:var(--muted);margin-top:3px}
.thstat-mom{font-size:14px;font-weight:600}
.pf-opt{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.pf-opt-head{font-size:14px;font-weight:700}
.pf-opt-note{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
.pf-opt-controls{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0}
.pf-opt-controls label{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.pf-opt-controls input{width:64px;padding:5px 8px;border-radius:7px;border:1px solid var(--border);
  background:var(--surface-2);color:inherit;font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums}
.pf-opt-btns{display:flex;flex-wrap:wrap;gap:8px}
.pf-opt-result{margin-top:12px;padding:10px 12px;border-radius:9px;font-size:12.5px;line-height:1.65;
  background:rgba(18,181,137,.10);border:1px solid rgba(18,181,137,.30)}
.pf-opt-result.warn{background:rgba(232,160,32,.12);border-color:rgba(232,160,32,.38)}
/* composite gauge (คะแนน/100 + แถบไล่ระดับสี + หมุด) */
.hero-max{font-size:17px;font-weight:600;color:var(--muted)}
.gauge{position:relative;height:11px;border-radius:7px;margin:12px 0 7px;
  background:linear-gradient(90deg,#12b589 0%,#83c33a 28%,#e8c020 52%,#e8891e 74%,#e0503a 100%)}
.gauge-knob{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;
  border:3px solid rgba(11,20,55,.55);box-shadow:0 2px 7px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.light .gauge-knob{border-color:rgba(255,255,255,.85)}
/* food chart legend + center axis */
.food-legend{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;margin-bottom:12px;font-size:11.5px;color:var(--muted)}
.food-legend b{font-weight:700;color:inherit}
.food-legend i{display:inline-block;width:14px;height:9px;border-radius:3px;vertical-align:middle;margin-right:5px}
.food-legend .fl-up{background:var(--critical)}
.food-legend .fl-dn{background:var(--good)}
.food-legend .fl-hint{opacity:.85}
.fbar .ftrack{position:relative}
.fbar .ftrack::before{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:var(--border);opacity:.7}
.th-note{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 12px;
  font-size:12px;color:var(--text-secondary);line-height:1.5;margin-top:12px}

/* forecast */
.fc-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.fc-grid{grid-template-columns:1fr}}
.fc{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fc-name{font-size:13px;color:var(--text-secondary)}
.fc-dir{font-size:14px;font-weight:700}
.fc-val{font-size:19px;font-weight:680;margin-top:5px;font-variant-numeric:tabular-nums}
.fc-val .fc-cur{color:var(--muted);font-weight:500}
.fc-val .fc-arrow{color:var(--muted);font-weight:400;margin:0 5px}
.fc-band{font-size:11px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.fc-model{display:inline-block;font-size:10px;font-weight:600;line-height:1;padding:3px 6px;border-radius:999px;
  margin-left:4px;vertical-align:1px;letter-spacing:.2px;border:1px solid transparent}
.fc-model.ssa{color:#1d6fb8;background:rgba(29,111,184,.10);border-color:rgba(29,111,184,.25)}
.fc-model.drift{color:var(--muted);background:var(--surface);border-color:var(--border)}
.fc-legend{font-size:11px;color:var(--muted)}
.fc-legend .fc-model{margin-left:0;margin-right:2px}

/* fx hover tooltip */
.fxtip{position:fixed;z-index:60;opacity:0;pointer-events:none;transition:opacity .08s;
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
  padding:9px 11px;font-size:12px;min-width:172px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--text-primary)}
.fxtip .tx{font-size:11px;color:var(--muted);margin-bottom:6px;font-variant-numeric:tabular-nums}
.fxtip .tk{display:flex;align-items:center;gap:7px;margin:3px 0;font-variant-numeric:tabular-nums}
.fxtip .tk i{width:9px;height:9px;border-radius:2px;flex-shrink:0}
.fxtip .tk span{color:var(--text-secondary)}
.fxtip .tk b{margin-left:auto;font-weight:700}
.fxtip .tk em{font-style:normal;font-size:11px;color:var(--muted);min-width:52px;text-align:right}

/* world map — เหตุการณ์ภัยพิบัติ/โรคระบาด */
.wmap-card{margin-bottom:14px}
.wmap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.wmap-title{font-size:14px;font-weight:600}
.wmap-sub{font-size:12px;color:var(--muted);margin-top:2px}
.wmap-rel{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);
  background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:6px 11px}
.wmap-relnum{font-size:18px;font-weight:750;color:var(--purple);font-variant-numeric:tabular-nums}
.wmap-wrap{background:var(--surface-2);border:1px solid var(--border);border-radius:11px;
  padding:6px;overflow-x:auto}
.wmap-svg{display:block;width:100%;min-width:620px;height:auto}
.wmap-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:11.5px;color:var(--text-secondary)}
.wmap-legend span{display:flex;align-items:center;gap:6px}
.wmap-legend i{flex-shrink:0}
.wl-dot{width:11px;height:11px;border-radius:50%}
.wl-red{background:var(--critical);opacity:.72;border:1.6px solid var(--critical)}
.wl-org{background:var(--serious);opacity:.72;border:1.6px solid var(--serious)}
.wl-ring{width:13px;height:13px;border-radius:50%;border:1.5px dashed var(--purple)}
.wl-th{width:13px;height:11px;border-radius:3px;background:var(--purple);opacity:.7}
.wmap-note{font-size:11.5px;color:var(--muted);line-height:1.55;margin-top:8px}
.wmap-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wmap-seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);
  border-radius:9px;padding:2px;gap:2px}
.wmap-seg button{border:0;background:transparent;color:var(--text-secondary);cursor:pointer;
  font:inherit;font-size:12px;padding:5px 11px;border-radius:7px;transition:background .12s,color .12s}
.wmap-seg button:hover:not(:disabled){color:var(--text-primary)}
.wmap-seg button.on{background:var(--purple);color:#fff;font-weight:600}
.wmap-seg button:disabled{opacity:.55;cursor:default}
.wl-num{width:15px;height:15px;border-radius:50%;background:var(--serious);opacity:.72;
  border:1.6px solid var(--serious);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:800;color:var(--text-primary)}
.wmap-warn{color:var(--warning)}

/* section nav (sticky) + tiers */
.secnav{position:sticky;top:0;z-index:30;display:flex;gap:4px;flex-wrap:wrap;
  margin:14px 0 4px;padding:6px;border-radius:11px;
  background:var(--surface-1);border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(0,0,0,.18)}
.secnav a{font-size:12.5px;color:var(--text-secondary);text-decoration:none;
  padding:6px 12px;border-radius:8px;white-space:nowrap;transition:background .12s,color .12s}
.secnav a:hover{background:var(--surface-2);color:var(--text-primary)}
@media(max-width:640px){.secnav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}}

/* เว้นที่ให้แถบ sticky ตอนกระโดดตาม anchor */
[id^="s-"]{scroll-margin-top:64px}

.tier-note{font-size:12px;color:var(--muted);margin:22px 0 -4px;padding-left:2px}

/* สัญญาณเตือน — ย้ายขึ้นมาเป็นแถบเต็มความกว้างใต้ดัชนีรวม */
.sig-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* commodity chart tiles (ทองคำ / น้ำมัน) */
.cmdy-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.cmdy-tiles .thstat-val{font-size:20px}
.thstat-lbl .est{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:5px;
  font-size:10px;font-weight:600;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}

/* earthquake near Thailand */
.eq-card{margin-bottom:14px}
.eq-head{margin-bottom:12px}
.eq-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.eqi{display:flex;gap:11px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--border);border-radius:10px;padding:11px 12px}
.eqi-mag{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;
  background:var(--surface-1);border:2px solid var(--serious);color:var(--serious)}
.eqi-mag.big{border-color:var(--critical);color:var(--critical)}
.eqi-body{min-width:0;flex:1}
.eqi-title{font-size:13px;font-weight:600;line-height:1.35}
.eqi-meta{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45}
.eqi-zone{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;
  color:var(--text-secondary);margin-top:5px}
.eqi-tag{padding:1px 7px;border-radius:5px;font-size:10px;font-weight:600;
  background:var(--surface-1);border:1px dashed var(--purple);color:var(--purple)}
.wl-num.wl-eq{width:auto;min-width:26px;height:16px;border-radius:9px;padding:0 5px;font-size:9px;
  background:var(--critical);opacity:.72;border:1.6px solid var(--critical)}

/* ── ประวัติดัชนี: sparkline + ทำไมคะแนนเปลี่ยน ── */
.hero-trend{margin-top:12px;padding:10px 12px 6px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.hero-trend-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.hero-trend-chg{display:flex;gap:6px;flex-wrap:wrap}
.chg{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--surface-1);border:1px solid var(--border);
  font-variant-numeric:tabular-nums}
.chg.worse,.worse{color:var(--critical)} .chg.better,.better{color:var(--good)} .chg.flat,.flat{color:var(--muted)}
.spark{display:block;width:100%;height:56px}

.why-box{margin-top:12px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.why-box .out-lbl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.why-sub{font-size:11px;color:var(--muted);font-weight:400}
.why-row{display:flex;align-items:center;gap:10px;font-size:12.5px;margin:5px 0;font-variant-numeric:tabular-nums}
.why-name{flex:1;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.why-bar{flex:0 0 90px;height:6px;border-radius:4px;background:var(--surface-1);overflow:hidden}
.why-bar i{display:block;height:100%;border-radius:4px}
.why-bar i.pos{background:var(--critical)} .why-bar i.neg{background:var(--good)}
.why-row b{flex:0 0 40px;text-align:right;font-weight:800}
.why-rest{opacity:.75;font-size:11.5px}

/* ── ป้ายรายปัจจัย ── */
.fbadge{flex:0 0 auto;font-size:9.5px;font-weight:700;border-radius:99px;padding:1px 7px;white-space:nowrap;letter-spacing:.1px;
  border:1px solid transparent}
.fbadge.stale{color:var(--warning);background:var(--surface-2);border-color:var(--warning)}
.fbadge.peak-new{color:#fff;background:var(--critical)}
.fbadge.peak-old{color:var(--critical);background:var(--surface-2);border-color:var(--critical)}
.fbadge.low-new{color:#fff;background:var(--good)}
.fbadge.low-old{color:var(--good);background:var(--surface-2);border-color:var(--good)}
.fbadge.near{color:var(--muted);background:var(--surface-2);border-color:var(--border)}
.thstat-lbl .fbadge{margin-left:6px;vertical-align:middle}
/* จอแคบ: ป้ายประวัติรายปัจจัยเบียดชื่อจนอ่านไม่ออก → ซ่อน (ยังอ่านได้จาก help popover) */
@media(max-width:720px){.fgrow .fbadge{display:none}}
.spark-note{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted);margin-top:4px}
.spark-note i{width:0;height:10px;border-left:1.5px dashed var(--warning);flex-shrink:0}

/* ── ภาวะตลาด (hero) ── */
.regime-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:6px 0 2px;font-size:12px}
.regime-lbl{color:var(--muted)}
.regime{padding:2px 9px;border-radius:99px;font-weight:700;font-size:11.5px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-primary);cursor:help}
.regime.cost-push{border-color:var(--serious);color:var(--serious)}
.regime.safe-haven{border-color:var(--purple);color:var(--purple)}
.regime.demand-slump{border-color:var(--warning);color:var(--warning)}
.regime.tight-money{border-color:var(--critical);color:var(--critical)}
.regime.fx-stress{border-color:var(--warning);color:var(--warning)}
.regime.calm{border-color:var(--good);color:var(--good)}
.regime-hint{font-size:11px;color:var(--muted)}

/* ── กลุ่มธุรกิจเปลี่ยนสถานะ ── */
.flip-card{margin-bottom:14px}
.flip-none{font-size:12.5px;color:var(--good)}
.flip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:6px 18px;margin-top:6px}
.flip{display:flex;align-items:center;gap:8px;font-size:12.5px;min-width:0}
.flip-ic{flex-shrink:0}
.flip-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.flip-st{font-size:11px;font-weight:700;white-space:nowrap}
.flip-st.now{color:#fff;padding:1px 8px;border-radius:99px}
.flip-arrow{font-size:11px;font-weight:700} .flip-arrow.worse{color:var(--critical)} .flip-arrow.better{color:var(--good)}
.flip-near{font-size:10px;color:var(--muted);border:1px dashed var(--border);border-radius:99px;padding:0 6px;white-space:nowrap;cursor:help}
.flip-when{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.sme-d30{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums;cursor:help}
.sme-d30.better{color:var(--good)} .sme-d30.worse{color:var(--critical)}
.fc-wide{color:var(--warning);font-weight:600}
/* ── SME Business Simulator (#s-sim) ─────────────────────────────── */
.sim-link{font-size:12px;color:var(--s5);text-decoration:none;font-weight:600;align-self:flex-start}
.sim-link:hover{text-decoration:underline}
.sim-wrap{margin-top:12px;scroll-margin-top:64px}

/* hero: แถบแบรนด์เดียวกับ header (เข้มทั้งสองธีม) */
.sim-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px 26px;align-items:end;
  background:radial-gradient(120% 150% at 0% 0%,rgba(127,119,221,.38),transparent 55%),
             linear-gradient(135deg,var(--navy),var(--navy-mid));
  color:#fff;border-radius:16px;padding:22px 24px;margin-bottom:14px;box-shadow:0 10px 28px rgba(11,20,55,.18)}
.sim-hero>*{min-width:0}
@media(max-width:900px){.sim-hero{grid-template-columns:minmax(0,1fr);padding:18px}}
.sim-kicker{display:inline-flex;font-size:11.5px;font-weight:700;color:#d6d3ff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);padding:3px 10px;border-radius:99px}
.sim-title{font-size:22px;font-weight:750;line-height:1.32;margin:10px 0 6px;letter-spacing:-.01em;color:#fff}
@media(max-width:640px){.sim-title{font-size:18.5px}}
.sim-lead{font-size:13px;color:rgba(255,255,255,.74);line-height:1.6;margin:0}
.sim-quick{display:grid;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:12px;padding:12px}
.sim-q{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:rgba(255,255,255,.72)}
.sim-quick{grid-template-columns:minmax(0,1fr)}
.sim-q,.sim-quick-foot{min-width:0}
.sim-select{min-width:0;max-width:100%;text-overflow:ellipsis}
.sim-select{width:100%;background:#fff;color:#0f1c3f;border:0;border-radius:9px;font:inherit;font-size:14px;
  padding:9px 10px;appearance:auto}
.sim-money{display:flex;align-items:center;gap:6px;background:#fff;border-radius:9px;padding:0 12px}
.sim-money input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:19px;font-weight:700;
  padding:7px 0;color:#0f1c3f;outline:none;font-variant-numeric:tabular-nums}
.sim-money i{font-style:normal;font-size:12px;color:#5a6a8a}
.sim-select:focus-visible,.sim-money:focus-within{outline:2px solid #afa9ec;outline-offset:2px}
.sim-quick-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sim-privacy{font-size:11px;color:rgba(255,255,255,.62)}
.sim-print-btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:9px;
  padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.sim-print-btn:hover{background:rgba(255,255,255,.22)}

/* layout */
.sim-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px;align-items:start}
/* มือถือ: ผลลัพธ์ขึ้นก่อน (กรอกแค่กลุ่ม+รายได้ใน hero ก็เห็นผล) แล้วค่อยปรับละเอียดด้านล่าง */
@media(max-width:900px){.sim-grid{grid-template-columns:minmax(0,1fr)}.sim-out{order:-1}}
.sim-in{display:flex;flex-direction:column;gap:12px}
.sim-panel{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.sim-ph{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
.sim-ph b{font-size:13.5px}
.sim-ph span{font-size:11px;color:var(--muted)}

/* stacked bar (ส่วนแบ่งรายได้/ต้นทุน) — ช่องว่าง 2px ระหว่างส่วน */
.sbar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--surface-2)}
.sbar i{display:block;min-width:3px}
.sbar-lg{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11.5px;color:var(--text-secondary)}
.sbar-lg span{display:inline-flex;align-items:center;gap:5px}
.sbar-lg i{width:9px;height:9px;border-radius:3px;display:inline-block}
.sbar-lg b{color:var(--text-primary);font-weight:620;font-variant-numeric:tabular-nums}

.sim-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:12px}
@media(max-width:360px){.sim-fields{grid-template-columns:1fr}}
.sim-field{display:flex;flex-direction:column;gap:3px;min-width:0}
.sim-fl{font-size:11.5px;color:var(--text-secondary);line-height:1.3}
.sim-fin{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:0 9px;min-width:0}
.sim-fin input{flex:1;min-width:0;width:100%;background:transparent;border:0;color:var(--text-primary);
  font:inherit;font-size:14px;padding:7px 0;text-align:right;font-variant-numeric:tabular-nums;outline:none}
.sim-fin:focus-within{border-color:var(--s5);box-shadow:0 0 0 3px rgba(57,135,229,.16)}
.sim-fin i{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap}
.sim-more summary{cursor:pointer;font-size:13px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.sim-more summary::-webkit-details-marker{display:none}
.sim-more summary::after{content:"▾";color:var(--muted)}
.sim-more[open] summary::after{content:"▴"}
.sim-base{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--text-secondary);padding:0 4px}
.sim-base b{color:var(--text-primary);font-variant-numeric:tabular-nums}
.sim-ghost{background:transparent;border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;
  padding:6px 10px;font:inherit;font-size:12px;cursor:pointer}
.sim-ghost:hover{color:var(--text-primary);background:var(--surface-2)}
.sim-warn{color:var(--critical);font-weight:600;font-size:12px;margin-top:10px}

/* แท็บผลลัพธ์ */
.sim-out{background:var(--surface-1);border:1px solid var(--border);border-radius:14px;padding:0 18px 18px;min-width:0}
@media(max-width:640px){.sim-out{padding:0 14px 16px}}
.sim-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 -18px 14px;padding:0 10px;
  overflow-x:auto;scrollbar-width:none}
.sim-tabs::-webkit-scrollbar{display:none}
@media(max-width:640px){.sim-tabs{margin:0 -14px 12px;padding:0 6px}}
.sim-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:13px;
  font-weight:600;padding:12px 10px 10px;cursor:pointer;white-space:nowrap}
.sim-tab:hover{color:var(--text-primary)}
.sim-tab.on{color:var(--s5);border-bottom-color:var(--s5)}
.sim-scen{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:640px){.sim-scen{flex-wrap:nowrap;overflow-x:auto;margin:0 -14px;padding:0 14px 4px;scrollbar-width:none}
  .sim-scen::-webkit-scrollbar{display:none}}
.sim-chip{background:var(--surface-2);border:1px solid var(--border);color:var(--text-secondary);border-radius:99px;
  padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.sim-chip:hover{color:var(--text-primary);border-color:var(--s5)}
.sim-chip.on{background:var(--s5);border-color:var(--s5);color:#fff;box-shadow:0 2px 8px rgba(57,135,229,.32)}
.sim-shocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin-top:10px}
.sim-shock{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:6px 9px;
  display:flex;flex-direction:column;gap:2px;cursor:help;min-width:0}
.sim-shock.zero{opacity:.55}
.sim-sk{font-size:11px;color:var(--muted);white-space:nowrap}
.sim-sv{font-size:13px;font-variant-numeric:tabular-nums}
.sim-shock .sim-fin{background:var(--surface-1)}
.sim-note{font-size:11.5px;color:var(--muted);margin-top:8px;line-height:1.5}
.sim-basis{margin-top:8px;font-size:12px}
.sim-basis summary{cursor:pointer;color:var(--s5);font-weight:600}
.sim-basis ul,.sim-limits{margin:8px 0 0;padding-left:18px;color:var(--text-secondary);line-height:1.6;font-size:12px}

/* ผลลัพธ์หลัก */
.sim-result{margin-top:14px;border-radius:12px;padding:14px 16px;background:var(--surface-2);
  border:1px solid var(--border);border-left:4px solid var(--muted);scroll-margin-top:70px}
.sim-result.tone-neg{border-left-color:var(--critical)}
.sim-result.tone-warn{border-left-color:var(--serious)}
.sim-result.tone-pos{border-left-color:var(--good)}
.sim-story{font-size:14px;line-height:1.6;margin:0 0 6px;color:var(--text-primary)}
.sim-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sim-big-num{font-size:34px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.tone-neg .sim-big-num{color:var(--critical)} .tone-warn .sim-big-num{color:var(--serious)} .tone-pos .sim-big-num{color:var(--good)}
.sim-big-unit{font-size:13px;color:var(--muted)}
.sim-range{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.sim-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
@media(max-width:560px){.sim-kpis{grid-template-columns:1fr}}
.sim-kpi{background:var(--surface-1);border:1px solid var(--border);border-radius:10px;padding:9px 11px;
  display:flex;flex-direction:column;gap:2px;min-width:0}
.sim-kpi span{font-size:11px;color:var(--muted)}
.sim-kpi b{font-size:15px;font-variant-numeric:tabular-nums}
.sim-kpi em{font-style:normal;font-size:11px;color:var(--text-secondary)}
.sim-kpi.warn b{color:var(--critical)}
.sim-meter{display:block;height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:4px}
.sim-meter i{display:block;height:100%;background:var(--good);border-radius:3px}
.sim-kpi.warn .sim-meter i{background:var(--critical)}
.sim-sub-h{font-size:12.5px;font-weight:650;margin:16px 0 6px}

/* แท่งแยกปัจจัย (details: แตะเพื่อดูวิธีคิด) */
.sim-drivers{display:flex;flex-direction:column}
.sim-drv summary{display:grid;grid-template-columns:132px minmax(0,1fr) 76px;align-items:center;gap:10px;
  cursor:pointer;list-style:none;padding:6px 0;font-size:12.5px;border-radius:6px}
.sim-drv summary::-webkit-details-marker{display:none}
.sim-drv summary:hover .fn{color:var(--text-primary)}
.sim-drv .fn{color:var(--text-secondary)}
.sim-drv .fn::after{content:" ⓘ";color:var(--muted);font-size:10px}
.sim-drv .fv{text-align:right;font-variant-numeric:tabular-nums;font-weight:620}
.sim-drv[open] .fn{color:var(--text-primary)}
.sim-drv .sim-explain{padding:0 0 8px}
@media(max-width:560px){.sim-drv summary{grid-template-columns:96px minmax(0,1fr) 64px;gap:8px;font-size:12px}}
.dtrack{position:relative;height:10px;background:var(--surface-2);border-radius:5px}
.dtrack::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--baseline)}
.dtrack i{position:absolute;top:0;bottom:0;border-radius:4px}
.dtrack i.neg{background:var(--critical)} .dtrack i.pos{background:var(--good)} .dtrack i.zero{background:var(--muted)}
.sim-explain{font-size:11.5px;color:var(--muted);line-height:1.5}

/* เทียบสถานการณ์ */
.sim-cmp{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.sim-cmp-row{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr) 78px;
  grid-template-areas:"name bar val" "meta meta meta";gap:2px 12px;align-items:center;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:10px;padding:8px 10px;font:inherit;color:inherit;cursor:pointer}
.sim-cmp-row:hover{background:var(--surface-2)}
.sim-cmp-row.on{background:var(--surface-2);border-color:var(--s5)}
.sim-cmp-name{grid-area:name;font-size:13px;font-weight:600;display:flex;align-items:center;gap:7px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-cmp-bar{grid-area:bar;position:relative;height:12px;background:var(--surface-2);border-radius:6px}
.sim-cmp-row:hover .sim-cmp-bar,.sim-cmp-row.on .sim-cmp-bar{background:var(--surface-1)}
.sim-cmp-bar::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--baseline)}
.sim-cmp-bar .whisker{position:absolute;top:5px;height:2px;background:var(--muted);opacity:.7;border-radius:1px}
.sim-cmp-bar .fill{position:absolute;top:1px;bottom:1px;border-radius:5px}
.sim-cmp-bar .fill.neg{background:var(--critical)} .sim-cmp-bar .fill.pos{background:var(--good)}
.sim-cmp-val{grid-area:val;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.sim-cmp-meta{grid-area:meta;font-size:11px;color:var(--muted);padding-left:15px}
@media(max-width:560px){.sim-cmp-row{grid-template-columns:minmax(0,1fr) 72px;grid-template-areas:"name val" "bar bar" "meta meta";gap:5px 8px}}
.sev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--good)}
.sev-dot.sev-watch{background:var(--warning)} .sev-dot.sev-act{background:var(--serious)} .sev-dot.sev-critical{background:var(--critical)}

/* ย้อนดู 90 วัน */
.rp-svg{width:100%;height:auto;display:block;margin:6px 0 4px}
.rp-grid{stroke:var(--grid);stroke-width:1}
.rp-zero{stroke:var(--baseline);stroke-width:1.2}
.rp-yl,.rp-xl{fill:var(--muted);font-size:11px;font-family:inherit}
.rp-up{fill:var(--good);fill-opacity:.16}
.rp-dn{fill:var(--critical);fill-opacity:.16}
.rp-line{fill:none;stroke:var(--s5);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rp-worst{fill:var(--critical);stroke:var(--surface-1);stroke-width:2}
.rp-best{fill:var(--good);stroke:var(--surface-1);stroke-width:2}
.rp-last{fill:var(--s5);stroke:var(--surface-1);stroke-width:2}
.rp-hit{fill:transparent}
.rp-hit:hover{fill:var(--text-primary);fill-opacity:.05}
.sim-empty{text-align:center;padding:30px 16px;color:var(--text-secondary)}
.sim-empty-ic{font-size:30px;margin-bottom:6px}
.sim-empty p{font-size:12.5px;color:var(--muted);max-width:440px;margin:6px auto 0;line-height:1.6}

/* สมมุติฐาน (ค่าส่งผ่าน) */
.sim-el{display:flex;flex-direction:column;gap:8px;margin:10px 0 12px}
.sim-el-row{display:grid;grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"txt in" "txt def";gap:2px 12px;
  align-items:center;background:var(--surface-2);border-radius:10px;padding:9px 12px}
.sim-el-txt{grid-area:txt;display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.sim-el-txt small{color:var(--muted);font-size:11px;line-height:1.45}
.sim-el-row .sim-fin{grid-area:in;background:var(--surface-1)}
.sim-el-def{grid-area:def;font-size:10.5px;color:var(--muted);text-align:right}
.sim-el-def.changed{color:var(--warning);font-weight:600}

/* แนวทาง */
.sim-recs-h{margin-top:18px}
.sim-recs{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.sim-rec{background:var(--surface-1);border:1px solid var(--border);border-left:3px solid var(--s5);
  border-radius:12px;padding:12px 14px;font-size:12.5px}
.sim-rec.sev-critical{border-left-color:var(--critical)}
.sim-rec.sev-act{border-left-color:var(--serious)}
.sim-rec.sev-watch{border-left-color:var(--warning)}
.sim-rec.sev-info{border-left-color:var(--good)}
.sim-rec-top{display:flex;align-items:center;gap:7px}
.sim-rec-top b{flex:1;font-size:13px}
.sim-sev{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--border);white-space:nowrap;color:var(--text-secondary)}
.sev-critical .sim-sev{color:var(--critical)} .sev-act .sim-sev{color:var(--serious)}
.sev-watch .sim-sev{color:var(--warning)} .sev-info .sim-sev{color:var(--good)}
.sim-rec-why{color:var(--text-secondary);margin:6px 0 4px;line-height:1.5}
.sim-rec ul{margin:4px 0 0;padding-left:18px;line-height:1.6}

/* มือถือ: แถบผลลัพธ์ลอยติดล่าง ขณะเลื่อนอยู่ในส่วนจำลอง */
.sim-sticky{display:none}
@media(max-width:900px){
  .sim-sticky{position:sticky;bottom:12px;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin:14px auto 0;max-width:440px;padding:10px 16px;border-radius:99px;background:var(--navy);color:#fff;
    text-decoration:none;box-shadow:0 8px 24px rgba(11,20,55,.35);font-size:12.5px;border:1px solid rgba(255,255,255,.14)}
  .sim-sticky span{color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sim-sticky b{font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .sim-sticky.tone-neg b{color:#ff8f8a} .sim-sticky.tone-warn b{color:#ffb48f} .sim-sticky.tone-pos b{color:#5fe0b5}
}

/* ── พิมพ์ / บันทึก PDF: สรุป 1 หน้า ───────────────────────────── */
.sim-print{display:none}
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff !important}
  .radar-root{background:#fff !important;color:#111 !important;padding:0 !important;max-width:none !important;min-height:0 !important}
  .radar-root > :not(.sim-print){display:none !important}
  .sim-print{display:block !important;color:#111;font-size:9.5pt;line-height:1.42}
  .pp-head{display:flex;justify-content:space-between;gap:10px;font-size:8.5pt;color:#555;border-bottom:2px solid #0B1437;padding-bottom:4px}
  .pp-title{font-size:13pt;margin:8px 0 2px;color:#0B1437;font-weight:700}
  .pp-story{font-size:10.5pt;margin:2px 0 8px}
  .pp-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pp-t{width:100%;border-collapse:collapse;font-size:8.8pt;margin-bottom:8px}
  .pp-t caption{text-align:left;font-weight:700;font-size:9.5pt;padding:2px 0 3px;color:#0B1437}
  .pp-t th{text-align:left;font-weight:600;width:34%;padding:2px 6px 2px 0;vertical-align:top;color:#333;border-bottom:1px solid #e3e6ee}
  .pp-t td{padding:2px 4px;border-bottom:1px solid #e3e6ee;vertical-align:top}
  .pp-t .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  .pp-t .small{font-size:8pt;color:#444}
  .pp-t tr.hd td{font-weight:600;color:#555}
  .pp-wide th{width:22%}
  .pp-recs{margin-top:4px}
  .pp-cap{font-weight:700;color:#0B1437;font-size:9.5pt;margin-bottom:2px}
  .pp-rec{font-size:8.6pt;margin:3px 0;padding-left:6px;border-left:2px solid #0B1437;break-inside:avoid}
  .pp-rec span{color:#444}
  .pp-note{font-size:8.8pt;margin:4px 0}
  .pp-foot{font-size:7.6pt;color:#666;margin-top:8px;border-top:1px solid #ccc;padding-top:4px}
}

/* ── Mobile polish (ทั้งหน้า) ─────────────────────────────────────── */
/* grid item ใช้ min-width:auto → เนื้อหายาวดัน track ให้กว้างเกินจอ ; บังคับให้หดได้ */
.grid>*{min-width:0}
/* Blazor โฟกัส h1 หลังโหลดหน้า (FocusOnNavigate) — ไม่ต้องโชว์กรอบ แต่ยังคงโฟกัสสำหรับ screen reader */
h1:focus{outline:none}
.swipe-hint{display:none}
@media(max-width:640px){
  .radar-root{padding:14px 12px}
  .card{padding:15px;border-radius:12px}
  .sec-title{font-size:14.5px;margin:22px 0 10px}
  .secnav{margin:10px 0 4px;scrollbar-width:none}
  .secnav::-webkit-scrollbar{display:none}
  .secnav a{padding:6px 10px}
  .wmap-svg{min-width:540px}
  /* การ์ดกลุ่มธุรกิจ 18 ใบ → ปัดซ้าย-ขวา (แทนเลื่อนยาว ~4,000px) */
  .sme-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -12px;padding:2px 12px 10px;scrollbar-width:none}
  .sme-grid::-webkit-scrollbar{display:none}
  .sme-grid > .sme{flex:0 0 86%;scroll-snap-align:center}
  .swipe-hint{display:block;font-size:11.5px;color:var(--muted);margin:2px 2px 8px}
}