/* ═══════════════════════════════════════════════════════════════════════
   WaveHub UI v100 — design system
   Tokens: light + dark (dark = default ตามระบบเดิม, สลับได้ เก็บใน localStorage 'theme')
   Semantic colours เดิมคงความหมาย: trace X/Y/Z · RS/Accel/Vel · verdict
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-thai-700-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Thai";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-thai-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --ground:#f2f4f7; --surface:#ffffff; --surface-2:#edf1f5; --surface-3:#e3e8ef; --line:#d9dfe7; --line-2:#c4ccd8;
  --ink:#121821; --dim:#566376; --faint:#8894a4;
  --accent:#2f6fe4; --accent-2:#2458bd; --accent-soft:#e3ecfd; --on-accent:#ffffff;
  --event:#c46a06; --event-soft:#fbeedd;
  --good:#17804a; --good-soft:#e2f3e9; --warn:#9a6400; --warn-soft:#fbf0d8; --bad:#c3342b; --bad-soft:#fbe5e3;
  --neutral:#6b7686; --neutral-soft:#eceff3;
  --tx:#d23b3b; --ty:#22884a; --tz:#2f6fe4;
  --rs:#2f6fe4; --accel:#7c4ddb; --vel:#0f8f86;
  --grid:rgba(18,24,33,.075); --grid-2:rgba(18,24,33,.14);
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-lg:0 24px 64px -16px rgba(16,24,40,.35);
  --scrim:rgba(10,14,20,.45);
  --font:"Plex Thai","IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;
  --mono:"Plex Mono","IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:8px; --r-lg:12px;
  --side:232px; --top:56px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0b0f15; --surface:#121820; --surface-2:#18202b; --surface-3:#202a37; --line:#252f3d; --line-2:#334055;
  --ink:#e6ecf3; --dim:#97a4b6; --faint:#65717f;
  --accent:#5b93ff; --accent-2:#80aaff; --accent-soft:#172746; --on-accent:#07101f;
  --event:#f0a33a; --event-soft:#382610;
  --good:#4cd68a; --good-soft:#10301f; --warn:#f0c258; --warn-soft:#382c0f; --bad:#ff7a70; --bad-soft:#3b1917;
  --neutral:#8b97a8; --neutral-soft:#1d2531;
  --tx:#ff5a5a; --ty:#43c46e; --tz:#5b93ff;
  --rs:#5b93ff; --accel:#b08cff; --vel:#36d3b8;
  --grid:rgba(230,236,243,.07); --grid-2:rgba(230,236,243,.14);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 64px -16px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:contain;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.25;text-wrap:balance;font-weight:600}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
svg[aria-hidden="true"]{width:16px;height:16px;flex:none}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--dim)} .faint{color:var(--faint)}
.ok{color:var(--good)} .wn{color:var(--warn)} .ev{color:var(--event)}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft)}

/* ── App shell ───────────────────────────────────────────── */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);grid-template-rows:var(--top) minmax(0,1fr);height:100%}
.side{grid-row:1/3;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{height:var(--top);display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);flex:none}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--ink);display:grid;place-items:center;flex:none}
.brand .mark svg{width:18px;height:18px;stroke:var(--surface)}
.brand b{font-size:16px;font-weight:700;letter-spacing:.01em;display:block;line-height:1.1}
.brand small{font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.06em}
.nav{padding:10px 10px 16px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px}
.nav .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav .grp:first-child{padding-top:4px}
.nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;color:var(--dim);font-weight:500;text-decoration:none;position:relative}
.nav a svg{width:18px;height:18px;flex:none}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.nav a .badge{margin-left:auto}
.side-foot{border-top:1px solid var(--line);padding:12px 14px;display:grid;gap:8px;font-size:12.5px}
.side-foot .row{display:flex;align-items:center;gap:8px}

.top{grid-column:2;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--surface);min-width:0;position:relative;z-index:5}
.top .crumb{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;font-size:15px}
.top .crumb .sub{color:var(--faint);font-weight:400;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .grow{flex:1}
.sessionpill{display:inline-flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--good) 40%,var(--line));background:var(--good-soft);
  color:var(--ink);border-radius:999px;padding:4px 12px 4px 10px;font-size:12.5px;text-decoration:none;white-space:nowrap}
.sessionpill:hover{text-decoration:none;border-color:var(--good)}
.sessionpill b{font-family:var(--mono)}
.clock{font-family:var(--mono);font-size:12.5px;color:var(--dim);white-space:nowrap}
.iconbtn{width:36px;height:36px;border-radius:8px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--dim);flex:none}
.iconbtn:hover{color:var(--ink);border-color:var(--line-2)}
.iconbtn svg{width:18px;height:18px}
.searchbtn{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--faint);cursor:pointer;min-width:200px}
.searchbtn svg{width:16px;height:16px}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 5px;color:var(--dim);background:var(--surface)}
.userchip{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px;background:var(--surface)}
.userchip .av{width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:600}
.userchip.guest .av{background:var(--surface-3);color:var(--dim)}

.main{grid-column:2;overflow:auto;min-width:0;position:relative}
.page{max-width:1480px;margin:0 auto;padding:22px 24px 72px;display:grid;gap:18px;align-content:start}
.page.narrow{max-width:980px}

.mockribbon{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;background:var(--event-soft);color:var(--event);
  border:1px solid color-mix(in srgb,var(--event) 45%,transparent);font-family:var(--mono);font-size:11.5px;padding:4px 12px;border-radius:999px;box-shadow:var(--shadow);pointer-events:none;white-space:nowrap}
.connbanner{position:fixed;top:0;left:0;right:0;z-index:80;background:var(--bad);color:#fff;font-weight:600;font-size:13px;text-align:center;
  padding:7px 12px;padding-top:calc(7px + env(safe-area-inset-top,0px))}

.tabbar{display:none}
@media (max-width:1100px){ :root{--side:72px} .side .nav .grp,.side .nav a > span:not(.badge),.brand .txt,.side-foot .txt{display:none} .side .nav a{justify-content:center;padding:10px 0} .side .nav a .badge{position:absolute;top:2px;right:6px} .brand{justify-content:center;padding:0} .side-foot{justify-items:center} .searchbtn{min-width:0} .searchbtn .lbl{display:none} }
@media (max-width:760px){
  :root{--top:52px}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--top) minmax(0,1fr) auto}
  .side{display:none}
  .top{grid-column:1;padding:0 12px;gap:8px;padding-top:env(safe-area-inset-top,0px);height:calc(var(--top) + env(safe-area-inset-top,0px))}
  .main{grid-column:1}
  .page{padding:14px 14px 28px;gap:14px}
  .clock,.searchbtn,.userchip .nm{display:none}
  .top .crumb .sub{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:var(--surface);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--dim);text-decoration:none;min-height:44px;justify-content:center;border-radius:8px}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.on{color:var(--accent);font-weight:600}
  .mockribbon{bottom:72px}
}

