/* Canonical student shell fit. Keep every economy-learning route on the investment-sized outer frame. */
:root {
    --economy-student-shell-width: 1420px;
    --economy-student-shell-gutter: 36px;
    --economy-student-shell-sidebar: 260px;
    --economy-student-shell-gap: 22px;
}

@media (min-width: 1101px) {
    body.economy-dashboard-mode .economy-dashboard-stage,
    body[data-economy-step="earn"] .economy-dashboard-stage,
    body[data-economy-step="prices"] .economy-dashboard-stage,
    body[data-economy-step="shop"] .economy-dashboard-stage,
    body[data-economy-step="bank"] .economy-dashboard-stage,
    body[data-economy-step="market"] .economy-dashboard-stage,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-dashboard-stage {
        width: min(var(--economy-student-shell-width), calc(100% - var(--economy-student-shell-gutter)));
        max-width: calc(100vw - var(--economy-student-shell-gutter));
        margin: 14px auto 12px;
    }

    body.economy-dashboard-mode .economy-dashboard-app,
    body[data-economy-step="shop"] .economy-dashboard-app,
    body[data-economy-step="bank"] .economy-dashboard-app,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-dashboard-app {
        grid-template-columns: var(--economy-student-shell-sidebar) minmax(0, 1fr);
        gap: var(--economy-student-shell-gap);
        justify-content: center;
        align-items: start;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] {
        --class-token-board-width: 100%;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-dashboard-main,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-dashboard-content,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-course-activity,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-page,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-hero {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-hero {
        aspect-ratio: 1920 / 1320;
        padding: 0;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-head {
        top: 6.1%;
        left: 7.2%;
        width: 84.8%;
        height: 19.8%;
        padding-right: 33%;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-head h2 {
        font-size: clamp(42px, 3.3vw, 62px);
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-head p {
        max-width: 520px;
        font-size: clamp(13px, .9vw, 16px);
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-balance-card {
        top: 28.5%;
        left: 6.2%;
        width: 31.2%;
        height: 60.8%;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-rank-stack {
        top: 28.7%;
        left: 40.3%;
        width: 54.9%;
        height: 64.2%;
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-balance-card > strong {
        font-size: clamp(48px, 4.4vw, 76px);
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-goal strong,
    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-total-card strong {
        font-size: clamp(14px, 1vw, 19px);
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-rank-card h3 {
        font-size: clamp(13px, .92vw, 18px);
    }

    body[data-economy-step="wallet"][data-economy-view="class-token"] .economy-wallet-token-rank-row {
        min-height: clamp(24px, 1.65vw, 32px);
    }
}