/* IITH Mess — registration screen
   Palette: "Sunrise IITH" — same family as IITH Sanchari (crest red-orange + gold).
   Mess A reads in the ox gradient, Mess B in the gold gradient — same convention
   Sanchari uses for its two outstation routes. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
.hide{display:none !important}

:root{
  --stage:#fdf1e6; --paper:#ffffff; --paper2:#fbe9db; --paper3:#f5dcb8;
  --ink:#241d1a; --m2:#8c8078; --ox:#e8491f; --ox2:#c93c17; --gold:#f2a71b; --goldt:#d98f12;
  --pline:rgba(120,90,70,.14); --sh:rgba(180,90,40,.18); --live:#1f8a4c; --full:#c1272d;
  --r-card:20px; --r-btn:999px;
  --grad-ox: linear-gradient(160deg,#ff8a3d 0%,#f0501c 42%,#c02a12 100%);
  --grad-gold: linear-gradient(160deg,#ffd873 0%,#f2a71b 45%,#c67908 100%);
}

body{
  font-family:ui-rounded,"SF Pro Rounded","Segoe UI Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--stage); color:var(--ink);
  min-height:100dvh; min-height:100vh;
}

.app{max-width:460px;margin:0 auto;min-height:100dvh;min-height:100vh;display:flex;flex-direction:column}
svg{display:block}

/* ---- appbar ---- */
.appbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px 4px;background:var(--stage)}
.appbar .brandblock{min-width:0;display:flex;align-items:center;gap:10px}
.appbar .applogo{width:38px;height:38px;border-radius:11px;flex-shrink:0;background:var(--grad-ox);
  display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 10px -5px var(--sh)}
.appbar .applogo svg{width:19px;height:19px}
.appbar .brand{font-size:19px;font-weight:800;letter-spacing:-.01em}
.appbar .brand .hl{color:var(--ox)}
.appbar .brand small{display:block;font-size:10.5px;font-weight:700;color:var(--m2);letter-spacing:.02em;margin-top:-1px}
.iconbtn{width:40px;height:40px;border-radius:50%;background:var(--paper);border:1px solid var(--pline);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;
  box-shadow:0 6px 14px -8px var(--sh);color:var(--ink)}
.iconbtn svg{width:17px;height:17px}
.who{font-size:11px;font-weight:700;color:var(--m2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

.scroll{flex:1;overflow-y:auto;padding:6px 16px 24px;-webkit-overflow-scrolling:touch}

/* ---- hero ---- */
.hero{position:relative;margin-top:6px;border-radius:var(--r-card);overflow:hidden;background:#fef8f1;
  min-height:112px;display:flex;align-items:center;box-shadow:0 14px 30px -20px var(--sh)}
.hero::after{content:"";position:absolute;right:-30px;top:-40px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe6ad,#f2a71b 55%,transparent 78%);opacity:.9}
.hero::before{content:"";position:absolute;right:20px;bottom:-46px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ff9a5c,#e8491f 60%,transparent 80%);opacity:.85}
.hero-txt{position:relative;z-index:2;padding:16px 18px;max-width:70%}
.hero-txt .hi{font-size:13px;color:var(--m2);font-weight:600}
.hero-txt .big{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-top:3px;color:var(--ink);line-height:1.22}
.hero-txt .big .hl{color:var(--ox)}
.hero-txt .sub{font-size:12px;color:var(--m2);font-weight:600;margin-top:6px;line-height:1.4}

/* ---- sign-in ---- */
.card{background:var(--paper);border:1px solid var(--pline);border-radius:var(--r-card);margin-top:14px;
  box-shadow:0 14px 30px -20px var(--sh);padding:18px 17px}
.card h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em}
.field{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.field span{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--m2)}
.field input{font:inherit;font-size:15px;font-weight:600;padding:12px 14px;border-radius:13px;
  border:1.5px solid var(--pline);background:var(--stage);color:var(--ink);outline:none;width:100%}
.field input:focus{border-color:var(--ox)}
.field input::placeholder{color:#b7a999;font-weight:500}

.btn{font:inherit;font-size:14.5px;font-weight:800;border:none;border-radius:var(--r-btn);cursor:pointer;
  padding:13px 20px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s ease,box-shadow .12s ease;min-height:46px;width:100%}
.btn:active{transform:scale(.98)}
.btn.grad{background:var(--grad-ox);color:#fff;box-shadow:0 10px 20px -10px var(--sh)}
.btn.gold{background:var(--grad-gold);color:#fff;box-shadow:0 10px 20px -10px var(--sh)}
.btn.outline{background:var(--paper);color:var(--ink);border:1.5px solid var(--pline)}
.btn.ghosttext{background:none;color:var(--ox);padding:8px 4px;width:auto;min-height:0;font-size:13px}
.btn:disabled{opacity:.55;pointer-events:none}
.btn.sm{padding:9px 15px;font-size:12.5px;min-height:38px;width:auto}

.divider-or{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--m2);font-size:11px;font-weight:700}
.divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--pline)}
.demo-fields{margin-top:2px}
.hint{font-size:11.5px;color:var(--m2);font-weight:600;line-height:1.5;margin-top:12px;text-align:center}
.hint b{color:var(--ink)}

/* ---- status row ---- */
.statusrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.livepill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--live);
  background:rgba(31,138,76,.12);border-radius:var(--r-btn);padding:7px 12px}
.livepill i{width:6px;height:6px;border-radius:50%;background:var(--live);display:block;animation:bl 1.4s infinite}
.closerel{font-size:11.5px;font-weight:700;color:var(--m2)}
.closerel b{color:var(--ox)}

/* ---- closed state ---- */
.closedbox{text-align:center;margin-top:26px;padding:8px 4px}
.closedbox .badge-lg{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;
  justify-content:center;background:var(--paper2);color:var(--ox)}
.closedbox .badge-lg svg{width:28px;height:28px}
.closedbox h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0}
.closedbox p{font-size:13px;color:var(--m2);font-weight:600;margin-top:8px;line-height:1.5;padding:0 10px}
.closedbox .rel{display:inline-block;margin-top:14px;font-size:15px;font-weight:800;color:var(--ox);
  background:var(--paper2);padding:8px 18px;border-radius:var(--r-btn)}

