/* หลังบ้าน — ตาม DESIGN.md v2 (plum · IBM Plex Sans Thai Looped · radius 20/14 · เงาเดียว · ไอคอน Lucide) */
:root {
  /* v2: ธีมเดียวกับหน้าบ้าน (DESIGN.md v2 — plum + ชมพู-ส้ม) */
  --bg: #15121F; --surface: #1E1A2B; --surface-2: #2A2439; --line: rgba(255,255,255,.12);
  --text: #F4F1FA; --muted: #B9B2CC; --accent: #FF7AB6; --on-accent: #1A1025;
  --s3: #FF6B9A; --s2: #FFB36B; --s1: #FFD86B; --s0: #5FE3B5;
  --mix: 14%;
  --shadow: 0 20px 40px -12px rgba(0,0,0,.55);
  --r-card: 20px; --r-in: 14px;
  --font: "IBM Plex Sans Thai Looped", "Noto Sans Thai Looped", "IBM Plex Sans Thai", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--font);
  min-height: 100dvh;
}
[hidden] { display: none !important; }
h1, h2 { line-height: 1.25; margin: 0; font-weight: 600; }
h1 { font-size: 25px; }
h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; }
p { margin: 0; }
a { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num { font-variant-numeric: tabular-nums; }
.foot { text-align: center; padding: 8px 0 32px; }

/* ไอคอน Lucide ผ่าน CSS mask → สีตามตัวหนังสือ */
.i {
  display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.i-lg { width: 28px; height: 28px; }
.i-lock { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/lock.svg"); }
.i-log-out { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/log-out.svg"); }
.i-external-link { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/external-link.svg"); }
.i-activity { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/activity.svg"); }
.i-refresh-cw { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/refresh-cw.svg"); }
.i-megaphone { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/megaphone.svg"); }
.i-route { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/route.svg"); }
.i-map-pin { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/map-pin.svg"); }
.i-trash-2 { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/trash-2.svg"); }
.i-arrow-up { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/arrow-up.svg"); }
.i-arrow-down { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/arrow-down.svg"); }
.i-plus { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/plus.svg"); }
.i-search { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/search.svg"); }
.i-save { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/save.svg"); }
.i-x { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/x.svg"); }
.i-info { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/info.svg"); }
.i-triangle-alert { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/triangle-alert.svg"); }
.i-octagon-alert { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/octagon-alert.svg"); }
.i-circle-check { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/circle-check.svg"); }
.i-circle-x { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/circle-x.svg"); }
.i-loader-circle { --i: url("https://cdn.jsdelivr.net/npm/lucide-static@latest/icons/loader-circle.svg"); }

/* การ์ด */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px; min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.stack { display: grid; gap: 16px; margin-top: 16px; }

/* ปุ่ม */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: var(--r-in);
  font: 600 16px/1 var(--font); cursor: pointer; text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-primary { background: linear-gradient(90deg,#FF7AB6,#FF9A4D); border-color: transparent; color: var(--on-accent); border-radius: 999px; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: 14px; }
.btn-icon { width: 44px; padding: 0; }
.btn-block { width: 100%; }
.btn-danger { color: var(--s3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ช่องกรอก */
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.label { font-weight: 500; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
input:not([type=checkbox]):not([type=radio]), textarea {
  width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-in);
  font: 400 16px/1.4 var(--font);
}
textarea { resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
.input-row { display: flex; gap: 8px; }
.grid2, .grid3 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .grid3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.form-error { color: var(--s3); font-size: 14px; }

/* สวิตช์ */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.switch-row > span { display: grid; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: 52px; height: 32px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px;
  background: var(--muted); transition: transform 160ms ease-out;
}
.switch:checked { background: var(--accent); border-color: var(--accent); }
.switch:checked::after { transform: translateX(20px); background: var(--on-accent); }

/* ชิปตัวเลือก (segmented) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r-in);
  background: var(--surface-2); border: 1.5px solid transparent; font-weight: 500;
}
.seg input:checked + span { border-color: var(--accent); color: var(--accent); }
.seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* แถบประกาศ (ตัวอย่าง) — พื้นจาง + ตัวหนังสือสีสถานะ */
.banner {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-in);
  border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere;
}
.banner[data-level="info"] { color: var(--accent); background: color-mix(in srgb, var(--accent) var(--mix), var(--surface)); }
.banner[data-level="warn"] { color: var(--s2); background: color-mix(in srgb, var(--s2) var(--mix), var(--surface)); }
.banner[data-level="danger"] { color: var(--s3); background: color-mix(in srgb, var(--s3) var(--mix), var(--surface)); }
.banner.off { opacity: .55; }
.banner .i { margin-top: 3px; }

/* สถานะแหล่งข้อมูล */
.src-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
@media (min-width: 640px) { .src-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.src {
  border: 1px solid var(--line); border-radius: var(--r-in); padding: 12px; min-width: 0;
  display: grid; gap: 4px; background: var(--surface-2);
}
.src-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.src-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.src-ms { margin-left: auto; white-space: nowrap; }
.src-note { overflow-wrap: anywhere; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 999px; border: 2px solid currentColor; }
.dot.ok { color: var(--s0); background: currentColor; }
.dot.fail { color: var(--s3); background: currentColor; }
.dot.wait { color: var(--muted); background: transparent; }
.src.fail .src-state { color: var(--s3); }
.src.ok .src-state { color: var(--s0); }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }

/* รายการ */
.list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--r-in); background: var(--surface-2);
}
.row-main { flex: 1; min-width: 0; display: grid; }
.row-title { font-weight: 600; overflow-wrap: anywhere; }
.row-sub { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.row-actions { display: flex; gap: 4px; flex: none; }
.row.expired { opacity: .5; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }
.badge .dot { width: 8px; height: 8px; }
.badge.blocked { color: var(--s3); }
.badge.blocked .dot { background: currentColor; }
.badge.caution { color: var(--s2); }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* เพิ่มเส้นทาง */
.add { margin-top: 12px; }
.add > summary { list-style: none; width: 100%; }
.add > summary::-webkit-details-marker { display: none; }
.add[open] > summary { border-color: var(--accent); color: var(--accent); }
.place { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-in); min-width: 0; }
.search { position: relative; display: block; }
.search .i { position: absolute; left: 12px; top: 12px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 40px !important; }
.results { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-in); background: var(--surface); display: grid; gap: 2px; }
.results button {
  width: 100%; text-align: left; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: 400 15px/1.4 var(--font); cursor: pointer;
}
.results button:hover, .results button:focus-visible { background: var(--surface-2); }
.results small { color: var(--muted); display: block; }

/* แผนที่ */
.map { height: 320px; margin-top: 12px; border-radius: var(--r-in); border: 1px solid var(--line); overflow: hidden; background: var(--surface-2); }
.leaflet-container { font: 400 14px/1.4 var(--font); }

/* ล็อกอิน */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; display: grid; gap: 16px; padding: 24px; }
.login-head { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.login-head h1 { color: var(--text); }
.link-quiet { color: var(--muted); font-size: 14px; text-align: center; }

/* แถบบน */
.topbar {
  position: sticky; top: 0; z-index: 1000; background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner { max-width: 760px; margin: 0 auto; padding: 6px 16px; display: flex; align-items: center; gap: 8px; }
.brand { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-actions { margin-left: auto; display: flex; gap: 4px; flex: none; }
@media (max-width: 420px) { .brand .muted { display: none; } }
@media (max-width: 360px) { .topbar-actions .btn span:not(.i) { display: none; } .topbar-actions .btn { width: 44px; padding: 0; } }

.wrap { max-width: 760px; margin: 0 auto; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }

/* แจ้งเตือนลอย — เงาเดียวของระบบ */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 2000;
  transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content;
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-in);
  box-shadow: var(--shadow); padding: 12px 16px; display: flex; gap: 8px; align-items: center;
  animation: toast-in 180ms ease-out;
}
.toast.ok .i { color: var(--s0); }
.toast.err { color: var(--s3); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.spin { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

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

.login-hero{display:block;width:calc(100% + 48px);margin:-24px -24px 0;height:132px;object-fit:cover;object-position:50% 62%;border-radius:16px 16px 0 0}

body { background: radial-gradient(1200px 600px at 80% -10%, #3A1F4D 0%, transparent 60%), var(--bg); background-attachment: fixed; }

/* ล็อกอินด้วย Google (แสดงเมื่อตั้ง GOOGLE_CLIENT_ID แล้ว) */
.gsi { display: grid; gap: 14px; }
.gsi-btn { display: flex; justify-content: center; min-height: 44px; width: 100%; }
.login-divider { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--muted); font-size: 14px; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }