@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
    * { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

    /* ── Scrollbar ─────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
    .dark ::-webkit-scrollbar-thumb { background: #334155; }

    /* ── Pulsing dot ───────────────────────────────────────────── */
    @keyframes dotPing {
      0%       { transform: scale(1);   opacity: .75; }
      75%,100% { transform: scale(2.5); opacity: 0;   }
    }
    .dot-ping { animation: dotPing 1.6s cubic-bezier(0,0,.2,1) infinite; }

    /* ── Card entrance ─────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .fade-up { animation: fadeUp .3s ease forwards; }

    /* ── Location panel slide ──────────────────────────────────── */
    #locPanel {
      opacity: 0; transform: translateY(-10px);
      transition: opacity .2s ease, transform .2s ease;
    }
    #locPanel.panel-open { opacity:1; transform:translateY(0); }
    .location-overlay { display:none; }
    .location-overlay.is-open { display:flex; }
    .upcoming-list { max-height:268px; }
    .ended-list { max-height:224px; }

    /* ── Monospace digits ──────────────────────────────────────── */
    .digits {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
      letter-spacing: -0.03em;
    }

    /* ── Scan-line animation ───────────────────────────────────── */
    @keyframes scanLine {
      0%   { top:8%;  opacity:.6; }
      48%  { top:85%; opacity:.6; }
      50%  { opacity:0; }
      52%  { top:8%;  opacity:0; }
      54%  { opacity:.6; }
      100% { top:85%; opacity:.6; }
    }
    .scan-line {
      position:absolute; left:12%; right:12%; height:2px;
      background:linear-gradient(90deg,transparent,#34d399,transparent);
      border-radius:9999px;
      animation:scanLine 2.4s cubic-bezier(.45,0,.55,1) infinite;
      pointer-events:none;
    }

    /* ── Glow auras ────────────────────────────────────────────── */
    .aura-green  { box-shadow:0 0 80px rgba(16,185,129,.08), 0 0 200px rgba(16,185,129,.04); }
    .aura-indigo { box-shadow:0 0 80px rgba(99,102,241,.08), 0 0 200px rgba(99,102,241,.04); }
    .aura-amber  { box-shadow:0 0 80px rgba(251,191,36,.07), 0 0 200px rgba(251,191,36,.03); }

    /* ── kbd ───────────────────────────────────────────────────── */
    kbd {
      display:inline-flex; align-items:center;
      padding:.1rem .4rem; font-size:.68rem; font-weight:600;
      color:#94a3b8; background:#1e293b;
      border:1px solid #334155; border-radius:.3rem; line-height:1.5;
    }

    /* ── Theme toggle icon swap ────────────────────────────────── */
    .icon-sun  { display:none; }
    .icon-moon { display:block; }
    .dark .icon-sun  { display:block; }
    .dark .icon-moon { display:none; }

    /* ════════════════════════════════════════════════════════════
       SCAN ALERT OVERLAY
    ════════════════════════════════════════════════════════════ */

    /* Backdrop */
    #scanAlert {
      position:fixed; inset:0; z-index:3000;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.65); backdrop-filter:blur(6px);
      opacity:0; pointer-events:none;
      transition:opacity .15s ease;
    }
    #scanAlert.is-visible { opacity:1; pointer-events:auto; }

    /* Card */
    .scan-card {
      position:relative; overflow:hidden;
      width:90%; max-width:500px;
      background:#ffffff;
      border-radius:28px;
      padding:52px 52px 40px;
      text-align:center;
      box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
      transform:scale(.9) translateY(16px);
      transition:transform .25s cubic-bezier(.34,1.56,.64,1);
    }
    .dark .scan-card { background:#0f172a; }
    #scanAlert.is-visible .scan-card { transform:scale(1) translateY(0); }

    /* Top accent bar */
    .scan-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:5px;
      border-radius:28px 28px 0 0;
    }
    .scan-checkin::before  { background:#10b981; }
    .scan-checkout::before { background:#38bdf8; }
    .scan-invalid::before,
    .scan-rejected::before { background:#f43f5e; }
    .scan-pending::before  { background:#f59e0b; }
    .scan-cooldown::before { background:#fb923c; }

    /* Icon circle */
    .scan-icon-wrap {
      width:92px; height:92px; border-radius:50%;
      margin:0 auto 22px;
      display:flex; align-items:center; justify-content:center;
    }
    .scan-checkin  .scan-icon-wrap { background:rgba(16,185,129,.12); }
    .scan-checkout .scan-icon-wrap { background:rgba(56,189,248,.12); }
    .scan-invalid  .scan-icon-wrap,
    .scan-rejected .scan-icon-wrap { background:rgba(244,63,94,.12); }
    .scan-pending  .scan-icon-wrap { background:rgba(245,158,11,.12); }
    .scan-cooldown .scan-icon-wrap { background:rgba(251,146,60,.12); }

    /* Label (small caps above title) */
    .scan-label {
      font-size:10px; font-weight:800;
      letter-spacing:.22em; text-transform:uppercase;
      margin-bottom:10px;
    }
    .scan-checkin  .scan-label { color:#10b981; }
    .scan-checkout .scan-label { color:#38bdf8; }
    .scan-invalid  .scan-label,
    .scan-rejected .scan-label { color:#f43f5e; }
    .scan-pending  .scan-label { color:#f59e0b; }
    .scan-cooldown .scan-label { color:#fb923c; }

    /* Main message */
    .scan-msg {
      font-size:22px; font-weight:800; line-height:1.3;
      margin-bottom:8px; color:#0f172a;
    }
    .dark .scan-msg { color:#f1f5f9; }

    /* Checkin count badge */
    .scan-count {
      display:inline-flex; align-items:center; gap:7px;
      padding:8px 20px; border-radius:999px;
      font-size:15px; font-weight:700; margin-top:12px;
    }
    .scan-checkin  .scan-count { background:rgba(16,185,129,.12); color:#059669; }
    .scan-checkout .scan-count { background:rgba(56,189,248,.12); color:#0284c7; }
    .dark .scan-checkin  .scan-count { background:rgba(16,185,129,.15); color:#34d399; }
    .dark .scan-checkout .scan-count { background:rgba(56,189,248,.15); color:#38bdf8; }

    /* Progress bar (auto-dismiss timer) */
    .scan-progress {
      position:absolute; bottom:0; left:0;
      height:4px; width:100%;
      transform-origin:left;
      border-radius:0 0 28px 28px;
    }
    .scan-checkin  .scan-progress { background:#10b981; }
    .scan-checkout .scan-progress { background:#38bdf8; }
    .scan-invalid  .scan-progress,
    .scan-rejected .scan-progress { background:#f43f5e; }
    .scan-pending  .scan-progress { background:#f59e0b; }
    .scan-cooldown .scan-progress { background:#fb923c; }

    @keyframes scan-shrink {
      from { transform:scaleX(1); }
      to   { transform:scaleX(0); }
    }