:root {
    --bg:
        #f6f2ec;

    --card:
        #fffdfb;

    --card-alt:
        #faf7f2;

    --text:
        #302b27;

    --muted:
        #877e76;

    --line:
        #e4d9ce;

    --brown:
        #846d5b;

    --green:
        #7f937b;

    --green-soft:
        #eaf1e7;

    --sand:
        #b89e70;

    --sand-soft:
        #f4eddc;

    --danger-soft:
        #f6e4de;

    --shadow:
        0 14px 40px
        rgba(
            70,
            54,
            42,
            0.065
        );
}


* {
    box-sizing:
        border-box;
}


html,
body {
    margin:
        0;

    min-height:
        100%;

    background:
        var(--bg);

    color:
        var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Inter,
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


body {
    padding:
        calc(
            18px
            + env(
                safe-area-inset-top
            )
        )
        17px
        calc(
            28px
            + env(
                safe-area-inset-bottom
            )
        );
}


button {
    font:
        inherit;
}


.shell {
    width:
        min(
            100%,
            720px
        );

    margin:
        0 auto;
}


.hidden {
    display:
        none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        18px;

    margin:
        7px
        2px
        29px;
}


.eyebrow,
.section-kicker,
.small-label {
    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    color:
        var(--brown);
}


h1 {
    margin:
        5px
        0
        9px;

    font-size:
        28px;

    line-height:
        1.08;

    letter-spacing:
        -.038em;
}


.badge-row {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;
}


.role-badge,
.dev-badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        5px 10px;

    border-radius:
        999px;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .04em;
}


.role-badge {
    background:
        #eae1d7;

    color:
        var(--brown);
}


.dev-badge {
    background:
        var(--sand-soft);

    color:
        #92733e;
}


.logo {
    width:
        57px;

    height:
        57px;

    flex:
        0 0 57px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        20px;

    background:
        var(--text);

    color:
        white;

    font-size:
        15px;

    font-weight:
        850;

    letter-spacing:
        -.02em;

    box-shadow:
        var(--shadow);
}


/* =========================================================
   STATE
   ========================================================= */

.state-card {
    padding:
        32px
        23px;

    border:
        1px solid
        var(--line);

    border-radius:
        27px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);

    text-align:
        center;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        8px;
}


.state-card span {
    color:
        var(--muted);

    font-size:
        13px;
}


.state-card.error {
    background:
        var(--danger-soft);
}


.error-icon {
    width:
        37px;

    height:
        37px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        5px;

    border-radius:
        13px;

    background:
        #b77663;

    color:
        white;

    font-weight:
        850;
}


.spinner {
    width:
        29px;

    height:
        29px;

    margin-bottom:
        7px;

    border:
        3px solid
        var(--line);

    border-top-color:
        var(--brown);

    border-radius:
        999px;

    animation:
        spin
        .75s
        linear
        infinite;
}


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


/* =========================================================
   SECTIONS
   ========================================================= */

.section-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;

    margin:
        0
        2px
        13px;
}


.section-head.second {
    margin-top:
        31px;
}


.section-head h2 {
    margin:
        4px
        0
        0;

    font-size:
        20px;

    line-height:
        1.15;

    letter-spacing:
        -.025em;
}


.status-dot {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--muted);

    font-size:
        11px;
}


.status-dot span {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);
}


/* =========================================================
   KPI
   ========================================================= */

.kpi-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;
}