/* ── Page head ───────────────────────────────────────────── */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
.phead h1{font-size:24px;font-weight:700;letter-spacing:-.005em}
.phead .desc{color:var(--dim);font-size:13.5px;flex-basis:100%;max-width:80ch}
.phead .actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ── Surfaces ────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);min-width:0}
.card.pad{padding:16px}
.card.lift{box-shadow:var(--shadow)}
.card > .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);min-height:50px;flex-wrap:wrap}
.card > .hd h3{font-size:14.5px;font-weight:600}
.card > .hd .meta{font-size:12px;color:var(--faint);font-family:var(--mono)}
.card > .hd .tools{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.card > .bd{padding:14px 16px}
.card > .bd.flush{padding:0}
.card > .ft{padding:10px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px}
.split-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px}
.sidebarlayout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split-r{grid-template-columns:minmax(0,1fr)}.sidebarlayout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.stack{display:grid;gap:12px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.sep{height:1px;background:var(--line);margin:4px 0}

/* ── Buttons & controls ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;padding:0 14px;border-radius:8px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:border-color .12s,background .12s}
.btn:hover{border-color:var(--accent);text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed;border-color:var(--line-2)}
.btn svg{width:16px;height:16px;flex:none}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.go{background:var(--good);border-color:var(--good);color:var(--surface)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line-2))}
.btn.danger.solid{background:var(--bad);color:#fff;border-color:var(--bad)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--ink);background:var(--surface-2)}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:7px}
.btn.lg{height:48px;padding:0 20px;font-size:15.5px;border-radius:10px}
.btn.block{width:100%}
.btn .kbd{margin-left:4px}
.btn.locked::after{content:"";width:12px;height:12px;background:currentColor;opacity:.75;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0110 0v3h1a1 1 0 011 1v9a1 1 0 01-1 1H6a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0110 0v3h1a1 1 0 011 1v9a1 1 0 01-1 1H6a1 1 0 01-1-1v-9a1 1 0 011-1h1zm2 0h6V7a3 3 0 00-6 0v3z'/%3E%3C/svg%3E") center/contain no-repeat}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface);flex:none}
.seg button{border:0;background:transparent;color:var(--dim);height:32px;padding:0 11px;cursor:pointer;font-size:12.5px;font-weight:500;border-right:1px solid var(--line);white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink);background:var(--surface-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);font-weight:600}
.seg.sm button{height:28px;padding:0 9px;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-size:12.5px;color:var(--dim);white-space:nowrap}
.chip .c{font-family:var(--mono);color:var(--faint);font-size:11.5px}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));color:var(--accent);font-weight:600}
.chip[aria-pressed="true"] .c{color:var(--accent)}
.field{display:grid;gap:5px;min-width:0}
.field > label,.lbl{font-size:12.5px;color:var(--dim);font-weight:500}
.field .hint{font-size:12px;color:var(--faint)}
.in,.sel,textarea.in{height:36px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:0 10px;min-width:0;width:100%;font-size:13.5px}
textarea.in{height:auto;padding:8px 10px;resize:vertical;min-height:72px}
.in.mono{font-family:var(--mono)}
.in:focus,.sel:focus,textarea.in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.in.sm,.sel.sm{height:30px;font-size:12.5px;border-radius:7px}
.in[type="number"]{font-family:var(--mono)}
.chk{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;user-select:none}
.chk input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.toggle{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:22px;white-space:nowrap}
.toggle input{opacity:0;position:absolute;inset:0;margin:0;cursor:pointer;z-index:1;width:100%;height:100%}
.toggle i{position:relative;width:38px;height:22px;flex:none;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);transition:.15s}
.toggle i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:.15s}
.toggle input:checked + i{background:var(--accent);border-color:var(--accent)}
.toggle input:checked + i::after{transform:translateX(16px)}
.toggle input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.toolbar .grpl{display:flex;align-items:center;gap:7px}
.toolbar .grpl > .lbl{font-size:11.5px;color:var(--faint);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.toolbar .grow{flex:1}

/* ── Status language ─────────────────────────────────────── */
.dot{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none;display:inline-block}
.dot.g{background:var(--good)} .dot.y{background:var(--warn)} .dot.r{background:var(--bad)} .dot.e{background:var(--event)} .dot.n{background:var(--line-2)}
.dot.live{box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 25%,transparent)}
@media (prefers-reduced-motion:no-preference){.dot.live{animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 0%,transparent)}}}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:1px 9px;white-space:nowrap;line-height:1.7}
.pill.g{background:var(--good-soft);color:var(--good)} .pill.y{background:var(--warn-soft);color:var(--warn)} .pill.r{background:var(--bad-soft);color:var(--bad)}
.pill.n{background:var(--neutral-soft);color:var(--neutral)} .pill.a{background:var(--accent-soft);color:var(--accent)} .pill.e{background:var(--event-soft);color:var(--event)}
.badge{font-family:var(--mono);font-size:10.5px;font-weight:600;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center;background:var(--bad);color:#fff}
.badge.n{background:var(--surface-3);color:var(--dim)}
.type{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;font-weight:600;border-radius:4px;padding:0 6px;line-height:1.8;white-space:nowrap}
.type.rs{color:var(--rs);background:color-mix(in srgb,var(--rs) 13%,transparent)}
.type.accel{color:var(--accel);background:color-mix(in srgb,var(--accel) 13%,transparent)}
.type.velocity,.type.vel{color:var(--vel);background:color-mix(in srgb,var(--vel) 13%,transparent)}
.fresh{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;border-radius:999px;padding:0 8px;border:1px solid var(--line);color:var(--dim);white-space:nowrap;line-height:1.8}
.fresh::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--good)}
.fresh.slow::before{background:var(--warn)}
.fresh.stale{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--line))} .fresh.stale::before{background:var(--bad)}
.prov{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;border-radius:4px;padding:0 7px;line-height:1.8;background:var(--surface-2);color:var(--dim);border:1px solid var(--line);white-space:nowrap}
.prov.q{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.prov.ok{background:var(--good-soft);color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.scope{display:inline-flex;align-items:center;gap:5px;font-size:11px;border-radius:4px;padding:0 7px;line-height:1.8;border:1px dashed var(--line-2);color:var(--dim);white-space:nowrap}
.scope.all{border-color:color-mix(in srgb,var(--warn) 60%,transparent);color:var(--warn)}
.notice{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;border-radius:10px;padding:10px 14px;font-size:13px;border:1px solid var(--line);background:var(--surface-2)}
.notice.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.notice.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}
.notice.good{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.notice.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.notice b{font-weight:600}
.notice .grow{flex:1}
.empty{display:grid;place-items:center;gap:6px;text-align:center;padding:36px 16px;color:var(--dim);font-size:13.5px}
.empty svg{width:34px;height:34px;color:var(--faint)}
.empty b{color:var(--ink);font-weight:600;font-size:14.5px}
.skel{background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2));background-size:200% 100%;border-radius:6px;min-height:14px}
@media (prefers-reduced-motion:no-preference){.skel{animation:sk 1.3s linear infinite}@keyframes sk{to{background-position:-200% 0}}}
.spin{width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;flex:none}
@media (prefers-reduced-motion:no-preference){.spin{animation:rot .8s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}}

