@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap');

:root{
  --g900:#072A1C; --g800:#0B3D2E; --g700:#12784A; --g600:#16A34A;
  --g500:#22C55E; --g400:#4ADE80; --lime:#A3E635;
  --mint:#E3F8EC; --mint2:#D1F2DE; --ink:#0E2E1F; --muted:#5C7A68;
  --bg1:#EAF4EE; --bg2:#F4FBF6; --line:rgba(12,60,40,.10);
  --shadow:0 10px 30px rgba(10,60,35,.12);
  --shadow-lg:0 18px 44px rgba(10,70,40,.20);
  --glow:0 8px 24px rgba(34,197,94,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Noto Sans Thai',system-ui,sans-serif;
  color:var(--ink); line-height:1.6; -webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--bg2) 0%,var(--bg1) 100%);
  background-attachment:fixed;
}
a{color:var(--g600);text-decoration:none}
img{max-width:100%}

/* โครงมือถือ */
.app{max-width:460px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:96px}

/* HERO — ไล่เฉดสด + เงาวาว */
.hero{
  position:relative;overflow:hidden;color:#fff;padding:24px 20px 30px;
  border-radius:0 0 34px 34px;
  background:
    radial-gradient(120% 80% at 85% -10%, rgba(163,230,53,.45) 0%, rgba(163,230,53,0) 45%),
    radial-gradient(120% 90% at 10% 0%, #1FB866 0%, #12784A 45%, #0B3D2E 100%);
  box-shadow:0 14px 36px rgba(11,61,46,.35);
}
.hero::after{ /* แสงสะท้อนมันวาวด้านบน */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 28%);
}
.hero>*{position:relative;z-index:1}
.hero h1{font-size:30px;font-weight:800;margin:8px 0 4px;line-height:1.08;letter-spacing:-.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.18)}
.hero .sub{color:#DCF6E6;font-weight:300;font-size:13px}
.pad{padding:18px 18px}
.row{display:flex;gap:12px}
.muted{color:var(--muted)}
.center{text-align:center}

/* การ์ดกระจกเงาวาว */
.glass{
  background:linear-gradient(160deg, rgba(255,255,255,.28), rgba(255,255,255,.12));
  backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 8px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.5);
  border-radius:22px;
}
.card{
  background:linear-gradient(165deg,#ffffff 0%,#F4FBF6 100%);
  border:1px solid var(--line); border-radius:22px; padding:17px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card.green{
  background:linear-gradient(150deg,#22C55E 0%,#16A34A 55%,#12784A 100%);
  color:#fff;border:none;box-shadow:var(--glow);position:relative;overflow:hidden;
}
.card.green::after, .card.dark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 40%);
}
.card.dark{
  background:linear-gradient(150deg,#12784A 0%,#0B3D2E 100%);
  color:#fff;border:none;box-shadow:0 12px 30px rgba(11,61,46,.4);position:relative;overflow:hidden;
}
.card.mint{background:linear-gradient(160deg,#E9FBF0,#CFF3DD);border:none}

.eventcard{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;cursor:pointer}
.eventcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.eventcard .top{display:flex;justify-content:space-between;align-items:flex-start}

.tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 13px;border-radius:30px}
.tag.open{background:linear-gradient(120deg,#34D77F,#16A34A);color:#fff;box-shadow:0 4px 12px rgba(34,197,94,.4)}
.tag.closed{background:#FCE4E4;color:#b23b3b}
.tag.green{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}

.stat{flex:1;border-radius:20px;padding:15px;position:relative;overflow:hidden}
.stat .n{font-size:26px;font-weight:800;line-height:1;letter-spacing:-.5px}
.stat .l{font-size:12px;font-weight:400;opacity:.92;margin-top:3px}

.distbar{display:flex;align-items:center;gap:8px;color:#fff;border-radius:16px;padding:11px 15px;font-weight:600;font-size:13px;
  background:linear-gradient(120deg,#22C55E,#16A34A);box-shadow:0 6px 16px rgba(34,197,94,.35)}

/* แถบล่างกระจก */
.tabbar{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  width:min(420px,calc(100% - 28px));
  background:linear-gradient(150deg,rgba(11,61,46,.92),rgba(7,42,28,.92));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;padding:11px 24px;display:flex;justify-content:space-between;align-items:center;
  box-shadow:0 14px 36px rgba(7,42,28,.45);z-index:50}
.tabbar a{color:rgba(255,255,255,.6);text-align:center;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:color .15s}
.tabbar a.active{color:#fff}
.tabbar .fab{width:50px;height:50px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:23px;
  background:linear-gradient(145deg,#4ADE80,#16A34A);box-shadow:0 8px 20px rgba(34,197,94,.55), inset 0 1px 0 rgba(255,255,255,.5);
  margin-top:-28px;border:3px solid #fff}

/* ฟอร์ม */
label{display:block;font-size:13px;font-weight:600;margin:15px 0 6px;color:var(--ink)}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;padding:13px 14px;border:1.5px solid var(--line);
  border-radius:15px;background:#fff;color:var(--ink);outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--g500);box-shadow:0 0 0 4px rgba(34,197,94,.16)}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  color:#fff;border:none;border-radius:26px;padding:15px;font-size:16px;font-weight:700;
  font-family:inherit;cursor:pointer;margin-top:20px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#22C55E 0%,#16A34A 60%,#12784A 100%);
  box-shadow:0 10px 24px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s ease, box-shadow .15s ease}
.btn-primary::after{content:"";position:absolute;left:0;right:0;top:0;height:45%;border-radius:26px 26px 40px 40px;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(34,197,94,.55)}
.btn-primary:active{transform:translateY(0) scale(.99)}
.btn-ghost{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);
  border-radius:24px;padding:11px 18px;color:var(--ink);font-weight:600;cursor:pointer;font-family:inherit;transition:.15s;box-shadow:var(--shadow)}
.btn-ghost:hover{border-color:var(--g500);color:var(--g700)}

.iconbtn{width:38px;height:38px;border-radius:50%;
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(8px);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.15);transition:.15s}
.iconbtn:hover{background:rgba(255,255,255,.3)}

.alert{border-radius:16px;padding:13px 16px;margin:12px 0;font-size:14px;box-shadow:var(--shadow)}
.alert.ok{background:linear-gradient(120deg,#E3F8EC,#CFF3DD);color:#0E7A42}
.alert.err{background:linear-gradient(120deg,#FDE8E8,#FBD5D5);color:#b23b3b}
.alert ul{margin:4px 0;padding-left:18px}

.qrbox{background:#fff;border-radius:22px;padding:20px;text-align:center;box-shadow:inset 0 0 0 1px var(--line), var(--shadow)}
.bib{font-size:34px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(120deg,#16A34A,#0B3D2E);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.steps{display:flex;justify-content:space-between;margin:16px 0}
.steps .s{text-align:center;flex:1;font-size:11px;color:var(--muted);font-weight:500}
.steps .dot{width:36px;height:36px;border-radius:50%;background:#E3EAE5;color:var(--muted);
  display:flex;align-items:center;justify-content:center;margin:0 auto 5px;transition:.2s}
.steps .s.done .dot{background:linear-gradient(145deg,#4ADE80,#16A34A);color:#fff;box-shadow:0 6px 16px rgba(34,197,94,.45)}

/* หน้าติดตั้ง/ล็อกอิน */
.install-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(120% 80% at 80% 0%,rgba(163,230,53,.4),rgba(163,230,53,0) 45%),
             radial-gradient(120% 90% at 20% 0%,#1FB866,#0B3D2E)}
.install-card{background:linear-gradient(165deg,#fff,#F4FBF6);border-radius:26px;padding:30px;max-width:430px;width:100%;
  box-shadow:0 24px 60px rgba(7,42,28,.4)}
.install-card h1{margin:0 0 14px;font-size:23px;font-weight:800}
code{background:#E9F4EC;padding:2px 7px;border-radius:7px;font-size:13px;color:var(--g700)}