/* ============================================================
   PH & AI Summer School 2026 — Check-in app
   Palette + type lifted from ph-ai.me so this feels native to it.
   ============================================================ */
:root{
  --navy:#0C234B; --navy-deep:#081634; --navy-ink:#0A1A36;
  --coral:#E76F51; --coral-hot:#D4603C; --sun:#F4A261;
  --cream:#FAF6EF; --bone:#F0E7D8; --sand:#E8D5B7;
  --ink:#1A1410; --char:#3A2E26;

  --good:#2E7D52; --good-bg:#E7F2EA; --good-line:#BFE0CC;
  --warn:#9A4F12; --warn-bg:#FBE7CF; --warn-line:#F0CDA0;
  --bad:#B23A2E;  --bad-bg:#F8E2DD;  --bad-line:#EBC0B6;

  --navy-line:rgba(12,35,75,0.14);
  --cream-line:rgba(250,246,239,0.16);
  --coral-soft:rgba(231,111,81,0.12);

  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Space Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --maxw:680px;
  --shadow:0 14px 40px -18px rgba(12,35,75,0.45);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--sans); background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
button,input{font-family:inherit;}

/* ---- Brand bits ---- */
.lockup{font-family:var(--display); font-weight:800; letter-spacing:-0.01em;}
.amp{font-family:var(--serif); font-style:italic; font-weight:500; color:var(--coral);}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.26em;
  text-transform:uppercase; color:var(--coral-hot);
  display:inline-flex; align-items:center; gap:9px; margin:0 0 12px;
}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--coral); display:inline-block;}

/* ---- Top bar ---- */
.topbar{
  position:sticky; top:0; z-index:40; background:var(--navy);
  color:var(--cream); border-bottom:1px solid var(--cream-line);
}
.topbar-inner{
  max-width:var(--maxw); margin:0 auto; padding:11px 16px;
  display:flex; align-items:center; gap:11px;
}
.topbar .mark{width:30px; height:30px; flex:0 0 auto;}
.topbar .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cream);}
.topbar .brand .lockup{font-size:17px;}
.topbar .brand .sub{font-family:var(--mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--sun); opacity:.95;}
.topbar .spacer{flex:1;}
.navlink{
  text-decoration:none; color:var(--cream); font-size:13px; font-weight:600;
  padding:8px 12px; border-radius:999px; border:1px solid transparent; white-space:nowrap;
}
.navlink:hover{border-color:var(--cream-line);}
.navlink.active{background:var(--coral); color:var(--navy);}
.navlink.ghost{opacity:.8;}

/* ---- Buttons ---- */
.btn{
  font-family:var(--sans); font-weight:600; font-size:16px; letter-spacing:.01em;
  border:none; border-radius:999px; padding:15px 24px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  text-decoration:none; transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform:translateY(1px);}
.btn-block{display:flex; width:100%;}
.btn-primary{background:var(--coral); color:var(--navy); box-shadow:0 10px 26px -10px rgba(231,111,81,.65);}
.btn-primary:hover{background:var(--sun);}
.btn-primary:disabled{opacity:.55; box-shadow:none; cursor:default;}
.btn-navy{background:var(--navy); color:var(--cream);}
.btn-navy:hover{background:var(--navy-ink);}
.btn-ghost{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.6px var(--navy-line);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.6px var(--coral); color:var(--coral-hot);}

/* ---- Generic layout ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:18px 16px 40px;}
.page-head{margin:6px 2px 16px;}
.page-head h1{font-family:var(--display); font-weight:800; font-size:clamp(26px,7vw,38px); line-height:1.02; letter-spacing:-0.025em; color:var(--navy); margin:0;}
.page-head h1 .amp{color:var(--coral);}

/* ============ SCANNER ============ */
.daybar{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 6px; -webkit-overflow-scrolling:touch;}
.daypill{
  flex:0 0 auto; border:1.5px solid var(--navy-line); background:#fff; color:var(--navy);
  border-radius:999px; padding:9px 15px; font-weight:600; font-size:14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; line-height:1.15; min-width:74px;
}
.daypill .d{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--char); opacity:.7; margin-top:2px;}
.daypill.active{background:var(--navy); color:var(--cream); border-color:var(--navy);}
.daypill.active .d{color:var(--sun); opacity:1;}
.daypill.today::after{content:"TODAY"; font-family:var(--mono); font-size:8px; letter-spacing:.1em; color:var(--coral-hot); margin-top:2px;}
.daypill.active.today::after{color:var(--sun);}

