:root {
    --bg: #f4f7fb;
    --card: #ffffff;
    --primary: #ff4d59;
    --primary-dark: #d83b45;
    --secondary: #1d3557;
    --text: #1f2937;
    --muted: #66738a;
    --line: #e7ecf1;
    --success: #2ca26b;
    --warning: #f4b942;
    --danger: #dc3545;
    --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a { text-decoration: none; }
button, input, select, textarea { font: inherit; }

.auth-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, #f9d423, #ff4d59 55%, #1d3557);
}

.auth-shell {
    width: min(600px, 100%);
}

.auth-shell.smaller { width: min(480px, 100%); }

.auth-card, .panel, .stat-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.auth-card {
    padding: 28px;
}

.brand-block {
    text-align: center;
    margin-bottom: 24px;
}

.brand-badge {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}

h1, h2, h3 { margin-top: 0; }

.form-grid {
    display: grid;
    gap: 18px;
}

label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 14px;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    background: #f9fbfd;
    color: var(--text);
}

textarea { resize: vertical; }

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 700;
    transition: 0.2s ease;
}

.btn:hover { filter: brightness(0.97); }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-secondary { background: #eef3ff; color: var(--secondary); }
.btn-warning { background: var(--warning); color: #1d2330; }
.btn-danger { background: var(--danger); color: white; }

.alert {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
}
.alert-success { background: rgba(44, 162, 107, 0.12); color: var(--success); }
.alert-danger { background: rgba(220, 53, 69, 0.1); color: var(--danger); }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 28px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}

.topbar > div { display: flex; align-items: center; gap: 12px; }
.topbar strong { font-size: 24px; }
.topbar span { color: var(--muted); }

.nav-actions { gap: 18px; }
.user-pill {
    display: inline-flex;
    align-items: center;
    background: #f5f7ff;
    color: var(--secondary);
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 600;
}

.dashboard {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: calc(100vh - 82px);
}

.sidebar {
    padding: 24px;
    border-right: 1px solid var(--line);
    background: #fff;
}

.menu-block {
    background: #f9fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 12px;
}

.menu-block a {
    color: var(--secondary);
    font-weight: 600;
}

.content-panel {
    padding: 24px;
    display: grid;
    gap: 22px;
}

.cards-grid {
    display: grid;
    gap: 18px;
}

.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.six-columns { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.stat-card {
    padding: 18px 20px;
}

.stat-card span {
    display: block;
    color: var(--muted);
    margin-bottom: 8px;
}

.stat-card strong {
    font-size: 28px;
    color: var(--secondary);
}

.panel {
    padding: 20px;
}

.form-inline {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.full-width { grid-column: 1 / -1; }

.list-stack {
    display: grid;
    gap: 14px;
}

.list-item {
    border: 1px solid var(--line);
    background: #f9fbff;
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 8px;
}

.list-item-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 77, 89, 0.12);
    color: var(--primary-dark);
    font-weight: 700;
    font-size: 12px;
}

.order-action-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.driver-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 980px) {
    .dashboard { grid-template-columns: 1fr; }
    .sidebar { border-right: none; border-bottom: 1px solid var(--line); }
    .admin-app .dashboard { grid-template-columns: 1fr; }
    .admin-app .sidebar { padding: 14px 20px 0; border-bottom: 0; }
    .admin-app .menu-block { position: static; grid-template-columns: repeat(4, max-content); align-items: center; }
    .admin-app .menu-block h3 { margin-right: 6px; }
    .six-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .three-columns { grid-template-columns: 1fr; }
    .order-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .topbar { flex-direction: column; align-items: flex-start; }
    .nav-actions { width: 100%; justify-content: space-between; }
    .six-columns, .order-action-grid { grid-template-columns: 1fr; }
}

[hidden] { display: none !important; }

.client-app {
    min-height: 100vh;
    background: #f5f6f8;
    color: #242323;
}

.client-topbar {
    min-height: 76px;
    gap: 18px;
    padding: 12px max(24px, calc((100vw - 1280px) / 2));
    border-bottom-color: #e9edf2;
    box-shadow: 0 4px 18px rgba(28, 43, 66, .045);
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #242323;
}

.brand-lockup .brand-badge {
    margin: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #ff5a1f;
    font-size: 15px;
}

.brand-lockup strong,
.brand-lockup small {
    display: block;
}

.brand-lockup strong { font-size: 19px; }
.brand-lockup small { margin-top: 3px; color: #85827e; font-size: 12px; }

.client-content {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 34px 0 64px;
    display: grid;
    gap: 24px;
}

.client-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 2px;
}

.client-welcome h1 {
    margin: 6px 0;
    font-size: clamp(26px, 4vw, 36px);
    letter-spacing: -1.2px;
}

.client-welcome p,
.muted-copy {
    margin: 0;
    color: #77736f;
    line-height: 1.55;
    font-size: 14px;
}

.eyebrow {
    display: block;
    color: #ff5a1f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.client-app .btn-primary {
    background: #ff5a1f;
    border-radius: 12px;
    box-shadow: 0 7px 16px rgba(255, 90, 31, 0.18);
}

.client-app .btn-secondary {
    background: #fff2eb;
    color: #bd4619;
}

.client-app .btn { min-height: 44px; }
.client-app .btn:focus-visible,
.client-app .profile-settings-trigger:focus-visible,
.client-app .client-order-card:focus-visible,
.client-app .map-select-button:focus-visible {
    outline: 3px solid rgba(255, 90, 31, .28);
    outline-offset: 2px;
}

.tracking-panel {
    overflow: hidden;
    border: 1px solid #e8ebef;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(30, 45, 70, .065);
}

.tracking-heading {
    min-height: 88px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #f0eeea;
}

.tracking-heading h2,
.section-heading h2 {
    margin: 5px 0 0;
    font-size: 21px;
    letter-spacing: -0.5px;
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #67635f;
    font-size: 12px;
    white-space: nowrap;
}

.live-indicator i {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #20a46b;
    box-shadow: 0 0 0 4px rgba(32, 164, 107, 0.12);
}

.live-indicator .is-offline,
#tracking-updated.is-offline { color: #c1493e; }

.admin-refresh-status.is-offline { color: #c1493e; }
.tracking-heading-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tracking-heading-actions .btn { white-space: nowrap; }
.btn-compact { padding: 9px 13px; font-size: 11px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 12px; }
.admin-toolbar p { margin: 0; }

.tracking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr);
    min-height: 450px;
}

.tracking-map-wrap {
    min-width: 0;
    position: relative;
    padding: 14px;
    background: #f0eee7;
}

.map-toolbar {
    position: absolute;
    left: 25px;
    top: 24px;
    z-index: 1;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 9px 12px;
    border: 1px solid rgba(235, 231, 221, 0.8);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 4px 12px rgba(22, 20, 14, 0.09);
}

.map-pin-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #55514e;
    font-size: 10px;
    font-weight: 700;
}

.map-pin-key i {
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #999;
}

