:root{
 --bg-0:#1a1512;
 --bg-1:#241e1a;
 --bg-2:#2d2520;
 --amber:#e9c46a;
 --amber-light:#f4d484;
 --moss:#7c9473;
 --moss-light:#9fb493;
 --stone:#d4cebe;
 --paper:#eee8da;
 --ink:#0f1811;
 --line: rgba(212,206,190,0.12);
 --ok:#7cb46b;
 --danger:#d97b6c;
 --max: 460px;
 }
 *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
 html,body{margin:0; padding:0;}
 body{
  background:
   radial-gradient(ellipse at 20% 0%, rgba(233,196,106,0.06), transparent 45%),
   linear-gradient(180deg, var(--bg-0) 0%, #100d0b 100%);
  font-family:'Work Sans', system-ui, sans-serif;
  color:var(--stone);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
 }
 h1,h2,h3{font-family:'Big Shoulders Display', system-ui, sans-serif; font-weight:700; text-transform:uppercase; color:var(--paper); margin:0;}
 button{font-family:inherit; cursor:pointer;}
 .hidden{display:none !important;}
 .app{max-width:var(--max); margin:0 auto; padding:0 16px 40px; min-height:100vh;}

 .eyebrow{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--amber); display:flex; align-items:center; gap:10px;
 }
 .eyebrow::before{content:""; width:9px; height:9px; background:var(--amber); clip-path:polygon(50% 0%, 0% 100%, 100% 100%);}

 .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border:1px solid transparent; border-radius:10px;
  font-family:'JetBrains Mono', monospace; font-size:12.5px; text-transform:uppercase;
  letter-spacing:0.06em; text-decoration:none; transition:all 0.2s; width:100%;
 }
 .btn-fill{background:var(--amber); color:var(--ink);}
 .btn-fill:hover{background:var(--amber-light);}
 .btn-ghost{background:transparent; border-color:var(--line); color:var(--paper);}
 .btn-ghost:hover{border-color:var(--amber); color:var(--amber);}
 .btn-danger{background:rgba(217,123,108,0.12); border:1px solid rgba(217,123,108,0.4); color:var(--danger);}
 .icon-btn{
  background:transparent; border:1px solid var(--line); color:var(--paper);
  width:38px; height:38px; border-radius:10px; font-size:20px; line-height:1;
 }
 .spacer{flex:1;}

 /* ---------- ROLE PICKER ---------- */
 .role-picker{padding-top:64px; text-align:center;}
 .role-picker .eyebrow{justify-content:center;}
 .role-picker h1{font-size:52px; line-height:0.95; margin:18px 0 10px;}
 .role-picker h1 em{font-style:normal; color:var(--amber);}
 .role-picker p{font-size:14px; color:#b0bcb8; margin:0 0 36px;}
 .rp-buttons{display:flex; flex-direction:column; gap:14px; max-width:300px; margin:0 auto;}
 .rp-note{margin-top:40px; font-size:11px; color:#7d776a; font-family:'JetBrains Mono', monospace; letter-spacing:0.04em;}

 /* ---------- VIEWS ---------- */
 .view{padding-top:14px;}
 .view-top{display:flex; align-items:center; gap:12px; padding:8px 0 14px;}
 .view-title{font-family:'Big Shoulders Display', sans-serif; font-size:22px; text-transform:uppercase; color:var(--paper); letter-spacing:0.03em;}

 /* pass selector (demo) */
 .pass-select{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
 .pass-select button{
  background:var(--bg-1); border:1px solid var(--line); color:var(--paper);
  padding:8px 14px; border-radius:20px; font-size:12px; font-family:'JetBrains Mono', monospace;
 }
 .pass-select button.active{background:rgba(233,196,106,0.15); border-color:var(--amber); color:var(--amber);}

 /* ---------- PASS CARD ---------- */
 .pass{background:linear-gradient(160deg, #2d2520 0%, #1c1713 100%); border:1px solid var(--line); border-radius:22px; overflow:hidden; position:relative;}
 .pass::after{content:""; position:absolute; top:-60px; right:-60px; width:180px; height:180px; background:radial-gradient(circle, rgba(233,196,106,0.14), transparent 70%);}
 .pass-accent{height:8px; background:linear-gradient(90deg, var(--amber), var(--moss-light));}
 .pass-head{padding:18px 20px 10px; display:flex; justify-content:space-between; align-items:flex-start;}
 .pass-brand{font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; color:var(--paper);}
 .pass-brand span{color:var(--amber);}
 .pass-type{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--moss-light); margin-top:3px;}
 .pass-valid{background:rgba(124,180,107,0.14); border:1px solid rgba(124,180,107,0.35); color:#a8d69a; font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; padding:4px 9px; border-radius:20px;}
 .pass-valid.voided{background:rgba(217,123,108,0.14); border-color:rgba(217,123,108,0.4); color:var(--danger);}
 .pass-body{padding:4px 20px 18px;}
 .pass-id-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
 .pass-photo{width:64px; height:64px; border-radius:12px; overflow:hidden; flex-shrink:0; background:var(--bg-2); display:flex; align-items:center; justify-content:center; border:1px solid rgba(233,196,106,0.3);}
 .pass-photo img{width:100%; height:100%; object-fit:cover;}
 .pass-photo .ph-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Big Shoulders Display', sans-serif; font-size:26px; color:var(--amber); background:#2d2520;}
 .pass-id-info{min-width:0;}
 .pass-id-info .name{font-family:'Big Shoulders Display', sans-serif; font-size:21px; font-weight:700; color:var(--paper); text-transform:uppercase; letter-spacing:0.02em; line-height:1.1;}
 .pass-id-info .pnum{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em; color:var(--amber); margin-top:3px;}
 .pass-id-info .hint{font-size:10px; color:#8b8578; margin-top:4px;}
 .pass-qr{padding-top:14px; text-align:center;}
 .pass-qr canvas{background:var(--paper); padding:8px; border-radius:10px; display:block; margin:0 auto;}
 .pass-qr-info{margin-top:8px;}
 .pass-qr-info .qr-label{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss-light);}
 .pass-qr-info .qr-txt{font-size:11.5px; color:#e0dccc; margin-top:4px; line-height:1.5;}

 /* ---------- STATS ---------- */
 .stats{margin:12px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
 .stat{background:var(--bg-1); border:1px solid var(--line); border-radius:14px; padding:12px 14px;}
 .stat .k{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss-light);}
 .stat .v{font-family:'Big Shoulders Display', sans-serif; font-size:24px; font-weight:700; color:var(--paper); margin-top:3px;}
 .stat .v em{font-style:normal; color:var(--amber);}
 .stat .s{font-size:10px; color:#8b8578; margin-top:2px;}

 /* ---------- LOG ---------- */
 .log{margin:12px 0 0; background:var(--bg-1); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
 .log-head{padding:12px 16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss-light);}
 .log-row{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:12px;}
 .log-row:last-child{border-bottom:none;}
 .log-row .d{color:var(--paper); font-weight:600; width:74px; flex-shrink:0;}
 .log-row .t{color:#8b8578; font-family:'JetBrains Mono', monospace; font-size:10px; width:44px; flex-shrink:0;}
 .log-row .tag{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 8px; border-radius:12px;}
 .log-row .tag.full{background:rgba(233,196,106,0.14); border:1px solid rgba(233,196,106,0.3); color:var(--amber);}
 .log-row .tag.half{background:rgba(159,180,147,0.12); border:1px solid rgba(159,180,147,0.3); color:var(--moss-light);}
 .log-row .tag.staff{background:rgba(159,180,147,0.12); border:1px solid rgba(159,180,147,0.3); color:var(--moss-light);}
 .log-row .tag.trip{background:rgba(233,196,106,0.14); border:1px solid rgba(233,196,106,0.3); color:var(--amber);}
 .log-row .where{margin-left:auto; color:#8b8578; font-size:10px;}

 .terms{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:9.5px; color:#7d776a; line-height:1.55;}
 .terms b{color:#9a9384;}

 /* photo upload */
 .photo-upload{margin-top:12px;}
 .photo-upload .pu-hint{font-size:11.5px; color:#b0bcb8; line-height:1.5;}
 .photo-upload .btn{margin-top:10px; padding:11px 14px; font-size:11px;}

 /* ---------- DRIVER SCAN ---------- */
 .scan-zone{margin-top:4px;}
 .camera-box{position:relative; border-radius:18px; overflow:hidden; background:#000; aspect-ratio:4/4.2; display:flex; align-items:center; justify-content:center;}
 .camera-box video{width:100%; height:100%; object-fit:cover;}
 .scan-frame{position:absolute; inset:0; border:2px dashed rgba(233,196,106,0.5); border-radius:18px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:18px; pointer-events:none;}
 .scan-frame span{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--amber); background:rgba(0,0,0,0.55); padding:6px 12px; border-radius:20px;}
 .scan-controls{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
 .scan-controls .btn{flex:1; min-width:130px; padding:12px 10px; font-size:11px;}
 .manual-input{
  width:100%; margin-top:10px; padding:12px 14px; border-radius:10px;
  background:var(--bg-1); border:1px solid var(--line); color:var(--paper);
  font-family:'JetBrains Mono', monospace; font-size:13px;
 }
 .manual-input:focus{outline:2px solid var(--amber); outline-offset:2px;}

 /* driver result */
 .driver-result{margin-top:14px; background:var(--bg-1); border:1px solid rgba(124,180,107,0.35); border-radius:18px; padding:14px;}
 .driver-result.voided{border-color:rgba(217,123,108,0.4);}
 .driver-result .ok{display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line);}
 .driver-result .ok .dot{width:10px; height:10px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px rgba(124,180,107,0.5);}
 .driver-result.voided .ok .dot{background:var(--danger); box-shadow:0 0 8px rgba(217,123,108,0.5);}
 .driver-result .ok .txt{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#a8d69a;}
 .driver-result.voided .ok .txt{color:var(--danger);}
 .driver-id{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);}
 .driver-id .ph{width:48px; height:48px; border-radius:10px; overflow:hidden; background:var(--bg-2); flex-shrink:0; border:1px solid rgba(233,196,106,0.3);}
 .driver-id .ph img{width:100%; height:100%; object-fit:cover;}
 .driver-id .ph .ph-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:'Big Shoulders Display', sans-serif; font-size:20px; color:var(--amber);}
 .driver-id .nm{font-family:'Big Shoulders Display', sans-serif; font-size:19px; font-weight:700; color:var(--paper); text-transform:uppercase;}
 .driver-id .pn{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.1em; color:var(--amber); margin-top:2px;}
 .driver-id .st{margin-left:auto; font-size:10px; color:#a8d69a; font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.08em;}
 .driver-id .st::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--ok); margin-right:5px; box-shadow:0 0 6px rgba(124,180,107,0.5);}
 .record-btns{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-top:12px;}
 .record-btns button{display:block; text-align:center; padding:14px 8px; border-radius:12px; border:none; font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;}
 .record-btns .full{background:var(--amber); color:var(--ink);}
 .record-btns .half{background:var(--bg-2); color:var(--paper); border:1px solid var(--line);}
 .record-btns .cap{grid-column:1/-1; text-align:center; font-size:9.5px; color:#8b8578; font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.08em; padding-top:2px;}

 /* route picker */
 .route-picker{margin-top:14px; background:var(--bg-1); border:1px solid var(--line); border-radius:16px; padding:14px;}
 .route-picker .rp-title{font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--moss-light); margin-bottom:10px;}
 .route-picker button{
  display:block; width:100%; text-align:left; padding:11px 14px; margin-bottom:8px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px; color:var(--paper); font-size:13px;
 }
 .route-picker button:last-child{margin-bottom:0;}
 .route-picker button.active{border-color:var(--amber); color:var(--amber);}

 /* sync status */
 .sync-status{margin-top:16px; font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.06em; color:var(--moss-light); line-height:1.7;}
 .sync-status .pending{color:var(--amber);}
 .sync-status .done{color:#a8d69a;}
 .sync-status .offline{color:var(--danger);}