@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
    --driver-blue: #204ea9;
    --driver-primary-dark: #102f73;
    --driver-dark: #07111f;
    --driver-text: #101828;
    --driver-muted: #667085;
    --driver-icon-muted: #98a2b3;
    --driver-soft: #eaf1ff;
    --driver-background: #f5f7fb;
    --driver-input: #f1f4f9;
    --driver-border: #e4e9f2;
    --driver-success: #12a66a;
    --driver-success-soft: #e8f8f0;
    --driver-warning: #e88700;
    --driver-warning-soft: #fff3df;
    --driver-danger: #d92d20;
    --driver-danger-soft: #feeceb;
}

.driver-site,
.driver-auth-shell,
.driver-portal,
.driver-site button,
.driver-site input,
.driver-auth-shell button,
.driver-auth-shell input,
.driver-portal button,
.driver-portal input {
    font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Landing: conserve la chaleur marketing avec les composants de l'app. */
.driver-site {
    color: var(--driver-text);
}

.driver-nav a {
    font-weight: 700;
}

.driver-login-link,
.driver-primary,
.driver-secondary,
.driver-light,
.driver-outline {
    border-radius: 13px;
}

.driver-primary,
.driver-secondary,
.driver-light,
.driver-outline {
    font-weight: 800;
}

.driver-hero h1,
.driver-section > h2,
.driver-plus-section h2,
.driver-final h2 {
    font-weight: 700;
}

.driver-hero h1,
.driver-app-float strong {
    color: var(--driver-text);
}

.driver-hero-copy > p,
.driver-feature-grid p,
.driver-plus-section p,
.driver-site footer {
    color: var(--driver-muted);
}

.driver-feature-grid article {
    border-color: var(--driver-border);
    border-radius: 18px;
}

.driver-feature-grid h3 {
    font-weight: 800;
}

.driver-feature-grid i,
.driver-app-float-icon {
    color: var(--driver-blue);
    background: var(--driver-soft);
}

.driver-feature-grid article:nth-child(2) i,
.driver-feature-grid article:nth-child(5) i {
    color: var(--driver-warning);
    background: var(--driver-warning-soft);
}

.driver-visual-chip {
    color: var(--driver-warning);
    background: var(--driver-warning-soft);
}

.driver-progress-card {
    color: var(--driver-text);
    border-radius: 20px;
}

.driver-progress-card > i {
    height: 10px;
    border-radius: 999px;
    background: var(--driver-input);
}

.driver-progress-card > i span {
    border-radius: 999px;
}

.driver-progress-card article {
    border-radius: 13px;
    background: var(--driver-warning-soft);
}

/* Auth: mêmes champs, segments et états que l'application mobile. */
.driver-auth-shell {
    color: var(--driver-text);
}

.driver-auth-heading h1,
.driver-auth-marketing-copy h2 {
    font-weight: 700;
}

.driver-auth-tabs {
    gap: 6px;
    padding: 6px;
    border: 0;
    border-radius: 14px;
    background: var(--driver-input);
}

.driver-auth-tabs a {
    min-height: 38px;
    padding: 9px;
    border-radius: 10px;
    color: var(--driver-muted);
    font-size: 14px;
    font-weight: 700;
}

.driver-auth-tabs a.is-active {
    color: var(--driver-blue);
    background: #fff;
}

.driver-auth-form label > span {
    color: var(--driver-text);
}

.driver-auth-input {
    border-color: var(--driver-border);
    border-radius: 13px;
}

.driver-auth-input > i,
.driver-auth-input input::placeholder {
    color: var(--driver-icon-muted);
}

.driver-auth-input input {
    color: var(--driver-text);
    font-size: 14px;
}

.driver-auth-form > button {
    border-radius: 13px;
    font-size: 14px;
    font-weight: 800;
}

.driver-auth-form > button:hover {
    background: var(--driver-primary-dark);
}

.driver-otp-intro {
    border: 1px solid #c8daff;
    border-radius: 12px;
    background: var(--driver-soft);
}

.driver-auth-error {
    color: var(--driver-danger);
    background: var(--driver-danger-soft);
}

.driver-auth-success {
    color: var(--driver-success);
    background: var(--driver-success-soft);
}

.driver-auth-app-link {
    border-color: var(--driver-border);
}

/* Portail web: reprend les cartes et métriques du dashboard natif. */
.driver-portal {
    color: var(--driver-text);
    background: var(--driver-background);
}

.driver-portal header,
.driver-kpis article,
.driver-card,
.driver-rating {
    border-color: var(--driver-border);
}

.driver-welcome h1 {
    font-weight: 700;
}

.driver-welcome > b,
.driver-card-title > b {
    border-radius: 999px;
    color: var(--driver-blue);
    background: var(--driver-soft);
}

.driver-card-title h2 {
    font-weight: 800;
}

.driver-progress {
    height: 10px;
    border-radius: 999px;
    background: var(--driver-input);
}

.driver-progress i {
    border-radius: 999px;
}

.driver-app-banner a {
    border-radius: 13px;
    font-weight: 800;
}

@media (max-width: 520px) {
    .driver-auth-heading h1 {
        font-size: 28px;
        letter-spacing: -.8px;
    }

    .driver-auth-tabs a {
        font-size: 13px;
    }
}

/* Web-app Driver: mêmes repères visuels que l'app Expo, avec une densité desktop adaptée. */
.driver-webapp {
    min-height: 100vh;
    color: var(--driver-text);
    background: var(--driver-background);
    font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.driver-webapp *,
.driver-webapp *::before,
.driver-webapp *::after {
    box-sizing: border-box;
}

.driver-webapp button,
.driver-webapp input {
    font: inherit;
}

.driver-web-header {
    position: sticky;
    z-index: 50;
    top: 0;
    display: grid;
    grid-template-columns: 210px 1fr 210px;
    align-items: center;
    min-height: 72px;
    padding: 0 max(24px, calc((100vw - 1240px) / 2));
    border-bottom: 1px solid var(--driver-border);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
}

.driver-web-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    color: var(--driver-primary-dark);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
}

.driver-web-brand img {
    width: 120px;
    height: 32px;
    object-fit: contain;
}

.driver-web-brand span {
    padding-left: 10px;
    border-left: 1px solid var(--driver-border);
}

.driver-web-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    align-self: stretch;
    gap: 6px;
}

