:root{
  --pu:#7c3aed;--pu-m:#9b6ddb;--pu-l:#a78bfa;
  --pk:#f9748f;--pk-d:#e8526a;
  --green:#22c55e;--green-d:#16a34a;
  --amber:#f59e0b;--amber-d:#d97706;
  --red:#ef4444;--red-d:#dc2626;

  --bg0:#050311;--bg1:#0b0720;
  --glass:rgba(255,255,255,.06);
  --glass-b:rgba(14,8,28,.86);
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(167,139,250,.45);

  --tx:#f2eeff;--tx2:#c7bce8;--mu:#8577ab;

  --grad-main:linear-gradient(135deg,var(--pu) 0%,var(--pu-m) 50%,var(--pk) 100%);
  --grad-ok:linear-gradient(135deg,#4ade80 0%,var(--green-d) 100%);
  --grad-err:linear-gradient(135deg,var(--pk) 0%,var(--red-d) 100%);
  --grad-warn:linear-gradient(135deg,#fbbf24 0%,var(--amber-d) 100%);

  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Familjen Grotesk',sans-serif;
  background:var(--bg0);
  color:var(--tx);
  -webkit-user-select:none;user-select:none; /* kiosk: no accidental text selection */
}

/* ================= BACKGROUND ================= */
.kiosk-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.kiosk-glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:float 24s ease-in-out infinite alternate;}
.g1{width:640px;height:640px;top:-220px;left:-160px;background:radial-gradient(circle,rgba(124,58,237,.55),transparent 65%);}
.g2{width:560px;height:560px;bottom:-220px;right:-160px;background:radial-gradient(circle,rgba(249,116,143,.4),transparent 65%);animation-delay:6s;}
@keyframes float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-30px) scale(1.08)}}
.kiosk-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(167,139,250,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(167,139,250,.05) 1px,transparent 1px);background-size:52px 52px;}

/* ================= SHELL / LAYOUT ================= */
.kiosk-shell{
  position:relative;z-index:1;
  height:100dvh;width:100vw;
  display:flex;flex-direction:column;
  padding:20px 28px;
}

/* ---------- HEADER ---------- */
.kiosk-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-radius:20px;
  background:var(--glass-b);border:1px solid var(--border);
  backdrop-filter:blur(20px);
  animation:dropIn .5s var(--ease) both;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.kh-brand{display:flex;align-items:center;gap:14px;}
.kh-logo{width:48px;height:48px;border-radius:14px;background:var(--grad-main);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;box-shadow:0 6px 20px rgba(124,58,237,.4);}
.kh-logo img{width:100%;height:100%;object-fit:contain;}
.kh-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;}
.kh-sub{font-size:11.5px;color:var(--mu);font-weight:600;letter-spacing:.03em;margin-top:1px;}
.kh-clock{text-align:right;}
.kh-time{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.9rem;letter-spacing:-.03em;line-height:1;}
.kh-date{font-size:11.5px;color:var(--mu);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-top:4px;}

/* ---------- STAGE ---------- */
.kiosk-stage{
  flex:1;display:flex;align-items:center;justify-content:center;
  position:relative;min-height:0;padding:24px 0;
}

.scan-frame{
  position:relative;width:min(64vh,480px);aspect-ratio:1/1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .3s var(--ease);
}
.scan-frame[data-hide="1"]{opacity:0;pointer-events:none;position:absolute;}

.scan-video-wrap{
  position:relative;width:100%;height:100%;border-radius:50%;
  overflow:hidden;background:#020106;
  border:1px solid var(--border);
  box-shadow:0 30px 90px rgba(124,58,237,.25),0 0 0 1px rgba(255,255,255,.03) inset;
}
#kioskVideo{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block;}
#kioskOverlay{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1);pointer-events:none;}

