:root{
    --bg:#14171A; --surface:#1E2226; --surface-2:#262B30; --border:#333A40;
    --text:#F2F0EA; --text-muted:#8B9198;
    --accent:#FF6B35; --accent-dark:#C7481A;
    --success:#2BB673; --success-bg:#12261D;
    --danger:#E5484D; --danger-bg:#2A1618;
    --warning:#E5B93D; --warning-bg:#2A2314;
    --mono:'Space Mono', monospace; --sans:'Inter', sans-serif;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.5;}
  a{color:inherit;}
  header.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
    padding:14px 24px;border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap;gap:12px;}
  .brand{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:0.5px;display:flex;align-items:center;gap:8px;}
  .brand-mark{color:var(--accent);}
  .topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  #event-select{padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:7px;
    color:var(--text);font-size:12px;font-family:var(--sans);max-width:220px;}
  nav.tabs{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:var(--radius);flex-wrap:wrap;}
  .tab{font-family:var(--sans);font-weight:500;font-size:13px;color:var(--text-muted);background:transparent;
    border:none;padding:9px 14px;border-radius:7px;cursor:pointer;}
  .tab.active{background:var(--accent);color:#1a0d05;}
  main{max-width:960px;margin:0 auto;padding:36px 24px 80px;}
  .view{display:none;}
  .view.active{display:block;}
  h1{font-size:22px;font-weight:600;margin:0 0 4px;}
  .subtitle{color:var(--text-muted);font-size:14px;margin:0 0 28px;}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media (max-width:720px){.grid{grid-template-columns:1fr;}}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}
  label{display:block;font-size:12px;color:var(--text-muted);margin:16px 0 6px;}
  label:first-of-type{margin-top:0;}
  input,select{width:100%;padding:11px 12px;background:var(--surface-2);border:1px solid var(--border);
    border-radius:7px;color:var(--text);font-family:var(--sans);font-size:14px;}
  input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;}
  button.primary{margin-top:20px;width:100%;padding:12px;background:var(--accent);color:#1a0d05;border:none;
    border-radius:7px;font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;}
  button.primary:hover{background:#ff7c4d;}
  button.primary:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;}
  button.secondary{margin-top:12px;width:100%;padding:11px;background:transparent;color:var(--accent);
    border:1px solid var(--accent);border-radius:7px;font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;}
  button.secondary:hover{background:rgba(255,107,53,0.1);}
  button.small{padding:7px 12px;background:transparent;color:var(--accent);border:1px solid var(--accent);
    border-radius:6px;font-family:var(--sans);font-weight:600;font-size:12px;cursor:pointer;}
  button.small:hover{background:rgba(255,107,53,0.1);}
  button.ghost{padding:6px 10px;background:transparent;color:var(--danger);border:1px solid var(--danger);
    border-radius:6px;font-size:11px;cursor:pointer;}
  .bib-card{position:relative;background:var(--surface-2);border-radius:var(--radius);padding:26px 24px 24px 32px;
    transform:rotate(-1.2deg);border:1px solid var(--border);
    background-image:repeating-linear-gradient(to bottom, var(--border) 0 6px, transparent 6px 12px);
    background-size:1px 12px;background-repeat:no-repeat;background-position:16px 0;}
  .bib-empty{color:var(--text-muted);font-size:13px;text-align:center;padding:60px 10px;}
  .bib-number{font-family:var(--mono);font-weight:700;font-size:38px;color:var(--accent);letter-spacing:1px;}
  .bib-name{font-size:16px;font-weight:600;margin-top:2px;}
  .bib-meta{color:var(--text-muted);font-size:12px;margin-top:2px;}
  .bib-qr{margin-top:16px;background:var(--text);padding:8px;border-radius:6px;display:inline-block;}
  .badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;font-family:var(--sans);}
  .badge-finish{background:var(--success-bg);color:var(--success);}
  .badge-course{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border);}
  .badge-over{background:var(--danger-bg);color:var(--danger);}
  .badge-none{background:var(--surface-2);color:var(--text-muted);}
  .row{display:flex;gap:12px;}
  .row > *{flex:1;}
  .scan-result{margin-top:18px;padding:14px 16px;border-radius:8px;font-size:13px;display:none;}
  .scan-result.show{display:block;}
  .scan-result.ok{background:var(--success-bg);color:var(--success);border:1px solid var(--success);}
  .scan-result.err{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger);}
  .scan-result.warn{background:var(--warning-bg);color:var(--warning);border:1px solid var(--warning);}
  .log-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .log-item:last-child{border-bottom:none;}
  .log-time{font-family:var(--mono);color:var(--text-muted);font-size:12px;}
  .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px;}
  @media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr);}}
  .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;}
  .stat-num{font-family:var(--mono);font-size:24px;font-weight:700;}
  .stat-label{font-size:11px;color:var(--text-muted);margin-top:4px;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:left;color:var(--text-muted);font-weight:500;font-size:11px;text-transform:uppercase;
    letter-spacing:0.4px;padding:10px 12px;border-bottom:1px solid var(--border);}
  td{padding:12px;border-bottom:1px solid var(--border);}
  tr:last-child td{border-bottom:none;}
  .bib-cell{font-family:var(--mono);color:var(--accent);}
  .note{font-size:12px;color:var(--text-muted);margin-top:10px;}
  .gate-notice{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);
    padding:24px;color:var(--text-muted);font-size:13px;text-align:center;}
  .kelas-row{display:grid;grid-template-columns:1.4fr 0.7fr 0.7fr 1.6fr 0.5fr;gap:10px;align-items:end;margin-bottom:14px;}
  @media (max-width:800px){.kelas-row{grid-template-columns:1fr 1fr;}}
  .kelas-row label{margin:0 0 4px;}
  .checks{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text-muted);}
  .checks label{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);margin:0;}
  .checks input{width:auto;}
  .event-summary{margin-top:18px;}
  .pill{display:inline-block;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;
    padding:3px 10px;font-size:11px;color:var(--text-muted);margin:2px 4px 2px 0;}
  .auth-status{font-size:12px;color:var(--text-muted);display:flex;align-items:center;gap:8px;}
  .auth-status button{background:transparent;border:1px solid var(--border);color:var(--text-muted);
    padding:6px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-family:var(--sans);}
  .auth-status button:hover{border-color:var(--accent);color:var(--accent);}
  .login-card{max-width:360px;}