.kpi-card {
    min-height:
        125px;

    padding:
        18px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid
        var(--line);

    border-radius:
        24px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.kpi-card.green {
    background:
        var(--green-soft);
}


.kpi-card.sand {
    background:
        var(--sand-soft);
}


.kpi-label,
.kpi-note {
    color:
        var(--muted);
}


.kpi-label {
    font-size:
        12px;

    font-weight:
        650;
}


.kpi-note {
    font-size:
        10px;
}


.kpi-value {
    font-size:
        33px;

    line-height:
        1;

    letter-spacing:
        -.045em;
}


/* =========================================================
   BALANCE
   ========================================================= */

.balance-card {
    margin-top:
        11px;

    padding:
        22px;

    min-height:
        115px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    background:
        var(--card);

    border:
        1px solid
        var(--line);

    border-radius:
        27px;

    box-shadow:
        var(--shadow);
}


.balance-value {
    margin:
        7px
        0
        5px;

    font-size:
        29px;

    font-weight:
        780;

    letter-spacing:
        -.04em;
}


.balance-icon {
    width:
        49px;

    height:
        49px;

    flex:
        0 0 49px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        #eee5dc;

    color:
        var(--brown);

    font-size:
        19px;

    font-weight:
        850;
}


.subtle {
    color:
        var(--muted);

    font-size:
        11px;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.action-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;
}


.action-card {
    min-height:
        113px;

    padding:
        16px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    border:
        1px solid
        var(--line);

    border-radius:
        23px;

    background:
        var(--card);

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(
            70,
            54,
            42,
            .045
        );

    transition:
        transform
        .12s ease,
        background
        .12s ease;
}


.action-card:active {
    transform:
        scale(
            .975
        );

    background:
        var(--card-alt);
}


.action-card strong {
    margin-bottom:
        4px;

    font-size:
        14px;
}


.action-card > span:last-child {
    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.3;
}


.action-icon {
    margin-bottom:
        10px;

    font-size:
        21px;
}


/* =========================================================
   OWNER
   ========================================================= */

.owner-card {
    margin-top:
        25px;

    padding:
        20px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        17px;

    border:
        1px solid
        var(--line);

    border-radius:
        25px;

    background:
        #eee5dc;
}


.owner-card strong {
    display:
        block;

    margin-top:
        6px;

    font-size:
        15px;
}


.owner-card p {
    max-width:
        360px;

    margin:
        5px
        0
        0;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.4;
}


.owner-button {
    min-height:
        40px;

    padding:
        0 13px;

    flex:
        0 0 auto;

    border:
        none;

    border-radius:
        14px;

    background:
        var(--text);

    color:
        white;

    font-size:
        11px;

    font-weight:
        700;
}


/* =========================================================
   DRIVER
   ========================================================= */

.current-trip {
    padding:
        24px;

    border:
        1px solid
        var(--line);

    border-radius:
        28px;

    background:
        var(--green-soft);

    box-shadow:
        var(--shadow);
}


.current-trip h2 {
    margin:
        9px
        0
        6px;

    font-size:
        23px;

    letter-spacing:
        -.03em;
}


.current-trip p {
    margin:
        0;
}


.driver-buttons {
    display:
        grid;

    gap:
        9px;

    margin-top:
        11px;
}


.driver-buttons button {
    min-height:
        58px;

    border-radius:
        20px;

    font-size:
        13px;

    font-weight:
        750;

    cursor:
        pointer;
}


.driver-primary {
    border:
        1px solid
        var(--text);

    background:
        var(--text);

    color:
        white;
}


.driver-secondary {
    border:
        1px solid
        var(--line);

    background:
        var(--card);

    color:
        var(--text);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    margin:
        35px
        0
        6px;

    color:
        #aaa096;

    font-size:
        9px;

    text-align:
        center;

    letter-spacing:
        .06em;
}


/* =========================================================
   DESKTOP / TABLET
   ========================================================= */

@media (
    min-width:
        600px
) {

    .kpi-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }


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

}


/* =========================================================
   MINIAPP TRIPS V0.2
   ========================================================= */

.page-toolbar {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 17px;
}

.page-toolbar h2 {
    margin: 4px 0 0;
    font-size: 22px;
    letter-spacing: -.03em;
}

.back-button {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    border: 1px solid var(--line);
    border-radius: 15px;

    background: var(--card);
    color: var(--text);

    font-size: 21px;
    cursor: pointer;
}

.trip-filter-card {
    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 23px;

    background: var(--card);
    box-shadow: var(--shadow);
}

.search-input {
    width: 100%;
    height: 47px;

    padding: 0 15px;

    border: 1px solid var(--line);
    border-radius: 16px;

    outline: none;

    background: var(--card-alt);
    color: var(--text);

    font: inherit;
    font-size: 13px;
}

.search-input:focus {
    border-color: #cbb8a7;
}