.day-note{
  display:none; margin:10px 2px 0; padding:9px 13px; border-radius:12px;
  background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line);
  font-size:13px; font-weight:600;
}
.day-note.show{display:block;}

.counter{margin:16px 2px 6px;}
.counter-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px;}
.counter-row .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--char);}
.counter-row .num{font-family:var(--display); font-weight:800; font-size:20px; color:var(--navy);}
.counter-bar{height:12px; background:var(--bone); border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(12,35,75,.08);}
.counter-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--coral),var(--sun)); border-radius:999px; transition:width .4s ease;}
.counter-fill.over{background:linear-gradient(90deg,var(--navy),var(--coral-hot));}

.reader-shell{
  position:relative; margin:16px 2px 0; border-radius:20px; overflow:hidden;
  background:var(--navy-deep); aspect-ratio:1/1; box-shadow:var(--shadow);
}
#reader{position:absolute; inset:0;}
#reader video{width:100%!important; height:100%!important; object-fit:cover;}
.reader-idle{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:10px;
  align-items:center; justify-content:center; color:rgba(250,246,239,.7); text-align:center; padding:24px;
}
.reader-idle svg{width:54px; height:54px; opacity:.8;}
.reader-idle .t{font-weight:600; font-size:15px;}
.reader-idle .s{font-size:12.5px; opacity:.75; max-width:240px;}
.reader-frame{position:absolute; inset:0; pointer-events:none; display:none;}
.reader-shell.live .reader-frame{display:block;}
.reader-frame i{position:absolute; width:34px; height:34px; border:3px solid var(--sun);}
.reader-frame i:nth-child(1){top:18px; left:18px; border-right:none; border-bottom:none; border-radius:8px 0 0 0;}
.reader-frame i:nth-child(2){top:18px; right:18px; border-left:none; border-bottom:none; border-radius:0 8px 0 0;}
.reader-frame i:nth-child(3){bottom:18px; left:18px; border-right:none; border-top:none; border-radius:0 0 0 8px;}
.reader-frame i:nth-child(4){bottom:18px; right:18px; border-left:none; border-top:none; border-radius:0 0 8px 0;}

.scan-actions{margin-top:14px; display:flex; flex-direction:column; gap:10px;}

details.manual{margin-top:16px; border:1px solid var(--navy-line); border-radius:14px; background:#fff; overflow:hidden;}
details.manual summary{padding:13px 16px; cursor:pointer; font-weight:600; font-size:14px; color:var(--navy); list-style:none;}
details.manual summary::-webkit-details-marker{display:none;}
details.manual summary::before{content:"⌨  "; }
.manual-body{padding:0 14px 14px; display:flex; gap:8px;}
.manual-body input{
  flex:1; min-width:0; padding:13px 14px; border:1.5px solid var(--navy-line); border-radius:12px;
  font-size:16px; background:var(--cream); color:var(--ink);
}
.manual-body input:focus{outline:none; border-color:var(--coral);}
.manual-body .btn{padding:13px 18px; font-size:15px;}

.operator-row{margin-top:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.operator-row label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--char);}
.operator-row input{
  padding:9px 12px; border:1.5px solid var(--navy-line); border-radius:10px; font-size:14px;
  background:#fff; color:var(--ink); max-width:200px;
}
.operator-row input:focus{outline:none; border-color:var(--coral);}

/* ---- Feedback banner ---- */
.feedback{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:16px; padding:20px 18px calc(20px + env(safe-area-inset-bottom,0));
  transform:translateY(-130%); transition:transform .22s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.4); cursor:pointer;
}
.feedback.show{transform:translateY(0);}
.feedback .fb-icon{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:32px; line-height:1;
}
.feedback .fb-title{font-family:var(--display); font-weight:800; font-size:clamp(21px,6vw,28px); line-height:1.05;}
.feedback .fb-sub{font-family:var(--mono); font-size:12.5px; margin-top:3px; word-break:break-all; opacity:.92;}
.feedback.ok{background:var(--good-bg); color:var(--good); border-bottom:3px solid var(--good);}
.feedback.ok .fb-icon{background:var(--good); color:#fff;}
.feedback.dup{background:var(--warn-bg); color:var(--warn); border-bottom:3px solid var(--warn);}
.feedback.dup .fb-icon{background:var(--warn); color:#fff;}
.feedback.err{background:var(--bad-bg); color:var(--bad); border-bottom:3px solid var(--bad);}
.feedback.err .fb-icon{background:var(--bad); color:#fff;}

/* ============ DASHBOARD ============ */
.refresh-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 2px 18px;}
.refresh-bar .updated{font-family:var(--mono); font-size:11px; color:var(--char); opacity:.75;}
.refresh-bar .spacer{flex:1;}
.toggle{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--navy); cursor:pointer;}
.toggle input{width:16px; height:16px; accent-color:var(--coral);}
.btn-sm{padding:9px 15px; font-size:13.5px;}

.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:0 2px 8px;}
.stat{background:#fff; border:1px solid var(--navy-line); border-radius:16px; padding:15px 16px;}
.stat .num{font-family:var(--display); font-weight:800; font-size:clamp(28px,9vw,40px); line-height:1; color:var(--navy); letter-spacing:-.02em;}
.stat .num.accent{color:var(--coral-hot);}
.stat .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--char); margin-top:6px;}

