/*
 * LIGHT THEME (Settings > App Theme = Light). Loaded after pages.css only when selected.
 *
 * The blue field stays for the header band (and the home/profile mastheads); page content sits on an
 * off-white sheet, #f5fafe, sampled from the reference. The sheet's top edge has rounded corners and a
 * soft dip in the middle with a grip line in it. Colour tokens flip to light values across the app, and
 * the sky values are restored wherever the blue shows through: header band, mastheads, footer, the game.
 */

/*
 * Outside the app itself everything is white: the desktop margins, the strip under the footer and the
 * overscroll at either end. Only the header bands and mastheads stay blue.
 */
html:has(body.theme-light),
body.theme-light,
html.auth-html:has(body.theme-light),
html.auth-html body.auth-body.theme-light {
    background: #ffffff;
}

.theme-light .app-shell,
.theme-light .auth-shell {
    /* Icon wells: deeper inks so the glyph reads on white. */
    --tint-violet: #6a2fe0;
    --tint-violet-bg: rgba(106, 47, 224, 0.1);
    --tint-sky: #0a78d1;
    --tint-sky-bg: rgba(10, 134, 230, 0.1);
    --tint-green: #0f8541;
    --tint-green-bg: rgba(15, 133, 65, 0.1);
    --tint-amber: #c77400;
    --tint-amber-bg: rgba(240, 150, 0, 0.12);
    --tint-pink: #d6337f;
    --tint-pink-bg: rgba(214, 51, 127, 0.1);

    color: var(--color-text);
    --color-bg: #f5fafe;
    --color-text: #0f1b3d;
    --color-text-muted: #5b6b86;
    --color-text-dim: #7d8ba3;
    --color-icon: #0f1b3d;
    --color-surface: #ffffff;
    --color-surface-subtle: #eef4fb;
    --color-surface-raised: #ffffff;
    --color-sheet: #ffffff;
    --color-field-bg: #ffffff;
    --color-border: #dbe5f2;
    --color-border-subtle: #e8eff8;
    --color-action-text: #1b54e1;
    --color-action-light: #1b54e1;
    --color-action-soft: rgba(27, 84, 225, 0.1);
    --color-brand-accent: #f08c00;
    --color-success: #0f8541;
    --color-success-bg: rgba(15, 133, 65, 0.1);
    --color-danger: #d92d3f;
    --color-danger-bg: rgba(217, 45, 63, 0.1);
    --color-warning: #b86e00;
    --color-warning-bg: rgba(240, 160, 0, 0.12);
    --color-shadow: rgba(16, 40, 90, 0.08);
    --block-face: linear-gradient(180deg, #ffffff, #eef4fb);
    --block-edge: #c9d8ee;
    --block-shine: inset 0 1px 0 #ffffff;
    --sheet-bg: #ffffff;
    --sheet-border: #e1eaf5;
}

/* Blue areas keep the sky tokens exactly as the sky theme has them. */
.theme-light .page-header,
.theme-light .home-balance,
.theme-light .profile-hero,
.theme-light .mines,
.theme-light .bank-card {
    color: var(--color-text);
    --color-bg: #1b54e1;
    --color-text: #ffffff;
    --color-text-muted: #e3edff;
    --color-text-dim: #c6d8ff;
    --color-icon: #ffffff;
    --color-surface: rgb(255 255 255 / 12%);
    --color-surface-subtle: rgb(255 255 255 / 8%);
    --color-surface-raised: rgb(255 255 255 / 18%);
    --color-sheet: #1f5ae6;
    --color-field-bg: rgb(6 30 120 / 28%);
    --color-border: rgb(255 255 255 / 24%);
    --color-border-subtle: rgb(255 255 255 / 13%);
    --color-action-text: #ffe9a8;
    --color-action-light: #ffd66b;
    --color-action-soft: rgba(255, 214, 107, 0.18);
    --color-brand-accent: #ffd66b;
    --color-success: #9bffc0;
    --color-success-bg: rgba(74, 222, 128, 0.2);
    --color-danger: #ffc2c2;
    --color-danger-bg: rgba(255, 110, 110, 0.22);
    --color-warning: #ffe08a;
    --color-warning-bg: rgba(255, 200, 87, 0.2);
    --color-shadow: rgba(6, 26, 110, 0.35);
    --block-face: linear-gradient(180deg, rgb(255 255 255 / 24%), rgb(255 255 255 / 10%));
    --block-edge: rgb(8 34 140 / 60%);
    --block-shine: inset 0 1px 0 rgb(255 255 255 / 38%);
    --sheet-bg: linear-gradient(180deg, #2a64ee 0%, #1b50d8 100%);
    --sheet-border: rgb(255 255 255 / 16%);
}

/* ---------------------------------------------------------------- inner pages */

/* Everything except the mastheaded pages and the game sits on the sheet colour. */
.theme-light .app-shell:not(:has(.home, .profile-page, .mines)) {
    background: #f5fafe;
}

/*
 * The header becomes the blue band. It paints the page field itself, and grows by the height of the
 * sheet's curved edge, which is drawn at its foot in the sheet colour.
 */
.theme-light .app-shell:not(:has(.home, .profile-page, .mines)) .page-header {
    padding-bottom: 1.5rem;
    background: var(--app-backdrop);
    background-color: #1b54e1;
    box-shadow: none;
}

.theme-light .app-shell:not(:has(.home, .profile-page, .mines)) .page-header::after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    bottom: -1px;
    inset-inline-start: 0;
    height: 2rem;
    border-radius: 2rem 2rem 0 0;
    background: #f5fafe;
    -webkit-mask:
        linear-gradient(#000 0 0) left top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) right top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) left 0 top 21px / 100% calc(100% - 21px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0C38 0 50 20 80 20S122 0 160 0V22H0Z'/%3E%3C/svg%3E") center top / 160px 22px no-repeat;
    mask:
        linear-gradient(#000 0 0) left top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) right top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) left 0 top 21px / 100% calc(100% - 21px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0C38 0 50 20 80 20S122 0 160 0V22H0Z'/%3E%3C/svg%3E") center top / 160px 22px no-repeat;
    pointer-events: none;
}

/* The grip line, sitting in the dip. */
.theme-light .app-shell:not(:has(.home, .profile-page, .mines)) .page-header::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: calc(2rem - 0.625rem);
    left: 50%;
    width: 1.5rem;
    height: 0.1875rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 90%);
    transform: translateX(-50%);
}

/* ---------------------------------------------------------------- home and profile */

.theme-light .theme-sheet {
    position: relative;
    display: block;
    margin: var(--space-5) calc(var(--home-page-gutter) * -1) 0;
}

.theme-light .home .theme-sheet {
    margin-top: var(--space-2);
}

.theme-light .profile-page .theme-sheet {
    margin: 0 calc(var(--page-gutter) * -1);
}

.theme-light .theme-sheet__grip {
    position: absolute;
    z-index: 2;
    top: 0.375rem;
    left: 50%;
    display: block;
    width: 1.5rem;
    height: 0.1875rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 90%);
    transform: translateX(-50%);
}

