/* =========================================================
   S.O.R.A. — Design tokens
   ========================================================= */
:root{
  --ink-0:#14161B; --ink-1:#1B1E25; --ink-2:#242832; --ink-3:#30353F;
  --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.13);
  --text:#ECEEF2; --text-2:#A6ADB9; --text-3:#727987;
  --silver-1:#F5F7FA; --silver-2:#9BA3AF;
  --live:#3DDC97; --beta:#6AA8FF; --planned:#F5B94A; --dummy:#5D6371;
  --r-xl:1.75rem; --r-lg:1.35rem; --r-md:.9rem; --r-sm:.6rem;
  /* ฟอนต์อังกฤษตัวเดียวทั้งระบบ: Sora | ภาษาไทย: IBM Plex Sans Thai */
  --font-display:'Sora','IBM Plex Sans Thai',system-ui,sans-serif;
  --font-logo:'Michroma','Sora',system-ui,sans-serif;   /* ฟอนต์โลโก้ S.O.R.A. (ตัวกว้างแบบหน้า login เดิม) */
  --font-body:'Sora','IBM Plex Sans Thai','Noto Sans Thai',system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --glass-bg:rgba(30,33,41,.56); --glass-blur:22px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --accent:#8FA3BF; --accent-soft:rgba(143,163,191,.16); --accent-ink:#8FA3BF;

  /* semantic (dark) */
  --bg-img:radial-gradient(70rem 40rem at 18% 8%, rgba(126,146,178,.10), transparent 60%),
    radial-gradient(60rem 40rem at 92% 100%, rgba(96,116,156,.08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.017) 0 1px, transparent 1px 4px),
    linear-gradient(180deg,#1A1D23,#121418);
  --focus:#C3D4FF;
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 12px 32px rgba(0,0,0,.38);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --emblem-bg:linear-gradient(160deg,#3B404A,#22262E); --emblem-fg:#F5F7FA;
  --emblem-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 28px rgba(0,0,0,.45);
  --wm-1:#F5F7FA; --wm-2:#9BA3AF;
  --primary-bg:linear-gradient(180deg,#F4F6F9,#C9CFD8); --primary-hover:linear-gradient(180deg,#fff,#D5DAE2);
  --primary-fg:#14161B; --primary-shadow:inset 0 1px 0 #fff;
  --track:var(--ink-1); --thumb:var(--ink-3); --thumb-fg:#fff; --thumb-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  --field:var(--ink-1);
  --app-1:#262A33; --app-2:#1D2027; --app-h1:#2B303A; --app-h2:#21252D;
  --media-1:#272B34; --media-2:#1A1D23; --mock-bg:#16191F;
  --trace:rgba(255,255,255,.11); --trace-off:rgba(255,255,255,.09);
  --toolbar-bg:rgba(22,24,30,.94); --statusbar-fade:rgba(16,18,22,.96);
  --tab-on:rgba(255,255,255,.13); --fill:rgba(255,255,255,.08);
  --grabber:rgba(255,255,255,.28); --backdrop:rgba(0,0,0,.45); --close-bg:rgba(0,0,0,.35);

  /* control board */
  --grid-dot:rgba(150,200,255,.075); --grid-line:rgba(150,200,255,.035);
  --deco:rgba(150,200,255,.045); --pin:rgba(190,205,225,.28);
  --chip-body:#1A1E25; --chip-edge:rgba(255,255,255,.10); --core-ring:rgba(180,220,255,.35);
  --core-glow:rgba(120,200,255,.55);
  --halo-op:.2; --pkt-core:#FFFFFF;
  --tile-1:#2B303A; --tile-2:#15181E; --tile-shadow:0 10px 22px rgba(0,0,0,.45);
  --side:#0B0D11; --core-fill:#171A20; --sweep:rgba(150,210,255,.07);
  --plate:linear-gradient(170deg,#1C2027,#13161B 70%); --plate-edge:rgba(255,255,255,.08);
  --plate-side:#090B0E; --plate-shadow:rgba(0,0,0,.6);
  /* ฝาชิป S.O.R.A. */
  --spark:#3D8BFF;
  --pin-on:#6FC0FF; --spill:rgba(61,139,255,.16); --spec:rgba(255,255,255,.16); --dept-edge:rgba(120,190,255,.7);
  --rim:#7CC8FF; --rim-soft:rgba(110,190,255,.42); --rim-inner:rgba(110,190,255,.10);
  --aura-1:rgba(40,140,255,.85); --aura-2:rgba(110,210,255,.7); --aura-op:.7;
  --lid-bg:repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    linear-gradient(150deg,#454B57 0%,#2A2E36 38%,#1D2026 70%,#24282F 100%);
  --lid-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -.15rem .5rem rgba(0,0,0,.55),
    0 .32rem 0 #0D0F13, 0 .55rem 0 #07080A, 0 1.4rem 2rem rgba(0,0,0,.6);
  --wm-face:linear-gradient(180deg,#FFFFFF 0%,#EEF2F7 42%,#A7B0BD 54%,#DDE3EA 100%);
  --wm-side:#4C535E;
  --wm-ext:0 1px 0 #7C8592, 0 2px 0 #68717E, 0 3px 0 #555D69, 0 4px 0 #434A55, 0 5px 0 #333941, 0 6px 0 #262B32,
    0 9px 14px rgba(0,0,0,.7);
  --wm-glow:rgba(130,200,255,.35);
  --engrave:0 1px 0 rgba(255,255,255,.09), 0 -1px 0 rgba(0,0,0,.65);
  --seg-off:rgba(255,255,255,.08);
  --wm-hi:rgba(255,255,255,.28); --wm-sh:rgba(0,0,0,.75); --wm-rule:rgba(140,190,255,.7);
  --sp-bg1:#1A1D23; --sp-bg2:#0D0F13; --sp-glow:rgba(61,139,255,.16); --sp-chip:rgba(255,255,255,.04);
  /* แผงแผนก / ช่องคอร์ / ร่องเส้น */
  --zone:linear-gradient(180deg,#20242C,#1A1D23); --zone-fill:#1D2128; --zone-drop:rgba(0,0,0,.45);
  --bv-hi:rgba(255,255,255,.10); --bv-lo:rgba(0,0,0,.55);
  --bay:#111318; --bay-shade:rgba(0,0,0,.55); --bv-dark:rgba(0,0,0,.75); --bv-light:rgba(255,255,255,.08);
  --groove:#0B0D10; --groove-lip:rgba(255,255,255,.07);
  --sheath-op:.16; --bloom-op:.10; --glow-op:.42; --hot:#FFFFFF; --tube-off:rgba(150,180,220,.13); --pad-fill:#0E1B2E;
}

/* ---------- ธีมสว่าง (สบายตาแบบ iOS) ---------- */
html[data-theme="light"]{
  color-scheme:light;
  --ink-0:#F2F2F7; --ink-1:#FFFFFF; --ink-2:#F4F4F7; --ink-3:#E5E5EA;
  --hair:rgba(0,0,0,.07); --hair-2:rgba(0,0,0,.12);
  --text:#1C1C1E; --text-2:#48484D; --text-3:#6E6E73;
  --live:#2DB36A; --beta:#2F7CF6; --planned:#E39B12; --dummy:#AEAEB2;
  --glass-bg:rgba(255,255,255,.64); --glass-blur:22px;
  --bg-img:radial-gradient(70rem 40rem at 15% 5%, rgba(120,150,210,.10), transparent 60%),
    radial-gradient(60rem 40rem at 95% 100%, rgba(150,130,210,.07), transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.016) 0 1px, transparent 1px 4px),
    linear-gradient(180deg,#F6F6FA,#ECECF1);
  --focus:#007AFF;
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 12px 32px rgba(30,30,60,.12);
  --card-shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 16px rgba(20,20,50,.05);
  --emblem-bg:linear-gradient(160deg,#FFFFFF,#E8E8ED); --emblem-fg:#2C2C2E;
  --emblem-shadow:inset 0 1px 0 #fff, 0 12px 26px rgba(20,20,50,.12);
  --wm-1:#2C2C2E; --wm-2:#8E8E93;
  --primary-bg:#1C1C1E; --primary-hover:#000; --primary-fg:#FFFFFF; --primary-shadow:none;
  --track:rgba(118,118,128,.13); --thumb:#FFFFFF; --thumb-fg:#1C1C1E;
  --thumb-shadow:0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
  --field:rgba(118,118,128,.12);
  --app-1:#FFFFFF; --app-2:#FBFBFD; --app-h1:#FFFFFF; --app-h2:#F6F6F9;
  --media-1:#F5F5F9; --media-2:#E8E8EE; --mock-bg:#FFFFFF;
  --trace:rgba(0,0,0,.12); --trace-off:rgba(0,0,0,.14);
  --toolbar-bg:rgba(249,249,251,.92); --statusbar-fade:rgba(240,240,245,.96);
  --tab-on:rgba(0,0,0,.07); --fill:rgba(118,118,128,.12);
  --grabber:rgba(0,0,0,.18); --backdrop:rgba(0,0,0,.22); --close-bg:rgba(255,255,255,.75);
  --grid-dot:rgba(30,40,90,.09); --grid-line:rgba(30,40,90,.035);
  --deco:rgba(30,40,90,.04); --pin:rgba(60,60,70,.28);
  --chip-body:#FFFFFF; --chip-edge:rgba(0,0,0,.10); --core-ring:rgba(60,80,140,.35);
  --core-glow:rgba(0,122,255,.30);
  --halo-op:.16; --pkt-core:#FFFFFF;
  --tile-1:#FFFFFF; --tile-2:#EEEEF3; --tile-shadow:0 8px 18px rgba(20,20,50,.12);
  --side:#C9CBD3; --core-fill:#FFFFFF; --sweep:rgba(255,255,255,.55);
  --plate:linear-gradient(170deg,#FBFBFD,#EEEEF3 70%); --plate-edge:rgba(0,0,0,.08);
  --plate-side:#CDD0D8; --plate-shadow:rgba(30,30,70,.18);
  --spark:#0A6CFF;
  --pin-on:#0A6CFF; --spill:rgba(10,108,255,.08); --spec:rgba(255,255,255,.95); --dept-edge:rgba(10,108,255,.55);
  --rim:#007AFF; --rim-soft:rgba(0,122,255,.35); --rim-inner:rgba(0,122,255,.06);
  --aura-1:rgba(0,122,255,.55); --aura-2:rgba(90,200,250,.5); --aura-op:.55;
  --lid-bg:repeating-linear-gradient(90deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    linear-gradient(150deg,#FFFFFF 0%,#EEF0F4 40%,#DCDFE6 72%,#E9EBF0 100%);
  --lid-shadow:inset 0 1px 0 #fff, inset 0 -.15rem .5rem rgba(0,0,0,.08),
    0 .32rem 0 #C3C6CE, 0 .55rem 0 #B1B5BF, 0 1.4rem 2rem rgba(30,30,70,.2);
  --wm-face:linear-gradient(180deg,#4A505B 0%,#2A2E35 48%,#121418 56%,#3A3F48 100%);
  --wm-side:#B9BEC8;
  --wm-ext:0 1px 0 #D9DCE2, 0 2px 0 #CDD1D8, 0 3px 0 #C1C5CD, 0 4px 0 #B4B9C2, 0 5px 0 #A8ADB7, 0 6px 0 #9DA2AC,
    0 9px 14px rgba(30,30,70,.25);
  --wm-glow:rgba(0,122,255,.18);
  --engrave:0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.12);
  --seg-off:rgba(0,0,0,.08);
  --wm-hi:rgba(255,255,255,.95); --wm-sh:rgba(30,30,60,.28); --wm-rule:rgba(0,110,255,.55);
  --sp-bg1:#F7F8FB; --sp-bg2:#E6EAF1; --sp-glow:rgba(0,122,255,.12); --sp-chip:rgba(255,255,255,.7);
  --zone-fill:#FFFFFF; --zone-drop:rgba(30,30,70,.10);
  --bv-hi:rgba(255,255,255,1); --bv-lo:rgba(0,0,0,.10);
  --bay:#EEEFF3; --bay-shade:rgba(30,30,70,.10); --bv-dark:rgba(0,0,0,.14); --bv-light:rgba(255,255,255,1);
  --groove:#E1E3E9; --groove-lip:rgba(255,255,255,1);
  --sheath-op:.2; --bloom-op:.12; --glow-op:.38; --hot:#FFFFFF; --tube-off:rgba(30,60,120,.1); --pad-fill:#FFFFFF;
}
html[data-theme="light"][data-glass="clear"]{--glass-bg:rgba(255,255,255,.36)}
html[data-theme="light"][data-glass="tinted"]{--glass-bg:rgba(250,250,252,.95)}
html[data-glass="clear"]{--glass-bg:rgba(38,42,52,.24); --glass-blur:12px}
html[data-glass="tinted"]{--glass-bg:rgba(24,27,34,.92); --glass-blur:30px}
@media (prefers-reduced-transparency: reduce){
  html[data-glass]{--glass-bg:rgba(24,27,34,.97)}
  html[data-theme="light"][data-glass]{--glass-bg:rgba(252,252,254,.98)}
}

*{box-sizing:border-box}
html{font-size:16px; background:var(--ink-0); color-scheme:dark; -webkit-text-size-adjust:100%}
body{margin:0; min-height:100vh; font-family:var(--font-body); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; -webkit-tap-highlight-color:transparent}
button{font:inherit; color:inherit}
[hidden]{display:none!important}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none; display:none}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px}

.bg{position:fixed; inset:0; z-index:-1; background:
  radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0/22px 22px,
  linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/110px 110px,
  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/110px 110px,
  var(--bg-img)}

.i{width:1.25em; height:1.25em; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none}

.glass{background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  border:1px solid var(--hair-2);
  box-shadow:var(--glass-shadow)}

/* ---------- Brand ---------- */
.emblem{display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:1.4rem;
  background:var(--emblem-bg); border:1px solid var(--hair-2); color:var(--emblem-fg);
  box-shadow:var(--emblem-shadow)}
.emblem .i{width:44%; height:44%; stroke-width:1.5}
.emblem-sm{width:2.4rem; height:2.4rem; border-radius:.75rem}
.wordmark{font-family:var(--font-display); letter-spacing:.06em; line-height:1.1; white-space:nowrap;
  background:linear-gradient(180deg,var(--wm-1) 20%,var(--wm-2)); -webkit-background-clip:text;
  background-clip:text; color:transparent}

/* ---------- Controls ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:2.6rem;
  padding:0 1.1rem; border-radius:999px; border:1px solid var(--hair-2); background:var(--ink-2);
  cursor:pointer; font-size:.9rem; font-weight:500; white-space:nowrap}
.btn:hover{background:var(--ink-3)}
.btn[aria-pressed="true"]{background:var(--primary-bg); color:var(--primary-fg); border-color:transparent}
.btn.primary{width:100%; min-height:2.9rem; border:0; color:var(--primary-fg);
  background:var(--primary-bg); box-shadow:var(--primary-shadow)}
.btn.primary:hover{background:var(--primary-hover)}
.btn.primary:disabled{background:var(--ink-3); color:var(--text-3); box-shadow:none; cursor:not-allowed}
.icon-btn{display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid var(--hair-2); background:var(--ink-2); cursor:pointer; color:var(--text-2)}
.icon-btn:hover{color:var(--text)}

.seg{display:flex; padding:.22rem; gap:.1rem; border-radius:999px; background:var(--track); border:1px solid var(--hair)}
.seg button{border:0; background:none; min-height:2.15rem; padding:0 1rem; border-radius:999px;
  font-size:.85rem; color:var(--text-2); cursor:pointer; white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--thumb); color:var(--thumb-fg); box-shadow:var(--thumb-shadow)}
.seg-icon button{display:grid; place-items:center; padding:0 .6rem}
.seg-icon .i{width:1rem; height:1rem}
.seg-sm button{min-height:1.9rem; padding:0 .75rem; font-size:.78rem}

.led{display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--dummy); flex:none}
.led.live{background:var(--live); box-shadow:0 0 .5rem var(--live)}
.led.beta{background:var(--beta); box-shadow:0 0 .5rem var(--beta)}
.led.planned{background:var(--planned)}

/* ---------- Route map ---------- */
.map{position:relative}
.traces{position:absolute; left:0; top:0; z-index:0; pointer-events:none; overflow:hidden}
.traces path,.traces circle{vector-effect:non-scaling-stroke}
.deco{fill:none; stroke:var(--deco); stroke-width:1}
.deco-via{fill:none; stroke:var(--deco); stroke-width:1}
.trace{fill:none; stroke:var(--trace); stroke-width:1.2; stroke-linejoin:round}
.trace.off{stroke:var(--trace-off); stroke-width:1.4}
.pk{position:absolute; left:0; top:0; z-index:0; pointer-events:none}
.halo{fill:none; stroke-width:1.1rem; stroke-linecap:round; stroke-linejoin:round; opacity:var(--glow-op)}
.rail{fill:none; stroke-width:1.2; stroke-linecap:round; opacity:.75}
.wire{fill:none; stroke-width:.28rem; stroke-linecap:round; stroke-linejoin:round}
.hot{fill:none; stroke:var(--hot); stroke-width:.07rem; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
.pad{stroke-width:1.8; fill:var(--pad-fill)}
.pad-glow{opacity:.22}

/* ---------- แผงข้อมูลสด ---------- */
.stats{display:none}
.st-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.st-title{font-size:.95rem; font-weight:700; color:var(--text)}
.st-live{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:600; color:var(--text-2)}
.st-kpis{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.kpi{display:flex; flex-direction:column; gap:.1rem; padding:.7rem .8rem; border-radius:1rem; background:var(--bay); box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.kpi b{font-family:var(--font-display); font-weight:800; font-size:1.9rem; line-height:1.1; color:var(--text); font-variant-numeric:tabular-nums}
.kpi span{font-size:.72rem; font-weight:600; color:var(--text-2)}
.st-spark{margin:.8rem 0 .2rem}
.spark{display:block; width:100%; height:3.2rem; overflow:visible}
.spark-area{fill:url(#sparkFill)}
.spark-line{fill:none; stroke:var(--spark); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke}
.spark-dot{fill:var(--spark); filter:drop-shadow(0 0 4px var(--spark))}
.st-axis{display:flex; justify-content:space-between; margin-top:.25rem; font-size:.66rem; font-weight:500; color:var(--text-3)}
.st-sec{margin:.75rem 0 .45rem; font-size:.76rem; font-weight:700; color:var(--text-2)}
.st-top{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.st-top li{display:grid; grid-template-columns:1.9rem minmax(0,1fr) 4.5rem 1.8rem; align-items:center; gap:.55rem}
.st-top .mini{display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:.6rem; background:var(--accent-soft); color:var(--accent-ink)}
.st-top .mini .i{width:1rem; height:1rem}
.st-top .nm{font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.st-top .bar{height:.38rem; border-radius:9px; background:var(--fill); overflow:hidden}
.st-top .bar i{display:block; height:100%; border-radius:inherit; background:var(--accent); transform-origin:left; box-shadow:0 0 .5rem var(--accent-glow)}
.st-top b{font-family:var(--font-display); font-weight:700; font-size:.82rem; text-align:right; font-variant-numeric:tabular-nums}
.st-last{display:flex; align-items:baseline; gap:.45rem; margin-top:.8rem; padding-top:.7rem; border-top:1px solid var(--hair); font-size:.76rem; color:var(--text-2)}
.st-last b{color:var(--text); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.st-last time{margin-left:auto; white-space:nowrap}
.st-empty{margin:.2rem 0 0; font-size:.78rem; color:var(--text-3)}

/* ---------- Live Activity (เปิดแอป) ---------- */
.is-act,.toast{--act-dur:1.5s}
.act-tile{grid-area:tile; display:grid; place-items:center; width:2.7rem; height:2.7rem; border-radius:.85rem;
  background:linear-gradient(160deg,var(--tile-1),var(--tile-2)); border:1px solid var(--accent-line); color:var(--accent-ink);
  box-shadow:0 0 1rem var(--accent-glow)}
.act-tile .i{width:1.35rem; height:1.35rem}
.act-txt{grid-area:txt; display:flex; flex-direction:column; min-width:0}
.act-txt b{font-size:.92rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.act-sub{font-size:.72rem; font-weight:500; opacity:.7}
.act-state{grid-area:state; position:relative; width:1.4rem; height:1.4rem}
.act-spin{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(127,127,127,.3); border-top-color:var(--accent); animation:actspin .8s linear infinite}
.act-state .i{position:absolute; inset:0; width:100%; height:100%; color:var(--live); opacity:0; transform:scale(.5); transition:opacity .25s, transform .35s var(--ease-spring)}
.done .act-spin{opacity:0}
.done .act-state .i{opacity:1; transform:none}
@keyframes actspin{to{transform:rotate(360deg)}}
.act-bar{grid-area:bar; height:3px; border-radius:3px; background:rgba(127,127,127,.25); overflow:hidden}
.act-bar i{display:block; height:100%; width:100%; border-radius:inherit; background:var(--accent); transform-origin:left;
  box-shadow:0 0 .5rem var(--accent); animation:actbar var(--act-dur) cubic-bezier(.3,.7,.3,1) both}
@keyframes actbar{from{transform:scaleX(0)} to{transform:none}}
.is-act,.toast{display:none; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"tile txt state" "bar bar bar";
  align-items:center; column-gap:.75rem; row-gap:.55rem}

/* ไฮไลต์เส้นทางเมื่อชี้ที่แอป */
.traces [data-e]{transition:opacity .35s var(--ease-out)}
.traces.routing [data-e]:not(.on-route){opacity:.14}
.traces.routing .sheath:not(.on-route),.traces.routing .halo:not(.on-route),.traces.routing .pad-glow:not(.on-route){opacity:.03}
.traces.routing .halo.on-route{opacity:calc(var(--glow-op) * 1.8)}
.traces.routing .sheath.on-route{opacity:calc(var(--sheath-op) * 1.8)}
.traces.routing .wire.on-route{stroke-width:.3rem}
.map.routing .app:not(.is-active){opacity:.5}
.map.routing .corebox .line{transition:opacity .35s}

/* กดแล้วยุบเล็กน้อย */
.app:active .app-tile{transform:scale(.95)!important; transition-duration:.08s}

/* สลับธีม: วงกลมขยายออกจากจุดที่กด */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-reveal .75s cubic-bezier(.65,0,.35,1)}
@keyframes vt-reveal{from{clip-path:circle(0 at var(--vt-x,90%) var(--vt-y,4%))} to{clip-path:circle(160% at var(--vt-x,90%) var(--vt-y,4%))}}
.zone-drop{fill:var(--zone-drop)}
.zone{fill:var(--zone-fill); stroke:url(#bvOut); stroke-width:1.2}
.zone-title{font-family:var(--font-body); font-size:.78rem; font-weight:500; fill:var(--text-2)}
.zone-title .zt-code{font-family:var(--font-display); font-size:.74rem; letter-spacing:.08em; fill:var(--text)}
.zone-rule{stroke:var(--hair); stroke-width:1}
.bay{fill:var(--bay); stroke:url(#bvIn); stroke-width:1.4}
.bay-shade{fill:url(#bayShade)}
.bay-ring{fill:none; stroke-width:1}
.sheath{fill:none; stroke-width:1.15rem; stroke-linecap:round; stroke-linejoin:round; opacity:var(--sheath-op)}
.sheath-off{fill:none; stroke:var(--tube-off); stroke-width:.34rem; stroke-linecap:round; stroke-linejoin:round}
.silk{font-family:var(--font-display); font-size:.5rem; letter-spacing:.14em}
.wire-ret{opacity:.8}
.halo-trunk{opacity:calc(var(--halo-op) * .6)}
.pad.on{stroke-width:0}

.node{position:relative; z-index:1; transition:opacity .4s var(--ease-out)}

.root{display:flex; flex-direction:column; align-items:center; text-align:center}
.core{position:relative; width:17rem; height:11.33rem; transform-style:preserve-3d}
.core > svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 .4rem 0 var(--side)) drop-shadow(0 1.2rem 1.4rem var(--plate-shadow))}
.chip-body{fill:var(--chip-body); stroke:var(--chip-edge); vector-effect:non-scaling-stroke}
.chip-pin{fill:var(--pin)}
.chip-pin.pin-on{fill:var(--pin-on); filter:drop-shadow(0 0 2px var(--pin-on))}
.chip-die{fill:none; stroke:var(--core-ring); stroke-width:1; opacity:.55; vector-effect:non-scaling-stroke}
.core-halo{position:absolute; inset:6% 4%; border-radius:50%; opacity:.3; pointer-events:none;
  background:radial-gradient(closest-side, var(--core-glow), transparent)}

/* ฝาโลหะของชิป: ขอบแสงหมุน + แสงสะท้อนกวาด */
@property --rim-a{syntax:'<angle>'; inherits:false; initial-value:0deg}
.lid{position:absolute; inset:19% 15%; border-radius:1rem; transform-style:preserve-3d;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem;
  background:var(--lid-bg); box-shadow:var(--lid-shadow)}
/* ชิปกดได้: ชี้แล้วขอบฝาสว่างขึ้น (ชิปไม่ขยับ) */
.core{cursor:pointer; -webkit-tap-highlight-color:transparent; outline:none}
.core:focus-visible .lid{outline:2px solid var(--focus); outline-offset:4px}
.core .lid::before{transition:box-shadow .35s ease, border-color .35s ease}
@media (hover:hover){ .core:hover .lid::before{border-color:var(--wm-rule); box-shadow:0 0 1.6rem var(--wm-rule), inset 0 0 1.1rem var(--rim-inner)} }
.boot-wave{position:absolute; inset:19% 15%; border-radius:1rem; pointer-events:none; z-index:3; will-change:transform, opacity;
  border:2px solid var(--wm-rule); box-shadow:0 0 1.4rem var(--wm-rule), inset 0 0 1rem var(--wm-rule)}
html.booting, html.booting body, html.splashing, html.splashing body{overflow:hidden}
html.booting .map{will-change:transform}
/* โหมดลื่น (เปิดเองเมื่อเครื่องวาดไม่ทัน): ปิดเบลอกระจกหลังแถบเมนู, ปิดแสงฟุ้งแบบเบลอของเส้น */
html.lite .toolbar, html.lite .glass{-webkit-backdrop-filter:none; backdrop-filter:none}
html.lite .glass{background:var(--sp-bg1)}
html.lite .ly-glow{filter:none; opacity:.35}

/* ---------- Splash: หน้าเริ่มระบบ 1–100% ---------- */
.splash{position:fixed; inset:0; z-index:100; overflow:hidden; text-align:center; cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:opacity .75s cubic-bezier(.4,0,.2,1), visibility 0s .75s;
  animation:spFailsafe .5s 16s forwards}
.splash::before{content:""; position:absolute; inset:0; transition:opacity .5s ease;
  background:radial-gradient(60rem 40rem at 50% 45%, var(--sp-glow), transparent 70%), radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0/22px 22px, linear-gradient(180deg,var(--sp-bg1),var(--sp-bg2))}
@keyframes spFailsafe{to{opacity:0; visibility:hidden; pointer-events:none}}
.splash.out{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease, visibility 0s .24s}
/* ชิปหน้าโหลด = ชิปตัวเดียวกับกลางหน้าหลัก (ขาติดไฟไล่รอบ + ขอบฝาเรืองแสงตามเปอร์เซ็นต์) */
.sp-stage{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transform-origin:50% 50%}
/* ระหว่างโหลด ซ่อนหน้าหลักที่อยู่ข้างใต้ (ไม่ต้องวาด/เล่นอนิเมชันที่มองไม่เห็น) */
html.sp-cover body > :not(.splash):not(script){visibility:hidden}
.sp-chip{cursor:inherit}
.sp-chip .aura{opacity:.3; transition:opacity .4s linear}
.sp-chip .lid{transform:none}
.lid > .sp-rim{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2; will-change:transform}
.sp-rim path{fill:none; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:0 100; filter:drop-shadow(0 0 3px #3D8BFF) drop-shadow(0 0 7px rgba(61,139,255,.7))}
.sp-chip .meter-bar i.ld{background:#3D8BFF; box-shadow:0 0 .35rem #3D8BFF}
.sp-chip .meter b{min-width:3.2em; text-align:right; font-variant-numeric:tabular-nums}
.splash.ready .sp-chip .lid::before{border-color:var(--wm-rule); box-shadow:0 0 2.2rem var(--wm-rule), inset 0 0 1.1rem var(--rim-inner)}
.sp-info{position:absolute; left:0; right:0; top:var(--sp-info-top,70%); display:flex; flex-direction:column; align-items:center; gap:.85rem; padding:0 1.25rem;
  transition:opacity .35s ease, transform .45s cubic-bezier(.4,0,.2,1)}
.splash.leaving .sp-info, .splash.leaving .sp-skip{opacity:0; transform:translateY(.8rem)}
.splash.leaving::before{opacity:0}
.sp-pct{display:flex; align-items:baseline; gap:.2em; font-family:var(--font-logo); font-weight:400; color:var(--text); line-height:1.1}
.sp-pct b{font-weight:400; font-size:3rem; font-variant-numeric:tabular-nums; letter-spacing:.04em;
  background:var(--wm-face); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 .1rem .08rem var(--wm-sh)) drop-shadow(0 0 .7rem var(--wm-glow))}
.sp-pct span{font-size:1.15rem; color:var(--text-2)}
.sp-chip .meter b{font-family:var(--font-logo); font-weight:400; letter-spacing:.04em}
.sp-status{min-height:1.5em; font-size:1rem; font-weight:600; color:var(--text); transition:opacity .25s}
.sp-steps{display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; max-width:40rem}
.sp-step{display:inline-flex; align-items:center; gap:.45rem; padding:.38rem .8rem; border-radius:999px; font-size:.78rem; font-weight:600; color:var(--text-3);
  background:var(--sp-chip); border:1px solid var(--hair); transition:color .3s, border-color .3s, background .3s}
.sp-step i{width:.45rem; height:.45rem; border-radius:50%; background:var(--seg-off); flex:none; transition:background .3s, box-shadow .3s}
.sp-step.on{color:var(--text); border-color:var(--wm-rule)}
.sp-step.on i{background:#3D8BFF; box-shadow:0 0 .5rem #3D8BFF; animation:blink .8s ease-in-out infinite}
.sp-step.done{color:var(--text-2)}
.sp-step.done i{background:var(--live); box-shadow:0 0 .45rem var(--live)}
.sp-skip{position:absolute; left:0; right:0; bottom:calc(var(--safe-b) + 1.4rem); font-size:.74rem; color:var(--text-3)}
@media (max-width:1023.98px){
  .sp-pct b{font-size:2.3rem}
  .sp-chip .wordmark{font-size:2.45rem}
  .sp-pct span{font-size:.95rem}
  .sp-status{font-size:.92rem}
  .sp-step{font-size:.72rem; padding:.32rem .7rem}
  .sp-k-tv{display:none}
}
@media (min-width:1024px){ .sp-steps{margin-top:.3rem} .sp-k-m{display:none} }

.lid > .lid-flash{position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; opacity:0; will-change:opacity;
  background:radial-gradient(ellipse 70% 80% at 50% 45%, rgba(170,215,255,.85), rgba(61,139,255,.25) 55%, transparent 80%)}
.lid::before{content:""; position:absolute; inset:-1px; border-radius:calc(1rem + 1px); pointer-events:none;
  border:1px solid var(--rim-soft); box-shadow:0 0 1.1rem var(--rim-soft), inset 0 0 .9rem var(--rim-inner)}

/* ออร่าสีฟ้าฟุ้ง ๆ หมุนวนรอบชิป */
.aura{position:absolute; left:50%; top:50%; width:132%; aspect-ratio:1; transform:translate(-50%,-50%);
  pointer-events:none; border-radius:50%}
.aura i{position:absolute; inset:0; will-change:transform}
/* แสงฟุ้งหลังชิป: ก้อนแสงไล่สีนุ่ม (ไม่ใช้ filter blur) → การ์ดจอหมุนได้ลื่น ไม่ต้องเบลอใหม่ทุกเฟรม
   ทุกก้อนอยู่ในกรอบ ไม่โดนตัดขอบ */
.aura i:nth-child(1){opacity:var(--aura-op);
  background:radial-gradient(28% 28% at 68% 34%, var(--aura-1), color-mix(in srgb, var(--aura-1) 38%, transparent) 45%, transparent),
    radial-gradient(30% 30% at 34% 68%, var(--aura-2), color-mix(in srgb, var(--aura-2) 38%, transparent) 45%, transparent),
    radial-gradient(22% 22% at 40% 24%, var(--aura-1), color-mix(in srgb, var(--aura-1) 38%, transparent) 45%, transparent);
  animation:auraspin 16s linear infinite}
.aura i:nth-child(2){inset:14%; opacity:calc(var(--aura-op) * .8);
  background:radial-gradient(28% 28% at 70% 60%, var(--aura-2), color-mix(in srgb, var(--aura-2) 38%, transparent) 45%, transparent),
    radial-gradient(26% 26% at 28% 42%, var(--aura-1), color-mix(in srgb, var(--aura-1) 38%, transparent) 45%, transparent);
  animation:auraspin 24s linear infinite reverse}
@keyframes auraspin{to{transform:rotate(360deg)}}
.lid::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 38%, transparent 55%)}
.lid > *{position:relative; z-index:1}
.lid-mark{font-family:var(--font-logo); font-weight:400; font-size:.5rem; letter-spacing:.42em; padding-left:.42em; color:var(--text-3); text-shadow:var(--engrave)}

/* โลโก้ S.O.R.A.: ฟอนต์ Michroma ผิวโครเมียมขัดเงา + เงานูนบาง ๆ (ไม่ขยับ) */
.core .wordmark{position:relative; margin:.2rem 0 0; padding-left:.08em; font-family:var(--font-logo); font-size:1.9rem; font-weight:400; letter-spacing:.08em; line-height:1.2; white-space:nowrap;
  background:var(--wm-face); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 -1px 0 var(--wm-hi)) drop-shadow(0 .14rem .12rem var(--wm-sh)) drop-shadow(0 0 .8rem var(--wm-glow))}
.wm-rule{display:block; width:3.2rem; height:1px; margin:.05rem 0 .1rem; border-radius:1px;
  background:linear-gradient(90deg, transparent, var(--wm-rule), transparent); box-shadow:0 0 .5rem var(--wm-rule)}
.core-sub{font-family:var(--font-logo); font-weight:400; font-size:.5rem; letter-spacing:.24em; padding-left:.24em; text-transform:uppercase;
  color:var(--text-2); max-width:92%; line-height:1.75; text-wrap:balance; text-shadow:var(--engrave)}

/* มิเตอร์โหลดคอร์: แอปที่ใช้งาน / ทั้งหมด */
.meter{display:flex; align-items:center; gap:.45rem; margin-top:.2rem}
.meter-bar{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; width:6.5rem; height:.32rem}
.meter-bar i{border-radius:1px; background:var(--seg-off)}
.meter-bar i.on{background:var(--live); box-shadow:0 0 .35rem var(--live)}
.meter b{font-family:var(--font-display); font-weight:700; font-size:.56rem; letter-spacing:.08em; color:var(--text-2); text-shadow:var(--engrave)}

.root-sub{font-size:.88rem; color:var(--text-2)}
.root-org{font-size:.76rem; color:var(--text-3)}

.dept{display:flex; flex-direction:column; gap:.15rem; padding:1rem 1.15rem; border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1)); border:1px solid var(--hair);
  box-shadow:var(--card-shadow)}
.dept{box-shadow:var(--card-shadow), 0 .3rem 0 var(--side), 0 .9rem 1.4rem var(--plate-shadow)}
.dept::before,.dept::after{content:""; position:absolute; top:22%; bottom:22%; width:5px;
  background:repeating-linear-gradient(to bottom, var(--pin) 0 3px, transparent 3px 8px)}
.dept::before{left:-6px} .dept::after{right:-6px}
.dept-code{font-family:var(--font-display); font-weight:800; font-size:1.9rem; letter-spacing:.05em; line-height:1.2}
.dept-name{font-size:1rem; font-weight:600; color:var(--text)}
.dept-meta{font-size:.85rem; color:var(--text-2)}
.dept-live{display:inline-flex; align-items:center; gap:.4rem; margin-top:.35rem; font-size:.78rem; font-weight:600; color:var(--text)}
.dept{background-image:linear-gradient(90deg, transparent 12%, var(--dept-edge) 50%, transparent 88%), linear-gradient(180deg,var(--ink-2),var(--ink-1));
  background-size:100% 1px, 100% 100%; background-repeat:no-repeat; background-position:top, 0 0}

.line{display:flex; align-items:center; gap:.8rem; min-height:3.9rem; padding:.65rem 1rem .65rem .75rem;
  border-radius:var(--r-md); background:var(--ink-1); border:1px solid var(--hair); box-shadow:var(--card-shadow)}
.line::before{content:""; align-self:stretch; width:4px; border-radius:4px; background:var(--accent);
  box-shadow:0 0 .75rem var(--accent)}
.line-txt{display:flex; flex-direction:column; min-width:0}
.line-code{display:flex; align-items:baseline; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.07em; color:var(--accent-ink)}
.core-no{font-style:normal; font-weight:600; font-size:.62rem; letter-spacing:.14em; opacity:.65}
.line-th{font-size:1.2rem; font-weight:700; line-height:1.35}
.line-en{font-size:.86rem; font-weight:500; color:var(--text-2)}
.line-count{margin-left:auto; font-size:.74rem; color:var(--text-2); background:var(--ink-2);
  padding:.12rem .55rem; border-radius:999px; white-space:nowrap}

.corebox{position:relative; z-index:1; display:flex; align-items:flex-start; gap:2.4rem; padding:1rem 1.8rem .75rem 1.1rem}
.corebox .line{background:none; border:0; box-shadow:none; padding:0; min-height:0; height:3.5rem; width:11rem; gap:.75rem}
.corebox .line-count{display:none}
.apps{position:relative; z-index:1}
.app{display:flex; flex-direction:column; align-items:center; gap:.4rem; width:6.9rem; padding:0;
  border:0; background:none; cursor:pointer; text-align:center; border-radius:var(--r-md);
  transition:opacity .4s var(--ease-out)}
.app:focus-visible{outline-offset:4px}
.app-tile{position:relative; display:grid; place-items:center; width:4.4rem; height:4.4rem; border-radius:1.3rem; flex:none;
  color:var(--accent-ink);
  background:radial-gradient(120% 120% at 25% 10%, var(--accent-soft), transparent 55%),
             linear-gradient(160deg,var(--tile-1),var(--tile-2));
  border:1px solid var(--accent-line, var(--hair-2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 .28rem 0 var(--accent-side, var(--side)), var(--tile-shadow), 0 0 1.1rem var(--accent-glow, transparent);
  transition:transform .3s var(--ease-spring), box-shadow .3s}
.app-tile::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(90% 60% at 50% 115%, var(--accent-soft), transparent 70%)}
.app-tile::after{content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(165deg, var(--spec) 0%, rgba(255,255,255,0) 38%),
             linear-gradient(0deg, rgba(255,255,255,.05), transparent 30%)}
.app-tile > *{position:relative; z-index:1}
.app-tile > .app-led{position:absolute}
.app.is-off .app-tile::before{display:none}
.app-tile .i{width:2.05rem; height:2.05rem; stroke-width:1.7; filter:drop-shadow(0 0 .35rem var(--accent-glow, transparent))}
.app-led{position:absolute; top:.38rem; right:.38rem; width:.42rem; height:.42rem}
.app-name{font-size:.95rem; font-weight:700; letter-spacing:-.005em; line-height:1.25; color:var(--text); max-width:100%;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.app:hover .app-tile,.app.is-active .app-tile{transform:translateY(-3px) scale(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 .4rem 0 var(--accent-side, var(--side)), var(--tile-shadow), 0 0 1.8rem var(--accent-glow, transparent)}
.app.is-off .app-tile{background:var(--ink-1); border-color:var(--hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 .2rem 0 var(--side); color:var(--text-3)}
.app.is-off .app-tile .i{filter:none}
.app.is-off .app-name{color:var(--text-2)}
.app-led{width:.5rem!important; height:.5rem!important}
.apps-empty{grid-column:1 / -1; font-size:.8rem; color:var(--text-3); padding:.5rem 0}

.empty{grid-column:2 / -1; grid-row:1 / -1; align-self:center; max-width:32rem; padding:1.5rem;
  border-radius:var(--r-lg); border:1px solid var(--hair-2); background:var(--ink-1); color:var(--text-2)}
.empty h2{margin:0 0 .4rem; font-size:1.1rem; color:var(--text)}
.empty p{margin:0; font-size:.9rem}

/* นำเสนอ: หรี่ทุกอย่างยกเว้นจุดที่กำลังโชว์ */
.map.touring .node:not(.lit), .map.touring .app:not(.lit){opacity:.22}
.map.touring .traces{opacity:.45; transition:opacity .4s}

/* ---------- Preview (popover + sheet) ---------- */
.pv-media{position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(120% 90% at 15% 0%, var(--accent-soft), transparent 60%),
             linear-gradient(160deg,var(--media-1),var(--media-2));
  border-bottom:1px solid var(--hair)}
.pv-media .shot{display:none}
.pv-media.has-img .mock{display:none}
.pv-media.has-img .shot{display:flex}
.shot{position:absolute; inset:9% 7% 0; margin:0; flex-direction:column; border-radius:.75rem .75rem 0 0; overflow:hidden;
  background:var(--mock-bg); border:1px solid var(--hair-2); border-bottom:0;
  box-shadow:0 -1px 0 rgba(255,255,255,.06) inset, 0 1.2rem 2.4rem rgba(0,0,0,.45)}
.shot-bar{display:flex; align-items:center; gap:.3rem; height:1.55rem; padding:0 .55rem; flex:none;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-1)); border-bottom:1px solid var(--hair)}
.shot-bar > i{width:.42rem; height:.42rem; border-radius:50%; background:#FF5F57}
.shot-bar > i:nth-child(2){background:#FEBC2E} .shot-bar > i:nth-child(3){background:#28C840}
.shot-url{display:inline-flex; align-items:center; gap:.3rem; margin:0 auto; padding:.08rem .7rem; border-radius:999px;
  background:var(--fill); font-size:.6rem; font-weight:600; color:var(--text-2); max-width:70%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.shot-url .i{width:.62rem; height:.62rem}
.shot-view{position:relative; flex:1; overflow:hidden}
.shot-view img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:1; transition:opacity .35s}
.shot-view.is-loading img{opacity:0}
.shot-view.is-loading{background:linear-gradient(100deg, var(--fill) 30%, rgba(255,255,255,.12) 50%, var(--fill) 70%) 0 0/250% 100%;
  animation:skeleton 1.2s linear infinite}
@keyframes skeleton{from{background-position:150% 0} to{background-position:-100% 0}}
.mock{width:72%; border-radius:.7rem; background:var(--mock-bg); border:1px solid var(--hair-2);
  box-shadow:0 18px 36px rgba(0,0,0,.45); overflow:hidden}
.mock-bar{display:flex; align-items:center; gap:.3rem; padding:.45rem .6rem; border-bottom:1px solid var(--hair)}
.mock-bar i{width:.42rem; height:.42rem; border-radius:50%; background:var(--ink-3)}
.mock-bar span{margin-left:.4rem; font-size:.62rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mock-body{display:flex; gap:.7rem; padding:.8rem .75rem .9rem}
.mock-ico{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.6rem; flex:none;
  background:var(--accent-soft); color:var(--accent-ink)}
.mock-lines{flex:1; display:flex; flex-direction:column; gap:.4rem; padding-top:.15rem}
.mock-lines i{display:block; height:.42rem; border-radius:9px; background:var(--fill)}
.mock-lines i:first-child{background:var(--accent); opacity:.65}

.pv-body{padding:1rem 1.15rem 1.15rem}
.pv-top{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.55rem}
.chip{display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; padding:.18rem .65rem;
  border-radius:999px; background:var(--accent-soft); color:var(--accent-ink)}
.chip b{font-family:var(--font-display); font-weight:700; font-size:.66rem; letter-spacing:.06em}
.pv-status{display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; color:var(--text-2)}
.pv-title{margin:0 0 .25rem; font-size:1.25rem; font-weight:700; line-height:1.3}
.pv-desc{margin:0 0 .9rem; font-size:.95rem; color:var(--text-2)}
.pv-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; margin:0 0 1rem}
.pv-meta dt{font-size:.74rem; color:var(--text-2)}
.pv-meta dd{margin:0; font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.popover{position:fixed; z-index:35; left:0; top:0; width:22rem; border-radius:var(--r-lg); overflow:hidden;
  opacity:0; transform:translateY(6px) scale(.98); pointer-events:none;
  transition:opacity .18s var(--ease-out), transform .25s var(--ease-out)}
.popover.show{opacity:1; transform:none; pointer-events:auto}

/* =========================================================
   จอใหญ่ / ทีวี  (≥ 1024px)
   ========================================================= */
@media (min-width:1024px){
  html{font-size:clamp(14px, .84vw, 30px)}
  .island,.tabbar,.sheet-wrap{display:none!important}

  .toolbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:1.25rem;
    height:4.4rem; padding:0 2.5rem; background:var(--toolbar-bg); border-bottom:1px solid var(--hair);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
  .tb-title{display:flex; align-items:center; gap:.8rem; margin-right:.5rem}
  .tb-name{font-weight:700; font-size:1rem; line-height:1.2}
  .tb-sub{font-size:.76rem; color:var(--text-3)}
  .search{display:flex; align-items:center; gap:.55rem; width:17rem; min-height:2.6rem; padding:0 1rem;
    border-radius:999px; background:var(--field); border:1px solid var(--hair); color:var(--text-3)}
  .search:focus-within{border-color:var(--hair-2); color:var(--text-2)}
  .search input{flex:1; min-width:0; border:0; outline:0; background:none; color:var(--text); font:inherit; font-size:.9rem}
  .tb-right{margin-left:auto; display:flex; align-items:center; gap:.9rem}
  .clock{font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:.06em; color:var(--text-2);
    font-variant-numeric:tabular-nums; min-width:6.6rem; text-align:right}

  .map{display:grid; grid-template-columns:auto 13rem max-content; column-gap:4.5rem; row-gap:.6rem;
    grid-auto-rows:auto; align-items:center; justify-content:center; align-content:center;
    min-height:calc(100vh - 4.4rem); padding:1.1rem 3.8rem 4.2rem 2.5rem; min-width:max-content}
  .map > .node, .map > .corebox{grid-column:var(--gc); grid-row:var(--gr)}

  /* แผงบอร์ด */
  body{overflow:hidden}
  .map{margin:.9rem 2rem 3.2rem; min-height:calc(100vh - 4.4rem - 4.1rem); border-radius:2rem;
    background:radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 1.5px) 0 0/22px 22px, var(--plate);
    border:1px solid var(--plate-edge);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 .9rem 0 var(--plate-side), 0 2.4rem 4rem var(--plate-shadow);
    transition:transform .8s var(--ease-out)}

  /* กึ่ง 3 มิติ */
  html.tilt .map{transform:perspective(2600px) rotateX(16deg); transform-origin:50% 42%; transform-style:preserve-3d}
  html.tilt .map > .node, html.tilt .corebox, html.tilt .apps, html.tilt .app, html.tilt .root{transform-style:preserve-3d}
  html.tilt .core{transform:none}
  html.tilt .lid{transform:translateZ(.9rem)}
  html.tilt .dept{transform:none}
  html.tilt .corebox .line{transform:translateZ(.5rem)}
  html.tilt .app-tile{transform:translateZ(.3rem)}
  html.tilt .app-name{transform:translateZ(.4rem)}
  html.tilt .app:hover .app-tile, html.tilt .app.is-active .app-tile{transform:translateZ(1.8rem) translateY(-2px)}
  .core{width:22rem; height:14.67rem}
  .root{gap:2rem}
  .stats{display:block; width:22rem; padding:1.1rem 1.2rem 1.15rem; border-radius:1.4rem; text-align:left;
    background-image:linear-gradient(90deg, transparent 12%, var(--dept-edge) 50%, transparent 88%), linear-gradient(180deg,var(--ink-2),var(--ink-1));
    background-size:100% 1px, 100% 100%; background-repeat:no-repeat;
    border:1px solid var(--hair); box-shadow:var(--card-shadow), 0 .3rem 0 var(--side), 0 1rem 1.6rem var(--plate-shadow)}
  .core .wordmark{font-size:2.8rem}
  .corebox.dept-start{margin-top:1.9rem}
  .corebox{padding:.75rem 1.8rem .75rem 1.1rem; gap:2.4rem; align-items:center}
  .corebox .line{height:auto; width:12.5rem}
  .core-sub{font-size:.56rem}
  .lid-mark{font-size:.56rem}
  .meter-bar{width:9rem; height:.42rem}
  .meter b{font-size:.66rem}
  .map{column-gap:5rem; row-gap:.45rem}
  .app{flex-direction:row; align-items:center; gap:.85rem; width:auto; text-align:left}
  .app-name{width:8.6rem; font-size:1rem}
  .toast{display:grid; position:fixed; z-index:40; top:5.2rem; left:50%; width:22rem; padding:.75rem .95rem .7rem .75rem;
    border-radius:1.4rem; color:var(--text); transform:translate(-50%,-160%); opacity:0; pointer-events:none;
    transition:transform .55s var(--ease-spring), opacity .3s}
  .toast.show{transform:translate(-50%,0); opacity:1}
  .btn-3d{min-width:3.2rem; font-family:var(--font-display); font-weight:800; font-size:.78rem; letter-spacing:.06em}
  .apps{display:flex; align-items:center; gap:2rem}

  .dept-name{white-space:nowrap}
  .statusbar{position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; align-items:center; gap:1.5rem; font-weight:500;
    min-height:2.9rem; padding:0 2.5rem; font-size:.88rem; color:var(--text-2);
    background:linear-gradient(180deg,transparent,var(--statusbar-fade) 45%)}
  .statusbar .st{display:inline-flex; align-items:center; gap:.45rem}
  .statusbar b{font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--text)}
  .statusbar .hint{margin-left:auto; color:var(--text-3)}
}

/* =========================================================
   มือถือ / แท็บเล็ต  (< 1024px)
   ========================================================= */
@media (max-width:1023.98px){
  .toolbar,.statusbar,.popover{display:none!important}

  .map{padding:calc(var(--safe-t) + 4.6rem) 1rem calc(var(--safe-b) + 7.5rem)}
  .map{overflow-x:clip}
  .root{padding:.25rem 0 2rem}
  .root .wordmark{font-size:2.45rem}
  .core{width:19.5rem; height:13rem}
  .lid{transform:translateZ(.8rem)}
  .dept{margin-top:2.4rem; margin-right:.55rem}
  .corebox{margin-right:.55rem}
  .dept::before,.dept::after{display:none}
  .dept{flex-direction:row; align-items:baseline; flex-wrap:wrap; column-gap:.65rem;
    margin:1.1rem 0 .7rem 1.75rem; padding:.85rem 1rem}
  .dept-code{font-size:1.25rem}
  .dept-meta{margin-left:auto}
  .dept-live{order:5; width:100%; margin-top:.1rem}
  .corebox{display:block; margin:.85rem 0 .6rem 1.75rem; padding:1.1rem .9rem .5rem .8rem}
  .corebox .line{width:auto; height:auto; min-height:3rem}
  .corebox .line-count{display:inline-block}
  .apps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem .4rem; margin-left:.4rem; padding:1.1rem 0 .4rem}
  .app-name{overflow-wrap:normal; word-break:keep-all; hyphens:none; -webkit-line-clamp:2}
  .app{width:100%}
  .app-tile{width:4.1rem; height:4.1rem; border-radius:1.2rem}
  .app-tile .i{width:1.85rem; height:1.85rem}
  .app-name{font-size:.8rem}
  .core-sub{font-size:.48rem}
  .lid-mark{font-size:.46rem}
  .empty{margin:1rem 0 0 1.75rem}

  /* Dynamic Island */
  .island{position:fixed; z-index:30; left:50%; top:calc(var(--safe-t) + .6rem); transform:translateX(-50%);
    height:2.6rem; border-radius:1.3rem; background:#000; color:#fff; overflow:hidden; cursor:pointer;
    display:flex; flex-direction:column; align-items:center;
    box-shadow:0 10px 28px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
    transition:width .5s var(--ease-spring), height .5s var(--ease-spring), border-radius .5s var(--ease-spring)}
  .is-compact{display:inline-flex; align-items:center; gap:.55rem; width:max-content; height:2.6rem; flex:none}
  .is-led{width:.55rem; height:.55rem; border-radius:50%; background:var(--live); box-shadow:0 0 .55rem currentColor; flex:none}
  .is-text{font-size:.82rem; font-weight:500; white-space:nowrap}
  .is-text.brand{font-family:var(--font-logo); font-weight:400; font-size:.7rem; letter-spacing:.12em}
  .is-aux{font-size:.74rem; color:#9AA1AD; white-space:nowrap}
  .is-aux:empty{display:none}
  .island.busy .is-led{animation:blink .8s ease-in-out infinite}
  @keyframes blink{50%{opacity:.25}}
  .is-more{width:100%; padding:.3rem 1.1rem 1rem; display:grid; gap:.75rem; opacity:0; transition:opacity .2s}
  .toast{display:none!important}
  .island.act{height:5.4rem; border-radius:2rem}
  .island.act .is-compact,.island.act .is-more{display:none}
  .island.act .is-act{display:grid; width:100%; padding:.7rem .95rem .7rem .7rem; color:#fff; animation:actin .45s var(--ease-spring)}
  .island .act-tile{background:linear-gradient(160deg,#2B303A,#15181E)}
  @keyframes actin{from{opacity:0; transform:scale(.92)}}
  .is-today{margin-top:-.45rem; text-align:center; font-size:.7rem; font-weight:500; color:#9AA1AD}
  .is-today:empty{display:none}
  .island.open{height:14.2rem; border-radius:2.2rem; cursor:default}
  .island.open .is-more{opacity:1; transition:opacity .3s .18s}
  .is-clock{font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:.06em; text-align:center; font-variant-numeric:tabular-nums}
  .is-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem; text-align:center}
  .is-stats div{display:flex; flex-direction:column; align-items:center; gap:.1rem; font-size:.66rem; color:#9AA1AD}
  .is-stats b{font-family:var(--font-display); font-weight:700; font-size:.95rem; color:#fff}
  .is-ctl{display:flex; justify-content:center; gap:.5rem}
  .island .seg{background:#1C1C1E; border-color:rgba(255,255,255,.08)}
  .island .seg button{color:#A1A1A6}
  .island .seg button[aria-pressed="true"]{background:#3A3A3C; color:#fff; box-shadow:none}

  /* เมนูลอยด้านล่าง */
  .tabbar{position:fixed; z-index:25; left:50%; bottom:calc(var(--safe-b) + .9rem); transform:translateX(-50%)}
  .tabs{display:flex; align-items:center; gap:.1rem; padding:.3rem; border-radius:999px}
  .tab{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem;
    min-width:4.35rem; max-width:6rem; height:3.4rem; padding:0 .5rem; border:0; border-radius:999px; background:none;
    color:var(--text-2); font-size:.66rem; cursor:pointer; overflow:hidden;
    transition:max-width .4s var(--ease-spring), min-width .4s var(--ease-spring), padding .4s, opacity .25s, background .25s, color .25s}
  .tab .i{width:1.4rem; height:1.4rem}
  .tab-code{font-family:var(--font-display); font-weight:800; font-size:.92rem; letter-spacing:.03em; line-height:1.4rem}
  .tab[aria-pressed="true"]{background:var(--tab-on); color:var(--text)}
  .tabbar.mini .tab:not([aria-pressed="true"]){max-width:0; min-width:0; padding:0; opacity:0}
  .tabbar.mini .tab span{display:none}
  .tabbar.mini .tab{height:2.9rem}
  .tab-search{display:none; align-items:center; gap:.5rem; width:calc(100vw - 2rem); max-width:30rem;
    height:3.4rem; padding:0 .35rem 0 1rem; border-radius:999px; color:var(--text-2)}
  .tab-search input{flex:1; min-width:0; border:0; outline:0; background:none; color:var(--text); font:inherit; font-size:1rem}
  .tab-search .icon-btn{width:2.7rem; height:2.7rem; background:var(--fill); border:0}
  .tabbar.searching .tabs{display:none}
  .tabbar.searching .tab-search{display:flex; animation:morph .45s var(--ease-spring)}
  @keyframes morph{from{transform:scaleX(.3); opacity:0}}

  /* Bottom sheet */
  .sheet-wrap{position:fixed; inset:0; z-index:40; visibility:hidden; transition:visibility 0s .45s}
  .sheet-wrap.open{visibility:visible; transition:none}
  .sheet-backdrop{position:absolute; inset:0; background:var(--backdrop); opacity:0; transition:opacity .3s}
  .sheet-wrap.open .sheet-backdrop{opacity:1}
  .sheet{position:absolute; left:.5rem; right:.5rem; bottom:calc(var(--safe-b) + .5rem); max-height:86vh; overflow:auto;
    border-radius:2rem; padding:.4rem 0 0; transform:translateY(110%); transition:transform .5s var(--ease-spring)}
  .sheet-wrap.open .sheet{transform:none}
  .grabber{width:2.6rem; height:.32rem; border-radius:9px; background:var(--grabber); margin:.35rem auto .7rem}
  .sheet-close{position:absolute; top:.9rem; right:.9rem; z-index:2; background:var(--close-bg); border:0}
  .sheet .pv-media{margin:0 .9rem; border-radius:1.25rem; border:1px solid var(--hair)}
  .sheet .pv-body{padding:1.1rem 1.35rem 1.35rem}
  .sheet .pv-title{font-size:1.3rem}
  .sheet .btn.primary{min-height:3.3rem; font-size:1rem}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important}
}