/* ฟ้าไป — โทนไฟฟ้า: น้ำเงินไฟฟ้า กรมท่า เหลืองโวลต์ + มาสคอตน้องแบตโต้ */
:root {
  --surface: #F3F7FC; --surface-raised: #FFFFFF; --ink: #14213D; --ink-muted: #4C5A73; --line: #D5DDEA; --field-border: #6E7C99;
  --charge: #1F5EFF; --on-charge: #FFFFFF; --charge-soft: #E3EEFF; --charge-ink: #1543C2;
  --book: #14213D; --on-book: #FFFFFF; --book-soft: #FFF4C2; --book-ink: #14213D;
  --warn: #7A5100; --warn-soft: #FFF2D2; --danger: #B42318; --danger-soft: #FDECEA; --focus: #1F5EFF;
  --hero: #14213D; --on-hero: #FFFFFF; --on-hero-muted: #C9D4E5; --hero-accent: #FFD60A;
  --volt: #FFD60A; --mascot: #4FD3F5; --font-head: "Mitr", "IBM Plex Sans Thai", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --tap-min: 48px;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0B1220; --surface-raised: #152036; --ink: #EAF0FA; --ink-muted: #A8B5CC; --line: #2B3A57; --field-border: #7C8BA8;
    --charge: #6E9BFF; --on-charge: #071230; --charge-soft: #16264A; --charge-ink: #A9C3FF;
    --book: #FFD60A; --on-book: #14213D; --book-soft: #2E2A12; --book-ink: #FFE680;
    --warn: #F2C04E; --warn-soft: #2E2410; --danger: #FF8F85; --danger-soft: #3A1714; --focus: #6E9BFF;
    --hero: #EAF0FA; --on-hero: #0B1220; --on-hero-muted: #2B3A57; --hero-accent: #1F5EFF;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--surface); color: var(--ink); font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif; font-size: 16px; line-height: 26px; -webkit-text-size-adjust: 100%; }
button, input, select { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-muted); }
.small { font-size: 14px; line-height: 22px; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }
.view { display: flex; flex-direction: column; min-height: 100dvh; }
.content { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); padding-bottom: var(--space-6); }
.topbar { display: flex; align-items: center; gap: var(--space-1); min-height: 56px; padding: 0 var(--space-2); }
.topbar h1 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 600; }
.icon-btn { width: var(--tap-min); height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--radius-md); cursor: pointer; flex: none; color: var(--ink); }
.bottombar { position: sticky; bottom: 0; display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--surface-raised); border-top: 1px solid var(--line); z-index: 5; }

.brand h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.brand p { margin: 0; }

/* buttons */
.btn { min-height: var(--tap-min); padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--field-border); background: var(--surface-raised); color: var(--ink); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; text-decoration: none; text-align: center; }
.btn-lg { min-height: 56px; font-size: 18px; font-weight: 700; flex: 1; }
.btn-primary { background: var(--charge); border-color: var(--charge); color: var(--on-charge); }
.btn-book { background: var(--book); border-color: var(--book); color: var(--on-book); }
.btn-square { width: 56px; min-height: 56px; padding: 0; flex: none; }
.btn-text { border: 0; background: transparent; color: var(--charge-ink); padding: 0 var(--space-1); justify-content: flex-start; }
.btn[disabled] { opacity: .55; cursor: default; }

/* resume banner */
.hero-link { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 10px var(--space-4); background: var(--hero); color: var(--on-hero); border-radius: 16px; border: 0; text-align: left; cursor: pointer; width: 100%; }
.hero-link .t { display: block; font-weight: 600; }
.hero-link .s { display: block; font-size: 14px; line-height: 22px; color: var(--on-hero-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; min-height: var(--tap-min); border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--surface-raised); overflow: hidden; }
.chip button { min-height: var(--tap-min); border: 0; background: transparent; cursor: pointer; padding: 0 var(--space-3); font-weight: 600; }
.chip button + button { padding: 0 var(--space-3) 0 var(--space-1); color: var(--ink-muted); }

