@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap");
:root{--ink:#101820;--muted:#65716d;--green:#087a3d;--green2:#0f9b55;--red:#c62828;--line:#dce6e1;--bg:#f5f7f6;--shadow:0 18px 52px rgba(10,25,22,.10)}
*{box-sizing:border-box}
body{margin:0;font-family:"Cinzel",Georgia,serif;background:var(--bg);color:var(--ink)}
.wrap{min-height:100vh}
.hero{min-height:330px;padding:34px 42px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;color:#fff;background:
  linear-gradient(90deg,rgba(2,10,8,.92),rgba(2,10,8,.62),rgba(2,10,8,.18)),
  url("checkin-hero.jpg") center/cover no-repeat}
.brand-logo{display:block;width:150px;max-width:45vw;height:auto;margin-bottom:22px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.eyebrow{display:inline-flex;width:max-content;border-radius:999px;background:rgba(8,122,61,.92);color:#fff;padding:7px 12px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
h1{font-family:Georgia,serif;font-size:clamp(42px,6vw,72px);line-height:1;margin:16px 0 10px;font-weight:600}
h2{font-size:27px;margin:.2rem 0 1rem}
.hero p{color:#eef6f1;font-size:19px}
.status{padding:12px 16px;border-radius:999px;background:#e7f8ee;color:#007a3f;font-weight:900;white-space:nowrap}
.card,footer{max-width:1040px;margin:22px auto 0}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
.scanRow{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:8px}
input,button{font-size:18px;border-radius:12px;border:1px solid var(--line);padding:14px;outline:none}
input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(15,155,85,.12)}
button{background:linear-gradient(135deg,var(--green),var(--green2));color:white;border:none;font-weight:900;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
button:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(8,122,61,.18)}
button.secondary{background:#eaf3ef;color:#073d25;border:1px solid #cfe1d9}
button.danger{background:#8d2724;color:#fff}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.camera-help{border:1px solid #d8c98c;background:#fffaf0;color:#24342f;border-radius:16px;padding:16px;margin:-4px 0 16px;line-height:1.5}
.camera-help strong{display:block;font-size:17px;margin-bottom:6px;color:#071f1b}
.camera-help ul{margin:8px 0 0;padding-left:20px}
.camera-help li{margin:5px 0}
.label{font-weight:900;color:#283a35}
.muted{color:var(--muted);line-height:1.5}
.hidden{display:none!important}
.msg{margin-top:10px;font-weight:800}
.video{width:100%;max-height:420px;background:#111;border-radius:18px;margin:16px 0}
.scan-flash{position:fixed;inset:0;z-index:90;display:grid;place-items:center;text-align:center;color:#fff;background:rgba(3,21,18,.88);padding:24px}
.scan-flash .mark{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;margin:0 auto 18px;font-size:78px;font-weight:900;background:#09a857;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.scan-flash strong{display:block;font-size:clamp(30px,7vw,64px);line-height:1.05;margin-bottom:10px}
.scan-flash span{display:block;font-size:clamp(16px,3vw,24px);line-height:1.35;max-width:720px}
.scan-flash.invalid .mark,.scan-flash.duplicate .mark{background:#d93025}
.scan-flash.duplicate .mark{background:#b8841a}
.result{margin-top:16px;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:6px;border:4px solid #c7d4cf}
.result strong{font-size:34px}
.result.valid{background:#e7f8ee;border-color:#09a857;color:#03582e}
.result.invalid,.result.duplicate{background:#ffeceb;border-color:#d93025;color:#8b1a13}
.result.idle{background:#f5f8f7}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.pill{background:#edf4f1;border-radius:999px;padding:10px 12px;font-weight:900}
.logrow{display:grid;grid-template-columns:170px 1fr 120px;gap:8px;border-bottom:1px solid #edf1ef;padding:12px 0}
.logrow b{display:block}
footer{padding:28px;text-align:center;color:#fff;background:#031512;border-radius:18px 18px 0 0}
@media(max-width:760px){
  .hero{min-height:168px;padding:14px 14px;align-items:flex-start;flex-direction:row;justify-content:space-between}
  .brand-logo{width:96px;max-width:34vw;margin-bottom:8px}
  .eyebrow{font-size:10px;padding:5px 9px}
  h1{font-size:30px;margin:8px 0 0}
  .status{font-size:12px;padding:8px 10px;align-self:flex-start}
  .grid,.scanRow,.logrow{grid-template-columns:1fr}
  .card,footer{margin:14px 14px 0}
  button,input{width:100%}
  .result strong{font-size:25px}
  .toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .toolbar .danger{grid-column:1 / -1}
}