/* ที่ว่างว่าง — BKK CITY LAYERS */
:root {
  --c-yellow: #F5CE1B;
  --c-red: #D22E2C;
  --c-blue: #1E56A8;
  --c-green: #2E6B2E;
  --c-charcoal: #3B3B3B;
  --c-cream: #F3F0E7;
  --c-white: #FFFFFF;
  --c-muted: #6f6b62;
  --c-border: #e4e0d4;
  --font-display: 'Mitr', sans-serif;
  --font-en: 'Anton', sans-serif;
  --font-body: 'Noto Sans Thai', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:var(--c-cream); color:var(--c-charcoal); font-family:var(--font-body); overflow:hidden; }
.en-caps { font-family:var(--font-en); letter-spacing:.08em; text-transform:uppercase; }

/* header — สไตล์เดียวกับ quickfeas */
.app-header { background:var(--c-cream); border-bottom:none; }
.header-top {
  display:flex; align-items:center; gap:12px; padding:8px 16px; height:56px;
}
.logo-circle { width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--c-charcoal); cursor:pointer; }
.brand { display:flex; flex-direction:column; line-height:1.05; }
.wordmark-th { font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--c-charcoal); }
.wordmark-en { font-size:11px; color:var(--c-red); letter-spacing:.2em; }
.tagline { font-size:12.5px; color:var(--c-muted); margin-left:auto; padding-left:18px; }
.ribbon { background:var(--c-yellow); }
.ribbon-inner {
  display:flex; justify-content:space-between; align-items:center; padding:3px 16px;
  font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--c-charcoal);
}
.ribbon-inner .en-caps { font-size:11px; letter-spacing:.14em; }

/* layout */
.app-body { display:flex; height:calc(100vh - 79px); }
.sidebar {
  position:relative; width:280px; min-width:280px; overflow-y:auto; background:var(--c-cream);
  border-right:1px solid var(--c-border); padding:14px 16px 30px;
}
.map-wrap { position:relative; flex:1; }
#map { position:absolute; inset:0; }

/* stats */
.stat-row { display:flex; gap:8px; margin-bottom:14px; }
.stat { flex:1; background:var(--c-white); border:1px solid var(--c-border); border-radius:10px; padding:8px 6px; text-align:center; }
.stat b { display:block; font-family:var(--font-display); font-size:16px; }
.stat span { font-size:10.5px; color:var(--c-muted); }

