:root{
  --surface:#FFFFFF; --ink:#191919; --ink-muted:#5A5D61; --blue:#0965EC; --mint:#6CFBCE;
  --peach:#FFD8BE; --yellow:#FFFBB4; --ice:#F0F8FF; --coral:#FF5A6E; --purple:#963FE0; --link:#334AFF;
  --line:#E3E8EE; --ok:#0B7A55;
  --r-sm:4px; --r-md:16px; --r-lg:32px; --pill:9999px;
  --font:"Noto Sans", Arial, Helvetica, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative}
main{flex:1;padding:16px 16px 104px}

/* header */
.ev-head{display:flex;gap:14px;align-items:center;padding:16px 16px 4px}
.ev-head img{width:56px;height:auto;flex:none}
.ev-head h1{font-size:22px;line-height:1.2;margin:0;font-weight:700}
.ev-head .ev-meta{display:inline-block;margin-top:6px;background:var(--peach);border-radius:var(--pill);padding:2px 12px;font-size:13px;font-weight:600}
.ev-head .who{margin-left:auto;align-self:flex-start;background:var(--ice);border:0;border-radius:var(--pill);padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap}

h2{font-size:20px;line-height:1.25;margin:20px 0 8px;font-weight:700}
h2.blue{color:var(--blue)}
h3{font-size:16px;margin:16px 0 6px}
.muted{color:var(--ink-muted)}
.small{font-size:14px}
.tiny{font-size:12px}

/* inputs */
.field{display:block;margin:0 0 14px}
.field>span{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.field>span i{font-style:normal;font-weight:400;color:var(--ink-muted)}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;border:2px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;background:#fff;font-size:16px}
input:focus,select:focus,textarea:focus{border-color:var(--blue);outline:none}
.field.err input{border-color:var(--coral)}
.errmsg{color:#B3263A;font-size:13px;margin-top:4px}
.search{position:relative}
.search input{font-size:20px;padding:16px 16px 16px 48px;border-radius:var(--r-md);border:0;background:var(--ice)}
.search input:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--ink-muted)}
.search .clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:22px;padding:8px 12px;color:var(--ink-muted)}

