:root {
  --bg: #0a0f17;
  --bg-soft: #101722;
  --panel: #141c28;
  --panel-2: #192331;
  --border: #273345;
  --border-soft: rgba(255,255,255,.07);
  --text: #f6f8fb;
  --muted: #95a2b5;
  --muted-2: #6f7d91;
  --accent: #f4c430;
  --accent-strong: #ffd84d;
  --accent-dark: #181300;
  --success: #53d594;
  --warning: #ffb454;
  --danger: #ff6b76;
  --info: #65a8ff;
  --shadow: 0 22px 55px rgba(0,0,0,.28);
  --radius: 18px;
  --sidebar: 260px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 0%, rgba(244,196,48,.07), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, select { cursor: pointer; }
.hidden { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.login-glow { position: absolute; border-radius: 999px; filter: blur(10px); opacity: .45; }
.login-glow-one { width: 440px; height: 440px; background: rgba(244,196,48,.17); top: -180px; left: -120px; }
.login-glow-two { width: 360px; height: 360px; background: rgba(72,118,255,.12); bottom: -170px; right: -100px; }
.login-card {
  width: min(100%, 480px);
  padding: 42px;
  background: rgba(20,28,40,.92);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
  position: relative;
  backdrop-filter: blur(16px);
}
.login-card h1 { margin: 12px 0 12px; font-size: clamp(2rem, 7vw, 3.45rem); line-height: .98; letter-spacing: -.05em; }
.login-copy { color: var(--muted); line-height: 1.65; margin-bottom: 28px; }
.login-form { display: grid; gap: 16px; }
.login-form label, .job-form label { display: grid; gap: 8px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.login-form input, .job-form input, .job-form select, .job-form textarea, .toolbar select, .bulk-bar select {
  width: 100%;
  border: 1px solid var(--border);
  background: #0e1520;
  color: var(--text);
  border-radius: 11px;
  padding: 12px 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: rgba(244,196,48,.72) !important; box-shadow: 0 0 0 3px rgba(244,196,48,.11); }
.demo-note { margin: 16px 0 0; text-align: center; color: var(--muted-2); font-size: .78rem; }

.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-dark);
  font-weight: 1000; letter-spacing: -.06em;
  box-shadow: 0 9px 25px rgba(244,196,48,.18);
}
.brand-mark.large { width: 58px; height: 58px; border-radius: 17px; font-size: 1.25rem; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar);
  background: rgba(13,19,29,.96); border-right: 1px solid var(--border-soft);
  padding: 24px 16px 18px; display: flex; flex-direction: column; z-index: 20;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 30px; }
.sidebar-brand div:last-child { display: grid; gap: 2px; }
.sidebar-brand strong { font-size: 1rem; }
.sidebar-brand span { color: var(--muted); font-size: .76rem; }
.nav-list { display: grid; gap: 6px; }
.nav-item {
  width: 100%; border: 0; background: transparent; color: var(--muted);
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  gap: 10px; padding: 12px 13px; border-radius: 11px; text-align: left;
  font-weight: 750; font-size: .9rem; transition: .18s ease;
}
.nav-item:hover { background: rgba(255,255,255,.045); color: var(--text); }
.nav-item.active { background: rgba(244,196,48,.12); color: var(--accent-strong); box-shadow: inset 3px 0 0 var(--accent); }
.nav-icon { width: 22px; text-align: center; font-size: 1rem; }
.nav-badge { min-width: 24px; padding: 3px 7px; border-radius: 999px; background: #263142; color: var(--text); text-align: center; font-size: .7rem; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; }
.environment-pill { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: var(--muted); font-size: .74rem; border: 1px solid var(--border-soft); border-radius: 11px; }
.environment-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 12px var(--warning); }
.nav-item.logout { color: var(--danger); }

.main-content { margin-left: var(--sidebar); min-height: 100vh; padding: 0 32px 48px; }
.topbar {
  min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--border-soft); margin-bottom: 28px; position: sticky; top: 0;
  background: rgba(10,15,23,.88); backdrop-filter: blur(15px); z-index: 10;
}
.topbar h2 { margin: 0; font-size: 1.8rem; letter-spacing: -.035em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; border-left: 1px solid var(--border); padding-left: 14px; margin-left: 4px; }
.user-chip > div:last-child { display: grid; gap: 1px; }
.user-chip strong { font-size: .82rem; }
.user-chip span { color: var(--muted); font-size: .69rem; }
.user-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: #293547; font-weight: 900; font-size: .78rem; }

