:root, :root[data-theme="hud"]{           /* Command HUD — ชุดสีแบรนด์ topman-ds */
  --ground:#0B1626; --panel:#12203A; --panel-2:#18294A; --hair:#24395C;
  --gold:#FFCB2D; --gold-dim:#A9842F; --cyan:#5BB8F5;
  --ink:#EAF0FF; --ink-2:#A8BBD6; --ink-3:#6D84A6;
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --board:#132038; --board-2:#0E1A2E;      /* ลายตารางหลังแผนที่ */
}
:root[data-theme="ivory"]{                  /* Ivory — เอกสารราชการ พื้นขาว */
  --ground:#EFEBE1; --panel:#FBF9F4; --panel-2:#F2EEE4; --hair:#D8D0BF;
  --gold:#A9842F; --gold-dim:#C9A24B; --cyan:#1E5C8A;
  --ink:#1A2333; --ink-2:#4E5A6E; --ink-3:#7C8798;
  --shadow:0 8px 26px rgba(60,50,30,.14);
  --board:#E6E1D5; --board-2:#EFEBE1;
}
:root[data-theme="mono"]{                   /* ขาว-ดำ — สำหรับพิมพ์/ถ่ายเอกสาร */
  --ground:#15181C; --panel:#1D2126; --panel-2:#252A31; --hair:#343A42;
  --gold:#C7CDD4; --gold-dim:#79818B; --cyan:#9AA3AD;
  --ink:#F0F2F4; --ink-2:#AEB5BD; --ink-3:#79818B;
  --shadow:0 10px 34px rgba(0,0,0,.55);
  --board:#22262B; --board-2:#1A1D22;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ground);color:var(--ink);overflow:hidden;
  font-family:"IBM Plex Sans Thai","Noto Sans Thai","Sarabun",Thonburi,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0;display:flex;flex-direction:column}