.filter-chips {
    display: flex;
    gap: 7px;

    margin-top: 11px;

    overflow-x: auto;
    scrollbar-width: none;
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    min-height: 34px;
    padding: 0 13px;

    flex: 0 0 auto;

    border: 1px solid var(--line);
    border-radius: 999px;

    background: var(--card);
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.filter-chip.active {
    background: var(--text);
    border-color: var(--text);
    color: white;
}

.trip-list-head {
    margin: 18px 3px 9px;

    color: var(--muted);

    font-size: 11px;
}

.trips-list {
    display: grid;
    gap: 9px;
}

.trip-row {
    width: 100%;

    padding: 16px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 14px;

    border: 1px solid var(--line);
    border-radius: 21px;

    background: var(--card);
    color: var(--text);

    text-align: left;
    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(70, 54, 42, .04);
}

.trip-row:active {
    transform: scale(.987);
}

.trip-main {
    min-width: 0;
}

.trip-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.trip-number {
    font-size: 14px;
    font-weight: 800;
}

.trip-route {
    color: var(--brown);
    font-size: 11px;
    font-weight: 700;
}

.trip-driver {
    margin-top: 8px;

    font-size: 13px;
    font-weight: 650;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trip-meta {
    margin-top: 5px;

    color: var(--muted);
    font-size: 10px;
}

.trip-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.trip-money {
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;

    min-height: 26px;
    padding: 0 9px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 800;
}

.status-pill.started {
    background: var(--sand-soft);
    color: #8a6a38;
}

.status-pill.completed {
    background: var(--green-soft);
    color: #667c62;
}

.status-pill.other {
    background: #eee8e2;
    color: var(--muted);
}

.ocr-mini {
    margin-left: 3px;

    font-size: 9px;
    color: var(--muted);
}

.list-empty {
    padding: 28px 18px;

    border: 1px dashed var(--line);
    border-radius: 22px;

    color: var(--muted);
    text-align: center;
    font-size: 12px;
}

.trip-detail {
    margin-top: 12px;
}

.trip-detail-card {
    padding: 21px;

    border: 1px solid var(--line);
    border-radius: 26px;

    background: var(--card);
    box-shadow: var(--shadow);
}

.trip-detail-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.trip-detail-title h3 {
    margin: 5px 0 0;

    font-size: 22px;
    letter-spacing: -.03em;
}

.detail-grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 9px;

    margin-top: 19px;
}

.detail-item {
    padding: 13px;

    border-radius: 17px;
    background: var(--card-alt);
}

.detail-item span {
    display: block;

    color: var(--muted);
    font-size: 9px;
    margin-bottom: 5px;
}

.detail-item strong {
    font-size: 12px;
}

.detail-close {
    margin-top: 14px;
    width: 100%;
    min-height: 45px;

    border: none;
    border-radius: 16px;

    background: var(--text);
    color: white;

    font-weight: 750;
    cursor: pointer;
}

.trip-loading {
    padding: 30px 15px;

    color: var(--muted);
    font-size: 12px;
    text-align: center;
}


/* =========================================================
   MINIAPP DRIVERS V0.3
   ========================================================= */

.driver-filter-card {
    padding: 15px;

    border: 1px solid var(--line);
    border-radius: 23px;

    background: var(--card);
    box-shadow: var(--shadow);
}


.driver-list-head {
    margin: 18px 3px 9px;

    color: var(--muted);

    font-size: 11px;
}


.drivers-list {
    display: grid;
    gap: 9px;
}


.driver-row {
    width: 100%;

    padding: 16px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 14px;

    border:
        1px solid var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(
            70,
            54,
            42,
            .04
        );
}


.driver-row:active {
    transform:
        scale(.987);
}


.driver-row-main {
    min-width: 0;
}


.driver-name-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.driver-name {
    font-size: 14px;
    font-weight: 800;
}


.driver-active-dot {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding:
        0 8px;

    border-radius:
        999px;

    background:
        var(--green-soft);

    color:
        #647a60;

    font-size: 9px;

    font-weight: 800;
}


.driver-contact {
    margin-top: 7px;

    color:
        var(--muted);

    font-size: 10px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.driver-stats-line {
    margin-top: 7px;

    color:
        var(--muted);

    font-size: 10px;
}


.driver-row-side {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    justify-content: space-between;

    gap: 10px;
}


.driver-balance-mini {
    font-size: 13px;

    font-weight: 850;

    white-space:
        nowrap;
}


.driver-arrow {
    color:
        #a79789;

    font-size: 17px;
}


.driver-detail {
    margin-top: 12px;
}


.driver-detail-card {
    padding: 21px;

    border:
        1px solid var(--line);

    border-radius:
        27px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.driver-detail-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;
}


.driver-detail-header h3 {
    margin:
        5px 0 4px;

    font-size:
        23px;

    letter-spacing:
        -.035em;
}


.driver-detail-contact {
    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.5;
}


.driver-avatar {
    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        var(--green-soft);

    font-size:
        21px;
}


.driver-kpis {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px;

    margin-top:
        19px;
}


.driver-kpi {
    min-width:
        0;

    padding:
        13px;

    border-radius:
        18px;

    background:
        var(--card-alt);
}


.driver-kpi span {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--muted);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


.driver-kpi strong {
    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    font-size:
        13px;

    white-space:
        nowrap;
}


.driver-balance-block {
    margin-top:
        9px;

    padding:
        17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border-radius:
        20px;

    background:
        var(--green-soft);
}


.driver-balance-block span {
    display:
        block;

    color:
        var(--muted);

    font-size:
        9px;
}


.driver-balance-block strong {
    display:
        block;

    margin-top:
        5px;

    font-size:
        23px;

    letter-spacing:
        -.035em;
}


.detail-section {
    margin-top:
        23px;
}


.detail-section-title {
    margin-bottom:
        10px;

    font-size:
        11px;

    font-weight:
        800;

    color:
        var(--brown);

    letter-spacing:
        .08em;
}


.driver-history-list {
    display:
        grid;

    gap:
        7px;
}


.driver-history-row {
    padding:
        12px 13px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        12px;

    border-radius:
        17px;

    background:
        var(--card-alt);
}


.driver-history-row-main {
    min-width:
        0;
}


.driver-history-row strong {
    display:
        block;

    font-size:
        11px;
}


.driver-history-row span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;
}


.driver-history-money {
    flex:
        0 0 auto;

    font-size:
        11px;

    font-weight:
        800;
}


.payment-positive {
    color:
        #687d63;
}


.driver-detail-close {
    width:
        100%;

    min-height:
        45px;

    margin-top:
        17px;

    border:
        none;

    border-radius:
        16px;

    background:
        var(--text);

    color:
        white;

    font-weight:
        750;

    cursor:
        pointer;
}


@media (
    max-width: 390px
) {

    .driver-kpis {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   MINIAPP PAYMENTS V0.4
   ========================================================= */

.payment-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 9px;
}


.payment-summary-card {
    min-height: 104px;

    padding: 16px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border:
        1px solid var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.payment-summary-card.green {
    background:
        var(--green-soft);
}


.payment-summary-card.sand {
    background:
        var(--sand-soft);
}


.payment-summary-card span {
    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        650;
}


.payment-summary-card strong {
    margin-top:
        13px;

    font-size:
        22px;

    letter-spacing:
        -.035em;
}


.payment-today-card {
    margin-top:
        10px;

    padding:
        18px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;

    border:
        1px solid var(--line);

    border-radius:
        23px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.payment-today-card > div +
div {
    padding-left:
        16px;

    border-left:
        1px solid var(--line);
}


.payment-today-card strong {
    display:
        block;

    margin-top:
        7px;

    font-size:
        17px;
}


.payments-toolbar {
    margin-top:
        18px;

    padding:
        15px;

    border:
        1px solid var(--line);

    border-radius:
        23px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.payment-list-head {
    margin:
        18px
        3px
        9px;

    color:
        var(--muted);

    font-size:
        11px;
}


.payments-list {
    display:
        grid;

    gap:
        9px;
}


.payment-driver-row,
.payment-history-row {
    width:
        100%;

    padding:
        16px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        14px;

    border:
        1px solid var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    color:
        var(--text);

    text-align:
        left;

    box-shadow:
        0 8px 25px
        rgba(
            70,
            54,
            42,
            .04
        );
}


.payment-driver-row {
    cursor:
        pointer;
}


.payment-driver-row:active {
    transform:
        scale(.987);
}


.payment-driver-name,
.payment-history-name {
    font-size:
        13px;

    font-weight:
        800;
}


.payment-driver-meta,
.payment-history-meta {
    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.45;
}


.payment-driver-side,
.payment-history-side {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        8px;
}


.payment-balance {
    font-size:
        14px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.payment-balance.zero {
    color:
        var(--muted);
}


.payment-balance.positive {
    color:
        #657b61;
}


.payment-arrow {
    color:
        #a79789;

    font-size:
        17px;
}


.payment-history-amount {
    font-size:
        14px;

    font-weight:
        850;

    color:
        #657b61;

    white-space:
        nowrap;
}


.payment-admin-pill {
    display:
        inline-flex;

    min-height:
        23px;

    align-items:
        center;

    padding:
        0 8px;

    border-radius:
        999px;

    background:
        #eee5dc;

    color:
        var(--brown);

    font-size:
        8px;

    font-weight:
        800;
}


.payment-breakdown {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        7px;
}


.payment-breakdown span {
    padding:
        4px 7px;

    border-radius:
        9px;

    background:
        var(--card-alt);

    color:
        var(--muted);

    font-size:
        8px;
}


@media (
    min-width: 600px
) {

    .payment-summary-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MINIAPP OCR V0.5
   ========================================================= */

.ocr-toolbar {
    padding: 15px;

    border:
        1px solid var(--line);

    border-radius:
        23px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.ocr-list-head {
    margin:
        18px
        3px
        9px;

    color:
        var(--muted);

    font-size:
        11px;
}


.ocr-list {
    display:
        grid;

    gap:
        9px;
}


.ocr-row {
    width:
        100%;

    padding:
        16px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        14px;

    border:
        1px solid var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(
            70,
            54,
            42,
            .04
        );
}


.ocr-row:active {
    transform:
        scale(.987);
}


.ocr-row-main {
    min-width:
        0;
}


.ocr-row-title {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;
}


.ocr-trip-number {
    font-size:
        14px;

    font-weight:
        850;
}


.ocr-route {
    color:
        var(--brown);

    font-size:
        10px;

    font-weight:
        700;
}


.ocr-driver {
    margin-top:
        8px;

    font-size:
        13px;

    font-weight:
        650;
}


.ocr-row-meta {
    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        9px;
}


.ocr-values-mini {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        8px;
}


.ocr-values-mini span {
    padding:
        4px
        7px;

    border-radius:
        9px;

    background:
        var(--card-alt);

    color:
        var(--muted);

    font-size:
        8px;
}


.ocr-row-side {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        12px;
}


.review-pill {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0 9px;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.review-pill.pending {
    background:
        var(--sand-soft);

    color:
        #886837;
}


.review-pill.approved {
    background:
        var(--green-soft);

    color:
        #60765c;
}


.review-pill.other {
    background:
        #eee8e2;

    color:
        var(--muted);
}


.ocr-photo-count {
    color:
        var(--muted);

    font-size:
        9px;
}


.ocr-detail {
    margin-top:
        12px;
}


.ocr-detail-card {
    padding:
        21px;

    border:
        1px solid var(--line);

    border-radius:
        27px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.ocr-detail-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        14px;
}


.ocr-detail-header h3 {
    margin:
        5px
        0
        5px;

    font-size:
        23px;

    letter-spacing:
        -.035em;
}


.ocr-detail-driver {
    color:
        var(--muted);

    font-size:
        10px;
}


.ocr-values-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px;

    margin-top:
        19px;
}


.ocr-value-card {
    min-width:
        0;

    padding:
        14px;

    border-radius:
        18px;

    background:
        var(--card-alt);
}


.ocr-value-card.highlight {
    background:
        var(--green-soft);
}


.ocr-value-card span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--muted);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.ocr-value-card strong {
    display:
        block;

    font-size:
        15px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.ocr-section-title {
    margin:
        24px
        1px
        10px;

    color:
        var(--brown);

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .09em;
}


.ocr-review-card {
    padding:
        15px;

    border-radius:
        19px;

    background:
        var(--card-alt);
}


.ocr-review-card p {
    margin:
        8px
        0
        0;

    color:
        var(--muted);

    font-size:
        10px;

    line-height:
        1.45;
}


.ocr-photo-grid {
    display:
        grid;

    grid-template-columns:
        1fr;

    gap:
        10px;
}


.ocr-photo-card {
    overflow:
        hidden;

    border:
        1px solid var(--line);

    border-radius:
        20px;

    background:
        var(--card-alt);
}


.ocr-photo-header {
    padding:
        11px
        12px;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        8px;
}


.ocr-photo-header strong {
    font-size:
        10px;
}


.ocr-photo-header span {
    color:
        var(--muted);

    font-size:
        8px;
}


.ocr-photo-stage {
    position:
        relative;

    min-height:
        215px;

    display:
        grid;

    place-items:
        center;

    background:
        #eee9e3;
}


.ocr-photo-stage img {
    width:
        100%;

    height:
        260px;

    object-fit:
        contain;

    display:
        block;

    cursor:
        zoom-in;
}


.ocr-photo-placeholder {
    padding:
        20px;

    color:
        var(--muted);

    font-size:
        10px;

    text-align:
        center;
}


.ocr-photo-caption {
    padding:
        10px
        12px;

    border-top:
        1px solid var(--line);

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.4;
}


.ocr-detail-close {
    width:
        100%;

    min-height:
        45px;

    margin-top:
        17px;

    border:
        none;

    border-radius:
        16px;

    background:
        var(--text);

    color:
        white;

    font-weight:
        750;

    cursor:
        pointer;
}


/* PHOTO MODAL */

.photo-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    padding:
        calc(
            55px
            + env(
                safe-area-inset-top
            )
        )
        14px
        calc(
            20px
            + env(
                safe-area-inset-bottom
            )
        );

    background:
        rgba(
            30,
            26,
            23,
            .94
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.photo-modal-close {
    position:
        absolute;

    top:
        calc(
            13px
            + env(
                safe-area-inset-top
            )
        );

    right:
        15px;

    width:
        42px;

    height:
        42px;

    border:
        none;

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            .12
        );

    color:
        white;

    font-size:
        25px;

    cursor:
        pointer;
}


.photo-modal-body {
    width:
        min(
            100%,
            850px
        );

    max-height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;
}


.photo-modal-title {
    color:
        white;

    font-size:
        12px;

    font-weight:
        750;

    text-align:
        center;
}


.photo-modal-body img {
    width:
        100%;

    max-height:
        calc(
            100vh
            - 125px
        );

    object-fit:
        contain;

    border-radius:
        17px;
}


@media (
    min-width: 600px
) {

    .ocr-photo-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .ocr-values-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MINIAPP ROUTES V0.6
   ========================================================= */

.routes-toolbar {
    padding: 15px;

    border:
        1px solid var(--line);

    border-radius:
        23px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.routes-list-head {
    margin:
        18px
        3px
        9px;

    color:
        var(--muted);

    font-size:
        11px;
}


.routes-list {
    display:
        grid;

    gap:
        9px;
}


.route-row {
    width:
        100%;

    padding:
        17px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        14px;

    border:
        1px solid var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    color:
        var(--text);

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 8px 25px
        rgba(
            70,
            54,
            42,
            .04
        );
}


.route-row:active {
    transform:
        scale(.987);
}


.route-row-main {
    min-width:
        0;
}


.route-title-row {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        8px;
}


.route-number {
    font-size:
        15px;

    font-weight:
        850;
}


.route-state {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        24px;

    padding:
        0 8px;

    border-radius:
        999px;

    font-size:
        8px;

    font-weight:
        850;
}


.route-state.active {
    background:
        var(--green-soft);

    color:
        #60765c;
}


.route-state.inactive {
    background:
        #f1e5e1;

    color:
        #956c61;
}


.route-norm {
    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        10px;
}


.route-stats-mini {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        8px;
}


.route-stats-mini span {
    padding:
        4px 7px;

    border-radius:
        9px;

    background:
        var(--card-alt);

    color:
        var(--muted);

    font-size:
        8px;
}


.route-row-side {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        10px;
}


.route-rate {
    font-size:
        14px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.route-arrow {
    color:
        #a79789;

    font-size:
        18px;
}


.route-detail {
    margin-top:
        12px;
}


.route-detail-card {
    padding:
        21px;

    border:
        1px solid var(--line);

    border-radius:
        27px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.route-detail-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        14px;
}


.route-detail-header h3 {
    margin:
        5px
        0
        4px;

    font-size:
        24px;

    letter-spacing:
        -.04em;
}


.route-detail-subtitle {
    color:
        var(--muted);

    font-size:
        10px;
}


.route-detail-kpis {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px;

    margin-top:
        19px;
}


.route-detail-kpi {
    padding:
        14px;

    border-radius:
        18px;

    background:
        var(--card-alt);
}


.route-detail-kpi.highlight {
    background:
        var(--green-soft);
}


.route-detail-kpi span {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--muted);

    font-size:
        8px;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.route-detail-kpi strong {
    display:
        block;

    font-size:
        15px;
}


.route-history {
    display:
        grid;

    gap:
        7px;
}


.route-history-row {
    padding:
        12px 13px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        12px;

    border-radius:
        17px;

    background:
        var(--card-alt);
}


.route-history-main {
    min-width:
        0;
}


.route-history-main strong {
    display:
        block;

    font-size:
        11px;
}


.route-history-main span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        9px;
}


.route-history-money {
    font-size:
        11px;

    font-weight:
        850;

    white-space:
        nowrap;
}


.route-detail-close {
    width:
        100%;

    min-height:
        45px;

    margin-top:
        17px;

    border:
        none;

    border-radius:
        16px;

    background:
        var(--text);

    color:
        white;

    font-weight:
        750;

    cursor:
        pointer;
}


@media (
    min-width: 600px
) {

    .route-detail-kpis {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MINIAPP REPORTS V0.7
   ========================================================= */

.reports-period-card {
    padding:
        15px;

    border:
        1px solid
        var(--line);

    border-radius:
        23px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.report-period-label {
    margin-top:
        12px;

    padding-top:
        11px;

    border-top:
        1px solid
        var(--line);

    color:
        var(--muted);

    font-size:
        10px;
}


.report-kpi-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        9px;

    margin-top:
        11px;
}


.report-kpi-card {
    min-height:
        105px;

    padding:
        16px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid
        var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.report-kpi-card.green {
    background:
        var(--green-soft);
}


.report-kpi-card.sand {
    background:
        var(--sand-soft);
}


.report-kpi-card span {
    color:
        var(--muted);

    font-size:
        10px;
}


.report-kpi-card strong {
    margin-top:
        14px;

    font-size:
        22px;

    letter-spacing:
        -.035em;
}


.report-secondary-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        8px;

    margin-top:
        9px;
}


.report-secondary-grid > div {
    padding:
        13px;

    border-radius:
        18px;

    background:
        var(--card);

    border:
        1px solid
        var(--line);
}


.report-secondary-grid span {
    display:
        block;

    color:
        var(--muted);

    font-size:
        8px;

    margin-bottom:
        6px;
}


.report-secondary-grid strong {
    font-size:
        14px;
}


.report-daily {
    display:
        grid;

    gap:
        7px;
}


.report-day-row {
    padding:
        13px;

    display:
        grid;

    grid-template-columns:
        74px
        minmax(
            0,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        10px;

    border-radius:
        17px;

    background:
        var(--card-alt);
}


.report-day-date {
    font-size:
        10px;

    font-weight:
        800;
}


.report-day-stats {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;
}


.report-day-stats span {
    padding:
        4px 6px;

    border-radius:
        8px;

    background:
        var(--card);

    color:
        var(--muted);

    font-size:
        8px;
}


.report-day-money {
    font-size:
        10px;

    font-weight:
        800;

    text-align:
        right;
}


.report-list {
    display:
        grid;

    gap:
        7px;
}


.report-row {
    padding:
        13px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        12px;

    border-radius:
        18px;

    background:
        var(--card);

    border:
        1px solid
        var(--line);
}


.report-row-title {
    font-size:
        11px;

    font-weight:
        800;
}


.report-row-sub {
    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        8px;

    line-height:
        1.4;
}


.report-row-money {
    font-size:
        11px;

    font-weight:
        850;

    white-space:
        nowrap;

    text-align:
        right;
}


.report-row-money span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        500;
}


.report-excel-card {
    margin-top:
        25px;

    padding:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    border-radius:
        25px;

    background:
        #eee5dc;

    border:
        1px solid
        var(--line);
}


.report-excel-card strong {
    display:
        block;

    margin-top:
        6px;

    font-size:
        14px;
}


.report-excel-card p {
    max-width:
        360px;

    margin:
        6px
        0
        0;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.45;
}


.report-excel-button {
    min-height:
        42px;

    padding:
        0 12px;

    flex:
        0 0 auto;

    border:
        none;

    border-radius:
        14px;

    background:
        var(--text);

    color:
        white;

    font-size:
        10px;

    font-weight:
        750;

    cursor:
        pointer;
}


@media (
    min-width: 600px
) {

    .report-kpi-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }


    .report-secondary-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   MINIAPP SYSTEM V0.8
   ========================================================= */

.system-status-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        9px;
}


.system-status-card {
    min-height:
        100px;

    padding:
        15px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid
        var(--line);

    border-radius:
        21px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.system-status-card.ok {
    background:
        var(--green-soft);
}


.system-status-card.warn {
    background:
        var(--sand-soft);
}


.system-status-card span {
    color:
        var(--muted);

    font-size:
        9px;
}


.system-status-card strong {
    margin-top:
        12px;

    font-size:
        16px;

    word-break:
        break-word;
}


.system-refresh-row {
    margin-top:
        10px;

    padding:
        9px
        2px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        var(--muted);

    font-size:
        9px;
}


.system-refresh-button {
    min-height:
        36px;

    padding:
        0 12px;

    border:
        1px solid
        var(--line);

    border-radius:
        12px;

    background:
        var(--card);

    color:
        var(--text);

    font-weight:
        700;

    cursor:
        pointer;
}


.system-panel {
    padding:
        16px;

    border:
        1px solid
        var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.system-line {
    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border-bottom:
        1px solid
        var(--line);
}


.system-line:last-child {
    border-bottom:
        none;
}


.system-line span {
    color:
        var(--muted);

    font-size:
        9px;
}


.system-line strong {
    font-size:
        10px;

    text-align:
        right;
}


.integrity-hero {
    padding:
        14px;

    margin-bottom:
        9px;

    border-radius:
        17px;

    background:
        var(--green-soft);
}


.integrity-hero.warn {
    background:
        var(--sand-soft);
}


.integrity-hero strong {
    display:
        block;

    font-size:
        14px;
}


.integrity-hero span {
    display:
        block;

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        9px;
}


.system-log-list {
    display:
        grid;

    gap:
        7px;
}


.system-log-row {
    padding:
        13px;

    border:
        1px solid
        var(--line);

    border-radius:
        17px;

    background:
        var(--card);
}


.system-log-head {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        12px;
}


.system-log-head strong {
    font-size:
        10px;
}


.system-log-head span {
    color:
        var(--muted);

    font-size:
        8px;

    white-space:
        nowrap;
}


.system-log-text {
    margin-top:
        6px;

    color:
        var(--muted);

    font-size:
        9px;

    line-height:
        1.45;

    word-break:
        break-word;
}


.system-empty {
    padding:
        18px;

    border-radius:
        18px;

    background:
        var(--green-soft);

    color:
        var(--muted);

    font-size:
        10px;

    text-align:
        center;
}


@media (
    min-width: 650px
) {

    .system-status-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


/* =========================================================
   DRIVER APP V1.0
   ========================================================= */

.driver-current-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        6px;

    margin-top:
        13px;
}


.driver-current-meta span {
    padding:
        6px 9px;

    border-radius:
        10px;

    background:
        rgba(
            255,
            255,
            255,
            .55
        );

    color:
        var(--muted);

    font-size:
        9px;

    font-weight:
        650;
}


.driver-finance-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap:
        9px;
}


.driver-finance-card {
    min-height:
        94px;

    padding:
        15px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        1px solid
        var(--line);

    border-radius:
        21px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.driver-finance-card.green {
    background:
        var(--green-soft);
}


.driver-finance-card span {
    color:
        var(--muted);

    font-size:
        9px;
}


.driver-finance-card strong {
    margin-top:
        14px;

    font-size:
        19px;

    letter-spacing:
        -.03em;
}


.driver-filter-card {
    padding:
        15px;

    border:
        1px solid
        var(--line);

    border-radius:
        22px;

    background:
        var(--card);

    box-shadow:
        var(--shadow);
}


.driver-period-label {
    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        9px;
}


.driver-trip-list,
.driver-money-list {
    display:
        grid;

    gap:
        8px;

    margin-top:
        12px;
}


.driver-trip-row {
    padding:
        15px;

    border:
        1px solid
        var(--line);

    border-radius:
        20px;

    background:
        var(--card);

    box-shadow:
        0 7px 22px
        rgba(
            70,
            54,
            42,
            .035
        );
}


.driver-trip-row-head {
    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        12px;
}


.driver-trip-row-title {
    font-size:
        12px;

    font-weight:
        850;
}


.driver-trip-status {
    padding:
        5px 7px;

    border-radius:
        9px;

    background:
        var(--green-soft);

    color:
        #60765c;

    font-size:
        8px;

    font-weight:
        800;

    white-space:
        nowrap;
}


.driver-trip-status.started {
    background:
        var(--sand-soft);

    color:
        #8e745b;
}


.driver-trip-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-top:
        10px;
}


.driver-trip-meta span {
    padding:
        5px 7px;

    border-radius:
        9px;

    background:
        var(--card-alt);

    color:
        var(--muted);

    font-size:
        8px;
}


.driver-trip-bottom {
    margin-top:
        11px;

    padding-top:
        10px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    border-top:
        1px solid
        var(--line);

    font-size:
        9px;
}


.driver-trip-bottom strong {
    font-size:
        11px;
}


.driver-money-row {
    padding:
        14px;

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;

    gap:
        12px;

    border:
        1px solid
        var(--line);

    border-radius:
        18px;

    background:
        var(--card);
}


.driver-money-row strong {
    display:
        block;

    font-size:
        11px;
}


.driver-money-row span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        8px;
}


.driver-money-amount {
    font-size:
        11px;

    font-weight:
        850;

    white-space:
        nowrap;
}


@media (
    min-width: 600px
) {

    .driver-finance-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(
                    0,
                    1fr
                )
            );
    }

}