/* ---- section label ---- */
.sect{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--ox);margin:22px 2px 9px}

/* ---- mess stub cards ---- */
.mcards{display:flex;flex-direction:column;gap:13px}
.mcard{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:0 16px 32px -18px var(--sh)}
.mcard .stub{display:flex;position:relative;background:var(--grad-ox)}
.mcard[data-mess="B"] .stub{background:var(--grad-gold)}
.mcard .stub::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 12% -15%,rgba(255,255,255,.4),transparent 55%)}
.mcard .stub>*{position:relative;z-index:1}
.m-main{flex:1;text-align:left;background:none;border:none;padding:18px 16px;cursor:pointer;font:inherit;color:inherit;min-width:0}
.m-name{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.01em}
.m-tag{font-size:12px;color:rgba(255,255,255,.82);font-weight:700;margin-top:3px}
.m-blurb{font-size:12px;color:rgba(255,255,255,.72);font-weight:600;margin-top:8px;line-height:1.4;max-width:220px}
.m-expand{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ox);font-weight:800;font-size:12.5px;
  padding:9px 15px;border-radius:var(--r-btn);margin-top:13px}
.mcard[data-mess="B"] .m-expand{color:var(--goldt)}
.m-expand svg{width:12px;height:12px;transition:transform .28s}
.mcard.open .m-expand svg{transform:rotate(180deg)}
.m-vp{width:0;border-left:2px dashed rgba(255,255,255,.55);position:relative;margin:16px 0;flex-shrink:0}
.mcard[data-mess="B"] .m-vp{border-left-color:rgba(36,29,26,.3)}
.m-vp::before,.m-vp::after{content:"";position:absolute;left:-8px;width:16px;height:16px;border-radius:50%;background:var(--stage)}
.m-vp::before{top:-24px}.m-vp::after{bottom:-24px}
.m-stub{width:100px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:16px 10px;text-align:center}
.m-stub .n{font-size:26px;font-weight:900;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.mcard[data-mess="B"] .m-stub .n{color:var(--ink)}
.m-stub .l{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:4px}
.mcard[data-mess="B"] .m-stub .l{color:rgba(36,29,26,.65)}
.m-stub.full .n{font-size:14px}

.m-detail{max-height:0;overflow:hidden;transition:max-height .34s ease}
.mcard.open .m-detail{max-height:600px}
.m-detail-in{background:var(--paper);border-top:1px solid var(--pline);padding:14px 15px 15px}

/* ---- hall rows ---- */
.hrow{display:flex;align-items:center;gap:12px;padding:12px 4px;border-top:1px solid var(--pline)}
.hrow:first-child{border-top:none}
.hrow .hbadge{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--paper2);color:var(--ox);font-weight:800;font-size:13px}
.mcard[data-mess="B"] .hbadge{color:var(--goldt)}
.hrow .hinfo{flex:1;min-width:0}
.hrow .hname{font-size:13.5px;font-weight:800;color:var(--ink);line-height:1.25}
.hrow .hmeter{margin-top:7px;display:flex;align-items:center;gap:8px}
.hrow .track{flex:1;height:6px;border-radius:99px;background:var(--paper3);overflow:hidden}
.hrow .fill{height:100%;border-radius:99px;background:var(--live);transition:width .6s cubic-bezier(.22,1,.36,1)}
.hrow .fill.mid{background:var(--gold)}
.hrow .fill.high{background:var(--ox)}
.hrow .fill.full{background:var(--full)}
.hrow .hleft{font-size:10.5px;font-weight:700;color:var(--m2);white-space:nowrap}
.hrow .hbtn{flex-shrink:0}

