/* ---------- ฟอนต์ (โฮสต์เอง) ----------
   เดิมดึงจาก fonts.googleapis.com ทำให้ต้องต่อโดเมนนอกเพิ่ม 2 แห่ง (DNS+TLS ทั้งคู่)
   และไฟล์ CSS ของ Google หมดอายุแคชทุกวัน = เสียเวลาซ้ำทุกเช้า (วัดได้ ~216ms)
   ตอนนี้เสิร์ฟจากโดเมนเดียวกับแอปที่เชื่อมต่ออยู่แล้ว
   ทั้งสองไฟล์เป็น variable font (ไฟล์เดียวครอบทุกน้ำหนัก) และเป็นสัญญาอนุญาต SIL OFL
   ที่อนุญาตให้โฮสต์เองได้ — Inter (rsms.me/inter) / Noto Sans Thai (Google Fonts) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400 700;   /* ไม่มีน้ำหนัก 800 — ตัวหนาสุดของไทยคือ 700 (เหมือนเดิมก่อนย้ายมาโฮสต์เอง) */
  font-display: swap;
  src: url('/fonts/noto-sans-thai.woff2') format('woff2');
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

:root {
  /* น้ำเงินสดใส (electric blue) เป็นแอคเซนต์หลัก — โทน + ฟอนต์เดียวกับดีไซน์อ้างอิง */
  --accent: #2563eb; --accent-dark: #1d4ed8; --accent-ink: #1e40af;
  --accent-2: #3b74ff;                       /* ไว้ไล่เฉด */
  --accent-soft: #eef4ff; --accent-ring: rgba(37,99,235,.18);
  --accent-grad: linear-gradient(150deg,#3b74ff,#2563eb);
  /* นิวทรัลโทนเทาอมฟ้า */
  --ink: #131a2b; --ink-2: #3b4557; --muted: #8b95a7;
  --line: #e6eaf2; --bg: #eef1f7; --card: #ffffff;
  /* สีความหมาย */
  --ok: #16a34a; --okbg: #f0fdf7; --okline: #bbf7d0;
  --warn: #b45309; --warnbg: #fffbeb; --warnline: #fde68a;
  --danger: #ef4444;
  --shadow-sm: 0 4px 14px rgba(23,43,99,.06), 0 1px 3px rgba(23,43,99,.05);
  --shadow-md: 0 12px 30px rgba(23,43,99,.10);
  --shadow-brand: 0 12px 26px rgba(37,99,235,.30);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Inter', 'Noto Sans Thai', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg); color: var(--ink);
  min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  line-height: 1.5;
}
.wrap { width: 100%; max-width: 480px; margin: 0 auto; padding: 22px 16px 44px; display: flex; flex-direction: column; gap: 14px; }
.wrap.center { min-height: 100dvh; justify-content: center; }
body.with-nav .wrap { padding-bottom: 104px; }   /* เผื่อที่ให้แถบเมนูล่าง */

.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-sm); position: relative; }
.badge { width: 62px; height: 62px; border-radius: 20px; margin: 0 auto 14px; background: var(--accent-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: var(--shadow-brand); }
h1 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 14px; letter-spacing: -.005em; }
.muted { color: var(--muted); font-size: 14px; }

