/* Green Mission Passport - shared by every page: tokens, header, buttons, forms, camera scanner, toast. */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
  --g-900: oklch(0.27 0.045 150);
  --g-800: oklch(0.33 0.055 155);
  --g-700: oklch(0.4 0.065 160);
  --g-600: oklch(0.5 0.072 163);
  --g-400: oklch(0.6 0.09 118);
  --g-100: oklch(0.925 0.04 118);
  --g-50: oklch(0.965 0.016 100);
  --olive: oklch(0.42 0.065 120);
  --gold: oklch(0.69 0.115 80);
  --gold-hi: oklch(0.86 0.1 88);
  --gold-deep: oklch(0.5 0.09 74);
  --gold-50: oklch(0.96 0.035 86);
  --paper: oklch(0.915 0.021 82);
  --ink: oklch(0.28 0.035 125);
  --muted: oklch(0.46 0.03 105);
  --on-dark: var(--ink);
  --on-dark-muted: var(--muted);
  --accent: var(--gold-deep);
  --line: oklch(0.885 0.025 86);
  --bg: oklch(0.978 0.01 88);
  --surface: oklch(1 0 0);
  --danger: oklch(0.52 0.17 28);
  --danger-50: oklch(0.96 0.03 28);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-sm: 0 1px 2px oklch(0.3 0.04 160 / .06), 0 6px 16px -8px oklch(0.3 0.05 160 / .18);
  --shadow-md: 0 2px 6px oklch(0.3 0.04 160 / .06), 0 18px 40px -18px oklch(0.28 0.06 160 / .34);
  --z-nav: 20; --z-toast: 50; --z-fx: 60;
  font-family: "Anuphan", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { margin: 0; overflow-x: hidden; }
body { min-width: 320px; background: var(--bg); -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; line-height: 1.3; }
p { line-height: 1.65; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 10px; }
.hidden { display: none !important; }

.app { width: min(100%, 480px); min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; }