.regbtn{font:inherit;font-size:12px;font-weight:800;border:none;border-radius:var(--r-btn);cursor:pointer;
  padding:9px 15px;background:var(--grad-ox);color:#fff;transition:background .18s,transform .12s;white-space:nowrap;min-width:84px}
.mcard[data-mess="B"] .regbtn{background:var(--grad-gold)}
.regbtn:active{transform:scale(.96)}
.regbtn.confirming{background:var(--live)}
.regbtn.full{background:var(--paper3);color:var(--m2);cursor:default}
.regbtn.busy{opacity:.7}

/* ---- pass / ticket ---- */
.pass{background:var(--paper);border:1px solid var(--pline);border-radius:22px;overflow:hidden;position:relative;
  margin-top:16px;box-shadow:0 20px 44px -22px var(--sh)}
.pass-band{background:var(--grad-ox);color:#fff;padding:18px 20px 17px;position:relative}
.pass[data-mess="B"] .pass-band{background:var(--grad-gold)}
.pass-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 10% -15%,rgba(255,255,255,.35),transparent 55%)}
.pass-band-in{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pass-route{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.pass-bp{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.85;text-align:right;line-height:1.4;white-space:nowrap}

.pass-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;padding:20px 20px 6px}
.pm-cell{display:flex;gap:10px;align-items:flex-start;min-width:0}
.pm-icon{width:40px;height:40px;border-radius:13px;background:var(--paper2);color:var(--ox);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pass[data-mess="B"] .pm-icon{color:var(--goldt)}
.pm-icon svg{width:19px;height:19px}
.pm-lbl{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--m2)}
.pm-val{font-size:14px;font-weight:700;color:var(--ink);margin-top:3px}

.pass-perf{border-top:2px dashed var(--pline);position:relative;margin:14px 16px 0}
.pass-perf::before,.pass-perf::after{content:"";position:absolute;top:-10px;width:18px;height:18px;border-radius:50%;background:var(--stage)}
.pass-perf::before{left:-25px}.pass-perf::after{right:-25px}
.pass-stub{display:flex;justify-content:space-between;align-items:center;padding:13px 20px 18px}
.pass-serial{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--m2)}
.pass-valid{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--live)}
.pass-valid i{width:7px;height:7px;border-radius:50%;background:var(--live);display:block;box-shadow:0 0 0 3px rgba(31,138,76,.18)}

.pass-note{margin:14px 2px 0;background:var(--paper2);border-radius:14px;padding:13px 15px;font-size:11.5px;line-height:1.55;color:var(--m2);text-align:center}
.pass-actions{display:flex;gap:9px;margin-top:14px}
.pass-actions .btn{flex:1}

/* ---- footer ---- */
.footer{text-align:center;margin-top:28px;padding-top:6px}
.footer a{font-size:11.5px;font-weight:700;color:var(--m2);text-decoration:underline;text-underline-offset:2px}
.footer-op{font-size:11px;font-weight:600;color:var(--m2);margin-top:8px;line-height:1.5;padding:0 16px}

/* ---- toast ---- */
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(92vw,420px)}
.toast{background:var(--ink);color:#fff;border-radius:var(--r-btn);padding:11px 20px;font-weight:700;font-size:13px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.4);display:flex;align-items:center;gap:8px;justify-content:center;
  animation:rise .28s cubic-bezier(.22,1,.36,1)}
.toast.bad{background:var(--full)}
.toast.good{background:var(--live)}
.toast svg{width:15px;height:15px;flex-shrink:0}

/* ---- confetti ---- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:900;overflow:hidden}
.confetti i{position:absolute;width:8px;height:13px;top:-20px;border-radius:2px;animation:fall linear forwards}

@keyframes bl{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fall{to{transform:translateY(105vh) rotate(640deg);opacity:.15}}
@media (prefers-reduced-motion:reduce){
  .livepill i,.pass-valid i{animation:none}
  .confetti{display:none}
}