.driver-web-nav button,
.driver-bottom-nav button {
    border: 0;
    color: var(--driver-icon-muted);
    background: transparent;
    cursor: pointer;
}

.driver-web-nav button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 600;
}

.driver-web-nav button::after {
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: transparent;
    content: "";
}

.driver-web-nav button.is-active {
    color: var(--driver-blue);
}

.driver-web-nav button.is-active::after {
    background: var(--driver-blue);
}

.driver-web-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.driver-web-header-actions > a,
.driver-web-header-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid var(--driver-border);
    border-radius: 11px;
    color: var(--driver-blue);
    background: #fff;
    text-decoration: none;
    cursor: pointer;
}

.driver-web-header-actions > a {
    gap: 7px;
    padding: 0 13px;
    font-size: 11px;
    font-weight: 700;
}

.driver-web-header-actions form {
    margin: 0;
}

.driver-web-header-actions button {
    width: 38px;
    color: var(--driver-muted);
}

.driver-web-main {
    width: min(100% - 40px, 1120px);
    margin: 0 auto;
    padding: 34px 0 80px;
}

.driver-web-page {
    display: grid;
    gap: 18px;
}

.driver-web-page[hidden] {
    display: none !important;
}

.driver-webapp [hidden] {
    display: none !important;
}

.driver-home-heading,
.driver-page-heading,
.driver-section-heading,
.driver-trip-top,
.driver-trip-footer,
.driver-acquisition-card > div:first-child,
.driver-acquisition-card > div:nth-of-type(2) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.driver-home-heading h1,
.driver-page-heading h1 {
    margin: 4px 0 3px;
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.08;
    letter-spacing: -.7px;
}

.driver-home-heading p,
.driver-page-heading p {
    margin: 0;
    color: var(--driver-muted);
    font-size: 13px;
    font-weight: 500;
}