header{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;padding:10px 16px;
  border-bottom:1px solid var(--hair);background:linear-gradient(180deg,var(--panel),var(--ground));z-index:6
}
header h1{font-size:15px;font-weight:700;letter-spacing:-.1px;white-space:nowrap}
header .sub{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
header .sp{flex:1}
.btn{
  background:var(--panel-2);border:1px solid var(--hair);border-radius:4px;color:var(--ink-2);
  font:inherit;font-size:12.5px;padding:7px 12px;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,color .15s
}
.btn:hover{color:var(--ink);border-color:var(--gold-dim)}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.btn.primary{background:var(--gold);border-color:var(--gold);color:#1A1206;font-weight:600}
.btn.primary:hover{filter:brightness(1.08);color:#1A1206}
main{flex:1 1 auto;display:grid;grid-template-columns:270px 1fr 268px;min-height:0}
.col{overflow-y:auto;overflow-x:hidden;background:var(--panel);display:flex;flex-direction:column}
.col.left{border-right:1px solid var(--hair)}
.col.right{border-left:1px solid var(--hair)}
.sec{border-bottom:1px solid var(--hair);padding:12px 13px}
.sec h2{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:6px
}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.seg button{
  flex:1;background:none;border:0;color:var(--ink-2);font:inherit;font-size:12px;
  padding:7px 4px;cursor:pointer;transition:background .15s,color .15s
}
.seg button[aria-pressed="true"]{background:var(--gold);color:#1A1206;font-weight:600}
.seg button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
select,input[type="text"],input[type="search"],textarea{
  width:100%;background:var(--panel-2);border:1px solid var(--hair);border-radius:4px;
  color:var(--ink);font:inherit;font-size:12.5px;padding:7px 9px
}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{resize:vertical;min-height:64px;font-size:12px;line-height:1.5}
.row{display:flex;gap:6px;margin-top:7px}
.row .btn{flex:1;text-align:center;font-size:11.5px;padding:6px 4px}
.count{font-size:11px;color:var(--ink-3);margin-top:8px;font-variant-numeric:tabular-nums}
#list{flex:1 1 auto;overflow-y:auto;padding:4px 5px 20px}
#list label{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
  padding:5px 8px;border-radius:3px;cursor:pointer;line-height:1.3
}
#list label:hover{background:var(--panel-2);color:var(--ink)}
#list input{accent-color:var(--gold);width:13px;height:13px;flex:0 0 auto}
#list .meta{margin-left:auto;font-size:10px;color:var(--ink-3);white-space:nowrap}
#stage{position:relative;min-width:0;background:
  repeating-conic-gradient(var(--board) 0% 25%, var(--board-2) 0% 50%) 50%/18px 18px;
  overflow:hidden;touch-action:none;cursor:grab}
#stage.drag{cursor:grabbing}
svg#map{position:absolute;inset:0;width:100%;height:100%;display:block}
#map path.area{cursor:pointer;transition:fill-opacity .12s}
#map path.area:hover{fill-opacity:.85}
#map text.lbl{pointer-events:none;text-anchor:middle;dominant-baseline:middle}
.overlay{position:absolute;z-index:4}
#zoombar{left:12px;bottom:12px;display:flex;gap:4px}
#zoombar button{
  width:32px;height:32px;background:color-mix(in srgb,var(--panel) 92%,transparent);
  border:1px solid var(--hair);border-radius:4px;color:var(--ink-2);font:inherit;font-size:15px;
  cursor:pointer;box-shadow:var(--shadow)
}
#zoombar button:hover{color:var(--gold);border-color:var(--gold-dim)}
#zlvl{min-width:52px;display:flex;align-items:center;justify-content:center;font-size:11px;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
#hint{
  right:12px;top:12px;max-width:230px;font-size:11px;color:var(--ink-2);line-height:1.6;
  background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--hair);
  border-radius:4px;padding:8px 10px;box-shadow:var(--shadow)
}
#tip{
  position:absolute;z-index:7;pointer-events:none;opacity:0;transform:translate(-50%,-150%);
  background:var(--panel);border:1px solid var(--hair);border-radius:3px;padding:4px 9px;
  font-size:12px;white-space:nowrap;box-shadow:var(--shadow);transition:opacity .1s
}
#idCard{
  position:absolute;z-index:5;left:12px;top:12px;min-width:160px;max-width:240px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--hair);
  border-radius:4px;padding:8px 10px;box-shadow:var(--shadow);pointer-events:none
}
#idCard b{display:block;font-size:13px;color:var(--gold);margin-bottom:2px}
#idCard span{display:block;font-size:11px;color:var(--ink-2);line-height:1.45}
#idCard .warn{color:#E8825F;margin-top:4px}
.warn{color:#E8825F}
#legend{
  right:12px;bottom:12px;width:168px;padding:8px 10px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--hair);
  border-radius:4px;box-shadow:var(--shadow)
}
#legend .bar{height:8px;border-radius:2px;margin:4px 0 6px}
#legend .lr{display:flex;justify-content:space-between;font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
#legend .ttl{font-size:10px;color:var(--ink-2);line-height:1.35}
.fld{margin-bottom:10px}
.fld:last-child{margin-bottom:0}
.fld label{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:5px}
.color{display:flex;align-items:center;gap:7px}
.color input[type="color"]{
  width:34px;height:30px;padding:0;border:1px solid var(--hair);border-radius:4px;
  background:var(--panel-2);cursor:pointer
}
.color input[type="text"]{flex:1;font-variant-numeric:tabular-nums;text-transform:uppercase}
.chk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);cursor:pointer;padding:4px 0}
.chk input{accent-color:var(--gold);width:13px;height:13px}
input[type="range"]{width:100%;accent-color:var(--gold)}
.rng{display:flex;align-items:center;gap:9px}
.rng span{font-size:11px;color:var(--ink-3);min-width:30px;text-align:right;font-variant-numeric:tabular-nums}
.note code{background:var(--panel-2);border:1px solid var(--hair);border-radius:3px;padding:1px 4px;font-size:10px}
.note .bad{color:#E8825F}
.note{font-size:10.5px;color:var(--ink-3);line-height:1.55;margin-top:7px}
.crd{font-size:11px;color:var(--ink-3);line-height:1.65;margin-bottom:11px}
.crd:last-child{margin-bottom:0}
.crd b{display:block;color:var(--ink-2);font-size:10.5px;font-weight:600;
  letter-spacing:.04em;margin-bottom:2px}
.crd a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent}
.crd a:hover{border-bottom-color:var(--gold-dim)}
.crd a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
.crd span{display:block;margin-top:2px}
header .credit{
  font-size:10.5px;color:var(--ink-3);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent
}
header .credit:hover{color:var(--gold);border-bottom-color:var(--gold-dim)}
.legend-edit{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.legend-edit .g{display:flex;align-items:center;gap:6px}
.legend-edit .g input[type="color"]{width:28px;height:26px;padding:0;border:1px solid var(--hair);border-radius:3px;background:none}
.legend-edit .g input[type="text"]{flex:1;font-size:11.5px;padding:5px 7px}
.legend-edit .g button{
  background:none;border:0;color:var(--ink-3);font:inherit;font-size:15px;cursor:pointer;padding:0 4px
}
.legend-edit .g button:hover{color:#E8825F}
#toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);z-index:20;opacity:0;
  background:var(--panel);border:1px solid var(--gold-dim);border-radius:5px;padding:9px 16px;
  font-size:12.5px;box-shadow:var(--shadow);transition:opacity .18s,transform .18s;pointer-events:none
}
#toast.on{opacity:1;transform:translate(-50%,0)}
#mtabs{display:none}
#panelBtn{display:none}                      /* โผล่เฉพาะจอขนาดไอแพด */
/* จอสัมผัส: ทำให้ทุกอย่างแตะโดนง่าย ไม่ว่าจอกว้างเท่าไร */
@media (pointer:coarse){
  #list label{padding:10px 10px;font-size:13.5px}
  #list input{width:17px;height:17px}
  .chk{padding:8px 0}.chk input{width:17px;height:17px}
  .seg button{padding:10px 4px}
  .btn{padding:9px 12px}
  select,input[type="text"],input[type="search"],textarea{padding:10px 10px;font-size:16px}
  #zoombar button{width:40px;height:40px}
  .legend-edit .g input[type="color"]{width:34px;height:32px}
  .color input[type="color"]{width:40px;height:34px}
}
/* ---- ไอแพดแนวตั้ง / จอกลาง: 2 คอลัมน์ แผงขวาเป็นลิ้นชักเลื่อนเข้ามา ---- */
@media (min-width:701px) and (max-width:1180px){
  main{grid-template-columns:250px 1fr}
  .col.right{
    position:fixed;top:52px;right:0;bottom:0;width:290px;z-index:9;
    transform:translateX(100%);transition:transform .22s ease;box-shadow:var(--shadow)
  }
  .col.right.open{transform:none}
  #panelBtn{display:inline-block}
}
/* ---- มือถือ: แผนที่เต็มจอ + แผงเลื่อนขึ้นจากด้านล่าง ---- */
@media (max-width:700px){
  header{padding:8px 12px;gap:8px;padding-top:max(8px,env(safe-area-inset-top))}
  header h1{font-size:14px}header .sub,header .credit{display:none}
  .btn{padding:9px 12px;font-size:13px}          /* นิ้วกดได้ */
  main{display:block;position:relative;height:100%}
  #stage{position:absolute;inset:0;min-height:0}  /* แผนที่เต็มจอ */

  /* แผงเลื่อนขึ้นจากด้านล่าง — แตะหัวแผงเพื่อเปิด/ปิด */
  .col{
    position:fixed;left:0;right:0;bottom:0;z-index:10;max-height:62vh;
    background:var(--panel);border-top:1px solid var(--hair);
    border-radius:14px 14px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45);
    transform:translateY(calc(100% - 54px));transition:transform .24s ease;
    padding-bottom:env(safe-area-inset-bottom)
  }
  .col.open{transform:translateY(0)}
  .col.left{order:0}
  .col::before{
    content:attr(data-title);display:block;padding:16px 16px 10px;font-size:13px;
    font-weight:600;color:var(--ink);border-bottom:1px solid var(--hair);
    background:var(--panel);border-radius:14px 14px 0 0;position:sticky;top:0;z-index:2
  }
  .col::after{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:36px;height:4px;border-radius:2px;background:var(--hair)
  }
  .col.left{bottom:52px}                          /* เหนือแถบแท็บ */
  .col.right{bottom:52px}
  #list{max-height:38vh}
  #list label{padding:11px 10px;font-size:14px}   /* แถวสูงพอให้นิ้วแตะ */
  #list input{width:18px;height:18px}
  .chk{padding:9px 0;font-size:13.5px}
  .chk input{width:18px;height:18px}
  .seg button{padding:11px 4px;font-size:13px}
  select,input[type="text"],input[type="search"],textarea{padding:11px 10px;font-size:16px}
  .row .btn{padding:11px 4px;font-size:13px}
  #zoombar{bottom:64px;left:10px}
  #zoombar button{width:42px;height:42px;font-size:19px}
  #zlvl{min-width:46px}

  #mtabs{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:11;
    border-top:1px solid var(--hair);background:var(--panel);
    padding-bottom:env(safe-area-inset-bottom)
  }
  #mtabs button{
    flex:1;background:none;border:0;border-top:2px solid transparent;color:var(--ink-3);
    font:inherit;font-size:12.5px;padding:14px 4px;cursor:pointer
  }
  #mtabs button[aria-pressed="true"]{color:var(--gold);border-top-color:var(--gold)}
  #hint{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}