/* ============================================================
   Library Gate Register – Kiosk Display
   VIBRANT COLORFUL LIGHT THEME
   ============================================================ */

:root {
  /* Surfaces */
  --k-bg:           #f0f2ff;
  --k-surface:      #ffffff;
  --k-border:       #dde3ff;
  --k-text:         #1e1b4b;
  --k-text-soft:    #4a4580;
  --k-muted:        #8892b0;

  /* Shadows */
  --k-shadow-xs:    0 2px 8px  rgba(99,102,241,.08);
  --k-shadow:       0 6px 24px rgba(99,102,241,.14);
  --k-shadow-lg:    0 16px 48px rgba(99,102,241,.20);
  --k-shadow-pop:   0 24px 64px rgba(99,102,241,.28);

  /* Radii */
  --k-radius:       18px;
  --k-radius-sm:    10px;
  --k-radius-pill:  999px;

  /* Gradient palette */
  --g-header:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --g-entry:    linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --g-exit:     linear-gradient(135deg, #e52d27 0%, #b31217 100%);
  --g-error:    linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
  --g-amber:    linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
  --g-teal:     linear-gradient(135deg, #0093E9 0%, #80D0C7 100%);
  --g-green:    linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --g-pink:     linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --g-navy:     linear-gradient(135deg, #141e30 0%, #243b55 100%);
  --g-sunset:   linear-gradient(135deg, #f7971e 0%, #f5576c 50%, #8E54E9 100%);

  /* Flat accent colours */
  --k-entry:   #0d9488;
  --k-exit:    #4776E6;
  --k-danger:  #f5576c;
  --k-gold:    #f7971e;
  --k-accent:  #667eea;
  --k-purple:  #764ba2;
}

/* ── RESET ───────────────────────────────────────────────── */
.lgr-kiosk-page, .lgr-kiosk-page * { box-sizing: border-box; margin: 0; padding: 0; }
.lgr-kiosk-page img { display: block; max-width: 100%; }

/* ── PAGE WRAPPER ────────────────────────────────────────── */
.lgr-kiosk-page {
  background: var(--k-bg);
  background-image:
    radial-gradient(ellipse at 20% 0%,  rgba(102,126,234,.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(118,75,162,.08) 0%, transparent 60%);
  color: var(--k-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* ── HEADER ──────────────────────────────────────────────── */
.lgr-kiosk-header {
  background: var(--g-header);
  padding: 0 28px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(99,102,241,.30);
}

/* Decorative dots in header */
.lgr-kiosk-header::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: rgba(255,255,255,.07);
  border-radius: 50%;
  pointer-events: none;
}
.lgr-kiosk-header::after {
  content: '';
  position: absolute;
  bottom: -50px; left: 40%;
  width: 120px; height: 120px;
  background: rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
}

.lgr-kiosk-branding {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.lgr-kiosk-logo-wrap {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 24px;
}

.lgr-kiosk-logo-img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.lgr-kiosk-title-wrap h1 {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.lgr-kiosk-title-wrap p {
  font-size: 11px;
  color: rgba(255,255,255,.70);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}

.lgr-kiosk-clock-wrap {
  text-align: right;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
/* Row that holds date + fullscreen toggle button side by side */
.lgr-kiosk-clock-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.lgr-kiosk-time {
  font-size: 38px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: 'Courier New', monospace;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.20);
}
.lgr-kiosk-date {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  margin-top: 3px;
  font-weight: 500;
}

/* ── BANNER ──────────────────────────────────────────────── */
.lgr-kiosk-banner {
  width: 100%; max-height: 64px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* ── MAIN 2-COLUMN GRID ──────────────────────────────────── */
.lgr-kiosk-main {
  display: grid;
  grid-template-columns: 52% 48%;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* ── LEFT PANEL ──────────────────────────────────────────── */
.lgr-kiosk-left {
  padding: 20px 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  border-right: 2px solid var(--k-border);
  background: #f5f7ff;
  position: relative;   /* anchors the absolute result-card overlay */
}

/* Gate info chip */
.lgr-kiosk-gate-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(102,126,234,.1);
  border: 1.5px solid rgba(102,126,234,.25);
  border-radius: var(--k-radius-pill);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--k-accent);
  width: fit-content;
}
.lgr-kiosk-gate-chip .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--g-entry);
  box-shadow: 0 0 0 3px rgba(17,153,142,.20);
  animation: lgr-pulse-dot 2s ease-in-out infinite;
}
@keyframes lgr-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(17,153,142,.20); }
  50%       { box-shadow: 0 0 0 6px rgba(17,153,142,.10); }
}

/* ══════════════════════════════════════════════════════════
   SCAN AREA — v2.1.0 — CINEMATIC REDESIGN
   ══════════════════════════════════════════════════════════ */

/* ── SCAN AREA CONTAINER ─────────────────────────────────── */
.lgr-kiosk-scan-area {
  background: linear-gradient(160deg, #080520 0%, #0d0930 40%, #130a40 70%, #1a0d55 100%);
  border-radius: var(--k-radius);
  padding: 26px 22px 22px;
  text-align: center;
  box-shadow:
    0 0 0 1.5px rgba(102,126,234,.4),
    0 8px 32px rgba(102,126,234,.35),
    0 0 80px rgba(102,126,234,.12),
    inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  isolation: isolate;
}

/* ── Layer 1: Animated aurora / nebula background ──────── */
.lgr-kiosk-scan-area::before {
  content: '';
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(102,126,234,.28) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 80% 70%, rgba(118,75,162,.22) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 90%, rgba(56,239,125,.12) 0%, transparent 60%);
  animation: lgr-aurora 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes lgr-aurora {
  0%   { transform: translate(0,0) scale(1);    opacity: .7; }
  33%  { transform: translate(-20px,-12px) scale(1.05); opacity: 1; }
  66%  { transform: translate(15px,10px) scale(.98);  opacity: .8; }
  100% { transform: translate(-8px,18px) scale(1.03); opacity: .9; }
}

/* ── Layer 2: Deep-space star field ─────────────────────── */
.lgr-kiosk-scan-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.70) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.40) 1px, transparent 1px),
    radial-gradient(circle, rgba(200,210,255,.25) 1.5px, transparent 1.5px);
  background-size: 73px 73px, 41px 41px, 110px 110px;
  background-position: 0 0, 18px 18px, 35px 52px;
  opacity: .22;
  pointer-events: none;
  animation: lgr-stars-drift 90s linear infinite;
  z-index: 0;
}
@keyframes lgr-stars-drift {
  from { background-position: 0 0, 18px 18px, 35px 52px; }
  to   { background-position: 73px 73px, 59px 59px, 145px 162px; }
}

/* ── Orbiting glow ring ──────────────────────────────────── */
.lgr-kiosk-scan-area .lgr-scan-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#080520, #080520) padding-box,
    conic-gradient(from 0deg, rgba(56,239,125,0) 0%, rgba(56,239,125,.7) 25%, rgba(102,126,234,.5) 50%, rgba(56,239,125,.0) 75%) border-box;
  animation: lgr-orbit-spin 3.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes lgr-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Second orbit (inner, counter-rotate) */
.lgr-kiosk-scan-area .lgr-scan-orbit-inner {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#080520, #080520) padding-box,
    conic-gradient(from 180deg, rgba(102,126,234,.0) 0%, rgba(255,180,100,.6) 30%, rgba(102,126,234,.0) 60%) border-box;
  animation: lgr-orbit-spin 5s linear infinite reverse;
  pointer-events: none;
  z-index: 1;
}

/* ── Layer 3: Sweeping laser scan line ───────────────────── */
.lgr-scan-laser {
  position: absolute;
  left: 6%; right: 6%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56,239,125,.05) 8%,
    rgba(56,239,125,.85) 40%,
    rgba(130,255,180,1)  50%,
    rgba(56,239,125,.85) 60%,
    rgba(56,239,125,.05) 92%,
    transparent 100%);
  box-shadow:
    0 0 4px 1px rgba(56,239,125,.7),
    0 0 12px 3px rgba(56,239,125,.4),
    0 0 28px 8px rgba(56,239,125,.15);
  top: 20%;
  animation: lgr-laser-sweep 2.6s cubic-bezier(.45,0,.55,1) infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes lgr-laser-sweep {
  0%   { top: 18%; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { top: 84%; opacity: 0; }
}

/* Trailing laser glow block */
.lgr-scan-laser::after {
  content: '';
  position: absolute;
  inset: -14px 10% -14px 10%;
  background: linear-gradient(180deg,
    rgba(56,239,125,.0) 0%,
    rgba(56,239,125,.06) 50%,
    rgba(56,239,125,.0) 100%);
  pointer-events: none;
}

/* ── SCAN FRAME (4-corner bracket reticle) ───────────────── */
.lgr-kiosk-scan-frame {
  position: relative;
  width: 100px; height: 100px;
  margin: 4px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Corner bracket: top-left */
.lgr-scan-corner {
  position: absolute;
  width: 26px; height: 26px;
  border-color: #38ef7d;
  border-style: solid;
  border-width: 0;
  transition: border-color .3s;
}
.lgr-scan-corner.tl {
  top: 0; left: 0;
  border-top-width: 3px;
  border-left-width: 3px;
  border-top-left-radius: 6px;
  animation: lgr-corner-pulse 2.8s ease-in-out infinite;
}
.lgr-scan-corner.tr {
  top: 0; right: 0;
  border-top-width: 3px;
  border-right-width: 3px;
  border-top-right-radius: 6px;
  animation: lgr-corner-pulse 2.8s ease-in-out infinite .35s;
}
.lgr-scan-corner.bl {
  bottom: 0; left: 0;
  border-bottom-width: 3px;
  border-left-width: 3px;
  border-bottom-left-radius: 6px;
  animation: lgr-corner-pulse 2.8s ease-in-out infinite .70s;
}
.lgr-scan-corner.br {
  bottom: 0; right: 0;
  border-bottom-width: 3px;
  border-right-width: 3px;
  border-bottom-right-radius: 6px;
  animation: lgr-corner-pulse 2.8s ease-in-out infinite 1.05s;
}
@keyframes lgr-corner-pulse {
  0%, 100% { border-color: #38ef7d; opacity: .8; }
  50%       { border-color: #a0ffca; opacity: 1; box-shadow: 0 0 8px rgba(56,239,125,.6); }
}

/* ── Scan icon inside the frame ──────────────────────────── */
.lgr-kiosk-scan-icon {
  font-size: 42px;
  display: block;
  z-index: 1;
  position: relative;
  filter: drop-shadow(0 0 10px rgba(56,239,125,.7));
  animation: lgr-icon-float 3s ease-in-out infinite;
}
@keyframes lgr-icon-float {
  0%  { transform: scale(1)    translateY(0);   filter: drop-shadow(0 0 8px rgba(56,239,125,.6)); }
  50% { transform: scale(1.10) translateY(-4px); filter: drop-shadow(0 0 20px rgba(56,239,125,.95)) drop-shadow(0 0 40px rgba(102,126,234,.4)); }
  100%{ transform: scale(1)    translateY(0);   filter: drop-shadow(0 0 8px rgba(56,239,125,.6)); }
}

/* Concentric ripple rings around icon */
.lgr-scan-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(56,239,125,.4);
  animation: lgr-ripple-out 2.4s ease-out infinite;
  pointer-events: none;
}
.lgr-scan-ripple:nth-child(2) { animation-delay: .8s; }
.lgr-scan-ripple:nth-child(3) { animation-delay: 1.6s; }
@keyframes lgr-ripple-out {
  0%   { transform: scale(.6); opacity: .7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Scan heading & subtext ──────────────────────────────── */
.lgr-kiosk-scan-area h2 {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: .04em;
  text-shadow: 0 0 20px rgba(102,126,234,.7), 0 2px 4px rgba(0,0,0,.4);
  position: relative; z-index: 5;
  animation: lgr-text-shimmer 4s ease-in-out infinite;
}
@keyframes lgr-text-shimmer {
  0%, 100% { text-shadow: 0 0 20px rgba(102,126,234,.7), 0 2px 4px rgba(0,0,0,.4); }
  50%       { text-shadow: 0 0 30px rgba(56,239,125,.5), 0 0 60px rgba(102,126,234,.4), 0 2px 4px rgba(0,0,0,.4); }
}
.lgr-kiosk-scan-area p {
  font-size: 11.5px;
  color: rgba(180,190,240,.72);
  margin-bottom: 16px;
  letter-spacing: .02em;
  position: relative; z-index: 5;
}

/* ── STATUS BADGE (replaces plain heading wrap) ──────────── */
.lgr-scan-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(56,239,125,.10);
  border: 1px solid rgba(56,239,125,.30);
  border-radius: var(--k-radius-pill);
  padding: 4px 14px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #38ef7d;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative; z-index: 5;
  animation: lgr-badge-glow 2s ease-in-out infinite;
}
@keyframes lgr-badge-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(56,239,125,.0); }
  50%       { box-shadow: 0 0 0 4px rgba(56,239,125,.12), 0 0 20px rgba(56,239,125,.12); }
}
.lgr-scan-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #38ef7d;
  box-shadow: 0 0 6px 2px rgba(56,239,125,.6);
  animation: lgr-status-blink 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lgr-status-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px 2px rgba(56,239,125,.6); }
  50%       { opacity: .5; box-shadow: 0 0 2px 1px rgba(56,239,125,.3); }
}