.driver-eyebrow {
    color: var(--driver-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.driver-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--driver-blue);
    background: var(--driver-soft);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.driver-badge.is-green { color: var(--driver-success); background: var(--driver-success-soft); }
.driver-badge.is-orange { color: var(--driver-warning); background: var(--driver-warning-soft); }
.driver-badge.is-gray { color: var(--driver-muted); background: var(--driver-input); }

.driver-home-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.driver-home-secondary {
    display: grid;
    gap: 12px;
}

.driver-metric {
    display: flex;
    min-height: 94px;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    color: var(--driver-text);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.driver-metric-wallet {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 200px;
}

.driver-metric-wallet strong {
    font-size: clamp(24px, 4vw, 34px);
    font-variant-numeric: tabular-nums;
}

.driver-metric-wallet strong small {
    font-size: .48em;
}

.driver-metric-wallet > span:last-child,
.driver-metric.is-compact small {
    color: var(--driver-muted);
    font-size: 11px;
    font-weight: 600;
}

.driver-metric.is-compact {
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
}

.driver-metric.is-compact > span:last-child {
    display: grid;
    gap: 4px;
}

.driver-metric.is-compact strong {
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.driver-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: var(--driver-blue);
    background: var(--driver-soft);
    font-size: 21px;
}

.driver-icon.is-large { width: 58px; height: 58px; border-radius: 20px; font-size: 26px; }
.driver-icon.is-green { color: var(--driver-success); background: var(--driver-success-soft); }
.driver-icon.is-gold { color: var(--driver-warning); background: var(--driver-warning-soft); }

.driver-section-heading h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -.3px;
}

.driver-home-overview,
.driver-list {
    display: grid;
    gap: 12px;
}

.driver-trip-card,
.driver-acquisition-card,
.driver-profile-card,
.driver-form-card,
.driver-empty-card,
.driver-payment-list,
.driver-transaction-list {
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}

.driver-trip-card,
.driver-acquisition-card,
.driver-form-card,
.driver-empty-card {
    padding: 20px;
}

.driver-trip-card {
    display: grid;
    gap: 16px;
}

.driver-trip-top > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.driver-trip-top > div:first-child {
    display: grid;
    gap: 2px;
}

.driver-trip-top strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.driver-trip-top small,
.driver-trip-footer small,
.driver-document-list small,
.driver-transaction-list small,
.driver-payment-list small,
.driver-profile-card p { display: block; color: var(--driver-muted); font-size: 10px; }
.driver-trip-top b { color: var(--driver-success); font-size: 15px; font-variant-numeric: tabular-nums; }

.driver-route {
    display: grid;
    grid-template-columns: 12px 1fr;
    align-items: center;
    gap: 7px 10px;
    font-size: 12px;
    font-weight: 600;
}

.driver-route i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--driver-blue);
}

.driver-route i:nth-of-type(2) {
    border-radius: 3px;
    background: var(--driver-dark);
}

.driver-trip-footer {
    justify-content: flex-start;
    padding-top: 13px;
    border-top: 1px solid var(--driver-border);
}

.driver-trip-footer > div { flex: 1; }
.driver-trip-footer > div strong { display: block; font-size: 13px; }
.driver-trip-footer button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--driver-blue); background: var(--driver-soft); cursor: pointer; }

.driver-avatar-small,
.driver-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: var(--driver-blue);
    font-weight: 700;
}

.driver-avatar-small { width: 36px; height: 36px; }

.driver-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.driver-quick-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-height: 130px;
    padding: 18px;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    color: var(--driver-text);
    background: #fff;
    cursor: pointer;
}

.driver-quick-grid strong { font-size: 12px; }

.driver-segments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 14px;
    background: var(--driver-input);
}

