/* ============================================================
   IRC 2026 — Registration / Check-in / Dashboard
   Visual identity matched to the IRC 2026 conference site:
   deep navy base · lime energy · teal + indigo geometry · Poppins
============================================================ */

:root{
  --ink:    #04101c;   /* page base (near-black navy)      */
  --deep:   #071b22;   /* alt surface                      */
  --panel:  #0b2530;   /* card surface                     */
  --panel2: #0e2f3c;   /* raised card surface              */
  --lime:   #c9f227;   /* KV yellow-green (primary action) */
  --green:  #47d16a;
  --teal:   #2fd6a5;   /* teal-green accent                */
  --indigo: #4a5df0;   /* KV electric blue                 */
  --text:   #eaf6f0;
  --dim:    #9db8ae;
  --line:   rgba(180, 230, 200, .14);
  --danger: #ff6b6b;
  --warn:   #ffcf5c;
  --font:   "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--font);
  color:var(--text);
  background:var(--ink);
  margin:0;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--lime); color:var(--ink); }

a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--lime); }

/* ---------- KV background wrapper ---------- */
.kv-bg{
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(4,16,28,.72), rgba(4,16,28,.90)),
    url("../img/background.jpg") center center / cover no-repeat fixed;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:clamp(1.25rem, 4vw, 3rem) 1rem;
}

/* ---------- brand lockup ---------- */
.brandbar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  margin-bottom:1.5rem;
}
.brandbar .logo-pill{
  background:#fff;
  border-radius:14px;
  padding:.5rem .8rem;
  display:flex;
  align-items:center;
  gap:1rem;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.brandbar img{ height:44px; width:auto; display:block; }

.wordmark{
  text-align:center;
  margin-bottom:.35rem;
}
.masthead{
  width:min(440px, 82vw);
  height:auto;
  display:block;
  margin:0 auto;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.45));
}
.wordmark .irc{
  font-weight:800;
  font-size:clamp(2.4rem, 8vw, 3.6rem);
  letter-spacing:.02em;
  line-height:.9;
  color:#fff;
}
.wordmark .irc span{ color:var(--lime); }
.wordmark .sub{
  text-transform:uppercase;
  letter-spacing:.34em;
  font-size:clamp(.55rem, 1.8vw, .72rem);
  font-weight:600;
  color:var(--teal);
  margin-top:.5rem;
}
.eventline{
  text-align:center;
  color:var(--dim);
  font-size:.85rem;
  letter-spacing:.02em;
  margin-bottom:2rem;
}
.eventline b{ color:var(--text); font-weight:600; }

/* ---------- glass card ---------- */
.glass{
  width:100%;
  max-width:640px;
  background:linear-gradient(180deg, rgba(14,47,60,.72), rgba(7,27,34,.82));
  border:1px solid var(--line);
  border-radius:22px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:clamp(1.5rem, 4vw, 2.5rem);
}
.glass.narrow{ max-width:480px; }
.glass.wide{ max-width:1120px; }

.card-title{
  font-weight:700;
  font-size:1.5rem;
  margin:0 0 .35rem;
  letter-spacing:.01em;
}
.card-sub{
  color:var(--dim);
  font-size:.92rem;
  margin:0 0 1.5rem;
  line-height:1.6;
}
.divider{ border:none; border-top:1px solid var(--line); margin:1.5rem 0; }

/* ---------- form ---------- */
.field{ margin-bottom:1.1rem; }
.field label{
  display:block;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--teal);
  margin-bottom:.45rem;
}
.field .hint{
  text-transform:none;
  letter-spacing:0;
  color:var(--dim);
  font-weight:400;
  font-size:.72rem;
  margin-left:.4rem;
}
.field input,
.field select{
  width:100%;
  padding:.8rem .9rem;
  font-family:var(--font);
  font-size:1rem;
  color:var(--text);
  background:rgba(4,16,28,.55);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#5f7d74; }
.field input:focus,
.field select:focus{
  outline:none;
  border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(47,214,165,.18);
}
.field select option{ background:var(--panel); color:var(--text); }

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 1rem;
}
@media (max-width:560px){ .grid-2{ grid-template-columns:1fr; } }

/* segmented attend / absent control */
.segmented{ display:flex; gap:.6rem; }
.segmented label{
  flex:1;
  margin:0;
  text-align:center;
  padding:.7rem;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  color:var(--dim);
  letter-spacing:.04em;
  text-transform:none;
  font-size:.9rem;
  transition:.2s;
  background:rgba(4,16,28,.4);
}
.segmented input{ position:absolute; opacity:0; pointer-events:none; }
.segmented label:hover{ border-color:var(--teal); color:var(--text); }
.segmented input:checked + label.attend{
  background:rgba(71,209,106,.16); border-color:var(--green); color:#dfffe9;
}
.segmented input:checked + label.absent{
  background:rgba(255,107,107,.14); border-color:var(--danger); color:#ffe1e1;
}