/* cards & fields */
.card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > label, .label { font-size: 14px; line-height: 22px; font-weight: 600; }
.input { width: 100%; min-height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--ink); font-size: 16px; }
.input-row { display: flex; gap: var(--space-2); }
.input-row .input { flex: 1; min-width: 0; }
.gps-btn { width: var(--tap-min); height: var(--tap-min); flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--charge-soft); border: 1px solid var(--charge); border-radius: var(--radius-md); cursor: pointer; color: var(--charge-ink); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.soc-head { display: flex; justify-content: space-between; align-items: baseline; }
.soc-val { font-size: 28px; line-height: 34px; font-weight: 700; color: var(--charge); }
input[type=range] { width: 100%; height: 32px; accent-color: var(--charge); }
.check { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap-min); }
.check input { width: 24px; height: 24px; accent-color: var(--charge); flex: none; }
details.more summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; color: var(--ink-muted); font-size: 14px; }
.results button { display: block; width: 100%; text-align: left; min-height: var(--tap-min); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border: 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 16px; line-height: 24px; }
.results p { margin: 0; padding: var(--space-2) var(--space-3); }
.stop-row { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.stop-row .input-row select { flex: none; width: 128px; min-height: var(--tap-min); border: 1px solid var(--field-border); border-radius: var(--radius-sm); background: var(--surface-raised); padding: 0 var(--space-2); }
.status { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.status.error { color: var(--danger); }
.banner { border-radius: var(--radius-md); padding: var(--space-3); font-size: 14px; line-height: 22px; font-weight: 600; }
.banner-warn { background: var(--warn-soft); color: var(--warn); }
.banner-danger { background: var(--danger-soft); color: var(--danger); }

/* plan */
.summary { background: var(--charge-soft); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.summary .eyebrow { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--charge-ink); }
.summary .arrive { font-size: 40px; line-height: 44px; font-weight: 700; }
.summary .facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.route { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: 6px 15px; text-align: left; background: var(--surface-raised); border: 1px solid var(--field-border); border-radius: var(--radius-md); cursor: pointer; }
.route .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--field-border); }
.route[aria-pressed=true] { background: var(--charge-soft); border: 2px solid var(--charge); padding: 5px 14px; }
.route[aria-pressed=true] .dot { border: 5px solid var(--charge); }
.route .n { display: block; font-weight: 600; line-height: 24px; }
.route .m { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-point { display: flex; gap: var(--space-3); align-items: center; min-height: var(--tap-min); }
.tl-point .what { flex: 1; }
.tl-point .when { font-weight: 600; }
.tl-dot { width: 24px; flex: none; display: flex; justify-content: center; color: var(--charge); }
.tl-dot i { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-muted); display: block; }
.tl-seg { display: flex; gap: var(--space-3); }
.tl-seg .rail { width: 24px; flex: none; display: flex; justify-content: center; }
.tl-seg .rail span { width: 3px; background: var(--charge); border-radius: 2px; }
.stop-card { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1) 0; padding: 14px var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: left; cursor: pointer; width: 100%; }
.stop-card .head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.stop-card .kicker { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink-muted); }
.stop-card .time { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--charge); }
.stop-card .name { font-size: 18px; line-height: 26px; font-weight: 600; }
.stop-card .soc { display: flex; gap: var(--space-2); align-items: center; }
.slot-chip { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--space-3); background: var(--book-soft); color: var(--book-ink); border-radius: var(--radius-md); font-weight: 600; }
.tag { display: inline-flex; align-self: flex-start; align-items: center; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--charge-soft); color: var(--charge-ink); font-size: 14px; line-height: 22px; font-weight: 600; }
.foot-note { font-size: 14px; line-height: 22px; color: var(--ink-muted); text-align: center; margin: 0; }

