:root {
    --ink: #0b1324;
    --ink-soft: #17233a;
    --paper: #f5f6f2;
    --white: #fff;
    --muted: #667085;
    --line: #dce1e6;
    --brand: #3578f6;
    --brand-dark: #235ed1;
    --green: #1c9b69;
    --orange: #f08b2c;
    --red: #d94747;
    --shadow: 0 18px 48px rgba(11, 19, 36, .11);
    --radius: 22px;
}

/* Modern public landing page */
.landing-page {
    --landing-navy: #071927;
    --landing-navy-soft: #0d2a3d;
    --landing-blue: #3578f6;
    --landing-blue-dark: #235ed1;
    --landing-teal: #18b7a0;
    --landing-mint: #7ee3d4;
    --landing-sky: #eaf3ff;
    background: #f7fafc;
}

.landing-page .site-header {
    position: relative;
    min-height: 78px;
    background: var(--landing-navy);
    border-bottom-color: rgba(255, 255, 255, .1);
}

.landing-page .brand-mark {
    color: #fff;
    background: linear-gradient(145deg, var(--landing-blue), var(--landing-teal));
    box-shadow: 0 8px 24px rgba(53, 120, 246, .3);
}

.landing-page .main-nav .button-primary {
    color: #fff;
    background: var(--landing-blue);
}

.map-page .brand-mark {
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    box-shadow: 0 8px 24px rgba(53, 120, 246, .26);
}

.map-page .button-primary {
    color: #fff;
    background: #3578f6;
}

.map-page .button-primary:hover {
    background: #235ed1;
    box-shadow: 0 10px 26px rgba(53, 120, 246, .24);
}