.driver-segments button {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    color: var(--driver-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.driver-segments button.is-active { color: var(--driver-blue); background: #fff; }

.driver-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    text-align: center;
}

.driver-empty-card.is-compact { min-height: 160px; }
.driver-empty-card h2 { margin: 15px 0 5px; font-size: 18px; }
.driver-empty-card p { max-width: 550px; margin: 0 0 18px; color: var(--driver-muted); font-size: 12px; line-height: 1.55; }

.driver-message-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.driver-message-toolbar h2,
.driver-message-context h2 { margin: 0; font-size: 20px; }
.driver-message-toolbar p,
.driver-message-context p { margin: 4px 0 0; color: var(--driver-muted); font-size: 11px; }

.driver-conversation-list {
    overflow: hidden;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}

.driver-conversation-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 88px;
    padding: 14px 17px;
    border: 0;
    border-bottom: 1px solid var(--driver-border);
    color: var(--driver-text);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.driver-conversation-row:last-child { border-bottom: 0; }
.driver-conversation-row:hover { background: var(--driver-input); }
.driver-conversation-row > .ti-chevron-right { color: var(--driver-muted); font-size: 18px; }

.driver-conversation-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: var(--driver-blue);
    background: var(--driver-soft);
    font-size: 22px;
}

.driver-conversation-avatar.is-support { color: var(--driver-success); background: var(--driver-success-soft); }
.driver-conversation-copy { min-width: 0; }
.driver-conversation-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.driver-conversation-copy strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.driver-conversation-copy time,
.driver-conversation-copy small { color: var(--driver-muted); font-size: 9px; }
.driver-conversation-copy p { overflow: hidden; margin: 5px 0 0; color: var(--driver-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.driver-message-context {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 18px;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}

.driver-message-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 320px;
    max-height: 520px;
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}

.driver-message-bubble {
    align-self: flex-start;
    max-width: min(76%, 620px);
    padding: 11px 14px;
    border-radius: 4px 16px 16px 16px;
    background: var(--driver-input);
}

.driver-message-bubble.is-mine {
    align-self: flex-end;
    border-radius: 16px 4px 16px 16px;
    color: #fff;
    background: var(--driver-blue);
}

.driver-message-bubble small,
.driver-message-bubble time { display: block; color: var(--driver-muted); font-size: 8px; }
.driver-message-bubble.is-mine small,
.driver-message-bubble.is-mine time { color: rgba(255,255,255,.74); }
.driver-message-bubble p { margin: 5px 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.driver-message-empty { margin: auto; color: var(--driver-muted); text-align: center; }
.driver-message-empty i { color: var(--driver-blue); font-size: 32px; }
.driver-message-empty p { font-size: 11px; }

.driver-message-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}

.driver-message-composer textarea {
    min-height: 48px;
    max-height: 130px;
    resize: vertical;
    padding: 13px 15px;
    border: 1px solid var(--driver-border);
    border-radius: 13px;
    color: var(--driver-text);
    background: var(--driver-input);
    font: inherit;
    font-size: 12px;
}

.driver-message-composer button {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: var(--driver-blue);
    font-size: 19px;
    cursor: pointer;
}

.driver-message-composer .driver-form-feedback { grid-column: 1 / -1; margin: 0; }
.driver-ticket-form { max-width: 780px; }

.driver-primary-button,
.driver-wallet-actions a,
.driver-wallet-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: var(--driver-blue);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.driver-acquisition-card {
    display: grid;
    gap: 14px;
}

.driver-acquisition-content,
.driver-acquisition-panel {
    display: grid;
    gap: 14px;
}

.driver-acquisition-tabs {
    position: sticky;
    z-index: 20;
    top: 82px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--driver-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .06);
    backdrop-filter: blur(14px);
}

.driver-acquisition-tabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 56px;
    padding: 7px 5px;
    border: 0;
    border-radius: 11px;
    color: var(--driver-muted);
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.driver-acquisition-tabs button i { font-size: 20px; }
.driver-acquisition-tabs button.is-active { color: var(--driver-blue); background: var(--driver-soft); }

.driver-schedule-card {
    overflow: hidden;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}

.driver-schedule-nav {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: 10px;
    background: var(--driver-soft);
}

.driver-schedule-nav > div { min-width: 0; text-align: center; }
.driver-schedule-nav strong { display: block; font-size: 15px; }
.driver-schedule-nav small { display: block; margin-top: 2px; color: var(--driver-muted); font-size: 10px; }
.driver-schedule-nav button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 12px; color: var(--driver-blue); background: transparent; font-size: 20px; cursor: pointer; }
.driver-schedule-nav button:disabled { color: var(--driver-icon-muted); cursor: default; opacity: .55; }

.driver-schedule-card > article {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 11px 16px;
    border-top: 1px solid var(--driver-border);
}