/* ── KPI band ────────────────────────────────────────────── */
.band{display:grid;grid-template-columns:minmax(220px,1.3fr) repeat(5,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.band > *{padding:13px 16px;border-right:1px solid var(--line);min-width:0}
.band > *:last-child{border-right:0}
.band .l{font-size:12px;color:var(--dim)}
.band .v{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.3;white-space:nowrap}
.band .v small{font-size:12px;color:var(--faint);font-weight:400}
.band .s{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band a{color:inherit;text-decoration:none;display:block}
.band a:hover{background:var(--surface-2)}
.verdict{display:flex;gap:12px;align-items:center;overflow:hidden}
.verdict > div{min-width:0}
.verdict .s{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.verdict .lamp{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--surface)}
.verdict .lamp svg{width:20px;height:20px}
.verdict .t{font-weight:700;font-size:15.5px;line-height:1.25}
.verdict.g{background:var(--good-soft)} .verdict.g .lamp{background:var(--good)} .verdict.g .t{color:var(--good)}
.verdict.y{background:var(--warn-soft)} .verdict.y .lamp{background:var(--warn)} .verdict.y .t{color:var(--warn)}
.verdict.r{background:var(--bad-soft)} .verdict.r .lamp{background:var(--bad)} .verdict.r .t{color:var(--bad)}
.band .y .v{color:var(--warn)} .band .r .v{color:var(--bad)}
@media (max-width:1280px){.band{grid-template-columns:repeat(3,minmax(0,1fr))}.band>*{border-bottom:1px solid var(--line)}.band .verdict{grid-column:1/-1}}
@media (max-width:560px){.band{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── Tables ──────────────────────────────────────────────── */
.tw{overflow-x:auto;min-width:0}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-weight:500;font-size:11.5px;color:var(--faint);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface);position:sticky;top:0;z-index:1}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl td.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--surface-2)}
.tbl tr.sel td{background:var(--accent-soft)}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort:hover{color:var(--ink)}
.tbl .nowrap{white-space:nowrap}
.cov{display:inline-block;min-width:52px;text-align:center;border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:12px;line-height:1.8}
.cov.g{background:var(--good-soft);color:var(--good)} .cov.y{background:var(--warn-soft);color:var(--warn)} .cov.r{background:var(--bad-soft);color:var(--bad)} .cov.n{background:var(--neutral-soft);color:var(--neutral)}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{border:0;background:none;padding:10px 14px;color:var(--dim);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none;display:inline-flex;gap:7px;align-items:center}
.tabs button:hover,.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs [aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}

/* ── Overlays ────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:90;display:grid;place-items:center;padding:16px}
.dialog{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;min-width:0}
.dialog.wide{width:min(980px,100%)}
.dialog.sm{width:min(420px,100%)}
.dialog > .hd{display:flex;align-items:center;gap:10px;padding:16px 18px 12px}
.dialog > .hd h3{font-size:17px;font-weight:700}
.dialog > .hd .x{margin-left:auto}
.dialog > .bd{padding:4px 18px 16px;overflow:auto;display:grid;gap:12px}
.dialog > .ft{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:760px){
  .scrim{place-items:end stretch;padding:0}
  .dialog,.dialog.wide,.dialog.sm{width:100%;border-radius:16px 16px 0 0;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
}
.toasts{position:fixed;right:16px;bottom:16px;z-index:100;display:grid;gap:8px;justify-items:end;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--surface);border-radius:10px;padding:10px 14px;font-size:13px;box-shadow:var(--shadow-lg);max-width:min(440px,calc(100vw - 32px))}
.toast.bad{background:var(--bad);color:#fff}
.toast.good .dot{background:var(--good)}
@media (max-width:760px){.toasts{left:12px;right:12px;bottom:78px;justify-items:stretch}}
.palette{width:min(620px,100%);align-self:start;margin-top:10vh}
.palette input{height:52px;border:0;border-bottom:1px solid var(--line);border-radius:14px 14px 0 0;padding:0 18px;font-size:16px;background:transparent;width:100%}
.palette input:focus{outline:none}
.palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.palette li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer}
.palette li[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.palette li .k{margin-left:auto;font-size:11.5px;color:var(--faint);font-family:var(--mono)}

/* ── Node / live cards ───────────────────────────────────── */
.livegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
@media (max-width:760px){.livegrid{grid-template-columns:minmax(0,1fr)}}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;position:relative;display:flex;flex-direction:column;min-width:0}
.lcard.drag{opacity:.5;outline:2px dashed var(--accent)}
.lcard .lh{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;min-width:0;cursor:grab}
.lcard .lh b{font-family:var(--mono);font-size:13px}
.lcard .lh .st{color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lcard .lh .r{margin-left:auto;display:flex;gap:6px;align-items:center;flex:none}
.lcard canvas{display:block;width:100%;height:150px}
.lcard .stale{position:absolute;inset:44px 0 0;display:none;place-items:center;text-align:center;background:color-mix(in srgb,var(--surface) 55%,transparent);color:var(--bad);font-weight:600;font-size:12.5px;padding:0 16px}
.lcard.isstale .stale{display:grid}
.lcard.isstale canvas{filter:grayscale(1);opacity:.35}
.fs{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;border-radius:999px;padding:0 8px;line-height:1.8;cursor:pointer;border:0;white-space:nowrap}
.fs.still{background:var(--good-soft);color:var(--good)} .fs.moving{background:var(--accent-soft);color:var(--accent)} .fs.impact{background:var(--bad-soft);color:var(--bad)}
.fs.activity{background:var(--warn-soft);color:var(--warn)} .fs.settling{background:var(--neutral-soft);color:var(--neutral)}
.flag{border:0;background:var(--event-soft);color:var(--event);font-size:11px;font-weight:700;border-radius:999px;padding:0 7px;line-height:1.8;cursor:pointer}

/* chips in floor grid */
.fgrid{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:6px 8px;align-items:center}
.fgrid .fl{font-family:var(--mono);font-weight:600;color:var(--dim);font-size:12.5px;text-align:right;min-width:34px}
.nchip{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-family:var(--mono);font-size:12.5px;min-width:0;background:var(--surface)}
.nchip .t{margin-left:auto;font-family:var(--font);font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nchip.ref{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.nchip.warn{border-color:var(--warn);background:var(--warn-soft)}
.nchip.bad{border-color:var(--bad);background:var(--bad-soft)}

/* timer ring */
.ring{position:relative;display:grid;place-items:center}
.ring svg{width:200px;height:200px}
.ring .ctr{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .big{font-family:var(--mono);font-size:42px;font-weight:600;letter-spacing:-.02em;line-height:1}
.ring .s{font-size:12px;color:var(--dim);margin-top:6px}
.segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.segs span{font-family:var(--mono);font-size:10.5px;color:var(--faint);border-top:4px solid var(--line);padding-top:3px;text-align:center;min-width:0;overflow:hidden}
.segs span.d{border-color:var(--good);color:var(--good)} .segs span.c{border-color:var(--accent);color:var(--accent);font-weight:600}
.bar{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--barc,var(--accent));border-radius:3px;transition:width .5s}
.bar.g i{background:var(--good)} .bar.y i{background:var(--warn)} .bar.r i{background:var(--bad)}
.steps{display:flex;gap:6px}
.steps a,.steps span{flex:1;display:grid;gap:4px;font-size:11.5px;color:var(--faint);text-decoration:none;min-width:0}
.steps i{height:4px;border-radius:2px;background:var(--line)}
.steps .d i{background:var(--good)} .steps .d{color:var(--good)}
.steps .c i{background:var(--accent)} .steps .c{color:var(--accent);font-weight:600}
.decide{border-radius:14px;padding:18px;border:1px solid var(--line)}
.decide .t{font-size:24px;font-weight:700;line-height:1.2}
.decide .s{font-size:13px;color:var(--dim);margin-top:6px}
.decide.g{background:var(--good-soft);border-color:color-mix(in srgb,var(--good) 35%,transparent)} .decide.g .t{color:var(--good)}
.decide.y{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 35%,transparent)} .decide.y .t{color:var(--warn)}
.decide.r{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent)} .decide.r .t{color:var(--bad)}
.decide.n{background:var(--surface-2)}
.checks{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);align-items:center;font-size:13.5px;background:var(--surface)}
.checks li:last-child{border-bottom:0}
.checks .v{font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap}