/* ── Input field ─────────────────────────────────────────── */
.lgr-kiosk-input {
  width: 100%;
  max-width: 340px;
  padding: 13px 20px;
  background: rgba(255,255,255,.055);
  border: 1.5px solid rgba(102,126,234,.45);
  border-radius: var(--k-radius-pill);
  font-size: 15px;
  color: #fff;
  text-align: center;
  letter-spacing: .08em;
  font-weight: 700;
  outline: none;
  transition: border-color .3s, box-shadow .3s, background .3s;
  position: relative; z-index: 5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lgr-kiosk-input::placeholder {
  color: rgba(180,190,240,.40);
  font-weight: 500;
  letter-spacing: .04em;
}
.lgr-kiosk-input:focus {
  border-color: #38ef7d;
  box-shadow:
    0 0 0 3px rgba(56,239,125,.18),
    0 0 30px rgba(56,239,125,.25);
  background: rgba(255,255,255,.10);
  animation: lgr-input-focus-pulse 2s ease-in-out infinite;
}
@keyframes lgr-input-focus-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(56,239,125,.18), 0 0 30px rgba(56,239,125,.25); }
  50%       { box-shadow: 0 0 0 5px rgba(56,239,125,.08), 0 0 50px rgba(56,239,125,.18); }
}

