:root{--bg:#f4f7fb;--surface:#ffffff;--text:#152033;--muted:#667085;--primary:#175cd3;--primary-soft:#e8f1ff;--border:#e4e7ec;--success:#027a48;--success-bg:#ecfdf3;--warning:#b54708;--warning-bg:#fffaeb;--danger:#b42318;--danger-bg:#fef3f2;--shadow:0 14px 40px rgba(16,24,40,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Inter,Arial,sans-serif;color:var(--text)}a{text-decoration:none;color:inherit}.app{display:flex;min-height:100vh}.sidebar{width:280px;background:#0f172a;color:#e2e8f0;padding:24px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}.brand .logo{width:44px;height:44px;border-radius:14px;background:#2563eb;display:grid;place-items:center;font-weight:800;font-size:22px}.brand strong{display:block}.brand span,.sidebar-footer small{display:block;color:#94a3b8;font-size:13px}.sidebar nav{display:grid;gap:6px}.sidebar nav a{padding:12px 14px;border-radius:12px;color:#cbd5e1;font-weight:600}.sidebar nav a:hover,.sidebar nav a.active{background:#1e293b;color:#fff}.sidebar-footer{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}.sidebar-footer span{display:block;font-weight:700}.main{margin-left:280px;width:calc(100% - 280px);padding:28px}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px}.topbar h1{margin:0 0 6px;font-size:30px}.topbar p{margin:0;color:var(--muted)}.user-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:18px;padding:14px 18px;min-width:190px}.user-card span{display:block;color:var(--muted);font-size:13px}.user-card strong{display:block;margin-top:3px}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:var(--shadow)}.kpi span{display:block;color:var(--muted);font-size:14px}.kpi strong{display:block;font-size:28px;margin:10px 0}.kpi small{color:var(--muted)}.kpi.alert{border-color:#fecaca}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.form-layout{grid-template-columns:2fr 1fr}.card-title{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}.card-title h2,.card h2{margin:0;font-size:20px}.card-title a{color:var(--primary);font-weight:700;font-size:14px}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800;background:#eef2ff;color:#3538cd}.badge.success{background:var(--success-bg);color:var(--success)}.badge.warning{background:var(--warning-bg);color:var(--warning)}.badge.danger{background:var(--danger-bg);color:var(--danger)}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:920px}th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--border);font-size:14px}th{color:#475467;background:#f9fafb;font-size:12px;text-transform:uppercase;letter-spacing:.04em}td{color:#344054}.bar-list{display:grid;gap:16px}.bar-list div{display:grid;grid-template-columns:140px 1fr 90px;align-items:center;gap:10px}.bar-list label{font-weight:700;color:#344054}.bar-list span{height:12px;border-radius:99px;background:linear-gradient(90deg,#175cd3,#84caff)}.bar-list strong{text-align:right}.alert-list,.audit-list{display:grid;gap:12px}.alert-list article,.audit-list article{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fcfcfd}.alert-list p,.audit-list p{margin:6px 0 10px;color:var(--muted);line-height:1.45}.mock-form{display:grid;gap:14px}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-weight:700;font-size:13px;margin-bottom:7px;color:#344054}input,select,textarea{width:100%;border:1px solid #d0d5dd;border-radius:12px;padding:12px 13px;font:inherit;background:#fff}input[readonly]{background:#f9fafb;color:#475467}textarea{min-height:92px;resize:vertical}button,.primary{border:0;border-radius:12px;padding:12px 16px;font-weight:800;background:var(--primary);color:#fff;cursor:pointer}.primary{width:100%;font-size:16px}.actions{display:flex;flex-wrap:wrap;gap:8px}.actions button,.filters button,.report-card button,.card-title button{padding:10px 12px;border-radius:10px;background:#eef4ff;color:#175cd3}.actions .danger-btn{background:var(--danger-bg);color:var(--danger)}.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;margin-bottom:14px}.sticky-note{align-self:start;position:sticky;top:20px}.checklist{padding:0;margin:14px 0;list-style:none;display:grid;gap:10px}.checklist li{padding-left:28px;position:relative;color:#475467;line-height:1.4}.checklist li:before{content:'✓';position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--success-bg);color:var(--success);font-size:12px;font-weight:900}.result-box{margin-top:18px;padding:18px;border-radius:18px;background:var(--primary-soft);border:1px solid #c7d7fe}.result-box span{display:block;color:#475467}.result-box strong{display:block;font-size:26px;margin-top:6px}.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.photo-grid div{min-height:180px;border:2px dashed #cbd5e1;border-radius:18px;background:#f8fafc;display:grid;place-items:center;text-align:center;color:#64748b}.photo-grid b{display:block;color:#0f172a;font-size:22px}.timeline{display:grid;gap:10px;color:#475467}.report-card p{color:var(--muted);line-height:1.5}.evidence h3{margin-top:20px}@media(max-width:1000px){.sidebar{position:static;width:100%;inset:auto}.app{display:block}.main{margin:0;width:100%;padding:18px}.kpis,.grid.two,.form-layout{grid-template-columns:1fr}.topbar{display:block}.user-card{margin-top:14px}.filters{grid-template-columns:1fr}.row{grid-template-columns:1fr}.sticky-note{position:static}.bar-list div{grid-template-columns:1fr}.bar-list strong{text-align:left}}
.hidden{display:none!important}.login-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top left,#dbeafe,#f8fafc 45%,#eef2ff)}.login-card{width:min(460px,100%);background:#fff;border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);padding:30px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.login-brand .logo{width:46px;height:46px;border-radius:14px;background:#2563eb;color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px}.login-brand strong{display:block}.login-brand span{display:block;color:var(--muted);font-size:13px}.login-card h1{margin:0 0 8px;font-size:30px}.login-card p{margin:0 0 20px;color:var(--muted);line-height:1.5}.login-card form{display:grid;gap:14px}.demo-help{display:block;color:var(--muted);margin-top:14px}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.58);display:grid;place-items:center;padding:24px;z-index:20}.modal-card{width:min(640px,100%);background:#fff;border-radius:28px;padding:28px;border:1px solid var(--border);box-shadow:0 30px 80px rgba(15,23,42,.28)}.modal-card h2{margin:0 0 6px;font-size:28px}.modal-card p{margin:0 0 18px;color:var(--muted)}.profile-options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-options button{text-align:left;background:#f8fafc;color:var(--text);border:1px solid var(--border);padding:18px;border-radius:18px}.profile-options button:hover{border-color:#175cd3;background:#eef4ff}.profile-options strong{display:block;font-size:17px;margin-bottom:6px}.profile-options span{display:block;color:var(--muted);line-height:1.35}.logout-btn{width:100%;margin-top:14px;background:#1e293b;color:#e2e8f0;border:1px solid rgba(255,255,255,.12)}.muted{color:var(--muted);margin-top:-6px}.simple-table{min-width:620px}@media(max-width:760px){.profile-options{grid-template-columns:1fr}.login-card,.modal-card{border-radius:22px;padding:22px}}
.required-field{border:1px solid #fecaca;background:#fff7f7;border-radius:16px;padding:10px;transition:.2s}.required-field label{display:flex;justify-content:space-between;gap:10px}.required-field label span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--danger);background:var(--danger-bg);padding:3px 7px;border-radius:999px}.required-field small{display:block;margin-top:7px;color:var(--danger);font-size:12px}.required-field input,.required-field select{border-color:#fda29b;background:#fff}.required-field.valid{border-color:#abefc6;background:#f6fef9}.required-field.valid input,.required-field.valid select{border-color:#75e0a7;background:#fff}.required-field.valid label span{color:var(--success);background:var(--success-bg)}.required-field.valid small{color:var(--success)}.required-field.invalid{animation:softPulse .25s ease}
.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.upload-card{display:flex;flex-direction:column;gap:8px;min-height:150px;border:2px dashed #fda29b;background:#fff7f7;border-radius:20px;padding:18px;cursor:pointer;justify-content:center;align-items:flex-start;transition:.2s}.upload-card:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(16,24,40,.08)}.upload-card input{display:none}.upload-card strong{font-size:18px;color:#1d2939}.upload-card span{color:#667085}.upload-card small{color:var(--danger);background:var(--danger-bg);font-weight:800;border-radius:999px;padding:5px 9px}.upload-card.selected{border-color:#75e0a7;background:#f6fef9}.upload-card.selected small{color:var(--success);background:var(--success-bg)}
.location-box{display:grid;gap:8px}.location-box button{background:#eef4ff;color:#175cd3;border:1px solid #c7d7fe;width:max-content}.location-box span{font-size:13px;color:#475467;line-height:1.35}.result-box small{display:block;margin-top:8px;color:#475467;font-weight:700}@keyframes softPulse{from{transform:scale(.995)}to{transform:scale(1)}}@media(max-width:760px){.upload-grid{grid-template-columns:1fr}.location-box button{width:100%}}

/* v4 adjustments */
.required-field{border:1px solid #fecaca;background:#fff7f7;border-radius:16px;padding:10px;transition:.2s}
.required-field label{display:flex;justify-content:space-between;gap:10px}
.required-field label span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--danger);background:var(--danger-bg);padding:3px 7px;border-radius:999px}
.required-field small{display:block;margin-top:7px;color:var(--danger);font-size:12px}
.required-field input,.required-field select{border-color:#fda29b;background:#fff}
.required-field.valid{border-color:transparent;background:transparent;padding:0}
.required-field.valid input,.required-field.valid select{border-color:#d0d5dd;background:#fff}
.required-field.valid label span{color:#027a48;background:var(--success-bg)}
.required-field.valid small{display:none}
.map-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:10px;background:#eef4ff;color:#175cd3;font-weight:800;text-decoration:none;white-space:nowrap}
.geo-modal-card .notice-box{background:#f8fafc;border:1px solid var(--border);border-radius:16px;padding:14px;margin:14px 0;display:grid;gap:5px;color:#475467;line-height:1.45}
.geo-modal-card .notice-box strong{color:#1d2939}
.check-row{display:flex;align-items:center;gap:10px;font-weight:700;color:#344054;margin:10px 0 18px}.check-row input{width:auto}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}.modal-actions.single{justify-content:flex-end}.secondary-btn{background:#f2f4f7;color:#344054;border:1px solid #d0d5dd}
.geo-details{display:grid;gap:9px}.geo-details p{margin:0;color:#475467}.geo-details strong{color:#1d2939}.primary-link{display:inline-flex;width:max-content;background:var(--primary);color:#fff;text-decoration:none;font-weight:800;border-radius:12px;padding:12px 14px;margin-top:8px}
.empty-geo{background:#fff7f7;border:1px solid #fecaca;color:#b42318;border-radius:16px;padding:14px;display:grid;gap:5px;line-height:1.45}.empty-geo strong{color:#b42318}
.map-preview{min-height:300px;border-radius:22px;border:1px solid #c7d7fe;background:linear-gradient(135deg,#eef4ff,#f8fafc);display:grid;place-items:center;text-align:center;padding:28px;color:#344054}.map-preview .pin{width:74px;height:74px;border-radius:50%;background:#175cd3;color:#fff;display:grid;place-items:center;font-size:34px;font-weight:900;box-shadow:0 14px 35px rgba(23,92,211,.22)}.map-preview strong{font-size:20px}.map-preview span{max-width:360px;color:#667085;line-height:1.45}.map-preview.disabled{background:#f8fafc;border-color:#e4e7ec}.map-preview.disabled .pin{background:#f04438}.geo-note{margin-top:14px!important}
@media(max-width:760px){.modal-actions{display:grid}.primary-link{width:100%;justify-content:center}}


/* v5 adjustments */
.audit-layout{grid-template-columns:1.05fr 1.3fr}
.audit-list.interactive article{cursor:pointer;transition:.18s}
.audit-list.interactive article:hover{border-color:#bfd4fe;background:#f8fbff}
.audit-item.active{border-color:#175cd3!important;background:#eef4ff!important;box-shadow:inset 0 0 0 1px #bfd4fe}
.audit-item small{display:block;color:#667085}
.selected-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.selected-summary div{padding:14px;border:1px solid var(--border);border-radius:16px;background:#fcfcfd}
.selected-summary span{display:block;color:#667085;font-size:12px;margin-bottom:4px}
.selected-summary strong{display:block;color:#1d2939;font-size:15px}
.audit-cta-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 10px}
.suspect-toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:#fcfcfd;font-weight:700;margin:14px 0 18px}
.switch{position:relative;display:inline-flex;width:54px;height:30px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#d0d5dd;border-radius:999px;transition:.2s}
.slider:before{content:'';position:absolute;height:22px;width:22px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.switch input:checked + .slider{background:#f04438}
.switch input:checked + .slider:before{transform:translateX(24px)}
.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 14px}
.insight-box{padding:14px;border-radius:16px;background:#f8fafc;border:1px solid var(--border)}
.insight-box span{display:block;color:#667085;font-size:12px;line-height:1.35}
.insight-box strong{display:block;color:#1d2939;font-size:20px;margin-top:6px}
.alert-callout{display:grid;gap:6px;padding:14px 16px;border-radius:16px;border:1px solid var(--border);margin-bottom:8px}
.alert-callout strong{color:#1d2939}
.alert-callout span{color:#475467;line-height:1.45}
.alert-callout.danger{background:#fef3f2;border-color:#fecaca}.alert-callout.warning{background:#fffaeb;border-color:#fedf89}.alert-callout.success{background:#ecfdf3;border-color:#abefc6}
.filter-panel{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:14px}
@media(max-width:1000px){.audit-layout,.selected-summary,.insights-grid{grid-template-columns:1fr}.filter-panel{grid-template-columns:1fr}}


/* v7 settings */
.settings-layout{grid-template-columns:300px 1fr}
.settings-menu{align-self:start;position:sticky;top:20px}
.settings-tab{display:block;padding:13px 14px;border:1px solid var(--border);border-radius:14px;margin-top:10px;font-weight:800;color:#344054;background:#fff}
.settings-tab:hover,.settings-tab.active{background:#eef4ff;border-color:#bfd4fe;color:#175cd3}
.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 18px;padding:16px;border:1px solid var(--border);border-radius:18px;background:#fcfcfd}
.settings-form button{align-self:end}
.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.permission-grid div{border:1px solid var(--border);background:#fcfcfd;border-radius:18px;padding:16px}
.permission-grid strong{display:block;font-size:17px;margin-bottom:6px;color:#1d2939}
.permission-grid span{display:block;color:#667085;line-height:1.45}
@media(max-width:1000px){.settings-layout,.settings-form,.permission-grid{grid-template-columns:1fr}.settings-menu{position:static}}


/* v8 station role */
.station-upload-form{grid-template-columns:1fr 1fr}
.station-upload-form .full{grid-column:1 / -1}
.profile-options{grid-template-columns:1fr 1fr 1fr}
@media(max-width:1000px){.profile-options{grid-template-columns:1fr}.station-upload-form{grid-template-columns:1fr}.station-upload-form .full{grid-column:auto}}


/* v10 station filters */
.station-filters{grid-template-columns:2fr 1fr 1fr 160px 160px auto}
.date-filter{display:grid;gap:6px}
.date-filter label{font-size:12px;font-weight:800;color:#475467;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:1200px){.station-filters{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.station-filters{grid-template-columns:1fr}}


/* v11 station UX */
.role-icon{width:54px;height:54px;border-radius:16px;background:#eef4ff;display:grid;place-items:center;font-size:28px;margin-bottom:10px}
.top-filter-card{display:grid;gap:14px}
.top-filter-header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.top-filter-header h2{margin:0 0 4px;font-size:20px}
.period-filter-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.station-filters{grid-template-columns:2fr 1fr 1fr auto}
.pagination-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:14px;margin-top:10px;border-top:1px solid var(--border);color:#475467;font-size:14px}
.pagination-actions{display:flex;align-items:center;gap:10px}
.pagination-actions button{padding:10px 14px;border-radius:10px;background:#eef4ff;color:#175cd3}
.pagination-actions button[disabled]{opacity:.5;cursor:not-allowed}
.page-indicator{font-weight:700;color:#344054}
.empty-cell{text-align:center;color:#667085;padding:24px 12px}
@media(max-width:1000px){.top-filter-header,.pagination-bar{display:grid}.period-filter-grid{grid-template-columns:1fr}.station-filters{grid-template-columns:1fr}}


/* V2 QR flow */
.v2-callout{margin-bottom:16px;background:#eef4ff;border-color:#bfd4fe}
.v2-callout strong{display:block;font-size:18px;color:#1d2939;margin-bottom:4px}
.v2-callout span{display:block;color:#475467;line-height:1.45}
.station-flow-layout{grid-template-columns:1fr 1.4fr;align-items:start}
.station-flow-layout .flow-help{grid-column:1 / -1}
.qr-scan-box{min-height:280px;border:2px dashed #bfd4fe;border-radius:24px;background:linear-gradient(135deg,#eef4ff,#f8fafc);display:grid;place-items:center;text-align:center;padding:24px;color:#475467}
.qr-scan-box .scan-frame{width:92px;height:92px;border-radius:22px;background:#175cd3;color:#fff;display:grid;place-items:center;font-size:46px;font-weight:900;box-shadow:0 16px 36px rgba(23,92,211,.22)}
.qr-scan-box strong{display:block;color:#1d2939;font-size:20px}
.qr-scan-box span{display:block;max-width:360px;line-height:1.4}
.qr-scan-box button{background:#fff;color:#175cd3;border:1px solid #bfd4fe}
.identified-driver{display:grid;gap:4px;margin-top:14px;padding:14px 16px;border-radius:18px;background:#ecfdf3;border:1px solid #abefc6}
.identified-driver span{font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:800;color:#027a48}
.identified-driver strong{font-size:20px;color:#1d2939}
.identified-driver small{color:#475467}
.driver-qr-card{display:grid;place-items:center;text-align:center;padding:28px;border:1px solid var(--border);border-radius:24px;background:#fcfcfd}
.fake-qr{width:210px;height:210px;border:10px solid #111827;background:
  linear-gradient(90deg,#111827 10px,transparent 10px) 0 0/28px 28px,
  linear-gradient(#111827 10px,transparent 10px) 0 0/28px 28px,
  #fff;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;position:relative;overflow:hidden}
.fake-qr b{background:#fff;border:4px solid #111827;border-radius:12px;padding:10px;font-size:28px}
.fake-qr span{position:absolute;width:46px;height:46px;border:8px solid #111827;background:#fff}
.fake-qr span:nth-child(1){left:16px;top:16px}
.fake-qr span:nth-child(2){right:16px;top:16px}
.fake-qr span:nth-child(3){left:16px;bottom:16px}
.fake-qr span:nth-child(4){right:40px;bottom:46px;width:26px;height:26px}
@media(max-width:1000px){.station-flow-layout{grid-template-columns:1fr}.station-flow-layout .flow-help{grid-column:auto}}