.map-page .customer-cta {
    background: linear-gradient(135deg, #edf5ff, #e5faf6);
    border-color: #c8e0ec;
    box-shadow: 0 10px 25px rgba(35, 94, 209, .07);
}

.map-page .customer-cta-icon {
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    box-shadow: 0 7px 16px rgba(53, 120, 246, .2);
}

.map-page .customer-cta p { color: #526f7c; }
.map-page .map-list-heading span,
.map-page .provider-cta-label { color: #208b9d; }
.map-page .map-popup a { color: #235ed1; }
.map-page .loading-ring { border-top-color: #3578f6; }

.landing-page main { overflow: hidden; }

.landing-wrap {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.landing-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(120deg, rgba(7, 25, 39, .98), rgba(9, 43, 61, .96)),
        var(--landing-navy);
}

.landing-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    opacity: .2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(to right, transparent, #000 55%, #000);
    animation: landing-grid-drift 24s linear infinite;
}

.landing-hero::after {
    position: absolute;
    right: 9%;
    bottom: -430px;
    width: 720px;
    height: 720px;
    content: "";
    border: 1px solid rgba(126, 227, 212, .08);
    border-radius: 50%;
    box-shadow:
        0 0 0 110px rgba(126, 227, 212, .025),
        0 0 0 220px rgba(53, 120, 246, .022);
    pointer-events: none;
    animation: landing-radar-breathe 9s ease-in-out infinite;
}

.landing-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.landing-glow-one {
    top: -220px;
    right: -100px;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(53, 120, 246, .3), transparent 68%);
    animation: landing-glow-one 14s ease-in-out infinite alternate;
}

.landing-glow-two {
    bottom: -300px;
    left: 28%;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, rgba(24, 183, 160, .2), transparent 68%);
    animation: landing-glow-two 17s ease-in-out infinite alternate;
}

@keyframes landing-grid-drift {
    to { background-position: 54px 54px; }
}

@keyframes landing-radar-breathe {
    0%, 100% { opacity: .65; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.03); }
}

@keyframes landing-glow-one {
    to { transform: translate(-70px, 80px) scale(1.12); }
}

@keyframes landing-glow-two {
    to { transform: translate(100px, -55px) scale(.92); }
}

.landing-hero-grid {
    min-height: 660px;
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(450px, .86fr);
    align-items: center;
    gap: clamp(48px, 7vw, 96px);
    padding-block: 84px 92px;
}

.landing-live-pill {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 24px;
    padding: 8px 12px;
    color: #bff8ed;
    background: rgba(24, 183, 160, .11);
    border: 1px solid rgba(126, 227, 212, .25);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.landing-live-pill span {
    width: 8px;
    height: 8px;
    background: #42ddbd;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(66, 221, 189, .12);
    animation: landing-live-pulse 2.2s ease-out infinite;
}

@keyframes landing-live-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(66, 221, 189, .12); }
    50% { box-shadow: 0 0 0 9px rgba(66, 221, 189, 0); }
}

.landing-hero-copy h1 {
    max-width: 650px;
    margin-bottom: 24px;
    font-size: clamp(48px, 6vw, 76px);
    line-height: .96;
    letter-spacing: -.064em;
}

.landing-hero-copy h1 em {
    color: var(--landing-mint);
    font-style: normal;
}

.landing-hero-copy > p {
    max-width: 610px;
    margin-bottom: 32px;
    color: #b9c9d6;
    font-size: 18px;
    line-height: 1.65;
}

.landing-hero-copy > * {
    animation: landing-hero-enter .72s cubic-bezier(.22, 1, .36, 1) both;
}
.landing-hero-copy > *:nth-child(2) { animation-delay: .07s; }
.landing-hero-copy > *:nth-child(3) { animation-delay: .14s; }
.landing-hero-copy > *:nth-child(4) { animation-delay: .21s; }
.landing-hero-copy > *:nth-child(5) { animation-delay: .28s; }
.landing-hero-copy > *:nth-child(6) { animation-delay: .35s; }

@keyframes landing-hero-enter {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}

.landing-live-summary {
    width: fit-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 13px;
    margin: -10px 0 27px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, .065);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    box-shadow: 0 16px 38px rgba(0, 8, 16, .16);
    backdrop-filter: blur(12px);
}
.landing-live-total {
    min-width: 116px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, .12);
}
.landing-live-total p,
.landing-live-total strong,
.landing-live-total small { display: block; margin: 0; }
.landing-live-total strong { color: #fff; font-size: 18px; line-height: 1; }
.landing-live-total small { margin-top: 3px; color: #93acbb; font-size: 9px; font-weight: 750; }
.landing-live-radar {
    position: relative;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: rgba(24, 183, 160, .12);
    border: 1px solid rgba(126, 227, 212, .24);
    border-radius: 50%;
}
.landing-live-radar::before,
.landing-live-radar::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(126, 227, 212, .3);
    border-radius: 50%;
    animation: landing-summary-radar 2.5s ease-out infinite;
}
.landing-live-radar::before { inset: 6px; }
.landing-live-radar::after { inset: 1px; animation-delay: 1.2s; }
.landing-live-radar i { width: 6px; height: 6px; background: #54e5c8; border-radius: 50%; box-shadow: 0 0 12px rgba(84, 229, 200, .8); }

@keyframes landing-summary-radar {
    0% { opacity: .9; transform: scale(.65); }
    100% { opacity: 0; transform: scale(1.45); }
}

.landing-live-category-strip { display: flex; align-items: center; gap: 6px; }
.landing-live-category-strip a {
    min-width: 39px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 7px;
    color: #cfe0eb;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    font-size: 11px;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.landing-live-category-strip a:hover { color: #fff; background: rgba(53, 120, 246, .22); transform: translateY(-2px); }
.landing-live-category-strip a.is-empty { color: #6f8492; }
.landing-live-category-strip b { min-width: 8px; color: #7ee3d4; font-size: 10px; text-align: center; }
.landing-live-category-strip a.is-empty b { color: #6f8492; }

.car-transporter-symbol {
    position: relative;
    width: 1.55em;
    height: 1.05em;
    flex: none;
    display: inline-block;
    color: inherit;
    line-height: 1;
}
.car-transporter-symbol .fa-truck {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: .78em;
}
.car-transporter-symbol .fa-car-side {
    position: absolute;
    top: -.04em;
    left: .02em;
    z-index: 1;
    font-size: .57em;
}
.car-transporter-symbol::after {
    position: absolute;
    right: .35em;
    bottom: .13em;
    left: .27em;
    height: .08em;
    content: "";
    background: currentColor;
    border-radius: 999px;
    transform: rotate(-9deg);
    transform-origin: right center;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.landing-button:hover { transform: translateY(-2px); }
.landing-button-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--landing-blue), #4d8dff);
    box-shadow: 0 14px 32px rgba(53, 120, 246, .25);
}
.landing-button-primary:hover { box-shadow: 0 18px 36px rgba(53, 120, 246, .36); }
.landing-button-ghost { color: #eaf2f8; background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); }
.landing-button-light { color: var(--landing-navy); background: #fff; box-shadow: 0 12px 28px rgba(5, 27, 41, .12); }

.landing-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
    color: #91a8b8;
    font-size: 11px;
    font-weight: 700;
}

.landing-trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.landing-trust-row i {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: #86ebd9;
    background: rgba(24, 183, 160, .13);
    border-radius: 50%;
    font-size: 10px;
    font-style: normal;
}

.landing-map-preview {
    position: relative;
    padding: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 30px;
    box-shadow: 0 32px 80px rgba(0, 8, 16, .4);
    backdrop-filter: blur(14px);
    transform: rotate(1deg);
    animation: landing-preview-float 7s ease-in-out infinite;
}

@keyframes landing-preview-float {
    0%, 100% { transform: rotate(1deg) translateY(0); }
    50% { transform: rotate(.55deg) translateY(-8px); }
}

.landing-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 7px 7px 14px;
    color: #dbe8f1;
    font-size: 11px;
}

.landing-map-toolbar span { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.landing-map-toolbar i {
    width: 8px;
    height: 8px;
    background: #42ddbd;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(66, 221, 189, .12);
    animation: landing-live-pulse 2.2s ease-out infinite;
}
.landing-map-toolbar strong {
    max-width: 62%;
    overflow: hidden;
    color: #9bb1bf;
    font-size: 9px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
}

.landing-map-progress {
    height: 2px;
    margin: -5px 7px 7px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border-radius: 999px;
}
.landing-map-progress span {
    width: 0;
    height: 100%;
    display: block;
    background: linear-gradient(90deg, #42ddbd, #62a0ff);
    border-radius: inherit;
}
.landing-map-progress span.is-running {
    animation: landing-focus-progress var(--landing-focus-duration, 6500ms) linear forwards;
}

@keyframes landing-focus-progress {
    from { width: 0; }
    to { width: 100%; }
}

.landing-map-canvas {
    position: relative;
    height: 380px;
    overflow: hidden;
    background: #dce9e4;
    border-radius: 21px;
}

.landing-map-canvas #landing-live-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #dce9e4;
}

.landing-map-expand {
    position: absolute;
    z-index: 800;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    color: var(--landing-navy);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(7, 25, 39, .12);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(7, 25, 39, .15);
    font-size: 10px;
    font-weight: 850;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.landing-map-canvas .leaflet-control-zoom {
    margin: 14px 0 0 14px;
    border-radius: 11px !important;
}

.landing-map-canvas .leaflet-control-attribution {
    padding: 2px 5px;
    color: #687b85;
    background: rgba(255, 255, 255, .82);
    font-size: 8px;
}

.landing-live-marker {
    --preview-marker: #18b7a0;
    --preview-marker-dark: #087d69;
    --preview-marker-pulse: rgba(24, 183, 160, .22);
    --preview-marker-pulse-border: rgba(24, 183, 160, .45);
    position: relative;
    width: 46px;
    height: 52px;
    display: grid;
    place-items: start center;
    filter: drop-shadow(0 8px 9px rgba(7, 25, 39, .28));
}
.landing-live-marker.category-van { --preview-marker: #3578f6; --preview-marker-dark: #235ed1; --preview-marker-pulse: rgba(53, 120, 246, .22); --preview-marker-pulse-border: rgba(53, 120, 246, .45); }
.landing-live-marker.category-truck { --preview-marker: #8469e8; --preview-marker-dark: #5b42bd; --preview-marker-pulse: rgba(132, 105, 232, .22); --preview-marker-pulse-border: rgba(132, 105, 232, .45); }
.landing-live-marker.category-semi_truck { --preview-marker: #dc6682; --preview-marker-dark: #ad3e58; --preview-marker-pulse: rgba(220, 102, 130, .22); --preview-marker-pulse-border: rgba(220, 102, 130, .45); }
.landing-live-marker.category-car_transporter { --preview-marker: #ee9439; --preview-marker-dark: #b96418; --preview-marker-pulse: rgba(238, 148, 57, .22); --preview-marker-pulse-border: rgba(238, 148, 57, .45); }
.landing-live-marker.category-courier { --preview-marker: #21a872; --preview-marker-dark: #087450; --preview-marker-pulse: rgba(33, 168, 114, .22); --preview-marker-pulse-border: rgba(33, 168, 114, .45); }
.landing-live-marker i {
    position: absolute;
    top: 2px;
    width: 40px;
    height: 40px;
    background: var(--preview-marker-pulse);
    border: 2px solid var(--preview-marker-pulse-border);
    border-radius: 50%;
    animation: landing-marker-pulse 2.2s ease-out infinite;
}
.landing-live-marker b {
    position: relative;
    z-index: 2;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--preview-marker), var(--preview-marker-dark));
    border: 3px solid #fff;
    border-radius: 14px 14px 14px 4px;
    font-size: 9px;
    letter-spacing: .03em;
    transform: rotate(-45deg);
}
.landing-live-marker b span { display: block; transform: rotate(45deg); }
.landing-live-marker em {
    position: absolute;
    z-index: 3;
    top: -1px;
    right: 0;
    width: 12px;
    height: 12px;
    background: #75efca;
    border: 3px solid #fff;
    border-radius: 50%;
}
.landing-live-marker.is-focused {
    filter: drop-shadow(0 10px 12px rgba(7, 25, 39, .36));
}
.landing-live-marker.is-focused::before {
    position: absolute;
    top: -9px;
    left: -11px;
    width: 66px;
    height: 66px;
    content: "";
    border: 2px solid var(--preview-marker-pulse-border);
    border-radius: 50%;
    animation: landing-focus-radar 2.4s ease-out infinite;
}
.landing-live-marker.is-focused b { animation: landing-focused-marker 1.8s ease-in-out infinite; }

@keyframes landing-marker-pulse {
    0% { opacity: .72; transform: scale(.85); }
    70%, 100% { opacity: 0; transform: scale(1.75); }
}

@keyframes landing-focus-radar {
    0% { opacity: .8; transform: scale(.62); }
    75%, 100% { opacity: 0; transform: scale(1.25); }
}

@keyframes landing-focused-marker {
    0%, 100% { transform: rotate(-45deg) scale(1); }
    50% { transform: rotate(-45deg) scale(1.055); }
}

.landing-live-popup strong,
.landing-live-popup span { display: block; }
.landing-live-popup strong { margin-bottom: 3px; font-size: 13px; }
.landing-live-popup span { margin-bottom: 8px; color: #71818c; font-size: 10px; }
.landing-live-popup a { color: #235ed1; font-size: 10px; font-weight: 850; }

.landing-availability-card {
    position: absolute;
    z-index: 800;
    right: 34px;
    bottom: 32px;
    left: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 16px;
    color: var(--landing-navy);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(7, 25, 39, .18);
    backdrop-filter: blur(12px);
}
.landing-availability-card > div { display: flex; align-items: center; gap: 11px; }
.landing-availability-icon { width: 34px; height: 34px; display: grid; place-items: center; color: #087d69; background: #dff9f3; border-radius: 11px; font-weight: 900; }
.landing-availability-card p, .landing-availability-card small { margin: 0; display: block; }
.landing-availability-card strong { font-size: 12px; }
.landing-availability-card strong.landing-count-updated { animation: landing-count-updated .7s ease-out; }
.landing-availability-card small { color: #71828e; font-size: 9px; }
.landing-availability-card a { color: var(--landing-blue-dark); font-size: 10px; font-weight: 850; }

@keyframes landing-count-updated {
    0% { color: var(--landing-blue-dark); transform: translateY(2px) scale(.97); }
    45% { color: #087d69; transform: translateY(-1px) scale(1.035); }
    100% { color: inherit; transform: none; }
}

.landing-categories { padding: 84px 0 92px; background: #f7fafc; }
.landing-section-heading { margin-bottom: 34px; }
.landing-section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.landing-section-heading span, .landing-kicker, .landing-audience-label {
    display: block;
    margin-bottom: 8px;
    color: #208b9d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.landing-section-heading h2, .landing-how h2, .landing-audience-card h2, .landing-app-content h2 {
    margin-bottom: 0;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.04;
    letter-spacing: -.045em;
}
.landing-section-heading > a { color: var(--landing-blue-dark); font-size: 13px; font-weight: 850; text-decoration: none; }

.landing-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landing-category-card {
    min-height: 204px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 23px;
    color: var(--landing-navy);
    background: #fff;
    border: 1px solid #e0e8ee;
    border-radius: 22px;
    box-shadow: 0 12px 36px rgba(26, 57, 75, .055);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.landing-category-card:hover { border-color: #bfd0e0; box-shadow: 0 20px 46px rgba(26, 57, 75, .1); transform: translateY(-4px); }
.landing-category-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 22px; color: #087d69; background: #dff9f3; border-radius: 16px; font-size: 22px; }
.category-van .landing-category-icon { color: #235ed1; background: #e6efff; }
.category-truck .landing-category-icon { color: #6847c7; background: #f0ebff; }
.category-semi .landing-category-icon { color: #ba4964; background: #ffedf2; }
.category-car-transporter .landing-category-icon { color: #b96418; background: #fff1df; }
.category-courier .landing-category-icon { color: #087450; background: #e3f8ef; }
.landing-category-card div { flex: 1; }
.landing-category-card strong, .landing-category-card small { display: block; }
.landing-category-card strong { margin-bottom: 5px; font-size: 17px; }
.landing-category-card small { color: #6d7d88; font-size: 11px; line-height: 1.5; }
.landing-category-availability {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    color: #087d69;
    font-size: 10px;
    font-weight: 850;
}
.landing-category-availability::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    content: "";
    background: #24b798;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(36, 183, 152, .11);
}
.landing-category-availability.is-loading { color: #7d91a0; }
.landing-category-availability.is-loading::before { background: #9aabb6; box-shadow: none; animation: landing-category-loading 1.2s ease-in-out infinite; }
.landing-category-availability.is-empty { color: #7d8d97; }
.landing-category-availability.is-empty::before { background: #a8b5bd; box-shadow: none; }
.landing-category-availability.is-error { color: #9a6671; }
.landing-category-availability.is-error::before { background: #c78a98; box-shadow: none; }
.landing-category-availability.is-updated { animation: landing-category-updated .65s ease-out; }
.landing-category-arrow { align-self: flex-end; color: #7d91a0; font-style: normal; transition: color .18s ease, transform .18s ease; }
.landing-category-card:hover .landing-category-arrow { color: var(--landing-blue-dark); transform: translateX(3px); }

.landing-motion-ready [data-landing-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--landing-reveal-delay, 0ms);
}
.landing-motion-ready [data-landing-reveal].is-visible { opacity: 1; transform: none; }
.landing-motion-ready .landing-category-card:nth-child(2) { --landing-reveal-delay: 60ms; }
.landing-motion-ready .landing-category-card:nth-child(3) { --landing-reveal-delay: 120ms; }
.landing-motion-ready .landing-category-card:nth-child(4) { --landing-reveal-delay: 180ms; }
.landing-motion-ready .landing-category-card:nth-child(5) { --landing-reveal-delay: 240ms; }
.landing-motion-ready .landing-category-card:nth-child(6) { --landing-reveal-delay: 300ms; }
.landing-motion-ready .landing-category-card.is-visible:hover { transform: translateY(-4px); transition-duration: .18s; transition-delay: 0ms; }

@keyframes landing-category-loading {
    0%, 100% { opacity: .45; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes landing-category-updated {
    0% { opacity: .55; transform: translateY(2px); }
    45% { color: #087d69; transform: translateY(-1px); }
    100% { opacity: 1; transform: none; }
}

.landing-how { padding: 96px 0; background: #fff; }
.landing-how-grid { display: grid; grid-template-columns: .78fr 1.12fr; gap: clamp(60px, 9vw, 120px); align-items: center; }
.landing-how-copy h2 { margin-bottom: 22px; }
.landing-how-copy > p { max-width: 520px; margin-bottom: 25px; color: #687985; font-size: 16px; line-height: 1.7; }
.landing-text-link { color: var(--landing-blue-dark); font-weight: 850; text-decoration: none; }
.landing-step-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.landing-step-list li { display: grid; grid-template-columns: 54px 1fr; gap: 19px; padding: 22px; background: #f5f8fa; border: 1px solid #e8eef2; border-radius: 18px; }
.landing-step-list li > span { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: var(--landing-blue); border-radius: 14px; font-size: 11px; font-weight: 900; }
.landing-step-list li:nth-child(2) > span { background: var(--landing-teal); }
.landing-step-list li:nth-child(3) > span { background: #775ee8; }
.landing-step-list strong { display: block; margin-bottom: 3px; font-size: 15px; }
.landing-step-list p { margin: 0; color: #71818c; font-size: 12px; line-height: 1.55; }

.landing-audiences { padding: 20px 0 96px; background: #fff; }
.landing-audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.landing-audience-card { min-height: 390px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; overflow: hidden; padding: clamp(30px, 4vw, 52px); color: #fff; border-radius: 28px; }
.customer-card { background: radial-gradient(circle at 100% 0, rgba(111, 160, 255, .5), transparent 45%), var(--landing-blue-dark); }
.provider-card { background: radial-gradient(circle at 100% 0, rgba(79, 221, 199, .34), transparent 45%), var(--landing-navy-soft); }
.landing-audience-label { color: #c6f8ef; }
.landing-audience-card h2 { max-width: 510px; margin-bottom: 16px; }
.landing-audience-card p { max-width: 520px; margin-bottom: 26px; color: rgba(255, 255, 255, .74); }

.landing-app-band { padding: 78px 0; color: #fff; background: #0a2232; }
.landing-app-content { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.landing-app-content h2 { margin-bottom: 12px; }
.landing-app-content p { max-width: 700px; margin: 0; color: #a9bfce; }

.landing-footer { padding: 28px 0; color: #9db0bd; background: #06151f; }
.landing-footer .landing-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; }
.landing-footer p { margin: 0; font-size: 12px; }
.landing-footer-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-weight: 850; text-decoration: none; }
.landing-footer-brand span { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--landing-blue), var(--landing-teal)); border-radius: 9px; }
.landing-footer nav { display: flex; gap: 20px; font-size: 11px; font-weight: 750; }
.landing-footer nav a { text-decoration: none; }
.landing-footer nav a:hover { color: #fff; }

@media (max-width: 980px) {
    .landing-hero-grid { min-height: auto; grid-template-columns: 1fr; padding-block: 68px 76px; }
    .landing-hero-copy { max-width: 720px; }
    .landing-map-preview { width: min(600px, 100%); justify-self: center; }
    .landing-category-grid { grid-template-columns: 1fr 1fr; }
    .landing-how-grid { grid-template-columns: 1fr; gap: 44px; }
    .landing-audience-card { min-height: 340px; }
    .landing-footer .landing-wrap { grid-template-columns: 1fr auto; }
    .landing-footer p { display: none; }
}

@media (max-width: 700px) {
    .landing-wrap { width: min(100% - 28px, 1180px); }
    .landing-page .site-header { min-height: 70px; }
    .landing-page .brand small { display: none; }
    .landing-page .main-nav > a:not(.button):first-child,
    .landing-page .main-nav > a:not(.button):nth-child(3) { display: none; }
    .landing-page .main-nav { gap: 12px; font-size: 12px; }
    .landing-hero-grid { gap: 48px; padding-block: 54px 62px; }
    .landing-hero-copy h1 { font-size: clamp(43px, 13vw, 62px); }
    .landing-hero-copy > p { font-size: 16px; }
    .landing-live-summary { width: 100%; align-items: stretch; flex-direction: column; }
    .landing-live-total { padding: 0 0 9px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .landing-live-category-strip { justify-content: space-between; }
    .landing-live-category-strip a { min-width: 0; flex: 1 1 0; padding-inline: 4px; }
    .landing-hero-actions { display: grid; }
    .landing-button { width: 100%; }
    .landing-trust-row { display: grid; gap: 9px; }
    .landing-map-preview { padding: 10px; border-radius: 24px; transform: none; animation: none; }
    .landing-map-canvas { height: 310px; }
    .landing-availability-card { right: 22px; bottom: 22px; left: 22px; }
    .landing-availability-card a { display: none; }
    .landing-categories, .landing-how { padding: 68px 0; }
    .landing-section-heading-row { align-items: flex-start; flex-direction: column; }
    .landing-category-grid { grid-template-columns: 1fr; }
    .landing-category-card { min-height: 165px; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; }
    .landing-category-icon { margin: 0; }
    .landing-category-arrow { align-self: center; }
    .landing-audience-grid { grid-template-columns: 1fr; }
    .landing-audience-card { min-height: 350px; }
    .landing-app-content { align-items: flex-start; flex-direction: column; }
    .landing-footer .landing-wrap { grid-template-columns: 1fr; }
    .landing-footer nav { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero::before,
    .landing-hero::after,
    .landing-glow-one,
    .landing-glow-two,
    .landing-hero-copy > *,
    .landing-map-preview,
    .landing-live-radar::before,
    .landing-live-radar::after,
    .landing-live-pill span,
    .landing-map-toolbar i,
    .landing-live-marker i,
    .landing-live-marker.is-focused::before,
    .landing-live-marker.is-focused b,
    .landing-map-progress span.is-running,
    .landing-availability-card strong.landing-count-updated,
    .landing-category-availability,
    .landing-category-availability.is-loading::before { animation: none; }

    .landing-motion-ready [data-landing-reveal] { opacity: 1; transform: none; transition: none; }
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 0%, rgba(53, 120, 246, .12), transparent 34rem),
        radial-gradient(circle at 94% 18%, rgba(24, 183, 160, .08), transparent 28rem),
        #f5f8fa;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }

.site-header {
    position: relative;
    z-index: 1100;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px clamp(18px, 4vw, 64px);
    color: var(--white);
    background: rgba(11, 19, 36, .98);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--white);
    text-decoration: none;
}

.brand-mark {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    box-shadow: 0 8px 24px rgba(53, 120, 246, .24);
    border-radius: 13px;
    font-size: 23px;
    font-weight: 900;
    transform: skew(-4deg);
}

.brand strong,
.brand small { display: block; }
.brand strong { letter-spacing: -.02em; }
.brand small { color: #9eabc0; font-size: 11px; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 14px;
    font-weight: 700;
}

.main-nav > a:not(.button),
.link-button {
    color: #d8dfeb;
    text-decoration: none;
}

.main-nav form { margin: 0; }
.link-button { padding: 0; border: 0; background: transparent; }
.main-nav a:hover, .link-button:hover { color: var(--white); }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--brand); }
.button-primary:hover { background: var(--brand-dark); box-shadow: 0 10px 26px rgba(53, 120, 246, .24); }
.button-secondary { color: var(--ink); background: var(--white); border-color: var(--line); }
.button-danger { color: #982e2e; background: #fff1f1; border-color: #ffd2d2; }
.button-muted { color: #4d5665; background: #f1f3f5; border-color: #d9dee4; }
.button-small { min-height: 36px; padding: 7px 12px; border-radius: 9px; font-size: 13px; }
.button-large { min-height: 52px; padding-inline: 26px; }
.button-block { width: 100%; }

.flash {
    position: relative;
    z-index: 1200;
    margin: 16px auto 0;
    width: min(760px, calc(100% - 32px));
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.flash-success { color: #0b6747; background: #e9fff6; border: 1px solid #bdebd8; }
.flash-error { color: #8f2f2f; background: #fff1f1; border: 1px solid #ffcaca; }
.flash ul { margin: 6px 0 0; padding-left: 20px; }

.map-page {
    height: 100dvh;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}
.map-page .site-header { flex: none; }
.map-page main { min-height: 0; flex: 1; }

.map-shell {
    position: relative;
    height: 100%;
    isolation: isolate;
    background: #dce5df;
}

.map-stage {
    position: absolute;
    z-index: 0;
    inset: 0;
    min-width: 0;
}

#map {
    width: 100%;
    height: 100%;
    background: #dce5df;
}

.map-sidebar {
    position: absolute;
    z-index: 900;
    top: 18px;
    bottom: 18px;
    left: 18px;
    width: min(410px, calc(100% - 36px));
    overflow-y: auto;
    padding: 22px;
    background: rgba(250, 251, 248, .96);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 26px;
    box-shadow: 0 24px 70px rgba(11, 19, 36, .22);
    backdrop-filter: blur(18px);
    scrollbar-color: #c2c9c4 transparent;
    scrollbar-width: thin;
}

.map-sidebar::-webkit-scrollbar { width: 6px; }
.map-sidebar::-webkit-scrollbar-track { background: transparent; }
.map-sidebar::-webkit-scrollbar-thumb { background: #c2c9c4; border-radius: 999px; }

.map-sidebar-intro {
    padding: 2px 2px 0;
}

.map-sheet-handle { display: none; }

.live-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 10px;
    color: #126747;
    background: #e7f8f0;
    border: 1px solid #c9eddd;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.live-status span,
.map-live-indicator span {
    width: 8px;
    height: 8px;
    background: #20a873;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(32, 168, 115, .13);
}

.eyebrow {
    margin-bottom: 10px;
    color: #208b9d;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 {
    margin-bottom: 14px;
    font-size: clamp(34px, 4.5vw, 58px);
    line-height: .98;
    letter-spacing: -.055em;
}

.map-sidebar h1 {
    max-width: 370px;
    margin-bottom: 9px;
    font-size: clamp(31px, 2.7vw, 40px);
    line-height: 1;
}

.map-sidebar .lead {
    max-width: 365px;
    margin-bottom: 15px;
    color: #5f6e69;
    font-size: 15px;
}

.map-category-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 12px;
    padding-bottom: 2px;
}

.map-category-button {
    min-width: 0;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    color: #53645d;
    background: rgba(255, 255, 255, .78);
    border: 1px solid #d8e2dc;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 850;
    text-align: left;
}

.map-category-button:first-child { grid-column: 1 / -1; }

.map-category-icon {
    width: 30px;
    height: 30px;
    flex: none;
    display: grid;
    place-items: center;
    color: #2672ff;
    background: #eaf2ff;
    border-radius: 9px;
    font-size: 13px;
}

.map-category-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.map-category-count {
    min-width: 24px;
    padding: 3px 6px;
    color: #52616f;
    background: #edf1f3;
    border-radius: 999px;
    font-size: 11px;
    text-align: center;
}

.map-category-button:hover,
.map-category-button.active {
    color: #fff;
    background: #152238;
    border-color: #152238;
}

.map-category-button.active .map-category-icon {
    color: #fff;
    background: rgba(255, 255, 255, .15);
}

.map-category-button.active .map-category-count {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.map-radius-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 11px;
    padding: 11px 12px;
    background: #f1f6ff;
    border: 1px solid #d7e4f7;
    border-radius: 14px;
}

.map-radius-control label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #263a50;
}

.map-radius-control label > span:last-child { min-width: 0; }
.map-radius-control strong { display: block; font-size: 12px; }
.map-radius-control small {
    display: block;
    margin-top: 1px;
    color: #60758a;
    font-size: 10px;
    line-height: 1.3;
}

.map-radius-icon {
    width: 31px;
    height: 31px;
    flex: none;
    display: grid;
    place-items: center;
    color: #2672ff;
    background: #fff;
    border-radius: 9px;
}

.map-scope-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.map-scope-options button {
    min-height: 34px;
    padding: 6px 4px;
    color: #3c5268;
    background: #fff;
    border: 1px solid #cbd8e8;
    border-radius: 9px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 850;
}

.map-scope-options button:hover,
.map-scope-options button.active {
    color: #fff;
    background: #2672ff;
    border-color: #2672ff;
}

#map.is-selecting-point { cursor: crosshair; }

.selected-point-marker {
    position: relative;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #2672ff, #12b8ad);
    border: 4px solid #fff;
    border-radius: 50% 50% 50% 12px;
    box-shadow: 0 8px 24px rgba(21, 78, 145, .34);
    transform: rotate(-45deg);
}

.selected-point-marker i { transform: rotate(45deg); font-size: 16px; }

.selected-point-marker::after {
    content: '';
    position: absolute;
    inset: -9px;
    border: 2px solid rgba(38, 114, 255, .28);
    border-radius: 50%;
    animation: selected-point-pulse 1.8s ease-out infinite;
}

@keyframes selected-point-pulse {
    from { opacity: .85; transform: scale(.72); }
    to { opacity: 0; transform: scale(1.35); }
}

.map-radius-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 55px;
    align-items: center;
    gap: 8px;
    margin-top: 1px;
}

.map-radius-slider[hidden] { display: none; }

.map-radius-slider input {
    width: 100%;
    height: 20px;
    margin: 0;
    accent-color: #2672ff;
    cursor: pointer;
}

.map-radius-slider input:disabled { cursor: not-allowed; opacity: .5; }
.map-radius-slider output {
    padding: 5px 7px;
    color: #fff;
    background: #2672ff;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 850;
    text-align: center;
}

.map-overview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin: 0 0 10px;
    padding: 10px 12px;
    color: #586760;
    background: #fff;
    border: 1px solid #dce5e0;
    border-radius: 13px;
    font-size: 12px;
}

.map-overview span { display: inline-flex; align-items: center; gap: 5px; }
.map-overview strong { color: #1e2c26; }
.map-overview > span > i:not(.fa-solid) {
    width: 7px;
    height: 7px;
    background: #8b9690;
    border-radius: 50%;
}
.map-overview .fa-location-dot { color: #2672ff; }
.map-overview .available > i { background: var(--green) !important; }
.map-overview .busy > i { background: var(--orange) !important; }

.lead { color: var(--muted); font-size: 16px; }
.muted { color: var(--muted); }

.availability-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 12px;
}

.availability-summary > div {
    position: relative;
    min-height: 84px;
    padding: 14px 14px 13px 43px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #dde5e0;
    border-radius: 17px;
}

.availability-summary strong,
.availability-summary > div > span:not(.availability-icon) { display: block; }
.availability-summary strong { display: block; font-size: 25px; line-height: 1; }
.availability-summary > div > span:not(.availability-icon) {
    margin-top: 7px;
    color: #68756f;
    font-size: 10px;
    font-weight: 700;
}

.availability-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 6px;
}

.availability-icon::after {
    width: 6px;
    height: 6px;
    content: "";
    border-radius: 50%;
}

.availability-icon.available { background: #ddf6eb; }
.availability-icon.available::after { background: var(--green); }
.availability-icon.busy { background: #fff0dd; }
.availability-icon.busy::after { background: var(--orange); }

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 2px 23px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.map-filter-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 14px;
    padding: 9px 11px;
    color: #53645d;
    background: #edf3ef;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.45;
}

.map-filter-icon {
    position: relative;
    width: 15px;
    height: 15px;
    flex: none;
    margin-top: 1px;
    border: 2px solid #4a7565;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.map-filter-icon::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 5px;
    height: 5px;
    content: "";
    background: #4a7565;
    border-radius: 50%;
}

.legend-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 50%;
}

.legend-dot.available { background: var(--green); }
.legend-dot.busy { background: var(--orange); }

.map-list-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin: 0 2px 10px;
}

.map-list-heading span,
.provider-cta-label {
    display: block;
    margin-bottom: 3px;
    color: #208b9d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.map-list-heading h2 {
    margin: 0;
    font-size: 21px;
    letter-spacing: -.025em;
}

.map-list-heading small {
    max-width: 105px;
    color: #7b8882;
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
}

.evacuator-list { display: grid; gap: 10px; }

.evacuator-card {
    padding: 15px;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #dfe6e2;
    border-radius: 18px;
    box-shadow: 0 7px 20px rgba(11, 19, 36, .045);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.evacuator-card:hover {
    border-color: #c4d2cb;
    box-shadow: 0 12px 26px rgba(11, 19, 36, .09);
    transform: translateY(-1px);
}

.evacuator-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.map-trip-badge {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-items: center;
    margin: 12px 0;
    padding: 11px 12px;
    border: 1px solid rgba(238, 148, 57, .3);
    border-radius: 12px;
    background: #fff4e5;
    color: #7f420b;
}
.map-trip-badge > span { grid-row: 1 / 3; font-size: 20px; }
.map-trip-badge strong { font-size: 13px; }
.map-trip-badge small { font-size: 12px; }
.map-trip-badge em {
    grid-column: 2;
    margin-top: 2px;
    color: #95612f;
    font-size: 10px;
    font-style: normal;
}

.evacuator-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.evacuator-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    display: grid;
    place-items: center;
    color: #0f6848;
    background: #ddf5e9;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
}

.evacuator-avatar-icon {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.evacuator-avatar.category-van { color: #245bb6; background: #e6efff; }
.evacuator-avatar.category-truck { color: #a95409; background: #fff0dc; }
.evacuator-avatar.category-semi_truck { color: #6245a7; background: #efe9ff; }
.evacuator-avatar.category-car_transporter { color: #b96418; background: #fff1df; }
.evacuator-avatar.category-courier { color: #087450; background: #e3f8ef; }

.evacuator-card h3 {
    margin: 0;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.evacuator-card p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }

.status-pill {
    flex: none;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-pill.available { color: #0b6747; background: #dcfbed; }
.status-pill.busy { color: #8d4b0d; background: #fff0de; }

.evacuator-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.evacuator-meta span {
    padding: 5px 8px;
    color: #65716b;
    background: #f2f5f3;
    border-radius: 8px;
    font-size: 11px;
}

.evacuator-meta strong { color: #26362f; }

.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 9px 0 12px;
}

.service-tags span {
    padding: 4px 7px;
    color: #56635d;
    background: #edf1ef;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 700;
}

.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.evacuator-card-head + .card-actions { margin-top: 12px; }
.card-actions.single-action { grid-template-columns: 1fr; }
.card-actions .button { min-height: 39px; padding: 7px 10px; border-radius: 10px; font-size: 11px; }
.call-button { gap: 6px; }
.call-button span { font-size: 13px; }
.whatsapp-button { color: #126747; border-color: #cbe6d9; background: #f5fcf8; }

.provider-cta {
    margin-top: 14px;
    padding: 14px;
    color: #22312b;
    background: #eaf0ec;
    border: 1px solid #d8e2dc;
    border-radius: 18px;
}

.provider-cta strong { display: block; font-size: 15px; }
.provider-cta p { margin: 3px 0 10px; color: #66736d; font-size: 12px; }
.provider-cta .button { background: rgba(255, 255, 255, .78); border-color: #cad5cf; }

.customer-cta {
    position: sticky;
    z-index: 4;
    bottom: -1px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 14px -8px -8px;
    padding: 10px;
    color: var(--ink);
    background: linear-gradient(135deg, #fff8e9, #fff3d4);
    border: 1px solid #edd397;
    border-radius: 19px;
    box-shadow: 0 10px 25px rgba(122, 82, 8, .07);
}

.customer-cta-copy {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 0;
}

.customer-cta-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    color: #fff;
    background: #ef9d24;
    border-radius: 12px;
    box-shadow: 0 7px 16px rgba(215, 130, 5, .2);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .03em;
}

.customer-cta strong { display: block; font-size: 14px; }
.customer-cta p { margin: 1px 0 0; color: #765b25; font-size: 11px; line-height: 1.3; }
.customer-cta .button { gap: 13px; min-height: 40px; padding: 8px 12px; font-size: 11px; white-space: nowrap; }

.locate-button,
.privacy-note,
.map-live-indicator {
    position: absolute;
    z-index: 800;
    border: 1px solid rgba(11, 19, 36, .12);
    box-shadow: 0 10px 30px rgba(11, 19, 36, .15);
    backdrop-filter: blur(12px);
}

.locate-button {
    top: 20px;
    right: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, .94);
    border-radius: 14px;
    font-weight: 800;
}

.locate-button-icon {
    position: relative;
    width: 15px;
    height: 15px;
    border: 2px solid #147452;
    border-radius: 50%;
}

.locate-button-icon::before,
.locate-button-icon::after {
    position: absolute;
    content: "";
    background: #147452;
}

.locate-button-icon::before { top: -5px; bottom: -5px; left: 5px; width: 1px; }
.locate-button-icon::after { top: 5px; right: -5px; left: -5px; height: 1px; }

.map-live-indicator {
    top: 21px;
    left: 448px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    color: #40534b;
    background: rgba(255, 255, 255, .9);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.privacy-note {
    right: 20px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    color: #53615b;
    background: rgba(255, 255, 255, .9);
    border-radius: 10px;
    font-size: 10px;
}

.privacy-note span {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #218960;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 900;
}

.custom-marker {
    --marker-color: #2ab17f;
    --marker-dark: #12805a;
    --marker-pulse: rgba(32, 168, 115, .26);
    --marker-pulse-border: rgba(32, 168, 115, .45);
    position: relative;
    width: 52px;
    height: 58px;
    display: grid;
    place-items: start center;
    filter: drop-shadow(0 9px 10px rgba(11, 19, 36, .25));
}

.custom-marker.category-van {
    --marker-color: #438af3;
    --marker-dark: #245bb6;
    --marker-pulse: rgba(57, 126, 230, .24);
    --marker-pulse-border: rgba(57, 126, 230, .46);
}

.custom-marker.category-truck {
    --marker-color: #f2a33a;
    --marker-dark: #c66b13;
    --marker-pulse: rgba(226, 135, 30, .25);
    --marker-pulse-border: rgba(226, 135, 30, .48);
}

.custom-marker.category-semi_truck {
    --marker-color: #936fe1;
    --marker-dark: #6245a7;
    --marker-pulse: rgba(126, 88, 207, .24);
    --marker-pulse-border: rgba(126, 88, 207, .46);
}
.custom-marker.category-car_transporter {
    --marker-color: #ee9439;
    --marker-dark: #b96418;
    --marker-pulse: rgba(238, 148, 57, .21);
    --marker-pulse-border: rgba(238, 148, 57, .42);
}
.custom-marker.category-courier {
    --marker-color: #21a872;
    --marker-dark: #087450;
    --marker-pulse: rgba(33, 168, 114, .21);
    --marker-pulse-border: rgba(33, 168, 114, .42);
}

.custom-marker__pulse {
    position: absolute;
    top: 3px;
    left: 6px;
    width: 40px;
    height: 40px;
    background: var(--marker-pulse);
    border: 2px solid var(--marker-pulse-border);
    border-radius: 50%;
    animation: online-marker-pulse 2.2s ease-out infinite;
}

.custom-marker__pin {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--marker-color), var(--marker-dark));
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 5px 14px rgba(13, 103, 72, .28);
}

.custom-marker__pin::after {
    position: absolute;
    z-index: -1;
    bottom: -6px;
    left: 13px;
    width: 14px;
    height: 14px;
    content: "";
    background: var(--marker-dark);
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 0 0 4px;
    transform: rotate(45deg);
}

.map-capacity {
    margin: 8px 0 0;
    color: #53645d;
    font-size: 11px;
    line-height: 1.45;
}

.custom-marker__truck {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.custom-marker__online {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 1px;
    width: 14px;
    height: 14px;
    background: #72f0b5;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 7px rgba(7, 74, 50, .3);
}

.custom-marker__capacity {
    position: absolute;
    z-index: 3;
    right: -8px;
    bottom: 7px;
    min-width: 27px;
    height: 23px;
    display: grid;
    place-items: center;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #0b192c;
    color: #fff;
    box-shadow: 0 4px 10px rgba(11, 25, 44, .28);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.transport-route-destination {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #17b99b, #087a69);
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 8px;
    box-shadow: 0 8px 18px rgba(11, 25, 44, .28);
    font-size: 16px;
    transform: rotate(-45deg);
}
.transport-route-destination i { transform: rotate(45deg); }
.transport-route-line { filter: drop-shadow(0 2px 2px rgba(11, 53, 88, .2)); }
.transport-route-arrow {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #fff;
    background: #0b3558;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(11, 25, 44, .22);
    font-size: 11px;
    line-height: 1;
}
.transport-route-waypoint {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50% 50% 50% 8px;
    background: linear-gradient(145deg, #3578f6, #174ea6);
    color: #fff;
    box-shadow: 0 7px 16px rgba(11, 25, 44, .28);
    font-size: 13px;
    font-weight: 900;
    transform: rotate(-45deg);
}
.transport-route-waypoint b { transform: rotate(45deg); }
.map-trip-waypoints { color: #8a4b10; }

.route-overview-button {
    position: absolute;
    z-index: 550;
    top: 76px;
    right: 18px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    color: #fff;
    background: #0b3558;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(11, 25, 44, .24);
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
}
.route-overview-button[hidden] { display: none; }
.route-overview-button:hover { background: #124d76; }

@keyframes online-marker-pulse {
    0% {
        opacity: .75;
        transform: scale(.85);
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.9);
    }
}

.leaflet-control-zoom {
    overflow: hidden;
    border: 0 !important;
    border-radius: 13px !important;
    box-shadow: 0 10px 28px rgba(11, 19, 36, .16) !important;
}

.leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
    border-color: #e3e8e5 !important;
}

.map-page .leaflet-left { left: 430px; }

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background-color: rgba(32, 168, 115, .22); }

.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    color: #fff;
    background-color: #20966a;
    font-weight: 900;
}

.leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: var(--shadow); }
.leaflet-popup-content { margin: 14px 16px; min-width: 190px; }
.map-popup h3 { margin-bottom: 4px; font-size: 16px; }
.map-popup p { margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.map-popup a { color: #235ed1; font-weight: 800; }

.empty-state {
    padding: 24px 18px;
    color: var(--muted);
    text-align: center;
    background: rgba(255, 255, 255, .72);
    border: 1px dashed #c6d1cb;
    border-radius: 17px;
}

.empty-state p { margin: 8px 0 0; font-size: 13px; }

.empty-state-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    color: #2672ff;
    background: #eaf2ff;
    border-radius: 13px;
}

.loading-ring {
    width: 25px;
    height: 25px;
    display: inline-block;
    border: 3px solid #d8dde2;
    border-top-color: var(--brand-dark);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.page-container {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
    padding: 64px 0 90px;
}

.page-container.narrow { width: min(900px, calc(100% - 40px)); }
.page-heading { max-width: 760px; margin-bottom: 34px; }
.page-heading h1 { font-size: clamp(40px, 6vw, 68px); }
.page-heading p { color: var(--muted); font-size: 17px; }

.heading-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.heading-row > div { max-width: 760px; }

.card {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-card { width: min(520px, 100%); padding: clamp(24px, 4vw, 40px); }
.form-card.wide { width: 100%; }
.form-card h2 { margin-bottom: 22px; }

.auth-shell {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: minmax(280px, 540px) minmax(340px, 520px);
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 8vw, 100px);
    padding: 50px 28px;
}

.auth-intro h1 { font-size: clamp(48px, 7vw, 84px); }
.auth-intro p { max-width: 510px; color: var(--muted); font-size: 18px; }

.auth-action-column {
    width: min(520px, 100%);
    display: grid;
    gap: 14px;
}

.android-login-download {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--ink);
    background: rgba(255, 255, 255, .82);
    border: 1px solid var(--line);
    border-radius: 15px;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.android-login-download:hover {
    transform: translateY(-1px);
    border-color: #8fb6ff;
    box-shadow: 0 12px 30px rgba(11, 19, 36, .09);
}

.android-login-download strong,
.android-login-download small { display: block; }
.android-login-download small { margin-top: 2px; color: var(--muted); font-size: 11px; }

.android-login-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 11px;
    font-weight: 900;
}

.heading-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.android-download-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 68px 0 90px;
}

.android-download-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: center;
    gap: clamp(36px, 7vw, 90px);
}

.android-download-copy h1 {
    max-width: 760px;
    font-size: clamp(48px, 7vw, 82px);
}

.android-download-copy > p {
    max-width: 680px;
    color: var(--muted);
    font-size: clamp(17px, 2vw, 21px);
}

.android-download-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-top: 28px;
}

.android-download-actions > span {
    color: var(--muted);
    font-size: 12px;
}

.android-phone-preview {
    position: relative;
    overflow: hidden;
    padding: 34px 30px 30px;
    color: var(--white);
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 183, 160, .3), transparent 45%),
        var(--ink);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 34px;
    box-shadow: 0 30px 80px rgba(11, 19, 36, .24);
}

.android-app-mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 18px;
    font-size: 34px;
    font-weight: 950;
    transform: skew(-4deg);
}

.android-phone-preview .status-kicker { color: #aab5c7; }
.android-phone-preview h2 { margin-bottom: 20px; font-size: 30px; }
.android-phone-preview ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.android-phone-preview li {
    padding: 12px 14px 12px 40px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
}
.android-phone-preview li::before {
    content: "✓";
    position: absolute;
    margin-left: -25px;
    color: #55d69f;
    font-weight: 900;
}

.android-install-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
    gap: 18px;
    margin-top: 60px;
}

.android-install-card,
.android-security-card { padding: clamp(24px, 4vw, 38px); }
.android-install-card h2,
.android-security-card h2 { margin-bottom: 22px; font-size: 30px; }

.android-install-steps {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.android-install-steps li {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 15px;
    padding: 16px;
    background: #f7f8f6;
    border: 1px solid #e5e9e6;
    border-radius: 15px;
}

.android-install-steps li > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
}

.android-install-steps strong { font-size: 15px; }
.android-install-steps p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.android-security-card { background: #f2f7ff; border-color: #d5e3f8; }
.android-security-card > p { color: var(--muted); }
.android-security-card dl { display: grid; gap: 0; margin: 22px 0; }
.android-security-card dl > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #d9e5f5;
}
.android-security-card dt { color: var(--muted); font-size: 12px; }
.android-security-card dd { min-width: 0; margin: 0; font-size: 12px; font-weight: 800; }
.android-security-card code { overflow-wrap: anywhere; font-size: 9px; }
.android-test-note { margin: 0; font-size: 11px; }

label { display: grid; gap: 7px; margin-bottom: 18px; }
label > span, legend { font-size: 13px; font-weight: 800; }

input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid #cdd3da;
    border-radius: 10px;
    outline: none;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(53, 120, 246, .16);
}

textarea { resize: vertical; }
select { min-height: 49px; }

.checkbox-row { display: flex; align-items: center; gap: 9px; }
.checkbox-row input, .choice input { width: 17px; height: 17px; margin: 0; }
.checkbox-row span { color: var(--muted); font-weight: 600; }

.form-footnote { margin: 16px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.form-footnote a { font-weight: 800; }

.form-section + .form-section {
    margin-top: 32px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

fieldset { margin: 8px 0 22px; padding: 0; border: 0; }
legend { margin-bottom: 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 11px 12px;
    background: #f5f6f7;
    border: 1px solid #e2e5e9;
    border-radius: 10px;
}

.choice span { font-size: 12px; }

.notice {
    display: grid;
    gap: 3px;
    margin-bottom: 22px;
    padding: 16px 18px;
    border-radius: 14px;
}

.notice-warning { color: #7d4b0c; background: #fff2dd; border: 1px solid #f4d19c; }
.notice span { font-size: 13px; }

.driver-grid {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(360px, 1.2fr);
    gap: 22px;
}

.driver-section-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 24px;
}
.driver-section-link {
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(11, 25, 44, .06);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.driver-section-link > i {
    width: 38px;
    height: 38px;
    display: grid;
    flex: 0 0 38px;
    place-items: center;
    color: #2672df;
    background: #edf4ff;
    border-radius: 11px;
}
.driver-section-link span { display: grid; gap: 3px; }
.driver-section-link strong { font-size: 15px; }
.driver-section-link small { color: var(--muted); font-size: 11px; }
.driver-section-link.is-active {
    color: #fff;
    background: #0b3558;
    border-color: #0b3558;
}
.driver-section-link.is-active > i { color: #fff; background: #18aeb0; }
.driver-section-link.is-active small { color: #c5d9e5; }
.driver-section-panel[hidden] { display: none !important; }
.driver-section-panel[data-driver-section="orders"] > :first-child { margin-top: 0; }

.status-card, .telemetry-card { padding: clamp(26px, 4vw, 42px); }

.status-orb {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    margin-bottom: 30px;
    border-radius: 22px;
    background: #e9ecef;
}

.status-orb span { width: 17px; height: 17px; border-radius: 50%; background: #8a94a3; }
.status-orb.available { background: #dff9ee; }
.status-orb.available span { background: var(--green); box-shadow: 0 0 0 10px rgba(28, 155, 105, .12); }
.status-orb.busy { background: #fff0de; }
.status-orb.busy span { background: var(--orange); box-shadow: 0 0 0 10px rgba(240, 139, 44, .12); }

.status-kicker {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.status-card h2, .telemetry-card h2 { margin-bottom: 6px; font-size: 28px; }
.status-actions { display: grid; gap: 10px; margin-top: 30px; }

.status-button {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 16px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    font-weight: 800;
    text-align: left;
}

.status-button.available span { color: var(--green); }
.status-button.busy span { color: var(--orange); }
.status-button.offline span { color: #8a94a3; }
.status-button.active { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.status-button:disabled { opacity: .55; cursor: wait; }

.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.connection-badge { padding: 6px 9px; color: #6b7280; background: #eef0f2; border-radius: 999px; font-size: 11px; font-weight: 900; }
.connection-badge.live { color: #0b6747; background: #dcfbed; }
.connection-badge.error { color: #922f2f; background: #fff0f0; }

.telemetry-list { margin: 26px 0; }
.telemetry-list > div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.telemetry-list dt { color: var(--muted); font-size: 13px; }
.telemetry-list dd { margin: 0; font-size: 13px; font-weight: 800; text-align: right; }

.gps-help { padding: 17px; background: #f5f6f7; border-radius: 13px; font-size: 13px; }
.gps-help ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.inline-message { min-height: 24px; margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.inline-message.error { color: var(--red); }

.car-transporter-trip-card {
    margin-bottom: 24px;
    padding: clamp(24px, 4vw, 36px);
    border-color: rgba(238, 148, 57, .28);
    background: linear-gradient(135deg, #fff 0%, #fff8ed 100%);
}

.car-transporter-trip-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 18px 24px;
    align-items: end;
    margin-top: 24px;
}

.car-transporter-trip-form label > span,
.trip-spots-field legend {
    display: block;
    margin-bottom: 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
}

.trip-destination-field input {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.trip-waypoints {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid rgba(53, 120, 246, .18);
    border-radius: 16px;
    background: rgba(238, 245, 255, .72);
}
.trip-waypoints-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 11px;
}
.trip-waypoints-heading strong { font-size: 14px; }
.trip-waypoints-heading span { color: var(--muted); font-size: 12px; }
.trip-waypoint-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.trip-waypoint-fields input {
    width: 100%;
    min-height: 48px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.trip-capacity-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 10px;
}
.trip-capacity-fields input {
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.trip-spots-field { margin: 0; padding: 0; border: 0; }
.trip-spot-options { display: flex; gap: 8px; }
.trip-spot-options label { cursor: pointer; }
.trip-spot-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.trip-spot-options label > span {
    display: grid;
    min-width: 54px;
    min-height: 52px;
    margin: 0;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
    transition: .18s ease;
}
.trip-spot-options input:checked + span {
    border-color: #ee9439;
    background: #fff0dc;
    color: #9b4d0b;
    box-shadow: 0 0 0 3px rgba(238, 148, 57, .15);
}
.car-transporter-trip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    grid-column: 1 / -1;
}
.car-transporter-trip-form .inline-message { grid-column: 1 / -1; margin: 0; }

.notification-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: 22px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #eef5ff, #eafaf7);
    border-color: #c9e0ef;
}
.notification-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 14px;
    font-size: 22px;
    font-weight: 900;
}
.notification-copy h2 { margin: 3px 0 6px; font-size: 23px; }
.notification-copy > p { margin-bottom: 0; }
.notification-ios-note { margin-top: 7px; color: var(--muted); font-size: 12px; }
.notification-copy .inline-message { margin-top: 8px; }
.notification-toggle { min-width: 190px; }
.notification-actions { display: grid; gap: 8px; }
.notification-actions [hidden] { display: none; }

.request-page { width: min(1120px, calc(100% - 40px)); }
.request-page .page-heading { max-width: 820px; }
.request-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}

.request-layout .form-card { max-width: none; }
.request-layout h2 { margin-bottom: 20px; }
.request-page .location-picker {
    position: relative;
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -7px;
    overflow: visible;
    color: #fff;
    background: linear-gradient(135deg, #3578f6, #18aeb0);
    border-color: transparent;
    box-shadow: 0 12px 28px rgba(53, 120, 246, .24);
}
.request-page .location-picker:hover {
    background: linear-gradient(135deg, #2869e8, #129b9e);
    box-shadow: 0 15px 34px rgba(53, 120, 246, .3);
}
.request-page .location-picker i { font-size: 18px; }
.request-page .location-picker small {
    padding: 4px 7px;
    color: #135c56;
    background: #d8fff6;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.request-page .location-picker.is-attention {
    animation: request-location-pulse 1.8s ease-in-out infinite;
}
.request-page .location-picker.is-loading { cursor: wait; }
.request-page .location-picker.is-saved {
    background: linear-gradient(135deg, #14845f, #18a57d);
    box-shadow: 0 12px 28px rgba(20, 132, 95, .22);
}
.request-page .location-picker.is-saved small { display: none; }
.location-picker-hint {
    margin: -2px 0 0;
    color: #60727d;
    font-size: 12px;
    text-align: center;
}

@keyframes request-location-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(53, 120, 246, .28), 0 12px 28px rgba(53, 120, 246, .24); }
    50% { box-shadow: 0 0 0 9px rgba(53, 120, 246, 0), 0 16px 36px rgba(53, 120, 246, .34); }
}
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.request-explainer { display: grid; gap: 12px; position: sticky; top: 24px; }
.request-explainer-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 19px;
    box-shadow: none;
}
.request-explainer-card > span {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 10px;
    font-weight: 900;
}
.request-explainer-card strong { display: block; margin-top: 2px; }
.request-explainer-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }

.request-status-page { width: min(940px, calc(100% - 40px)); }
.request-status-shell > h1 { max-width: 800px; }
.request-status-shell > .lead { max-width: 720px; margin-bottom: 30px; }
.request-status-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
    gap: 20px;
    margin-bottom: 20px;
}
.request-summary-card, .assigned-driver-card { padding: clamp(24px, 4vw, 38px); }
.request-live-badge {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 7px 10px;
    color: #76530e;
    background: #fff3d9;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
}
.request-live-badge.accepted,
.request-live-badge.en_route { color: #0b6747; background: #dcfbed; }
.request-live-badge.completed { color: #245c40; background: #e7f7ee; }
.request-live-badge.cancelled,
.request-live-badge.expired { color: #7b3b3b; background: #fff0f0; }
.request-details { margin: 0; }
.request-details > div {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}
.request-details dt { color: var(--muted); font-size: 12px; }
.request-details dd { margin: 0; font-weight: 800; }
.request-waiting {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 16px;
    background: #f7f8f8;
    border-radius: 13px;
}
.request-waiting[hidden] { display: none; }
.request-waiting p { margin: 0; color: var(--muted); font-size: 13px; }
.assigned-driver-card[hidden] { display: none; }
.assigned-driver-card h2 { margin-bottom: 8px; font-size: 30px; }
.assigned-driver-card > p:not(.status-kicker) { color: var(--muted); }
.request-token-note { margin: 18px 0 0; color: var(--muted); font-size: 12px; }

.driver-requests-card {
    margin-top: 22px;
    padding: clamp(26px, 4vw, 42px);
}
.driver-requests-card h2 { margin-bottom: 6px; font-size: 28px; }
.driver-requests-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}
.driver-requests-list > .empty-state { grid-column: 1 / -1; }
.driver-request-item {
    padding: 20px;
    background: #f8f9f8;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.request-category {
    display: inline-flex;
    margin-left: 6px;
    color: #5b6475;
    font-size: 10px;
    font-weight: 800;
}

.profile-category-line {
    margin: -5px 0 9px;
    color: #596862;
}

.active-vehicle-switcher {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 22px 24px;
}
.active-vehicle-switcher h2 { margin: 4px 0 6px; }
.vehicle-switch-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vehicle-switch-actions form { margin: 0; }
.page-container.vehicle-management-page {
    width: min(1120px, calc(100% - 40px));
    padding-top: 48px;
}
.vehicle-page-heading { margin-bottom: 24px; }
.vehicle-page-heading h1 { max-width: 660px; font-size: clamp(44px, 5vw, 62px); }
.vehicle-page-heading .heading-actions { flex: none; }
.vehicle-page-heading .button { gap: 9px; white-space: nowrap; }
.vehicle-account-card { overflow: hidden; }
.vehicle-account-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
}
.vehicle-account-summary::-webkit-details-marker { display: none; }
.vehicle-account-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #176de0;
    background: #eaf2ff;
    border-radius: 14px;
}
.vehicle-account-copy strong,
.vehicle-account-copy small { display: block; }
.vehicle-account-copy strong { margin: 3px 0 2px; font-size: 18px; }
.vehicle-account-copy small { color: var(--muted); font-size: 12px; }
.vehicle-account-edit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #176de0;
    font-size: 13px;
    font-weight: 900;
}
.vehicle-account-edit i { transition: transform .2s ease; }
.vehicle-account-card[open] .vehicle-account-edit i { transform: rotate(180deg); }
.vehicle-account-editor {
    padding: 24px;
    border-top: 1px solid var(--line);
    background: #fbfcfe;
}
.vehicle-account-editor .form-grid { margin-bottom: 16px; }
.vehicle-list-section { margin-top: 34px; }
.section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}
.section-heading-row h2 { margin: 6px 0 0; font-size: clamp(28px, 4vw, 40px); }
.vehicle-list-heading { align-items: center; }
.vehicle-count-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #526074;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
}
.vehicle-count-note strong { color: var(--ink); font-size: 15px; }
.vehicle-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.vehicle-management-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 22px;
    padding: 20px 22px;
    border: 1px solid #dbe2ea;
}
.vehicle-management-card.is-active {
    border-color: #32a87b;
    box-shadow: 0 18px 44px rgba(24, 126, 89, .12);
}
.vehicle-management-card h3,
.vehicle-management-card p { margin: 0; }
.vehicle-management-card h3 { margin: 3px 0 5px; font-size: 23px; }
.vehicle-card-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.vehicle-card-copy { min-width: 0; }
.vehicle-card-copy .muted { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.vehicle-card-copy .muted i { color: #1c8a72; }
.vehicle-card-state { min-width: 155px; display: grid; justify-items: end; gap: 8px; }
.vehicle-card-actions { min-width: 170px; display: grid; gap: 8px; }
.vehicle-card-actions form,
.vehicle-card-actions .button { width: 100%; }
.vehicle-card-actions .button { gap: 8px; }
.vehicle-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vehicle-category-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #0b6747;
    background: #dcfbed;
    font-weight: 900;
}
.vehicle-category-icon::before { content: 'EV'; }
.vehicle-category-icon[data-category="van"] { color: #245bb6; background: #e6efff; }
.vehicle-category-icon[data-category="van"]::before { content: 'BUS'; font-size: 11px; }
.vehicle-category-icon[data-category="truck"] { color: #a95409; background: #fff0dc; }
.vehicle-category-icon[data-category="truck"]::before { content: 'KR'; }
.vehicle-category-icon[data-category="semi_truck"] { color: #6245a7; background: #efe9ff; }
.vehicle-category-icon[data-category="semi_truck"]::before { content: 'F'; }
.vehicle-category-icon[data-category="car_transporter"] { color: #b96418; background: #fff1df; }
.vehicle-category-icon[data-category="car_transporter"]::before { content: 'AU'; }
.vehicle-category-icon[data-category="courier"] { color: #087450; background: #e3f8ef; }
.vehicle-category-icon[data-category="courier"]::before { content: 'KU'; }
.active-vehicle-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 999px;
    color: #0b6747;
    background: #e7faf2;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}
.vehicle-empty-state { padding: 38px 24px; }
.vehicle-empty-state .button { width: fit-content; margin: 18px auto 0; }
.status-pill.pending { color: #8d5b00; background: #fff2cc; }
.status-pill.blocked { color: #a52626; background: #ffe7e7; }
.status-pill.archived { color: #5c6573; background: #edf0f3; }

.cargo-request-fields {
    margin: 18px 0;
    padding: 18px;
    background: #f4f7f6;
    border: 1px solid var(--line);
    border-radius: 15px;
}

.cargo-request-fields h3 { margin: 0 0 14px; }
[data-service-category][hidden],
[data-legal-field][hidden],
[data-business-field][hidden],
.cargo-request-fields[hidden],
#customer-vehicle-field[hidden],
#request-description-field[hidden] { display: none; }
.driver-request-item.active-job {
    grid-column: 1 / -1;
    background: #eef5ff;
    border-color: #bcd2f7;
}
.driver-request-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.driver-request-head h3 { margin: 8px 0 0; font-size: 20px; }
.request-distance {
    flex: none;
    color: #0b6747;
    font-size: 12px;
    font-weight: 900;
}
.driver-request-address {
    margin: 15px 0 10px;
    font-size: 16px;
    font-weight: 900;
}
.driver-request-meta { display: grid; gap: 4px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.driver-request-item > p { color: var(--muted); font-size: 13px; }
.active-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card { padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { font-size: 32px; line-height: 1; }
.stat-card span { margin-top: 7px; color: var(--muted); font-size: 12px; }
.stat-card.warning { background: #fff8eb; }
.stat-card.success { background: #ecfbf5; }

.table-card { overflow: hidden; box-shadow: none; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { color: #586779; background: #f1f6fb; font-size: 11px; text-transform: uppercase; }
td { font-size: 13px; }
td strong, td small { display: block; }
td small { margin-top: 3px; color: var(--muted); }
.empty-cell { padding: 40px; color: var(--muted); text-align: center; }

.table-status {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef0f2;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.table-status.available { color: #0b6747; background: #dcfbed; }
.table-status.busy { color: #8d4b0d; background: #fff0de; }
.table-status.open { color: #76530e; background: #fff3d9; }
.table-status.accepted,
.table-status.en_route { color: #0b6747; background: #dcfbed; }
.table-status.completed { color: #245c40; background: #e7f7ee; }
.table-status.cancelled,
.table-status.expired { color: #7b3b3b; background: #fff0f0; }
.table-status.pending { color: #76530e; background: #fff3d9; }
.table-status.blocked { color: #8b2929; background: #ffe5e5; }
.table-status.archived { color: #4d5665; background: #e9edf1; }

.admin-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 48px 0 18px;
}
.admin-section-heading h2 { margin: 0; font-size: 34px; }
.admin-filter {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.admin-filter label {
    align-self: center;
    margin: 0 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.admin-filter select { min-width: 190px; }

.profile-management-heading p {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 12px;
}
.admin-profile-tabs,
.admin-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}
.admin-actions form { margin: 0; }

.admin-pending-tab {
    position: relative;
    gap: 6px;
    color: #835300;
    background: #fff8e5;
    border-color: #edce80;
    box-shadow: 0 7px 18px rgba(148, 91, 0, .08);
}
.admin-pending-tab:hover {
    color: #684200;
    background: #fff2c8;
    border-color: #dcac3d;
}
.admin-pending-tab.is-active {
    color: #573500;
    background: linear-gradient(135deg, #ffd66b, #ffbc37);
    border-color: #e6a51f;
    box-shadow: 0 9px 22px rgba(174, 103, 0, .18);
}
.admin-pending-tab.has-items:not(.is-active) {
    animation: admin-pending-pulse 2.2s ease-in-out infinite;
}
.admin-pending-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    display: inline-block;
    background: currentColor;
    border-radius: 50%;
}
@keyframes admin-pending-pulse {
    0%, 100% { box-shadow: 0 7px 18px rgba(148, 91, 0, .08), 0 0 0 0 rgba(238, 172, 45, .34); }
    50% { box-shadow: 0 9px 22px rgba(148, 91, 0, .14), 0 0 0 7px rgba(238, 172, 45, 0); }
}

.admin-profile-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.admin-profile-category {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    color: var(--text);
    background: rgba(255, 255, 255, .86);
    border: 1px solid #d9e2e8;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(12, 40, 58, .04);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.admin-profile-category:hover {
    border-color: #9ec7d2;
    box-shadow: 0 12px 30px rgba(12, 40, 58, .08);
    transform: translateY(-2px);
}
.admin-profile-category.is-active {
    background: linear-gradient(135deg, #0b2b3d, #123f52);
    border-color: #1e7186;
    box-shadow: 0 14px 34px rgba(7, 38, 55, .17);
}
.admin-profile-category-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #235ed1;
    background: #e7efff;
    border-radius: 12px;
    font-size: 16px;
}
.admin-profile-category-icon[data-category="tow_truck"] { color: #087d69; background: #dff9f3; }
.admin-profile-category-icon[data-category="truck"] { color: #6847c7; background: #f0ebff; }
.admin-profile-category-icon[data-category="semi_truck"] { color: #ba4964; background: #ffedf2; }
.admin-profile-category-icon[data-category="car_transporter"] { color: #b96418; background: #fff1df; }
.admin-profile-category-icon[data-category="courier"] { color: #087450; background: #e3f8ef; }
.admin-profile-category-copy { min-width: 0; }
.admin-profile-category-copy strong,
.admin-profile-category-copy small { display: block; }
.admin-profile-category-copy strong { font-size: 13px; }
.admin-profile-category-copy small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-profile-category-count {
    min-width: 27px;
    padding: 5px 7px;
    color: #526370;
    background: #edf2f5;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-align: center;
}
.admin-profile-category.is-active .admin-profile-category-copy strong { color: #fff; }
.admin-profile-category.is-active .admin-profile-category-copy small { color: #a7c2cf; }
.admin-profile-category.is-active .admin-profile-category-count { color: #c9fbf2; background: rgba(49, 205, 180, .16); }

.dispatch-settings-card {
    margin-bottom: 26px;
    padding: clamp(22px, 4vw, 34px);
}
.dispatch-settings-card > p {
    max-width: 760px;
    margin: 0 0 22px;
    color: var(--muted);
    font-size: 13px;
}
.dispatch-settings-card form { max-width: 820px; }

.page-container.admin-page-container {
    width: 100%;
    padding: 0;
}

.admin-page main {
    background:
        radial-gradient(circle at 74% 0%, rgba(53, 120, 246, .1), transparent 31rem),
        radial-gradient(circle at 18% 58%, rgba(24, 183, 160, .07), transparent 28rem),
        #f5f8fa;
}

.admin-page-layout {
    display: grid;
    grid-template-columns: 316px minmax(0, 1fr);
    gap: 0;
}

.admin-main-content {
    width: min(1220px, calc(100% - 64px));
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    padding: 52px 0 72px;
}

.admin-page #overview > .page-heading {
    position: relative;
    max-width: none;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 30px 34px;
    color: #fff;
    background:
        radial-gradient(circle at 90% 10%, rgba(24, 183, 160, .3), transparent 19rem),
        linear-gradient(125deg, #071927, #0d2a3d);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 24px;
    box-shadow: 0 22px 54px rgba(7, 25, 39, .18);
}

.admin-page #overview > .page-heading h1 {
    max-width: 800px;
    margin-bottom: 12px;
    font-size: clamp(42px, 5vw, 64px);
}

.admin-page #overview > .page-heading p {
    max-width: 760px;
    margin-bottom: 0;
    color: #bfd0da;
}

.admin-page #overview > .page-heading .eyebrow { color: #7ee3d4; }

.admin-content-section {
    animation: admin-section-enter .2s ease both;
}

.admin-content-section[hidden] {
    display: none;
}

.admin-content-section > .admin-section-heading {
    margin-top: 0;
}

@keyframes admin-section-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-side-nav {
    position: sticky;
    top: 18px;
    min-height: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 24px 0 24px 18px;
    padding: 28px 20px 22px;
    color: #fff;
    background:
        radial-gradient(circle at 0% 0%, rgba(24, 183, 160, .24), transparent 17rem),
        linear-gradient(160deg, #071927 0%, #0b2638 58%, #0d3144 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(7, 25, 39, .22);
}

.admin-overview-panel {
    margin-bottom: 18px;
}

.admin-overview-heading,
.admin-card-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.admin-overview-heading {
    margin-bottom: 18px;
}

.admin-overview-heading h2 {
    margin: 3px 0 0;
    font-size: 32px;
    letter-spacing: -.035em;
}

.admin-health-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.admin-health-badge.warning {
    color: #81500c;
    background: #fff0d1;
}

.admin-health-badge.success {
    color: #0b6747;
    background: #dcfbed;
}

.admin-overview-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.admin-primary-metric {
    position: relative;
    min-width: 0;
    padding: 19px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 4px solid #527dcc;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(11, 19, 36, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.admin-primary-metric:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(11, 19, 36, .09);
}

.admin-primary-metric.warning {
    background: #fffaf0;
    border-top-color: #f2a33a;
}

.admin-primary-metric.success {
    background: #effbf6;
    border-top-color: var(--green);
}

.admin-primary-metric.completed {
    background: #eef9f8;
    border-top-color: #18a994;
}

.admin-primary-metric strong,
.admin-primary-metric small,
.admin-metric-label {
    padding-right: 42px;
    display: block;
}

.admin-metric-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #3564bd;
    background: #edf3ff;
    border-radius: 10px;
    font-size: 13px;
}

.admin-metric-icon.warning { color: #ad630d; background: #fff0d8; }
.admin-metric-icon.success { color: #08734b; background: #ddf8ec; }
.admin-metric-icon.completed { color: #0b796c; background: #dcf6f2; }

.admin-metric-label {
    color: #596579;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.admin-primary-metric strong {
    margin-top: 10px;
    font-size: 38px;
    line-height: 1;
}

.admin-primary-metric small {
    min-height: 30px;
    margin-top: 8px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.admin-overview-details {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 12px;
    margin-top: 12px;
}

.admin-attention-panel,
.admin-dispatch-overview {
    padding: 24px;
    box-shadow: none;
}

.admin-card-heading {
    align-items: center;
    margin-bottom: 17px;
}

.admin-card-heading span {
    color: #208b9d;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.admin-card-heading h3 {
    margin: 3px 0 0;
    font-size: 21px;
}

.admin-card-heading > a {
    color: #235ed1;
    font-size: 11px;
    font-weight: 900;
}

.admin-attention-list {
    display: grid;
    gap: 8px;
}

.admin-attention-list > div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 12px;
    background: #f7f8f8;
    border-radius: 12px;
}

.admin-attention-dot {
    width: 9px;
    height: 9px;
    background: #8b96a8;
    border-radius: 50%;
}

.admin-attention-list .needs-attention {
    background: #fff7e7;
}

.admin-attention-list .needs-attention .admin-attention-dot {
    background: var(--orange);
    box-shadow: 0 0 0 4px rgba(240, 139, 44, .14);
}

.admin-attention-list .is-clear .admin-attention-dot {
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(28, 155, 105, .12);
}

.admin-attention-list strong,
.admin-attention-list small {
    display: block;
}

.admin-attention-list strong {
    font-size: 12px;
}

.admin-attention-list small {
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
}

.admin-attention-list a {
    color: #235ed1;
    font-size: 10px;
    font-weight: 900;
}

.admin-dispatch-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-dispatch-values div {
    padding: 15px;
    background: #f4f7f6;
    border: 1px solid #dfe7e3;
    border-radius: 13px;
}

.admin-dispatch-values strong,
.admin-dispatch-values span {
    display: block;
}

.admin-dispatch-values strong {
    color: #2672ff;
    font-size: 29px;
}

.admin-dispatch-values span {
    color: #5f6b78;
    font-size: 9px;
}

.admin-dispatch-overview dl {
    display: grid;
    gap: 10px;
    margin: 17px 0 0;
}

.admin-dispatch-overview dl div {
    display: grid;
    grid-template-columns: minmax(110px, .75fr) 1fr;
    gap: 10px;
}

.admin-dispatch-overview dt {
    color: var(--muted);
    font-size: 10px;
}

.admin-dispatch-overview dd {
    margin: 0;
    font-size: 10px;
    font-weight: 800;
}

.admin-side-nav-heading {
    padding: 0 8px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.admin-side-nav-heading span {
    color: #7ee3d4;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.admin-side-nav-heading h2 {
    margin: 8px 0 5px;
    color: #fff;
    font-size: 25px;
    letter-spacing: -.03em;
}

.admin-side-nav-heading p {
    margin: 0;
    color: #9eb4c2;
    font-size: 12px;
}

.admin-side-nav nav {
    display: grid;
    gap: 7px;
    padding: 22px 0;
}

.admin-side-nav a {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 14px 13px;
    color: #d5e1e8;
    border: 1px solid transparent;
    border-radius: 13px;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.admin-side-nav a:hover,
.admin-side-nav a:focus-visible,
.admin-side-nav a.is-active {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border-color: rgba(126, 227, 212, .18);
}

.admin-side-nav a.is-active {
    background: rgba(53, 120, 246, .2);
    border-color: rgba(126, 227, 212, .25);
    box-shadow: inset 3px 0 0 #18b7a0;
}

.admin-nav-index {
    display: grid;
    place-items: center;
    min-height: 30px;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 900;
}

.admin-nav-copy strong,
.admin-nav-copy small {
    display: block;
}

.admin-nav-copy strong {
    color: inherit;
    font-size: 13px;
    line-height: 1.3;
}

.admin-nav-copy small {
    margin-top: 4px;
    color: #9eb4c2;
    font-size: 10px;
    line-height: 1.35;
}

.admin-side-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.admin-side-summary div {
    padding: 13px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
}

.admin-side-summary strong,
.admin-side-summary span {
    display: block;
}

.admin-side-summary strong {
    color: #fff;
    font-size: 22px;
}

.admin-side-summary span {
    color: #9eb4c2;
    font-size: 9px;
}

.test-report-heading p {
    max-width: 720px;
    margin: 7px 0 0;
    color: var(--muted);
}

.test-report-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.test-health-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
    padding: 17px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 4px solid #718096;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(11, 19, 36, .04);
}

.test-health-card.is-good { border-top-color: #18a994; }
.test-health-card.is-warning { border-top-color: #ef8b2c; }
.test-health-card.is-danger { border-top-color: #dc5151; }
.test-health-card.is-neutral { border-top-color: #527dcc; }

.test-health-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #147f78;
    background: #e3f8f5;
    border-radius: 12px;
}

.test-health-card.is-warning .test-health-icon { color: #a85b0d; background: #fff1df; }
.test-health-card.is-danger .test-health-icon { color: #ad3535; background: #ffeded; }
.test-health-card.is-neutral .test-health-icon { color: #3564bd; background: #edf3ff; }

.test-health-card small,
.test-health-card strong,
.test-health-card em { display: block; }
.test-health-card small { color: var(--muted); font-size: 10px; font-weight: 900; text-transform: uppercase; }
.test-health-card strong { margin-top: 4px; font-size: 22px; }
.test-health-card em { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-style: normal; }

.test-report-guide {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 9px;
    margin: 12px 0;
    padding: 15px 18px;
    color: #31536b;
    background: #eaf7fb;
    border: 1px solid #cde9f0;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 800;
}

.test-report-guide span { display: flex; align-items: center; gap: 8px; }
.test-report-guide b {
    display: grid;
    flex: 0 0 25px;
    place-items: center;
    width: 25px;
    height: 25px;
    color: #fff;
    background: linear-gradient(145deg, #3578f6, #18b7a0);
    border-radius: 8px;
}
.test-report-guide > i { color: #78a8b8; }

.test-report-card {
    padding: 22px;
    box-shadow: none;
}

.test-report-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.test-request-list,
.test-event-list,
.test-driver-list { display: grid; gap: 8px; }

.test-request-list article {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(95px, .7fr)) auto;
    align-items: center;
    gap: 9px;
    padding: 12px;
    background: #f7fafb;
    border: 1px solid #e2e9ed;
    border-radius: 13px;
}

.test-request-main strong,
.test-request-main small { display: block; }
.test-request-main strong { margin-top: 4px; font-size: 12px; }
.test-request-main small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.test-request-category { color: #147f78; font-size: 9px; font-weight: 900; text-transform: uppercase; }

.test-step {
    min-width: 0;
    padding: 9px;
    background: #eef2f5;
    border-radius: 10px;
}
.test-step small,
.test-step strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.test-step small { color: var(--muted); font-size: 9px; }
.test-step strong { margin-top: 3px; font-size: 10px; }
.test-step.is-good,
.test-step.status-completed { color: #0b6747; background: #e3f7ee; }
.test-step.is-danger,
.test-step.status-cancelled,
.test-step.status-expired { color: #a52f2f; background: #ffeded; }
.test-step.is-pending,
.test-step.status-open { color: #315fae; background: #eaf2ff; }
.test-step.status-accepted,
.test-step.status-en_route { color: #147f78; background: #e3f8f5; }

.test-event-list article,
.test-driver-list article {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px;
    background: #f7fafb;
    border-radius: 11px;
}

.test-event-dot { width: 9px; height: 9px; background: #8794a5; border-radius: 50%; }
.test-event-dot.status-sent { background: #1c9b69; box-shadow: 0 0 0 4px rgba(28, 155, 105, .11); }
.test-event-dot.status-partial { background: #ef8b2c; box-shadow: 0 0 0 4px rgba(239, 139, 44, .11); }
.test-event-dot.status-failed { background: #d94747; box-shadow: 0 0 0 4px rgba(217, 71, 71, .11); }

.test-event-list strong,
.test-event-list small,
.test-event-list em,
.test-driver-list strong,
.test-driver-list small { display: block; }
.test-event-list strong,
.test-driver-list strong { font-size: 11px; }
.test-event-list small,
.test-driver-list small,
.test-driver-list time { margin-top: 2px; color: var(--muted); font-size: 9px; }
.test-event-list em { margin-top: 4px; color: #9a3f3f; font-size: 9px; font-style: normal; }
.test-event-list article > b { padding: 5px 7px; color: #536071; background: #e9eef1; border-radius: 999px; font-size: 8px; text-transform: uppercase; }
.test-event-list article > b.status-sent { color: #0b6747; background: #dff7eb; }
.test-event-list article > b.status-partial { color: #92500a; background: #fff0dc; }
.test-event-list article > b.status-failed { color: #a52f2f; background: #ffeded; }
.test-driver-list time { max-width: 105px; text-align: right; }
.test-empty-state { margin: 0; padding: 22px; color: var(--muted); background: #f7fafb; border-radius: 12px; font-size: 12px; }

.admin-anchor-section,
#overview {
    scroll-margin-top: 24px;
}

.form-help {
    margin: -4px 0 20px;
    color: var(--muted);
    font-size: 12px;
}

nav[role="navigation"] { padding: 16px; }

.button-success {
    color: #fff;
    background: #16875d;
    border-color: #16875d;
}

.button-success:hover { background: #10734e; border-color: #10734e; }

.simulation-warning {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    padding: 15px 18px;
    color: #72500a;
    background: #fff5d9;
    border: 1px solid #f1cf76;
    border-radius: 14px;
}

.simulation-warning strong {
    flex: 0 0 auto;
    font-size: 12px;
    letter-spacing: .055em;
}

.subscription-page { max-width: 1120px; }

.subscription-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 18px;
}

.subscription-summary-card,
.payment-history-card,
.subscription-settings-card {
    padding: 28px;
}

.subscription-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.subscription-card-heading h2,
.payment-history-card h2,
.subscription-settings-card h3 { margin: 3px 0 0; }

.subscription-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 6px 10px;
    color: #536071;
    background: #eef1f4;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
}

.subscription-status.active { color: #08734b; background: #dff8ed; }
.subscription-status.past-due { color: #9b5906; background: #fff0cf; }
.subscription-status.canceled { color: #a33333; background: #ffeded; }
.subscription-status.not-required { color: #536071; background: #edf1f4; }

.subscription-price {
    display: flex;
    align-items: baseline;
    gap: 9px;
    margin: 28px 0 5px;
}

.subscription-price strong { font-size: 48px; line-height: 1; }
.subscription-price span { color: var(--muted); font-weight: 700; }

.subscription-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0;
}

.subscription-details > div {
    padding: 15px;
    background: #f5f7f7;
    border-radius: 13px;
}

.subscription-details dt { color: var(--muted); font-size: 11px; font-weight: 800; }
.subscription-details dd { margin: 5px 0 0; font-weight: 900; }

.simulation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.simulation-actions form,
.simulation-actions .button { width: 100%; }

.payment-history-list { display: grid; gap: 9px; margin-top: 20px; }

.payment-history-list article {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 13px;
    background: #f6f8f8;
    border-radius: 12px;
}

.payment-history-list strong,
.payment-history-list small { display: block; }
.payment-history-list small,
.payment-history-list time { color: var(--muted); font-size: 10px; }

.payment-result { width: 9px; height: 9px; background: #8b96a8; border-radius: 50%; }
.payment-result.success { background: var(--green); box-shadow: 0 0 0 4px rgba(28, 155, 105, .12); }
.payment-result.failed { background: #d64b4b; box-shadow: 0 0 0 4px rgba(214, 75, 75, .11); }

.subscription-settings-card {
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
    gap: 28px;
    margin-bottom: 16px;
}

.subscription-settings-card form { display: grid; gap: 16px; }
.subscription-accounts-card td small { display: block; margin-top: 3px; }

.simulation-mode-badge {
    padding: 8px 11px;
    color: #235ed1;
    background: #e8f0ff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

.subscription-access-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 1100px) {
    .admin-page-layout { grid-template-columns: 1fr; }
    .admin-main-content {
        width: min(100% - 40px, 900px);
        grid-column: 1;
        grid-row: 2;
        padding-top: 42px;
    }
    .admin-side-nav {
        position: static;
        min-height: 0;
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        padding: 24px max(20px, calc((100% - 900px) / 2));
        border-width: 0 0 1px;
        border-radius: 0;
        box-shadow: none;
    }
    .admin-side-nav-heading { padding-bottom: 18px; }
    .admin-side-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 18px 0 0;
    }
    .admin-side-summary { display: none; }
    .admin-overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-overview-details { grid-template-columns: 1fr; }
    .admin-profile-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .test-report-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .test-request-list article { grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(85px, .7fr)); }
    .test-request-list article > .button { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-content-section { animation: none; }
    .admin-pending-tab.has-items { animation: none; }
    .request-page .location-picker.is-attention { animation: none; }
    .evacuator-card { transition: none; }
    .custom-marker__pulse {
        opacity: .25;
        animation: none;
        transform: none;
    }
}

@media (max-width: 900px) {
    .vehicle-page-heading { align-items: flex-start; flex-direction: column; }
    .vehicle-page-heading .heading-actions { width: 100%; }
    .car-transporter-trip-form { grid-template-columns: 1fr; }
    .trip-waypoint-fields { grid-template-columns: 1fr; }
    .trip-waypoints-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
    .trip-capacity-fields { grid-template-columns: 1fr 1fr; }
    .car-transporter-trip-actions .button { width: 100%; }
    .site-header { align-items: flex-start; }
    .main-nav { gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
    .map-page { overflow: hidden; }
    .map-page main { min-height: 0; }
    .map-shell {
        height: 100%;
        overflow: hidden;
        background: #dce5df;
    }
    .map-stage {
        position: absolute;
        inset: 0;
        height: auto;
        min-height: 0;
    }
    .map-sidebar {
        --sheet-drag-y: 0px;
        position: absolute;
        inset: auto 0 0;
        width: 100%;
        height: min(68%, 640px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 0 max(20px, calc((100% - 620px) / 2)) 24px;
        background: rgba(250, 251, 248, .98);
        border: 1px solid rgba(255, 255, 255, .82);
        border-bottom: 0;
        border-radius: 25px 25px 0 0;
        box-shadow: 0 -18px 50px rgba(11, 19, 36, .2);
        backdrop-filter: blur(18px);
        transform: translateY(var(--sheet-drag-y));
        transition: transform .24s ease;
    }
    .map-sidebar.is-collapsed {
        transform: translateY(calc(100% - 128px + var(--sheet-drag-y)));
    }
    .map-sidebar.is-dragging { transition: none; }
    .map-sheet-handle {
        position: sticky;
        z-index: 6;
        top: 0;
        width: 100%;
        min-height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        padding: 7px 0 4px;
        color: #7b8882;
        background: linear-gradient(#fafbf8 80%, rgba(250, 251, 248, 0));
        border: 0;
        touch-action: none;
    }
    .map-sheet-handle > span {
        width: 42px;
        height: 5px;
        background: #bac5bf;
        border-radius: 999px;
    }
    .map-sheet-handle small { font-size: 8px; font-weight: 750; }
    .map-sidebar-intro { padding-top: 2px; }
    .map-sidebar h1 { max-width: 560px; font-size: clamp(31px, 7vw, 42px); }
    .map-sidebar .lead { max-width: 570px; font-size: 14px; }
    .map-category-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .map-category-button:first-child { grid-column: 1 / -1; }
    .customer-cta { bottom: -1px; }
    .route-overview-button {
        top: 68px;
        right: 12px;
        min-height: 42px;
        padding: 0 13px;
        font-size: 12px;
    }
    .privacy-note { display: none; }
    .map-live-indicator { left: 20px; }
    .map-page .leaflet-left { left: 0; }
    .map-list-heading small { max-width: none; }
    .auth-shell { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; }
    .auth-intro { display: none; }
    .android-download-hero,
    .android-install-grid { grid-template-columns: 1fr; }
    .android-phone-preview { max-width: 520px; }
    .driver-grid { grid-template-columns: 1fr; }
    .driver-section-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .notification-card { grid-template-columns: auto 1fr; }
    .notification-actions { grid-column: 1 / -1; width: 100%; }
    .notification-toggle { width: 100%; }
    .request-layout { grid-template-columns: 1fr; }
    .request-explainer {
        position: static;
        grid-template-columns: repeat(3, 1fr);
    }
    .request-status-grid { grid-template-columns: 1fr; }
    .admin-section-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
    .trip-capacity-fields { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .admin-profile-categories { grid-template-columns: 1fr; }
    .subscription-grid,
    .subscription-settings-card,
    .subscription-details,
    .simulation-actions { grid-template-columns: 1fr; }
    .subscription-summary-card,
    .payment-history-card,
    .subscription-settings-card { padding: 21px 18px; }
    .simulation-warning,
    .subscription-access-notice { align-items: flex-start; flex-direction: column; }
    .subscription-card-heading { align-items: flex-start; flex-direction: column; }
    .subscription-price strong { font-size: 40px; }
    .payment-history-list article { grid-template-columns: 10px minmax(0, 1fr); }
    .payment-history-list time { grid-column: 2; }
    .site-header {
        min-height: 68px;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }
    .brand small { display: none; }
    .brand strong { font-size: 14px; }
    .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
    .main-nav {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
        padding-top: 4px;
    }
    .main-nav > a:not(.button),
    .main-nav .link-button {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 6px 8px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .08);
        font-size: 12px;
    }
    .main-nav form { margin-left: auto; }
    .main-nav .button { min-height: 38px; padding: 8px 10px; font-size: 11px; }
    .map-page main { min-height: 0; }
    .map-stage { height: auto; min-height: 0; }
    .map-sidebar { padding: 0 16px 18px; }
    .map-sidebar h1 { font-size: 31px; }
    .map-sidebar .lead { font-size: 13px; }
    .map-live-indicator { display: none; }
    .locate-button {
        top: 12px;
        right: 12px;
        max-width: calc(100% - 80px);
        padding: 11px 13px;
        font-size: 11px;
    }
    .map-overview { gap: 6px 10px; padding: 9px 10px; }
    .map-radius-control { grid-template-columns: 1fr; }
    .map-radius-slider { margin-top: 2px; }
    .map-list-heading { align-items: flex-start; flex-direction: column; }
    .map-list-heading small { text-align: left; }
    .customer-cta { margin-inline: -5px; padding: 9px; }
    .customer-cta-copy p { display: none; }
    .customer-cta .button { padding-inline: 10px; }
    .form-grid, .choice-grid, .stat-grid { grid-template-columns: 1fr; }
    .request-explainer { grid-template-columns: 1fr; }
    .driver-requests-list { grid-template-columns: 1fr; }
    .request-details > div { grid-template-columns: 1fr; gap: 3px; }
    .active-request-actions { display: grid; }
    .active-request-actions .button { width: 100%; }
    .heading-row { align-items: flex-start; flex-direction: column; }
    .heading-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .heading-actions .button { width: 100%; }
    .android-download-page { width: calc(100% - 24px); padding: 40px 0 60px; }
    .android-download-copy h1 { font-size: 44px; }
    .android-download-actions { align-items: stretch; flex-direction: column; }
    .android-download-actions .button { width: 100%; }
    .android-phone-preview { padding: 26px 22px; border-radius: 24px; }
    .android-phone-preview h2 { font-size: 25px; }
    .android-install-grid { margin-top: 34px; }
    .android-install-card,
    .android-security-card { padding: 22px 18px; }
    .page-container, .page-container.narrow { width: min(100% - 24px, 900px); padding-top: 38px; }
    .page-heading h1 { font-size: 42px; }
    .form-card { padding: 22px 18px; }
    .driver-page { width: 100%; padding-inline: 12px; }
    .active-vehicle-switcher,
    .section-heading-row { align-items: stretch; flex-direction: column; }
    .vehicle-switch-actions { display: grid; justify-content: stretch; }
    .vehicle-card-grid { grid-template-columns: 1fr; }
    .page-container.vehicle-management-page { width: min(100% - 24px, 900px); padding-top: 34px; }
    .vehicle-page-heading h1 { font-size: 40px; }
    .vehicle-account-summary { grid-template-columns: auto minmax(0, 1fr); padding: 17px; }
    .vehicle-account-edit { grid-column: 2; }
    .vehicle-account-editor { padding: 20px 17px; }
    .vehicle-list-heading { align-items: flex-start; }
    .vehicle-count-note { align-self: flex-start; }
    .vehicle-management-card {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 19px 17px;
    }
    .vehicle-card-state { min-width: 0; justify-items: start; }
    .vehicle-card-actions { width: 100%; min-width: 0; }
    .status-card, .telemetry-card { padding: 24px 20px; }
    .admin-filter {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }
    .admin-filter label { align-self: flex-start; }
    .admin-filter select, .admin-filter .button { width: 100%; }
    .admin-profile-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .admin-profile-tabs .button { width: 100%; }
    .admin-profile-tabs .admin-pending-tab { grid-column: 1 / -1; }
    .admin-main-content { width: calc(100% - 24px); padding-top: 38px; }
    .admin-side-nav { padding: 20px 12px; }
    .admin-side-nav-heading { padding-inline: 4px; }
    .admin-side-nav-heading h2 { font-size: 21px; }
    .admin-side-nav-heading p { display: none; }
    .admin-side-nav nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .admin-side-nav a {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 8px;
        padding: 10px 8px;
    }
    .admin-nav-index { min-height: 27px; }
    .admin-nav-copy strong { font-size: 11px; }
    .admin-nav-copy small { display: none; }
    .admin-overview-heading { align-items: flex-start; flex-direction: column; }
    .admin-overview-heading h2 { font-size: 27px; }
    .admin-page #overview > .page-heading { padding: 24px 22px; border-radius: 20px; }
    .admin-page #overview > .page-heading h1 { font-size: 38px; }
    .admin-primary-metric { padding: 15px; }
    .admin-primary-metric strong { font-size: 32px; }
    .admin-primary-metric small { min-height: 42px; }
    .admin-attention-panel,
    .admin-dispatch-overview { padding: 18px; }
    .admin-attention-list > div {
        grid-template-columns: 9px minmax(0, 1fr);
    }
    .admin-attention-list a {
        grid-column: 2;
        justify-self: start;
    }
    .admin-dispatch-overview dl div { grid-template-columns: 1fr; gap: 2px; }
    .test-report-heading { align-items: flex-start; }
    .test-report-heading .button { width: 100%; }
    .test-report-status-grid { grid-template-columns: 1fr; }
    .test-report-guide { grid-template-columns: 1fr; }
    .test-report-guide > i { display: none; }
    .test-report-columns { grid-template-columns: 1fr; }
    .test-request-list article { grid-template-columns: 1fr; }
    .test-request-main { grid-column: auto; }
    .test-request-list article > .button { grid-column: auto; width: 100%; }
    .notification-card {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }
    .notification-icon { width: 42px; height: 42px; }
}