/* ── Ready-to-scan indicator ─────────────────────────────── */
.lgr-kiosk-scan-ready {
  width: 10px; height: 10px;
  background: #38ef7d;
  border-radius: 50%;
  margin: 10px auto 0;
  position: relative; z-index: 5;
  box-shadow: 0 0 0 0 rgba(56,239,125,.5);
  animation: lgr-ready-ping 1.8s ease-out infinite;
}
@keyframes lgr-ready-ping {
  0%   { box-shadow: 0 0 0 0   rgba(56,239,125,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(56,239,125,.0);  }
  100% { box-shadow: 0 0 0 0   rgba(56,239,125,.0);   }
}

/* ── Cooldown message ────────────────────────────────────── */
.lgr-kiosk-cooldown {
  font-size: 12px;
  font-weight: 700;
  color: var(--k-gold);
  margin-top: 8px;
  display: none;
  position: relative; z-index: 5;
  letter-spacing: .04em;
  text-shadow: 0 0 10px rgba(247,151,30,.5);
  animation: lgr-cooldown-throb 0.6s ease-in-out infinite alternate;
}
@keyframes lgr-cooldown-throb {
  from { opacity: .8; }
  to   { opacity: 1; transform: scale(1.02); }
}

/* ── Particle burst layer (JS-driven; CSS-positioned) ────── */
.lgr-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
}
.lgr-particle.burst {
  animation: lgr-particle-fly var(--dur, .8s) ease-out forwards;
}
@keyframes lgr-particle-fly {
  0%   { transform: translate(0,0) scale(1); opacity: .9; }
  100% { transform: translate(var(--tx,0px), var(--ty,-60px)) scale(0); opacity: 0; }
}

/* ── SUCCESS flash overlay (full scan-area) ──────────────── */
.lgr-kiosk-scan-area.lgr-scan-success {
  animation: lgr-area-success .55s ease;
}
@keyframes lgr-area-success {
  0%   { box-shadow: 0 0 0 1.5px rgba(56,239,125,.4), 0 8px 32px rgba(102,126,234,.35), 0 0 80px rgba(56,239,125,.0); }
  35%  { box-shadow: 0 0 0 4px  rgba(56,239,125,.9), 0 8px 60px rgba(56,239,125,.5),  0 0 120px rgba(56,239,125,.35); }
  100% { box-shadow: 0 0 0 1.5px rgba(102,126,234,.4), 0 8px 32px rgba(102,126,234,.35), 0 0 80px rgba(102,126,234,.12); }
}

