/* CHROME: account area (sidebar, orders list/detail, addresses, points, coupons,
 * password, profile) + wishlist + coupons pages, which share the same 2-col
 * layout. Extracted verbatim from themes/default/index.html — 96-100% identical
 * across all 7 themes today, EXCEPT the 3 rules marked below, which are the
 * exact selectors `mosaic` diverges on (see PRD Bagian I evidence table). Those
 * 3 now read from --color-accent / --color-accent-ink / --chrome-heading-*
 * instead of hardcoded foreground/background, with fallback values that make
 * `default` render byte-identical to before extraction.
 *
 * This chunk is compiled standalone (see resources/css/chrome/_tokens.css's own
 * header comment) so it keeps its own copy of every plain Tailwind design token
 * its rules below actually use — only what's referenced via var(), nothing more.
 */
:root {
    --color-foreground: #17140f;
    --color-background: #fff;
    --color-danger: var(--color-rose-700);
    --color-rose-700: oklch(51.4% 0.222 16.935);
    --color-success: var(--color-green-700);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-accent: #17140f;
    --color-accent-ink: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --leading-relaxed: 1.625;
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans: ui-sans-serif, system-ui, sans-serif;
    --chrome-heading-font: var(--font-sans);
    --chrome-heading-size: 1.125rem;
    --chrome-heading-weight: 500;
    --chrome-heading-transform: none;
}
@layer chrome {
    [data-page^="account-"],
    [data-page="wishlist"],
    [data-page="coupons"] {
        /* Same responsive max-width ladder as the shared .container utility
           (resources/css/chrome/primitives.css) — HIGH RISK selector, copied
           verbatim, not re-derived (see primitives.css's own note). */
        width: 100%;
        margin-inline: auto;
        margin-top: calc(var(--spacing) * 10);
        margin-bottom: calc(var(--spacing) * 20);
        display: grid;
        grid-template-columns: 14rem 1fr;
        column-gap: 2rem;

        [data-role="account-sidebar"] {
            grid-column: 1;
            grid-row: 1 / span 2;
        }

        .eco-side-menu {
            width: calc(var(--spacing) * 56);
            .eco-side-user {
                display: flex;
                align-items: center;
                gap: calc(var(--spacing) * 3);
                padding-bottom: calc(var(--spacing) * 4);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                margin-bottom: calc(var(--spacing) * 4);
                .eco-side-avatar {
                    /* was: @apply bg-foreground text-background — now token-driven,
                       falls back to the exact same colours when a theme hasn't
                       declared --color-accent yet. */
                    width: calc(var(--spacing) * 9);
                    height: calc(var(--spacing) * 9);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: var(--font-weight-medium);
                    background: var(--color-accent, var(--color-foreground));
                    color: var(--color-accent-ink, var(--color-background));
                }
                .eco-side-user-name {
                    font-weight: var(--font-weight-medium);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                }
            }
            .eco-side-nav {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * .5);
                .eco-side-link {
                    display: flex;
                    align-items: center;
                    padding-block: calc(var(--spacing) * 2);
                    padding-inline: calc(var(--spacing) * 2.5);
                    gap: calc(var(--spacing) * 2.5);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    &:hover {
                        background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
                    }
                    &.active {
                        /* was: @apply bg-foreground/[.07] font-medium — now token-driven. */
                        font-weight: var(--font-weight-medium);
                        background: color-mix(in oklab, var(--color-accent, var(--color-foreground)) 7%, transparent);
                    }
                    svg {
                        width: calc(var(--spacing) * 4);
                        height: calc(var(--spacing) * 4);
                        opacity: .6;
                    }
                }
                .eco-side-logout {
                    margin-top: calc(var(--spacing) * 3);
                    padding-top: calc(var(--spacing) * 3);
                    border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    .eco-side-logout-btn {
                        width: 100%;
                        cursor: pointer;
                        opacity: .6;
                    }
                    @media (hover: hover) {
                        .eco-side-logout-btn:hover {
                            opacity: .9;
                        }
                    }
                }
            }
        }

        .eco-account-page-title {
            grid-column: 2;
            /* was: @apply text-lg font-medium mb-3 — now token-driven. */
            margin-bottom: calc(var(--spacing) * 3);
            font-family: var(--chrome-heading-font);
            font-size: var(--chrome-heading-size);
            font-weight: var(--chrome-heading-weight);
            text-transform: var(--chrome-heading-transform);
        }

        .eco-account-content {
            grid-column: 2;
            min-height: 30rem;
            min-width: 0;
            & > :first-child { margin-top: 0 !important; }

            /* Order Tabs */
            .eco-order-tabs {
                display: flex;
                gap: 0;
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                margin-bottom: calc(var(--spacing) * 5);
                overflow-x: auto;
                scrollbar-width: none;
                &::-webkit-scrollbar { display: none; }
                .eco-order-tab {
                    padding-inline: calc(var(--spacing) * 4);
                    padding-block: calc(var(--spacing) * 2.5);
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    border-bottom: 2px solid transparent;
                    margin-bottom: -1px;
                    flex: none;
                    white-space: nowrap;
                    &:hover {
                        color: var(--color-foreground);
                    }
                    &.active {
                        border-color: var(--color-foreground);
                        font-weight: var(--font-weight-medium);
                    }
                    .eco-order-tab-count {
                        opacity: .5;
                    }
                }
            }

            /* Order Card List */
            .eco-order-list {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 3);
                .eco-order-card {
                    display: flex;
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                    padding: calc(var(--spacing) * 4);
                    flex-direction: column;
                    gap: calc(var(--spacing) * 3);
                    transition-property: color, background-color, border-color;
                    transition-timing-function: var(--default-transition-timing-function);
                    transition-duration: var(--default-transition-duration);
                    @media (hover: hover) {
                        &:hover {
                            background-color: color-mix(in oklab, var(--color-foreground) 2%, transparent);
                        }
                    }
                    .eco-order-card-header {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        & > div:first-child {
                            display: flex;
                            align-items: center;
                            gap: calc(var(--spacing) * 3);
                        }
                    }
                    .eco-order-card-body {
                        display: flex;
                        gap: calc(var(--spacing) * 3);
                        align-items: center;
                        .eco-order-card-img {
                            width: calc(var(--spacing) * 14);
                            height: calc(var(--spacing) * 14);
                            flex: none;
                            border: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                            svg {
                                width: 100%;
                                height: 100%;
                                padding: calc(var(--spacing) * 3);
                                opacity: .2;
                            }
                        }
                        .eco-order-card-info {
                            .eco-order-card-product {
                                font-weight: var(--font-weight-medium);
                            }
                            .eco-order-card-meta {
                                font-size: var(--text-xs);
                                line-height: var(--text-xs--line-height);
                                opacity: .6;
                                margin-top: calc(var(--spacing) * .5);
                            }
                        }
                        .eco-order-card-total {
                            font-weight: var(--font-weight-medium);
                            margin-inline-start: auto;
                        }
                    }
                }
                .eco-dash-card {
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                    padding: calc(var(--spacing) * 10);
                    text-align: center;
                }
            }

            /* Order Detail: Header */
            .eco-order-back-link {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                opacity: .6;
                transition-property: opacity;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
                display: inline-flex;
                align-items: center;
                gap: calc(var(--spacing) * 1);
                margin-bottom: calc(var(--spacing) * 4);
                @media (hover: hover) {
                    &:hover {
                        opacity: .9;
                    }
                }
                svg {
                    width: calc(var(--spacing) * 4);
                    height: calc(var(--spacing) * 4);
                }
            }
            .eco-order-detail-header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: calc(var(--spacing) * 4);
                padding-bottom: calc(var(--spacing) * 5);
                margin-bottom: calc(var(--spacing) * 6);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            }
            .eco-order-title {
                font-size: var(--text-xl);
                line-height: var(--text-xl--line-height);
                font-weight: var(--font-weight-medium);
                margin-bottom: calc(var(--spacing) * 1);
            }
            .eco-order-date {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                opacity: .5;
            }
            .eco-order-badge {
                flex: none;
                margin-top: calc(var(--spacing) * .5);
            }

            /* Order Meta Bar */
            .eco-order-meta {
                display: flex;
                border: 1px solid color-mix(in oklab, var(--color-foreground) 15%, transparent);
                margin-bottom: calc(var(--spacing) * 5);
                & > :not(:last-child) {
                    border-inline-end: 1px solid color-mix(in oklab, var(--color-foreground) 15%, transparent);
                }
                .eco-order-meta-item {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: calc(var(--spacing) * .5);
                    padding-block: calc(var(--spacing) * 3);
                    padding-inline: calc(var(--spacing) * 4);
                }
                .eco-order-meta-label {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .5;
                }
                .eco-order-meta-val {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    font-weight: var(--font-weight-medium);
                }
            }

            /* Payment Info Card */
            .eco-payment-info-card {
                border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                padding: calc(var(--spacing) * 5);
                margin-bottom: calc(var(--spacing) * 5);
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                .eco-payment-info-header {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: calc(var(--spacing) * 1);
                }
                .eco-payment-info-title {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .5;
                }
                .eco-payment-info-method-row {
                    display: flex;
                    align-items: center;
                    gap: calc(var(--spacing) * 2);
                }
                .eco-payment-info-method {
                    font-weight: var(--font-weight-medium);
                }
                .eco-payment-info-va {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: calc(var(--spacing) * 2);
                    margin-top: calc(var(--spacing) * 4);
                    padding-top: calc(var(--spacing) * 4);
                    border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    width: 100%;
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .7;
                    .eco-payment-info-va-number {
                        display: flex;
                        align-items: center;
                        gap: calc(var(--spacing) * 3);
                        .eco-payment-info-va-digits {
                            font-size: var(--text-lg);
                            line-height: var(--text-lg--line-height);
                            font-weight: var(--font-weight-medium);
                            color: color-mix(in oklab, var(--color-foreground) 90%, transparent);
                        }
                        .eco-payment-info-copy-btn {
                            display: flex;
                            align-items: center;
                            gap: calc(var(--spacing) * 1.5);
                            font-size: var(--text-xs);
                            line-height: var(--text-xs--line-height);
                            border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                            padding-inline: calc(var(--spacing) * 2);
                            padding-block: calc(var(--spacing) * 1);
                            @media (hover: hover) {
                                &:hover {
                                    background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
                                }
                            }
                            svg {
                                width: calc(var(--spacing) * 3.5);
                                height: calc(var(--spacing) * 3.5);
                            }
                        }
                    }
                    .eco-payment-info-va-note {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .7;
                    }
                }
                .eco-payment-info-qr {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: calc(var(--spacing) * 3);
                    margin-top: calc(var(--spacing) * 4);
                    padding-top: calc(var(--spacing) * 4);
                    border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    width: 100%;
                    .eco-payment-info-qr-label {
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        opacity: .7;
                    }
                    .eco-payment-info-qr-img {
                        width: calc(var(--spacing) * 40);
                        height: calc(var(--spacing) * 40);
                    }
                    .eco-payment-info-download-btn {
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                        padding-inline: calc(var(--spacing) * 4);
                        padding-block: calc(var(--spacing) * 2);
                        width: fit-content;
                        cursor: pointer;
                        @media (hover: hover) {
                            &:hover {
                                background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
                            }
                        }
                    }
                }
            }

            /* Dash Card */
            .eco-dash-card {
                border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                padding: calc(var(--spacing) * 5);
                margin-top: calc(var(--spacing) * 5);
                .eco-dash-card-title {
                    font-weight: var(--font-weight-medium);
                    border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                    padding-bottom: calc(var(--spacing) * 3);
                    margin-bottom: calc(var(--spacing) * 4);
                }
            }

            /* Payment Proof Upload */
            .eco-proof-hint {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                opacity: .6;
                margin-bottom: calc(var(--spacing) * 4);
            }
            .eco-proof-success {
                display: flex;
                align-items: center;
                gap: calc(var(--spacing) * 2);
                border: 1px solid color-mix(in oklab, var(--color-success) 30%, transparent);
                background-color: color-mix(in oklab, var(--color-success) 5%, transparent);
                color: var(--color-success);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                padding: calc(var(--spacing) * 3);
                svg {
                    width: calc(var(--spacing) * 4);
                    height: calc(var(--spacing) * 4);
                    flex: none;
                }
            }
            .eco-proof-form {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 3);
            }
            .eco-proof-dropzone {
                display: flex;
                align-items: center;
                gap: calc(var(--spacing) * 2.5);
                border: 1px dashed color-mix(in oklab, var(--color-foreground) 25%, transparent);
                padding-block: calc(var(--spacing) * 3);
                padding-inline: calc(var(--spacing) * 4);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                cursor: pointer;
                transition-property: color, background-color, border-color;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
                &:hover {
                    background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                    border-color: color-mix(in oklab, var(--color-foreground) 40%, transparent);
                }
                &.eco-proof-dropzone--filled {
                    border-style: solid;
                    border-color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
                    background-color: color-mix(in oklab, var(--color-foreground) 2%, transparent);
                }
                svg {
                    width: calc(var(--spacing) * 4);
                    height: calc(var(--spacing) * 4);
                    opacity: .5;
                    flex: none;
                }
                span {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }
            }
            .eco-proof-error {
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                color: var(--color-danger);
            }
            .eco-proof-pending {
                display: flex;
                align-items: center;
                gap: calc(var(--spacing) * 3);
                svg {
                    width: calc(var(--spacing) * 5);
                    height: calc(var(--spacing) * 5);
                    flex: none;
                    opacity: .6;
                }
                strong {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                }
                p {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .6;
                    margin-top: calc(var(--spacing) * 1);
                }
            }

            /* Affiliate invite block (docs/PRD-affiliate.md 6.3) — sits above the
               order tabs on /account itself, only while the buyer hasn't joined. */
            .eco-affiliate-invite {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: calc(var(--spacing) * 4);
                margin-top: 0;
                margin-bottom: calc(var(--spacing) * 5);
                cursor: pointer;
                transition-property: color, background-color, border-color;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
                @media (hover: hover) {
                    &:hover {
                        background-color: color-mix(in oklab, var(--color-foreground) 2%, transparent);
                    }
                }
                .eco-affiliate-invite-body {
                    .eco-dash-card-title {
                        border: 0;
                        padding-bottom: 0;
                        margin-bottom: calc(var(--spacing) * 1);
                    }
                }
                .eco-affiliate-invite-text {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .6;
                }
                > svg {
                    width: calc(var(--spacing) * 5);
                    height: calc(var(--spacing) * 5);
                    opacity: .4;
                    flex: none;
                }
            }

            /* Timeline */
            .eco-order-timeline {
                display: flex;
                flex-direction: column;
                .tl-step {
                    display: flex;
                    align-items: flex-start;
                    gap: calc(var(--spacing) * 3);
                    padding-bottom: calc(var(--spacing) * 5);
                    position: relative;
                    &:not(:last-child)::before {
                        content: "";
                        position: absolute;
                        inset-inline-start: 11px;
                        top: calc(var(--spacing) * 6);
                        bottom: 0;
                        border-inline-start: 1px dashed color-mix(in oklab, var(--color-foreground) 15%, transparent);
                    }
                    &.done .dot,
                    &.current .dot {
                        background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
                        border-color: color-mix(in oklab, var(--color-success) 40%, transparent);
                        color: var(--color-success);
                    }
                    &.done .eco-tl-step-label,
                    &.current .eco-tl-step-label {
                        opacity: 1;
                        font-weight: var(--font-weight-medium);
                    }
                    .dot {
                        width: calc(var(--spacing) * 6);
                        height: calc(var(--spacing) * 6);
                        flex: none;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                        background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                        .eco-icon {
                            width: calc(var(--spacing) * 3.5);
                            height: calc(var(--spacing) * 3.5);
                            stroke-width: 2px;
                        }
                    }
                    .eco-tl-step-label {
                        opacity: .6;
                        padding-top: calc(var(--spacing) * .5);
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                    }
                    .eco-tl-step-date {
                        margin-inline-start: auto;
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .5;
                        padding-top: calc(var(--spacing) * .5);
                    }
                }
            }

            /* Order Items */
            .eco-order-card-img {
                width: calc(var(--spacing) * 16);
                height: calc(var(--spacing) * 16);
                flex: none;
                border: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                svg {
                    width: 100%;
                    height: 100%;
                    padding: calc(var(--spacing) * 3);
                    opacity: .2;
                }
            }
            .eco-order-item {
                display: flex;
                align-items: flex-start;
                gap: calc(var(--spacing) * 3);
                padding-block: calc(var(--spacing) * 3);
                border-bottom: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                &:last-child {
                    border-width: 0;
                }
                .eco-order-card-product {
                    font-weight: var(--font-weight-medium);
                }
                .eco-order-item-variant {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .6;
                    margin-top: calc(var(--spacing) * .5);
                }
                .eco-order-item-qty {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .7;
                    margin-top: calc(var(--spacing) * .5);
                }
                .eco-order-item-subtotal {
                    font-weight: var(--font-weight-medium);
                    margin-inline-start: auto;
                    flex: none;
                }
            }

            /* Shipping Address */
            .eco-order-address {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 1);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                .eco-order-address-name {
                    font-weight: var(--font-weight-medium);
                    margin-bottom: calc(var(--spacing) * 1);
                }
                div {
                    opacity: .7;
                }
            }

            /* Payment Summary */
            .eco-order-summary-row {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: calc(var(--spacing) * 4);
                padding-block: calc(var(--spacing) * 1.5);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                span:first-child {
                    display: flex;
                    flex-direction: column;
                }
                span:last-child {
                    font-weight: var(--font-weight-medium);
                    font-variant-numeric: tabular-nums;
                    flex: none;
                }
            }
            .eco-order-summary-discount span:last-child {
                color: var(--color-danger);
            }
            .eco-summary-sub {
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                font-weight: var(--font-weight-normal);
                opacity: .6;
                margin-top: calc(var(--spacing) * .5);
            }
            .eco-order-summary-total {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                gap: calc(var(--spacing) * 4);
                padding-block: calc(var(--spacing) * 2.5);
                margin-top: calc(var(--spacing) * 1);
                border-top: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                font-weight: var(--font-weight-medium);
                span:last-child {
                    font-variant-numeric: tabular-nums;
                    font-size: var(--text-base);
                    line-height: var(--text-base--line-height);
                }
            }

            /* Tracking */
            .eco-order-tracking-empty {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                color: color-mix(in oklab, var(--color-foreground) 50%, transparent);
            }
            .eco-order-tracking-body {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 3);
            }
            .eco-order-tracking-driver {
                display: flex;
                align-items: center;
                gap: calc(var(--spacing) * 3);
                padding: calc(var(--spacing) * 3);
                background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent);
                border: 1px solid color-mix(in oklab, var(--color-foreground) 10%, transparent);
            }
            .eco-order-tracking-driver-photo {
                width: calc(var(--spacing) * 10);
                height: calc(var(--spacing) * 10);
                border-radius: 9999px;
                object-fit: cover;
                flex: none;
            }
            .eco-order-tracking-driver-info {
                flex: 1;
                min-width: 0;
            }
            .eco-order-tracking-driver-name {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                font-weight: var(--font-weight-medium);
            }
            .eco-order-tracking-driver-plate {
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                color: color-mix(in oklab, var(--color-foreground) 60%, transparent);
            }
            .eco-order-tracking-link {
                align-self: flex-start;
                svg { width: calc(var(--spacing) * 3.5); height: calc(var(--spacing) * 3.5); }
            }
            .eco-order-tracking-resi {
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
            }
            .eco-order-tracking-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: calc(var(--spacing) * 2);
                .eco-dash-card-title {
                    flex: 1;
                }
            }
            .eco-order-tracking-refresh {
                opacity: .5;
                transition-property: opacity;
                transition-timing-function: var(--default-transition-timing-function);
                transition-duration: var(--default-transition-duration);
                @media (hover: hover) {
                    &:hover {
                        opacity: 1;
                    }
                }
                &:disabled {
                    pointer-events: none;
                    opacity: .3;
                }
                svg {
                    width: calc(var(--spacing) * 4);
                    height: calc(var(--spacing) * 4);
                }
                svg.eco-spin {
                    animation: eco-spin 0.65s linear infinite;
                }
            }
            .eco-order-tracking-courier-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: calc(var(--spacing) * 2);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                flex-wrap: wrap;
            }
            .eco-order-tracking-courier-name {
                font-weight: var(--font-weight-medium);
            }
            .eco-order-tracking-timeline {
                margin-top: calc(var(--spacing) * 1);
                .eco-tl-step-note {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    opacity: .5;
                    margin-top: calc(var(--spacing) * .5);
                }
            }
            .eco-order-tracking-synced {
                font-size: var(--text-xs);
                line-height: var(--text-xs--line-height);
                opacity: .4;
                margin-top: calc(var(--spacing) * 1);
            }

            /* Points */
            .eco-points-hero {
                border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                padding: calc(var(--spacing) * 6);
                margin-bottom: calc(var(--spacing) * 5);
                text-align: center;
                .eco-points-value {
                    font-size: var(--text-3xl);
                    line-height: var(--text-3xl--line-height);
                    font-weight: var(--font-weight-medium);
                }
                .eco-points-label {
                    font-size: var(--text-sm);
                    line-height: var(--text-sm--line-height);
                    opacity: .6;
                    margin-top: calc(var(--spacing) * 1);
                }
            }
            .eco-points-rules {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 3);
                .eco-points-redeem-card {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                    padding: calc(var(--spacing) * 4);
                    &.eco-points-redeem-card--disabled {
                        opacity: .4;
                    }
                    .eco-points-redeem-info {
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--spacing) * .5);
                    }
                    .eco-points-redeem-name {
                        font-weight: var(--font-weight-medium);
                    }
                    .eco-points-redeem-code {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .6;
                    }
                    .eco-points-redeem-limit {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .5;
                    }
                    .eco-points-rule-info {
                        display: flex;
                        align-items: center;
                        gap: calc(var(--spacing) * 5);
                        flex: none;
                        .eco-points-redeem-cost {
                            text-align: end;
                            .eco-points-redeem-points {
                                font-size: var(--text-base);
                                line-height: var(--text-base--line-height);
                                font-weight: var(--font-weight-medium);
                            }
                            .eco-points-redeem-label {
                                font-size: var(--text-xs);
                                line-height: var(--text-xs--line-height);
                                opacity: .6;
                                margin-inline-start: calc(var(--spacing) * 1);
                            }
                        }
                    }
                }
            }
            .eco-points-desc {
                font-size: var(--text-sm);
                line-height: var(--leading-relaxed);
                opacity: .7;
            }
            .eco-error-mb {
                margin-bottom: calc(var(--spacing) * 3);
            }

            /* Coupons */
            .eco-coupons-list {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 3);
                .eco-coupon-card {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                    padding: calc(var(--spacing) * 4);
                    .eco-coupon-card-left {
                        display: flex;
                        flex-direction: column;
                        gap: calc(var(--spacing) * 1);
                    }
                    .eco-coupon-card-code {
                        font-size: var(--text-base);
                        line-height: var(--text-base--line-height);
                        font-weight: var(--font-weight-medium);
                    }
                    .eco-coupon-card-name {
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                    }
                    .eco-coupon-card-desc {
                        font-size: var(--text-sm);
                        line-height: var(--text-sm--line-height);
                        opacity: .7;
                    }
                    .eco-coupon-card-meta {
                        display: flex;
                        gap: calc(var(--spacing) * 2);
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        opacity: .5;
                        margin-top: calc(var(--spacing) * .5);
                        span::after {
                            content: "·";
                            margin-inline-start: calc(var(--spacing) * 2);
                        }
                        span:last-child::after {
                            content: "";
                        }
                    }
                }
            }

            /* Address List */
            .eco-addr-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: calc(var(--spacing) * 5);
            }
            .eco-addr-list {
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 4);
            }
            .eco-address-card {
                border: 1px solid color-mix(in oklab, var(--color-foreground) 20%, transparent);
                padding: calc(var(--spacing) * 4);
                display: flex;
                flex-direction: column;
                gap: calc(var(--spacing) * 1);
                font-size: var(--text-sm);
                line-height: var(--text-sm--line-height);
                color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
                .eco-address-card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: calc(var(--spacing) * 1);
                }
                .eco-address-label {
                    font-weight: var(--font-weight-medium);
                    font-size: var(--text-base);
                    line-height: var(--text-base--line-height);
                    color: var(--color-foreground);
                }
                .eco-address-default {
                    font-size: var(--text-xs);
                    line-height: var(--text-xs--line-height);
                    padding-inline: calc(var(--spacing) * 2);
                    padding-block: calc(var(--spacing) * .5);
                    border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                    background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
                    color: color-mix(in oklab, var(--color-foreground) 70%, transparent);
                }
                .eco-address-recipient {
                    font-weight: var(--font-weight-medium);
                    color: var(--color-foreground);
                }
                .eco-address-actions {
                    display: flex;
                    gap: calc(var(--spacing) * 1.5);
                    margin-top: calc(var(--spacing) * 3);
                    .eco-address-action {
                        font-size: var(--text-xs);
                        line-height: var(--text-xs--line-height);
                        padding-inline: calc(var(--spacing) * 3);
                        padding-block: calc(var(--spacing) * 1.5);
                        border: 1px solid color-mix(in oklab, var(--color-foreground) 30%, transparent);
                        @media (hover: hover) {
                            &:hover {
                                background-color: color-mix(in oklab, var(--color-foreground) 5%, transparent);
                            }
                        }
                        &.danger {
                            border-color: color-mix(in oklab, var(--color-danger) 40%, transparent);
                            color: var(--color-danger);
                            @media (hover: hover) {
                                &:hover {
                                    background-color: color-mix(in oklab, var(--color-danger) 5%, transparent);
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* Guest layout: full-width when no sidebar */
    [data-page^="account-"].is-guest,
    [data-page="wishlist"].is-guest,
    [data-page="coupons"].is-guest {
        grid-template-columns: 1fr;
        .eco-account-page-title { grid-column: 1; }
        .eco-account-content { grid-column: 1; }
    }
    /* Mobile: stack sidebar above content */
    @media (max-width: 768px) {
        [data-page^="account-"],
        [data-page="wishlist"],
        [data-page="coupons"] {
            grid-template-columns: 1fr;
            [data-role="account-sidebar"] { grid-column: 1; grid-row: auto; margin-bottom: 2rem; }
            .eco-side-menu { width: 100%; }
            .eco-account-page-title { grid-column: 1; }
            .eco-account-content { grid-column: 1; }
        }
    }
    @media (min-width: 40rem) {
        [data-page^="account-"], [data-page="wishlist"], [data-page="coupons"] { max-width: 40rem; }
    }
    @media (min-width: 48rem) {
        [data-page^="account-"], [data-page="wishlist"], [data-page="coupons"] { max-width: 48rem; }
    }
    @media (min-width: 64rem) {
        [data-page^="account-"], [data-page="wishlist"], [data-page="coupons"] { max-width: 64rem; }
    }
    @media (min-width: 80rem) {
        [data-page^="account-"], [data-page="wishlist"], [data-page="coupons"] { max-width: 80rem; }
    }
    @media (min-width: 96rem) {
        [data-page^="account-"], [data-page="wishlist"], [data-page="coupons"] { max-width: 96rem; }
    }
}