.driver-schedule-card > article > div { flex: 1; min-width: 0; }
.driver-schedule-card > article strong,
.driver-schedule-card > article small { display: block; }
.driver-schedule-card > article strong { font-size: 12px; }
.driver-schedule-card > article small { margin-top: 2px; color: var(--driver-muted); font-size: 10px; }
.driver-schedule-card > article b { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.driver-schedule-card > article.driver-schedule-payment { gap: 10px; }
.driver-schedule-payment > i { flex: 0 0 auto; font-size: 20px; color: var(--driver-muted); }
.driver-schedule-payment > span { display: grid; flex: 0 0 auto; gap: 6px; justify-items: end; }
.driver-schedule-payment.is-overdue { border-left: 3px solid var(--driver-danger); background: var(--driver-danger-soft); }
.driver-schedule-payment.is-overdue > i,
.driver-schedule-payment.is-overdue small,
.driver-schedule-payment.is-overdue b { color: var(--driver-danger); }
.driver-schedule-payment.is-paid { background: var(--driver-success-soft); }
.driver-schedule-payment.is-paid > i,
.driver-schedule-payment.is-paid small,
.driver-schedule-payment.is-paid b { color: var(--driver-success); }
.driver-schedule-payment.is-pending > i,
.driver-schedule-payment.is-pending small { color: var(--driver-warning); }
.driver-installment-pay {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    background: var(--driver-blue);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.driver-installment-pay:disabled { cursor: wait; opacity: .65; }
.driver-overdue-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 11px 12px;
    border: 1px solid var(--driver-danger);
    border-radius: 13px;
    color: var(--driver-danger);
    background: var(--driver-danger-soft);
}
.driver-overdue-summary > i { flex: 0 0 auto; font-size: 21px; }
.driver-overdue-summary strong,
.driver-overdue-summary small { display: block; }
.driver-overdue-summary strong { font-size: 12px; }
.driver-overdue-summary small { margin-top: 2px; color: var(--driver-muted); font-size: 10px; }
.driver-schedule-empty { margin: 0; padding: 28px 16px; color: var(--driver-muted); font-size: 11px; text-align: center; }

.driver-acquisition-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 66px;
    padding: 12px 15px;
    border-radius: 15px;
    background: var(--driver-success-soft);
}