/* ── SCAN AREA — DATA RECEIVED shimmer on corners ────────── */
.lgr-scan-corner.lgr-corner-lit {
  border-color: #fff !important;
  box-shadow: 0 0 14px 4px rgba(255,255,255,.7);
  animation: lgr-corner-lit-fade .6s ease forwards;
}
@keyframes lgr-corner-lit-fade {
  0%   { border-color: #fff; box-shadow: 0 0 14px 4px rgba(255,255,255,.7); }
  100% { border-color: #38ef7d; box-shadow: none; }
}

/* ══════════════════════════════════════════════════════════
   STUDENT RESULT CARD — v2.1.0 — CINEMATIC CARD
   ══════════════════════════════════════════════════════════ */
.lgr-kiosk-result-card {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.lgr-kiosk-result-card.lgr-card-visible {
  opacity: 1;
  pointer-events: auto;
  animation: lgr-card-cinematic .55s cubic-bezier(.22,1,.36,1);
}
@keyframes lgr-card-cinematic {
  0%   { opacity: 0; transform: scale(.88) translateY(20px); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ── HERO (large photo section) ──────────────────────────── */
.lgr-kiosk-card-hero {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px 20px 16px;
}
.lgr-kiosk-card-hero.entry    { background: var(--g-entry); }
.lgr-kiosk-card-hero.exit     { background: var(--g-exit);  }
.lgr-kiosk-card-hero.error    { background: var(--g-error); }
.lgr-kiosk-card-hero.dup-warn { background: var(--g-amber); }

/* Shimmer sweep — now continuous and more dramatic */
.lgr-kiosk-card-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.0)  35%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.0)  65%,
    rgba(255,255,255,0)   100%);
  animation: lgr-shimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lgr-shimmer {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

/* Decorative circle bg */
.lgr-kiosk-card-hero::after {
  content: '';
  position: absolute;
  bottom: -60px; right: -60px;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}

/* Type badge — top-right corner */
.lgr-kiosk-type-badge {
  position: absolute;
  top: 14px; right: 14px;
  padding: 6px 18px;
  border-radius: var(--k-radius-pill);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: rgba(255,255,255,.25);
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
  animation: lgr-badge-bounce .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes lgr-badge-bounce {
  0%   { opacity: 0; transform: scale(.5) translateX(16px); }
  70%  { transform: scale(1.08) translateX(-2px); }
  100% { opacity: 1; transform: scale(1) translateX(0); }
}

/* ── LARGE PHOTO ──────────────────────────────────────────── */
#lgr-kiosk-avatar,
.lgr-kiosk-hero-photo {
  width: 160px;  height: 160px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.92);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.16),
    0 0 0 12px rgba(255,255,255,.06),
    0 16px 48px rgba(0,0,0,.35);
  background: rgba(255,255,255,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 1;
  animation: lgr-avatar-arrive .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes lgr-avatar-arrive {
  0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
  70%  { transform: scale(1.06) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}
/* Spinning halo ring behind avatar */
#lgr-kiosk-avatar::before,
.lgr-kiosk-hero-photo::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid transparent;
  background:
    linear-gradient(#0000,#0000) padding-box,
    conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.7), rgba(255,255,255,.0)) border-box;
  animation: lgr-halo-spin 2s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes lgr-halo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
#lgr-kiosk-avatar img,
.lgr-kiosk-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── GREETING MESSAGE ─────────────────────────────────────── */
.lgr-kiosk-hero-greeting {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255,255,255,.20);
  border: 1.5px solid rgba(255,255,255,.40);
  border-radius: 999px;
  padding: 6px 22px;
  margin-bottom: 16px;
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: lgr-greeting-pop .5s cubic-bezier(.34,1.56,.64,1) both,
             lgr-greeting-glow 2.5s ease-in-out .5s infinite;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
@keyframes lgr-greeting-pop {
  0%   { opacity: 0; transform: scale(.55) translateY(-16px); filter: blur(3px); }
  70%  { transform: scale(1.05) translateY(2px); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lgr-greeting-glow {
  0%, 100% { box-shadow: none; }
  50%       { box-shadow: 0 0 18px rgba(255,255,255,.25); }
}

/* ── NAME + REG ───────────────────────────────────────────── */
.lgr-kiosk-hero-identity {
  margin-top: 18px;
  text-align: center;
  z-index: 1;
  padding: 0 16px;
  animation: lgr-identity-rise .5s cubic-bezier(.22,1,.36,1) .15s both;
}
@keyframes lgr-identity-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lgr-kiosk-hero-name {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0,0,0,.35), 0 0 40px rgba(255,255,255,.12);
  letter-spacing: -.01em;
  word-break: break-word;
}
.lgr-kiosk-hero-reg {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  font-weight: 600;
  letter-spacing: .08em;
  margin-top: 6px;
  opacity: .88;
}

/* ── SLIM TIME STRIP ──────────────────────────────────────── */
.lgr-kiosk-card-strip {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-top: 3px solid rgba(255,255,255,.35);
  flex-shrink: 0;
  min-height: 70px;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.lgr-kiosk-strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  flex: 1;
}
.lgr-strip-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.lgr-strip-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--k-muted);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 3px;
}
.lgr-strip-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--k-text);
  font-variant-numeric: tabular-nums;
}
.lgr-strip-duration {
  color: #c77a00;
}
.lgr-kiosk-strip-divider {
  width: 1.5px;
  background: var(--k-border);
  align-self: stretch;
  flex-shrink: 0;
}
.lgr-kiosk-duration-item {
  /* orange tint on time-spent cell */
  background: linear-gradient(135deg, rgba(247,151,30,.07), rgba(255,210,0,.09));
}

/* ── ERROR MSG ────────────────────────────────────────────── */
.lgr-kiosk-error-msg {
  padding: 14px 18px;
  font-size: 15px;
  color: var(--k-danger);
  font-weight: 600;
  background: #fff8f8;
}

/* ── CARD QUOTE STRIP ─────────────────────────────────────── */
#lgr-kiosk-card-quote {
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(102,126,234,.06), rgba(118,75,162,.06));
  border-top: 1.5px solid var(--k-border);
  font-size: 12px;
  line-height: 1.55;
  color: var(--k-text-soft);
  display: none;
  align-items: flex-start;
  gap: 8px;
}