.button {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  padding: 11px 15px; border-radius: 10px; font-weight: 850; font-size: .83rem;
  transition: transform .15s, background .15s, border-color .15s;
}
.button:hover { transform: translateY(-1px); border-color: #3b4b61; }
.button.primary { background: var(--accent); color: var(--accent-dark); border-color: var(--accent); }
.button.primary:hover { background: var(--accent-strong); }
.button.light { background: white; color: #121821; border-color: white; }
.button.ghost { background: transparent; }
.button.danger { background: rgba(255,107,118,.1); color: var(--danger); border-color: rgba(255,107,118,.3); }
.button.small { padding: 8px 11px; font-size: .76rem; }
.button.full { width: 100%; }
.icon-button { width: 41px; height: 41px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 1.2rem; display: grid; place-items: center; }
.text-button { border: 0; background: transparent; color: var(--accent); font-weight: 850; font-size: .77rem; }

.view { display: none; animation: fadeIn .2s ease; }
.active-view { display: block; }
@keyframes fadeIn { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.hero-panel {
  background: linear-gradient(120deg, #f4c430 0%, #ffdc5d 68%, #ffe996 100%);
  color: #151200; border-radius: 22px; padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  box-shadow: 0 25px 50px rgba(244,196,48,.12); margin-bottom: 22px; overflow: hidden; position: relative;
}
.hero-panel:after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 42px solid rgba(255,255,255,.18); right: -90px; top: -110px; }
.hero-panel > * { position: relative; z-index: 1; }
.hero-panel .eyebrow { color: rgba(21,18,0,.65); }
.hero-panel h3 { margin: 4px 0 5px; font-size: clamp(1.7rem, 4vw, 2.55rem); letter-spacing: -.045em; }
.hero-panel p:last-child { margin: 0; opacity: .72; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }
.metric-card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 19px; min-height: 132px; position: relative; overflow: hidden; }
.metric-card:after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; background: var(--metric-color); opacity:.08; right:-15px; top:-15px; }
.metric-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-weight:750; font-size:.78rem; }
.metric-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background: color-mix(in srgb, var(--metric-color) 14%, transparent); color: var(--metric-color); }
.metric-value { margin: 20px 0 3px; font-size: 2rem; font-weight: 950; letter-spacing:-.05em; }
.metric-foot { color:var(--muted); font-size:.72rem; }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 20px; box-shadow: 0 15px 40px rgba(0,0,0,.1); }
.span-two { grid-column: span 2; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:17px; }
.panel-heading h3, .section-intro h3 { margin:0; font-size:1.08rem; letter-spacing:-.02em; }