.driver-acquisition-wallet > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.driver-acquisition-wallet i { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; color: var(--driver-success); background: #fff; font-size: 19px; }
.driver-acquisition-wallet small { color: var(--driver-muted); font-size: 11px; font-weight: 600; }
.driver-acquisition-wallet strong { flex: 0 0 auto; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.driver-acquisition-deposit { width: 100%; }

.driver-acquisition-export {
    display: grid;
    gap: 12px;
}

.driver-acquisition-export h2 { margin: 0; font-size: 16px; }
.driver-acquisition-range { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 5px; border-radius: 12px; background: var(--driver-input); }
.driver-acquisition-range.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.driver-acquisition-range button { min-height: 38px; padding: 7px; border: 0; border-radius: 9px; color: var(--driver-muted); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.driver-acquisition-range button.is-active { color: var(--driver-blue); background: #fff; }
.driver-acquisition-export .driver-primary-button { width: 100%; }
.driver-acquisition-export .driver-primary-button.is-secondary { border: 1px solid var(--driver-blue); color: var(--driver-blue); background: #fff; }
.driver-acquisition-export .driver-form-feedback { margin: 0; }

.driver-acquisition-card > div:first-child strong { font-size: 16px; }
.driver-acquisition-card > div:first-child b { color: var(--driver-blue); font-size: 24px; }
.driver-acquisition-card > div:first-child small { display: block; color: var(--driver-muted); font-size: 10px; }
.driver-acquisition-card > div:nth-of-type(2) small { color: var(--driver-muted); font-size: 10px; }

.driver-progress {
    display: block;
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: var(--driver-input);
}

.driver-progress i { display: block; height: 100%; border-radius: 999px; background: var(--driver-blue); }

.driver-due {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 13px;
    border-radius: 13px;
    color: var(--driver-warning);
    background: var(--driver-warning-soft);
}

.driver-due > i { font-size: 21px; }
.driver-due span { flex: 1; }
.driver-due small { display: block; color: var(--driver-muted); font-size: 10px; }
.driver-due strong { display: block; margin-top: 2px; color: var(--driver-text); font-size: 13px; }

.driver-contract-terms { display: grid; gap: 14px; }
.driver-contract-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.driver-contract-grid > div { min-width: 0; padding: 12px; border-radius: 12px; background: var(--driver-input); }
.driver-contract-grid small { display: block; margin-bottom: 4px; color: var(--driver-muted); font-size: 10px; }
.driver-contract-grid strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.driver-export-bar { display: grid; grid-template-columns: minmax(180px, 1fr) repeat(2, minmax(120px, .45fr)) auto; align-items: end; gap: 12px; }
.driver-export-bar h2 { margin: 0; font-size: 16px; }
.driver-export-bar p { margin: 4px 0 0; color: var(--driver-muted); font-size: 10px; }
.driver-export-bar label span { display: block; margin-bottom: 5px; color: var(--driver-muted); font-size: 10px; }
.driver-export-bar input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--driver-border); border-radius: 12px; background: #fff; }
.driver-export-bar .driver-form-feedback { grid-column: 1 / -1; margin: 0; }

@media (max-width: 760px) {
    .driver-export-bar { grid-template-columns: 1fr 1fr; }
    .driver-export-bar > div,
    .driver-export-bar > button { grid-column: 1 / -1; }
}

.driver-vehicle-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 220px;
    padding: 24px;
    border-radius: 20px;
    color: #fff;
    background-color: var(--driver-primary-dark);
    background-position: center;
    background-size: cover;
}

.driver-vehicle-hero h2 { margin: 0; font-size: 25px; }
.driver-vehicle-hero p { margin: 4px 0 0; color: rgba(255,255,255,.8); font-size: 11px; }

.driver-wallet-balance {
    display: grid;
    gap: 7px;
    padding: 28px;
    border-radius: 20px;
    color: #fff;
    background: var(--driver-primary-dark);
}

.driver-wallet-balance small,
.driver-wallet-balance span { color: #b8c8ed; font-size: 11px; }
.driver-wallet-balance strong { font-size: clamp(27px, 4vw, 38px); font-variant-numeric: tabular-nums; }

.driver-wallet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.driver-wallet-actions a.is-secondary,
.driver-wallet-actions button.is-secondary { border: 1px solid var(--driver-blue); color: var(--driver-blue); background: #fff; }

.driver-wallet-section-heading {
    margin: 22px 0 10px;
}

.driver-wallet-operation { margin-top: 12px; }
.driver-wallet-operation > .driver-primary-button { width: 100%; margin-top: 14px; }
.driver-wallet-operation > .driver-primary-button:disabled { cursor: wait; opacity: .65; }
.driver-wallet-operation > .driver-primary-button.is-loading::before {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    content: '';
    animation: driver-spin .75s linear infinite;
}
.driver-wallet-operation > .driver-primary-button.is-loading > i { display: none; }
.driver-wallet-method { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--driver-border); border-radius: 13px; background: var(--driver-input); }
.driver-wallet-method strong,
.driver-wallet-method small { display: block; }
.driver-wallet-method strong { font-size: 12px; }
.driver-wallet-method small { margin-top: 2px; color: var(--driver-muted); font-size: 10px; }
.driver-wallet-methods { padding: 13px; border: 1px solid var(--driver-border); border-radius: 13px; background: var(--driver-input); }
.driver-wallet-methods > strong,
.driver-wallet-methods > small { display: block; }
.driver-wallet-methods > strong { margin-bottom: 10px; font-size: 12px; }
.driver-wallet-methods > small { margin-top: 9px; color: var(--driver-muted); font-size: 10px; }
.driver-wallet-methods > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.driver-wallet-methods article { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--driver-border); border-radius: 10px; background: #fff; }
.driver-wallet-methods img { width: 42px; height: 30px; flex: 0 0 auto; object-fit: contain; }
.driver-wallet-methods article span { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.driver-money-input { display: flex; align-items: center; overflow: hidden; border: 1px solid var(--driver-border); border-radius: 13px; background: #fff; }
.driver-money-input input { flex: 1; border: 0 !important; border-radius: 0 !important; font-size: 24px !important; font-weight: 700; }
.driver-money-input b, .driver-money-input span { padding: 0 14px; color: var(--driver-muted); font-size: 11px; }

.driver-transaction-list,
.driver-payment-list { overflow: hidden; }
.driver-transaction-list article,
.driver-payment-list article,
.driver-document-list label {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--driver-border);
}
.driver-transaction-list article:last-child,
.driver-payment-list article:last-child,
.driver-document-list label:last-child { border-bottom: 0; }
.driver-transaction-list article > div,
.driver-payment-list article > div,
.driver-document-list label > span:nth-of-type(2) { flex: 1; }
.driver-transaction-list strong,
.driver-payment-list strong,
.driver-document-list strong { display: block; font-size: 12px; }
.driver-transaction-list b,
.driver-payment-list b { font-size: 12px; font-variant-numeric: tabular-nums; }
.driver-transaction-list b.is-credit { color: var(--driver-success); }
.driver-transaction-list b.is-debit { color: var(--driver-warning); }

.driver-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.driver-profile-avatar { overflow: hidden; width: 62px; height: 62px; font-size: 20px; }
.driver-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.driver-profile-card > div:nth-child(2) { flex: 1; }
.driver-profile-card h2 { margin: 0; font-size: 19px; }
.driver-profile-card p { margin: 4px 0 8px; }

.driver-account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.driver-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px 0;
}

.driver-form-grid label { display: grid; gap: 6px; }
.driver-form-grid .is-wide { grid-column: 1 / -1; }
.driver-form-grid label > span { font-size: 10px; font-weight: 700; }
.driver-form-grid input,
.driver-form-grid select,
.driver-form-grid textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--driver-border);
    border-radius: 12px;
    outline: none;
    color: var(--driver-text);
    background: #fff;
    font-size: 12px;
}
.driver-form-grid select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--driver-muted) 50%), linear-gradient(135deg, var(--driver-muted) 50%, transparent 50%); background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px; background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; }
.driver-form-grid textarea { padding: 12px; resize: vertical; font: inherit; }
.driver-form-grid input:focus,
.driver-form-grid select:focus,
.driver-form-grid textarea:focus { border-color: var(--driver-blue); box-shadow: 0 0 0 3px rgba(32,78,169,.1); outline: none; }