/* ── RIGHT PANEL ─────────────────────────────────────────── */
.lgr-kiosk-right {
  display: flex;
  flex-direction: column;
  background: var(--k-surface);
  border-left: 2px solid var(--k-border);
  overflow: hidden;
  position: relative;
}

.lgr-kiosk-panel-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.lgr-kiosk-panel {
  position: absolute;
  inset: 0;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
  overflow: hidden;
}
.lgr-kiosk-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.lgr-kiosk-panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--k-muted);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--k-border);
}
.lgr-kiosk-panel-label .icon { font-size: 16px; }

/* ── QUOTES PANEL ────────────────────────────────────────── */
.lgr-kiosk-quote-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 10px 0;
}
.lgr-kiosk-quote-icon {
  font-size: 60px;
  line-height: 1;
  background: var(--g-header);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-family: Georgia, serif;
  opacity: .4;
}
.lgr-kiosk-quote-text {
  font-size: 18px;
  font-style: italic;
  line-height: 1.65;
  color: var(--k-text);
  font-weight: 400;
}
.lgr-kiosk-quote-author {
  font-size: 13px;
  font-weight: 700;
  background: var(--g-amber);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BOOKS PANEL ─────────────────────────────────────────── */
.lgr-kiosk-books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
  align-content: start;
}
.lgr-kiosk-book {
  border-radius: var(--k-radius-sm);
  overflow: hidden;
  box-shadow: var(--k-shadow-xs);
  border: 1.5px solid var(--k-border);
  background: #f5f7ff;
  transition: transform .2s, box-shadow .2s;
}
.lgr-kiosk-book:hover { transform: translateY(-3px); box-shadow: var(--k-shadow); }
.lgr-kiosk-book-cover {
  width: 100%; aspect-ratio: 3/4;
  object-fit: cover; display: block;
}
.lgr-kiosk-book-cover-placeholder {
  width: 100%; aspect-ratio: 3/4;
  background: var(--g-header);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  opacity: .7;
}
.lgr-kiosk-book-info { padding: 5px 4px 6px; }
.lgr-kiosk-book-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lgr-kiosk-book-author {
  font-size: 9px;
  color: var(--k-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── NOTICES PANEL ───────────────────────────────────────── */
.lgr-kiosk-notice-list {
  flex: 1; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.lgr-kiosk-notice-item {
  background: #f9faff;
  border: 1.5px solid var(--k-border);
  border-radius: var(--k-radius-sm);
  padding: 12px 14px;
  border-left: 4px solid;
}
.lgr-kiosk-notice-item.type-notification { border-left-color: var(--k-gold); }
.lgr-kiosk-notice-item.type-announcement { border-left-color: var(--k-entry); }
.lgr-kiosk-notice-item.type-tip          { border-left-color: #0284c7; }
.lgr-kiosk-notice-item.type-quote        { border-left-color: var(--k-accent); }

.lgr-kiosk-notice-icon { font-size: 18px; margin-bottom: 5px; display: block; }
.lgr-kiosk-notice-text { font-size: 13px; line-height: 1.5; color: var(--k-text); font-weight: 500; }
.lgr-kiosk-notice-author { font-size: 11px; font-weight: 700; color: var(--k-gold); margin-top: 4px; }

/* ── STATS PANEL ─────────────────────────────────────────── */
.lgr-kiosk-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 4px;
}
.lgr-kiosk-stat-box {
  border-radius: var(--k-radius);
  padding: 18px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--k-shadow-xs);
}
.lgr-kiosk-stat-box::after {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 70px; height: 70px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
}
.lgr-kiosk-stat-box.entries { background: var(--g-entry);  }
.lgr-kiosk-stat-box.exits   { background: var(--g-exit);   }
.lgr-kiosk-stat-box.unique  { background: var(--g-amber);  }
.lgr-kiosk-stat-box.inside  { background: var(--g-teal);   }

.lgr-kiosk-stat-box .number {
  font-size: 44px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  display: block;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.lgr-kiosk-stat-box .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

/* ── OVERALL STATS (secondary row below gate stats) ─────── */
.lgr-kiosk-overall-stats {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border-radius: var(--k-radius);
  border: 1px solid var(--k-border);
}
.lgr-kiosk-overall-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--k-text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.lgr-kiosk-overall-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.lgr-kiosk-overall-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lgr-overall-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--k-text);
  line-height: 1;
}
.lgr-overall-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--k-text-muted);
  font-weight: 600;
}

/* ── ROTATION DOTS ───────────────────────────────────────── */
.lgr-kiosk-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-top: 2px solid var(--k-border);
  flex-shrink: 0;
  background: #f9faff;
}
.lgr-kiosk-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #c4ccf0;
  transition: background .3s, transform .3s, width .3s;
  cursor: pointer;
}
.lgr-kiosk-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--g-header);
  transform: none;
}

/* ── TICKER ──────────────────────────────────────────────── */
.lgr-kiosk-ticker {
  background: var(--g-header);
  padding: 10px 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 -2px 16px rgba(99,102,241,.20);
}
.lgr-ticker-badge {
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 4px 14px;
  margin-left: 16px;
  border-radius: var(--k-radius-pill);
  white-space: nowrap;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.35);
}
.lgr-ticker-track { flex: 1; overflow: hidden; margin-left: 14px; }
.lgr-ticker-inner {
  display: flex; gap: 56px; white-space: nowrap;
  animation: lgr-scroll 32s linear infinite;
}
@keyframes lgr-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.lgr-ticker-item {
  font-size: 13px;
  color: rgba(255,255,255,.92);
  font-weight: 500;
}
.lgr-ticker-item::before { content: '◆ '; color: rgba(255,255,255,.5); }

/* ── FULLSCREEN BUTTON ───────────────────────────────────── */
/* Sits inside .lgr-kiosk-clock-wrap (beside date) — never overlaps the clock */
.lgr-kiosk-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.40);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
  line-height: 1;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
  margin-top: 3px;
}
.lgr-kiosk-fullscreen-btn:hover { background: rgba(255,255,255,.35); }