/* station */
.st-head { display: flex; flex-direction: column; gap: var(--space-1); }
.st-head h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.st-head .place { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.slot-box { background: var(--book-soft); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.slot-box .cap { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--book-ink); }
.slot-box .big { font-size: 36px; line-height: 44px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.slot-box .deadline { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--book-ink); }
.facts4 { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-1) var(--space-1) 0; }
.facts4 dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.facts4 dd { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
.ask { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ask-q { margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.section-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.alt { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.alt .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.alt-name { font-size: 16px; line-height: 24px; font-weight: 600; }
.alt-line { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.alt-line.strong { color: var(--ink); }
details.how { border-top: 1px solid var(--line); }
details.how summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--book-ink); }
.steps { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.steps li { display: flex; gap: 10px; }
.steps b { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--book-soft); color: var(--book-ink); font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }

/* resume */
.here { display: flex; gap: var(--space-3); align-items: center; }
.here .ic { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--charge-soft); color: var(--charge-ink); display: flex; align-items: center; justify-content: center; }
.stepper { display: flex; align-items: center; justify-content: space-between; }
.stepper button { width: 64px; height: 64px; border: 1px solid var(--field-border); background: var(--surface-raised); border-radius: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.stepper .val { font-size: 56px; line-height: 64px; font-weight: 700; color: var(--charge); }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.quick button { min-height: var(--tap-min); border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--surface-raised); font-weight: 600; cursor: pointer; }
.quick button[aria-pressed=true] { background: var(--charge-soft); border: 2px solid var(--charge); color: var(--charge-ink); }
.passed { color: var(--ink-muted); text-decoration: line-through; }
.divider { height: 1px; background: var(--line); }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--hero); color: var(--on-hero); font-size: 14px; line-height: 22px; padding: 10px var(--space-4); border-radius: var(--radius-md); z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.banner-ok { background: var(--charge-soft); color: var(--charge-ink); }
.banner-info { background: var(--book-soft); color: var(--book-ink); }
.slot-chip.slot-done { background: var(--charge-soft); color: var(--charge-ink); }
.alt .btn { flex: none; }
.details dl { margin: 0; display: flex; flex-direction: column; }
.details dl > div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-top: 1px solid var(--line); }
.details dl > div:first-child { border-top: 0; }
.details dt { color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.details dd { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; text-align: right; }
.hint { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ชาร์จเสร็จ / กำลังหัวชาร์จ */
.done-box, .kw-box { display: flex; flex-direction: column; gap: var(--space-3); }
.done-box .section-title, .kw-box .section-title { margin: 0; }
.done-box p, .kw-box p { margin: 0; }
.pct-input { position: relative; display: block; }
.pct-input .input { width: 100%; padding-right: 36px; font-size: 20px; font-weight: 700; }
.pct-input i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--ink-muted); font-weight: 600; }
.chip-btn { min-height: var(--tap-min); padding: 0 var(--space-3); border: 1px solid var(--field-border); border-radius: var(--radius-pill); background: var(--surface-raised); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.chip-btn[aria-pressed="true"] { background: var(--charge); border-color: var(--charge); color: var(--on-charge); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--book); text-decoration: underline; cursor: pointer; min-height: 0; }

/* ร้านใกล้สถานี / คูปอง */
.offers { display: flex; flex-direction: column; gap: var(--space-3); }
.offers .section-title { margin: 0; }
.offer { display: flex; flex-direction: column; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.offer:first-of-type { border-top: 0; padding-top: 0; }
.offer-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.offer-title { font-size: 18px; font-weight: 700; color: var(--charge); }
.coupon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border: 2px dashed var(--charge); border-radius: 12px; }
.coupon .code { font-size: 28px; font-weight: 800; letter-spacing: 4px; }
.coupon.used { opacity: .5; border-color: var(--ink-muted); }
.privacy-link { display: block; text-align: center; margin: 16px 0 8px; color: var(--ink-muted); font-size: 14px; }

/* แจ้งปัญหา / ให้คะแนน */
.report-link { display: block; margin: 8px auto 0; color: var(--ink-muted); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--book); text-decoration: underline; cursor: pointer; }
.fb-sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.fb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.fb-panel { position: relative; width: 100%; max-width: 560px; background: var(--surface-raised); border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-height: 85vh; overflow: auto; }
.fb-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fb-head .btn-square { width: 44px; min-height: 44px; }
.rate-card { display: flex; flex-direction: column; gap: 10px; }


/* ฟ้าไป: หัวข้อฟอนต์ Mitr, ปุ่มเงาทึบ, มาสคอต */
h1, h2, h3, .section-title, .summary .arrive, .btn-lg, .brand-name, .st-head h2 { font-family: var(--font-head); font-weight: 500; }
.btn-primary.btn-lg { box-shadow: 0 4px 0 var(--charge-ink); }
.btn-book.btn-lg { box-shadow: 0 4px 0 #0A1222; }
.btn-primary:active, .btn-book:active { transform: translateY(2px); box-shadow: none; }
.brand-row { display: flex; align-items: flex-end; gap: 8px; }
.brand-row .mascot { flex: none; }
.brand-bubble { flex: 1; background: var(--surface-raised); border: 2px solid var(--ink); border-radius: 20px 20px 20px 6px; padding: 10px 14px; margin-bottom: 14px; }
.brand-bubble .brand-name { display: block; font-size: 22px; line-height: 30px; font-weight: 600; }
.mascot-inline { display: flex; align-items: center; gap: 12px; }
.mascot-inline .mascot { flex: none; }

/* หัวเว็บย่อย (ร้านค้า, ไอเดีย, ความเป็นส่วนตัว) */
.site-head { display: flex; align-items: center; gap: 10px; min-height: 56px; text-decoration: none; color: var(--ink); }
.site-head img { width: 40px; height: 40px; border-radius: 12px; background: var(--charge-soft); }
.site-head b { font-family: var(--font-head); font-weight: 600; font-size: 22px; letter-spacing: .2px; }
.site-head span { font-size: 14px; color: var(--ink-muted); }
.page > h1 { font-family: var(--font-head); font-weight: 500; }