:root{
  --navy-900:#071634;
  --navy-800:#0b2249;
  --blue-700:#0e3a7a;
  --blue-500:#1565c9;
  --teal-400:#22b8c8;
  --accent:#ff5a4e;
  --ink:#0b1730;
  --muted:#5b6b8a;
  --line:#e6ebf5;
  --bg:#f4f7fc;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Noto Sans Thai','Inter',sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
}
a{color:inherit;}
.wrap{max-width:640px;margin:0 auto;padding:48px 24px;}

.topnav{max-width:640px;margin:0 auto;padding:20px 24px 0;}
.topnav a{font-size:14px;font-weight:600;color:var(--blue-700);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}

.panel{
  background:linear-gradient(160deg, var(--navy-900), var(--blue-700));
  color:#fff; border-radius:24px; padding:40px 32px;
  position:relative; overflow:hidden;
}
.panel::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at 85% 15%, black, transparent 65%);
}
.panel-inner{position:relative; z-index:1;}

#event-name{font-size:clamp(20px,3vw,26px); font-weight:800; margin:0 0 4px; text-align:center;}
#event-when{text-align:center; color:#b9c8e6; font-size:14px; margin:0 0 28px;}

h2.panel-title{font-size:clamp(20px,3vw,24px); font-weight:800; margin:0 0 8px; text-align:center;}
p.panel-sub{text-align:center; color:#c9d7f2; margin:0 0 28px; font-size:14.5px;}

form{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px; padding:28px;
}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1/-1;}
label{font-size:13px; font-weight:600; color:#dbe6f8;}
input{
  background:rgba(255,255,255,.94);
  border:1px solid transparent;
  border-radius:10px; padding:12px 14px; font-size:14.5px;
  font-family:inherit; color:var(--ink);
  outline:none;
}
input:focus{border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(34,184,200,.25);}
.submit-row{grid-column:1/-1; display:flex; justify-content:center; margin-top:6px;}
.privacy-note{grid-column:1/-1; font-size:12px; color:#aebede; text-align:center; margin-top:-4px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,var(--accent),#ff8563);
  color:#fff; font-weight:700; font-size:16px;
  padding:15px 34px; border-radius:12px; border:none; cursor:pointer;
  box-shadow:0 10px 24px rgba(255,90,78,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  text-decoration:none; width:100%;
}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.7; cursor:not-allowed; transform:none;}

.msg-box{
  grid-column:1/-1; text-align:center;
  border-radius:12px; padding:14px; font-weight:600; font-size:14px;
  display:none;
}
.msg-box.err{background:rgba(255,90,78,.15); border:1px solid rgba(255,90,78,.4);}

.state-card{text-align:center;}
.state-card .icon{font-size:44px; margin-bottom:12px;}
.state-card h2{font-size:22px; font-weight:800; margin:0 0 10px;}
.state-card p{color:#c9d7f2; font-size:14.5px; margin:0 0 20px;}

.spinner{
  width:32px;height:32px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  margin:0 auto 16px; animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

#resend-note{font-size:13px; color:#b9c8e6; margin-top:12px; min-height:18px;}

@media (max-width:520px){
  form{grid-template-columns:1fr;}
}