/* 24h tape */
.tape{display:grid;grid-template-columns:64px minmax(0,1fr) 44px;gap:5px 12px;align-items:center;font-size:12px}
.tape .nid{font-family:var(--mono);font-weight:500;display:flex;align-items:center;gap:6px;white-space:nowrap}
.tape .nid i{width:4px;height:14px;border-radius:2px}
.cells{display:grid;grid-template-columns:repeat(48,1fr);gap:1.5px;height:15px}
.cells i{border-radius:2px;background:var(--neutral-soft)}
.cells i.g{background:var(--good)} .cells i.y{background:var(--warn)} .cells i.r{background:var(--bad)} .cells i.e{background:var(--event)}
.tape .pct{font-family:var(--mono);text-align:right;color:var(--dim)}
.axis24{display:grid;grid-template-columns:64px minmax(0,1fr) 44px;gap:12px;font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:6px}
.axis24 > div:nth-child(2){display:flex;justify-content:space-between}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--dim)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* todo */
.todo{list-style:none;margin:0;padding:0}
.todo li{display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line);align-items:center}
.todo li:last-child{border-bottom:0}
.todo .sev{align-self:stretch;border-radius:2px;background:var(--line-2)}
.todo .sev.y{background:var(--warn)} .todo .sev.r{background:var(--bad)} .todo .sev.e{background:var(--event)} .todo .sev.a{background:var(--accent)}
.todo .t{font-weight:500;font-size:13.5px}
.todo .d{font-size:12px;color:var(--dim)}

/* log */
.log{font-family:var(--mono);font-size:12px;line-height:1.75;max-height:220px;overflow:auto;padding:10px 16px;white-space:pre-wrap;word-break:break-word}
.log .w{color:var(--warn)} .log .e{color:var(--bad)} .log .t{color:var(--faint)}

/* charts */
.chart{position:relative;width:100%;min-width:0}
.chart canvas{display:block;width:100%;height:100%}
.chart .tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--surface);font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:5px;white-space:nowrap;display:none;z-index:2}
.chart .hint{position:absolute;right:8px;top:6px;font-size:11px;color:var(--faint);pointer-events:none}
.strip{display:grid;grid-template-columns:128px minmax(0,1fr);border-bottom:1px solid var(--line);min-height:84px}
.strip:last-child{border-bottom:0}
.strip .meta{border-right:1px solid var(--line);padding:10px 12px;display:grid;gap:4px;align-content:center;background:var(--surface-2);font-size:12px}
.strip .meta b{font-family:var(--mono);font-size:13px}
.strip .plot{position:relative;min-width:0;cursor:crosshair}
.strip.sel .meta{box-shadow:inset 3px 0 0 var(--accent)}
@media (max-width:560px){.strip{grid-template-columns:86px minmax(0,1fr)}}