/* groups */
.group { margin-bottom:16px; }
.group-title {
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.14em;
  color:var(--c-muted); text-transform:uppercase; margin-bottom:6px;
  border-bottom:1px solid var(--c-border); padding-bottom:4px;
}
/* E2 T3 — พับเก็บได้ทีละหัวข้อ ค่าเริ่มต้น = พับหมด (สิงห์ขอไม่ให้แถบรกยาว) */
.group > .group-title { cursor:pointer; user-select:none; position:relative; padding-right:16px; }
.group > .group-title::after {
  content:'▸'; position:absolute; right:2px; top:0; font-size:10px; color:var(--c-muted);
  transition:transform .15s;
}
.group.open > .group-title::after { transform:rotate(90deg); }
.group > .group-body { display:none; }
.group.open > .group-body { display:block; }
/* E2 T3 — ปุ่มซ่อนทั้งแถบ ปักมุมขวาบนของ sidebar */
.sidebar-hide {
  position:absolute; top:8px; right:8px; z-index:5; width:22px; height:22px; min-width:22px;
  border:none; border-radius:50%; background:var(--c-charcoal); color:var(--c-yellow);
  font-size:13px; line-height:1; cursor:pointer;
}
@media (min-width:761px) {
  .sidebar { transition:width .25s, min-width .25s, padding .25s; }
  body.sidebar-hidden .sidebar { width:0; min-width:0; padding:0; border-right:none; overflow:hidden; }
  body.sidebar-hidden .sidebar-toggle { display:block; }
}
.row { display:flex; align-items:center; justify-content:space-between; padding:6px 2px; cursor:pointer; font-size:13.5px; gap:8px; }
.row em { font-style:normal; color:var(--c-muted); font-size:11px; }
.row input { display:none; }
.row i {
  width:34px; height:19px; min-width:34px; border-radius:19px; background:#d8d3c4; position:relative; transition:.18s;
}
.row i::after {
  content:''; position:absolute; top:2.5px; left:3px; width:14px; height:14px; border-radius:50%;
  background:var(--c-white); transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.row input:checked + i { background:var(--c-yellow); }
.row input:checked + i::after { left:17px; background:var(--c-charcoal); }
.row input:disabled + i { opacity:.35; cursor:not-allowed; }
.row:has(input:disabled) { cursor:default; }
.hint { font-size:11px; color:var(--c-muted); padding:2px 2px 0; }

/* slider ความเข้มชั้นสี */
.op-row { display:flex; align-items:center; gap:8px; padding:0 2px 4px 14px; font-size:10.5px; color:var(--c-muted); }
.op-row input[type=range] { flex:1; height:3px; accent-color:var(--c-yellow); cursor:pointer; }

/* ปุ่มสลับภาษา */
.lang-toggle {
  margin-left:12px; border:1.5px solid var(--c-charcoal); background:var(--c-white); color:var(--c-charcoal);
  font-family:var(--font-en); font-size:11px; letter-spacing:.08em; padding:4px 11px; border-radius:16px; cursor:pointer;
}
.lang-toggle:hover { background:var(--c-charcoal); color:var(--c-yellow); }

/* เส้นคั่น section ในการ์ดรวม (ผังเมือง + เขตห้ามสร้าง) */
.card-sep { border:none; border-top:1px solid var(--c-border); margin:12px 0; }

/* ปุ่ม + กล่องข้อเสนอแนะ */
.fb-btn {
  position:absolute; right:14px; bottom:70px; z-index:16;
  background:var(--c-yellow); color:var(--c-charcoal); border:none; border-radius:22px;
  padding:8px 15px; font-family:var(--font-display); font-weight:600; font-size:12.5px;
  cursor:pointer; box-shadow:0 3px 14px rgba(0,0,0,.2);
}
.fb-panel {
  position:absolute; right:14px; bottom:112px; z-index:17; width:280px; display:none;
  background:var(--c-white); border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.2); padding:14px;
}
.fb-panel.show { display:block; }
.fb-title { font-family:var(--font-display); font-weight:600; margin-bottom:8px; }
.fb-panel textarea {
  width:100%; border:1px solid var(--c-border); border-radius:8px; padding:8px;
  font-family:var(--font-body); font-size:13px; resize:vertical; background:var(--c-cream);
}
.fb-row { display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px; }
#fb-status { font-size:11px; color:var(--c-muted); }
#fb-send {
  background:var(--c-charcoal); color:var(--c-yellow); border:none; border-radius:16px;
  padding:6px 18px; font-family:var(--font-display); font-size:13px; cursor:pointer;
}

.credit { margin-top:22px; font-size:10.5px; color:var(--c-muted); line-height:1.6; border-top:1px solid var(--c-border); padding-top:10px; }

/* info card */
.card {
  position:absolute; top:14px; right:14px; width:300px; max-height:calc(100% - 60px); overflow-y:auto;
  background:var(--c-white); border-radius:14px; box-shadow:0 8px 30px rgba(0,0,0,.18);
  padding:16px 18px; display:none; z-index:20;
}
.card.show { display:block; }
.card .tag { display:inline-block; font-size:10.5px; padding:2px 9px; border-radius:20px; background:var(--c-yellow); color:var(--c-charcoal); font-weight:600; margin-bottom:6px; }
.card h3 { font-family:var(--font-display); margin:0 0 2px; font-size:18px; }
.card .sub { font-size:12px; color:var(--c-muted); margin-bottom:10px; }
.card .kv { display:flex; justify-content:space-between; font-size:13px; padding:7px 0; border-bottom:1px dashed var(--c-border); gap:12px; }
.card .kv:last-child { border-bottom:none; }
.card .kv b { font-family:var(--font-display); white-space:nowrap; }
.card .big { font-family:var(--font-display); font-size:22px; color:var(--c-red); }
.card .close { position:absolute; top:8px; right:12px; border:none; background:none; font-size:18px; cursor:pointer; color:var(--c-muted); }
.card .note { font-size:10.5px; color:var(--c-muted); margin-top:8px; }