/* ---------- button ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font); font-weight:700; font-size:.95rem;
  letter-spacing:.03em;
  padding:.85rem 1.6rem;
  border-radius:999px;
  border:none; cursor:pointer;
  transition:transform .15s, box-shadow .2s, background .2s, opacity .2s;
}
.btn-primary{
  background:var(--lime); color:var(--ink);
  box-shadow:0 10px 26px rgba(201,242,39,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(201,242,39,.4); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line);
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--lime); }
.btn-block{ width:100%; }

/* ---------- messages ---------- */
.msg{ font-size:.9rem; margin:.4rem 0 0; min-height:1.2em; }
.msg.ok{ color:var(--green); }
.msg.err{ color:var(--danger); }
.msg.warn{ color:var(--warn); }
.msg.muted{ color:var(--dim); }

/* ---------- QR result ---------- */
.qr-wrap{
  display:flex; justify-content:center; align-items:center;
  background:#fff; border-radius:16px; padding:16px;
  width:max-content; margin:1.25rem auto;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.qrid{
  text-align:center; color:var(--dim); font-size:.8rem;
  word-break:break-all; letter-spacing:.02em;
}

/* ---------- check-in status ---------- */
.status-hero{ text-align:center; }
.status-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1.1rem; border-radius:999px;
  font-weight:600; font-size:.9rem; letter-spacing:.04em;
  border:1px solid var(--line); margin-bottom:1.25rem;
}
.status-badge.ok{ background:rgba(71,209,106,.16); border-color:var(--green); color:#dfffe9; }
.status-badge.warn{ background:rgba(255,207,92,.14); border-color:var(--warn); color:#fff0c9; }
.status-badge.err{ background:rgba(255,107,107,.14); border-color:var(--danger); color:#ffe1e1; }
.status-badge.load{ background:rgba(74,93,240,.14); border-color:var(--indigo); color:#dfe4ff; }
.person-name{
  font-weight:800; font-size:clamp(1.6rem, 6vw, 2.4rem);
  line-height:1; margin:.25rem 0; text-transform:uppercase;
}
.person-meta{ color:var(--dim); font-size:1rem; margin:.15rem 0; }
.person-meta b{ color:var(--text); }
.rep-note{
  margin-top:1rem; padding:.8rem 1rem; border-radius:12px;
  background:rgba(74,93,240,.12); border:1px solid rgba(74,93,240,.3);
  color:#dfe4ff; font-size:.9rem;
}

/* ---------- dashboard ---------- */
.dash-head{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.dash-head h1{ margin:0; font-weight:700; font-size:1.6rem; }
.dash-head .spacer{ flex:1; }
.dash-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
@media (max-width:640px){
  .dash-head{ flex-direction:column; align-items:center; text-align:center; gap:1rem; }
  .dash-head .spacer{ display:none; }
  .dash-head h1{ font-size:1.3rem; }
  .dash-actions{ width:100%; justify-content:center; }
  .dash-actions .btn{ flex:1 1 30%; padding:.7rem .5rem; font-size:.82rem; }
}

.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.kpi{
  background:linear-gradient(180deg, rgba(14,47,60,.7), rgba(7,27,34,.8));
  border:1px solid var(--line); border-radius:16px; padding:1.2rem 1.3rem;
}
.kpi .label{ color:var(--dim); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; }
.kpi .value{ font-weight:800; font-size:2rem; line-height:1.1; margin-top:.3rem; }
.kpi .value.lime{ color:var(--lime); }
.kpi .value.teal{ color:var(--teal); }
.kpi .value.danger{ color:var(--danger); }

.panel{
  background:linear-gradient(180deg, rgba(14,47,60,.7), rgba(7,27,34,.8));
  border:1px solid var(--line); border-radius:18px; padding:1.3rem;
  margin-bottom:1.5rem;
}
.panel h3{ margin:0 0 1rem; font-weight:700; font-size:1.15rem; }

.table-scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th,td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
th{ color:var(--teal); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; }
tbody tr:hover{ background:rgba(255,255,255,.03); }

.pill{ padding:.25rem .7rem; border-radius:999px; font-size:.75rem; font-weight:600; display:inline-block; }
.pill.ok{ background:rgba(71,209,106,.16); color:#9df3b6; }
.pill.no{ background:rgba(255,207,92,.14); color:#ffe3a1; }
.pill.absent{ background:rgba(255,107,107,.14); color:#ffb3b3; }

.small{ font-size:.8rem; color:var(--dim); }

/* login screen */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }

/* ---------- scanner ---------- */
#reader{
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#02090f;
}
#reader video{ border-radius:16px; display:block; width:100% !important; height:auto !important; }
#reader img[alt="Info icon"]{ display:none; }   /* hide library placeholder */
.scan-hint{ text-align:center; color:var(--dim); font-size:.9rem; margin:.9rem 0 0; }
.scan-frame-note{ text-align:center; color:var(--teal); font-size:.8rem; letter-spacing:.04em; margin-top:.4rem; }

/* utility */
.center{ text-align:center; }
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.hide{ display:none !important; }

/* entrance */
@keyframes riseIn{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }
.rise{ animation:riseIn .6s ease both; }
.rise.d1{ animation-delay:.08s; } .rise.d2{ animation-delay:.16s; } .rise.d3{ animation-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .rise{ animation:none; } .kv-bg{ background-attachment:scroll; } }