/* elevation / building */
.elev svg{display:block;width:100%;height:auto}
.bldgrid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.bldgrid{grid-template-columns:minmax(0,1fr)}}
.shapes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.shapes figure{margin:0;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.shapes figcaption{font-size:12px;display:flex;justify-content:space-between;gap:6px}
.shapes svg{display:block;width:100%;height:190px}

/* matrix (channel picker) */
.matrix{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,40px);gap:0;font-size:12.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.matrix > div{padding:6px 8px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;min-width:0}
.matrix .h{font-size:11px;color:var(--faint);background:var(--surface-2);justify-content:center}
.matrix .h:first-child{justify-content:flex-start}
.matrix .c{justify-content:center}
.matrix .c input{width:16px;height:16px;accent-color:var(--accent);margin:0;cursor:pointer}
.matrix > div:nth-last-child(-n+4){border-bottom:0}

/* coverage grid */
.covgrid{display:grid;gap:3px;font-size:11px;font-family:var(--mono)}
.covgrid .c{height:24px;border-radius:4px;display:grid;place-items:center;cursor:pointer;color:transparent;background:var(--neutral-soft)}
.covgrid .c:hover{outline:2px solid var(--accent);color:var(--ink)}
.covgrid .c.full{background:var(--good)} .covgrid .c.partial{background:var(--warn)} .covgrid .c.missing{background:var(--bad)} .covgrid .c.none{background:var(--neutral-soft)}
.covgrid .h{color:var(--faint);display:grid;place-items:center;white-space:nowrap}
.covgrid .n{display:flex;align-items:center;font-weight:600;color:var(--ink)}

/* paper (report) */
.paper{background:#fff;color:#131a24;border-radius:6px;box-shadow:var(--shadow);padding:40px 44px;max-width:860px;margin:0 auto;width:100%;
  --ink:#131a24;--dim:#566376;--faint:#8894a4;--line:#dfe4ea;--surface:#fff;--surface-2:#f3f5f8}
.paper h1{font-size:24px;margin-bottom:4px}
.paper h2{font-size:16px;margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid #dfe4ea}
.paper .meta{color:#566376;font-size:13px}
.paper table{width:100%;border-collapse:collapse;font-size:12.5px}
.paper th,.paper td{border-bottom:1px solid #dfe4ea;padding:6px 8px;text-align:left}
.paper th{color:#8894a4;font-weight:500;font-size:11.5px}
@media (max-width:760px){.paper{padding:22px 18px}}
@media print{
  body{background:#fff}
  .side,.top,.tabbar,.mockribbon,.toasts,.noprint,.phead .actions{display:none!important}
  .app{display:block;height:auto}.main{overflow:visible}.page{padding:0;max-width:none}
  .paper{box-shadow:none;padding:0;max-width:none}
}

/* misc */
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;font-size:13px}
.kv dt{color:var(--dim)} .kv dd{margin:0;font-family:var(--mono);text-align:right}
.stat{display:grid;gap:2px}
.stat .l{font-size:12px;color:var(--dim)}
.stat .v{font-family:var(--mono);font-size:20px;font-weight:600;line-height:1.25}
.stat .v small{font-size:12px;color:var(--faint);font-weight:400}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.lg i{width:14px;height:2.5px;border-radius:2px;display:inline-block}
.drop{border:1px dashed var(--line-2);border-radius:10px;padding:14px;color:var(--dim);font-size:13px}
.datechips{display:flex;flex-wrap:wrap;gap:6px}
.datechips .d{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;border:1px solid var(--line-2);border-radius:999px;padding:2px 4px 2px 10px}
.datechips .d button{border:0;background:var(--surface-2);border-radius:50%;width:20px;height:20px;cursor:pointer;color:var(--dim);display:grid;place-items:center}
.nodepick{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.nodepick label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer;font-family:var(--mono);font-size:12.5px;background:var(--surface)}
.nodepick label:has(input:checked){border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:var(--accent-soft)}
.nodepick input{accent-color:var(--accent);margin:0}
.job{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:10px;padding:12px 14px;display:grid;gap:8px;background:var(--accent-soft)}
.job .row b{font-weight:600}
.setnav{position:sticky;top:12px;display:grid;gap:2px}
.setnav a{padding:7px 12px;border-radius:7px;color:var(--dim);text-decoration:none;font-size:13.5px}
.setnav a:hover{background:var(--surface-2);color:var(--ink)}
.setnav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.savebar{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-family:var(--mono);font-size:12.5px}
.crumbs button{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--accent);cursor:pointer;padding:2px 4px;border-radius:4px}
.crumbs button:hover{background:var(--accent-soft)}
.sticky-tools{position:sticky;top:0;z-index:4;background:var(--ground);padding:10px 0;margin:-10px 0}

/* ── v100 views: components added with the full view set ─────────── */
/* coverage matrix floor × setup (AVM plan) */
.cmx{display:grid;grid-template-columns:52px repeat(var(--n),minmax(22px,1fr)) 44px;gap:3px;font-family:var(--mono);font-size:11px;align-items:center;overflow-x:auto}
.cmx .h{color:var(--faint);text-align:center;font-size:10.5px;padding-bottom:2px}
.cmx .fl{font-weight:600;color:var(--dim);text-align:right;padding-right:6px}
.cmx .fl.isref{color:var(--accent)} .cmx .fl.gap{color:var(--warn)}
.cmx .fl.gap::after{content:" •";color:var(--warn)}
.cmx .c{color:var(--dim);text-align:center}
.cmx i{height:18px;border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:700;background:transparent}
.cmx i.analyzed{background:var(--good)} .cmx i.measured{background:var(--accent)} .cmx i.planned{border:1.5px dashed var(--line-2)}
.cmx i.ref{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent)}
/* live card footer */
.lfoot{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 12px 8px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--dim)}
.lfoot span{display:inline-flex;align-items:center;gap:5px}
.lfoot i{width:10px;height:3px;border-radius:2px;display:inline-block}
.lfoot .faint{margin-left:auto}
/* inline meter (fleet) */
.meter{position:relative;display:inline-flex;align-items:center;width:112px;height:20px;border-radius:5px;background:var(--surface-2);overflow:hidden;vertical-align:middle}
.meter i{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--good) 30%,transparent)}
.meter.y i{background:color-mix(in srgb,var(--warn) 38%,transparent)} .meter.r i{background:color-mix(in srgb,var(--bad) 38%,transparent)}
.meter b{position:relative;font-family:var(--mono);font-size:11.5px;font-weight:600;padding-left:7px;color:var(--ink)}
.card.bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
/* analysis channel matrix */
.chmx{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,52px);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12.5px;max-height:340px;overflow-y:auto}
.chmx > *{padding:6px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;min-width:0}
.chmx .h{position:sticky;top:0;z-index:1;background:var(--surface-2);font-size:11px;color:var(--faint);justify-content:center}
.chmx .h:first-child{justify-content:flex-start}
.chmx .c{justify-content:center;cursor:pointer}
.chmx .c input{width:17px;height:17px;accent-color:var(--accent);margin:0;cursor:pointer}
details.chsel > summary{cursor:pointer;list-style:none;display:flex;gap:10px;align-items:center;padding:4px 0}
details.chsel > summary::-webkit-details-marker{display:none}
details.chsel > summary::before{content:"";width:8px;height:8px;border-right:1.8px solid var(--dim);border-bottom:1.8px solid var(--dim);transform:rotate(-45deg);transition:transform .15s;margin:0 2px}
details.chsel[open] > summary::before{transform:rotate(45deg)}
/* settings: changed field marker */
.field.changed .in,.field.changed .sel{border-color:color-mix(in srgb,var(--warn) 60%,var(--line-2))}
/* QC history */
.tbl tr.sub td{background:var(--surface-2)}
.bad-t{color:var(--bad);font-weight:600} .warn-t{color:var(--warn);font-weight:600}
/* job states */
.job.bad{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:var(--bad-soft)}
.job.good{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:var(--good-soft)}
@media (max-width:760px){
  .rgwrap{grid-template-columns:minmax(0,1fr)!important;justify-items:center}
  .rgwrap > .stack{width:100%}
  .sidebarlayout .setnav{position:static;display:flex;overflow-x:auto;gap:4px}
  .sidebarlayout .setnav a{white-space:nowrap}
  .chmx{grid-template-columns:minmax(0,1fr) repeat(3,44px)}
}
@media print{ .tabs,.toolbar,.crumbs,.savebar{display:none!important} }
.page > div:empty{display:none}
.page > *{min-width:0}
.nchip{overflow:hidden}
.card > .hd{flex-wrap:wrap;row-gap:6px}
.toolbar > .tabs{min-width:0;max-width:100%}
.covwrap{overflow-x:auto;padding-bottom:4px}
.covwrap .covgrid{min-width:520px}
.setlayout{grid-template-columns:220px minmax(0,1fr)}
@media (max-width:1100px){.setlayout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.prov{white-space:normal;line-height:1.5;padding:2px 7px}.phead{flex-wrap:wrap}}
.stack > *,.grid2 > *,.grid3 > *,.split > *,.split-r > *,.sidebarlayout > *{min-width:0}
@media (max-width:760px){.top .crumb{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.top .crumb span{overflow:hidden;text-overflow:ellipsis}}

/* live: time axis + expanded sensor window */
.lcard canvas.axis{height:16px!important}
.lxp{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:16px}
@media (max-width:900px){.lxp{grid-template-columns:minmax(0,1fr)}}
.lxp canvas{display:block;width:100%}
.lxp .kv dd{text-align:left}

/* ── v100.4 · Node State Model + review fixes ───────────── */
/* สถานะเครื่อง 5 ค่า ใช้ token เดิม: active=--good · flaky=--warn · lost=--bad · dormant=--neutral · unknown=เทาจุด */
.dot.u{background:transparent;border:1.5px dotted var(--neutral);width:9px;height:9px}
.dot.n[data-ns="dormant"]{background:var(--neutral)}
.pill.ns-unknown{background:transparent;border:1px dotted var(--neutral);line-height:1.55}
.roletag{display:inline-flex;align-items:center;font-size:11px;border-radius:4px;padding:0 7px;line-height:1.8;border:1px solid var(--line-2);color:var(--dim);white-space:nowrap}
.roletag.station{border-color:color-mix(in srgb,var(--vel) 45%,var(--line-2))}
.roletag.off{border-style:dashed}
/* node drawer: แผงด้านขวา (มือถือ = bottom sheet เหมือน dialog อื่น) */
.dialog.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);max-height:100dvh;height:100dvh;border-radius:14px 0 0 14px;border-right:0}
.dialog.drawer > .bd{align-content:start}
.dialog.drawer .kv dd{text-align:left}
@media (max-width:760px){.dialog.drawer{position:relative;top:auto;height:auto;max-height:92dvh;width:100%;border-radius:16px 16px 0 0;border-right:1px solid var(--line)}}
/* Home band: ตัวนับ 4 สี + ทุกการ์ดกดได้ (B6) */
.nsc{display:inline-flex;align-items:center;gap:10px;font-size:19px}
.nsc span{display:inline-flex;align-items:center;gap:5px}
.nsc i{width:8px;height:8px;border-radius:50%;display:inline-block}
.nsc .g i{background:var(--good)} .nsc .y i{background:var(--warn)} .nsc .r i{background:var(--bad)} .nsc .n i{background:var(--neutral)}
.nsc .z{opacity:.38}
.band .y .v.nsc,.band .r .v.nsc{color:inherit}
.band > a,.band > .verdict[data-act]{cursor:pointer;position:relative}
.band > a::after,.band > .verdict[data-act]::after{content:"›";position:absolute;top:8px;right:10px;color:var(--faint);font-size:15px;line-height:1;opacity:.55;transition:opacity .15s,transform .15s}
.band > a:hover::after,.band > .verdict[data-act]:hover::after{opacity:1;transform:translateX(2px)}
.band > .verdict[data-act]:hover{filter:brightness(1.04)}
.verdict .ids{display:inline;border:0;background:none;padding:0;font:inherit;color:inherit;text-decoration:underline dotted;cursor:pointer}
/* Home 24 ชม.: เครื่องที่ปิดทั้งวันเป็นแถบเทาบาง */
.tape .nid.thin,.tape .pct.thin{opacity:.6;font-size:11px}
.cells.thin{height:5px;align-self:center}
.cells i.n{background:color-mix(in srgb,var(--neutral) 45%,var(--neutral-soft))}
.cells i.u{background:transparent;border:1px dotted var(--line-2)}
/* Home to-do: บรรทัดเทา "ปิดอยู่" ขยายดูได้ */
details.offline{border-top:1px solid var(--line)}
details.offline > summary{list-style:none;display:grid;grid-template-columns:4px minmax(0,1fr) auto;gap:12px;padding:10px 16px;cursor:pointer;align-items:center;font-size:12.5px;color:var(--dim)}
details.offline > summary::-webkit-details-marker{display:none}
details.offline > summary .sev{align-self:stretch;border-radius:2px;background:var(--neutral-soft)}
details.offline > summary .more{font-size:11.5px;color:var(--faint)}
details.offline[open] > summary .more{visibility:hidden}
details.offline .chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px 32px}
.nsbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:3px 10px 3px 8px;font-family:var(--mono);font-size:12px;color:var(--ink);cursor:pointer}
.nsbtn:hover{border-color:var(--line-2);background:var(--surface-2)}
.nsbtn .t{font-family:var(--font);font-size:11px;color:var(--faint)}
/* Live: กลุ่ม RS / TS แยกแถว · แถบชิปเครื่องที่ปิดอยู่ · ตัวเลข lag/peak ใหญ่ขึ้นหนึ่งระดับ (C2) */
.lvgrp{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--faint);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;margin:4px 2px -4px}
.lvgrp .c{text-transform:none;letter-spacing:0;font-family:var(--font)}
.offbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:var(--r-lg);font-size:12.5px;color:var(--dim)}
.offbar .lbl{margin-right:4px}
.lfoot{font-size:12.5px;gap:4px 14px}
.lfoot i{width:12px}
.lfoot b{color:var(--ink);font-weight:600}
.lcard .stale.wait{color:var(--dim)}
.lcard .stale.off{color:var(--neutral)}
.lcard.flash,.tbl tr.flash td{animation:whflash 1.6s ease-out 1}
@keyframes whflash{0%{box-shadow:0 0 0 3px var(--accent);background:var(--accent-soft)}100%{box-shadow:0 0 0 0 transparent}}
/* B3: ป้าย "มีผลกับทุกคน" เป็นป้ายบอกข้อมูล ไม่ใช่ปุ่ม */
.scope{cursor:default;user-select:none}
.scope.note{border:0;background:var(--warn-soft);gap:4px}
.scope.note svg{width:12px;height:12px}
/* Fleet: เหตุผลของสถานะ */
.tbl td.why{font-size:12px;color:var(--dim);min-width:220px;max-width:340px;white-space:normal}
.lcard .lh .lhid{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:3px 6px;margin:-3px -6px;border-radius:6px;font:inherit;color:inherit;cursor:pointer;flex:none}
.lcard .lh .lhid:hover{background:var(--surface-2)} .lcard .lh .lhid:hover b{text-decoration:underline dotted}