.driver-account-menu {
    overflow: hidden;
    max-width: 760px;
    border: 1px solid var(--driver-border);
    border-radius: 18px;
    background: #fff;
}
.driver-account-menu button {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 72px;
    padding: 13px 16px;
    border: 0;
    border-bottom: 1px solid var(--driver-border);
    text-align: left;
    background: #fff;
    cursor: pointer;
}
.driver-account-menu button:last-child { border-bottom: 0; }
.driver-account-menu button:hover { background: var(--driver-input); }
.driver-account-menu button > span:nth-child(2) { flex: 1; }
.driver-account-menu strong { display: block; font-size: 13px; }
.driver-account-menu small { display: block; margin-top: 3px; color: var(--driver-muted); font-size: 10px; }
.driver-account-menu button > i { color: var(--driver-muted); font-size: 18px; }
.driver-account-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 8px 0;
    border: 0;
    color: var(--driver-blue);
    background: transparent;
    font-weight: 700;
    cursor: pointer;
}
.driver-account-sections { display: grid; gap: 14px; }
.driver-account-sections > .driver-primary-button { justify-self: start; min-width: 260px; }
.driver-section-heading p { margin: 4px 0 0; color: var(--driver-muted); font-size: 10px; }
.driver-password-form { max-width: 620px; }

.driver-document-list { overflow: hidden; margin-top: 16px; border: 1px solid var(--driver-border); border-radius: 15px; }
.driver-document-list label { position: relative; cursor: pointer; }
.driver-document-list input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.driver-document-list b { color: var(--driver-blue); font-size: 10px; }

.driver-form-feedback { margin: 12px 0; padding: 10px 12px; border-radius: 10px; color: var(--driver-muted); background: var(--driver-input); font-size: 11px; }
.driver-form-feedback.is-success { color: var(--driver-success); background: var(--driver-success-soft); }
.driver-form-feedback.is-error { color: var(--driver-danger); background: var(--driver-danger-soft); }

