:root{--primary:#691c32;--primary-light:#8c2744;--primary-dark:#461120;--primary-rgb:105, 28, 50;--gold:#c49a6c;--gold-light:#dfb98d;--green:#10b981;--green-dark:#059669;--red:#ef4444;--red-dark:#dc2626;--amber:#f59e0b;--amber-dark:#d97706;--bg-dark:#0c0e12;--surface-dark:#141720;--card-dark:#1b202d;--card-light:#232a3b;--border-dark:#2a3346;--text-main:#f8fafc;--text-sub:#94a3b8;--text-dim:#64748b;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 24px #00000080;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-full:9999px;--font-main:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--font-display:"Outfit", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-dark);color:var(--text-main);justify-content:center;align-items:stretch;min-height:100dvh;display:flex;overflow-x:hidden}#app{background-color:var(--surface-dark);flex-direction:column;width:100%;max-width:480px;min-height:100dvh;display:flex;position:relative;box-shadow:0 0 30px #000000b3}.android-topbar{background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);border-bottom:2px solid var(--gold);z-index:100;box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.topbar-brand{align-items:center;gap:10px;display:flex}.topbar-logo{border-radius:var(--radius-sm);object-fit:contain;background:#fff;width:34px;height:34px;padding:2px}.topbar-title{flex-direction:column;display:flex}.topbar-title h1{font-family:var(--font-display);letter-spacing:.5px;color:#fff;font-size:15px;font-weight:700;line-height:1.1}.topbar-title span{color:var(--gold-light);letter-spacing:.8px;text-transform:uppercase;font-size:10px;font-weight:600}.topbar-actions{align-items:center;gap:8px;display:flex}.badge-unit{color:#fff;border-radius:var(--radius-full);background:#ffffff26;border:1px solid #ffffff4d;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:700;display:flex}.btn-icon{color:#fff;cursor:pointer;background:#ffffff1f;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.btn-icon:active{background:#ffffff40;transform:scale(.92)}.screen-login{flex-direction:column;flex:1;gap:16px;padding:20px 16px;display:flex;overflow-y:auto}.hero-card{background:linear-gradient(145deg, var(--card-dark) 0%, #691c3240 100%);border:1px solid var(--border-dark);border-radius:var(--radius-lg);text-align:center;padding:20px 16px;position:relative;overflow:hidden}.hero-card:after{content:"";background:linear-gradient(90deg, var(--primary), var(--gold));height:3px;position:absolute;top:0;left:0;right:0}.hero-icon{filter:drop-shadow(0 4px 8px #0006);margin-bottom:8px;font-size:38px}.hero-title{font-family:var(--font-display);color:var(--text-main);margin-bottom:4px;font-size:20px;font-weight:800}.hero-subtitle{color:var(--text-sub);font-size:13px;line-height:1.4}.qr-container{border:2px dashed var(--gold);border-radius:var(--radius-lg);background:#000;flex-direction:column;justify-content:center;align-items:center;min-height:260px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #000c}#qr-reader{border:none!important;width:100%!important}#qr-reader video{object-fit:cover!important;width:100%!important;height:260px!important}.scanner-overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.scanner-reticle{border:2px solid #c49a6c99;border-radius:16px;width:200px;height:200px;position:relative;box-shadow:0 0 0 1000px #00000073}.scanner-laser{background:linear-gradient(90deg,#0000,#ef4444,#f59e0b,#0000);height:3px;animation:2.2s ease-in-out infinite alternate laserScan;position:absolute;left:5%;right:5%;box-shadow:0 0 10px #ef4444}@keyframes laserScan{0%{opacity:.4;top:10%}to{opacity:1;top:90%}}.scanner-controls{z-index:20;gap:12px;display:flex;position:absolute;bottom:12px}.btn-scanner-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-dark);color:#fff;border-radius:var(--radius-full);cursor:pointer;background:#141720d9;align-items:center;gap:6px;padding:6px 14px;font-size:12px;font-weight:600;display:flex}.manual-box{background:var(--card-dark);border:1px solid var(--border-dark);border-radius:var(--radius-lg);flex-direction:column;gap:12px;padding:16px;display:flex}.input-label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-sub);justify-content:space-between;align-items:center;font-size:12px;font-weight:700;display:flex}.input-group{gap:8px;display:flex}.input-text{background:var(--surface-dark);border:1.5px solid var(--border-dark);border-radius:var(--radius-md);color:#fff;text-transform:uppercase;letter-spacing:1px;outline:none;flex:1;padding:14px 16px;font-size:16px;font-weight:700;transition:all .2s}.input-text:focus{border-color:var(--gold);box-shadow:0 0 0 3px #c49a6c33}.btn-primary-action{background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);border:1px solid var(--gold);color:#fff;border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:8px;padding:0 20px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.btn-primary-action:active{transform:scale(.96)}.quick-pills{flex-wrap:wrap;gap:8px;margin-top:4px;display:flex}.pill-unit{border:1px solid var(--border-dark);color:var(--text-sub);border-radius:var(--radius-sm);cursor:pointer;background:#ffffff0d;padding:6px 12px;font-size:12px;font-weight:600;transition:all .2s}.pill-unit:hover,.pill-unit:active{background:var(--primary);border-color:var(--gold);color:#fff}.screen-dashboard{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.dashboard-unit-card{background:linear-gradient(145deg, var(--card-dark) 0%, #141720f2 100%);border-bottom:1px solid var(--border-dark);z-index:10;flex-direction:column;gap:10px;padding:12px 16px;display:flex}.unit-info-row{justify-content:space-between;align-items:center;display:flex}.unit-badge-big{font-family:var(--font-display);color:#fff;align-items:center;gap:8px;font-size:22px;font-weight:800;display:flex}.unit-badge-big span{color:var(--gold);border:1px solid var(--gold);border-radius:var(--radius-sm);background:#c49a6c33;padding:2px 8px;font-size:11px;font-weight:700}.driver-name{color:var(--text-sub);align-items:center;gap:5px;font-size:13px;font-weight:600;display:flex}.route-info-bar{border-left:3px solid var(--primary-light);background:#ffffff0a;border-radius:4px;justify-content:space-between;align-items:center;padding:8px 10px;font-size:12px;display:flex}.route-name{color:#fff;font-weight:700}.route-meta{color:var(--gold-light);font-weight:600}.telemetry-strip{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.metric-pill{background:var(--surface-dark);border:1px solid var(--border-dark);border-radius:var(--radius-sm);text-align:center;flex-direction:column;justify-content:center;padding:6px 4px;display:flex}.metric-label{color:var(--text-dim);text-transform:uppercase;font-size:9px;font-weight:700}.metric-value{font-family:var(--font-display);color:#fff;font-size:14px;font-weight:800}.status-indicator{border-radius:var(--radius-full);align-items:center;gap:4px;padding:2px 6px;font-size:10px;font-weight:700;display:inline-flex}.status-online{color:var(--green);border:1px solid var(--green);background:#10b98133}.status-incident{color:var(--red);border:1px solid var(--red);background:#ef444433}.pulse-dot{background:var(--green);width:8px;height:8px;box-shadow:0 0 8px var(--green);border-radius:50%;animation:1.2s infinite pulseBeacon}.pulse-dot-red{background:var(--red);box-shadow:0 0 8px var(--red)}@keyframes pulseBeacon{0%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.3)}to{opacity:.6;transform:scale(.9)}}.map-wrapper{background:#111;flex:1;min-height:220px;position:relative}#driver-map{width:100%;height:100%}.map-floating-bar{z-index:500;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:12px;left:12px;right:12px}.map-pill{pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-dark);border-radius:var(--radius-full);color:#fff;box-shadow:var(--shadow-md);background:#141720d9;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:700;display:flex}.map-control-btn{pointer-events:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-dark);color:#fff;width:38px;height:38px;box-shadow:var(--shadow-md);cursor:pointer;background:#141720e6;border-radius:50%;justify-content:center;align-items:center;display:flex}.incident-alert-banner{border-top:2px solid var(--red);border-bottom:2px solid var(--red);z-index:20;background:linear-gradient(90deg,#7f1d1d 0%,#991b1b 100%);justify-content:space-between;align-items:center;padding:10px 16px;animation:.4s ease-out bannerShake;display:flex}.incident-alert-text{align-items:center;gap:10px;display:flex}.incident-alert-icon{font-size:22px}.incident-alert-title{color:#fff;font-size:13px;font-weight:800}.incident-alert-sub{color:#fca5a5;font-size:11px}.btn-resume{color:#991b1b;border-radius:var(--radius-sm);cursor:pointer;background:#fff;border:none;padding:6px 12px;font-size:11px;font-weight:800}.action-dock{background:var(--surface-dark);border-top:1px solid var(--border-dark);z-index:20;flex-direction:column;gap:10px;padding:14px 16px;display:flex}.btn-start-route{color:#fff;font-family:var(--font-display);letter-spacing:.5px;border-radius:var(--radius-lg);cursor:pointer;background:linear-gradient(135deg,#059669 0%,#10b981 100%);border:2px solid #34d399;justify-content:center;align-items:center;gap:12px;padding:18px 20px;font-size:19px;font-weight:800;transition:all .2s;display:flex;box-shadow:0 6px 20px #10b98166}.btn-start-route:active{transform:scale(.97);box-shadow:0 2px 10px #10b98199}.btn-stop-route{color:#fff;font-family:var(--font-display);letter-spacing:.5px;border-radius:var(--radius-lg);cursor:pointer;background:linear-gradient(135deg,#b91c1c 0%,#ef4444 100%);border:2px solid #f87171;justify-content:center;align-items:center;gap:12px;padding:18px 20px;font-size:19px;font-weight:800;transition:all .2s;display:flex;box-shadow:0 6px 20px #ef444466}.btn-stop-route:active{transform:scale(.97);box-shadow:0 2px 10px #ef444499}.secondary-actions{gap:10px;display:flex}.btn-bell-action{background:linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);color:#1a150e;border-radius:var(--radius-md);cursor:pointer;border:none;flex:1;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:13px;font-weight:800;display:flex}.btn-bell-action:active{transform:scale(.96)}.modal-backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;opacity:0;pointer-events:none;background:#000000bf;justify-content:center;align-items:flex-end;transition:opacity .25s;display:flex;position:fixed;inset:0}.modal-backdrop.open{opacity:1;pointer-events:auto}.bottom-sheet{background:var(--surface-dark);border-top:2px solid var(--gold);border-top-left-radius:24px;border-top-right-radius:24px;flex-direction:column;gap:16px;width:100%;max-width:480px;padding:20px 20px 28px;transition:transform .3s cubic-bezier(.2,.9,.3,1);display:flex;transform:translateY(100%);box-shadow:0 -10px 30px #000c}.modal-backdrop.open .bottom-sheet{transform:translateY(0)}.sheet-drag-handle{background:var(--border-dark);border-radius:var(--radius-full);align-self:center;width:40px;height:5px;margin-bottom:4px}.sheet-header{text-align:center}.sheet-header h2{font-family:var(--font-display);color:#fff;font-size:20px;font-weight:800}.sheet-header p{color:var(--text-sub);margin-top:4px;font-size:13px}.options-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.option-card{background:var(--card-dark);border:2px solid var(--border-dark);border-radius:var(--radius-lg);text-align:center;cursor:pointer;flex-direction:column;align-items:center;gap:10px;padding:20px 14px;transition:all .2s;display:flex}.option-card:active{transform:scale(.96)}.option-card-incident{border-color:#f59e0b66}.option-card-incident:hover,.option-card-incident:active{border-color:var(--amber);background:#f59e0b1f}.option-card-finish{border-color:#ef444466}.option-card-finish:hover,.option-card-finish:active{border-color:var(--red);background:#ef44441f}.option-icon{font-size:38px}.option-title{font-family:var(--font-display);color:#fff;font-size:16px;font-weight:800}.option-desc{color:var(--text-sub);font-size:11px;line-height:1.3}.incident-selection-box{flex-direction:column;gap:12px;display:flex}.incident-cards-list{flex-direction:column;gap:8px;display:flex}.incident-item-card{background:var(--card-dark);border:1.5px solid var(--border-dark);border-radius:var(--radius-md);cursor:pointer;align-items:center;gap:12px;padding:12px 14px;transition:all .2s;display:flex}.incident-item-card:hover,.incident-item-card.selected{border-color:var(--amber);background:#f59e0b26}.incident-item-card.selected{border-width:2px;box-shadow:0 0 12px #f59e0b4d}.incident-item-icon{font-size:26px}.incident-item-info{flex:1}.incident-item-title{color:#fff;font-size:15px;font-weight:700}.incident-item-sub{color:var(--text-sub);font-size:11px}.incident-check{border:2px solid var(--border-dark);width:22px;height:22px;color:var(--amber);border-radius:50%;justify-content:center;align-items:center;font-size:12px;font-weight:800;display:flex}.incident-item-card.selected .incident-check{border-color:var(--amber);background:var(--amber);color:#000}.btn-confirm-incident{background:linear-gradient(135deg, var(--amber-dark) 0%, var(--amber) 100%);color:#1a150e;font-family:var(--font-display);border-radius:var(--radius-md);cursor:pointer;border:none;padding:14px;font-size:16px;font-weight:800;box-shadow:0 4px 15px #f59e0b66}.btn-confirm-finish{background:linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%);color:#fff;font-family:var(--font-display);border-radius:var(--radius-md);cursor:pointer;border:none;padding:14px;font-size:16px;font-weight:800;box-shadow:0 4px 15px #ef444466}.btn-cancel-sheet{border:1px solid var(--border-dark);color:var(--text-sub);border-radius:var(--radius-md);cursor:pointer;background:0 0;padding:10px;font-size:13px;font-weight:600}.toast-msg{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold);color:#fff;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);z-index:2000;opacity:0;pointer-events:none;background:#141720f2;align-items:center;gap:8px;padding:10px 18px;font-size:13px;font-weight:600;transition:all .3s cubic-bezier(.2,.9,.3,1);display:flex;position:fixed;top:70px;left:50%;transform:translate(-50%)translateY(-20px)}.toast-msg.show{opacity:1;transform:translate(-50%)translateY(0)}.qr-demo-card{color:#000;background:#fff;border-radius:12px;flex-direction:column;align-items:center;padding:16px;display:flex}