/* ── SCREEN FLASH ────────────────────────────────────────── */
@keyframes lgr-flash-entry {
  0%   { box-shadow: inset 0 0 0 6px rgba(17,153,142,.4); }
  50%  { box-shadow: inset 0 0 80px rgba(56,239,125,.25); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
@keyframes lgr-flash-exit {
  0%   { box-shadow: inset 0 0 0 6px rgba(229,45,39,.45); }
  50%  { box-shadow: inset 0 0 80px rgba(179,18,23,.25); }
  100% { box-shadow: inset 0 0 0 0 transparent; }
}
.lgr-kiosk-page.flash-entry { animation: lgr-flash-entry .9s ease; }
.lgr-kiosk-page.flash-exit  { animation: lgr-flash-exit  .9s ease; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .lgr-kiosk-main { grid-template-columns: 1fr; }
  .lgr-kiosk-right { display: none; }
  .lgr-kiosk-time  { font-size: 26px; }
}


/* ── v10: OFFLINE QUEUE BADGE ─────────────────────────── */
#lgr-kiosk-queue-badge {
    display: none;
    position: fixed;
    top: 14px; left: 14px;
    background: rgba(234, 179, 8, 0.95);
    color: #1a1a1a;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    z-index: 10000;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    animation: lgr-q-pulse 2s ease-in-out infinite;
}
@keyframes lgr-q-pulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.05); }
}

/* ── v10: STADIUM MODE (queue-readable) ───────────────── */
.lgr-kiosk-page.lgr-stadium #lgr-kiosk-result-card {
    max-width: 90vw !important;
    width: 90vw !important;
}
.lgr-kiosk-page.lgr-stadium #lgr-kiosk-avatar,
.lgr-kiosk-page.lgr-stadium #lgr-kiosk-avatar img {
    width: 320px !important;
    height: 320px !important;
    font-size: 140px !important;
}
.lgr-kiosk-page.lgr-stadium #lgr-kiosk-card-name {
    font-size: clamp(48px, 6vw, 96px) !important;
    line-height: 1.05 !important;
}
.lgr-kiosk-page.lgr-stadium #lgr-kiosk-card-reg {
    font-size: clamp(20px, 2vw, 32px) !important;
}
.lgr-kiosk-page.lgr-stadium .lgr-kiosk-type-badge {
    font-size: 28px !important;
    padding: 12px 28px !important;
}
.lgr-kiosk-page.lgr-stadium #lgr-kiosk-card-greeting {
    font-size: clamp(32px, 4vw, 64px) !important;
}
.lgr-kiosk-page.lgr-stadium .lgr-kiosk-card-hero {
    padding: 48px 32px !important;
}


/* v11 — duplicate-scan flash (amber pulse; same card scanned within 3s) */
.lgr-flash-dup { animation: lgrFlashDup 0.5s ease-out; }
@keyframes lgrFlashDup {
    0%   { box-shadow: inset 0 0 0 0 rgba(245,158,11,0); }
    30%  { box-shadow: inset 0 0 0 12px rgba(245,158,11,0.55); }
    100% { box-shadow: inset 0 0 0 0 rgba(245,158,11,0); }
}

/* ══════════════════════════════════════════════════════════
   v2.2.0 — SCANNER PAGE ANIMATION UPGRADES
   ══════════════════════════════════════════════════════════ */

/* ── 1. Particle stream columns (always-on ambient) ──────── */
.lgr-kiosk-scan-area .lgr-stream {
  position: absolute;
  top: 0; bottom: 0;
  width: 1.5px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.lgr-kiosk-scan-area .lgr-stream::before {
  content: '';
  display: block;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(56,239,125,.6) 40%,
    rgba(130,255,180,.9) 60%,
    transparent 100%);
  border-radius: 2px;
  animation: lgr-stream-fall var(--sd, 2.4s) var(--sd-delay, 0s) ease-in infinite;
}
@keyframes lgr-stream-fall {
  0%   { transform: translateY(-80px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  100% { transform: translateY(calc(100% + 200px)); opacity: 0; }
}

/* ── 2. Hexagonal grid overlay ───────────────────────────── */
.lgr-kiosk-scan-area .lgr-hex-grid {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpolygon points='28,2 54,17 54,47 28,62 2,47 2,17' fill='none' stroke='rgba(102%2C126%2C234%2C0.10)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 64px;
  opacity: .5;
  pointer-events: none;
  z-index: 1;
  animation: lgr-hex-pulse 6s ease-in-out infinite;
}
@keyframes lgr-hex-pulse {
  0%,100% { opacity: .25; }
  50%      { opacity: .55; }
}

/* ── 3. Data-matrix corner scanlines ─────────────────────── */
.lgr-kiosk-scan-frame .lgr-scan-line-h,
.lgr-kiosk-scan-frame .lgr-scan-line-v {
  position: absolute;
  background: rgba(56,239,125,.55);
  pointer-events: none;
}
.lgr-kiosk-scan-frame .lgr-scan-line-h {
  top: 50%; left: 0; right: 0;
  height: 1px;
  transform: translateY(-50%);
  animation: lgr-crosshair-h 3.2s ease-in-out infinite;
}
.lgr-kiosk-scan-frame .lgr-scan-line-v {
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  animation: lgr-crosshair-v 3.2s ease-in-out infinite;
}
@keyframes lgr-crosshair-h {
  0%,100% { opacity: .15; transform: translateY(-50%) scaleX(1); }
  50%      { opacity: .55; transform: translateY(-50%) scaleX(1.05); }
}
@keyframes lgr-crosshair-v {
  0%,100% { opacity: .15; transform: translateX(-50%) scaleY(1); }
  50%      { opacity: .55; transform: translateX(-50%) scaleY(1.05); }
}

/* ── 4. Turbo laser — double-width, rainbow gradient ─────── */
.lgr-scan-laser-v2 {
  position: absolute;
  left: 4%; right: 4%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(56,239,125,.05) 5%,
    rgba(56,239,125,.9) 25%,
    rgba(130,255,210,1)  45%,
    rgba(200,255,255,1)  50%,
    rgba(130,255,210,1)  55%,
    rgba(56,239,125,.9) 75%,
    rgba(56,239,125,.05) 95%,
    transparent 100%);
  box-shadow:
    0 0 4px 1px rgba(56,239,125,.8),
    0 0 16px 5px rgba(56,239,125,.45),
    0 0 40px 14px rgba(56,239,125,.18),
    0 0 70px 22px rgba(102,126,234,.12);
  top: 20%;
  animation: lgr-laser-v2-sweep 2.2s cubic-bezier(.4,0,.6,1) infinite;
  pointer-events: none;
  z-index: 5;
}
.lgr-scan-laser-v2::before {
  content: '';
  position: absolute;
  top: -20px; bottom: -20px;
  left: 5%; right: 5%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(56,239,125,.08) 45%,
    rgba(56,239,125,.13) 50%,
    rgba(56,239,125,.08) 55%,
    transparent 100%);
  pointer-events: none;
}
@keyframes lgr-laser-v2-sweep {
  0%   { top: 16%; opacity: 0;   transform: scaleX(.85); }
  6%   { opacity: 1;   transform: scaleX(1); }
  94%  { opacity: 1;   transform: scaleX(1); }
  100% { top: 87%; opacity: 0;   transform: scaleX(.85); }
}