.clockwrap { padding: 18px; border-radius: 16px; background: var(--accent-soft); text-align: center; border: 1px solid #e2ebff; }
.clock { font-size: 40px; font-weight: 800; color: var(--accent-ink); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.date { color: var(--muted); margin-top: 4px; font-size: 14px; }

label { display: block; text-align: left; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: var(--ink-2); }
input, select, textarea { width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit; border: 1.5px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
input { text-align: center; letter-spacing: .5px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }

/* ⚠️ ปุ่มไม่บังคับ width:100% แล้ว — เดิมบังคับไว้ ทำให้ปุ่มเล็ก ๆ ที่เพิ่มทีหลัง
   (ปุ่มในหัวการ์ด/ในแถวแนวนอน) บานเต็มความกว้างจนดันของอื่นหลุดจอ มาแล้วหลายรอบ
   ปุ่มที่ต้องการเต็มบรรทัดให้ใส่คลาส .btn-block เอง */
button { width: auto; padding: 14px 16px; font-size: 16px; font-weight: 700; font-family: inherit; border: none; border-radius: 14px; background: var(--accent-grad); color: #fff; cursor: pointer; margin-top: 12px; transition: filter .15s, transform .05s, box-shadow .2s; box-shadow: var(--shadow-brand); letter-spacing: .01em; }
.btn-block { width: 100%; }
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button.green { background: linear-gradient(150deg,#22c55e,#16a34a); box-shadow: 0 12px 24px rgba(22,163,74,.28); }
button.red { background: linear-gradient(150deg,#f87171,#dc2626); box-shadow: 0 12px 24px rgba(220,38,38,.26); }
button.ghost { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: none; }
button.ghost:hover { background: var(--accent-soft); border-color: #cdddff; filter: none; }

.row { display: flex; gap: 10px; }
.row > button { margin-top: 0; }

.msg { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; text-align: center; display: none; font-weight: 600; }
.msg.show { display: block; }
.msg.err { background: var(--warnbg); color: var(--warn); border: 1px solid var(--warnline); }
.msg.ok { background: var(--okbg); color: var(--ok); border: 1px solid var(--okline); }

.hist { list-style: none; }
.hist li { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.hist li:last-child { border-bottom: none; }
.pill { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.pill.in { background: var(--okbg); color: var(--ok); }
.pill.out { background: var(--warnbg); color: var(--warn); }

a.link { color: var(--accent); text-decoration: none; font-weight: 700; font-size: 14px; }
a.link:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.link-dash { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; text-align: center; display: block; }
.link-dash:hover { color: var(--accent); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--muted); font-weight: 700; background: #f4f6fb; font-size: 13px; }

/* ============================================================
   คอมโพเนนต์สไตล์ดีไซน์อ้างอิง (การ์ด hero, หัวทักทาย, แถบเมนูล่าง)
   ============================================================ */

/* ---- หัวทักทาย + avatar ---- */
.topbar { display: flex; align-items: center; gap: 13px; padding: 4px 2px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  font-size: 21px; font-weight: 800; color: #fff; background: var(--accent-grad); box-shadow: var(--shadow-brand); }
.topbar-info { flex: 1 1 auto; min-width: 0; }
.topbar-info .hello { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.topbar-info h1 { font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-info .muted { font-size: 13px; }
.icon-btn { width: 44px; height: 44px; flex: 0 0 auto; margin: 0; padding: 0; border-radius: 50%;
  background: #fff; color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: 19px;
  display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--accent-soft); filter: none; }

/* ---- การ์ด hero น้ำเงิน ---- */
.hero { position: relative; border-radius: 26px; background: radial-gradient(150% 130% at 12% 0%, #4f83ff 0%, #2563eb 46%, #1b3fa8 100%);
  color: #fff; padding: 22px; box-shadow: var(--shadow-brand); overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.12); top: -84px; right: -54px; }
.hero::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.08); bottom: -60px; left: -34px; }
.hero > * { position: relative; z-index: 1; }
.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-pill { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.30); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.hero-date { margin-top: 16px; font-size: 13.5px; opacity: .92; font-weight: 500; }
.hero-title { color: #fff; font-size: 22px; font-weight: 800; margin: 3px 0 0; letter-spacing: -.01em; }
.hero-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.hero-actions button, .hero-actions .row { margin-top: 0; }
.hero-actions button { box-shadow: 0 10px 22px rgba(8,17,40,.20); }
.hero-thanks { text-align: center; padding: 8px 6px 2px; }
.hero-thanks .em { font-size: 46px; line-height: 1; }
.hero-thanks .t1 { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.55; margin-top: 10px; }
.hero-thanks .t2 { font-size: 15px; font-weight: 700; color: #d6fae4; margin-top: 8px; }
.hero-thanks .t3 { font-size: 13px; color: rgba(255,255,255,.82); margin-top: 12px; }

/* ---- แท็บแคปซูล ---- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; font-size: 14px; cursor: pointer; }
.tab.active { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }

/* ---- แถบเมนูล่าง (แท็บบาร์ 4 เมนู — ไอคอนบน ข้อความล่าง) ---- */
.bottomnav { position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-around; align-items: stretch;
  background: #fff; border-top: 1px solid var(--line);
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 22px rgba(23,43,99,.06); z-index: 40; }
.navitem { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 7px 4px; margin: 0; border-radius: 15px; text-decoration: none; color: var(--muted);
  font-weight: 600; font-size: 11.5px; background: none; border: none; box-shadow: none;
  -webkit-appearance: none; appearance: none; cursor: pointer; font-family: inherit; }
.navitem:hover { filter: none; }
.navitem .ic { font-size: 21px; line-height: 1; display: flex; align-items: center; justify-content: center; height: 24px; }
.navitem .ic svg { width: 23px; height: 23px; }
.navitem.active { color: var(--accent); background: var(--accent-soft); font-weight: 700; }

/* ============================================================
   ไอคอนเส้น (แทนอีโมจิ) + การเคลื่อนไหวลื่นไหล/ไว
   ============================================================ */
.ic-svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; vertical-align: -0.16em; }

html { scroll-behavior: smooth; }
body { -webkit-overflow-scrolling: touch; }

/* ทรานสิชันนุ่มและไว ให้ทุกอย่างลื่น */
.card, .btn, button, .navitem, .icon-btn, .radios label, .tab, .drow, .hact, .dcard, .msum-item, .act, a.link {
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease, border-color .18s ease, color .15s ease, filter .15s ease;
}
/* กดแล้วยุบนิดๆ = รู้สึกตอบสนองไว */
.btn:active, button:active, .act:active, .icon-btn:active, .navitem:active, .tab:active, .mini:active { transform: scale(.955); }

/* เนื้อหาเฟดขึ้นตอนโหลด (เร็วๆ ไม่หน่วง) */
@keyframes fadeUp { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
.wrap > * { animation: fadeUp .3s cubic-bezier(.2,.7,.3,1) both; }
.wrap > *:nth-child(1) { animation-delay: 0s; }
.wrap > *:nth-child(2) { animation-delay: .05s; }
.wrap > *:nth-child(3) { animation-delay: .1s; }
.wrap > *:nth-child(4) { animation-delay: .15s; }
.wrap > *:nth-child(5) { animation-delay: .2s; }
.wrap > *:nth-child(n+6) { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, .wrap > * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Splash ตอนเปิดแอป (เต็มจอสีฟ้า + โลโก้ขาว) =====
   ปรับความนานได้ที่ --splash-hold = ค้างให้เห็นโลโก้กี่วินาทีก่อนเริ่มจาง
   (เดิม .6s ซึ่งสั้นกว่าแอนิเมชันโลโก้เด้งเข้า .55s เลยเห็นแค่วูบเดียว)
   splash ขึ้นครั้งเดียวต่อการเปิดแอป 1 รอบ (จำด้วย sessionStorage) ไม่ได้ขึ้นทุกครั้งที่เปลี่ยนหน้า */
:root { --splash-hold: 1.5s; --splash-fade: .5s; }
.splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: radial-gradient(150% 130% at 12% 0%, #4f83ff 0%, #2563eb 46%, #1b3fa8 100%);
  animation: splashOut var(--splash-fade) ease var(--splash-hold) forwards;
}
.splash .logo { width: 94px; height: 94px; animation: splashPop .55s cubic-bezier(.2,.8,.3,1.5) both; }
.splash .logo svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 20px rgba(8,17,40,.35)); }
.splash .brand { color: #fff; font-weight: 800; font-size: 21px; letter-spacing: 1px; animation: splashPop .55s cubic-bezier(.2,.8,.3,1.5) .06s both; }
@keyframes splashPop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
.no-splash .splash { display: none; }
/* ปิดแอนิเมชันเด้งให้คนที่ตั้งค่าลดการเคลื่อนไหว แต่คงเวลาค้างเท่ากัน จะได้เห็นโลโก้นานพอ ๆ กัน */
@media (prefers-reduced-motion: reduce) { .splash .logo, .splash .brand { animation: none; } }