.sky, .celebrate, .scan, .grand { --paper-bg: radial-gradient(70% 55% at 50% 42%, oklch(0.97 0.04 92 / .75), transparent 70%), radial-gradient(90% 70% at 0% 100%, oklch(0.9 0.045 118 / .45), transparent 60%), url("../kv/bg.webp") center / cover, var(--paper); }
.rise { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

/* Running head: the top line of a passport page. Flat paper, one hairline, no ornament. */
.top {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 58px; margin: 0 calc(var(--edge, 20px) * -1) 14px; padding: env(safe-area-inset-top) var(--edge, 20px) 0;
  text-align: left; background: oklch(0.982 0.012 88 / .95); border-bottom: 1px solid oklch(0.42 0.05 160 / .14);
}
.brand { display: flex; flex: none; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.brand img { flex: none; width: 30px; height: 30px; object-fit: contain; }
.brand-text { display: grid; white-space: nowrap; line-height: 1.15; }
.brand-text strong { color: var(--g-800); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.brand-text strong b { color: var(--gold-deep); font-weight: 700; }
.brand-text small { color: var(--muted); font-size: 11px; font-weight: 600; }
@media (max-width: 359px) { .brand-text small { display: none; } }
.chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 42%; }
.avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--g-800); background: linear-gradient(150deg, var(--gold-hi), var(--gold)); border-radius: 50%; box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / .5); font-size: 14px; font-weight: 800; }
button.chip { gap: 6px; padding: 6px 12px 6px 8px; color: var(--g-700); background: transparent; border: 1px solid oklch(0.42 0.05 160 / .22); border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; }
button.chip svg { width: 16px; height: 16px; }
.chip-name { overflow: hidden; color: var(--g-800); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- Buttons ---------- */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 20px; border: 0; border-radius: 18px; font-size: 17px; font-weight: 700; transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s; }
.btn svg { flex: none; width: 21px; height: 21px; }
.btn:active { transform: scale(.97); }
.btn-primary { color: white; background: var(--g-700); box-shadow: inset 0 1px 0 oklch(1 0 0 / .12), 0 10px 20px -14px oklch(0.3 0.08 160 / .8); }
.btn-gold { color: oklch(0.22 0.04 80); background: var(--gold); box-shadow: inset 0 1px 0 oklch(1 0 0 / .3), 0 10px 20px -14px oklch(0.45 0.1 80 / .8); }
.btn-ghost { color: var(--g-700); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost.on-dark { color: var(--g-700); background: oklch(1 0 0 / .5); box-shadow: inset 0 0 0 1.5px oklch(0.69 0.115 80 / .4); }
a.btn, a.chip { text-decoration: none; }
.btn[disabled] { opacity: .45; box-shadow: none; cursor: not-allowed; transform: none; }
.btn.shine::after { content: none; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 12px; font-size: 17px; font-weight: 800; }
.section-title small { color: var(--muted); font-size: 13px; font-weight: 600; }
.register { padding: 20px; }
.field { display: grid; gap: 8px; margin-bottom: 14px; font-size: 14.5px; font-weight: 700; }
.input { width: 100%; min-height: 54px; padding: 12px 16px; background: var(--g-50); border: 1.5px solid var(--line); border-radius: 16px; font-size: 16px; transition: border-color .2s, box-shadow .2s, background .2s; }
.input::placeholder { color: oklch(0.55 0.02 160); }
.input:focus { outline: none; background: var(--surface); border-color: var(--g-600); box-shadow: 0 0 0 4px oklch(0.48 0.08 158 / .14); }
.fine { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.link { padding: 8px; color: var(--muted); background: none; border: 0; font-size: 12.5px; text-decoration: underline; }
.form-error { min-height: 20px; margin: -4px 2px 10px; color: var(--danger); font-size: 13.5px; font-weight: 600; }
@keyframes spin { to { transform: rotate(1turn); } }
/* ---------- Scan ---------- */
.scan { --edge: max(20px, calc(50vw - 220px)); flex: 1; display: flex; flex-direction: column; margin-inline: calc(50% - 50vw); padding: 0 max(20px, calc(50vw - 220px)) calc(100px + env(safe-area-inset-bottom)); color: var(--ink); background: var(--paper-bg); }
.scan h1 { color: var(--g-800); }
.scan h1 { margin: 6px 0 4px; font-size: 24px; }
.scan > p { color: var(--on-dark-muted); font-size: 14.5px; }
.viewport { position: relative; flex: 1; min-height: 300px; max-height: 520px; margin-top: 18px; overflow: hidden; color: oklch(0.96 0.015 100); background: oklch(0.22 0.03 130); border-radius: 28px; box-shadow: 0 0 0 5px oklch(1 0 0 / .6), 0 0 0 6px oklch(0.69 0.115 80 / .5), var(--shadow-md); }
#camera { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.window { position: relative; width: min(66%, 250px); aspect-ratio: 1; box-shadow: 0 0 0 999px oklch(0.12 0.03 160 / .45); border-radius: 26px; animation: breathe 2.4s ease-in-out infinite alternate; }
.corner { position: absolute; width: 40px; height: 40px; border: 4px solid var(--gold-hi); }
.corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 26px; }
.corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 26px; }
.corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 26px; }
.corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 26px; }
.laser { position: absolute; left: 8%; right: 8%; top: 10%; height: 3px; background: linear-gradient(90deg, transparent, var(--gold-hi), transparent); border-radius: 999px; box-shadow: 0 0 14px var(--gold); animation: laser 2.2s ease-in-out infinite alternate; }
@keyframes laser { to { top: 88%; } }
@keyframes breathe { to { transform: scale(.95); } }
.cam-status { position: absolute; inset: auto 0 20px; display: flex; justify-content: center; }
.cam-status span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: oklch(0.12 0.03 160 / .7); border-radius: 999px; font-size: 13.5px; font-weight: 600; }
.spinner { width: 16px; height: 16px; border: 2.5px solid oklch(1 0 0 / .25); border-top-color: var(--gold-hi); border-radius: 50%; animation: spin .8s linear infinite; }
.fallback { display: grid; gap: 12px; margin-top: 14px; padding: 18px; color: var(--ink); background: var(--surface); border-radius: 22px; animation: rise .5s var(--ease) both; }
.fallback p { color: var(--muted); font-size: 14px; }
.fallback strong { display: block; color: var(--ink); font-size: 15.5px; }

/* ---------- Toast ---------- */
.toast { position: fixed; z-index: var(--z-toast); left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); width: min(calc(100% - 32px), 420px); padding: 14px 18px; color: oklch(0.97 0.015 95); text-align: center; background: var(--g-900); border-radius: 18px; box-shadow: var(--shadow-md); font-size: 14.5px; font-weight: 600; opacity: 0; visibility: hidden; transform: translate(-50%, 20px) scale(.96); transition: opacity .3s, transform .45s var(--ease), visibility 0s .45s; }
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s, transform .45s var(--ease); }

/* ---------- Organizer QR ---------- */
.org { padding: 0 20px 40px; }
.org .top-space { margin-bottom: 8px; }
.domain { display: grid; gap: 8px; margin-bottom: 18px; padding: 16px; }
.domain label { font-size: 14px; font-weight: 700; }
.domain p { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.qr-missing { padding: 16px 10px; color: var(--danger); font-size: 13px; font-weight: 600; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .flyer, .fx { display: none; }
}