/* progress ring — tracks the 2s "hold still" window */
.scan-ring{position:absolute;inset:-10px;width:calc(100% + 20px);height:calc(100% + 20px);pointer-events:none;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:5;}
.ring-fill{
  fill:none;stroke:url(#none);stroke:var(--pu-l);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:628; stroke-dashoffset:628;
  transition:stroke-dashoffset .12s linear,stroke .2s;
}
.scan-frame[data-state="stable"] .ring-fill{stroke:var(--pu-l);}
.scan-frame[data-state="multiple"] .ring-fill,
.scan-frame[data-state="fail"] .ring-fill{stroke:var(--red);}
.scan-frame[data-state="success"] .ring-fill{stroke:var(--green);}

.capture-flash{position:absolute;inset:0;background:#fff;opacity:0;border-radius:50%;pointer-events:none;}
.capture-flash.flash{animation:flashPop .45s ease-out;}
@keyframes flashPop{0%{opacity:.85}100%{opacity:0}}

.scan-caption{
  margin-top:26px;font-size:15px;font-weight:700;color:var(--tx2);
  letter-spacing:.02em;text-align:center;min-height:22px;
  transition:color .2s;
}
.scan-frame[data-state="multiple"] .scan-caption,
.scan-frame[data-state="fail"] .scan-caption{color:var(--pk);}
.scan-frame[data-state="stable"] .scan-caption{color:var(--pu-l);}
.scan-frame[data-state="success"] .scan-caption{color:var(--green);}

/* ---------- RESULT PANEL ---------- */
.result-panel{
  display:none;flex-direction:column;align-items:center;gap:10px;
  width:min(90vw,440px);padding:36px 36px 28px;border-radius:28px;
  background:var(--glass-b);border:1px solid var(--border);
  box-shadow:0 40px 100px rgba(0,0,0,.5);
  animation:popIn .35s var(--spring);
  text-align:center;
}
.result-panel.show{display:flex;}
@keyframes popIn{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:none}}
.result-icon{width:78px;height:78px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:4px;}
.result-panel.ok     .result-icon{background:rgba(74,222,128,.12);color:#4ade80;border:2px solid rgba(74,222,128,.3);}
.result-panel.err    .result-icon{background:rgba(239,68,68,.12);color:#f87171;border:2px solid rgba(239,68,68,.3);}
.result-panel.warn   .result-icon{background:rgba(245,158,11,.12);color:#fbbf24;border:2px solid rgba(245,158,11,.3);}
.result-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.02em;}
.result-emp{font-size:1rem;font-weight:700;color:var(--tx2);}
.result-grid{display:flex;gap:10px;margin-top:4px;flex-wrap:wrap;justify-content:center;}
.result-grid-extra{margin-top:2px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);}
.result-pill{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;padding:8px 18px;font-size:.8rem;}
.result-pill span{display:block;color:var(--mu);font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:2px;}
.result-pill b{font-size:.95rem;font-weight:700;}
.result-note{font-size:.85rem;color:var(--mu);font-weight:500;margin-top:2px;}
.result-countdown{font-size:.75rem;color:var(--mu);font-weight:600;margin-top:10px;letter-spacing:.02em;}
.result-countdown span{color:var(--tx);font-weight:800;}

/* ---------- FOOTER STATUS BAR ---------- */
.kiosk-footer{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  padding:14px;border-radius:18px;
  background:var(--glass-b);border:1px solid var(--border);
  backdrop-filter:blur(20px);
  animation:dropIn .5s var(--ease) .1s both;
}
.status-chip{
  display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  background:rgba(255,255,255,.04);border:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--mu2,var(--mu));
  transition:all .25s var(--ease);
}
.status-chip i{font-size:.8rem;color:var(--mu);}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mu);flex-shrink:0;transition:background .25s;}
.status-chip.ok .status-dot{background:var(--green);box-shadow:0 0 8px var(--green);}
.status-chip.ok .status-text,.status-chip.ok i{color:#bbf7d0;}
.status-chip.warn .status-dot{background:var(--amber);box-shadow:0 0 8px var(--amber);animation:blinkDot 1s infinite;}
.status-chip.warn .status-text,.status-chip.warn i{color:#fde68a;}
.status-chip.err .status-dot{background:var(--red);box-shadow:0 0 8px var(--red);}
.status-chip.err .status-text,.status-chip.err i{color:#fecaca;}
@keyframes blinkDot{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- PERMISSION OVERLAY ---------- */
.permission-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(3,1,10,.94);backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .35s var(--ease),visibility .35s;
}
.permission-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.permission-box{max-width:400px;width:90%;text-align:center;padding:20px;}
.permission-icon{width:76px;height:76px;border-radius:50%;background:var(--grad-main);display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin:0 auto 18px;box-shadow:0 10px 30px rgba(124,58,237,.4);}
.permission-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.4rem;margin-bottom:10px;}
.permission-text{font-size:13.5px;color:var(--mu);line-height:1.6;margin-bottom:22px;}
.permission-spinner{width:34px;height:34px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--pu-l);border-radius:50%;margin:0 auto;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* ================= RESPONSIVE ================= */
@media(max-width:720px){
  .kiosk-shell{padding:14px;}
  .kiosk-header{padding:12px 16px;}
  .kh-name{font-size:1rem;}
  .kh-time{font-size:1.5rem;}
  .scan-frame{width:min(70vw,340px);}
  .kiosk-footer{gap:8px;padding:10px;}
  .status-chip{font-size:11px;padding:7px 12px;}
  .result-panel{padding:28px 22px 22px;}
}
@media(max-width:420px){
  .kh-sub{display:none;}
  .status-chip .status-text{display:none;}
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}