/* buttons */
.btn{border:0;border-radius:var(--pill);padding:12px 20px;font-weight:700;font-size:16px;background:var(--ice);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{filter:brightness(.97)}
.btn.cta{background:var(--coral);color:var(--ink)}
.btn.primary{background:var(--blue);color:#fff}
.btn.mint{background:var(--mint)}
.btn.block{width:100%}
.btn.sm{padding:7px 14px;font-size:14px}
.btn.ghost{background:transparent;padding-left:8px;padding-right:8px;color:var(--link);font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.linkbtn{border:0;background:none;color:var(--link);font-weight:600;padding:0;text-decoration:underline}

/* panels */
.panel{border-radius:var(--r-lg);padding:24px;margin:16px 0}
.panel.mint{background:var(--mint)} .panel.peach{background:var(--peach)} .panel.yellow{background:var(--yellow)} .panel.ice{background:var(--ice)}
.panel.blue{background:var(--blue);color:#fff}
.panel h2{margin-top:0}

/* stats */
.stats{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
.stat{background:var(--ice);border-radius:var(--pill);padding:4px 12px;font-size:14px}
.stat b{font-weight:700}

/* check-in results */
.results{list-style:none;margin:12px 0 0;padding:0}
.res{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:transparent;border-radius:var(--r-md);padding:12px;margin:0 0 6px;transition:background .25s}
.res:hover{background:var(--ice)}
.res .nm{font-weight:700;font-size:17px;line-height:1.3}
.res .sub{font-size:14px;color:var(--ink-muted);line-height:1.35}
.res .tag{margin-left:auto;flex:none}
.res.in{background:var(--mint)}
.res.just{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.98)}50%{transform:scale(1.02)}100%{transform:scale(1)}}
.chip{display:inline-block;border-radius:var(--pill);padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap;background:var(--ice)}
.chip.in{background:var(--ink);color:var(--mint)}
.chip.go{background:var(--blue);color:#fff}
.chip.walk{background:var(--peach)}
.chip.tk{margin-top:6px;font-size:13px;padding:3px 10px}
.chip.tk39{background:var(--peach)} .chip.tk15{background:var(--yellow)} .chip.tkfree{background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .chip.tknone{background:#fff;color:#B3263A;box-shadow:inset 0 0 0 1px var(--line)}
.chip.p-high{background:var(--blue);color:#fff}
.chip.p-medium{background:var(--yellow)}
.chip.p-low{background:var(--ice)}
.chip.p-none{background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-muted)}

/* avatar */
.av{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:16px;background:var(--yellow);border:0;padding:0;overflow:hidden}
.av.lg{width:64px;height:64px;font-size:20px}
.av.c1{background:var(--yellow)} .av.c2{background:var(--peach)} .av.c3{background:var(--mint)} .av.c4{background:#CFE1FC}
.av.photo{background:linear-gradient(135deg,#cfe0f7,#9fbfee);color:#123}

/* host networking */
.toggle{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:15px;font-weight:600;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.sw{width:46px;height:28px;border-radius:var(--pill);background:#C9D2DC;position:relative;transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:transform .2s}
.toggle input:checked+.sw{background:var(--blue)}
.toggle input:checked+.sw::after{transform:translateX(18px)}
.toggle input:focus-visible+.sw{outline:3px solid var(--blue);outline-offset:2px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 0 6px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:0;border-radius:var(--pill);padding:8px 14px;background:var(--ice);font-weight:600;font-size:14px}
.tab[aria-pressed=true]{background:var(--ink);color:#fff}
.tab .n{opacity:.7;font-weight:400;margin-left:4px}
.cards{list-style:none;margin:8px 0 0;padding:0}
.card{background:var(--ice);border-radius:24px;padding:16px;margin-bottom:10px}
.card.away{background:#F6F7F9}
.card .top{display:flex;gap:12px;align-items:flex-start}
.card .nm{font-weight:700;font-size:17px;line-height:1.3}
.card .sub{font-size:14px;line-height:1.4}
.card .facts{font-size:13px;color:var(--ink-muted);margin-top:6px;line-height:1.5}
.card .links{display:flex;gap:14px;margin-top:6px;font-size:14px;font-weight:600}
.card .links a{text-decoration:none}
.card .links a:hover{text-decoration:underline}
.card .acts{display:flex;gap:8px;margin-top:12px;align-items:center;flex-wrap:wrap}
.sbtn{border:0;border-radius:var(--pill);padding:9px 14px;font-weight:700;font-size:14px;background:#fff;display:inline-flex;gap:6px;align-items:center}
.sbtn[aria-pressed=true].sl{background:var(--yellow)}
.sbtn[aria-pressed=true].mt{background:var(--mint)}
.prio{margin-left:auto;border:0;border-radius:var(--pill);padding:7px 12px;font-weight:700;font-size:13px}
.prio.p-high{background:var(--blue);color:#fff} .prio.p-medium{background:var(--yellow)} .prio.p-low{background:#fff} .prio.p-none{background:#fff;color:var(--ink-muted)}
.attr{font-size:12.5px;color:var(--ink-muted);margin-top:8px;line-height:1.5}
.attr .note{display:block;color:var(--ink);background:#fff;border-radius:12px;padding:6px 10px;margin-top:4px}
.here{font-size:12px;font-weight:700;color:var(--ok)}
.nothere{font-size:12px;font-weight:600;color:var(--ink-muted)}
.empty{text-align:center;padding:32px 16px;color:var(--ink-muted)}

/* bottom nav */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(448px,calc(100% - 24px));background:var(--ice);border-radius:var(--pill);display:flex;padding:6px;gap:4px;z-index:20;box-shadow:0 0 0 1px rgba(9,101,236,.08)}
.nav button{flex:1;border:0;background:transparent;border-radius:var(--pill);padding:10px 6px;font-weight:700;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:2px}
.nav button svg{width:20px;height:20px}
.nav button[aria-current=page]{background:var(--blue);color:#fff}

/* sheet + modal */
.scrim{position:fixed;inset:0;background:rgba(25,25,25,.45);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:#fff;width:min(480px,100%);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));max-height:90vh;overflow:auto;animation:up .2s ease}
.scrim.center{align-items:center;padding:16px}
.scrim.center .sheet{border-radius:var(--r-lg)}
@keyframes up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet h2{margin-top:0}
.sheet .row{display:flex;gap:8px;margin-top:16px}
.sheet .row .btn{flex:1}
.opt{display:block;width:100%;text-align:left;border:0;border-radius:var(--r-md);padding:14px 16px;margin-bottom:6px;background:var(--ice);font-weight:700}
.opt[aria-pressed=true]{background:var(--ink);color:#fff}
.bigphoto{width:min(320px,80vw);height:min(320px,80vw);border-radius:var(--r-lg);display:grid;place-items:center;font-size:72px;font-weight:700;margin:0 auto}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));background:var(--ink);color:#fff;border-radius:var(--pill);padding:10px 10px 10px 18px;display:flex;gap:12px;align-items:center;z-index:50;font-size:14px;max-width:calc(100% - 24px);animation:up .2s ease}
.toast button{border:0;background:var(--mint);color:var(--ink);border-radius:var(--pill);padding:6px 14px;font-weight:700;font-size:14px}

/* qr */
.qrbox{background:#fff;border-radius:var(--r-lg);padding:20px;display:grid;place-items:center;margin:0 auto;width:max-content}
.qrbox img,.qrbox canvas{width:240px!important;height:240px!important}

/* walk-in form */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin:12px 0}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--blue)}
details.help{font-size:13px;margin-top:6px}
details.help summary{color:var(--link);cursor:pointer;font-weight:600}
details.help ol{margin:6px 0 0;padding-left:20px;line-height:1.6}

/* admin */
.subnav{display:flex;gap:6px;overflow-x:auto;margin:0 -16px 8px;padding:4px 16px;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-weight:700;padding:6px 8px;background:var(--ice)}
table.t td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.scrollx{overflow-x:auto;border-radius:12px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}
.kv dt{color:var(--ink-muted)} .kv dd{margin:0;font-weight:600}
.list{list-style:none;padding:0;margin:0}
.list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.issue{background:#fff;border-radius:16px;padding:12px 14px;margin:8px 0;font-size:14px}
.issue b{display:block}
.logo-up{display:flex;gap:14px;align-items:center}
.logo-up img{width:56px;height:auto;border-radius:8px;background:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.login-wrap{padding:32px 20px}
.login-wrap img{width:96px;display:block;margin:8px auto 16px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* desktop: admin work happens here */
@media (min-width:900px){
  .scrim{align-items:center;padding:24px}
  .sheet{border-radius:var(--r-lg);width:min(560px,100%)}
  body.wide .app{max-width:1120px}
  body.wide .ev-head{padding:24px 32px 8px}
  body.wide main.admin{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start;padding:16px 32px 120px}
  body.wide main.admin .subnav{flex-direction:column;position:sticky;top:16px;margin:8px 0 0;padding:0;overflow:visible}
  body.wide main.admin .subnav .tab{text-align:left;padding:10px 16px;font-size:15px}
  body.wide main.admin .abody>h2:first-child{margin-top:8px}
  body.wide table.t{font-size:14px}
  body.wide table.t td,body.wide table.t th{padding:8px 10px}
  body.wide .abody .panel{padding:28px 32px}
}
@media (max-width:899px){.wide-only{display:none}}

/* production additions */
.av img{width:100%;height:100%;object-fit:cover;display:block}
.bigphoto img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg)}
.loading{display:grid;place-items:center;min-height:60vh;color:var(--ink-muted)}
.copyrow{display:flex;gap:8px;align-items:center;background:var(--ice);border-radius:12px;padding:8px 10px;margin-top:8px}
.copyrow code{flex:1;font-size:12px;word-break:break-all}
.offline{position:fixed;top:0;left:0;right:0;background:var(--coral);color:var(--ink);text-align:center;font-weight:700;font-size:13px;padding:6px;z-index:60}
.qrbox svg{width:240px;height:240px;display:block}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}