/* ── v100.5 · ใช้งานบนหลายอุปกรณ์ (มือถือ · แท็บเล็ต · จอสัมผัส) ───────── */
/* แถบข้างแบบย่อ 761–1100px (แท็บเล็ต / มือถือแนวนอน): ไอคอน + ชื่อสั้นใต้ไอคอน เพราะจอสัมผัสไม่มี tooltip */
.nav a .sh{display:none}
@media (max-width:1100px){
  .side .nav a{flex-direction:column;gap:3px;padding:8px 2px}
  .side .nav a .sh{display:block;font-size:10px;line-height:1.15;text-align:center;max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* แถบบนไม่ขึ้นบรรทัดใหม่ */
  .searchbtn .kbd,.userchip .nm,.top .crumb .sub{display:none}
  .userchip{padding:3px}
  .top .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top .crumb span{overflow:hidden;text-overflow:ellipsis}
}
@media (hover:none){.searchbtn .kbd{display:none}}
/* มือถือ: ป้ายรอบวัดเหลือจุด + เวลา ให้ชื่อหน้าไม่ถูกตัด */
@media (max-width:760px){
  .sessionpill .sw,.sessionpill .sl{display:none}
  .toolbar .grpl{min-width:0;max-width:100%;flex-wrap:wrap}
  .toolbar .seg{max-width:100%;overflow-x:auto}
}
/* จอสัมผัส: ปุ่ม/ช่องกรอกใหญ่พอแตะ · ช่องกรอก ≥ 16px กัน iPhone ซูมหน้าเองตอนแตะ */
@media (pointer:coarse){
  .btn{min-height:40px}
  .btn.sm{height:auto;min-height:38px}
  .seg button,.seg.sm button{height:40px}
  .chip{height:38px}
  .iconbtn{width:40px;height:40px}
  .lcard .lh .iconbtn{width:36px;height:36px}
  .in,.sel,textarea.in,.in.sm,.sel.sm{font-size:16px}
  .in,.sel{height:42px} .in.sm,.sel.sm{height:38px}
  input[type=time].in{min-width:150px} input[type=date].in{min-width:170px} input[type=number].in.sm{min-width:72px}   /* ตัวอักษร 16px ต้องการช่องกว้างขึ้น (min-width ชนะ width ที่ตั้งไว้ในหน้า) */
  .sessionpill{min-height:36px}
  .covgrid .c{height:34px}
  .covwrap .covgrid{min-width:calc(64px + var(--ncol,21) * 36px)}   /* ช่องตาราง .t3w กว้างพอแตะ (เลื่อนซ้าย-ขวาได้) */
  .nav a{min-height:44px}
  /* ป้ายเล็กที่กดได้: ขยายพื้นที่แตะโดยไม่เปลี่ยนหน้าตา */
  .fs[data-act],.flag[data-act],.nsbtn,a.cov,.verdict .ids,.lcard .lh .lhid{position:relative}
  .fs[data-act]::after,.flag[data-act]::after,.nsbtn::after,a.cov::after,.verdict .ids::after,.lcard .lh .lhid::after{content:"";position:absolute;inset:-9px -5px}
}
/* ภาพรวม: คำอธิบายจุดสีให้เห็นบนจอ (เดิมอยู่ใน tooltip อย่างเดียว) */
.nslegend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--dim);margin-top:-8px;padding:0 4px}
.nslegend span{display:inline-flex;align-items:center;gap:5px}
.nslegend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.nslegend i.g{background:var(--good)} .nslegend i.y{background:var(--warn)} .nslegend i.r{background:var(--bad)} .nslegend i.n{background:var(--neutral)}
/* กราฟ: ปุ่มรีเซ็ตซูม (แทนดับเบิลคลิกบนจอสัมผัส) */
.chart .zreset{position:absolute;left:58px;top:6px;z-index:2;font-size:11.5px;height:26px;padding:0 9px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer}
@media (pointer:coarse){.chart .zreset{height:36px;padding:0 12px}}
/* สัญญาณสด (มือถือ ทั้งแนวตั้งและแนวนอน): แถบตัวเลือกยุบเหลือปุ่มเดียว */
.lvtb .lvtoggle{display:none}
@media (max-width:760px),(max-height:500px){
  .lvtb .lvtoggle{display:flex;width:100%;justify-content:flex-start;gap:8px;white-space:normal;text-align:left;height:auto;min-height:40px;padding:6px 10px}
  .lvtb .lvtoggle .faint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .lvtb:not(.open) > :not(.lvtoggle){display:none!important}
}

