:root{
    --bg:#170F0D; --surface:#231715; --surface-2:#2F1E1B; --border:#432722;
    --text:#F8EFE9; --text-muted:#BB988B;
    --accent:#D6293A; --accent-light:#F04452; --accent-dark:#8C1119;
    --success:#2BB673; --success-bg:#12261D;
    --danger:#FF4136; --danger-bg:#2B1512;
    --warning:#F2994A; --warning-bg:#2E2013;
    --display:'Anton', sans-serif; --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(--display);font-weight:400;font-size:19px;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:#FDEDEC;}
  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,textarea{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;}
  textarea{resize:vertical;font-family:inherit;}
  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:#FDEDEC;border:none;
    border-radius:7px;font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer;}
  button.primary:hover{background:var(--accent-light);}
  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(214,41,58,0.12);}
  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(214,41,58,0.12);}
  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(--warning-bg);color:var(--warning);}
  .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;}

  /* ---- Hero (foto suasana lari) ---- */
  .hero{position:relative;margin:-36px -24px 32px;height:340px;overflow:hidden;background:#000;}
  .hero img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0.55;}
  .hero-overlay{position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(23,15,13,0.35) 0%, rgba(23,15,13,0.55) 55%, var(--bg) 100%),
               linear-gradient(90deg, rgba(140,17,25,0.55) 0%, rgba(140,17,25,0.05) 55%);}
  .hero-content{position:absolute;left:0;right:0;bottom:38px;padding:0 28px;}
  .hero-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-light);margin:0 0 8px;}
  .hero-title{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,56px);line-height:0.95;
    letter-spacing:0.5px;color:#FDEDEC;margin:0;text-transform:uppercase;}
  .hero-subtitle{font-size:14px;color:#EAD9D3;max-width:480px;margin:12px 0 0;}
  .hero-tape{height:8px;width:120px;margin-top:16px;
    background:repeating-linear-gradient(-45deg, var(--accent) 0 10px, #FDEDEC 10px 20px);
    border-radius:2px;}
  @media (max-width:720px){.hero{height:260px;} .hero-content{bottom:24px;padding:0 20px;}}

  .banner-strip{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:12px;margin-bottom:22px;overflow:hidden;}
  .banner-strip img{width:96px;height:72px;object-fit:cover;border-radius:7px;flex-shrink:0;}
  .banner-strip p{margin:0;font-size:13px;color:var(--text-muted);}
  .banner-strip strong{color:var(--text);}

  #qr-reader{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
  #qr-reader video{border-radius:var(--radius);}
  button.small:disabled{color:var(--text-muted);border-color:var(--border);cursor:not-allowed;}
  button.small:disabled:hover{background:transparent;}

  input[type="file"]{padding:9px;color:var(--text-muted);font-size:12px;}
  input[type="file"]::file-selector-button{background:var(--surface-2);color:var(--text);border:1px solid var(--border);
    border-radius:6px;padding:6px 10px;font-family:var(--sans);font-size:12px;margin-right:10px;cursor:pointer;}

  .events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:32px;}
  .event-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
    cursor:pointer;transition:border-color 0.15s;display:flex;flex-direction:column;}
  .event-card:hover{border-color:var(--accent);}
  .event-card-poster{width:100%;height:130px;object-fit:cover;background:var(--surface-2);display:block;}
  .event-card-body{padding:14px;flex:1;display:flex;flex-direction:column;}
  .event-card-date{font-family:var(--mono);font-size:11px;color:var(--accent-light);margin:0 0 4px;}
  .event-card-name{font-size:15px;font-weight:600;margin:0 0 6px;}
  .event-card-desc{font-size:12px;color:var(--text-muted);margin:0 0 12px;flex:1;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .event-card-empty{color:var(--text-muted);font-size:13px;grid-column:1/-1;}