.pin-driver { background: #fa4b58; }
.pin-pickup { background: #f2a900; }
.pin-destination { background: #2da66f; }

.tracking-map {
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 15px;
    background: #e7e5df;
}

.tracking-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.tracking-map .leaflet-container { width: 100%; height: 100%; font: inherit; }
.tracking-map .leaflet-control-attribution { font-size: 9px; }
.tracking-driver-marker {
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fa4b58;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}
.tracking-driver-marker span { line-height: 1; }
.tracking-driver-marker img { width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }

.map-placeholder {
    height: 100%;
    min-height: 250px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    color: #615d58;
    background-color: #efeee9;
    background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.65) 49%, rgba(255,255,255,.65) 51%, transparent 52%), linear-gradient(120deg, transparent 48%, rgba(255,255,255,.6) 49%, rgba(255,255,255,.6) 51%, transparent 52%);
    background-size: 88px 78px;
}

.map-placeholder > span { font-size: 30px; }
.map-placeholder small { max-width: 270px; color: #858079; line-height: 1.5; }

.map-notice {
    margin: 8px 4px 0;
    color: #77736f;
    font-size: 11px;
}

.tracking-details {
    padding: 23px 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tracking-empty {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.tracking-empty .empty-emoji { font-size: 35px; }
.tracking-empty h3 { margin: 14px 0 8px; font-size: 20px; }
.tracking-empty p { max-width: 350px; margin: 0 0 18px; color: #77736f; line-height: 1.6; font-size: 14px; }

.order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.order-number {
    color: #8a8580;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.status-badge {
    max-width: 65%;
    padding: 6px 9px;
    border-radius: 99px;
    background: #fff1e9;
    color: #c24d20;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
}
.status-badge.is-delivered { background: #e6f8ef; color: #168152; }

.tracking-details h3 {
    margin: 13px 0 5px;
    font-size: 21px;
    letter-spacing: -0.5px;
}

.tracking-price { margin: 8px 0; color: #423f3b; font-size: 13px; font-weight: 700; }
.client-price-offer {
    display: grid;
    gap: 8px;
    margin: 10px 0;
    padding: 14px;
    border: 1px solid #ffc89f;
    border-radius: 12px;
    background: #fff8f1;
    color: #423f3b;
    font-size: 13px;
}
.client-price-offer p { margin: 0; color: #6d655e; line-height: 1.5; }
.price-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.price-offer-actions .btn { padding: 9px 11px; font-size: 11px; }

.order-timeline {
    margin: 18px 0;
    display: grid;
}

.timeline-step {
    min-height: 41px;
    position: relative;
    display: grid;
    grid-template-columns: 23px 1fr;
    gap: 10px;
    color: #aaa5a0;
}

.timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 20px;
    bottom: -1px;
    width: 2px;
    background: #e9e6e1;
}

.timeline-marker {
    z-index: 1;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #dedbd6;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.timeline-step strong,
.timeline-step small { display: block; }
.timeline-step strong { font-size: 11px; font-weight: 600; }
.timeline-step small { min-height: 14px; margin-top: 2px; color: #a7a29c; font-size: 10px; }
.timeline-step.is-complete { color: #423f3b; }
.timeline-step.is-complete .timeline-marker { border-color: #2da66f; background: #2da66f; }
.timeline-step.is-complete:not(:last-child)::before { background: #2da66f; }
.timeline-step.is-complete strong { font-weight: 800; }
.timeline-cancelled { display: flex; align-items: center; gap: 10px; color: #b94137; }
.timeline-cancelled > span { width: 21px; height: 21px; border: 2px solid #c34a3c; border-radius: 50%; text-align: center; line-height: 17px; }
.timeline-cancelled strong, .timeline-cancelled small { display: block; }
.timeline-cancelled small { margin-top: 3px; color: #999; }

.delivery-proof {
    display: grid;
    gap: 8px;
    margin: 4px 0 16px;
    color: #423f3b;
    font-size: 12px;
}
.delivery-proof a { display: block; width: fit-content; max-width: 100%; }
.delivery-proof img { display: block; max-width: 100%; max-height: 220px; border: 1px solid #e8e5df; border-radius: 12px; object-fit: cover; }

.driver-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 2px 0 15px;
    padding: 11px;
    border: 1px solid #efede8;
    border-radius: 13px;
    background: #fbfaf8;
}

.driver-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fff0e8;
    color: #d34b19;
    font-size: 19px;
    font-weight: 800;
}
.driver-avatar img { width: 100%; height: 100%; object-fit: cover; }

.driver-card-copy { min-width: 0; flex: 1; }
.driver-card-copy strong, .driver-card-copy span { display: block; }
.driver-card-copy strong { font-size: 12px; }
.driver-card-copy span { margin-top: 3px; color: #8a8580; font-size: 10px; }

.tracking-route {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 8px 0;
    color: #55514d;
    font-size: 11px;
    line-height: 1.45;
}

.route-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    display: inline-block;
    margin-top: 2px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #aaa;
}

.route-dot-start { background: #f2a900; }
.route-dot-end { background: #2da66f; }

.tracking-details > .btn { margin-top: 10px; font-size: 12px; }
.tracking-order-switcher { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid #f0eeea; }
.tracking-order-switcher button { padding: 7px 11px; border: 1px solid #e8e4de; border-radius: 99px; background: #fff; color: #68635e; cursor: pointer; font-size: 11px; }
.tracking-order-switcher button.is-selected { border-color: #ff5a1f; color: #d34b19; background: #fff2eb; }

.client-stats .stat-card { border-color: #eeece8; border-radius: 16px; box-shadow: none; }
.client-stats .stat-card strong { color: #252321; }
.client-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.client-stats .stat-card {
    min-width: 0;
    padding: 18px 20px;
    border-color: #e8ebef;
    box-shadow: 0 6px 18px rgba(30, 45, 70, .035);
}
.client-stats .stat-card span { color: #777f8d; font-size: 12px; }
.client-stats .stat-card strong { font-size: 27px; }

.client-app .panel {
    border-color: #e8ebef;
    border-radius: 20px;
    box-shadow: 0 9px 26px rgba(30, 45, 70, .045);
}

.client-app .client-order-form,
.client-app .recent-orders { padding: clamp(18px, 2.4vw, 28px); }
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 19px;
}

.form-step { color: #aaa49e; font-size: 12px; font-weight: 700; }
.form-step:first-letter { color: #ff5a1f; }
.form-step i { padding: 0 5px; font-style: normal; color: #d7d2cb; }

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

.client-app label { min-width: 0; color: #4c4945; font-weight: 700; }
.client-app input,
.client-app textarea {
    min-width: 0;
    min-height: 46px;
    border-color: #e8e5df;
    border-radius: 12px;
    background: #fff;
}
.client-app input:focus,
.client-app textarea:focus,
.client-app select:focus { border-color: #ff9a72; outline: 3px solid rgba(255, 90, 31, .11); }

.address-field { position: relative; z-index: 1; }
.address-field:focus-within { z-index: 1001; }
.address-field > span { display: flex; align-items: center; gap: 8px; }
.address-field input { padding: 14px; }
.address-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    z-index: 1100;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e8e5df;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(34, 30, 25, 0.14);
    color: #77736f;
    font-size: 12px;
    font-weight: 400;
}
.address-suggestion {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 0;
    border-bottom: 1px solid #f0eee9;
    background: #fff;
    color: #4c4945;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.address-suggestion:last-child { border-bottom: 0; }
.address-suggestion:hover,
.address-suggestion[aria-selected="true"] { background: #fff2eb; }
.address-suggestions.is-message { padding: 11px 13px; }
.location-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.map-picker-tools { display: inline-flex; align-items: center; gap: 7px; color: #77736f; font-size: 12px; }
.map-select-button { padding: 8px 10px; border: 1px solid #e8e4de; border-radius: 9px; background: #fff; color: #68635e; cursor: pointer; font-size: 11px; }
.map-select-button.is-selected { border-color: #ff5a1f; color: #d34b19; background: #fff2eb; }
.order-picker-map { height: 260px; overflow: hidden; border: 1px solid #e8e5df; border-radius: 14px; background: #f0eee7; }
.order-picker-map .leaflet-container { width: 100%; height: 100%; font: inherit; }
.order-picker-map .leaflet-control-attribution { font-size: 9px; }
.map-picker-note { font-size: 12px; }
.fare-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .85fr) minmax(220px, .9fr);
    align-items: end;
    gap: 14px;
    padding: 16px;
    border: 1px solid #f0dfc8;
    border-radius: 14px;
    background: #fffaf3;
}
.fare-quote > div { display: grid; gap: 5px; }
.fare-quote > div strong { color: #1d3557; font-size: 20px; }
.fare-quote > div small,
.fare-quote > small { color: #77736f; font-size: 11px; }
.fare-quote label { gap: 6px; font-size: 12px; }
.fare-quote input,
.fare-quote select { width: 100%; padding: 10px; }
.fare-quote > small { grid-column: 1 / -1; }
.client-app .notes-field { font-size: 12px; }
.form-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.form-submit-row .muted-copy { max-width: 580px; font-size: 12px; }
.client-order-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 11px; }
.client-order-card { width: 100%; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid #e8ebef; border-radius: 14px; background: #fff; color: #302d29; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.client-order-card:hover { transform: translateY(-1px); border-color: #ffb79b; box-shadow: 0 7px 18px rgba(30, 45, 70, .06); }
.client-order-card.is-selected { border-color: #ff9a72; background: #fff8f4; }
.client-order-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 13px; background: #fff0e8; color: #dc551f; }
.client-order-copy { flex: 1; min-width: 0; }
.client-order-copy strong, .client-order-copy small { display: block; }
.client-order-copy strong { color: #303b4b; font-size: 13px; }
.client-order-copy small { overflow: hidden; margin-top: 4px; color: #88837d; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.client-order-status { max-width: 40%; color: #a34a29; text-align: right; font-size: 10px; font-weight: 700; line-height: 1.4; }
.client-order-empty { padding: 22px; border: 1px dashed #ded9d1; border-radius: 13px; color: #8a8580; text-align: center; font-size: 13px; }

.waiting-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(22, 31, 46, 0.58);
    backdrop-filter: blur(7px);
}
.waiting-modal {
    position: relative;
    width: min(460px, 100%);
    max-height: min(90vh, 760px);
    overflow-y: auto;
    padding: 32px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 26px;
    background: linear-gradient(155deg, #fff 60%, #fff5ef);
    box-shadow: 0 28px 90px rgba(17, 24, 39, .3);
    animation: waiting-modal-in .24s ease-out;
}
.waiting-modal h2 { margin: 12px 0 8px; color: #202b3c; font-size: 24px; letter-spacing: -.7px; }
.waiting-modal > p { color: #68758a; font-size: 13px; line-height: 1.6; }
.waiting-modal-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 18px; background: #fff0e8; font-size: 28px; }
.waiting-modal-close { position: absolute; top: 14px; right: 15px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f2f4f7; color: #68758a; cursor: pointer; font-size: 25px; line-height: 1; }
.waiting-countdown { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 12px; padding: 15px 16px; border: 1px solid #f4dccc; border-radius: 15px; background: linear-gradient(110deg, #fff7f1, #fff); }
.waiting-countdown span { color: #71665e; font-size: 12px; font-weight: 700; }
.waiting-countdown strong { color: #d84c19; font-size: 27px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.waiting-modal-status { min-height: 38px; margin: 0 0 18px; }
.waiting-modal .price-offer-actions { display: grid; gap: 8px; margin: 14px 0; }
.waiting-modal .price-offer-actions .btn { width: 100%; }
.waiting-modal.has-price-offer { border-color: #70d49d; background: linear-gradient(155deg, #fff 48%, #effff5); box-shadow: 0 28px 90px rgba(17, 24, 39, .3), 0 0 0 4px rgba(48, 190, 110, .2); }
.waiting-modal.has-price-offer .waiting-modal-icon { background: #e4f9ec; }
.waiting-modal-price.is-price-offer { color: #087c42; text-shadow: 0 0 16px rgba(36, 190, 101, .42); animation: offer-price-glow 1.5s ease-in-out infinite alternate; }
.waiting-modal.has-price-offer .waiting-countdown { border-color: #c4edd3; background: linear-gradient(110deg, #f1fff5, #fff); }
.waiting-modal.has-price-offer .waiting-countdown strong { color: #11854d; }
@keyframes offer-price-glow { from { text-shadow: 0 0 5px rgba(36, 190, 101, .25); } to { text-shadow: 0 0 18px rgba(36, 190, 101, .72); } }
@keyframes waiting-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.driver-header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.driver-earnings { display: grid; gap: 3px; padding: 9px 13px; border: 1px solid #d5efdf; border-radius: 12px; background: #f0fbf4; }
.driver-earnings span { color: #567264; font-size: 10px; }
.driver-earnings strong { color: #168152; font-size: 16px; }
.is-sound-enabled { border-color: #2da66f; color: #168152; }
.driver-navigation-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-color: #ece9e2; }
.driver-navigation-panel h2 { margin: 7px 0; font-size: 19px; }
.driver-route-panel { overflow: hidden; }
.driver-route-panel .section-heading { align-items: center; }
.driver-route-map { height: 360px; overflow: hidden; border: 1px solid #e6eaf0; border-radius: 16px; background: #edf2f7; }
.driver-route-map .leaflet-container { width: 100%; height: 100%; font: inherit; }
.driver-route-map .leaflet-control-attribution { font-size: 9px; }
.driver-map-marker { display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 3px 12px rgba(25, 38, 58, .28); font-size: 12px; font-weight: 900; }
.driver-map-pickup { background: #f2a900; color: #fff; }
.driver-map-dropoff { background: #2da66f; color: #fff; }
.driver-map-current { background: #315fbd; color: #fff; font-size: 19px; }
.driver-gps-note { margin: 6px 0 0; color: #8b8680; font-size: 11px; }
.btn-waze { flex: 0 0 auto; gap: 9px; background: #1b9ed9; color: #fff; }
.waze-mark { width: 23px; height: 23px; display: inline-grid; place-items: center; border-radius: 50%; background: #fff; color: #1b9ed9; }
.is-driver-active { background: #e6f8ef; color: #168152; }
.is-disabled { opacity: .43; cursor: not-allowed; }
.driver-orders-panel .section-heading { align-items: flex-end; margin-bottom: 16px; }
.driver-order-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; padding: 5px; border: 1px solid #e8edf4; border-radius: 14px; background: #f6f8fb; }
.driver-order-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #68635e; cursor: pointer; font-size: 12px; }
.driver-order-tabs button strong { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: #e8edf4; color: #617087; font-size: 10px; text-align: center; }
.driver-order-tabs button.is-selected { border-color: #dbe6f5; background: #fff; color: #214777; font-weight: 700; box-shadow: 0 3px 10px rgba(28, 43, 66, .07); }
.driver-order-tabs button.is-selected strong { background: #eaf2ff; color: #315fbd; }
.driver-orders-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.driver-order-item { display: grid; align-content: start; width: 100%; gap: 12px; min-width: 0; padding: 14px; border: 1px solid #e5eaf2; border-radius: 16px; background: linear-gradient(145deg, #fff, #fbfcfe); color: #55514e; font-size: 12px; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.driver-order-item:hover { transform: translateY(-2px); border-color: #b8cbed; box-shadow: 0 10px 24px rgba(31, 57, 91, .09); }
.driver-order-item.is-selected { border-color: #7aa2e8; background: linear-gradient(145deg, #fff, #f3f7ff); box-shadow: 0 0 0 3px rgba(49, 95, 189, .1); }
.driver-order-select { display: grid; width: 100%; gap: 12px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.driver-order-item-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #203857; }
.driver-order-item-heading strong { font-size: 14px; }
.driver-order-status { max-width: 62%; padding: 5px 8px; border-radius: 999px; background: #edf3fd; color: #315fbd; text-align: center; font-size: 10px; font-weight: 700; }
.driver-order-client { color: #66758b; font-size: 11px; font-weight: 700; }
.driver-order-address { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.driver-order-address .route-dot { flex: 0 0 auto; margin-top: 3px; }
.driver-order-address > span { display: grid; gap: 3px; min-width: 0; }
.driver-order-address small { color: #8793a4; font-size: 10px; }
.driver-order-address strong { overflow: hidden; color: #394b64; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.driver-order-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; padding-top: 11px; border-top: 1px solid #edf0f5; }
.driver-order-footer strong { color: #168152; font-size: 14px; }
.driver-order-footer small { color: #8793a4; font-size: 10px; }
.driver-order-waze { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: flex-start; gap: 11px; padding: 8px 13px; border: 1px solid #1485b8; border-radius: 12px; background: linear-gradient(135deg, #1b9ed9, #147faf); color: #fff; text-align: left; text-decoration: none; box-shadow: 0 5px 12px rgba(27, 158, 217, .2); }
.driver-order-waze:hover { background: linear-gradient(135deg, #168fca, #116f9e); color: #fff; }
.driver-order-waze .waze-mark { width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px; }
.driver-order-waze > span:last-child { display: grid; gap: 2px; }
.driver-order-waze strong { font-size: 12px; }
.driver-order-waze small { color: rgba(255,255,255,.86); font-size: 10px; }
.driver-order-actions { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; padding-top: 11px; border-top: 1px solid #edf0f5; }
.driver-order-actions .btn { min-height: 40px; padding: 9px 10px; font-size: 10px; line-height: 1.35; }
.driver-order-actions .btn-success { background: linear-gradient(135deg, #1d9a69, #15744e); color: #fff; }
.driver-order-actions .btn-warning { display: flex; align-items: center; justify-content: center; text-align: center; }
.driver-order-complete { margin: 0; padding-top: 10px; border-top: 1px solid #edf0f5; color: #168152; font-size: 11px; font-weight: 700; }
.driver-orders-empty { display: grid; grid-column: 1 / -1; justify-items: center; gap: 7px; padding: 30px 18px; border: 1px dashed #dbe2ec; border-radius: 16px; background: #fafbfd; color: #66758b; text-align: center; }
.driver-orders-empty > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: #eef4ff; font-size: 23px; }
.driver-orders-empty small { color: #8a96a8; font-size: 11px; }
.driver-dashboard .panel { border-color: #e8edf4; box-shadow: 0 10px 26px rgba(21, 37, 61, .055); }
.driver-dashboard .btn { min-height: 44px; border: 1px solid transparent; border-radius: 12px; box-shadow: 0 4px 10px rgba(24, 39, 62, .08); letter-spacing: .15px; }
.driver-dashboard .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(24, 39, 62, .13); }
.driver-dashboard .btn:focus-visible { outline: 3px solid rgba(49, 95, 189, .25); outline-offset: 2px; }
.driver-dashboard .btn:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.driver-dashboard .btn-primary { background: linear-gradient(135deg, #ff6845, #e74455); }
.driver-dashboard .order-action-grid .btn { padding: 12px; font-size: 11px; line-height: 1.4; }
.driver-dashboard .order-action-grid [data-order-status="delivered"] { background: #17895d; color: #fff; }

.admin-app,
.driver-app { min-height: 100vh; background: #f3f6fb; }
.admin-app .topbar,
.driver-app .topbar { min-height: 72px; padding: 14px clamp(18px, 4vw, 48px); box-shadow: 0 3px 14px rgba(28, 43, 66, .045); }
.admin-app .topbar strong,
.driver-app .topbar strong { color: #1d3557; font-size: 20px; letter-spacing: -.3px; }
.admin-app .dashboard { max-width: 1680px; margin: 0 auto; grid-template-columns: 220px minmax(0, 1fr); }
.admin-app .sidebar { padding: 26px 18px; border-right: 1px solid #e8edf4; background: transparent; }
.admin-app .menu-block { position: sticky; top: 96px; padding: 18px; border: 1px solid #e5eaf2; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(28, 43, 66, .05); }
.admin-app .menu-block h3 { margin: 0 0 5px; color: #8a96a8; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.admin-app .menu-block a { padding: 10px 12px; border-radius: 10px; color: #53647b; font-size: 13px; transition: .18s ease; }
.admin-app .menu-block a:hover,
.admin-app .menu-block a[aria-current="page"] { background: #f0f4fb; color: #214777; }
.admin-app .content-panel { padding: clamp(20px, 3vw, 38px); gap: 18px; }
.admin-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.admin-page-heading h1 { margin: 6px 0 5px; color: #203857; font-size: clamp(23px, 2.4vw, 30px); letter-spacing: -.8px; }
.admin-page-heading p { margin: 0; color: #748198; font-size: 13px; }
.admin-live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d5efdf; border-radius: 999px; background: #f0fbf4; color: #347653; font-size: 11px; font-weight: 700; white-space: nowrap; }
.admin-live-pill i { width: 7px; height: 7px; border-radius: 50%; background: #25a56b; box-shadow: 0 0 0 4px rgba(37,165,107,.12); }
.admin-app .six-columns { gap: 12px; }
.admin-app .stat-card { min-height: 100px; padding: 17px 18px; border-color: #e6ebf2; border-radius: 16px; box-shadow: 0 7px 20px rgba(28, 43, 66, .045); }
.admin-app .stat-card span { color: #75839a; font-size: 11px; font-weight: 700; }
.admin-app .stat-card strong { color: #1e3a5f; font-size: 25px; }
.admin-app .panel { padding: 23px; border-color: #e6ebf2; border-radius: 18px; box-shadow: 0 8px 22px rgba(28, 43, 66, .045); }
.admin-app .panel > h2 { margin: 0 0 18px; color: #233b5b; font-size: 17px; }
.admin-app .list-item { padding: 17px 18px; border-color: #e7ecf3; border-radius: 14px; background: #fff; }
.admin-app .list-item p { margin: 2px 0; color: #617087; font-size: 12px; line-height: 1.5; }
.admin-app .form-inline input,
.admin-app .form-inline select { min-width: 150px; border-color: #dce4ef; background: #fff; }
.admin-app .list-stack { gap: 12px; }
.admin-order-tabs { display: flex; gap: 8px; margin: 0 0 18px; padding: 5px; width: fit-content; max-width: 100%; border: 1px solid #e7ecf3; border-radius: 13px; background: #f5f7fb; }
.admin-order-tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 13px; border: 0; border-radius: 9px; background: transparent; color: #63728a; cursor: pointer; font: inherit; font-size: 12px; font-weight: 750; }
.admin-order-tabs button.is-selected { background: #fff; color: #244983; box-shadow: 0 2px 7px rgba(28, 43, 66, .1); }
.admin-order-tabs button span { display: inline-grid; min-width: 21px; height: 21px; place-items: center; padding: 0 5px; border-radius: 999px; background: #eaf0f9; color: #315fbd; font-size: 10px; }
.admin-orders-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.admin-orders-heading h2 { margin: 4px 0 0; color: #233b5b; font-size: 20px; }
.admin-orders-refresh { color: #8290a4; font-size: 11px; }
.admin-order-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 12px; }
.admin-order-tab-panel[hidden],
.admin-app [hidden] { display: none !important; }
.admin-order-empty { grid-column: 1 / -1; margin: 0; padding: 28px 18px; border: 1px dashed #dce4ef; border-radius: 14px; color: #76839a; font-size: 13px; text-align: center; }
.admin-order-card { display: grid; min-width: 0; align-content: start; gap: 11px; padding: 15px; border: 1px solid #e4eaf2; border-radius: 15px; background: linear-gradient(145deg, #fff, #fbfcff); box-shadow: 0 5px 15px rgba(28, 43, 66, .045); }
.admin-order-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #edf1f6; }
.admin-order-card-header > div { display: grid; gap: 4px; min-width: 0; }
.admin-order-number { color: #8491a4; font-size: 10px; font-weight: 800; letter-spacing: .9px; }
.admin-order-card-header > div > strong { overflow: hidden; color: #203857; font-size: 14px; text-overflow: ellipsis; }
.admin-order-status { max-width: 52%; padding: 7px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; text-align: center; }
.admin-order-status.is-pending { background: #fff5e5; color: #a76b0a; }
.admin-order-status.is-progress { background: #edf3fd; color: #315fbd; }
.admin-order-status.is-complete { background: #e6f8ef; color: #168152; }
.admin-order-status.is-cancelled { background: #fff0ef; color: #b94137; }
.admin-order-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7d8aa0; font-size: 11px; }
.admin-order-contact strong { color: #394b64; font-size: 12px; font-weight: 600; }
.admin-order-contact a { margin-left: 8px; color: #315fbd; font-weight: 800; text-decoration: none; }
.admin-order-route { display: grid; gap: 9px; padding: 12px; border: 1px solid #edf1f6; border-radius: 12px; background: #fff; }
.admin-order-route > div { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.admin-order-route .route-dot { margin-top: 4px; }
.admin-order-route > div > span { display: grid; gap: 4px; min-width: 0; }
.admin-order-route small,.admin-order-financials small { color: #8a96a8; font-size: 10px; }
.admin-order-route strong { overflow-wrap: anywhere; color: #394b64; font-size: 11px; font-weight: 600; line-height: 1.4; }
.admin-order-financials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.admin-order-financials > div { display: grid; min-width: 0; gap: 4px; padding: 9px; border-radius: 10px; background: #f3f6fb; }
.admin-order-financials strong { overflow-wrap: anywhere; color: #263d5c; font-size: 11px; }
.admin-order-controls { display: grid; gap: 8px; padding-top: 11px; border-top: 1px solid #edf1f6; }
.admin-order-control-title { color: #53647b; font-size: 11px; font-weight: 800; }
.admin-order-controls .form-inline { justify-content: flex-start; gap: 10px; }
.admin-order-controls .form-inline label:not(.admin-driver-select) { width: 100%; color: #68778e; font-size: 11px; font-weight: 700; }
.admin-order-controls .form-inline input { flex: 1 1 160px; min-width: 0; }
.admin-driver-select { display: grid; flex: 1 1 220px; gap: 5px; color: #68778e; font-size: 10px; font-weight: 700; }
.admin-order-controls .btn { min-height: 42px; padding: 10px 15px; border-radius: 11px; font-size: 11px; font-weight: 800; }
.admin-order-controls .btn-primary { background: linear-gradient(135deg, #315fbd, #244983); color: #fff; }
.admin-order-controls .btn-secondary { background: #eef3fb; color: #315fbd; }
.admin-order-notice { padding: 11px 13px; border-radius: 11px; background: #fff8e9; color: #896322; font-size: 11px; line-height: 1.5; }
.admin-order-notice p { margin: 0; }
.admin-order-card.is-new-order { animation: admin-new-order-flash .9s ease-in-out 6; }
.admin-order-card.is-counterproposal { animation: admin-counterproposal-flash .9s ease-in-out 6; }
.admin-order-alert-badge { width: fit-content; padding: 5px 8px; border-radius: 999px; background: #fff2df; color: #a45b08; font-size: 10px; font-weight: 800; }
.admin-order-card.is-counterproposal .admin-order-alert-badge { background: #f0eaff; color: #6540a0; }
@keyframes admin-new-order-flash {
    50% { border-color: #ef9b35; box-shadow: 0 0 0 4px rgba(239, 155, 53, .2), 0 8px 22px rgba(28, 43, 66, .08); }
}
@keyframes admin-counterproposal-flash {
    50% { border-color: #8e6ac7; box-shadow: 0 0 0 4px rgba(142, 106, 199, .2), 0 8px 22px rgba(28, 43, 66, .08); }
}
@media (max-width: 850px) {
    .admin-order-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .admin-order-grid { grid-template-columns: minmax(0, 1fr); }
    .admin-orders-heading { align-items: flex-start; flex-direction: column; }
    .admin-order-tabs { width: 100%; }
    .admin-order-tabs button { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-order-card.is-new-order,
    .admin-order-card.is-counterproposal { animation: none; }
}
.driver-app .driver-dashboard { max-width: 1440px; margin: 0 auto; grid-template-columns: minmax(0, 1fr); }
.driver-app .content-panel { padding: clamp(18px, 3vw, 38px); gap: 18px; }
.driver-app .driver-header { padding: 23px 26px; border: 1px solid #e6ebf2; border-radius: 20px; background: linear-gradient(120deg, #fff 60%, #f0f5ff); box-shadow: 0 9px 24px rgba(28, 43, 66, .05); }
.driver-app .driver-header h1 { margin: 0 0 6px; color: #203857; font-size: 24px; }
.driver-app .driver-header p { margin: 0; color: #76839a; font-size: 13px; }
.driver-app .cards-grid { gap: 12px; }
.driver-app .stat-card { border-color: #e6ebf2; border-radius: 16px; box-shadow: 0 7px 20px rgba(28, 43, 66, .04); }
.driver-app .panel { padding: 22px; border-color: #e6ebf2; border-radius: 18px; box-shadow: 0 8px 22px rgba(28, 43, 66, .045); }
.driver-app .panel > h2 { color: #233b5b; font-size: 17px; }
.driver-app .driver-order-tabs button { padding: 10px 15px; border-radius: 11px; font-weight: 700; }
.driver-app .driver-order-item { padding: 16px; border-radius: 14px; }

.profile-settings-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px 6px 6px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334866; cursor: pointer; font-size: 12px; font-weight: 700; }
.topbar-avatar { display: inline-grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; overflow: hidden; border-radius: 50%; background: #eaf2ff; color: #315fbd; font-size: 14px; font-weight: 800; object-fit: cover; }
.topbar-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: 22px; background: rgba(17, 29, 47, .55); backdrop-filter: blur(7px); }
.profile-modal-backdrop[hidden] { display: none; }
.profile-modal { position: relative; width: min(590px, 100%); max-height: min(90vh, 880px); overflow-y: auto; padding: 30px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: #fff; box-shadow: 0 28px 80px rgba(16, 29, 48, .25); }
.profile-modal h2 { margin: 7px 0; color: #203857; font-size: 24px; letter-spacing: -.5px; }
.profile-modal > .muted-copy { margin: 0 0 22px; font-size: 13px; }
.profile-modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f0f3f8; color: #51627a; cursor: pointer; font-size: 22px; }
.profile-settings-form { display: grid; gap: 18px; }
.profile-photo-editor { display: flex; align-items: center; gap: 16px; padding: 15px; border: 1px solid #e8edf4; border-radius: 16px; background: #f9fbfe; }
.profile-photo-preview { display: grid; width: 76px; height: 76px; flex: 0 0 76px; place-items: center; overflow: hidden; border-radius: 22px; background: linear-gradient(135deg, #e6f0ff, #e3f8ed); color: #315fbd; font-size: 30px; font-weight: 800; }
.profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo-picker { gap: 5px; color: #354964; font-weight: 700; }
.profile-photo-picker input { padding: 8px; background: #fff; font-size: 11px; }
.profile-photo-picker small { color: #8491a4; font-size: 10px; font-weight: 400; }
.profile-settings-fields { display: grid; gap: 13px; }
.profile-settings-fields label,
.profile-password-fields label { gap: 6px; color: #52647e; font-size: 12px; font-weight: 700; }
.profile-settings-fields input,
.profile-password-fields input { min-height: 43px; border-color: #dfe6ef; border-radius: 11px; background: #fbfcfe; font-size: 13px; }
.profile-password-fields { display: grid; gap: 13px; padding: 14px; border: 1px solid #e8edf4; border-radius: 14px; }
.profile-password-fields summary { color: #315fbd; cursor: pointer; font-size: 12px; font-weight: 800; }
.profile-password-fields[open] summary { margin-bottom: 4px; }
.profile-password-fields small { color: #8491a4; font-size: 10px; }
.profile-settings-message { min-height: 16px; margin: 0; color: #17895d; font-size: 12px; font-weight: 700; }
.profile-settings-message.is-error { color: #b83240; }
.profile-settings-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 600px) {
    .profile-modal { padding: 25px 19px; border-radius: 20px; }
    .profile-photo-editor { align-items: flex-start; }
    .profile-settings-actions { flex-direction: column-reverse; }
    .profile-settings-actions .btn { width: 100%; }
}

@media (max-width: 850px) {
    .tracking-layout { grid-template-columns: 1fr; }
    .tracking-map { height: 380px; }
    .tracking-details { min-height: 0; }
    .client-topbar { padding: 12px 24px; }
    .client-content { width: calc(100% - 40px); }
    .client-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fare-quote { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fare-quote > div,
    .fare-quote > small { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .driver-orders-grid { grid-template-columns: 1fr; }
    .driver-orders-panel .section-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
    .client-content { width: calc(100% - 32px); padding: 22px 0 40px; gap: 16px; }
    .client-topbar { min-height: 64px; flex-direction: row; align-items: center; gap: 8px; padding: 8px 12px; }
    .client-topbar .nav-actions { width: auto; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 6px; }
    .client-topbar .user-pill { display: none; }
    .client-topbar .topbar strong { font-size: 15px; }
    .client-topbar .profile-settings-trigger { gap: 5px; padding: 4px 8px 4px 4px; font-size: 10px; }
    .client-topbar .topbar-avatar { width: 30px; height: 30px; flex-basis: 30px; }
    .client-topbar .btn { min-height: 38px; padding: 8px 10px; font-size: 11px; }
    .brand-lockup { min-width: 0; gap: 8px; }
    .brand-logo { width: 88px; }
    .brand-logo-auth { width: min(100%, 400px); }
    .brand-lockup .brand-badge { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; }
    .brand-lockup strong { font-size: 15px; }
    .brand-lockup small { margin-top: 2px; font-size: 9px; }
    .client-welcome { align-items: stretch; flex-direction: column; gap: 12px; }
    .client-welcome h1 { font-size: clamp(25px, 7vw, 32px); }
    .client-welcome p { max-width: 100%; font-size: 13px; }
    .client-welcome > .btn { width: 100%; justify-content: center; padding: 12px 14px; font-size: 13px; }
    .tracking-panel { border-radius: 18px; }
    .tracking-heading { min-height: 0; align-items: flex-start; flex-direction: column; gap: 12px; padding: 16px; }
    .tracking-heading h2 { font-size: 18px; }
    .tracking-heading-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; }
    .tracking-heading-actions .btn { min-width: 0; min-height: 40px; padding: 8px; white-space: normal; font-size: 10px; line-height: 1.25; }
    .tracking-heading-actions .live-indicator { grid-column: 1 / -1; justify-self: start; font-size: 11px; }
    .tracking-map-wrap { padding: 10px; }
    .tracking-map { height: clamp(230px, 68vw, 320px); }
    .map-toolbar { position: relative; top: auto; left: auto; width: fit-content; max-width: 100%; gap: 7px 10px; margin: 0 0 9px; padding: 8px 10px; }
    .map-pin-key { gap: 5px; font-size: 9px; }
    .tracking-details { padding: 17px; }
    .tracking-details h3 { font-size: 19px; }
    .order-summary { align-items: flex-start; }
    .status-badge { max-width: 60%; }
    .order-timeline { margin: 14px 0; }
    .timeline-step { min-height: 38px; }
    .timeline-step strong { font-size: 11px; }
    .tracking-details > .btn { width: 100%; }
    .tracking-order-switcher { overflow-x: auto; flex-wrap: nowrap; padding: 10px 12px; scrollbar-width: thin; }
    .tracking-order-switcher button { flex: 0 0 auto; }
    .client-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .client-stats .stat-card { padding: 12px 10px; border-radius: 13px; }
    .client-stats .stat-card span { min-height: 28px; margin-bottom: 5px; font-size: 10px; line-height: 1.35; }
    .client-stats .stat-card strong { font-size: 22px; }
    .client-app .client-order-form,
    .client-app .recent-orders { padding: 17px 15px; border-radius: 17px; }
    .client-app .section-heading { align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .section-heading h2 { font-size: 19px; line-height: 1.25; }
    .form-step { flex: 0 0 auto; padding-top: 5px; font-size: 10px; }
    .form-grid { gap: 15px; }
    .address-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .address-field > span { font-size: 12px; }
    .address-field input { min-height: 46px; padding: 12px; font-size: 16px; }
    .location-tools { align-items: stretch; flex-direction: column; gap: 10px; }
    .location-tools > .btn { width: 100%; justify-content: center; }
    .map-picker-tools { width: 100%; justify-content: space-between; gap: 6px; font-size: 11px; }
    .map-select-button { min-height: 38px; padding: 8px 11px; }
    .order-picker-map { height: 220px; }
    .map-picker-note { font-size: 11px; }
    .fare-quote { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 13px; }
    .fare-quote > div,
    .fare-quote > small { grid-column: auto; }
    .fare-quote > div strong { font-size: 18px; }
    .fare-quote label { font-size: 11px; }
    .fare-quote select,
    .fare-quote input { min-height: 46px; font-size: 16px; }
    .client-app .notes-field { font-size: 11px; }
    .client-app textarea { font-size: 16px; }
    .form-submit-row { align-items: stretch; flex-direction: column; gap: 10px; }
    .form-submit-row .muted-copy { font-size: 11px; }
    .form-submit-row > .btn { width: 100%; min-height: 48px; }
    .client-order-list { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .client-order-card { gap: 9px; padding: 11px; }
    .client-order-copy strong { font-size: 12px; }
    .client-order-copy small { font-size: 10px; }
    .client-order-status { max-width: 42%; font-size: 9px; }
    .client-order-empty { padding: 18px 12px; font-size: 12px; }
    .driver-card { padding: 10px; }
    .waiting-modal-backdrop { align-items: end; padding: 12px; }
    .driver-navigation-panel { align-items: flex-start; flex-direction: column; }
    .waiting-modal { width: 100%; max-height: min(88vh, 720px); padding: 25px 20px 20px; border-radius: 22px; }
    .waiting-modal h2 { font-size: 21px; }
    .waiting-countdown { margin: 15px 0 10px; padding: 12px 13px; }
    .waiting-countdown strong { font-size: 24px; }
    .admin-toolbar { align-items: flex-start; }
    .driver-route-map { height: 280px; }
    .admin-app .menu-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-app .menu-block h3 { grid-column: 1 / -1; }
    .admin-app .panel,
    .driver-app .panel { padding: 17px; }
    .driver-app .driver-header { padding: 18px; }
    .admin-page-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 360px) {
    .client-content { width: calc(100% - 24px); }
    .client-topbar { padding-right: 9px; padding-left: 9px; }
    .client-topbar .profile-settings-trigger { padding-right: 6px; font-size: 0; }
    .client-topbar .profile-settings-trigger .topbar-avatar { font-size: 12px; }
    .client-topbar .btn { padding-right: 8px; padding-left: 8px; }
    .brand-lockup small { display: none; }
    .tracking-heading-actions .btn { font-size: 9px; }
    .map-toolbar { gap: 6px; padding: 7px; }
    .map-pin-key { font-size: 8px; }
    .client-stats { gap: 6px; }
    .client-stats .stat-card { padding-right: 7px; padding-left: 7px; }
    .client-stats .stat-card span { font-size: 9px; }
    .client-stats .stat-card strong { font-size: 20px; }
}

/* Samaria Go dark-and-gold visual theme */
:root {
    --bg: #090909;
    --card: #141414;
    --primary: #d8a51d;
    --primary-dark: #b9850c;
    --secondary: #1b1b1b;
    --text: #f7f4ec;
    --muted: #aaa69b;
    --line: #33302a;
    --success: #25c76a;
    --warning: #e4b52d;
    --shadow: 0 14px 36px rgba(0, 0, 0, .28);
}

body { background: var(--bg); color: var(--text); }

.auth-body {
    background: radial-gradient(ellipse at 50% 0, rgba(216, 165, 29, .16), transparent 55%), #090909;
}

.auth-card,
.panel,
.stat-card {
    border-color: #302d26;
    background: #141414;
    color: #f7f4ec;
    box-shadow: var(--shadow);
}

.auth-card { border-radius: 22px; }
.brand-badge {
    border: 1px solid #d8a51d;
    background: linear-gradient(145deg, #211b0c, #141414);
    color: #f3d47a;
    box-shadow: 0 0 24px rgba(216, 165, 29, .14);
}
.brand-block h1 { color: #f7f4ec; }
.brand-block p,
.auth-card label { color: #aaa69b; }
.auth-card input,
.auth-card select,
.auth-card textarea {
    border-color: #38352e;
    background: #0c0c0c;
    color: #f7f4ec;
}
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus {
    border-color: #d8a51d;
    outline: 3px solid rgba(216, 165, 29, .14);
}
.btn-primary,
.client-app .btn-primary,
.driver-dashboard .btn-primary {
    background: linear-gradient(135deg, #f3ce59, #c58b08);
    color: #151109;
    box-shadow: 0 8px 24px rgba(216, 165, 29, .16);
}
.btn-secondary,
.client-app .btn-secondary {
    border: 1px solid #51462c;
    background: #19160f;
    color: #f3d47a;
}

.admin-app,
.driver-app,
.client-app { background: #090909; color: #f7f4ec; }

.admin-app .topbar,
.driver-app .topbar,
.client-topbar {
    border-color: #26231c;
    background: #0b0b0b;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .24);
}
.admin-app .topbar strong,
.driver-app .topbar strong { color: #f7f4ec; }
.admin-app .topbar span,
.driver-app .topbar span { color: #aaa69b; }
.brand-lockup { color: #f7f4ec; }
.brand-logo {
    display: block;
    width: 116px;
    height: auto;
    flex: 0 0 auto;
    background: #000;
}
.brand-logo-auth {
    width: min(100%, 400px);
    margin: 0 auto 20px;
    border-radius: 12px;
}
.topbar-brand { gap: 0; }
.brand-lockup .brand-badge {
    border-color: #d8a51d;
    background: #17130a;
    color: #f3d47a;
}
.brand-lockup small { color: #aaa69b; }
.user-pill {
    border: 1px solid #38352e;
    background: #171717;
    color: #e8dfc7;
}
.profile-settings-trigger {
    border-color: #51462c;
    background: #19160f;
    color: #f3d47a;
}
.topbar-avatar,
.topbar-avatar-initial {
    background: #302719;
    color: #f3d47a;
}

.dashboard { color: #f7f4ec; }
.admin-app .sidebar { border-color: #302d26; }
.admin-app .menu-block {
    border-color: #302d26;
    background: #141414;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.admin-app .menu-block h3,
.admin-app .menu-block a { color: #aaa69b; }
.admin-app .menu-block a:hover,
.admin-app .menu-block a[aria-current="page"] {
    background: #241d0d;
    color: #f3d47a;
}
.admin-page-heading h1,
.admin-orders-heading h2,
.admin-app .panel > h2,
.driver-app .panel > h2 { color: #f7f4ec; }
.admin-page-heading p,
.admin-orders-refresh { color: #aaa69b; }
.admin-live-pill {
    border-color: #275638;
    background: #102518;
    color: #b7f2cb;
}
.admin-app .stat-card,
.driver-app .stat-card,
.admin-app .panel,
.driver-app .panel,
.admin-app .list-item,
.driver-app .driver-order-item,
.admin-order-card {
    border-color: #302d26;
    background: #141414;
    color: #f7f4ec;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}
.admin-app .stat-card span,
.driver-app .stat-card span { color: #aaa69b; }
.admin-app .stat-card strong,
.driver-app .stat-card strong { color: #f3d47a; }
.admin-app .list-item p,
.admin-order-contact,
.admin-order-route small,
.admin-order-financials small { color: #aaa69b; }
.admin-order-card-header { border-color: #302d26; }
.admin-order-card-header > div > strong,
.admin-order-contact strong,
.admin-order-route strong,
.admin-order-financials strong { color: #f0eadb; }
.admin-order-route { border-color: #302d26; background: #101010; }
.admin-order-financials > div { background: #1b1b1b; }
.admin-order-controls { border-color: #302d26; }
.admin-order-control-title,
.admin-order-controls .form-inline label:not(.admin-driver-select),
.admin-driver-select { color: #c9c4b8; }
.admin-order-controls input,
.admin-order-controls select,
.admin-app .form-inline input,
.admin-app .form-inline select {
    border-color: #38352e;
    background: #0c0c0c;
    color: #f7f4ec;
}
.admin-order-tabs { border-color: #302d26; background: #101010; }
.admin-order-tabs button { color: #aaa69b; }
.admin-order-tabs button.is-selected { background: #302719; color: #f3d47a; box-shadow: none; }
.admin-order-tabs button span { background: #211b0c; color: #f3d47a; }
.admin-order-empty { border-color: #51462c; color: #aaa69b; }
.admin-order-status.is-pending { background: #302719; color: #f3d47a; }
.admin-order-status.is-progress { background: #172534; color: #b4d7ff; }
.admin-order-status.is-complete { background: #102518; color: #9be7b2; }
.admin-order-status.is-cancelled { background: #351817; color: #ffb7af; }
.driver-app .driver-header {
    border-color: #302d26;
    background: linear-gradient(120deg, #141414 55%, #211b0c);
    box-shadow: 0 9px 24px rgba(0, 0, 0, .22);
}
.driver-app .driver-header h1 { color: #f7f4ec; }
.driver-app .driver-header p { color: #aaa69b; }
.driver-app .driver-order-tabs button {
    border-color: #51462c;
    background: #19160f;
    color: #f3d47a;
}
.driver-app .driver-order-tabs {
    border-color: #302d26;
    background: #101010;
}
.driver-app .driver-order-tabs button strong {
    background: #211b0c;
    color: #f3d47a;
}
.driver-app .driver-order-tabs button.is-selected {
    border-color: #51462c;
    background: #302719;
    color: #f3d47a;
    box-shadow: none;
}
.driver-app .driver-order-tabs button.is-selected strong { background: #3a2d0d; }
.driver-app .driver-order-item {
    border-color: #302d26;
    background: linear-gradient(145deg, #191919, #111);
    color: #c9c4b8;
}
.driver-app .driver-order-item:hover,
.driver-app .driver-order-item.is-selected {
    border-color: #8d6a16;
    background: linear-gradient(145deg, #211b0c, #141414);
    box-shadow: 0 0 0 2px rgba(216, 165, 29, .1);
}
.driver-order-item-heading,
.driver-order-address strong { color: #f0eadb; }
.driver-order-status { background: #172534; color: #b4d7ff; }
.driver-order-client,
.driver-order-address small,
.driver-order-footer small,
.driver-gps-note { color: #aaa69b; }
.driver-order-footer,
.driver-order-actions,
.driver-order-complete { border-color: #302d26; }
.driver-order-footer strong,
.driver-order-complete { color: #9be7b2; }
.driver-orders-empty {
    border-color: #51462c;
    background: #101010;
    color: #c9c4b8;
}
.driver-orders-empty > span { background: #211b0c; }
.driver-orders-empty small { color: #aaa69b; }
.driver-earnings {
    border-color: #275638;
    background: #102518;
}
.driver-earnings span { color: #b7f2cb; }
.driver-earnings strong { color: #9be7b2; }
.driver-app .driver-navigation-panel { border-color: #302d26; }
.driver-app .driver-navigation-panel h2 { color: #f7f4ec; }
.driver-app .driver-navigation-panel .sub,
.driver-app .driver-navigation-panel p { color: #aaa69b; }

.client-content { color: #f7f4ec; }
.client-welcome p,
.client-app .muted-copy { color: #aaa69b; }
.client-app .eyebrow { color: #e4b52d; }
.client-app .btn-primary { border-radius: 12px; }
.tracking-panel,
.client-app .panel,
.client-app .tracking-details,
.client-app .tracking-order-switcher {
    border-color: #302d26;
    background: #141414;
    color: #f7f4ec;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}
.tracking-heading,
.tracking-order-switcher { border-color: #302d26; }
.tracking-heading h2,
.section-heading h2,
.tracking-details h3 { color: #f7f4ec; }
.client-order-card {
    border-color: #302d26;
    background: #101010;
    color: #f0eadb;
}
.client-order-card:hover,
.client-order-card.is-selected {
    border-color: #8d6a16;
    background: #211b0c;
    box-shadow: 0 0 0 2px rgba(216, 165, 29, .08);
}
.client-order-icon { background: #302719; color: #f3d47a; }
.client-order-copy strong { color: #f0eadb; }
.client-order-copy small,
.client-order-empty { color: #aaa69b; }
.client-order-empty { border-color: #51462c; }
.client-order-status { color: #f3d47a; }
.status-badge { background: #302719; color: #f3d47a; }
.status-badge.is-delivered { background: #102518; color: #9be7b2; }
.timeline-step { color: #77736a; }
.timeline-step:not(:last-child)::before { background: #38352e; }
.timeline-marker { border-color: #51462c; background: #141414; }
.timeline-step.is-complete { color: #e8dfc7; }
.timeline-cancelled { color: #ffb7af; }
.timeline-cancelled small { color: #aaa69b; }
.map-notice { color: #aaa69b; }
.waiting-modal {
    border-color: #51462c;
    background: linear-gradient(155deg, #191919 55%, #211b0c);
    color: #f7f4ec;
}
.waiting-modal h2 { color: #f7f4ec; }
.waiting-modal > p { color: #c9c4b8; }
.waiting-modal-close { background: #302719; color: #f3d47a; }
.waiting-countdown {
    border-color: #51462c;
    background: linear-gradient(110deg, #211b0c, #141414);
}
.waiting-countdown span { color: #c9c4b8; }
.waiting-countdown strong { color: #f3d47a; }
.waiting-modal.has-price-offer {
    border-color: #275638;
    background: linear-gradient(155deg, #191919 48%, #102518);
}
.waiting-modal.has-price-offer .waiting-countdown {
    border-color: #275638;
    background: linear-gradient(110deg, #102518, #141414);
}
.live-indicator,
.tracking-empty p,
.tracking-price,
.client-app label,
.tracking-route,
.delivery-proof { color: #c9c4b8; }
.live-indicator .is-offline,
#tracking-updated.is-offline { color: #ffb86b; }
.client-stats .stat-card,
.client-app .panel { border-color: #302d26; }
.client-stats .stat-card span { color: #aaa69b; }
.client-stats .stat-card strong { color: #f3d47a; }
.client-app input,
.client-app select,
.client-app textarea {
    border-color: #38352e;
    background: #0c0c0c;
    color: #f7f4ec;
}
.client-app input:focus,
.client-app select:focus,
.client-app textarea:focus { border-color: #d8a51d; outline-color: rgba(216, 165, 29, .14); }
.client-app input::placeholder,
.client-app textarea::placeholder { color: #77736a; }
.client-price-offer,
.driver-card {
    border-color: #51462c;
    background: #1b170d;
    color: #f0eadb;
}
.client-price-offer p,
.driver-card-copy span { color: #aaa69b; }
.driver-avatar { background: #302719; color: #f3d47a; }
.tracking-order-switcher button {
    border-color: #51462c;
    background: #19160f;
    color: #c9c4b8;
}
.tracking-order-switcher button.is-selected {
    border-color: #d8a51d;
    background: #302719;
    color: #f3d47a;
}
.profile-settings-trigger:focus-visible,
.client-app .btn:focus-visible { outline-color: rgba(216, 165, 29, .35); }

.profile-modal-backdrop {
    background: rgba(0, 0, 0, .78);
    overscroll-behavior: contain;
}
.profile-modal {
    border-color: #51462c;
    background: #141414;
    color: #f7f4ec;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .65);
    scrollbar-color: #51462c #141414;
}
.profile-modal h2 { color: #f7f4ec; }
.profile-modal-close {
    background: #241d0d;
    color: #f3d47a;
}
.profile-photo-editor,
.profile-password-fields {
    border-color: #38352e;
    background: #101010;
}
.profile-photo-preview {
    background: linear-gradient(135deg, #302719, #1b1b1b);
    color: #f3d47a;
}
.profile-photo-picker,
.profile-settings-fields label,
.profile-password-fields label { color: #d4cdbd; }
.profile-photo-picker input,
.profile-settings-fields input,
.profile-password-fields input {
    border-color: #38352e;
    background: #0c0c0c;
    color: #f7f4ec;
}
.profile-photo-picker small,
.profile-password-fields small { color: #aaa69b; }
.profile-password-fields summary { color: #f3d47a; }

@media (max-width: 600px) {
    .profile-modal-backdrop {
        align-items: flex-start;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }
    .profile-modal {
        width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
        padding: 23px 16px 16px;
        border-radius: 18px;
        overscroll-behavior: contain;
    }
    .profile-modal-close { top: 11px; right: 11px; }
    .profile-modal h2 { max-width: calc(100% - 38px); font-size: 21px; }
    .profile-modal > .muted-copy { margin-bottom: 16px; font-size: 12px; }
    .profile-settings-form { gap: 14px; }
    .profile-photo-editor { gap: 12px; padding: 12px; }
    .profile-photo-preview { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; }
    .profile-photo-picker input { min-width: 0; max-width: 100%; font-size: 10px; }
    .profile-settings-fields,
    .profile-password-fields { gap: 11px; }
    .profile-settings-fields input,
    .profile-password-fields input { min-height: 46px; font-size: 16px; }
    .profile-settings-actions { position: sticky; bottom: -16px; padding: 10px 0 max(0px, env(safe-area-inset-bottom)); background: #141414; }
    .profile-settings-actions .btn { min-height: 46px; }
}

@media (max-width: 380px) {
    .profile-photo-editor { align-items: flex-start; flex-direction: column; }
    .profile-photo-picker { width: 100%; }
}