.driver-web-sync {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 12px;
    color: var(--driver-warning);
    background: var(--driver-warning-soft);
    font-size: 11px;
}
.driver-web-sync span { flex: 1; color: var(--driver-muted); }
.driver-web-sync button { border: 0; color: var(--driver-blue); background: transparent; font-size: 11px; font-weight: 700; cursor: pointer; }

.driver-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    color: var(--driver-muted);
    font-size: 11px;
}
.driver-loading span { width: 17px; height: 17px; border: 2px solid var(--driver-border); border-top-color: var(--driver-blue); border-radius: 50%; animation: driver-spin .75s linear infinite; }
@keyframes driver-spin { to { transform: rotate(360deg); } }

.driver-bottom-nav,
.driver-back-mobile { display: none; }

@media (max-width: 820px) {
    .driver-web-header { grid-template-columns: 1fr auto; padding: 0 20px; }
    .driver-web-nav { display: none; }
    .driver-web-header-actions > a span { display: none; }
    .driver-account-grid { grid-template-columns: 1fr; }
    .driver-quick-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .driver-web-header {
        position: static;
        display: flex;
        justify-content: center;
        min-height: 86px;
        padding: 16px 20px 10px;
        border-bottom: 0;
        background: var(--driver-background);
    }
    .driver-web-brand span,
    .driver-web-header-actions { display: none; }
    .driver-web-brand img { width: 132px; height: 34px; }
    .driver-webapp:not([data-active-section="home"]) .driver-web-header { display: none; }
    .driver-web-main { width: min(100% - 30px, 560px); padding: 8px 0 104px; }
    .driver-webapp:not([data-active-section="home"]) .driver-web-main { padding-top: 18px; }
    .driver-web-page { gap: 14px; }
    .driver-home-heading { align-items: flex-start; }
    .driver-home-heading h1,
    .driver-page-heading h1 { font-size: 25px; }
    .driver-home-heading p,
    .driver-page-heading p { font-size: 12px; }
    .driver-home-metrics { gap: 8px; }
    .driver-home-secondary { gap: 8px; }
    .driver-metric-wallet { min-height: 194px; }
    .driver-metric-wallet strong { font-size: 25px; }
    .driver-metric.is-compact { min-height: 93px; padding: 12px; }
    .driver-metric.is-compact .driver-icon { width: 44px; height: 44px; }
    .driver-trip-card,
    .driver-acquisition-card,
    .driver-form-card,
    .driver-empty-card { padding: 16px; }
    .driver-quick-grid { gap: 9px; }
    .driver-quick-grid button { min-height: 132px; }
    .driver-page-heading { flex-direction: row-reverse; justify-content: flex-end; }
    .driver-back-mobile { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; color: var(--driver-text); background: transparent; font-size: 25px; cursor: pointer; }
    .driver-acquisition-tabs { top: 8px; }
    .driver-acquisition-tabs button { min-height: 54px; font-size: 9px; }
    .driver-acquisition-tabs button i { font-size: 19px; }
    .driver-vehicle-hero { min-height: 150px; padding: 17px; }
    .driver-vehicle-hero h2 { font-size: 19px; }
    .driver-wallet-balance { padding: 22px; }
    .driver-form-grid { grid-template-columns: 1fr; }
    .driver-form-grid .is-wide { grid-column: auto; }
    .driver-profile-card { align-items: flex-start; }
    .driver-profile-card > .driver-badge { font-size: 9px; }
    .driver-bottom-nav {
        position: fixed;
        z-index: 60;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        min-height: 72px;
        padding: 8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border-top: 1px solid var(--driver-border);
        background: rgba(255,255,255,.98);
        box-shadow: 0 -7px 20px rgba(16,24,40,.05);
    }
    .driver-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 600; }
    .driver-bottom-nav button i { font-size: 22px; }
    .driver-bottom-nav button.is-active { color: var(--driver-blue); font-weight: 700; }
}

@media (max-width: 390px) {
    .driver-web-main { width: min(100% - 22px, 560px); }
    .driver-metric.is-compact { gap: 8px; padding: 9px; }
    .driver-metric.is-compact .driver-icon { width: 38px; height: 38px; }
    .driver-metric.is-compact strong { font-size: 16px; }
    .driver-quick-grid button { padding: 12px; }
}