.theme-light .theme-sheet__body {
    display: flex;
    min-height: 60dvh;
    flex-direction: column;
    padding: 1.75rem var(--home-page-gutter) var(--space-7);
    border-radius: 2rem 2rem 0 0;
    background: #f5fafe;
    color: var(--color-text);
    -webkit-mask:
        linear-gradient(#000 0 0) left top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) right top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) left 0 top 21px / 100% calc(100% - 21px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0C38 0 50 20 80 20S122 0 160 0V22H0Z'/%3E%3C/svg%3E") center top / 160px 22px no-repeat;
    mask:
        linear-gradient(#000 0 0) left top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) right top / calc(50% - 79px) 100% no-repeat,
        linear-gradient(#000 0 0) left 0 top 21px / 100% calc(100% - 21px) no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0C38 0 50 20 80 20S122 0 160 0V22H0Z'/%3E%3C/svg%3E") center top / 160px 22px no-repeat;
}

.theme-light .profile-page .theme-sheet__body {
    gap: var(--space-5);
    padding-inline: var(--page-gutter);
}

.theme-light .theme-sheet__body > :first-child {
    margin-top: 0;
}

/* The sheet runs down under the footer, so no strip of blue shows between them. */
.theme-light .home,
.theme-light .profile-page {
    padding-bottom: 0;
}

.theme-light.has-bottom-nav .app-shell:has(.theme-sheet) {
    padding-bottom: 0;
}

/*
 * On a tall screen (a tablet, or a phone in desktop mode) the content can end above the bottom of
 * the window. The sheet stretches to the bottom so the blue behind it never shows as a block there.
 */
.theme-light .app-shell:has(.theme-sheet) {
    display: flex;
    flex-direction: column;
}

.theme-light .app-shell:has(.theme-sheet) > .app-main {
    flex: 1 0 auto;
}

.theme-light .theme-sheet {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.theme-light .theme-sheet__body {
    flex: 1 0 auto;
}

.theme-light.has-bottom-nav .theme-sheet__body {
    padding-bottom: calc(var(--space-7) + var(--bottom-nav-clearance));
}

/* ---------------------------------------------------------------- surfaces on the sheet */

/* Cards are white; give them the soft lift from the reference so they separate from the sheet. */
.theme-light .app-shell .mkt-list,
.theme-light .app-shell .telegram-card,
.theme-light .app-shell .home-ticker,
.theme-light .app-shell .plan-row,
.theme-light .app-shell .task-card,
.theme-light .app-shell .profile-list,
.theme-light .app-shell .withdraw-rules,
.theme-light .app-shell .trade-balance,
.theme-light .app-shell .trade-card,
.theme-light .app-shell .recharge-notes,
.theme-light .app-shell .swap__panel {
    box-shadow: 0 0.25rem 1rem -0.25rem rgba(16, 40, 90, 0.1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.theme-light .app-shell .mkt-pair img {
    box-shadow: 0 0 0 1px var(--color-border);
}


/* Fixed action bars at the foot of a page belong to the sheet, so they are white here. */
.theme-light .recharge-foot,
.theme-light .transfer-foot {
    border-top-color: var(--color-border);
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -0.5rem 1.5rem -1rem rgba(16, 40, 90, 0.18);
}

/* Progress tracks drawn in the raised surface are white on the sheet; give them a visible groove. */
.theme-light .app-shell .vip-progress__track {
    background: #e3ebf6;
}

/* Plan cards sit in the subtle tint in the sky theme; on the sheet they are white like every other card. */
.theme-light .app-shell .plan-row {
    border-color: var(--color-border);
    background: #ffffff;
}

/*
 * Profile: the sheet starts right under the name, so the balance card sits on it. On white the
 * glass card would vanish, so it becomes a solid blue card like the withdraw balance card.
 */
.theme-light .profile-hero {
    padding-bottom: 0.5rem;
}

/* The balance block sits straight on the sheet: no card, dark figures, the outlined button in gold. */
.theme-light .profile-page .profile-wallet {
    margin-top: 0;
    padding: var(--space-1) var(--space-1) 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/*
 * On the white sheet the balance pair (profile, income) takes the home page's sky-blue key, with a
 * crisp blue outline for its partner. Gold stays the action colour on the sky theme's blue.
 */
.theme-light .profile-wallet__btn {
    background: linear-gradient(180deg, #8fe3ff 0%, #2fb2ff 55%, #0a86e6 100%);
    box-shadow:
        inset 0 0.125rem 0 rgb(255 255 255 / 45%),
        inset 0 -0.125rem 0 rgb(0 0 0 / 10%),
        0 var(--lift) 0 #05559c,
        0 0.5rem 0.875rem -0.375rem rgb(47 178 255 / 45%);
    color: #fff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 18%);
}

.theme-light .profile-wallet__btn:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 0 0 #05559c;
}

.theme-light .profile-wallet__btn.is-outline {
    border-color: #2a7ff0;
    background: #fff;
    box-shadow: none;
    color: #1663d6;
    text-shadow: none;
}


/* ---------------------------------------------------------------- footer */

/*
 * On the white sheet the footer is a flat white bar across the bottom edge, as it was before the
 * floating pill: no gap under it, no rounded corners, a hairline on top, grey tabs and colour only
 * on the current one. The sky theme keeps its floating blue pill.
 */
.theme-light .my-bottom-nav {
    bottom: 0;
    width: min(100%, var(--container-max));
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid #e3ebf6;
    border-radius: 0;
    background: rgb(255 255 255 / 96%);
    box-shadow: 0 -0.25rem 1rem rgb(16 40 90 / 6%);
}

.theme-light.has-bottom-nav {
    --bottom-nav-clearance: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 0.5rem);
}

.theme-light .my-bottom-nav a,
.theme-light .my-bottom-nav button {
    color: #7b879b;
}

.theme-light .my-bottom-nav a:not(.active) .brand-icon__base {
    stroke: #6b778c;
}

.theme-light .my-bottom-nav a:not(.active) .brand-icon__accent {
    stroke: #2a67ee;
}

.theme-light .my-bottom-nav a.active {
    color: #1f5ce6;
}

.theme-light .my-bottom-nav a:not(.active) .bottom-nav__icon {
    color: #4a5164;
}