.section-label{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--coral-hot); margin:26px 2px 12px;}

.daycards{display:flex; flex-direction:column; gap:12px; margin:0 2px;}
.daycard{background:#fff; border:1px solid var(--navy-line); border-radius:16px; padding:16px;}
.daycard.is-today{border-color:var(--coral); box-shadow:0 0 0 2px var(--coral-soft);}
.daycard-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:11px;}
.daycard .day-name{font-family:var(--display); font-weight:800; font-size:18px; color:var(--navy);}
.daycard .day-date{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--char); opacity:.75; margin-left:8px;}
.daycard .day-count{font-family:var(--display); font-weight:800; font-size:22px; color:var(--navy); white-space:nowrap;}
.daycard .day-count .cap{font-size:14px; color:var(--char); opacity:.6; font-weight:600;}
.daycard .day-count.over{color:var(--coral-hot);}
.daycard .badge-today{font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--coral-hot); margin-left:8px;}
.bar{height:16px; background:var(--bone); border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(12,35,75,.08);}
.bar .fill{height:100%; width:0; background:linear-gradient(90deg,var(--coral),var(--sun)); border-radius:999px; transition:width .6s cubic-bezier(.2,.8,.3,1);}
.bar .fill.over{background:linear-gradient(90deg,var(--navy),var(--coral-hot));}
.daycard .pct{display:flex; justify-content:space-between; margin-top:7px; font-size:12px; color:var(--char);}
.daycard .pct .r{font-family:var(--mono);}

.recent{margin:0 2px;}
.recent-item{display:flex; align-items:center; gap:11px; padding:11px 2px; border-bottom:1px solid var(--navy-line);}
.recent-item:last-child{border-bottom:none;}
.recent-item .rt{font-family:var(--mono); font-size:12px; color:var(--char); width:62px; flex:0 0 auto;}
.recent-item .rc{flex:1; min-width:0; font-weight:600; font-size:14px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.recent-item .rc .ro{display:block; font-weight:400; font-size:11px; color:var(--char); opacity:.7;}
.pill{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:999px; flex:0 0 auto;}
.pill.in{background:var(--good-bg); color:var(--good);}
.pill.dup{background:var(--warn-bg); color:var(--warn);}
.pill.unknown{background:var(--bad-bg); color:var(--bad);}
.empty{color:var(--char); opacity:.6; font-size:14px; padding:18px 2px;}

/* ============ LOGIN ============ */
.login-page{
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px 18px;
  background:radial-gradient(120% 80% at 50% -10%, #16356b 0%, var(--navy) 45%, var(--navy-deep) 100%);
  position:relative; overflow:hidden;
}
.login-rings{position:absolute; width:520px; height:520px; bottom:-160px; right:-150px; opacity:.5;}
.login-card{
  position:relative; z-index:2; width:100%; max-width:380px; background:var(--cream);
  border-radius:22px; padding:30px 26px 26px; box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
}
.login-card .mark{width:52px; height:52px; margin:0 auto 16px;}
.login-card .lockup{font-size:26px; text-align:center; color:var(--navy); display:block;}
.login-card .tag{text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--coral-hot); margin:6px 0 22px;}
.login-card label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--char); margin-bottom:8px;}
.login-card input{
  width:100%; padding:15px 16px; border:1.6px solid var(--navy-line); border-radius:13px;
  font-size:17px; background:#fff; color:var(--ink); margin-bottom:14px;
}
.login-card input:focus{outline:none; border-color:var(--coral);}
.login-error{background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-line); border-radius:11px; padding:11px 13px; font-size:13.5px; font-weight:600; margin-bottom:14px;}
.login-foot{text-align:center; margin-top:18px; font-size:11.5px; color:var(--char); opacity:.7;}

/* small screens / spacing */
@media (max-width:380px){
  .topbar .brand .sub{display:none;}
  .stat .lbl{letter-spacing:.1em;}
}