/* ── v100.6 ── */
.roletag.disabled{border-style:dashed;background:var(--neutral-soft);color:var(--neutral)}
.nchip.dis{opacity:.6}
.nchip.dis .t{font-style:normal}
.histbtn{margin-left:4px;vertical-align:middle}
.good-t{color:var(--good);font-weight:600}
.hwbox{border-top:1px solid var(--line);padding-top:12px}
.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mini{border:1px solid var(--line);border-radius:8px;padding:6px 8px 2px;cursor:pointer;min-width:0}
.mini:hover{border-color:var(--line-2)}
.mini .row{font-size:12px;color:var(--dim);flex-wrap:nowrap}
.mini .row b{color:var(--ink);font-size:12.5px}
.cells.wk{grid-template-columns:repeat(84,1fr);gap:1px}
.cells.ntp{grid-template-columns:repeat(168,1fr);gap:.5px;height:16px}
.cells.ntp i{border-radius:1px}
.covgrid .c.k-full{background:var(--good)} .covgrid .c.k-pull{background:var(--accent)} .covgrid .c.k-unk{background:var(--warn)} .covgrid .c.k-nodata{background:var(--bad)}
.covgrid .c.k-today{background:var(--neutral-soft);box-shadow:inset 0 0 0 1.5px var(--line-2)} .covgrid .c.k-off{background:var(--neutral-soft)}
.covgrid .n.dis{opacity:.55}
.selbar{position:sticky;top:0;z-index:2}

