/* TowGo v10 — modern mobility UI. Functional logic remains from v9/v8.3. */
:root {
  --bg: #edf1ef !important;
  --surface: #ffffff !important;
  --text: #101514 !important;
  --muted: #6d7773 !important;
  --line: #dce3df !important;
  --primary: #bdfb4f !important;
  --primary-dark: #94d62d !important;
  --dark: #0b100e !important;
  --success: #14b879 !important;
  --danger: #ef5267 !important;
  --info: #5577f5 !important;
  --warning: #f5ae38 !important;
  --v10-dark: #090d0c;
  --v10-dark-2: #111816;
  --v10-panel: rgba(255,255,255,.88);
  --v10-glass: rgba(255,255,255,.72);
  --v10-shadow: 0 24px 70px rgba(13,22,18,.10);
  --v10-shadow-sm: 0 12px 34px rgba(13,22,18,.075);
  --v10-radius: 24px;
  --v10-radius-lg: 32px;
}
* { scrollbar-color: #b9c5bf transparent; scrollbar-width: thin; }
::selection { background: rgba(189,251,79,.55); color: #0b100e; }
html { background: var(--v10-dark); }
body {
  background:
    radial-gradient(circle at 82% 2%, rgba(189,251,79,.16), transparent 29rem),
    radial-gradient(circle at 18% 82%, rgba(40,214,159,.08), transparent 34rem),
    #edf1ef !important;
  color: var(--text) !important;
  letter-spacing: -.008em;
}
body::before {
  opacity: .12 !important;
  background-image:
    linear-gradient(rgba(11,16,14,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,16,14,.028) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(189,251,79,.38) !important;
  outline-offset: 2px;
}

/* Floating global header */
.topbar {
  position: fixed !important;
  top: 14px !important;
  left: 14px !important;
  right: 14px !important;
  height: 70px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 22px !important;
  background: rgba(9,13,12,.93) !important;
  box-shadow: 0 20px 50px rgba(5,10,8,.22) !important;
  backdrop-filter: blur(24px) saturate(1.3) !important;
  z-index: 90 !important;
}
.brand { gap: 12px !important; }
.logo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  background: var(--primary) !important;
  color: #0b100e !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 11px 25px rgba(189,251,79,.18) !important;
  font-size: 14px !important;
}
.brand strong { font-size: 20px !important; font-weight: 900 !important; letter-spacing: -.045em !important; }
.brand span { color: #8e9b96 !important; font-size: 11px !important; font-weight: 650; }
.topbar-actions { gap: 8px !important; }
.language-control {
  height: 44px;
  padding: 3px 5px 3px 11px !important;
  border-radius: 14px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
}
.language-control::before { content: "" !important; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(189,251,79,.11); }
.language-select { min-width: 74px !important; font-size: 12px !important; letter-spacing: .08em !important; }
.topbar .ghost, .topbar-actions .map-settings-button {
  min-height: 44px !important;
  padding: 0 15px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #eef4f1 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
.topbar .ghost:hover, .topbar-actions .map-settings-button:hover { background: rgba(255,255,255,.11) !important; transform: translateY(-1px); }

/* Desktop app rail */
@media (min-width: 1080px) {
  .role-switcher {
    left: 14px !important;
    top: 98px !important;
    bottom: 14px !important;
    width: 236px !important;
    padding: 20px 13px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 30% 0, rgba(189,251,79,.10), transparent 16rem),
      linear-gradient(180deg,#101714,#080c0b) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    box-shadow: 0 24px 70px rgba(5,10,8,.20) !important;
  }
  .role-switcher::before {
    content: "WORKSPACE" !important;
    padding: 2px 13px 14px !important;
    color: #64716c !important;
    font-size: 9px !important;
    letter-spacing: .18em !important;
  }
  .role-switcher::after {
    content: "TowGo  •  Operations online";
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 18px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    color: #7e8c86;
    font-size: 10px;
    font-weight: 700;
  }
  .role-btn {
    min-height: 54px;
    padding: 0 14px !important;
    gap: 12px !important;
    border-radius: 16px !important;
    color: #9ba8a3 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  .role-btn:hover { background: rgba(255,255,255,.055) !important; color: #fff !important; }
  .role-btn.active {
    background: var(--primary) !important;
    color: #0a0f0d !important;
    box-shadow: 0 12px 28px rgba(189,251,79,.17) !important;
  }
  .role-btn::before {
    content: "" !important;
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px;
    background: currentColor;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  .role-btn[data-role="account"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5Zm-7.5 8.25c.52-4.1 3-6.15 7.5-6.15s6.98 2.05 7.5 6.15a.75.75 0 0 1-.74.85H5.24a.75.75 0 0 1-.74-.85Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5Zm-7.5 8.25c.52-4.1 3-6.15 7.5-6.15s6.98 2.05 7.5 6.15a.75.75 0 0 1-.74.85H5.24a.75.75 0 0 1-.74-.85Z'/%3E%3C/svg%3E"); }
  .role-btn[data-role="driver"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.25A1.25 1.25 0 0 1 4.25 4h9.5A1.25 1.25 0 0 1 15 5.25V8h2.8c.47 0 .91.27 1.12.69l1.96 3.92c.08.17.12.36.12.56v3.58A1.25 1.25 0 0 1 19.75 18h-.86a2.75 2.75 0 0 1-5.28 0H9.39a2.75 2.75 0 0 1-5.28 0h-.86A1.25 1.25 0 0 1 2 16.75V6.25C2 5.56 2.56 5 3.25 5H3Zm12 5v4.25h4v-1.03l-1.61-3.22H15ZM6.75 19a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm9.5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.25A1.25 1.25 0 0 1 4.25 4h9.5A1.25 1.25 0 0 1 15 5.25V8h2.8c.47 0 .91.27 1.12.69l1.96 3.92c.08.17.12.36.12.56v3.58A1.25 1.25 0 0 1 19.75 18h-.86a2.75 2.75 0 0 1-5.28 0H9.39a2.75 2.75 0 0 1-5.28 0h-.86A1.25 1.25 0 0 1 2 16.75V6.25C2 5.56 2.56 5 3.25 5H3Zm12 5v4.25h4v-1.03l-1.61-3.22H15ZM6.75 19a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm9.5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z'/%3E%3C/svg%3E"); }
  .role-btn[data-role="admin"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 3h5A1.5 1.5 0 0 1 11 4.5v5A1.5 1.5 0 0 1 9.5 11h-5A1.5 1.5 0 0 1 3 9.5v-5A1.5 1.5 0 0 1 4.5 3Zm10 0h5A1.5 1.5 0 0 1 21 4.5v5a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 13 9.5v-5A1.5 1.5 0 0 1 14.5 3Zm-10 10h5a1.5 1.5 0 0 1 1.5 1.5v5A1.5 1.5 0 0 1 9.5 21h-5A1.5 1.5 0 0 1 3 19.5v-5A1.5 1.5 0 0 1 4.5 13Zm10 0h5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5h-5a1.5 1.5 0 0 1-1.5-1.5v-5a1.5 1.5 0 0 1 1.5-1.5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 3h5A1.5 1.5 0 0 1 11 4.5v5A1.5 1.5 0 0 1 9.5 11h-5A1.5 1.5 0 0 1 3 9.5v-5A1.5 1.5 0 0 1 4.5 3Zm10 0h5A1.5 1.5 0 0 1 21 4.5v5a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 13 9.5v-5A1.5 1.5 0 0 1 14.5 3Zm-10 10h5a1.5 1.5 0 0 1 1.5 1.5v5A1.5 1.5 0 0 1 9.5 21h-5A1.5 1.5 0 0 1 3 19.5v-5A1.5 1.5 0 0 1 4.5 13Zm10 0h5a1.5 1.5 0 0 1 1.5 1.5v5a1.5 1.5 0 0 1-1.5 1.5h-5a1.5 1.5 0 0 1-1.5-1.5v-5a1.5 1.5 0 0 1 1.5-1.5Z'/%3E%3C/svg%3E"); }
  main {
    margin: 0 14px 0 264px !important;
    max-width: none !important;
    padding: 112px 28px 54px !important;
  }
}

/* Main content and headers */
.view.active { animation: v10View .28s ease both; }
@keyframes v10View { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.dashboard-header { margin-bottom: 20px !important; align-items: flex-end !important; }
.dashboard-header h1 {
  margin-top: 3px !important;
  font-size: clamp(31px,3vw,50px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: -.06em !important;
}
.eyebrow {
  color: #5a6a63 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
}
.dashboard-header > button.secondary { min-height: 46px; padding-inline: 18px !important; background: var(--dark) !important; border-color: var(--dark) !important; color: white !important; }

/* Premium hero */
.hero-card {
  min-height: 260px !important;
  padding: 42px 44px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: var(--v10-radius-lg) !important;
  background:
    radial-gradient(circle at 79% 12%, rgba(189,251,79,.28), transparent 24rem),
    radial-gradient(circle at 102% 100%, rgba(36,210,154,.18), transparent 22rem),
    linear-gradient(132deg,#090d0c 0%,#101915 54%,#142b20 100%) !important;
  box-shadow: 0 30px 80px rgba(5,12,9,.22) !important;
  isolation: isolate;
}
.hero-card::before {
  width: 330px !important;
  height: 330px !important;
  right: 8% !important;
  top: -105px !important;
  border: 1px solid rgba(189,251,79,.20) !important;
  box-shadow: 0 0 0 42px rgba(189,251,79,.035), 0 0 0 84px rgba(189,251,79,.025);
}
.hero-card::after {
  content: "" !important;
  width: 280px;
  height: 140px;
  right: 5% !important;
  bottom: 9% !important;
  opacity: .45 !important;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(189,251,79,.95) 44% 48%, transparent 49% 100%),
    linear-gradient(135deg, transparent 0 62%, rgba(255,255,255,.12) 63% 65%, transparent 66% 100%);
  transform: skewX(-14deg) !important;
  filter: none !important;
}
.hero-card h1 { max-width: 750px; font-size: clamp(35px,4.1vw,62px) !important; line-height: .98 !important; font-weight: 900 !important; letter-spacing: -.065em !important; }
.hero-card p:not(.eyebrow) { max-width: 690px; color: #aab7b1 !important; font-size: 15px !important; }
.hero-card .eyebrow { color: var(--primary) !important; }

/* Cards and bento system */
.card, .account-banner, .driver-duty-panel, .stat {
  border: 1px solid rgba(17,28,23,.075) !important;
  background: var(--v10-panel) !important;
  box-shadow: var(--v10-shadow-sm) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}
.card {
  padding: 25px !important;
  border-radius: var(--v10-radius) !important;
}
.card:hover { transform: none !important; box-shadow: var(--v10-shadow) !important; }
.card h2 { font-size: 21px !important; font-weight: 900 !important; letter-spacing: -.04em !important; }
.card h3 { letter-spacing: -.025em; }
.account-banner {
  margin: -25px 24px 24px !important;
  position: relative;
  z-index: 2;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 20px 45px rgba(5,12,9,.15) !important;
}
.account-banner.verified { background: rgba(246,255,236,.95) !important; border-color: rgba(148,214,45,.35) !important; }
.account-avatar { width: 42px !important; height: 42px !important; border-radius: 14px !important; background: var(--dark) !important; color: var(--primary) !important; }
.account-banner-actions button { min-height: 42px !important; }

/* Client ordering workspace */
@media (min-width: 980px) {
  #accountView > .grid.two-col {
    grid-template-columns: minmax(540px,1.08fr) minmax(410px,.92fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }
  #accountView .map-card { position: sticky; top: 112px; }
}
.form-card { background: rgba(255,255,255,.94) !important; }
.form-card > h2 { display:flex; align-items:center; gap:10px; }
.form-card > h2::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 5px rgba(189,251,79,.18); }
.customer-fields, .heavy-vehicle-panel {
  border: 1px solid #dde5e1 !important;
  border-radius: 19px !important;
  background: #f7faf8 !important;
  padding: 18px !important;
}
.heavy-vehicle-panel { background: linear-gradient(145deg,#f3f8f5,#fff) !important; }
.equipment-badge { background:#111816 !important; color:var(--primary) !important; border:0 !important; }
fieldset { border-radius: 18px !important; background: #f7faf8 !important; border-color: #dde5e1 !important; }
legend { font-weight: 900 !important; color:#34413c; }
label { color:#4f5c57; font-size:12px; font-weight:800; }
input, select, textarea {
  min-height: 50px !important;
  padding: 12px 14px !important;
  border: 1px solid #d8e1dd !important;
  border-radius: 14px !important;
  background: #f7f9f8 !important;
  color: #111614 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
input::placeholder, textarea::placeholder { color:#9aa49f; }
input:hover, select:hover, textarea:hover { border-color:#b7c5be !important; }
input:focus, select:focus, textarea:focus {
  border-color:#9bd72e !important;
  box-shadow:0 0 0 4px rgba(189,251,79,.18) !important;
}
.check { min-height:42px; padding:10px 12px !important; border:1px solid #dfe6e2; border-radius:13px; background:#fff; }
.check:has(input:checked) { border-color:#a7dc46; background:#f5ffe4; color:#26320f; }
.check input { min-height:0 !important; accent-color:#92d223; }
.address-autocomplete-hint { color:#87928d !important; }
.address-suggestions { border-radius:18px !important; border-color:#dce5e0 !important; box-shadow:0 26px 70px rgba(8,17,13,.20) !important; }
.address-suggestion { padding:13px 14px !important; }
.address-suggestion:hover,.address-suggestion.active { background:#f2f9e8 !important; }
.address-suggestion-pin { background:#ecffd0 !important; color:#354b12; }

/* Buttons */
.primary {
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--primary) !important;
  color: #0b100e !important;
  box-shadow: 0 15px 28px rgba(143,202,41,.20) !important;
  font-weight: 900 !important;
}
.primary:hover { transform: translateY(-2px) !important; background:#c8ff62 !important; box-shadow:0 20px 36px rgba(143,202,41,.26) !important; }
.secondary, .mini-btn, .tiny-btn, .action-btn {
  min-height: 44px;
  border-radius: 13px !important;
  background:#fff !important;
  border:1px solid #d9e2de !important;
  color:#1c2521 !important;
  font-weight:850 !important;
}
.secondary:hover,.mini-btn:hover,.tiny-btn:hover,.action-btn:hover { background:#f0f5f2 !important; border-color:#c4d0ca !important; transform:translateY(-1px); }
.accept { background:var(--dark) !important; color:white !important; }
.advance { background:var(--primary) !important; color:#10140e !important; }
.complete { background:#e4ffe9 !important; color:#117144 !important; }
.danger { background:#fff0f2 !important; color:#ad2d42 !important; }

/* Price and map */
.price-box {
  margin-top: 18px !important;
  padding: 21px !important;
  border-radius: 21px !important;
  background:
    radial-gradient(circle at 95% 0, rgba(189,251,79,.19), transparent 16rem),
    linear-gradient(145deg,#0b100e,#142019) !important;
  box-shadow:0 22px 52px rgba(8,16,12,.20) !important;
}
.price-box strong { font-size:36px !important; letter-spacing:-.055em; }
.price-box span,.price-box small,.price-box .price-extra-list { color:#91a09a !important; }
.price-status.ready { color:var(--primary) !important; }
.price-head,.price-line.extras,.price-note { border-color:rgba(255,255,255,.09) !important; }
.real-map, .driver-map, .admin-drivers-map {
  border: 0 !important;
  border-radius: 22px !important;
  background: #cfd8d4 !important;
  box-shadow: inset 0 0 0 1px rgba(17,27,23,.08), 0 14px 35px rgba(13,22,18,.09) !important;
}
.real-map { height: 500px !important; }
.driver-map { height: 370px !important; }
.map-controls { display:flex !important; width:fit-content; padding:5px !important; border-radius:15px !important; background:#eef2f0 !important; }
.map-mode { min-height:38px; border-radius:11px !important; color:#65716c !important; }
.map-mode.active { background:#fff !important; color:#101514 !important; box-shadow:0 6px 16px rgba(13,22,18,.10) !important; }
.route-summary { border:0 !important; border-radius:15px !important; background:#f1f5f3 !important; }
.google-map-loading { background:linear-gradient(145deg,#dce3e0,#cfd8d4) !important; }
.google-map-loading::before { content:""; width:42px; height:42px; border:4px solid rgba(16,21,20,.12); border-top-color:var(--primary-dark); border-radius:50%; animation:v10spin .8s linear infinite; position:absolute; top:42%; }
@keyframes v10spin { to { transform:rotate(360deg); } }
.live-truck-marker, .towgo-truck { background:#0b100e !important; color:var(--primary) !important; }

/* Driver workspace */
.driver-duty-panel {
  padding: 17px 19px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg,#101714,#0b100e) !important;
  color:white;
}
.driver-duty-copy span { color:#7f8e88 !important; }
.driver-duty-live.free { color:var(--primary) !important; }
.driver-duty-panel select { background:#202925 !important; color:#fff !important; border-color:#303c37 !important; }
.online-toggle { border-radius:14px !important; background:#fff !important; box-shadow:var(--v10-shadow-sm); }
.online-toggle input { accent-color:#84c821; }
.order-status { border-radius:18px !important; }

/* Metrics */
.stats-grid { gap: 13px !important; }
.stat {
  min-height: 116px;
  padding: 19px 20px !important;
  border-radius: 21px !important;
  position: relative;
  overflow:hidden;
}
.stat::after { content:""; position:absolute; width:68px; height:68px; right:-23px; bottom:-28px; border:14px solid rgba(16,21,20,.035); border-radius:50%; }
.stat span { font-size:11px !important; font-weight:800; letter-spacing:.035em; }
.stat strong { margin-top:12px !important; font-size:30px !important; font-weight:900 !important; letter-spacing:-.055em !important; }
#adminView .stats-grid .stat:first-child, #driverView .stats-grid .stat:first-child {
  background:linear-gradient(145deg,#101714,#0b100e) !important;
  color:#fff !important;
  border-color:#0b100e !important;
}
#adminView .stats-grid .stat:first-child span, #driverView .stats-grid .stat:first-child span { color:#7f8d87 !important; }
#adminView .stats-grid .stat:first-child strong, #driverView .stats-grid .stat:first-child strong { color:var(--primary) !important; }

/* Dispatch center */
.admin-fleet-card { padding: 18px !important; }
.admin-fleet-card > .section-title { padding:6px 7px 13px !important; }
.admin-fleet-layout { grid-template-columns:minmax(0,1.52fr) minmax(310px,.48fr) !important; gap:13px !important; }
.admin-drivers-map { height: 570px !important; }
.admin-drivers-list { gap:9px !important; max-height:570px !important; padding-right:3px; }
.admin-driver-row {
  padding:14px !important;
  border-radius:17px !important;
  border:1px solid #dce4e0 !important;
  background:#fff !important;
  box-shadow:none !important;
}
.admin-driver-row:hover { border-color:#b9c8c0 !important; box-shadow:0 12px 30px rgba(13,22,18,.09) !important; transform:translateY(-1px) !important; }
.admin-driver-copy strong { font-size:14px !important; }
.admin-card { border-radius:24px !important; overflow:hidden; }
.admin-card .section-title { padding:20px 22px !important; }
table { min-width: 940px !important; }
th { padding:13px 18px !important; background:#f1f5f3 !important; color:#738079 !important; font-size:10px !important; letter-spacing:.10em !important; }
td { padding:16px 18px !important; }
tr:hover td { background:#f8faf9 !important; }

/* Statuses and chat */
.status-pill { min-height:29px; display:inline-flex; align-items:center; border-radius:999px !important; padding:5px 10px !important; font-size:10px !important; font-weight:900 !important; }
.status-pill.online,.status-completed { background:#e5ffe9 !important; color:#157748 !important; }
.status-searching { background:#fff5d9 !important; color:#93600e !important; }
.status-accepted,.status-arrived,.status-loaded { background:#e9efff !important; color:#405cc8 !important; }
.toast { right:22px !important; bottom:22px !important; border-radius:17px !important; background:#0b100e !important; box-shadow:0 25px 70px rgba(5,10,8,.28) !important; }
.auth-modal { backdrop-filter:blur(14px) saturate(.8) !important; background:rgba(6,10,8,.55) !important; }
.auth-dialog { border-radius:28px !important; border-color:rgba(255,255,255,.7) !important; box-shadow:0 40px 100px rgba(4,9,7,.38) !important; }
.auth-code input { border-radius:16px !important; font-size:24px !important; }

/* Mobile application treatment */
@media (max-width: 720px) {
  body { background:#f1f4f2 !important; }
  .topbar {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    height: 62px !important;
    padding: 0 12px !important;
    border-radius: 19px !important;
  }
  .brand strong { font-size:18px !important; }
  .logo { width:38px !important; height:38px !important; border-radius:12px !important; }
  .language-control { height:38px; }
  .role-switcher {
    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;
    height: 70px !important;
    padding: 7px !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius: 22px !important;
    background:rgba(9,13,12,.94) !important;
    box-shadow:0 22px 55px rgba(5,10,8,.30) !important;
    backdrop-filter:blur(24px) !important;
  }
  .role-btn { color:#77847f !important; border-radius:16px !important; }
  .role-btn.active { background:rgba(189,251,79,.15) !important; color:var(--primary) !important; }
  .role-btn::before { filter:grayscale(1); }
  .role-btn.active::before { filter:none; }
  main { padding:88px 10px 102px !important; }
  .dashboard-header { padding:0 5px; align-items:flex-start !important; }
  .dashboard-header h1 { font-size:32px !important; }
  .dashboard-header > button.secondary { min-height:42px; }
  .hero-card { min-height:235px !important; padding:28px 23px !important; border-radius:26px !important; }
  .hero-card h1 { font-size:37px !important; }
  .hero-card::before { right:-100px !important; }
  .hero-card::after { width:180px; height:90px; right:-15px !important; }
  .account-banner { margin:-18px 10px 18px !important; padding:13px !important; border-radius:18px !important; }
  .account-banner-actions { display:grid !important; grid-template-columns:1fr 1fr; }
  .card { padding:18px !important; border-radius:21px !important; }
  .card:hover { box-shadow:var(--v10-shadow-sm) !important; }
  input,select,textarea { min-height:49px !important; font-size:16px !important; }
  .field-row.address-row,.field-row.destination-row { gap:7px !important; }
  .address-row .mini-btn { padding-inline:11px !important; }
  .stats-grid { grid-template-columns:1fr 1fr !important; }
  .stat { min-height:100px; padding:16px !important; }
  .stat strong { font-size:25px !important; }
  .real-map { height:340px !important; }
  .driver-map { height:290px !important; }
  .admin-drivers-map { height:390px !important; }
  .admin-fleet-layout { grid-template-columns:1fr !important; }
  .admin-drivers-list { max-height:none !important; }
  .price-box strong { font-size:32px !important; }
  .toast { left:12px !important; right:12px !important; bottom:94px !important; }
}

@media (max-width: 420px) {
  .topbar-actions { gap:5px !important; }
  .language-control { padding-left:8px !important; }
  .language-select { min-width:62px !important; }
  .hero-card h1 { font-size:33px !important; }
  .dashboard-header { flex-direction:column !important; align-items:stretch !important; }
  .dashboard-header > button.secondary { width:100%; }
  .account-banner-actions { grid-template-columns:1fr; }
  .stats-grid { gap:8px !important; }
  .stat { min-height:92px; }
}
@media (max-width:720px) {
  .role-btn::before { width:20px !important; height:20px !important; display:grid; place-items:center; font-size:20px !important; line-height:1 !important; font-family:ui-sans-serif,system-ui,sans-serif; filter:none !important; }
  .role-btn[data-role="account"]::before { content:"◉" !important; }
  .role-btn[data-role="driver"]::before { content:"▰" !important; transform:scaleX(1.15); }
  .role-btn[data-role="admin"]::before { content:"▦" !important; }
}