:root {
  color-scheme: light dark;
  font: 16px/1.55 system-ui, -apple-system, "Noto Sans SC", sans-serif;
  --background: #f5f7fb;
  --surface: #ffffff;
  --text: #1b293b;
  --muted: #536477;
  --line: #dce4ee;
  --blue: #176ce6;
  --blue-pressed: #0f54bd;
  --blue-soft: #eaf2ff;
  --danger: #ae2738;
  --danger-soft: #fff0f1;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--background); color: var(--text); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button, input, select, textarea { min-height: 44px; }
:focus-visible { outline: 3px solid #e99a32; outline-offset: 3px; }
.shell { max-width: 960px; margin-inline: auto; padding-inline: 20px; }
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { color: var(--text); text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: .02em; }
.brand span { color: var(--blue); font-weight: 650; }
.quiet-link { color: var(--blue); text-underline-offset: 4px; }
.page-heading { padding-block: clamp(28px, 5vw, 52px) 22px; }
.eyebrow { color: var(--blue); font-size: 14px; font-weight: 750; margin: 0 0 8px; }
h1 { font-size: clamp(29px, 5vw, 40px); line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: 20px; margin: 0 0 8px; }
.page-heading > p:last-child { max-width: 650px; color: var(--muted); margin: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 4vw, 28px); }
.login-panel { max-width: 480px; }
.muted { color: var(--muted); margin: 0 0 18px; }
form label, .filter-bar label { display: block; font-weight: 650; margin-bottom: 7px; }
input, select, textarea { width: 100%; border: 1px solid #aebccf; border-radius: 9px; background: var(--surface); color: var(--text); padding: 10px 12px; }
input::placeholder, textarea::placeholder { color: #687a8d; }
textarea { resize: vertical; }
#login-form input { margin-bottom: 18px; }
button.primary, button.secondary { border-radius: 9px; border: 1px solid transparent; padding: 9px 18px; font-weight: 700; }
button.primary { background: var(--blue); color: #fff; }
button.primary:hover:not(:disabled) { background: var(--blue-pressed); }
button.secondary { background: var(--blue-soft); color: #1557b8; }
button.secondary:hover:not(:disabled) { border-color: #9dc0f1; }
.message { min-height: 25px; margin: 18px 0; color: var(--muted); }
.message.error { color: var(--danger); font-weight: 600; }
.toolbar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 18px; }
.toolbar .muted { margin: 0; }
.toolbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.operator { color: var(--muted); margin-right: 5px; overflow-wrap: anywhere; }
.filter-bar { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto 155px; align-items: center; gap: 12px; margin-top: 24px; }
.filter-bar label { margin: 0; }
.driver-list { display: grid; gap: 12px; padding-bottom: 52px; }
.driver-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.driver-card h3 { font-size: 18px; margin: 0 0 6px; overflow-wrap: anywhere; }
.driver-card p { color: var(--muted); margin: 0; }
.qualification { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.badge { display: inline-flex; padding: 4px 9px; border-radius: 99px; font-size: 14px; font-weight: 700; background: var(--blue-soft); color: #1557b8; }
.badge.pending { background: #fff0d5; color: #784600; }
.badge.paused { background: var(--danger-soft); color: var(--danger); }
.driver-card button { flex: none; }
.empty { padding: 32px 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; }
dialog { width: min(calc(100vw - 32px), 480px); max-height: calc(100vh - 32px); overflow: auto; border: 1px solid var(--line); border-radius: 16px; padding: 25px; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px #091c3150; }
dialog::backdrop { background: #081a2d8a; }
dialog .muted { margin: 0 0 20px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
@media (max-width: 680px) {
  .filter-bar { grid-template-columns: 1fr; gap: 6px; }
  .filter-bar input { margin-bottom: 8px; }
  .driver-card { align-items: stretch; flex-direction: column; }
  .driver-card button { width: 100%; }
  .toolbar-actions { width: 100%; }
  .operator { width: 100%; }
}
@media (prefers-color-scheme: dark) {
  :root { --background:#111923; --surface:#1b2735; --text:#f1f5fa; --muted:#b2c0d0; --line:#354559; --blue:#7eb0ff; --blue-pressed:#9ac1ff; --blue-soft:#253d59; --danger:#ff9eaa; --danger-soft:#55313c; }
  button.primary { color:#10253d; }
  button.secondary, .badge { color:#c4ddff; }
  input, select, textarea { border-color:#65768a; }
  input::placeholder, textarea::placeholder { color:#b2c0d0; }
  .badge.pending { background:#584728; color:#ffe1a5; }
}
@media (prefers-reduced-motion: no-preference) {
  button, a { transition: background-color .16s ease, border-color .16s ease; }
}