/* ═══════════════ v101 Research: แผนที่ · แผ่นดินไหว · สถานี (ใช้ token เดิม ไม่เพิ่มธีม) ═══════════════ */
.dot.a{background:var(--accent)}
.warn-t{color:var(--warn)} .accent-t{color:var(--accent)}
.row.wrap{flex-wrap:wrap}
.card.flat{box-shadow:none}
.srcb{display:inline-flex;align-items:center;gap:4px;font:600 11px/1.6 var(--mono);border-radius:5px;padding:0 6px;border:1px solid var(--line-2);color:var(--dim);background:var(--surface-2);white-space:nowrap;cursor:default}
button.srcb{cursor:pointer;min-height:26px;padding:0 9px}
.srcb.tmd{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,var(--line))}
.srcb.usgs{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.srcb.emsc{color:var(--accel);border-color:color-mix(in srgb,var(--accel) 45%,var(--line))}
.srcb.bmkg{color:var(--event);border-color:color-mix(in srgb,var(--event) 45%,var(--line))}
.srcb.off{opacity:.45;text-decoration:line-through}
.evmag{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:999px;font:700 15px var(--mono);color:#fff;background:var(--bad)}
.evmag.sm{min-width:34px;height:22px;font-size:12px;border-radius:6px}
.evmag.d0{background:var(--bad)} .evmag.d1{background:var(--event)} .evmag.d2{background:var(--accent)}
.evmag.a0{background:var(--bad)} .evmag.a1{background:var(--event)} .evmag.a2{background:var(--warn);color:#111} .evmag.a3{background:var(--neutral)}
.evhead{display:flex;gap:12px;align-items:center}
.qtbl tr.unseen td{font-weight:500}
.qtbl tr.unseen td:nth-child(4){color:var(--ink)}
.srch{gap:6px}
.rtabs{margin:0 0 -4px}
/* ทะเบียนสถานี */
.stlayout{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.tbl tr.on td{background:var(--accent-soft)}
.epform{grid-template-columns:repeat(4,minmax(0,1fr))}
.epbar{display:grid;gap:6px}
.eprow{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px;align-items:center;font-size:12px}
.eptrack{position:relative;height:14px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.eptrack i{position:absolute;top:2px;bottom:2px;border-radius:3px;background:color-mix(in srgb,var(--accent) 75%,transparent)}
.eptrack i.open{background:var(--good)}
.epaxis{display:flex;justify-content:space-between;font-size:11px;color:var(--faint);margin-left:100px}
@media (max-width:1100px){.stlayout{grid-template-columns:minmax(0,1fr)}.epform{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.hm{display:none}}
/* แผนที่ */
.page.mapview{max-width:none;padding:0;height:100%;display:flex;flex-direction:column;gap:0}
.page.mapview > .rtabs{padding:0 12px;background:var(--surface);margin:0}
.mapwrap{position:relative;flex:1;min-height:320px;isolation:isolate;z-index:0}
.rmap{position:absolute;inset:0;background:var(--ground)}
.rmap.leaflet-container{font-family:var(--font);background:var(--surface-2)}
.mp-land{fill:var(--surface);fill-opacity:1;stroke:var(--line-2);stroke-width:1}
.mp-ring{fill:none;stroke:var(--dim);stroke-width:1.2;stroke-dasharray:5 6;opacity:.7}
.mp-ringlbl span{display:inline-block;transform:translate(-50%,-110%);font:600 11px var(--mono);color:var(--dim);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:0 5px;border-radius:4px;white-space:nowrap}
.mp-ref i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid var(--ink);border-radius:2px;transform:rotate(45deg);background:var(--surface)}
.mp-ref span{position:absolute;transform:translate(-50%,9px);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;text-shadow:0 0 3px var(--surface),0 0 3px var(--surface)}
.evm{stroke:var(--surface);stroke-width:1.2;fill-opacity:.78}
.evm.seen{fill-opacity:.45}
.evm.d0,.evm.a0{fill:var(--bad)} .evm.d1,.evm.a1{fill:var(--event)} .evm.d2{fill:var(--accent)} .evm.a2{fill:var(--warn)} .evm.a3{fill:var(--neutral)}
.evm:hover{fill-opacity:1;stroke:var(--ink)}
.stpin-wrap{background:none;border:0}
.stpin{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 5px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line-2);box-shadow:var(--shadow);font:600 11px var(--mono);color:var(--ink);white-space:nowrap;cursor:pointer}
.stpin i{width:10px;height:10px;border-radius:2px;transform:rotate(45deg);background:var(--neutral)}
.stpin.g i{background:var(--good)} .stpin.y i{background:var(--warn)} .stpin.r i{background:var(--bad)} .stpin.h i{background:var(--accent)}
.stpin.r{border-color:var(--bad)} .stpin.empty{opacity:.55;border-style:dashed} .stpin.grp{padding-right:9px}
.stpin-sw{display:inline-block;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--neutral)}
.stpin-sw.g{background:var(--good)} .stpin-sw.y{background:var(--warn)} .stpin-sw.r{background:var(--bad)}
.mp-tip{font-family:var(--font);font-size:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.mp-tip::before{display:none}
.mp-panel{position:absolute;z-index:500;top:12px;left:56px;width:318px;max-height:calc(100% - 96px);overflow:auto;display:grid;gap:10px;align-content:start;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 14px}
.mp-hd{display:flex;justify-content:space-between;align-items:flex-start}
.mp-hd b{font-size:15px}
.mp-x{display:none}
.mp-f{display:grid;gap:4px}
.mp-f > label{font-size:11.5px;color:var(--dim)}
.mp-f .chk{font-size:12.5px}
.mp-count{font-size:12px}
.mp-list{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:6px}
.mp-ev{display:flex;gap:9px;align-items:center;text-align:left;border:0;background:none;padding:6px 4px;border-radius:8px;cursor:pointer;min-width:0}
.mp-ev:hover{background:var(--surface-2)}
.mp-ev .t{display:grid;min-width:0} .mp-ev .t b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-ev .t small{font-size:11px;color:var(--dim)}
.mp-tools{position:absolute;z-index:500;top:12px;right:12px;display:flex;gap:6px}
.mp-tools > .btn:first-child{display:none}
.mp-notes{position:absolute;z-index:500;top:58px;right:12px;max-width:420px;display:grid;gap:6px;justify-items:end}
.mp-note{display:flex;gap:8px;align-items:center;font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:7px 10px;box-shadow:var(--shadow)}
.mp-note.warn{border-color:var(--warn);background:var(--warn-soft)} .mp-note svg{width:16px;height:16px;flex:none}
.mp-missing{position:absolute;z-index:500;left:56px;bottom:62px;font-size:12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:4px 9px;display:flex;gap:6px;align-items:center}
.mp-missing:empty{display:none} .mp-missing svg{width:14px;height:14px}
.mp-legend{position:absolute;z-index:500;right:12px;bottom:62px;display:grid;gap:5px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11.5px;color:var(--dim)}
.lg-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lg-m{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono)} .lg-m i{display:inline-block;border-radius:999px;border:1.5px solid var(--dim)}
.lg-c{display:inline-flex;align-items:center;gap:4px} .lg-c i{width:10px;height:10px;border-radius:999px;display:inline-block}
.lg-c i.d0,.lg-c i.a0{background:var(--bad)} .lg-c i.d1,.lg-c i.a1{background:var(--event)} .lg-c i.d2{background:var(--accent)} .lg-c i.a2{background:var(--warn)} .lg-c i.a3{background:var(--neutral)}
.mp-slider{position:absolute;z-index:500;left:12px;right:12px;bottom:12px;display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:10px;padding:6px 12px;box-shadow:var(--shadow);font-size:12.5px}
.mp-slider .lbl{color:var(--dim);white-space:nowrap} .mp-slider input{flex:1;min-width:0;accent-color:var(--accent)} .mp-slider b{white-space:nowrap}
.leaflet-control-attribution{font-size:10.5px}
.leaflet-bar a{background:var(--surface);color:var(--ink);border-color:var(--line)}
@media (max-width:760px){
  .mp-panel{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:70%;display:none;z-index:900}
  .mp-panel.open{display:grid}
  .mp-x{display:inline-grid}
  .mp-tools{left:8px;right:auto;top:8px;flex-wrap:wrap}
  .mp-tools > .btn:first-child{display:inline-flex}
  .mp-notes{left:8px;right:8px;top:52px;max-width:none;justify-items:stretch}
  .mp-legend{right:8px;bottom:58px;padding:6px 8px;font-size:10.5px}
  .mp-legend .lg-row:last-child{display:none}
  .mp-missing{left:8px;bottom:58px;max-width:45%}
  .mp-slider{left:8px;right:8px;bottom:8px;flex-wrap:wrap;gap:4px 8px}
  .mp-slider .lbl{font-size:11.5px}
  .leaflet-control-zoom{display:none}
}
fieldset.formgrid{border:0;padding:0;margin:0;min-width:0}
.page.mapview > .rtabs{flex:none}
.mp-slider input{min-height:32px;font-size:16px}
@media (pointer:coarse){ button.srcb{min-height:34px;padding:0 11px} .rmap .leaflet-bar a{width:36px;height:36px;line-height:36px} }

/* ═══════════════ v101.1 กลไกการเกิด · แผนที่มืด · SEED (ใช้ token เดิม) ═══════════════ */
.bball{display:inline-block;vertical-align:middle;border-radius:999px;flex:none}
.mechc{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.mechc.m-ss{color:var(--good)} .mechc.m-n{color:var(--accent)} .mechc.m-r{color:var(--bad)} .mechc.m-o{color:var(--accel)}
.mechbox{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.mechbox .bbwrap{display:grid;justify-items:center;gap:4px} .mechbox .bbwrap small{font-size:10.5px;max-width:110px;text-align:center}
@media (max-width:520px){ .mechbox{grid-template-columns:1fr} }
.qkv{margin-top:2px}
.evm.m-ss{fill:var(--good)} .evm.m-n{fill:var(--accent)} .evm.m-r{fill:var(--bad)} .evm.m-o{fill:var(--accel)} .evm.m-x{fill:var(--neutral);fill-opacity:.4}
.lg-c i.m-ss{background:var(--good)} .lg-c i.m-n{background:var(--accent)} .lg-c i.m-r{background:var(--bad)} .lg-c i.m-o{background:var(--accel)} .lg-c i.m-x{background:var(--neutral);opacity:.5}
.mp-tip .bball{margin-right:2px}
/* แผนที่มืด = กรองสีภาพ OSM เดิม (ไม่เพิ่มผู้ให้บริการ) · ไม่กระทบธีมทั้งเว็บ */
.rmap.dark.leaflet-container{background:#1b1f24}
.rmap.dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.7)}
.rmap.dark .mp-land{fill:#262b31;stroke:#4a525c}
.rmap.dark .mp-ring{stroke:#8a96a3}
.rmap.dark .leaflet-control-attribution{background:rgba(20,22,26,.75);color:#aab3bd} .rmap.dark .leaflet-control-attribution a{color:#9cc0ff}
[data-act="dark"][aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.mechbox{grid-template-columns:auto 1fr;align-items:center}
.mechsum{display:grid;gap:3px;font-size:13px} .mechsum .mechc b{font-size:17px}
@media (max-width:520px){ .mechbox{grid-template-columns:auto 1fr} }
.evmag.m-ss{background:var(--good)} .evmag.m-n{background:var(--accent)} .evmag.m-r{background:var(--bad)} .evmag.m-o{background:var(--accel)} .evmag.m-x{background:var(--neutral)}
/* v101.1b: ตาราง epoch กะทัดรัด · สถานีเลิกใช้ · แผนที่มือถือ */
.eptbl td,.eptbl th{padding-left:8px;padding-right:8px}
.eptbl .epnote{font-size:11.5px;color:var(--dim);white-space:normal;margin-top:2px}
.eptbl .epdev .mono.faint{word-break:break-all} .eptbl .eprng{min-width:0}
.eptbl .epact{width:1%;white-space:nowrap}
.epact .iconbtn{display:inline-grid;vertical-align:middle;width:30px;height:30px;margin-left:3px}
.epact .iconbtn svg{width:15px;height:15px}
@media (pointer:coarse){ .epact .iconbtn{width:36px;height:36px} }
.tbl tr.retired td{opacity:.6}
.mp-hint{font-size:11.5px;line-height:1.45;color:var(--dim);background:var(--surface-2);border:1px dashed var(--line-2);border-radius:6px;padding:5px 8px}
.mp-tools [data-act="legend"]{display:none}
@media (max-width:760px){
  .mp-tools [data-act="legend"]{display:grid}
  .mapwrap .mp-legend{display:none}
  .mapwrap.lg-open .mp-legend{display:grid;bottom:96px}
  .mapwrap .mp-missing{bottom:58px;left:8px;right:auto;max-width:calc(100% - 16px)}
  .mapwrap .mp-slider .lbl{display:none}
}
@media (max-width:760px){ .mp-tools .btn .t{display:none} .mp-tools{flex-wrap:nowrap} }