.attention-list, .fleet-pulse, .activity-feed, .compliance-list { display:grid; gap:10px; }
.attention-item { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:13px; border-radius:13px; background:var(--bg-soft); border:1px solid transparent; cursor:pointer; }
.attention-item:hover { border-color:var(--border); }
.vehicle-token { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:#222e3e; color:var(--accent); font-weight:950; font-size:.72rem; }
.attention-item strong { display:block; font-size:.85rem; margin-bottom:3px; }
.attention-item p { margin:0; color:var(--muted); font-size:.73rem; }
.priority-dot { width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 13px var(--danger); }

.fleet-pulse-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.fleet-pulse-item:last-child { border-bottom:0; }
.fleet-number { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:#202b3a; font-weight:950; font-size:.78rem; }
.fleet-pulse-item strong { display:block; font-size:.8rem; }
.fleet-pulse-item p { margin:2px 0 0; color:var(--muted); font-size:.7rem; }
.load-bar { width:58px; height:6px; border-radius:99px; background:#252f3d; overflow:hidden; }
.load-bar span { display:block; height:100%; border-radius:inherit; background:var(--accent); }

.activity-item { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:start; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.activity-item:last-child { border-bottom:0; }
.activity-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:#202b3a; color:var(--info); font-size:.77rem; }
.activity-item p { margin:0; font-size:.78rem; line-height:1.45; }
.activity-item span { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.live-indicator { color:var(--muted); font-size:.7rem; display:flex; gap:7px; align-items:center; }
.live-indicator i { width:7px; height:7px; border-radius:50%; background:var(--warning); }
.compliance-item { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px; border-radius:12px; background:var(--bg-soft); }
.compliance-item strong { display:block; font-size:.79rem; }
.compliance-item p { margin:2px 0 0; color:var(--muted); font-size:.69rem; }
.compliance-days { color:var(--warning); font-weight:900; font-size:.75rem; }

.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.search-box { flex:1; min-width:240px; display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--panel); border-radius:11px; padding:0 13px; }
.search-box span { color:var(--muted); font-size:1.2rem; }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); padding:12px 0; }
.toolbar select { width:auto; min-width:150px; }
.status-tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 0 14px; scrollbar-width:none; }
.status-tab { border:1px solid var(--border); background:var(--panel); color:var(--muted); border-radius:999px; padding:8px 12px; font-size:.73rem; font-weight:850; white-space:nowrap; }
.status-tab.active { background:var(--accent); color:var(--accent-dark); border-color:var(--accent); }
.status-tab span { opacity:.72; margin-left:5px; }
.bulk-bar { background:rgba(244,196,48,.1); border:1px solid rgba(244,196,48,.24); border-radius:13px; padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.bulk-bar > div { display:flex; gap:8px; align-items:center; }
.bulk-bar select { min-width:145px; padding:8px 10px; }
.jobs-panel { padding:0; overflow:hidden; }
.jobs-heading { padding:19px 20px 14px; margin:0; }
.result-count { color:var(--muted); font-size:.75rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { color:var(--muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; text-align:left; padding:11px 12px; background:#111925; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); white-space:nowrap; }
td { padding:13px 12px; border-bottom:1px solid var(--border-soft); font-size:.76rem; vertical-align:middle; }
tbody tr { transition:background .15s; cursor:pointer; }
tbody tr:hover { background:rgba(255,255,255,.025); }
.select-cell { width:38px; text-align:center; }
input[type="checkbox"] { accent-color:var(--accent); width:16px; height:16px; }
.job-number { color:var(--accent); font-weight:900; }
.cell-primary { display:block; font-weight:820; margin-bottom:3px; }
.cell-secondary { color:var(--muted); font-size:.69rem; }
.status-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:999px; font-weight:900; font-size:.66rem; white-space:nowrap; }
.status-chip:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-chip.new { color:#8db9ff; background:rgba(101,168,255,.11); }
.status-chip.assigned { color:#c79cff; background:rgba(174,116,255,.11); }
.status-chip.accepted { color:#f4d15f; background:rgba(244,196,48,.11); }
.status-chip.picked-up { color:#ffb454; background:rgba(255,180,84,.11); }
.status-chip.loaded { color:#5ed6db; background:rgba(94,214,219,.11); }
.status-chip.delivered, .status-chip.success { color:#53d594; background:rgba(83,213,148,.11); }
.status-chip.cancelled { color:#ff7c86; background:rgba(255,107,118,.11); }
.status-chip.neutral { color:#a8b2c0; background:rgba(168,178,192,.1); }
.priority-label { color:var(--danger); font-size:.63rem; font-weight:950; text-transform:uppercase; letter-spacing:.06em; }
.jobs-cards { display:none; }
.empty-state { padding:48px 20px; text-align:center; }
.empty-icon { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:#202b3a; color:var(--accent); margin:0 auto 13px; font-size:1.4rem; }
.empty-state h3 { margin:0 0 6px; }
.empty-state p { margin:0; color:var(--muted); }
body.compact-mode td { padding-top:8px; padding-bottom:8px; }

.section-intro { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.section-intro p:last-child { margin:6px 0 0; color:var(--muted); font-size:.85rem; }
.fleet-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.fleet-card { background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:19px; }
.fleet-card-top { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.fleet-card-id { display:flex; align-items:center; gap:11px; }
.fleet-card-id .fleet-number { width:46px; height:46px; background:var(--accent); color:var(--accent-dark); }
.fleet-card h4 { margin:0 0 3px; font-size:.93rem; }
.fleet-card p { margin:0; color:var(--muted); font-size:.72rem; }
.fleet-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:15px; }
.fleet-stat { background:var(--bg-soft); border-radius:11px; padding:10px; }
.fleet-stat strong { display:block; font-size:1rem; }
.fleet-stat span { color:var(--muted); font-size:.64rem; }
.fleet-progress { display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:.68rem; }
.fleet-progress .load-bar { flex:1; width:auto; }
.drivers-table th, .drivers-table td { padding-left:18px; padding-right:18px; }
.person-cell { display:flex; align-items:center; gap:10px; }
.person-avatar { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:#243043; color:var(--accent); font-weight:900; }
.person-cell strong { display:block; font-size:.8rem; }
.person-cell span { color:var(--muted); font-size:.68rem; }
.prestart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.prestart-card { background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:18px; display:grid; gap:14px; }
.prestart-top { display:flex; justify-content:space-between; gap:12px; }
.prestart-top h4 { margin:0 0 3px; }
.prestart-top p { margin:0; color:var(--muted); font-size:.72rem; }
.prestart-details { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.prestart-detail { background:var(--bg-soft); border-radius:10px; padding:10px; }
.prestart-detail span { display:block; color:var(--muted); font-size:.63rem; margin-bottom:3px; }
.prestart-detail strong { font-size:.78rem; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:15px 0; border-bottom:1px solid var(--border-soft); }
.setting-row:last-child { border-bottom:0; }
.setting-row strong { display:block; font-size:.82rem; }
.setting-row div span { display:block; color:var(--muted); font-size:.7rem; margin-top:3px; }
.switch { position:relative; width:44px; height:24px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; border-radius:999px; background:#263244; transition:.2s; }
.switch span:before { content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; border-radius:50%; background:white; transition:.2s; }
.switch input:checked + span { background:var(--accent); }
.switch input:checked + span:before { transform:translateX(20px); background:#171200; }

.modal-backdrop, .drawer-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.62); z-index:100; backdrop-filter:blur(5px); }
.modal-backdrop { display:grid; place-items:center; padding:18px; overflow:auto; }
.modal { width:min(880px,100%); max-height:calc(100vh - 36px); overflow:auto; background:#111925; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); }
.modal-header, .drawer-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--border-soft); }
.modal-header h3, .drawer-header h3 { margin:0; font-size:1.2rem; }
.job-form { padding:20px 22px; display:grid; gap:21px; }
.form-section { display:grid; gap:12px; }
.form-section h4 { margin:0; font-size:.82rem; color:var(--text); }
.form-grid { display:grid; gap:12px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.job-form textarea { resize:vertical; min-height:90px; }
.modal-actions { display:flex; justify-content:space-between; gap:12px; padding-top:5px; }
.modal-actions-right { margin-left:auto; display:flex; gap:9px; }

.drawer-backdrop { display:flex; justify-content:flex-end; }
.drawer { width:min(440px,100%); height:100%; background:#111925; border-left:1px solid var(--border); display:flex; flex-direction:column; animation:slideIn .22s ease; }
@keyframes slideIn { from { transform:translateX(100%); } to { transform:none; } }
.drawer-content { padding:20px 22px; overflow:auto; flex:1; }
.drawer-actions { padding:16px 22px; border-top:1px solid var(--border-soft); }
.detail-block { padding:15px 0; border-bottom:1px solid var(--border-soft); }
.detail-block:first-child { padding-top:0; }
.detail-block label { display:block; color:var(--muted); font-size:.67rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.detail-block strong { font-size:.88rem; }
.route-visual { display:grid; grid-template-columns:18px 1fr; gap:10px; }
.route-line { display:grid; justify-items:center; padding:4px 0; }
.route-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); }
.route-stem { width:2px; height:34px; background:var(--border); }
.route-stop { padding-bottom:12px; }
.route-stop strong { display:block; font-size:.82rem; }
.route-stop span { color:var(--muted); font-size:.7rem; }
.notes-box { padding:12px; border-radius:11px; background:var(--bg-soft); color:var(--muted); font-size:.78rem; line-height:1.55; }

.toast-region { position:fixed; right:20px; bottom:20px; display:grid; gap:8px; z-index:200; }
.toast { min-width:250px; max-width:360px; background:#202b39; border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); font-size:.78rem; animation:toastIn .2s ease; }
.toast.error { border-left-color:var(--danger); }
@keyframes toastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.mobile-nav { display:none; }

@media (max-width: 1100px) {
  :root { --sidebar: 220px; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .dashboard-grid { grid-template-columns:repeat(2,1fr); }
  .span-two { grid-column:span 2; }
  .fleet-grid { grid-template-columns:repeat(2,1fr); }
  .topbar-actions .user-chip { display:none; }
}

@media (max-width: 780px) {
  body { padding-bottom:76px; }
  .sidebar { display:none; }
  .main-content { margin-left:0; padding:0 15px 28px; }
  .topbar { min-height:76px; margin-bottom:18px; }
  .topbar h2 { font-size:1.45rem; }
  .topbar-actions .icon-button { display:none; }
  .topbar-actions .button { display:none; }
  .hero-panel { padding:23px; align-items:flex-start; flex-direction:column; }
  .hero-panel .button { width:100%; }
  .metric-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .metric-card { min-height:112px; padding:15px; }
  .metric-value { margin-top:13px; font-size:1.6rem; }
  .dashboard-grid { grid-template-columns:1fr; }
  .span-two { grid-column:auto; }
  .toolbar { flex-wrap:wrap; }
  .search-box { flex-basis:100%; min-width:0; }
  .toolbar select { flex:1; min-width:130px; }
  .toolbar .button { width:100%; }
  .jobs-table { display:none; }
  .jobs-cards { display:grid; gap:10px; padding:0 12px 13px; }
  .job-card { background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:14px; padding:14px; display:grid; gap:12px; }
  .job-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
  .job-card-select { display:flex; align-items:center; gap:9px; }
  .job-card h4 { margin:0; font-size:.86rem; }
  .job-card p { margin:3px 0 0; color:var(--muted); font-size:.69rem; }
  .job-card-route { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
  .job-card-route div:last-child { text-align:right; }
  .job-card-route span { display:block; color:var(--muted); font-size:.6rem; text-transform:uppercase; letter-spacing:.06em; }
  .job-card-route strong { display:block; font-size:.72rem; margin-top:3px; }
  .route-arrow { color:var(--accent); }
  .job-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; }
  .bulk-bar { align-items:flex-start; flex-direction:column; }
  .bulk-bar > div { width:100%; flex-wrap:wrap; }
  .bulk-bar select { flex:1; }
  .fleet-grid, .prestart-grid, .settings-grid { grid-template-columns:1fr; }
  .section-intro { align-items:flex-start; flex-direction:column; }
  .section-intro .button { width:100%; }
  .drivers-table th:nth-child(3), .drivers-table td:nth-child(3), .drivers-table th:nth-child(5), .drivers-table td:nth-child(5) { display:none; }
  .form-grid.three, .form-grid.two { grid-template-columns:1fr; }
  .modal-backdrop { padding:0; align-items:end; }
  .modal { max-height:94vh; border-radius:22px 22px 0 0; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions-right { width:100%; margin:0; }
  .modal-actions-right .button { flex:1; }
  .mobile-nav {
    position:fixed; left:0; right:0; bottom:0; height:68px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
    background:rgba(16,23,34,.96); border-top:1px solid var(--border); backdrop-filter:blur(16px); z-index:50; padding:5px 8px max(5px,env(safe-area-inset-bottom));
  }
  .mobile-nav-item { border:0; background:transparent; color:var(--muted); display:grid; place-items:center; gap:3px; font-size:.59rem; font-weight:800; }
  .mobile-nav-item span { font-size:1rem; }
  .mobile-nav-item.active { color:var(--accent); }
  .mobile-create { justify-self:center; width:48px; height:48px; margin-top:-22px; border-radius:16px; border:4px solid var(--bg); background:var(--accent); color:var(--accent-dark); font-size:1.8rem; line-height:1; box-shadow:0 10px 25px rgba(244,196,48,.23); }
  .toast-region { right:12px; left:12px; bottom:82px; }
  .toast { min-width:0; max-width:none; }
}

@media (max-width: 470px) {
  .login-card { padding:28px 22px; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .metric-top span:first-child { max-width:90px; }
  .panel { padding:16px; }
  .jobs-panel { padding:0; }
  .fleet-stats, .prestart-details { grid-template-columns:repeat(3,1fr); }
}