/* legend */
.legend {
  position:absolute; left:14px; bottom:26px; background:rgba(255,255,255,.94); border-radius:10px;
  padding:10px 14px; font-size:11.5px; box-shadow:0 3px 14px rgba(0,0,0,.14); display:none; z-index:15; max-width:230px;
  /* เพดานความสูง + เลื่อนในตัว — ไม่งั้นตำนานยาวจนบังแผนที่ครึ่งจอ แล้วคลิกหมุดไม่โดน (วัด 8 ก.ย.: 612px จาก 900px) */
  max-height:min(56vh, 500px); overflow-y:auto; overscroll-behavior:contain;
}
/* คีย์สีสถานะ EIA — ชิปเรียงต่อกัน ไม่ใช่บรรทัดละสี */
.legend .lg-chips { display:flex; flex-wrap:wrap; gap:3px 9px; padding-top:2px; }
.legend .lg-chips .ck { display:inline-flex; align-items:center; gap:4px; font-size:11px; }
.legend .lg-chips .sw { width:10px; height:10px; min-width:10px; border-radius:50%; }
.legend.show { display:block; }
.legend .lg-title { font-family:var(--font-display); font-weight:600; font-size:12px; margin-bottom:5px; }
.legend .li { display:flex; align-items:center; gap:7px; padding:1.5px 0; }
.legend .sw { width:14px; height:14px; min-width:14px; border-radius:3px; border:1px solid rgba(0,0,0,.15); }
/* เส้นประ = ถนนขยายเขตทาง (fix1) */
.legend .sw-dash { width:14px; height:0; min-width:14px; border-radius:0; border:none; border-top:2px dashed #D22E2C; margin-top:6px; }
/* ไอคอน EIA ในตำนานสัญลักษณ์ (fix3) */
.legend .sw-ic { width:18px; height:18px; min-width:18px; border:none; border-radius:50%; background:none; }
.legend .lg-note { font-size:10.5px; opacity:.7; padding-top:3px; }
.legend .lg-head { display:none; }

/* zoom note */
.zoom-note {
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  background:var(--c-charcoal); color:var(--c-yellow); font-size:12px; padding:5px 16px; border-radius:20px;
  display:none; z-index:15; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.zoom-note.show { display:block; }

.sidebar-toggle {
  display:none; position:absolute; top:14px; left:14px; z-index:25;
  background:var(--c-charcoal); color:var(--c-yellow); border:none; border-radius:22px;
  padding:8px 16px; font-family:var(--font-body); font-size:13px; box-shadow:0 3px 10px rgba(0,0,0,.3);
  cursor:pointer;
}

/* basemap switch */
.basemap-switch {
  position:absolute; right:14px; bottom:26px; z-index:16;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px; background:none; box-shadow:none; padding:0;
}
.bm-toggle {
  border:none; font-family:var(--font-body); font-size:12px; color:var(--c-charcoal);
  background:rgba(255,255,255,.94); box-shadow:0 3px 14px rgba(0,0,0,.18);
  padding:8px 14px; border-radius:22px; cursor:pointer; display:flex; gap:6px; align-items:center;
}
.bm-toggle b { font-weight:600; }
.bm-list[hidden] { display:none; }   /* ต้องมี ไม่งั้น display:flex ข้างล่างทับ [hidden] ของเบราว์เซอร์ แล้วรายการกางค้างตลอด */
.bm-list {
  display:flex; flex-direction:column; gap:2px; padding:5px;
  background:rgba(255,255,255,.97); border-radius:14px; box-shadow:0 6px 22px rgba(0,0,0,.22);
  max-height:min(60vh, 420px); overflow:auto;
}
.bm-list button {
  border:none; background:none; font-family:var(--font-body); font-size:12.5px; color:var(--c-charcoal);
  padding:7px 14px; border-radius:10px; cursor:pointer; text-align:left; white-space:nowrap;
}
.bm-list button:hover { background:rgba(0,0,0,.06); }
.bm-list button.active { background:var(--c-charcoal); color:var(--c-yellow); }

@media (max-width: 760px) {
  .tagline { display:none; }
  .sidebar { position:absolute; z-index:30; height:100%; transform:translateX(-100%); transition:.25s; box-shadow:4px 0 20px rgba(0,0,0,.2); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-toggle { display:block; }
  .sidebar-hide { display:none; }   /* มือถือใช้ ☰ ปุ่มเดียวพอ ไม่ต้องมีปุ่มซ่อนซ้อน */
  .to-map-long { display:none; }    /* ตัดคำให้สั้นลงบนมือถือ: "กลับหน้าแผนที่หลัก" → "แผนที่หลัก" */
  .card { width:calc(100% - 28px); top:auto; bottom:14px; max-height:55%; }
  .legend { max-width:min(230px, 60vw); padding:0; overflow:hidden; }
  .legend .lg-head { display:flex; width:100%; justify-content:space-between; align-items:center; gap:8px;
    padding:8px 12px; border:none; background:var(--c-charcoal); color:var(--c-yellow);
    font-family:var(--font-body); font-size:12px; cursor:pointer; }
  .legend .lg-chev { transition:.2s; }
  .legend.open .lg-chev { transform:rotate(180deg); }
  .legend .lg-body { display:none; padding:8px 12px 10px; max-height:40vh; overflow-y:auto; }
  .legend.open .lg-body { display:block; }
}

/* ---------- Dark mode ของเปลือกเว็บ (feedback ตุ้ม #7-#8: พื้นดำนวล · หัวข้อฟ้า · ตัวหนังสือขาว) ----------
   คนละเรื่องกับ basemap สว่าง/มืด — สลับอิสระต่อกัน */
.theme-toggle {
  margin-left:8px; border:1.5px solid var(--c-charcoal); background:var(--c-white); color:var(--c-charcoal);
  font-size:13px; line-height:1; padding:4px 9px; border-radius:16px; cursor:pointer;
}
.theme-toggle:hover { background:var(--c-charcoal); color:var(--c-yellow); }

/* E2 T2 — สิงห์หาทางกลับจาก admin ไม่เจอ เพราะ #to-map หน้าตาเหมือนปุ่มธีมข้าง ๆ เลยทำให้เป็นปุ่มหลักชัดเจน */
#to-map { background:var(--c-yellow); color:var(--c-charcoal); border-color:var(--c-yellow); font-weight:700; }
#to-map:hover { background:var(--c-charcoal); color:var(--c-yellow); }

html[data-theme=dark] {
  --c-cream: #1c1d20;          /* พื้นหลัก — ดำนวล ไม่ดำสนิท */
  --c-white: #26282c;          /* พื้นการ์ด/แผง */
  --c-charcoal: #f2f2f2;       /* ตัวหนังสือหลัก = ขาว */
  --c-muted: #b9bcc4;          /* ตัวหนังสือรอง */
  --c-border: #3a3d44;
  --c-head: #5aa9ff;           /* หัวข้อหลัก = ฟ้า */
  --c-toggle-off: #4a4d55;
}
html[data-theme=dark] .wordmark-th,
html[data-theme=dark] .group-title,
html[data-theme=dark] .card h3,
html[data-theme=dark] .fb-title,
html[data-theme=dark] .legend .lg-title { color:var(--c-head); }
html[data-theme=dark] .group-title { border-bottom-color:var(--c-border); }
html[data-theme=dark] .ribbon { background:#2c3038; }
html[data-theme=dark] .ribbon-inner { color:var(--c-head); }
html[data-theme=dark] .row i { background:var(--c-toggle-off); }
html[data-theme=dark] .row input:checked + i { background:var(--c-head); }
html[data-theme=dark] .row input:checked + i::after { background:#111; }
html[data-theme=dark] .lang-toggle, html[data-theme=dark] .theme-toggle { border-color:var(--c-muted); }
html[data-theme=dark] .lang-toggle:hover, html[data-theme=dark] .theme-toggle:hover { background:var(--c-head); color:#111; }
html[data-theme=dark] .legend { background:rgba(38,40,44,.94); color:var(--c-charcoal); }
html[data-theme=dark] .bm-toggle, html[data-theme=dark] .bm-list { background:rgba(38,40,44,.96); color:var(--c-charcoal); }
html[data-theme=dark] .bm-list button { color:var(--c-charcoal); }
html[data-theme=dark] .bm-list button:hover { background:rgba(255,255,255,.08); }
html[data-theme=dark] .bm-list button.active { background:var(--c-head); color:#111; }
html[data-theme=dark] .sidebar-toggle, html[data-theme=dark] .legend .lg-head { background:var(--c-head); color:#111; }
html[data-theme=dark] .card, html[data-theme=dark] .fb-panel { box-shadow:0 8px 30px rgba(0,0,0,.6); }
html[data-theme=dark] .card .big { color:#ff6b69; }
html[data-theme=dark] .card .close { color:var(--c-muted); }
html[data-theme=dark] #fb-send { background:var(--c-head); color:#111; }
html[data-theme=dark] .fb-panel textarea { color:var(--c-charcoal); }
html[data-theme=dark] .zoom-note { background:var(--c-head); color:#111; }
html[data-theme=dark] .logo-circle { border-color:var(--c-muted); }
html[data-theme=dark] .sidebar { scrollbar-color:#4a4d55 transparent; }
html[data-theme=dark] .op-row input[type=range] { accent-color:var(--c-head); }

/* ---------- D1: admin.html — แก้ไขจุด EIA ---------- */
.admin-body { position:relative; }
.admin-panel { width:360px; min-width:360px; display:flex; flex-direction:column; padding:12px 14px 20px; gap:10px; }
.admin-filters { display:flex; flex-direction:column; gap:6px; }
.chip-row { display:flex; flex-wrap:wrap; gap:6px; }
.chip {
  border:1px solid var(--c-border); background:var(--c-white); color:var(--c-charcoal);
  border-radius:16px; padding:5px 11px; font-size:11.5px; cursor:pointer; font-family:var(--font-body);
}
.chip.active { background:var(--c-charcoal); color:var(--c-yellow); border-color:var(--c-charcoal); }
#search-box, #district-select {
  width:100%; border:1px solid var(--c-border); border-radius:8px; padding:7px 9px;
  font-family:var(--font-body); font-size:12.5px; background:var(--c-white); color:var(--c-charcoal);
}
.admin-btn-add { width:100%; }
.admin-list { flex:1 1 auto; overflow-y:auto; min-height:120px; border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border); }
.admin-row { display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid var(--c-border); cursor:pointer; }
.admin-row:hover { background:rgba(0,0,0,.04); }
.admin-row.sel { background:rgba(245,206,27,.25); }
.admin-dot { width:11px; height:11px; min-width:11px; border-radius:50%; }
.admin-row-name { font-size:12.5px; font-weight:600; }
.admin-row-sub { font-size:10.5px; color:var(--c-muted); }
.admin-empty { padding:14px 4px; font-size:12px; color:var(--c-muted); }
/* F1 S16 — คีย์สีสถานะสั้น ๆ เหนือรายการ EIA */
.admin-status-key { display:flex; flex-wrap:wrap; gap:6px 10px; padding:6px 4px; font-size:10.5px; color:var(--c-muted); }
.admin-status-key .ask-item { display:inline-flex; align-items:center; gap:4px; }
.admin-status-key .sw { width:9px; height:9px; min-width:9px; border-radius:50%; display:inline-block; }

.admin-editor, .admin-add-form {
  background:var(--c-white); border:1px solid var(--c-border); border-radius:10px; padding:12px;
  display:flex; flex-direction:column; gap:8px;
}
.admin-editor-head { display:flex; justify-content:space-between; align-items:center; font-family:var(--font-display); }
.admin-x { border:none; background:none; cursor:pointer; font-size:15px; color:var(--c-muted); }
.admin-field { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--c-muted); }
.admin-field input, .admin-field select, .admin-field textarea {
  border:1px solid var(--c-border); border-radius:7px; padding:6px 8px; font-family:var(--font-body);
  font-size:13px; color:var(--c-charcoal); background:var(--c-cream); resize:vertical;
}
.admin-field-row { display:flex; gap:8px; }
.admin-field-row .admin-field { flex:1; }
.admin-btn {
  border:1px solid var(--c-charcoal); background:var(--c-white); color:var(--c-charcoal);
  border-radius:8px; padding:7px 10px; font-size:12.5px; cursor:pointer; font-family:var(--font-body);
}
.admin-btn:hover { background:var(--c-cream); }
.admin-btn.active { background:var(--c-yellow); border-color:var(--c-yellow); }
.admin-btn-primary { background:var(--c-charcoal); color:var(--c-yellow); border-color:var(--c-charcoal); }
.admin-actions { display:flex; flex-wrap:wrap; gap:6px; }
.admin-geo-label { font-size:10.5px; color:var(--c-muted); }
.admin-hint { font-size:11px; color:var(--c-muted); }

.admin-history { border-top:1px solid var(--c-border); padding-top:8px; }
.admin-log-row { font-size:11px; padding:4px 0; border-bottom:1px dashed var(--c-border); }
.admin-log-row span { color:var(--c-muted); }
.admin-log-row small { display:block; color:var(--c-muted); font-size:9.5px; }

.admin-toast {
  position:absolute; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px);
  background:var(--c-charcoal); color:var(--c-yellow); padding:8px 18px; border-radius:20px;
  font-size:12.5px; z-index:40; opacity:0; pointer-events:none; transition:.2s;
}
.admin-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.admin-login {
  position:fixed; inset:0; background:rgba(20,20,20,.55); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.admin-login-box {
  background:var(--c-white); border-radius:14px; padding:26px; width:300px;
  box-shadow:0 10px 40px rgba(0,0,0,.3); display:flex; flex-direction:column; gap:10px;
}
.admin-login-err { color:var(--c-red); font-size:12px; min-height:16px; }

@media (max-width: 760px) {
  .admin-panel { position:absolute; z-index:30; height:45vh; width:100%; min-width:0; bottom:0; top:auto;
    transform:translateY(100%); transition:.25s; box-shadow:0 -4px 20px rgba(0,0,0,.2); }
  .admin-panel.open { transform:translateY(0); }
}

html[data-theme=dark] .chip, html[data-theme=dark] #search-box, html[data-theme=dark] #district-select,
html[data-theme=dark] .admin-editor, html[data-theme=dark] .admin-add-form, html[data-theme=dark] .admin-login-box {
  background:var(--c-white); color:var(--c-charcoal); border-color:var(--c-border);
}
html[data-theme=dark] .admin-field input, html[data-theme=dark] .admin-field select, html[data-theme=dark] .admin-field textarea {
  background:var(--c-cream); color:var(--c-charcoal); border-color:var(--c-border);
}
html[data-theme=dark] .admin-btn { background:var(--c-white); color:var(--c-charcoal); border-color:var(--c-border); }
html[data-theme=dark] .admin-btn-primary { background:var(--c-head); color:#111; border-color:var(--c-head); }
html[data-theme=dark] .chip.active { background:var(--c-head); color:#111; }

/* feedback ในหน้า admin */
.admin-feedback textarea { width:100%; border:1px solid var(--c-border); border-radius:8px; padding:8px; font-family:var(--font-body); font-size:13px; background:var(--c-cream); color:var(--c-charcoal); resize:vertical; }
.admin-feedback .admin-log-row span { display:block; white-space:pre-wrap; }
.admin-feedback #fb-shot { width:100%; margin-bottom:8px; }

/* D0 — ลากกรอบแนบภาพ feedback
   E2 T4 — เปลี่ยนจาก absolute (อิง .map-wrap) เป็น fixed (อิงวิวพอร์ต) เพราะตอนนี้ลากกรอบได้ทั้งหน้า
   รวมแถบข้าง ไม่ใช่แค่บนแผนที่ */
#fb-shot-hint {
  position:fixed; top:10px; left:50%; transform:translateX(-50%); z-index:35;
  background:var(--c-charcoal); color:var(--c-yellow); padding:6px 14px; border-radius:20px; font-size:12px;
}
#fb-shot-box {
  position:fixed; z-index:34; border:2px dashed var(--c-red); background:rgba(245,206,27,.25); pointer-events:none;
}
#fb-shot-thumb-wrap { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:11px; color:var(--c-muted); }
#fb-shot-thumb { max-width:100%; max-height:90px; border:1px solid var(--c-border); border-radius:6px; }
#fb-shot-thumb-wrap span { flex:1; }

/* pre-ship review 4 ก.ย. — admin */
.admin-field-row .admin-field { min-width:0; }
.admin-field input, .admin-field select, .admin-field textarea { width:100%; max-width:100%; box-sizing:border-box; }
.admin-addr { font-size:11.5px; color:var(--c-muted); line-height:1.5; }
.admin-link { font-size:12px; color:var(--c-blue); }
html[data-theme=dark] .admin-link { color:var(--c-head); }
@media (max-width: 760px) {
  /* ฟอร์มแก้/เพิ่ม ถูกย้ายมาอยู่ใน .map-wrap ด้วย JS (dockPanels) → bottom sheet บนแผนที่ */
  .map-wrap > .admin-editor, .map-wrap > .admin-add-form {
    position:absolute; left:8px; right:8px; bottom:8px; z-index:31; max-height:62vh; overflow-y:auto;
    box-shadow:0 8px 30px rgba(0,0,0,.3);
  }
}

/* D0 pre-ship: มือถือ — แถบบอกวิธีลากกรอบเคยทับปุ่ม ☰ รายการจุด · แผงเตี้ยไปตอนแนบภาพ */
@media (max-width: 760px) {
  #fb-shot-hint { top:56px; max-width:calc(100% - 24px); text-align:center; }
  .admin-panel.open { height:62vh; }
}

/* D2 — การ์ดสรุปเลือกหลายแปลง (5 ก.ย. 69) */
.msel-warn {
  background:#fdf1e0; border-left:3px solid #E08F24; color:#7a4d00;
  padding:7px 9px; border-radius:6px; font-size:11.5px; line-height:1.5; margin:8px 0;
}
.msel-list { margin:6px 0 8px; }
.msel-list summary { cursor:pointer; font-size:12px; color:var(--c-muted); padding:4px 0; }
.msel-row { display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:3px 5px; border-radius:4px; }
.msel-row b { white-space:nowrap; }
.msel-row.est { background:#fdf1e0; color:#7a4d00; }
html[data-theme=dark] .msel-warn, html[data-theme=dark] .msel-row.est { background:#3a2f1c; color:#f0c479; }

/* 7 ตัวเลือก basemap (5 ก.ย. 69) — มือถือบีบปุ่มให้พอดี 2 แถว */
@media (max-width: 760px) {
  .basemap-switch { right:14px; bottom:16px; }
  .bm-list { max-height:52vh; }
}

/* E3 T1 — MapLibre popup (สถานี/ถนน) ไม่มี CSS มาก่อนเลย ตอนธีมมืดเลยเป็นตัวหนังสือขาวบนพื้นขาวของ MapLibre เอง
   ใช้ .card เป็นต้นแบบ (มุมโค้ง+เงาเดียวกัน) แยกสี light/dark ให้ชัด และทำติ่ง popup ให้สีตรงกับพื้นหลังเสมอ */
.maplibregl-popup-content {
  background: var(--c-white); color: var(--c-charcoal);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.18);
  padding: 10px 12px; font-family: var(--font-body);
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--c-white); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--c-white); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--c-white); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--c-white); }
html[data-theme=dark] .maplibregl-popup-content {
  background: var(--c-white); color: var(--c-charcoal);
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
html[data-theme=dark] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--c-white); }
html[data-theme=dark] .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--c-white); }
html[data-theme=dark] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--c-white); }
html[data-theme=dark] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--c-white); }

/* เนื้อที่ที่คำนวณจากรูปแปลง (ต้นทางไม่มีตัวเลข) — ส้มเหมือนกติกาเดิมของโปรเจกต์ ไม่ปนกับเลขทางการ */
.kv.est b { color: #E08F24; }