/* ── 5. Ambient floating glows (background bokeh) ────────── */
.lgr-bokeh {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(20px);
}
.lgr-bokeh-1 {
  width: 90px; height: 90px;
  top: 15%; left: 10%;
  background: radial-gradient(circle, rgba(56,239,125,.22) 0%, transparent 70%);
  animation: lgr-bokeh-drift 11s ease-in-out infinite;
}
.lgr-bokeh-2 {
  width: 60px; height: 60px;
  top: 60%; right: 8%;
  background: radial-gradient(circle, rgba(102,126,234,.28) 0%, transparent 70%);
  animation: lgr-bokeh-drift 8s ease-in-out infinite reverse;
}
.lgr-bokeh-3 {
  width: 50px; height: 50px;
  bottom: 10%; left: 20%;
  background: radial-gradient(circle, rgba(255,180,100,.18) 0%, transparent 70%);
  animation: lgr-bokeh-drift 13s ease-in-out infinite 3s;
}
@keyframes lgr-bokeh-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(18px,-14px) scale(1.2); }
  66%      { transform: translate(-12px,20px) scale(.85); }
}

/* ── 6. Ready-state shimmer text effect ──────────────────── */
.lgr-kiosk-scan-area h2 {
  position: relative;
  display: inline-block;
}
.lgr-kiosk-scan-area h2::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.0) 30%,
    rgba(255,255,255,.6) 50%,
    rgba(255,255,255,.0) 70%,
    transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lgr-text-sweep 4.5s ease-in-out infinite 1s;
  pointer-events: none;
}
@keyframes lgr-text-sweep {
  0%,100% { background-position: -200% center; }
  50%      { background-position:  200% center; }
}

/* ── 7. Turbo SUCCESS flash — neon border strobe ─────────── */
.lgr-kiosk-scan-area.lgr-scan-success-v2 {
  animation: lgr-success-strobe .7s ease forwards;
}
@keyframes lgr-success-strobe {
  0%   { box-shadow: 0 0 0 1.5px rgba(56,239,125,.4),  0 8px 32px rgba(102,126,234,.35); }
  20%  { box-shadow: 0 0 0 6px  rgba(56,239,125,1),    0 0 80px rgba(56,239,125,.6),  inset 0 0 40px rgba(56,239,125,.15); }
  40%  { box-shadow: 0 0 0 3px  rgba(56,239,125,.5),   0 0 40px rgba(56,239,125,.3); }
  60%  { box-shadow: 0 0 0 8px  rgba(56,239,125,.9),   0 0 100px rgba(56,239,125,.5), inset 0 0 60px rgba(56,239,125,.2); }
  100% { box-shadow: 0 0 0 1.5px rgba(102,126,234,.4), 0 8px 32px rgba(102,126,234,.35); }
}

/* ── 8. Card hero — upgraded neon ring on avatar ─────────── */
#lgr-kiosk-avatar,
.lgr-kiosk-hero-photo {
  box-shadow:
    0 0 0 5px rgba(255,255,255,.92),
    0 0 0 10px rgba(255,255,255,.15),
    0 0 0 16px rgba(255,255,255,.06),
    0 0 40px rgba(0,0,0,.4),
    0 0 80px rgba(56,239,125,.18);
}

/* ── 9. Entry card hero — subtle scan-line overlay ───────── */
.lgr-kiosk-card-hero.entry::after {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,.03) 3px,
      rgba(255,255,255,.03) 4px
    ),
    radial-gradient(ellipse at 80% 100%, rgba(255,255,255,.06), transparent 60%);
}

