/* /my/ — MATE account dashboard, Figma nodes 1055:2, 1055:119, 1055:237, 1055:356. */
body.mira-account-page {
    --account-fg: #f3e8e1;
    --account-muted: #b7b7b7;
    --account-panel: rgba(255, 255, 255, 0.15);
    --account-nav: rgba(255, 255, 255, 0.02);
    --account-line: rgba(255, 255, 255, 0.28);
    --account-button-bg: rgba(255, 255, 255, 0.9);
    --account-button-fg: #765841;
    background-color: #343940;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--account-fg);
}

body.mira-account-page::before {
    display: none;
}

body.mira-account-page--level-0 {
    --account-fg: #212121;
    --account-muted: #838383;
    --account-panel: rgba(255, 255, 255, 0.15);
    --account-nav: rgba(255, 255, 255, 0.2);
    --account-line: rgba(33, 33, 33, 0.18);
    background-color: #e4e5e9;
    background-image: linear-gradient(111deg, rgba(235, 236, 238, 0.78), rgba(198, 200, 203, 0.72)), url("../images/account-level-0.png");
    background-blend-mode: color, normal;
}

body.mira-account-page--level-1 {
    background-image: url("../images/account-level-1-overlay.png"), url("../images/account-level-1.png"), linear-gradient(111deg, #e4e5e9 0.7%, #353a40 100%);
}

body.mira-account-page--level-2 {
    background-image: url("../images/account-level-2-bronze.png"), url("../images/account-level-2-overlay.png"), url("../images/account-level-2.png"), linear-gradient(111deg, #6f4324, #23150c);
}

body.mira-account-page--level-3 {
    background-color: #9b601e;
    background-image: url("../images/account-level-3-exact.jpg");
}

.mira-account-page .mira-platform-page {
    min-height: 100vh;
}

.mira-account-page .web-user-layout {
    padding: 30px 35px 112px;
}

.mira-account-page .web-user-main,
.mira-account-page .web-user-bottom-nav__inner {
    max-width: 1210px;
}

.mira-account-page .web-user-topbar__inner {
    max-width: 1210px;
    margin: 0 auto;
}

.mira-account-page .web-user-topbar {
    padding-bottom: 23px;
}

/* Shared inner-page surfaces: levels, lessons, chats, store, profile and admin. */
.mira-account-page .card,
.mira-account-page .modal-content,
.mira-account-page .offcanvas,
.mira-account-page .dropdown-menu,
.mira-account-page .accordion-item,
.mira-account-page .list-group-item,
.mira-account-page .mira-glass-panel,
.mira-account-page .table-responsive {
    background: var(--account-panel) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 25px;
    box-shadow: none !important;
    color: var(--account-fg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.mira-account-page .card-header,
.mira-account-page .card-footer,
.mira-account-page .modal-header,
.mira-account-page .modal-footer,
.mira-account-page .accordion-button,
.mira-account-page .accordion-body,
.mira-account-page .table,
.mira-account-page .table > :not(caption) > * > * {
    background: transparent !important;
    border-color: var(--account-line) !important;
    color: var(--account-fg) !important;
}

.mira-account-page :is(h1, h2, h3, h4, h5, h6, .card-title, .form-label, label, strong),
.mira-account-page :is(.link-dark, .text-dark, .text-reset) {
    color: var(--account-fg) !important;
}

.mira-account-page :is(.text-muted, .text-body-secondary, .text-light-emphasis, .text-secondary, .form-text, .small.text-muted) {
    color: var(--account-muted) !important;
}

.mira-account-page :is(.form-control, .form-select) {
    min-height: 46px;
    border-color: rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--account-fg);
    box-shadow: none;
}

.mira-account-page :is(.form-control, .form-select)::placeholder {
    color: var(--account-muted) !important;
}

.mira-account-page :is(.form-control, .form-select):focus {
    border-color: rgba(255, 255, 255, 0.58);
    background: rgba(255, 255, 255, 0.14);
    color: var(--account-fg);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.mira-account-page .btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close) {
    border-color: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.mira-account-page :is(.btn-primary, .btn-dark, .btn-light, .btn-secondary) {
    background: var(--account-button-bg) !important;
    color: var(--account-button-fg) !important;
}

.mira-account-page :is(.btn-outline-primary, .btn-outline-dark, .btn-outline-light, .btn-outline-secondary) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--account-fg) !important;
}

.mira-account-page .alert {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    color: var(--account-fg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.mira-account-page .container,
.mira-account-page .container-fluid {
    --bs-gutter-x: 0;
}

.mira-account-page .web-user-topbar__logo {
    min-width: 64px;
    width: 64px;
    min-height: 66px;
    height: 66px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mira-account-page .web-user-topbar__logo::before {
    display: none;
}

.mira-account-page .web-user-topbar__logo img {
    width: 64px;
    max-width: 64px;
    height: 66px;
    object-fit: contain;
}

.mira-account-page .web-user-topbar__actions {
    gap: 10px;
}

.mira-account-page .web-user-user-pill,
.mira-account-page .web-user-ghost-button {
    min-height: 50px;
    padding: 5px 18px 5px 7px;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: none;
    color: var(--account-fg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.mira-account-page .web-user-ghost-button {
    padding-inline: 22px;
}

.mira-account-page .web-user-user-pill__avatar {
    width: 38px;
    height: 38px;
    font-size: 12px;
}

.mira-account-page .web-user-user-pill__name,
.mira-account-page .web-user-ghost-button {
    font-size: 13px;
    font-weight: 500;
}

.mira-account-page .account-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 14px;
}

.mira-account-page .account-stat-tile,
.mira-account-page .account-level-card,
.mira-account-page .weekly-task-card,
.mira-account-page .web-platform-banner-slider {
    background: var(--account-panel);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: none;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.mira-account-page .account-stat-tile::before,
.mira-account-page .account-stat-tile::after,
.mira-account-page .account-level-card::before,
.mira-account-page .account-level-card::after,
.mira-account-page .weekly-task-card::before,
.mira-account-page .weekly-task-card::after,
.mira-account-page .web-platform-banner-slider::before,
.mira-account-page .web-platform-banner-slider::after {
    display: none;
}

.mira-account-page .account-stat-tile {
    min-height: 92px;
    border-radius: 25px;
    padding: 17px 21px;
}

.mira-account-page .account-stat-label,
.mira-account-page .account-stat-caption,
.mira-account-page .account-income-status,
.mira-account-page .account-level-card-eyebrow,
.mira-account-page .account-level-lesson-module,
.mira-account-page .weekly-task-card-subtitle {
    color: var(--account-muted);
}

.mira-account-page .account-stat-label {
    font-size: 13px;
    margin-bottom: 2px;
}

.mira-account-page .account-stat-value {
    color: var(--account-fg);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.05;
}

.mira-account-page .account-stat-caption,
.mira-account-page .account-income-status {
    font-size: 11px;
    margin-top: 4px;
}

.mira-account-page .account-stat-tile.is-income {
    padding-right: 86px;
}

.mira-account-page .account-stat-actions {
    top: 17px;
    right: 15px;
}

.mira-account-page .account-income-update-button {
    min-height: 36px;
    border: 0;
    border-radius: 18px;
    padding: 8px 14px;
    background: var(--account-button-bg);
    color: var(--account-button-fg);
}

.mira-account-page .account-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 0;
}

.mira-account-page .account-right-stack {
    gap: 14px;
}

.mira-account-page .account-level-card,
.mira-account-page .weekly-task-card,
.mira-account-page .web-platform-banner-slider {
    margin-top: 0;
    border-radius: 29px;
}

.mira-account-page .account-level-card-title,
.mira-account-page .weekly-task-card-title,
.mira-account-page .account-level-lesson-title,
.mira-account-page .weekly-task-checklist-label,
.mira-account-page .weekly-task-report-title,
.mira-account-page .weekly-task-attachment-name {
    color: var(--account-fg);
}

.mira-account-page .account-level-card-title,
.mira-account-page .weekly-task-card-title {
    font-size: 29px;
    font-weight: 500 !important;
    text-transform: none;
}

.mira-account-page .account-level-card-top,
.mira-account-page .weekly-task-card-top {
    padding: 25px 26px 8px;
}

.mira-account-page .account-level-lessons,
.mira-account-page .weekly-task-checklist {
    padding-inline: 35px 26px;
}

.mira-account-page .account-level-lesson {
    padding: 10px 0;
}

.mira-account-page .account-level-lesson + .account-level-lesson,
.mira-account-page .weekly-task-attachment + .weekly-task-attachment {
    border-color: var(--account-line);
}

.mira-account-page .account-level-lesson-icon {
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.14);
    color: var(--account-fg);
}

.mira-account-page .account-level-lesson.is-completed .account-level-lesson-icon {
    background: rgba(0, 140, 58, 0.35);
    color: #fff;
}

.mira-account-page .account-level-lesson-title {
    font-size: 17px;
}

.mira-account-page .account-level-module-nav {
    padding: 8px 26px 22px;
}

.mira-account-page .account-level-lesson-action,
.mira-account-page .account-level-module-nav-link,
.mira-account-page .weekly-task-report-submit {
    background: var(--account-button-bg);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--account-button-fg);
}

.mira-account-page .account-level-progress-value {
    color: var(--account-fg);
}

.mira-account-page .account-level-progress-track {
    stroke: color-mix(in srgb, var(--account-fg) 20%, transparent);
}

.mira-account-page .account-level-progress-bar {
    stroke: var(--account-fg);
}

.mira-account-page .web-user-bottom-nav {
    bottom: 30px;
    padding-inline: 35px;
}

.mira-account-page .web-user-bottom-nav__inner {
    min-height: 68px;
    padding: 7px 10px;
    border-radius: 34px;
    background: var(--account-nav);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: none;
}

.mira-account-page .web-user-bottom-link {
    min-height: 53px;
    padding: 10px 18px;
    color: var(--account-muted);
    font-size: 17px;
}

.mira-account-page .web-user-bottom-link.is-active {
    background: #b39582;
    color: #f3e8e1;
    box-shadow: 0 0 74px rgba(243, 232, 225, 0.52);
}

.mira-account-page footer {
    display: none;
}

/* Authentication is always rendered as level 0 (silver). */
.mira-web-platform--auth main.container {
    max-width: 1210px;
    padding-inline: 35px;
}

.mira-web-platform--auth .mira-auth-card {
    max-width: 596px !important;
    border-radius: 29px;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    color: #212121;
    box-shadow: none !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.mira-web-platform--auth .mira-auth-card .card-body {
    padding: clamp(26px, 4vw, 42px) !important;
}

.mira-web-platform--auth .mira-auth-card__logo {
    width: 64px;
    height: 66px;
    object-fit: contain;
    filter: none;
}

.mira-web-platform--auth .mira-auth-card__title {
    color: #212121 !important;
    font-family: "SF Pro Display", "Segoe UI", sans-serif;
    font-size: 29px;
    font-weight: 500 !important;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.mira-web-platform--auth .mira-auth-form::before {
    background: rgba(33, 33, 33, 0.12);
}

.mira-web-platform--auth .mira-auth-form :is(.form-label, .text-body-secondary) {
    color: #454545 !important;
}

.mira-web-platform--auth .mira-auth-form :is(.form-control, .form-select) {
    min-height: 50px;
    border-color: rgba(33, 33, 33, 0.18);
    background: rgba(255, 255, 255, 0.36);
    color: #212121;
}

.mira-web-platform--auth .mira-auth-form :is(.form-control, .form-select)::placeholder {
    color: #838383 !important;
}

.mira-web-platform--auth .mira-auth-form :is(.form-control, .form-select):focus {
    border-color: rgba(33, 33, 33, 0.38);
    background: rgba(255, 255, 255, 0.55);
    color: #212121;
    box-shadow: 0 0 0 3px rgba(179, 149, 130, 0.18);
}

.mira-web-platform--auth .mira-auth-form .btn-primary {
    min-height: 50px;
    background: #b39582 !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    color: #f3e8e1 !important;
    box-shadow: 0 0 40px rgba(243, 232, 225, 0.28);
    font-weight: 500;
}

.mira-web-platform--auth .mira-auth-card .btn-outline-secondary {
    border-color: rgba(33, 33, 33, 0.2);
    background: rgba(255, 255, 255, 0.34) !important;
    color: #454545 !important;
}

.mira-web-platform--auth a {
    color: #765841;
}

.mira-web-platform--auth .alert {
    color: #212121;
}

@media (max-width: 991.98px) {
    body.mira-account-page {
        background-attachment: scroll;
    }

    .mira-account-page .web-user-layout {
        padding: 18px 18px 104px;
    }

    .mira-account-page .account-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mira-account-page .account-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mira-account-page .web-user-bottom-nav {
        bottom: 12px;
        padding-inline: 12px;
    }

    .mira-account-page .web-user-bottom-link {
        min-width: 76px;
        padding-inline: 12px;
        font-size: 13px;
    }
}

@media (max-width: 575.98px) {
    .mira-web-platform--auth main.container {
        padding-inline: 16px;
    }

    .mira-web-platform--auth .mira-auth-card .card-body {
        padding: 24px 20px !important;
    }

    .mira-account-page .web-user-topbar__actions {
        gap: 6px;
    }

    .mira-account-page .web-user-user-pill__name,
    .mira-account-page .web-user-ghost-button span {
        display: none;
    }

    .mira-account-page .web-user-user-pill,
    .mira-account-page .web-user-ghost-button {
        width: 48px;
        min-width: 48px;
        padding: 5px;
        justify-content: center;
    }

    .mira-account-page .account-stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mira-account-page .account-stat-tile.is-income {
        padding-right: 94px;
    }

    .mira-account-page .account-level-lesson {
        align-items: center;
    }

    .mira-account-page .account-level-lesson-action {
        margin-left: 62px;
    }
}