/* ── 10. Kiosk page — subtle grid texture ────────────────── */
.lgr-kiosk-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(102,126,234,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102,126,234,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 11. Input — neon underline + floating placeholder ─────── */
.lgr-kiosk-input:focus::placeholder {
  opacity: .3;
  transform: translateY(-2px);
  transition: all .3s;
}
.lgr-kiosk-input:focus {
  border-color: #38ef7d;
  box-shadow:
    0 0 0 3px rgba(56,239,125,.18),
    0 0 30px rgba(56,239,125,.25),
    0 4px 20px rgba(56,239,125,.15);
  background: rgba(255,255,255,.12);
}

/* ── 12. Scan area — corner bracket hover-in on page load ── */
@keyframes lgr-corner-arrive {
  0%   { opacity: 0; transform: scale(.4); }
  70%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.lgr-scan-corner.tl { animation: lgr-corner-arrive .5s cubic-bezier(.34,1.56,.64,1) .05s both, lgr-corner-pulse 2.8s ease-in-out .55s infinite; }
.lgr-scan-corner.tr { animation: lgr-corner-arrive .5s cubic-bezier(.34,1.56,.64,1) .12s both, lgr-corner-pulse 2.8s ease-in-out .90s infinite; }
.lgr-scan-corner.bl { animation: lgr-corner-arrive .5s cubic-bezier(.34,1.56,.64,1) .19s both, lgr-corner-pulse 2.8s ease-in-out 1.25s infinite; }
.lgr-scan-corner.br { animation: lgr-corner-arrive .5s cubic-bezier(.34,1.56,.64,1) .26s both, lgr-corner-pulse 2.8s ease-in-out 1.60s infinite; }

/* ── 13. Orbit rings — triple layer ────────────────────────── */
.lgr-kiosk-scan-area .lgr-scan-orbit-outer {
  position: absolute;
  top: 50%; left: 50%;
  width: 280px; height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  border: 1px solid transparent;
  background:
    linear-gradient(#080520,#080520) padding-box,
    conic-gradient(from 0deg,
      rgba(56,239,125,.0) 0%,
      rgba(56,239,125,.3) 15%,
      rgba(102,126,234,.5) 35%,
      rgba(56,239,125,.0) 50%,
      rgba(255,180,100,.4) 65%,
      rgba(56,239,125,.3) 85%,
      rgba(56,239,125,.0) 100%) border-box;
  animation: lgr-orbit-spin 7s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* ── 14. Kiosk header — shimmer sweep upgrade ─────────────── */
.lgr-kiosk-header::before {
  animation: lgr-header-orb 10s ease-in-out infinite alternate;
}
@keyframes lgr-header-orb {
  0%   { transform: translate(0,0) scale(1);   opacity: .6; }
  100% { transform: translate(-40px,20px) scale(1.3); opacity: 1; }
}

/* ── 15. Ticker — gradient fade edges ────────────────────── */
.lgr-kiosk-ticker {
  position: relative;
}
.lgr-kiosk-ticker::before,
.lgr-kiosk-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 2;
}
.lgr-kiosk-ticker::before {
  left: 0;
  background: linear-gradient(90deg, rgba(102,126,234,1) 0%, transparent 100%);
}
.lgr-kiosk-ticker::after {
  right: 0;
  background: linear-gradient(270deg, rgba(118,75,162,1) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════════════════════
   LEADERBOARD PANEL — Animated Top-3 (All-Time & This Month)
   ═══════════════════════════════════════════════════════════ */

/* Panel container — two sections stacked vertically */
.lgr-lb-panel {
  gap: 0;
  padding: 16px 18px 12px;
}

.lgr-lb-label {
  margin-bottom: 10px;
  padding-bottom: 8px;
}

/* Decorative divider between all-time and this-month */
.lgr-lb-divider {
  height: 2px;
  margin: 10px 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--k-border) 20%,
    var(--k-accent) 50%,
    var(--k-border) 80%,
    transparent 100%);
  flex-shrink: 0;
}

.lgr-lb-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.lgr-lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.lgr-lb-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--k-muted);
  font-size: 13px;
  font-style: italic;
  text-align: center;
  padding: 8px;
}

/* ── Single leaderboard row ──────────────────────────────── */
.lgr-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--k-radius-sm);
  background: rgba(99,102,241,.05);
  border: 1.5px solid transparent;
  transition: border-color .3s, background .3s, transform .3s;

  /* Entry animation */
  opacity: 0;
  transform: translateX(-24px);
  animation: lgr-lb-slide-in .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* Stagger handled by inline animation-delay */
@keyframes lgr-lb-slide-in {
  to { opacity: 1; transform: translateX(0); }
}

/* Rank-specific accent colours */
.lgr-lb-row.rank-1 {
  background: linear-gradient(135deg, rgba(247,215,30,.12) 0%, rgba(255,200,0,.06) 100%);
  border-color: rgba(247,215,30,.35);
}
.lgr-lb-row.rank-2 {
  background: linear-gradient(135deg, rgba(192,192,192,.12) 0%, rgba(180,180,180,.06) 100%);
  border-color: rgba(192,192,192,.30);
}
.lgr-lb-row.rank-3 {
  background: linear-gradient(135deg, rgba(176,120,62,.12) 0%, rgba(150,90,40,.06) 100%);
  border-color: rgba(176,120,62,.28);
}

/* Medal emoji */
.lgr-lb-medal {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}

/* Avatar circle — initials */
.lgr-lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--g-header);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99,102,241,.25);
  letter-spacing: -.02em;
}

/* Month section avatars get a different gradient */
.lgr-lb-avatar-month {
  background: var(--g-teal);
}

/* Name + reg */
.lgr-lb-info {
  flex: 1;
  min-width: 0;
}
.lgr-lb-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.lgr-lb-meta {
  font-size: 10px;
  color: var(--k-muted);
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Visit-days score */
.lgr-lb-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.lgr-lb-days {
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: var(--g-header);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}
.lgr-lb-row.rank-1 .lgr-lb-days {
  background: var(--g-amber);
  -webkit-background-clip: text;
  background-clip: text;
}
.lgr-lb-days-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--k-muted);
  font-weight: 600;
}

/* Month label inside panel-label */
.lgr-lb-month-label {
  color: var(--k-entry);
}

/* ── Shimmer "new data" flash when JS refreshes ─────────── */
@keyframes lgr-lb-refresh-flash {
  0%   { background-color: rgba(99,102,241,.0); }
  30%  { background-color: rgba(99,102,241,.08); }
  100% { background-color: rgba(99,102,241,.0); }
}
.lgr-lb-row.lgr-lb-refreshed {
  animation: lgr-lb-slide-in .45s cubic-bezier(.34,1.56,.64,1) both,
             lgr-lb-refresh-flash .7s ease .45s;
}