.home {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-inline-end: var(--home-page-gutter);
    padding-bottom: var(--space-5);
    padding-inline-start: var(--home-page-gutter);
}

.home-balance {
    position: relative;
    /* How far the white sheet sits under the amount; the robot leans on that edge. */
    --home-sheet-gap: var(--space-2);
    margin-top: var(--space-1);
}

/*
 * The robot mascot leans on the sheet's top edge from the header's lower-right corner. The artwork
 * is drawn leaning on a ledge: its forearm lies across the bottom at about 91% of the height, with
 * the body running a little lower on the right. The image is dropped so that line meets the sheet's
 * edge, and clipped there everywhere except under the forearm, so the body goes behind the sheet
 * while the arm lies over the white rim.
 */
.home-mascot {
    --mascot-size: min(26vw, 6rem);
    position: absolute;
    z-index: 3;
    inset-inline-end: -0.5rem;
    bottom: calc(var(--home-sheet-gap) * -1 - var(--mascot-size) * 0.09);
    display: block;
    clip-path: polygon(0 0, 100% 0, 100% 91%, 47% 91%, 47% 100%, 0 100%);
    width: var(--mascot-size);
    aspect-ratio: 1;
    -webkit-tap-highlight-color: transparent;
}

.home-mascot img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/*
 * The blink. Each lid is a patch of the visor's own navy laid over one eye, tilted with the head.
 * It sits folded away at the top of the eye and drops over it twice in quick succession every five
 * seconds, so the glowing eyes go out and come back as a double blink would. Positions are fractions of
 * the 500px artwork, so they hold at any size.
 */
.home-mascot__lid {
    position: absolute;
    border-radius: 45%;
    background: #091a4f;
    box-shadow: 0 0 0.125rem 0.0625rem #091a4f;
    transform: rotate(-14deg) scaleY(0);
    transform-origin: 50% 0;
    animation: mascot-blink 5s ease-in-out infinite;
}

.home-mascot__lid.is-left {
    top: 43.5%;
    inset-inline-start: 27%;
    width: 17%;
    height: 13%;
}

.home-mascot__lid.is-right {
    top: 37%;
    inset-inline-start: 49%;
    width: 17.5%;
    height: 13%;
}

/* Two quick blinks back to back, then the eyes stay open for the rest of the five seconds. */
@keyframes mascot-blink {
    0%, 86%, 90%, 94%, 100% { transform: rotate(-14deg) scaleY(0); }
    87.5%, 88.5%, 91.5%, 92.5% { transform: rotate(-14deg) scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .home-mascot__lid {
        display: none;
    }
}

/* The balance keeps clear of the robot. */
.home-balance__id,
.home-balance__row {
    position: relative;
    z-index: 2;
    max-width: calc(100% - min(26vw, 6rem) + 1rem);
}

.home .theme-sheet {
    z-index: 2;
}

.home-balance__id {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-body);
}

.home-balance__peek {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.home-balance__peek:active {
    color: var(--color-action-text);
}

/* Swapped by the attribute the head script sets, so a hidden balance is never painted. */
.home-balance__masked {
    display: none;
    letter-spacing: 0.08em;
}

[data-balance-hidden="1"] .home-balance__value {
    display: none;
}

[data-balance-hidden="1"] .home-balance__masked {
    display: inline;
}

.home-balance__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.home-balance__amount {
    min-width: 0;
    padding-inline-start: 0.55rem;
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.home-balance__amount span {
    margin-inline-end: 0.125rem;
}

.home-balance__amount small {
    font-size: 0.55em;
    font-weight: 800;
}

.home-balance__add {
    display: grid;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0 var(--space-4) var(--lift);
    border-radius: var(--radius-md);
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 var(--lift) 0 var(--block-action-edge),
        0 0.375rem 0.75rem -0.375rem var(--color-action-glow);
    color: var(--color-on-action);
    font-size: var(--text-sm);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.home-balance__add:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 0 0 var(--block-action-edge);
    transform: translateY(var(--lift));
}

.home-balance__actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.home-balance__actions a {
    display: flex;
    min-width: 0;
    height: 2.375rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0 0.375rem var(--lift);
    border-radius: var(--radius-md);
    background: var(--block-face);
    box-shadow:
        var(--block-shine),
        0 var(--lift) 0 var(--block-edge),
        0 0.5rem 0.875rem -0.5rem rgb(6 26 110 / 80%);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.home-balance__actions a:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 0 0 var(--block-edge);
    transform: translateY(var(--lift));
}

/* Each action gets its own coloured 3D disc with a bold white glyph (the profile's Invite / My team / Bank row). */
.home-balance__actions span {
    display: grid;
    width: 1.375rem;
    height: 1.375rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--disc-face, var(--color-action-soft));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 55%),
        0 0.125rem 0 var(--disc-edge, transparent);
    color: #fff;
    font-size: 0.8125rem;
}

.home-balance__actions .is-coral {
    --disc-face: linear-gradient(180deg, #ffb199 0%, #ff6b4a 55%, #e0442a 100%);
    --disc-edge: #9c2a16;
}

.home-balance__actions .is-sky {
    --disc-face: linear-gradient(180deg, #8fe3ff 0%, #2fb2ff 55%, #0a86e6 100%);
    --disc-edge: #05559c;
    --key-face: var(--disc-face);
    --key-edge: #05559c;
    --key-glow: rgb(47 178 255 / 45%);
}

.home-balance__actions .is-violet {
    --disc-face: linear-gradient(180deg, #d9bcff 0%, #9b5cff 55%, #6a2fe0 100%);
    --disc-edge: #3f1693;
    --key-face: var(--disc-face);
    --key-edge: #3f1693;
    --key-glow: rgb(155 92 255 / 45%);
}

.home-balance__actions .is-green {
    --disc-face: linear-gradient(180deg, #8ef0ac 0%, #22b85c 55%, #0e7a3c 100%);
    --disc-edge: #075a2b;
    --key-face: var(--disc-face);
    --key-edge: #075a2b;
    --key-glow: rgb(34 184 92 / 45%);
}

/*
 * On the home page, Withdraw, Transfer and History are the coloured 3D keys themselves, in the hues
 * the service keys used to wear (gold is left to Recharge right above): white label, and the glyph
 * on a soft white disc.
 */
.home .home-balance__actions a {
    background: var(--key-face);
    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 var(--key-edge),
        0 0.5rem 0.875rem -0.375rem var(--key-glow);
    color: #fff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 18%);
}

.home .home-balance__actions a:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 0 0 var(--key-edge);
}

.home .home-balance__actions span {
    background: rgb(255 255 255 / 24%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
}

/* The uploaded slides sit where the mission banner used to, with the same space above. */
/* The light theme's sheet wrapper (home, profile) is layout-neutral in the sky theme. */
.theme-sheet,
.theme-sheet__body {
    display: contents;
}

.theme-sheet__grip {
    display: none;
}

.home .promo-banner {
    margin-top: var(--space-5);
}

.home-plans {
    margin-top: var(--space-5);
}

.home-plans .plans-list {
    margin-top: var(--space-2);
}

.home .feature-banner {
    margin-top: var(--space-2);
}

.home-section-title {
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.375rem;
    letter-spacing: -0.00625rem;
}

/* ===== Home services: eight links in a white card, two rows of four ===== */

.quick-links {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0.875rem 0.25rem;
    margin-top: var(--space-6);
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 0.375rem 1rem -0.75rem rgb(16 40 90 / 22%);
}

.quick-link {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.quick-link span {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-icon {
    width: 2.0625rem;
    height: 2.0625rem;
    transition: transform 120ms var(--ease-out, ease-out);
}

.quick-link:active .quick-icon {
    transform: scale(0.92);
}

/* Outline icons: the main shape in a dark line, details and part of the outline in blue. */
.quick-icon__line,
.quick-icon__accent,
.quick-icon__gold {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
    /* Icons are scaled to one size; the line stays the same weight on every one. */
    vector-effect: non-scaling-stroke;
}

.quick-icon__line {
    stroke: #1f2638;
}

.quick-icon__accent {
    stroke: #2f6ff0;
}

/* The gold of the header's gift and the chat button, deep enough to read on white. */
.quick-icon__gold {
    stroke: #f2a91a;
}

/* ===== end home services ===== */

/* ===== Home rewards: Invite and Games beside check-in and upload ===== */

.home-promos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(4.5rem, 1fr));
    gap: 0.5rem;
    margin-top: var(--space-6);
}

.home-promos__card {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border: 1px solid rgb(32 64 105 / 6%);
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgb(16 40 90 / 4%);
    color: #1f2a37;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.home-promos__card.home-promos__invite {
    background: linear-gradient(135deg, #f0f9e8 0%, #e2f4e8 100%);
}

.home-promos__card.home-promos__games {
    background: linear-gradient(135deg, #f0f7ff 0%, #deecfd 100%);
}

.home-promos__invite .home-promos__text small {
    color: #42703c;
}

.home-promos__games .home-promos__text small {
    color: #466a92;
}

.home-promos__icon.is-lime {
    background: linear-gradient(145deg, #9add65 0%, #54ad37 100%);
}

.home-promos__icon.is-blue {
    background: linear-gradient(145deg, #86c5ff 0%, #4787e8 100%);
}

.home-promos__card:active {
    transform: scale(0.98);
}

.home-promos__icon {
    display: grid;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
}

.home-promos__icon.is-violet {
    background: linear-gradient(145deg, #a5a8ff 0%, #6f74f0 100%);
}

.home-promos__icon.is-green {
    background: linear-gradient(145deg, #5fe0a4 0%, #1fae74 100%);
}

.home-promos__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.home-promos__text strong {
    margin-bottom: 0.0625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.home-promos__text small {
    color: #6b7380;
    font-size: 0.6875rem;
    line-height: 1.3;
}

.home-promos__text em {
    color: #e0393e;
    font-style: normal;
    font-weight: 600;
}

/* ===== Floating live chat ===== */

/*
 * Live chat as a small gold 3D button at the right edge, just above the footer: the action colour,
 * the dark ink glyph, a red "live" dot, and a short nudge every few seconds.
 */
.chat-float {
    position: fixed;
    z-index: 850;
    inset-inline-end: calc(max(0px, (100vw - var(--container-max)) / 2) + var(--page-gutter));
    bottom: calc(var(--bottom-nav-clearance, 6rem) + 0.75rem);
    display: grid;
    width: 2.875rem;
    height: 2.875rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 0.1875rem 0 var(--block-action-edge),
        0 0.5rem 1rem -0.25rem rgb(6 26 110 / 45%);
    color: var(--color-on-action);
    font-size: 1.5rem;
    cursor: pointer;
    animation: float-nudge 3.2s ease-in-out infinite;
    transform-origin: 50% 90%;
}

.chat-float__live {
    position: absolute;
    top: 0.0625rem;
    inset-inline-end: 0.0625rem;
    width: 0.625rem;
    height: 0.625rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ff3b30;
}

.chat-float:active {
    animation: none;
    box-shadow: var(--block-action-shine), 0 0 0 var(--block-action-edge);
    transform: translateY(0.1875rem);
}

@keyframes float-nudge {
    0%, 62%, 100% { transform: rotate(0) scale(1); }
    66% { transform: rotate(-12deg) scale(1.06); }
    70% { transform: rotate(10deg) scale(1.06); }
    74% { transform: rotate(-8deg) scale(1.04); }
    78% { transform: rotate(6deg) scale(1.02); }
    82% { transform: rotate(-3deg); }
    86% { transform: rotate(0); }
}

/* The header's check-in gift gives the same shake while a reward is waiting. */
.page-header__gift.is-ready .brand-icon {
    animation: float-nudge 2.6s ease-in-out infinite;
    transform-origin: 50% 80%;
}

@media (prefers-reduced-motion: reduce) {
    .chat-float,
    .page-header__gift.is-ready .brand-icon {
        animation: none;
    }
}

/* ===== Home ticker ===== */

/*
 * One card that holds the whole section, heading included, with the notices crawling inside it. The
 * heading used to sit out on the page above a bare list of rows, which read as two separate things
 * and left the notices with nothing holding them.
 *
 * The viewport height is whole rows, because the loop below relies on the two halves of the track
 * measuring the same and a part row at the fold would show the seam.
 */
.home-ticker {
    --ticker-row: 3.125rem;
    --ticker-rows: 4;

    margin-top: var(--space-6);
    padding: 0.75rem var(--card-pad) 0.25rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.home-ticker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.home-ticker__title {
    margin: 0;
    font-size: var(--text-body);
    font-weight: 700;
}

.home-ticker__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(22 163 74 / 10%);
    color: #15803d;
    font-size: var(--text-xs);
    font-weight: 700;
}

.home-ticker__viewport {
    overflow: hidden;
    height: calc(var(--ticker-row) * var(--ticker-rows));
    margin-top: 0.25rem;
}

/* Only a scrolling list fades in and out at its edges. */
.home-ticker:not(.is-static) .home-ticker__viewport {
    mask-image: linear-gradient(180deg, transparent, #000 0.6rem, #000 calc(100% - 0.6rem), transparent);
}

.home-ticker:not(.is-static) .home-ticker__track {
    animation: home-ticker-up 60s linear infinite;
}

/* Every row keeps its rule, the last one included, so the loop has no seam. */
.home-ticker__row {
    display: flex;
    height: var(--ticker-row);
    align-items: center;
    gap: 0.625rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.home-ticker.is-static .home-ticker__row:last-child {
    border-bottom: 0;
}

/* The member's initial in their colour. */
.home-ticker__avatar {
    display: grid;
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tint) 14%, #fff);
    color: var(--tint);
    font-size: var(--text-sm);
    font-weight: 800;
}

.home-ticker__text {
    display: grid;
    flex: 1;
    min-width: 0;
}

.home-ticker__who {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 700;
}

.home-ticker__who em {
    padding: 0 0.375rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffe08a 0%, #f5a623 100%);
    color: #4a3200;
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.5;
}

.home-ticker__line {
    overflow: hidden;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-ticker__amount {
    flex: none;
    color: #16a34a;
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

@keyframes home-ticker-up {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-ticker__track {
        animation: none !important;
    }
}
/* ===== end Home ticker ===== */

.home .telegram-card {
    margin-top: var(--space-5);
}

/* A section heading on the home page: the title, and a link to the full list where there is one. */
.home-heading {
    display: flex;
    height: 1.375rem;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-6);
}

.home-heading a {
    color: var(--color-action-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.mkt-list.is-tappable .mkt-row {
    cursor: pointer;
}

.home .mkt-list {
    margin-top: var(--space-5);
}

.market-page {
    gap: var(--space-4);
}

.mkt-search {
    display: grid;
    height: 2.75rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.mkt-search[hidden] {
    display: none;
}

.mkt-search iconify-icon {
    font-size: 1.125rem;
}

.mkt-search input {
    min-width: 0;
    height: 100%;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-body);
    outline: none;
}

.mkt-search input::-webkit-search-cancel-button {
    display: none;
}

.mkt-search button {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--color-text-dim);
}

/*
 * Markets, after the exchange reference: tabs across the top with a short bar under the current
 * one, then Symbol / Current price / Change. Every row is its own grid, so the price and change
 * tracks are fixed widths; sized to content they drifted row by row.
 */
.market-page .mkt-tabs {
    justify-content: flex-start;
    gap: 1.375rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.market-page .mkt-tabs button {
    font-size: var(--text-md);
    font-weight: 600;
}

.market-page .mkt-tabs button.is-active {
    font-weight: 800;
}

.market-page .mkt-tabs button.is-active::after {
    width: 2rem;
    height: 3px;
    background: var(--color-action-light);
}

.mkt-columns,
.mkt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.25rem 4.25rem;
    align-items: center;
    column-gap: 0.75rem;
}

.mkt-list {
    padding-inline: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.mkt-columns {
    height: 1.5rem;
    margin-bottom: calc(var(--space-2) * -1);
    padding-inline: calc(var(--card-pad) + 1px);
    color: var(--color-text-dim);
    font-size: var(--text-sm);
}

.mkt-columns button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.125rem;
    padding: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: 500;
}

.mkt-columns button.is-active {
    color: var(--color-text-muted);
}

.mkt-columns iconify-icon {
    font-size: 0.75rem;
    transition: transform var(--transition-fast);
}

.mkt-columns button[data-direction='asc'] iconify-icon {
    transform: rotate(180deg);
}

.mkt-row {
    height: 4rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.mkt-row[hidden] {
    display: none;
}

.mkt-row.is-last {
    border-bottom: 0;
}

.mkt-pair {
    display: grid;
    min-width: 0;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.625rem;
}

/* The instrument's picture: logo on a white disc, initials if it fails, two flags for forex. */
.mkt-avatar {
    position: relative;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: #ffffff;
    box-shadow: 0 0 0 2px rgb(255 255 255 / 14%);
}

.mkt-avatar::before {
    content: attr(data-initials);
    color: #1b54e1;
    font-size: 0.6875rem;
    font-weight: 800;
}

.mkt-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}

.mkt-avatar--pair {
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.mkt-avatar--pair img {
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid #ffffff;
    border-radius: var(--radius-pill);
    object-fit: cover;
    box-shadow: 0 1px 3px rgb(6 26 110 / 35%);
}

.mkt-avatar--pair img:first-child {
    inset: 0 auto auto 0;
}

.mkt-avatar--pair img:last-child {
    inset: auto 0 0 auto;
}

.mkt-pair > div {
    min-width: 0;
}

.mkt-pair__ticker {
    overflow: hidden;
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-pair__ticker span {
    margin-inline-start: 0.0625rem;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    font-weight: 500;
}

.mkt-pair__name {
    margin-top: 0.1875rem;
    overflow: hidden;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * The price, exchange style: the leading digits small, the last two large, coloured by the day's
 * direction. Only the figure changes on a tick; the change pill beside it carries the signal.
 */
.mkt-price {
    overflow: hidden;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-price span {
    font-size: var(--text-sm);
}

.mkt-price b {
    font-size: var(--text-lg);
    font-weight: 700;
}

.mkt-price.is-positive {
    color: #3db470;
}

.mkt-price.is-negative {
    color: #e55858;
}

/* The change is a solid pill of one width, centred in its column, like an exchange ticker. */
.mkt-change {
    display: grid;
    height: 1.625rem;
    place-items: center;
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

/* Flat green and red, taken from the exchange reference. */
.mkt-change.is-positive {
    background: #3db470;
}

.mkt-change.is-negative {
    background: #e55858;
}

.mkt-empty {
    padding: var(--space-7) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    text-align: center;
}

.mkt-empty[hidden] {
    display: none;
}

.mkt-sheet {
    position: fixed;
    z-index: 1000;
    inset: 0;
}

.mkt-sheet[hidden] {
    display: none;
}

.mkt-sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    opacity: 0;
    transition: opacity var(--transition-header);
}

.mkt-sheet.is-open .mkt-sheet__scrim {
    opacity: 1;
}

.mkt-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: grid;
    width: min(100%, var(--container-max));
    gap: var(--space-4);
    padding: var(--space-2) var(--page-gutter) max(env(safe-area-inset-bottom), var(--space-5));
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--sheet-bg);
    transform: translate(-50%, 100%);
    transition: transform 220ms ease-out;
}

.mkt-sheet.is-open .mkt-sheet__panel {
    transform: translate(-50%, 0);
}

.mkt-sheet__grab {
    width: 2.25rem;
    height: 0.25rem;
    justify-self: center;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.mkt-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mkt-sheet__head h2 {
    font-size: var(--text-md);
    font-weight: 700;
}

.mkt-sheet__head button {
    display: grid;
    width: var(--tap-target);
    height: var(--tap-target);
    place-items: center;
    margin-inline-end: calc(var(--space-2) * -1);
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
}

.mkt-sheet__head iconify-icon {
    font-size: 1.375rem;
}

.mkt-sheet__group {
    display: grid;
    gap: var(--space-2);
}

.mkt-sheet__group h3 {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.mkt-sheet__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.mkt-sheet__options button {
    height: 2.25rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.mkt-sheet__options button.is-active {
    border-color: rgba(255, 161, 31, 0.32);
    background: var(--color-action-soft);
    color: var(--color-action-text);
}

.mkt-sheet__reset {
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.market-empty {
    display: grid;
    min-height: 14rem;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    padding: var(--card-pad-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.market-empty h2 {
    color: var(--color-text);
    font-size: var(--text-md);
}

.market-empty p {
    font-size: var(--text-sm);
}

.profile-page {
    gap: var(--space-5);
}

/*
 * The banner runs to the edges of the shell, so it undoes the padding .app-main sets. No photo:
 * a violet bloom over the page blue with a faint dot grid, so it belongs to the rest of the app.
 */
.profile-hero {
    position: relative;
    overflow: hidden;
    margin: calc(var(--space-2) * -1) calc(var(--page-gutter) * -1) 0;
    padding:
        max(var(--space-6), calc(env(safe-area-inset-top) + var(--space-5)))
        var(--page-gutter)
        4rem;
}

.profile-hero__identity {
    position: relative;
    z-index: 1;
    display: grid;
    align-items: center;
    gap: var(--space-3);
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.profile-avatar {
    position: relative;
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    padding: 0;
    border: 2px solid rgb(255 255 255 / 85%);
    border-radius: var(--radius-pill);
    background: var(--block-face);
    box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 28%), 0 0.5rem 1.25rem var(--color-shadow);
    color: var(--color-icon);
    cursor: pointer;
    transition: box-shadow var(--transition-fast);
}

/* The label is the target; the input only needs to stay reachable by keyboard. */
.profile-avatar input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.profile-avatar input:focus-visible {
    outline: none;
}

.profile-avatar:focus-within {
    box-shadow: 0 0 0 0.25rem var(--color-action-light), 0 0.5rem 1.25rem var(--color-shadow);
}

.profile-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.profile-avatar.is-uploading {
    opacity: 0.55;
}

.profile-avatar__badge {
    position: absolute;
    inset-inline-end: -0.1875rem;
    bottom: -0.1875rem;
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border: 2px solid var(--color-bg);
    border-radius: var(--radius-pill);
    background: var(--block-action-face);
    color: var(--color-on-action);
}

.profile-hero__name {
    min-width: 0;
}

.profile-hero__name h1 {
    overflow: hidden;
    font-size: var(--text-lg);
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-hero__name p {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.profile-hero__name p > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.profile-hero__name p > button {
    display: grid;
    flex: none;
    place-items: center;
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.profile-hero__name p > button:hover,
.profile-hero__name p > button:focus-visible {
    background: rgb(255 255 255 / 12%);
    color: var(--color-text);
}

/* The tier is a reward, so it wears the gold block the mines game pays out in. */
/* The name and the VIP pill on one line; the name gives way if the line runs short. */
.profile-hero__title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
}

.profile-hero__title h1 {
    min-width: 0;
}

.profile-hero__name p.profile-hero__joined {
    margin-top: 0;
    font-size: var(--text-xs);
}

/* The three lines sit close together. */
.profile-hero__name h1 {
    line-height: 1.2;
}

.profile-hero__name p {
    margin-top: 0.0625rem;
    line-height: 1.3;
}

.profile-hero__name p > button {
    padding: 0.125rem;
}

/* Settings, where the level badge used to sit. */
.profile-settings {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 16%);
    color: #fff;
    font-size: 1.375rem;
    -webkit-tap-highlight-color: transparent;
}

.profile-settings:active {
    background: rgb(255 255 255 / 26%);
}

.profile-tier {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.0625rem 0.4375rem 0.125rem;
    border-radius: var(--radius-pill);
    background: var(--block-gold-face);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 60%),
        0 0.0625rem 0 var(--block-gold-edge);
    color: var(--block-gold-ink);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.profile-tier:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 0 0 var(--block-gold-edge);
    transform: translateY(0.125rem);
}

/*
 * The balance block. In the sky theme it is a glass card lifted over the banner; the light theme
 * lays it straight onto the sheet (see theme-light.css). Label and Bank card link on one line, the
 * total large, the three pots under it, then Withdraw outlined beside a filled Deposit.
 */
.profile-wallet {
    position: relative;
    z-index: 1;
    margin-top: -3rem;
    padding: var(--space-3) var(--card-pad) var(--card-pad);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(90% 120% at 100% 0%, rgb(255 255 255 / 22%), transparent 60%),
        var(--color-surface);
    box-shadow: 0 0.75rem 2rem var(--color-shadow), inset 0 1px 0 rgb(255 255 255 / 12%);
}

.profile-wallet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.profile-wallet__head a {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

.profile-wallet__amount {
    display: block;
    overflow: hidden;
    margin-top: 0.125rem;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-wallet__split {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: var(--space-3) 0 0;
}

.profile-wallet__split dt {
    white-space: nowrap;
}

.profile-wallet__split > div {
    min-width: 0;
}

.profile-wallet__split dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.profile-wallet__split dd {
    overflow: hidden;
    margin: 0.125rem 0 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-data);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-wallet__actions {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-4);
}

/* The profile's three wallet actions: Deposit solid blue, Withdrawal and Transfer on a pale blue. */
.profile-actions {
    display: grid;
    gap: 0.625rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-4);
}

.profile-action {
    display: inline-flex;
    min-width: 0;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.375rem;
    border-radius: 0.5rem;
    background: #e3f0fc;
    color: #1b2433;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: transform 90ms var(--ease-out), background var(--transition-fast);
}

.profile-action iconify-icon {
    flex: none;
    font-size: 1.125rem;
}

.profile-action.is-primary {
    background: #0a7cff;
    color: #fff;
}

.profile-action:active {
    transform: scale(0.97);
}

/* Deposit is the gold action key; Withdraw is its outlined partner. */
.profile-wallet__btn {
    display: grid;
    height: 2.375rem;
    place-items: center;
    padding-bottom: var(--lift);
    border-radius: var(--radius-md);
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 var(--lift) 0 var(--block-action-edge),
        0 0.375rem 0.75rem -0.375rem var(--color-action-glow);
    color: var(--color-on-action);
    font-size: var(--text-body);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.profile-wallet__btn:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 0 0 var(--block-action-edge);
    transform: translateY(var(--lift));
}

.profile-wallet__btn.is-outline {
    padding-bottom: 0;
    border: 1.5px solid rgb(255 255 255 / 60%);
    background: transparent;
    box-shadow: none;
    color: #fff;
    font-weight: 700;
}

.profile-wallet__btn.is-outline:active {
    transform: scale(0.98);
}

/* One card of rows per group, split by hairlines that stop short of the icon column. */
.profile-list {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.profile-list > a,
.profile-list > button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 3.125rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.375rem var(--card-pad);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
    text-align: start;
    transition: background var(--transition-fast);
}

.profile-list > * + *::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-end: var(--space-4);
    inset-inline-start: calc(var(--card-pad) + 1.5rem + var(--space-3));
    height: 1px;
    background: var(--color-border-subtle);
}

.profile-list > a:hover,
.profile-list > button:hover {
    background: var(--color-surface-raised);
}

.profile-list > a:active,
.profile-list > button:active {
    background: var(--color-action-soft);
}

.profile-list > a:focus-visible,
.profile-list > button:focus-visible {
    outline: 2px solid var(--color-action-light);
    outline-offset: -2px;
}

.profile-list > a > span,
.profile-list > button > span {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/*
 * Full-colour Fluent icons, one family across the list (the home shortcuts use the same set). They
 * carry their own colours, so they read the same on the light sheet and the sky theme's glass.
 */
.profile-list__icon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    place-items: center;
    font-size: 1.5rem;
    font-style: normal;
}

/* A value at the row's right edge, just before the chevron: the commission, the current level. */
.profile-list__meta {
    margin-inline-start: auto;
    overflow: hidden;
    color: var(--color-text-dim);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-list__meta.is-accent {
    color: var(--color-action-press);
}


.profile-list > a > iconify-icon,
.profile-list > button > iconify-icon {
    color: var(--color-text-dim);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.profile-list > a:hover > iconify-icon,
.profile-list > button:hover > iconify-icon {
    color: var(--color-text);
    transform: translateX(2px);
}

.profile-logout {
    margin: 0;
}

/*
 * Log out: a quiet row on its own, white like the list above with the words in red, so it reads as
 * part of the page but sits apart from the links and is not tapped by mistake.
 */
.profile-logout button {
    display: flex;
    width: 100%;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.375rem 1rem -0.75rem rgb(16 40 90 / 22%);
    color: var(--color-danger);
    font-size: var(--text-body);
    font-weight: 600;
    transition: background var(--transition-fast);
}

.profile-logout button:hover,
.profile-logout button:active {
    background: var(--color-danger-bg);
}

.profile-logout button:focus-visible {
    outline: 2px solid var(--color-danger);
    outline-offset: 2px;
}

.profile-logout iconify-icon {
    font-size: 1.25rem;
}

.security-form {
    display: grid;
    gap: var(--space-5);
}

.security-form .btn-submit {
    width: 100%;
    min-height: 3.5rem;
    margin-top: var(--space-2);
    border-radius: var(--radius-md);
}

html.auth-html,
html.auth-html body.auth-body {
    min-height: 100%;
    min-height: 100dvh;
    background: var(--app-backdrop);
    background-color: var(--color-bg);
}

.auth-shell {
    position: relative;
    display: block;
    min-height: 100dvh;
    padding:
        max(var(--space-3), env(safe-area-inset-top))
        var(--home-page-gutter)
        max(var(--space-5), env(safe-area-inset-bottom));
    background: transparent;
}

.auth {
    width: 100%;
    max-width: 25.875rem;
    margin-inline: auto;
    padding: 0;
}

/* The top bar: logo and name on the left, the other page as an outlined pill on the right. */
.auth-top {
    display: flex;
    max-width: 25.875rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-inline: auto;
    padding-top: var(--space-2);
}

.auth-top__brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.auth-top__brand img {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 0.5rem;
    object-fit: contain;
}

.auth-top__brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-top__action {
    flex: none;
    padding: 0.5rem 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.auth-card {
    margin-top: clamp(3.5rem, 11vh, 5rem);
}

.auth-intro {
    text-align: start;
}

.auth-intro h2 {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
}

.auth-intro p {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-body);
}

.auth-form {
    display: grid;
    gap: 0.875rem;
    margin-top: var(--space-6);
}

.auth .form-control {
    gap: var(--space-1);
}

.security-form .form-control {
    gap: var(--space-2);
}

.security-form .form-control > p:first-child {
    color: var(--color-text-muted);
    font-weight: 400;
}

.auth .form-control > div {
    min-height: 3.125rem;
    gap: var(--space-2);
    padding-inline: 1.125rem;
    border: 1px solid var(--color-border);
    border-radius: 0.875rem;
    background: var(--color-field-bg);
    color: var(--color-text);
}

.security-form .form-control > div {
    min-height: var(--input-height);
    gap: var(--space-3);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-field-bg);
    color: var(--color-icon);
}

.auth .form-control input:-webkit-autofill,
.auth .form-control input:-webkit-autofill:hover,
.auth .form-control input:-webkit-autofill:focus,
.auth .form-control input:autofill {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    caret-color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}

.security-form .form-control input:-webkit-autofill,
.security-form .form-control input:-webkit-autofill:hover,
.security-form .form-control input:-webkit-autofill:focus,
.security-form .form-control input:autofill {
    background: var(--color-field-bg) !important;
    box-shadow: 0 0 0 1000px var(--color-field-bg) inset;
    caret-color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
}

.auth .form-control > div:focus-within {
    border-color: var(--color-action-light);
    box-shadow: 0 0 0 0.1875rem var(--color-action-soft);
}

.security-form .form-control > div:focus-within {
    border-color: var(--color-action-light);
    box-shadow: 0 0 0 0.1875rem var(--color-action-soft);
}

.auth .form-control > div > iconify-icon {
    display: none;
}

.security-form .form-control > div > iconify-icon {
    flex: 0 0 auto;
}

.auth-dial {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: var(--text-body);
    line-height: 1;
}

.auth-password-toggle {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
}

.auth-password-toggle iconify-icon {
    font-size: 0.9375rem;
}

/* Two pills: the action filled, the other page outlined under it. */
.auth .btn-submit,
.auth-secondary {
    display: grid;
    width: 100%;
    min-height: 2.875rem;
    place-items: center;
    border-radius: var(--radius-pill);
    font-size: var(--text-md);
    font-weight: 600;
    transition: transform 90ms var(--ease-out), background 120ms ease;
}

.auth .btn-submit {
    margin-top: var(--space-4);
    border: 0;
    background: #2a67ee;
    color: #fff;
}

.auth-secondary {
    border: 1px solid #2a67ee;
    background: transparent;
    color: #2a67ee;
}

.auth .btn-submit:active,
.auth-secondary:active {
    transform: scale(0.98);
}

/* On the blue sky theme the filled pill is the gold action colour, the outline white. */
.theme-sky .auth .btn-submit {
    background: var(--block-action-face);
    color: var(--color-on-action);
}

.theme-sky .auth-secondary {
    border-color: rgb(255 255 255 / 70%);
    color: #fff;
}

.auth-switch {
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.auth-chat {
    position: fixed;
    inset-inline-end: max(1.25rem, env(safe-area-inset-right));
    bottom: max(6rem, calc(env(safe-area-inset-bottom) + 5rem));
    z-index: 20;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 50%;
    background: #2a67ee;
    color: #fff;
    box-shadow: 0 0.5rem 1.25rem -0.25rem rgb(42 103 238 / 45%);
}

.auth-chat iconify-icon {
    font-size: 1.5rem;
}

.auth-switch a,
.auth-back-link {
    color: var(--color-action-text);
}

.verification-card {
    display: grid;
    gap: var(--space-4);
}

.verification-card form {
    display: grid;
    gap: var(--space-5);
}

.verification-card .btn-submit {
    width: 100%;
}

.auth-back-link {
    font-size: var(--text-sm);
    text-align: center;
}

@media (max-height: 48rem) {
    .auth-card {
        margin-top: var(--space-6);
    }

    .auth-form {
        margin-top: var(--space-4);
    }
}

.verification-card__logo {
    width: min(12rem, 60vw);
    max-height: 7rem;
    margin-inline: auto;
    object-fit: contain;
}

.verification-card__message {
    display: none;
    color: var(--color-danger);
    font-size: var(--text-sm);
}

.verification-card__message.is-visible {
    display: block;
}

.verification-card__form {
    display: flex;
    gap: var(--space-2);
}

.verification-card__form input {
    min-width: 0;
    flex: 1;
    min-height: 3rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: 0;
    background: var(--color-bg);
}

.products {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.products > .title,
.income > .title {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
}

.products > .title button,
.income > .title button {
    position: relative;
    flex: 0 0 auto;
    padding: var(--space-3) 0;
    background: transparent;
    color: var(--color-text-muted);
}

.products > .title button.active,
.income > .title button.active {
    color: var(--color-text);
    font-weight: 700;
}

.products > .title button.active::after,
.income > .title button.active::after {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    inset-inline-start: 0;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    content: "";
}

.products > .title img {
    display: none;
}

.products-bag {
    display: grid;
    gap: var(--space-3);
}

.products-bag:not(.hide) {
    display: grid;
}

.product,
.income .card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.product {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
}

.product .feature-img {
    width: 100%;
    height: 100%;
    min-height: 8.5rem;
    object-fit: cover;
}

.product > div:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
}

.product > div:last-child > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.product > div:last-child > div:first-child > p {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product > div:last-child > div:nth-child(2) {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.product .sold-out {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--color-overlay);
    color: var(--color-danger);
    font-size: var(--text-lg);
    font-weight: 800;
}

.product .openProduct,
.product .Buy {
    min-height: 2rem;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.product__note {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.my,
.income,
.settings {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--page-gutter) var(--space-7);
}

.my {
    padding: 0 0 var(--space-7);
}

.my .top-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    background: var(--color-surface);
}

.my .handle,
.my-balance {
    margin-inline: var(--page-gutter);
}

.my .handle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lv-label {
    display: inline-flex;
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-action-soft);
    color: var(--color-brand-accent);
    font-size: var(--text-xs);
}

.my-balance {
    padding: var(--card-pad);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
}

.my-balance > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.my-balance > div > div p:first-child {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.my-balance > div > div p:last-child {
    margin-top: var(--space-1);
    font-size: var(--text-md);
    font-weight: 700;
}

.my-links {
    display: grid;
    gap: var(--space-2);
    padding: 0 var(--page-gutter);
}

.my-links > a {
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--card-pad);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.my-links > a > div {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.my-links svg {
    width: 1.5rem;
    height: 1.5rem;
}

.my-links svg path {
    fill: currentColor;
}

.my-links > a > div:first-child {
    color: var(--color-brand-accent);
}

.my-links > a p {
    color: var(--color-text);
}

.other-bag {
    display: flex;
    justify-content: center;
    padding: var(--card-pad);
}

.other-bag a {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-action);
}

.income .card {
    display: grid;
    gap: var(--space-3);
    padding: var(--card-pad);
}

.income .card .item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    color: var(--color-text-muted);
}

.invite,
.settings {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

/* ===== Withdrawal ===== */

/* The deposit page's pieces do the layout (recharge-form and friends); these are what withdrawal adds. */
.withdraw-page {
    padding: 0;
}

/* No bar at the foot here: the button sits under the amount, so the form needs no room for one. */
.withdraw-page .recharge-form {
    padding-bottom: var(--space-6);
}

.withdraw-amount-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.withdraw-amount-head > span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.withdraw-amount-head strong {
    margin-inline-start: 0.25rem;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-body);
    font-weight: 700;
}

/* A pill, with the plain currency symbol in front instead of the gold coin. */
.recharge-field.withdraw-field {
    border-radius: var(--radius-pill);
    padding-inline: var(--space-4) 0.5rem;
}

.recharge-field.withdraw-field > span {
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--color-text-muted);
    font-size: 1.375rem;
    font-weight: 600;
}

.withdraw-submit {
    margin-top: var(--space-2);
}

.withdraw-submit:disabled {
    background: var(--color-surface-subtle);
    box-shadow: none;
    color: var(--color-text-dim);
    cursor: not-allowed;
}

/* Where the money goes: the bound bank as a row, or an invitation to add one. */
.withdraw-bank {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
}

.withdraw-bank__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--tint-sky-bg);
    color: var(--tint-sky);
    font-size: 1.375rem;
}

.withdraw-bank__text {
    display: grid;
    min-width: 0;
    flex: 1;
}

.withdraw-bank__text strong {
    overflow: hidden;
    font-size: var(--text-body);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.withdraw-bank__text small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.withdraw-bank.is-missing .withdraw-bank__text strong {
    color: var(--color-action-press);
}

.withdraw-bank__chevron {
    flex: none;
    color: var(--color-text-dim);
}

/* Fills the most that can go out right now: the balance, capped by what is left of today's limit. */
.withdraw-all {
    flex: 0 0 auto;
    height: 1.875rem;
    padding: 0 0.875rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-action-soft);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.withdraw-form .recharge-quick button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.withdraw-rules {
    display: grid;
    gap: var(--space-2);
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.withdraw-rules strong {
    color: var(--color-text);
}

.withdraw-rules__notice {
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

/* The confirm sheet, same rise-from-the-bottom pattern as the rest of the app. */
.withdraw-sheet {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    align-items: end;
    justify-items: center;
}

.withdraw-sheet[hidden] {
    display: none;
}

.withdraw-sheet__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: var(--color-scrim);
    transition: opacity 200ms var(--ease-out);
    backdrop-filter: blur(0.1875rem);
    -webkit-backdrop-filter: blur(0.1875rem);
}

.withdraw-sheet.is-open .withdraw-sheet__scrim {
    opacity: 0.62;
}

.withdraw-sheet__panel {
    position: relative;
    display: grid;
    width: min(100%, var(--container-max));
    max-height: 88dvh;
    overflow-y: auto;
    gap: var(--space-4);
    padding:
        var(--space-5)
        var(--page-gutter)
        max(env(safe-area-inset-bottom), var(--space-5));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--sheet-bg);
    transform: translateY(100%);
    transition: transform 240ms var(--ease-out);
}

.withdraw-sheet.is-open .withdraw-sheet__panel {
    transform: none;
}

.withdraw-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.withdraw-sheet__head h2 {
    font-size: var(--text-md);
    font-weight: 700;
}

.withdraw-sheet__close {
    display: grid;
    width: var(--tap-target);
    height: var(--tap-target);
    place-items: center;
    margin-inline-end: calc(var(--space-2) * -1);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--text-xl);
}

.withdraw-sheet__quote {
    display: grid;
    gap: var(--space-2);
    padding: var(--card-pad);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.withdraw-sheet__quote div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.withdraw-sheet__quote dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.withdraw-sheet__quote dd {
    font-size: var(--text-body);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.withdraw-sheet__field {
    display: grid;
    gap: var(--space-2);
}

.withdraw-sheet__field span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.withdraw-sheet__field input {
    min-height: var(--input-height);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
}

.withdraw-sheet__field input:focus {
    border-color: var(--color-action-light);
    outline: none;
}

.withdraw-sheet__submit {
    min-height: 3.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font-size: var(--text-body);
    font-weight: 700;
}

.withdraw-sheet__submit:disabled {
    background: var(--color-surface);
    color: var(--color-text-dim);
}

.withdraw-sheet__notice {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.withdraw-sheet__actions {
    display: grid;
    gap: var(--space-3);
}

.withdraw-sheet__agree {
    min-height: var(--tap-target);
    border: 0;
    border-radius: var(--radius-pill);
    background: #2459e6;
    box-shadow: none;
    color: #fff;
    font-size: var(--text-md);
    font-weight: 700;
}

.withdraw-sheet__agree:active:not(:disabled) {
    transform: translateY(1px);
}

a.withdraw-sheet__agree {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.withdraw-sheet__disagree {
    min-height: var(--tap-target);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 600;
}

@media (max-width: 22.5rem) {
    /* Three across stops fitting the larger figures, so they go two across instead. */
    .withdraw-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ===== end Withdrawal ===== */

.round-badge {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-action-soft);
}

.round-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.task-submit,
.gift-submit,
.submit {
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
}

.invite {
    display: grid;
    gap: var(--space-3);
}

.invite .link {
    display: flex;
    gap: var(--space-2);
}

.invite .link input {
    min-width: 0;
    flex: 1;
}

.auth .form {
    display: grid;
    gap: var(--space-4);
}

.auth .form form {
    display: grid;
    gap: var(--space-4);
}

.empty-state {
    display: grid;
    min-height: 15rem;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--card-pad-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.empty-state iconify-icon {
    color: var(--color-brand-accent);
}

.empty-state h1 {
    color: var(--color-text);
    font-size: var(--text-lg);
}

.as-default {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bank-page {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-4) var(--page-gutter) var(--space-7);
}

.bank-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    aspect-ratio: 2.05;
    margin-bottom: 0.3125rem;
    padding: var(--card-pad) var(--card-pad-lg);
    border-radius: 1rem;
    background:
        linear-gradient(160deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 0%) 46%),
        linear-gradient(145deg, #4a8bff 0%, #1f56d8 52%, #0e2f9e 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 45%),
        inset 0 -1px 0 rgb(0 0 0 / 20%),
        0 0.3125rem 0 #0a2476,
        0 0.5rem 0.875rem -0.375rem rgb(6 26 110 / 55%);
    color: #fff;
}

/* A gold EMV chip: contact pads drawn with gradients, framed by a darker gold rim. */
.bank-card > .bank-card__chip {
    position: absolute;
    z-index: 1;
    top: 1rem;
    inset-inline-end: 1.25rem;
    width: 2.625rem;
    height: 2rem;
    border-radius: 0.375rem;
    background:
        linear-gradient(90deg, transparent 32%, rgb(120 70 0 / 45%) 32% 35%, transparent 35% 65%, rgb(120 70 0 / 45%) 65% 68%, transparent 68%),
        linear-gradient(180deg, transparent 30%, rgb(120 70 0 / 45%) 30% 34%, transparent 34% 66%, rgb(120 70 0 / 45%) 66% 70%, transparent 70%),
        linear-gradient(135deg, #fff1b8 0%, #ffd66b 35%, #e0a52e 70%, #b87a12 100%);
    box-shadow:
        inset 0 0 0 1px rgb(120 70 0 / 55%),
        inset 0 1px 0 rgb(255 255 255 / 70%),
        0 1px 2px rgb(0 0 0 / 35%);
}

.bank-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -38%;
    inset-inline-end: -18%;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 28%) 0%, rgb(255 255 255 / 0%) 68%);
    pointer-events: none;
}

.bank-card > * {
    position: relative;
    z-index: 1;
}

.bank-card__bank {
    padding-inline-end: 3.5rem;
    color: rgb(255 255 255 / 82%);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bank-card__number {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.bank-card__holder {
    color: rgb(255 255 255 / 78%);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bank-form {
    display: grid;
    gap: var(--space-4);
}

.bank-form .form-control > p:first-child {
    color: var(--color-text-muted);
    font-weight: 400;
}

.bank-form .form-control > div {
    min-height: var(--input-height);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
}

.bank-form__submit {
    --lift: 0.25rem;

    width: 100%;
    min-height: 3rem;
    padding-bottom: var(--lift);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 var(--lift) 0 var(--block-action-edge),
        0 0.625rem 1.25rem -0.5rem var(--color-action-glow);
    color: var(--color-on-action);
    font-size: var(--text-md);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.bank-form__submit:active {
    box-shadow: inset 0 0.125rem 0 rgb(255 255 255 / 40%), 0 0 0 var(--block-action-edge);
    transform: translateY(var(--lift));
}

.toggle {
    cursor: pointer;
}

.px-4 {
    padding-inline: var(--space-4);
}

.-mt-2 {
    margin-top: calc(var(--space-2) * -1);
}

.-mt-4 {
    margin-top: calc(var(--space-4) * -1);
}

.mb-4 {
    margin-bottom: var(--space-4);
}

.mt-10 {
    margin-top: var(--space-7);
}

.w-full {
    width: 100%;
}

.pb-20 {
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-7));
}

@media (max-width: 23rem) {
    .product {
        grid-template-columns: 5.5rem minmax(0, 1fr);
    }
}

/* ===== Income page — redesign ===== */
.income-page {
    display: flex;
    height: calc(100dvh - var(--bottom-nav-height) - max(env(safe-area-inset-bottom), 1.25rem));
    min-height: 0;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.income-page > .page-header {
    flex: 0 0 auto;
}

.income-page .page-header__icon {
    color: var(--color-text-muted);
}

.income-page > .income-tabs {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    flex: 0 0 auto;
    gap: var(--space-6);
    overflow: visible;
    padding: 0 var(--page-gutter);
    border: 0;
    box-shadow: inset 0 -1px 0 var(--color-border);
}

.income-page > .income-tabs > button {
    position: static;
    min-height: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-body);
    font-weight: 500;
}

.income-page > .income-tabs > button.active {
    color: var(--color-text);
    font-weight: 600;
}

.income-page > .income-tabs > button.active::after {
    content: none;
}

.income-page .income-tab-indicator {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--color-action);
    transition: transform 300ms ease, width 300ms ease;
}

.income-page .income-scroll {
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: var(--space-6);
    scrollbar-width: none;
}

.income-page .income-scroll::-webkit-scrollbar {
    display: none;
}

.income-page .income-panel,
.income-page .products-bag:not(.hide) {
    display: block;
}

.income-page .income-label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.income-page .income-balance {
    padding: 1.375rem var(--page-gutter) 0;
}

.income-page .income-amount {
    display: block;
    margin-top: 0.375rem;
    font-family: var(--font-numeric);
    font-size: var(--text-2xl);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.income-page .income-change {
    margin-top: 0.375rem;
    color: var(--color-success);
    font-size: var(--text-sm);
    font-weight: 600;
}

.income-page .income-change em {
    color: var(--color-text-muted);
    font-style: normal;
    font-weight: 400;
}

.income-page .income-actions {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-4);
}

.income-page .income-actions button {
    width: 100%;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* The stats and the chart are cards on the page, like the lists elsewhere. */
.income-page .income-card {
    margin: var(--space-4) var(--page-gutter) 0;
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* The panels' lists start a little below their stats card. */
.income-page .income-panel .income-stats + .income-plan-list,
.income-page .income-panel .income-stats + .income-activity {
    margin-top: var(--space-2);
}

.income-page .income-stats {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.income-page .income-stats > div {
    min-width: 0;
}

.income-page .income-stats > div + div {
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--color-border-subtle);
}

.income-page .income-stats .income-figure {
    display: block;
    overflow: hidden;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-page .income-figure {
    margin-top: 0.3125rem;
    font-size: var(--text-data);
    font-weight: 600;
}

.income-page .income-up {
    color: var(--color-success);
}

.income-page .income-chart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.income-page .income-chart__total {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-numeric);
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.income-page .income-chart__detail {
    min-height: 1.25rem;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* One bar per day, bottom-aligned, scaled to the range's best day by --h. */
.income-page .income-bars {
    display: flex;
    height: 7.5rem;
    align-items: flex-end;
    gap: 0.25rem;
    margin-top: var(--space-3);
    padding-bottom: 1px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.income-page .income-bars.is-dense {
    gap: 1px;
}

.income-page .income-bar {
    height: var(--h);
    min-width: 0;
    flex: 1 1 0;
    padding: 0;
    border: 0;
    border-radius: 0.1875rem 0.1875rem 0 0;
    background: linear-gradient(180deg, #6aa6ff, #2a67ee);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--transition-fast), height 400ms var(--ease-out);
}

.income-page .income-bar.is-empty {
    background: var(--color-border);
    opacity: 1;
}

.income-page .income-bar.is-today {
    background: var(--block-action-face);
    opacity: 1;
}

.income-page .income-bar.is-picked,
.income-page .income-bar:hover {
    opacity: 1;
}

.income-page .income-bars:has(.is-picked) .income-bar:not(.is-picked) {
    opacity: 0.35;
}

.income-page .income-bars__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

/* 7D / 30D / 90D as a small segmented control. */
.income-page .income-ranges {
    display: flex;
    padding: 0.1875rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
}

.income-page .income-ranges button {
    min-width: 2.75rem;
    height: 1.75rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.income-page .income-ranges button.is-active {
    background: var(--block-action-face);
    color: var(--color-on-action);
}

.income-page .income-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.375rem var(--page-gutter) var(--space-3);
}

.income-page .income-section-heading h2 {
    font-size: var(--text-data);
    font-weight: 600;
}

.income-page .income-section-heading button {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.income-page .income-row {
    display: block;
    width: 100%;
    padding: var(--space-4) var(--page-gutter);
    background: transparent;
    color: var(--color-text);
    text-align: start;
}

.income-page button.income-row {
    min-height: 2.75rem;
}

.income-page .income-row-primary,
.income-page .income-row-secondary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.income-page .income-row-secondary {
    margin-top: 0.3125rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.income-page .income-row-secondary > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-page .income-row-secondary > span:last-child {
    flex: 0 0 auto;
}

.income-page .income-name {
    min-width: 0;
    overflow: hidden;
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: -0.005em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-page .income-value,
.income-page .income-value-wrap {
    flex: 0 0 auto;
}

.income-page .income-value {
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.income-page .income-value-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.income-page .income-dot {
    display: inline-block;
    width: 0.3125rem;
    height: 0.3125rem;
    margin-inline-end: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-success);
    vertical-align: 0.0625rem;
}

.income-page .income-dot.is-inactive {
    background: var(--color-text-dim);
}

.income-page .income-progress {
    position: relative;
    height: 0.375rem;
    overflow: hidden;
    margin-top: 0.6875rem;
    border-radius: 999px;
    background: var(--color-border-subtle);
    /* Sunk into the card so the fill reads as liquid in a channel rather than a line drawn on top. */
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 45%);
}

.income-page .income-progress i {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-action), var(--color-action-light));
    box-shadow: 0 0 0.5rem var(--color-action-glow), inset 0 1px 0 rgb(255 255 255 / 35%);
    transition: width 800ms ease;
}

.income-page .income-progress i::after {
    position: absolute;
    animation: income-progress-sheen 2.6s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
    content: '';
    inset: 0;
}

@keyframes income-progress-sheen {
    0% {
        transform: translateX(-100%);
    }

    60%,
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .income-page .income-progress i {
        transition: none;
    }

    .income-page .income-progress i::after {
        animation: none;
        opacity: 0;
    }
}

.income-page .income-countdown {
    margin-top: 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.income-page .income-countdown b {
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.income-page .income-countdown.is-due b {
    color: var(--color-action-text);
}

.income-page .income-divider {
    height: 1px;
    margin-inline-start: var(--page-gutter);
    background: var(--color-border);
}

.income-page .income-day {
    padding: var(--space-5) var(--page-gutter) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 400;
}

.income-page .income-chevron {
    color: var(--color-text-dim);
    font-size: var(--text-sm);
    transition: transform 250ms ease;
}

.income-page [data-income-group-toggle].is-open .income-chevron {
    transform: rotate(180deg);
}

.income-page .income-sub-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms ease;
}

.income-page .income-sub-list.is-open {
    max-height: 20rem;
}

.income-page .income-sub-list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 0.5625rem var(--page-gutter) 0.5625rem calc(var(--page-gutter) + var(--space-3));
    font-size: var(--text-sm);
}

.income-page .income-sub-list > div > span {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.income-page .income-empty {
    padding: var(--space-7) var(--page-gutter);
    color: var(--color-text-muted);
    font-size: var(--text-data);
    text-align: center;
}

.income-page .income-masked {
    filter: blur(0.375rem);
    user-select: none;
}

@media (max-width: 22.5rem) {
    .income-page > .income-tabs {
        gap: var(--space-4);
    }

    .income-page .income-ranges {
        gap: var(--space-1);
    }
}
/* ===== end Income ===== */

/* ===== Investment plans ===== */
.plans-page {
    display: flex;
    height: calc(100dvh - var(--bottom-nav-height) - max(env(safe-area-inset-bottom), 1.25rem));
    min-height: 0;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.plans-page > .page-header {
    flex: 0 0 auto;
}

.plans-chips {
    display: flex;
    flex: 0 0 auto;
    gap: 0.625rem;
    overflow-x: auto;
    padding: var(--space-1) var(--page-gutter) var(--space-3);
    scrollbar-width: none;
}

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

.plans-chips button {
    height: 2rem;
    flex: 0 0 auto;
    padding-inline: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.625rem;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.plans-chips button.is-active {
    border-color: rgba(255, 161, 31, 0.32);
    background: var(--color-action-soft);
    color: var(--color-action-text);
}

.plans-scroll {
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 var(--page-gutter) var(--space-6);
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.plans-scroll::-webkit-scrollbar {
    display: none;
}

.plans-list {
    display: grid;
    gap: var(--space-3);
}

.plan-row {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 6.25rem;
    align-items: center;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    text-align: start;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.plan-row:active:not(:disabled) {
    border-color: var(--color-border);
    transform: scale(0.99);
}

.plan-row[hidden] {
    display: none;
}

.plan-row.is-sold-out {
    opacity: 0.72;
}

.plan-row__thumb {
    width: 4.5rem;
    height: 4.5rem;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
}

.plan-row__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plan-row__content {
    display: grid;
    min-width: 0;
    gap: 0.375rem;
}

.plan-row__name {
    display: block;
    overflow: hidden;
    padding-inline-end: 5.5rem;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: var(--leading-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stats stack on the left, the amount holds the right edge opposite them. */
.plan-row__body {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

.plan-row__stats {
    display: grid;
    min-width: 0;
    gap: 0.375rem;
}

.plan-row__detail {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-row__label {
    margin-inline-end: var(--space-1);
}

.plan-row__price {
    display: grid;
    flex: 0 0 auto;
    gap: 0.125rem;
    justify-items: end;
    text-align: end;
}

.plan-row__price small {
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    line-height: 1.25;
}

.plan-amount,
.plan-income,
.plan-total {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.plan-amount,
.plan-total {
    color: var(--color-text);
    font-weight: 600;
}

.plan-amount {
    font-size: var(--text-body);
    line-height: 1.25;
}

.plan-income {
    color: var(--color-success);
    font-weight: 600;
}

.plan-amount.is-long,
.plan-income.is-long,
.plan-total.is-long {
    font-size: var(--text-xs);
}

/* Carries the term length, or replaces it with the stock notice. */
.plan-row__badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: flex;
    min-width: 4.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* The padlock costs width, so the wording gives some back rather than the badge growing. */
.plan-row__badge svg {
    flex: 0 0 auto;
}

.plan-row__badge:has(svg) {
    font-size: var(--text-2xs);
}

/* The row is already dimmed as a whole, so the notice needs the brighter ink to stay legible. */
.plan-row__badge.is-out {
    color: var(--color-text);
}

@media (max-width: 22.5rem) {
    .plan-row {
        min-height: 5.75rem;
        grid-template-columns: 4rem minmax(0, 1fr);
        gap: var(--space-2);
        padding: 0.625rem;
    }

    .plan-row__thumb {
        width: 4rem;
        height: 4rem;
    }

    .plan-row__name {
        font-size: var(--text-body);
    }

    .plan-row__detail,
    .plan-amount {
        font-size: var(--text-xs);
    }
}

.plans-empty {
    padding: var(--space-7) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    text-align: center;
}

.plans-empty[hidden] {
    display: none;
}

.plans-blank {
    display: grid;
    min-height: 15rem;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
    color: var(--color-text-muted);
    text-align: center;
}

.plans-blank iconify-icon {
    color: var(--color-action-text);
}

.plans-blank h2 {
    color: var(--color-text);
    font-size: var(--text-md);
}

.plans-blank p {
    max-width: 18rem;
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.plan-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: var(--color-scrim);
}

.plan-modal[hidden] {
    display: none;
}

.plan-modal__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    display: flex;
    width: min(100%, var(--container-max));
    flex-direction: column;
    padding: max(env(safe-area-inset-top), var(--space-2)) var(--page-gutter) max(env(safe-area-inset-bottom), var(--space-5));
    opacity: 0;
    background: var(--color-bg);
    transform: translate(-50%, 0.75rem);
    transition: opacity var(--transition-header), transform var(--transition-header);
}

.plan-modal.is-open .plan-modal__panel {
    opacity: 1;
    transform: translate(-50%, 0);
}

.plan-modal__head {
    display: flex;
    min-height: var(--header-height);
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2);
}

.plan-modal__close {
    display: grid;
    width: var(--tap-target);
    height: var(--tap-target);
    place-items: center;
    margin-inline-start: calc(var(--space-2) * -1);
    padding: 0;
    background: transparent;
    color: var(--color-text);
}

.plan-modal__close svg {
    width: 1.375rem;
    height: 1.375rem;
}

.plan-modal__head h2 {
    margin-inline-end: auto;
    font-size: var(--text-md);
    font-weight: 700;
}

.plan-modal__balance {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-1);
}

.plan-modal__balance span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.plan-modal__balance strong {
    font-size: var(--text-data);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.plan-modal__balance a {
    display: grid;
    width: var(--tap-target);
    height: var(--tap-target);
    place-items: center;
    margin-inline-end: calc(var(--space-2) * -1);
    color: var(--color-action-text);
}

.plan-modal__balance iconify-icon {
    font-size: 1.25rem;
}

.plan-modal__body {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-top: var(--space-4);
    scrollbar-width: none;
}

.plan-modal__body::-webkit-scrollbar {
    display: none;
}

.plan-modal__title {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.plan-modal__rows {
    margin-top: var(--space-4);
}

.plan-modal__rows > div {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.plan-modal__rows > div[hidden] {
    display: none;
}

.plan-modal__rows > div:last-child {
    border-bottom: 0;
}

.plan-modal__rows dt {
    color: var(--color-text-muted);
    font-size: var(--text-body);
}

.plan-modal__rows dd {
    font-size: var(--text-body);
    font-weight: 600;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.plan-modal__profit {
    color: var(--color-success);
}

.plan-modal__rows > .plan-modal__field {
    min-height: 5rem;
    padding-block: var(--space-3);
}

.plan-modal__field input {
    width: 11rem;
    height: 2.5rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-field-bg);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 600;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.plan-modal__field input:focus-visible {
    border-color: var(--color-action-light);
    outline: none;
}

.plan-modal__field small {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    font-weight: 400;
    text-align: end;
}

.plan-modal__error {
    margin-top: var(--space-4);
    color: var(--color-danger);
    font-size: var(--text-sm);
}

.plan-modal__error[hidden] {
    display: none;
}

.plan-modal__hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.plan-modal__foot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.plan-modal__foot > div {
    min-width: 0;
}

.plan-modal__foot span {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.plan-modal__foot strong {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.plan-modal__pay {
    min-width: 7rem;
    height: 3rem;
    padding-inline: var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font-size: var(--text-md);
    font-weight: 700;
}

.plan-modal__pay:disabled {
    background: var(--color-surface-raised);
    color: var(--color-text-dim);
    cursor: not-allowed;
}

.plan-picker {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.plan-picker__item {
    display: grid;
    min-height: 3.5rem;
    align-items: center;
    grid-template-columns: 1.25rem 2rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.plan-picker__item.is-locked {
    opacity: 0.45;
}

.plan-picker__item:has(input:checked) {
    border-color: var(--color-action-light);
    background: var(--color-action-soft);
}

.plan-picker__item input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-action);
}

.plan-picker__item img {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    object-fit: cover;
}

.plan-picker__item > span {
    min-width: 0;
}

.plan-picker__item strong {
    display: block;
    overflow: hidden;
    font-size: var(--text-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-picker__item small {
    display: block;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

.plan-picker__item b {
    font-size: var(--text-data);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* ===== end Investment plans ===== */

/* ===== Recharge ===== */

.recharge-page {
    min-height: 100dvh;
    background: transparent;
}

.recharge-form {
    display: grid;
    gap: var(--space-5);
    padding: var(--space-4) var(--page-gutter)
        calc(5.5rem + max(env(safe-area-inset-bottom), var(--space-4)));
}

.recharge-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0 var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
}

.recharge-balance span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* The withdraw page's line on what counts as withdrawable, under the figure. */
.recharge-balance {
    flex-wrap: wrap;
}

.recharge-balance__note {
    flex-basis: 100%;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.recharge-balance strong {
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.recharge-block {
    display: grid;
    gap: var(--space-3);
}

.recharge-block h2 {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.recharge-field {
    display: flex;
    min-height: 2.875rem;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    transition: border-color var(--transition-fast);
}

.recharge-field:focus-within {
    border-color: var(--color-action-light);
}

.recharge-field span {
    color: var(--color-text-muted);
    font-size: var(--text-xl);
    font-weight: 600;
}

.recharge-field input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-xl);
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    outline: 0;
}

.recharge-quick {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Amount keys: the mines bevel; the picked one lights violet and stays half sunk. */
.recharge-quick button {
    min-height: 2.625rem;
    padding: 0 var(--space-2) var(--lift);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--block-face);
    box-shadow: var(--block-shine), 0 var(--lift) 0 var(--block-edge);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out), background var(--transition-fast);
}

.recharge-quick button:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 0 0 var(--block-edge);
    transform: translateY(var(--lift));
}

.recharge-quick button.is-active {
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 calc(var(--lift) / 2) 0 var(--block-action-edge),
        0 0.375rem 0.75rem -0.375rem var(--color-action-glow);
    color: var(--color-on-action);
    transform: translateY(calc(var(--lift) / 2));
}

.recharge-hint {
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

.recharge-hint.is-error {
    color: var(--color-danger);
}

/*
 * Channels tile three to a row, and the row count follows how many there actually are: two channels
 * take half each rather than leaving a hole where a third would have been, and four settle into two
 * rows of two instead of stranding one on its own.
 */
.recharge-methods {
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.recharge-methods:has(> :nth-child(2):last-child),
.recharge-methods:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.recharge-methods:has(> :nth-child(1):last-child) {
    grid-template-columns: minmax(0, 1fr);
}

.recharge-method {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4375rem var(--space-3) calc(0.4375rem + var(--lift)) var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--block-face);
    box-shadow: var(--block-shine), 0 var(--lift) 0 var(--block-edge);
    cursor: pointer;
    text-align: start;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.recharge-method:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 0 0 var(--block-edge);
    transform: translateY(var(--lift));
}

.recharge-method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.recharge-method img {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    border-radius: 0.25rem;
    object-fit: contain;
}

.recharge-method strong {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recharge-method iconify-icon {
    flex: 0 0 auto;
    color: var(--color-border);
    font-size: 0.875rem;
}

.recharge-methods:has(> :nth-child(1):last-child) .recharge-method {
    min-height: 3rem;
    padding-inline: var(--space-3);
}

.recharge-methods:has(> :nth-child(1):last-child) .recharge-method img {
    width: 1.75rem;
    height: 1.75rem;
}

.recharge-methods:has(> :nth-child(1):last-child) .recharge-method strong {
    font-size: var(--text-body);
}

/* The chosen channel sinks halfway and takes a violet rim, like a key that has latched. */
.recharge-method:has(input:checked) {
    box-shadow:
        inset 0 0 0 1.5px var(--color-action-light),
        0 calc(var(--lift) / 2) 0 var(--block-edge);
    transform: translateY(calc(var(--lift) / 2));
}

.recharge-method:has(input:focus-visible) {
    outline: 2px solid var(--color-action-light);
    outline-offset: 2px;
}

.recharge-method:has(input:checked) iconify-icon {
    color: var(--color-action-text);
}

.recharge-notes {
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.recharge-notes > * + * {
    margin-top: var(--space-2);
}

.recharge-notes strong {
    color: var(--color-text);
}

.recharge-foot {
    position: fixed;
    z-index: 900;
    bottom: 0;
    left: 50%;
    display: flex;
    width: min(100%, var(--container-max));
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--page-gutter)
        max(env(safe-area-inset-bottom), var(--space-3));
    border-top: 1px solid var(--color-border);
    background: var(--color-nav-bg);
    transform: translateX(-50%);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.recharge-foot span {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.recharge-foot strong {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.recharge-foot button {
    --lift: 0.25rem;

    min-width: 9rem;
    height: 3rem;
    padding: 0 var(--space-5) var(--lift);
    border-radius: var(--radius-md);
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 var(--lift) 0 var(--block-action-edge),
        0 0.625rem 1.25rem -0.5rem var(--color-action-glow);
    color: var(--color-on-action);
    font-size: var(--text-md);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.recharge-foot button:not(:disabled):active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 0 0 var(--block-action-edge);
    transform: translateY(var(--lift));
}

.recharge-foot button:disabled {
    background: var(--block-face);
    box-shadow: var(--block-shine), 0 var(--lift) 0 var(--block-edge);
    color: var(--color-text-dim);
    cursor: not-allowed;
}

/* ===== Transfer sheet ===== */

/*
 * A hand-paid deposit takes over the screen rather than opening another page: the member is going to
 * leave for their banking app and come back, and a page they can accidentally navigate away from
 * loses the reference they were told to quote.
 */
.pay-sheet {
    position: fixed;
    z-index: 1000;
    inset: 0;
    background: var(--color-page-backdrop);
}

.pay-sheet[hidden] {
    display: none;
}

.pay-sheet__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: min(100%, var(--container-max));
    overflow-y: auto;
    padding:
        calc(max(env(safe-area-inset-top), var(--space-3)) + var(--space-5))
        var(--page-gutter)
        max(env(safe-area-inset-bottom), var(--space-6));
    opacity: 0;
    background: var(--color-bg);
    transform: translate(-50%, 0.5rem);
    transition: opacity var(--transition-header), transform var(--transition-header);
    scrollbar-width: none;
}

.pay-sheet__panel::-webkit-scrollbar {
    display: none;
}

.pay-sheet.is-open .pay-sheet__panel {
    opacity: 1;
    transform: translate(-50%, 0);
}

.pay-sheet__close {
    position: absolute;
    top: max(env(safe-area-inset-top), var(--space-3));
    inset-inline-end: var(--page-gutter);
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.pay-sheet__close svg {
    width: 1rem;
    height: 1rem;
}

.pay-sheet__head {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
}

.pay-sheet__logo {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.pay-sheet__logo img {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.pay-sheet__head h2 {
    font-size: var(--text-md);
    font-weight: 700;
}

.pay-sheet__clock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-action-soft);
    color: var(--color-action-text);
    font-size: var(--text-sm);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.pay-sheet__clock.is-out {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.pay-sheet__clock iconify-icon {
    font-size: 1rem;
}

.pay-sheet__lead {
    margin-top: var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pay-sheet__card {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--card-pad);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.pay-sheet__card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pay-sheet__card dt {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pay-sheet__card dd {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text);
    font-size: var(--text-body);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: end;
}

.pay-sheet__card dd strong {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-sheet__card dd button {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--color-text-muted);
}

.pay-sheet__card dd button iconify-icon {
    font-size: 1rem;
}

.pay-sheet__note {
    margin-top: var(--space-3);
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    line-height: var(--leading-body);
}

.pay-sheet__actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.pay-sheet__paid {
    height: 3rem;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font-size: var(--text-md);
    font-weight: 700;
}

.pay-sheet__paid:disabled {
    background: var(--color-surface-raised);
    color: var(--color-text-dim);
}

.pay-sheet__dismiss {
    height: 2.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    font-weight: 600;
}

/* Sits by the row it belongs to rather than in the toast stack: it answers "did that tap work". */
.pay-sheet__copied {
    position: fixed;
    z-index: 1002;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    background: #1446c4;
    box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 45%);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.pay-sheet__copied[hidden] {
    display: none;
}

.pay-proof {
    position: absolute;
    z-index: 1001;
    display: grid;
    padding: var(--page-gutter);
    inset: 0;
    place-items: center;
    background: rgb(6 26 110 / 72%);
}

.pay-proof[hidden] {
    display: none;
}

.pay-proof__panel {
    display: grid;
    width: min(100%, 20rem);
    gap: var(--space-2);
    padding: var(--card-pad-lg);
    border: 1px solid var(--sheet-border);
    border-radius: var(--radius-lg);
    background: var(--sheet-bg);
}

.pay-proof__panel h3 {
    font-size: var(--text-md);
    font-weight: 700;
}

.pay-proof__panel > p {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pay-proof__panel label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.pay-proof__panel input {
    height: 2.75rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-size: var(--text-body);
    outline: 0;
}

.pay-proof__panel input:focus-visible {
    border-color: var(--color-action-light);
}

.pay-proof__actions {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pay-proof__cancel,
.pay-proof__submit {
    height: 2.75rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-body);
    font-weight: 700;
}

.pay-proof__cancel {
    background: var(--color-surface-raised);
    color: var(--color-text-muted);
}

.pay-proof__submit {
    background: var(--color-action);
    color: var(--color-on-action);
}

.pay-proof__submit:disabled {
    background: var(--color-surface-raised);
    color: var(--color-text-dim);
}

/* ===== end Transfer sheet ===== */

/* ===== end Recharge ===== */

/* ===== Transfer ===== */

.transfer-page {
    min-height: 100dvh;
    background: transparent;
}

.transfer-form {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-5) var(--page-gutter)
        calc(5.5rem + max(env(safe-area-inset-bottom), var(--space-4)));
}

/* The route follows the compact account switcher used by current exchange apps. */
.swap {
    position: relative;
    display: grid;
    gap: 0.625rem;
}

.swap__panel {
    display: grid;
    min-height: 5.75rem;
    align-content: center;
    align-items: center;
    padding: var(--space-3) var(--card-pad);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    column-gap: var(--space-3);
    grid-template-columns: 2.75rem minmax(0, 1fr);
    grid-template-rows: auto auto;
}

.swap__label {
    color: var(--color-text-muted);
    font-size: var(--text-body);
    grid-row: 1 / span 2;
}

.swap__pick {
    position: relative;
    display: flex;
    align-items: center;
    grid-column: 2;
}

.swap__pick select {
    width: 100%;
    min-height: 1.75rem;
    padding: 0 1.75rem 0 0;
    border: 0;
    appearance: none;
    background: transparent;
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-lg);
    font-weight: 700;
    outline: 0;
}

.swap__pick select:disabled {
    color: var(--color-text);
    opacity: 1;
}

.swap__pick iconify-icon {
    position: absolute;
    inset-inline-end: 0;
    color: var(--color-text-dim);
    pointer-events: none;
}

/* One destination is not a choice, so the chevron is dropped rather than dangled. */
.swap__pick:has(select:disabled) iconify-icon {
    display: none;
}

.swap__balance {
    overflow: hidden;
    margin-top: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    grid-column: 2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.swap__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.125rem;
    border: 0.1875rem solid var(--color-bg);
    border-radius: 50%;
    background: var(--block-action-face);
    box-shadow: var(--block-action-shine), 0 0.125rem 0 var(--block-action-edge);
    color: var(--color-on-action);
    font-size: 1.125rem;
    transform: translate(-50%, -50%);
}

.transfer-block {
    display: grid;
    gap: var(--space-2);
}

.transfer-block__label {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.transfer-lock {
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--color-border-subtle);
    background: transparent;
}

.transfer-lock h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.transfer-lock h2 iconify-icon {
    flex: 0 0 auto;
    color: var(--color-action-text);
    font-size: 1rem;
}

.transfer-lock p {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.transfer-lock p.transfer-lock__quote {
    color: var(--color-action-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.transfer-closed {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.transfer-field {
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-raised);
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow var(--transition-fast);
}

.transfer-field:focus-within {
    box-shadow: inset 0 0 0 1px var(--color-action);
}

.transfer-field > span {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.transfer-field input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-lg);
    font-weight: 700;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    outline: 0;
}

/* The fill-all control is a small key of its own, so it reads as pressable rather than as a label. */
.transfer-field button {
    flex: 0 0 auto;
    padding: 0.25rem 0.75rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--block-face);
    box-shadow: var(--block-shine), 0 0.125rem 0 var(--block-edge);
    color: var(--color-action-text);
    font-size: var(--text-sm);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.transfer-field button:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 0 0 var(--block-edge);
    transform: translateY(0.125rem);
}

.transfer-range {
    --range-progress: 0%;
    position: relative;
    height: 2.25rem;
    margin-top: var(--space-1);
}

.transfer-range input {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 100%;
    height: 1.5rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.transfer-range input::-webkit-slider-runnable-track {
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        90deg,
        var(--color-text) 0 var(--range-progress),
        var(--color-border) var(--range-progress) 100%
    );
}

.transfer-range input::-moz-range-track {
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.transfer-range input::-moz-range-progress {
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-text);
}

.transfer-range input::-webkit-slider-thumb {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: -0.375rem;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    appearance: none;
    background: var(--color-text);
    box-shadow: 0 0 0 1px var(--color-text);
    transition: transform 120ms var(--ease-out);
}

.transfer-range input::-moz-range-thumb {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--color-bg);
    border-radius: 50%;
    background: var(--color-text);
    box-shadow: 0 0 0 1px var(--color-text);
    transition: transform 120ms var(--ease-out);
}

.transfer-range input:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

.transfer-range input:active::-moz-range-thumb {
    transform: scale(1.15);
}

.transfer-range__dots {
    position: absolute;
    z-index: 1;
    top: 50%;
    inset-inline-end: 0.1875rem;
    inset-inline-start: 0.1875rem;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    transform: translateY(-50%);
}

.transfer-range__dots i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-border);
    transition: background 120ms var(--ease-out), transform 120ms var(--ease-out);
}

.transfer-range__dots i.is-active {
    background: var(--color-text);
    transform: scale(1.08);
}

/*
 * A readout, never a target. It floats up over the amount field while the thumb is moving, so
 * without this a tap that lands on it would be caught by a bubble instead of the field behind it.
 */
.transfer-range__bubble {
    position: absolute;
    z-index: 3;
    bottom: 1.875rem;
    left: clamp(1rem, var(--range-progress), calc(100% - 1rem));
    min-width: 2.25rem;
    pointer-events: none;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: var(--text-xs);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: center;
    transform: translateX(-50%);
}

.transfer-range__bubble::after {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    border: 0.25rem solid transparent;
    border-top-color: var(--color-text);
    content: '';
    transform: translateX(-50%);
}

.transfer-hint {
    min-height: 1rem;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

.transfer-hint.is-error {
    color: var(--color-danger);
}

.transfer-foot {
    position: fixed;
    z-index: 900;
    bottom: 0;
    left: 50%;
    width: min(100%, var(--container-max));
    padding: var(--space-3) var(--page-gutter)
        max(env(safe-area-inset-bottom), var(--space-3));
    border-top: 1px solid var(--color-border);
    background: var(--color-nav-bg);
    transform: translateX(-50%);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
}

.transfer-foot button {
    --lift: 0.25rem;

    width: 100%;
    height: 3rem;
    padding-bottom: var(--lift);
    border-radius: var(--radius-md);
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 var(--lift) 0 var(--block-action-edge),
        0 0.625rem 1.25rem -0.5rem var(--color-action-glow);
    color: var(--color-on-action);
    font-size: var(--text-md);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.transfer-foot button:not(:disabled):active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 0 0 var(--block-action-edge);
    transform: translateY(var(--lift));
}

.transfer-foot button:disabled {
    background: var(--block-face);
    box-shadow: var(--block-shine), 0 var(--lift) 0 var(--block-edge);
    color: var(--color-text-dim);
    cursor: not-allowed;
}

/* ===== end Transfer ===== */

/* ===== Tasks ===== */

.tasks-page {
    gap: var(--space-4);
}

.tasks-board {
    display: grid;
    gap: var(--space-2);
}

/* Two to a row. Each card stacks, and its control is pinned to the bottom so a row's buttons line up. */
.tasks-list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%);
    animation: task-card-in 240ms var(--ease-out) both;
}

.task-card__head {
    display: grid;
    gap: 0.25rem;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
}

.task-card__head h2 {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: var(--leading-tight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.task-card__reward {
    color: var(--color-success);
    font-size: var(--text-lg);
    font-weight: 800;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Sits under the figure, since where the reward lands matters less than how much it is. */
.task-card__wallet {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0;
}

.task-card__foot {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
}

.task-card__copy {
    min-width: 0;
}

.task-card__foot p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.task-card__need {
    margin-top: 0.2rem;
    color: var(--color-text-dim);
}

.task-card__action,
.task-card__state,
.task-card__locked {
    display: flex;
    width: 100%;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

/* Locked missions stay tappable so the padlock doubles as the route to finishing them. */
.task-card__locked {
    padding-bottom: var(--lift);
    background: var(--block-face);
    box-shadow: var(--block-shine), 0 var(--lift) 0 var(--block-edge);
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.task-card__locked > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-card__locked:active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 0 0 var(--block-edge);
    transform: translateY(var(--lift));
}

.task-card__locked .icon-padlock {
    flex: 0 0 auto;
}

/* Claim is the reward, so it is the gold key. */
.task-card__action {
    padding-bottom: var(--lift);
    background: var(--block-action-face);
    box-shadow:
        var(--block-action-shine),
        0 var(--lift) 0 var(--block-action-edge),
        0 0.375rem 0.75rem -0.375rem var(--color-action-glow);
    color: var(--color-on-action);
    font-size: var(--text-sm);
    font-weight: 800;
    transition: transform 90ms var(--ease-out), box-shadow 90ms var(--ease-out);
}

.task-card__action:active {
    box-shadow: inset 0 0.125rem 0 rgb(255 255 255 / 40%), 0 0 0 var(--block-action-edge);
    transform: translateY(var(--lift));
}

.task-card__state {
    background: var(--color-surface-subtle);
    box-shadow: inset 0 0 0 1px var(--color-border-subtle);
    color: var(--color-text-muted);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.task-card__state.is-done {
    background: var(--color-success-bg);
    color: var(--color-success);
}

@keyframes task-card-in {
    from {
        opacity: 0;
        transform: translateY(0.375rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-card {
        animation: none;
    }
}

/* ===== end Tasks ===== */

/* ===== Transactions ===== */
.txn-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.txn-tabs {
    padding-inline: var(--page-gutter);
}

.txn-scroll {
    padding: 0 var(--page-gutter) var(--space-6);
}

.txn-day[hidden] {
    display: none;
}

.txn-day__label {
    padding: var(--space-4) var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* One rounded card per day, with the rows divided inside it. */
.txn-card {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.txn-row {
    display: grid;
    width: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    grid-template-columns: 2.125rem minmax(0, 1fr) auto;
    background: transparent;
    text-align: start;
    transition: background var(--transition-fast);
}

.txn-row[hidden] {
    display: none;
}

.txn-row + .txn-row:not([hidden]) {
    border-top: 1px solid var(--color-border-subtle);
}

.txn-row:active {
    background: var(--color-surface-raised);
}

/*
 * The icon holder is a small 3D tile: a white paper face on a raised edge, tinted by direction
 * (green edge for money in, coral for money out), with the entry's 3D art sitting on it.
 */
.txn-row__icon,
.txn-receipt__icon {
    display: grid;
    width: 2.375rem;
    height: 2.375rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.875rem;
    background: linear-gradient(180deg, #ffffff 0%, #e8f0fb 100%);
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -2px 0 rgb(125 155 224 / 25%),
        0 0.1875rem 0 var(--txn-edge, #a9bfe8),
        0 0.5rem 0.75rem -0.5rem rgb(6 26 110 / 55%);
}

.txn-row__icon img,
.txn-receipt__icon img {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
    filter: drop-shadow(0 0.1875rem 0.1875rem rgb(6 26 110 / 25%));
}

.txn-row__icon.is-in,
.txn-receipt__icon.is-in {
    --txn-edge: #5fd08c;
}

.txn-row__icon.is-out,
.txn-receipt__icon.is-out {
    --txn-edge: #ff9a85;
}

.txn-receipt__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1.125rem;
}

.txn-receipt__icon img {
    width: 2.375rem;
    height: 2.375rem;
}

.txn-row__icon.is-crypto,
.txn-receipt__icon.is-crypto {
    position: relative;
    border-radius: 50%;
    background: none;
    box-shadow: none;
}

.txn-row__icon.is-crypto > img,
.txn-receipt__icon.is-crypto > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: none;
}

.txn-network-badge {
    position: absolute;
    right: -0.0625rem;
    bottom: -0.0625rem;
    display: grid;
    width: 1.125rem;
    height: 1.125rem;
    place-items: center;
    border: 2px solid var(--sheet-bg, #fff);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
}

.txn-receipt__icon .txn-network-badge {
    width: 1.5rem;
    height: 1.5rem;
}

.txn-row__icon .txn-network-badge img,
.txn-receipt__icon .txn-network-badge img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: none;
}

.txn-network-badge[hidden] {
    display: none;
}


.txn-row__main {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.txn-row__title {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.txn-row__sub {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.txn-row__end {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
}

.txn-row__amount {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 700;
    white-space: nowrap;
}

.txn-row__amount.is-in {
    color: var(--color-success);
}

/* A failed movement never reached the wallet, so it must not read as money gained. */
.txn-row__amount.is-void,
.txn-receipt__amount.is-void {
    color: var(--color-text-dim);
    text-decoration: line-through;
}

.txn-pill {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Settled is the ordinary case and sits on nearly every row, so it is kept quiet. Pending and
 * failed are the states worth interrupting for and keep the fuller colour.
 */
.txn-pill.is-completed {
    padding: 0;
    background: none;
    color: var(--color-text-dim);
    font-weight: 500;
}

.txn-pill.is-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.txn-pill.is-failed {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.txn-empty {
    padding: var(--space-7) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    text-align: center;
}

.txn-blank {
    display: grid;
    flex: 1;
    place-content: center;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--card-pad-lg);
    color: var(--color-text-muted);
    text-align: center;
}

.txn-blank iconify-icon {
    color: var(--color-text-dim);
}

.txn-blank h2 {
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.txn-blank__cta {
    height: var(--tap-target);
    margin-top: var(--space-3);
    padding-inline: var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: var(--tap-target);
}

/* ===== Transaction receipt ===== */
.txn-receipt {
    position: fixed;
    z-index: 1000;
    inset: 0 auto 0 50%;
    width: min(100%, var(--container-max));
    pointer-events: none;
    transform: translateX(-50%);
}

.txn-receipt.is-open {
    pointer-events: auto;
}

.txn-receipt[hidden] {
    display: none;
}

.txn-receipt__scrim {
    position: absolute;
    inset: 0;
    background: var(--color-scrim);
    opacity: 0;
    transition: opacity var(--transition-header);
    backdrop-filter: blur(0.1875rem);
    -webkit-backdrop-filter: blur(0.1875rem);
}

.txn-receipt.is-open .txn-receipt__scrim {
    opacity: 0.62;
}

.txn-receipt__panel {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    inset-inline-start: 0;
    display: grid;
    max-height: 72dvh;
    align-content: start;
    gap: var(--space-3);
    overflow-y: auto;
    box-sizing: border-box;
    padding:
        var(--space-3)
        max(var(--page-gutter), env(safe-area-inset-right, 0px))
        max(env(safe-area-inset-bottom), var(--space-5))
        max(var(--page-gutter), env(safe-area-inset-left, 0px));
    border: 1px solid var(--sheet-border);
    border-bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--sheet-bg);
    transform: translateY(100%);
    transition: transform 220ms var(--ease-out);
    scrollbar-width: none;
}

.txn-receipt__panel::-webkit-scrollbar {
    display: none;
}

.txn-receipt.is-open .txn-receipt__panel {
    transform: none;
}

.txn-receipt__grab {
    width: 2rem;
    height: 0.2rem;
    justify-self: center;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.txn-receipt__close {
    position: absolute;
    top: 0.35rem;
    inset-inline-end: 0.35rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--color-text-dim);
    font-size: 1.25rem;
}

.txn-receipt__head {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding: var(--space-2) 0 var(--space-1);
    text-align: center;
}

.txn-receipt__title {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

.txn-receipt__amount {
    font-family: var(--font-numeric);
    font-size: 1.875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.txn-receipt__amount.is-in {
    color: var(--color-success);
}

/* The status as a badge: green for done, amber while it is on its way, red when it did not go. */
.txn-receipt__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-success-bg, rgb(22 163 74 / 12%));
    color: var(--color-success);
    font-size: var(--text-xs);
    font-weight: 700;
}

.txn-receipt__status iconify-icon {
    font-size: 1rem;
}

.txn-receipt__status.is-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.txn-receipt__status.is-failed {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* Submitted, processing, completed: three dots on a line, filled as the money moves. */
.txn-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: var(--space-3) var(--space-1) 0;
    list-style: none;
}

.txn-track[hidden] {
    display: none;
}

.txn-track li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
}

/* The line to the previous step, drawn from each dot back to the one before it. */
.txn-track li + li::before {
    content: "";
    position: absolute;
    top: 0.4375rem;
    inset-inline-end: 50%;
    inset-inline-start: -50%;
    height: 2px;
    background: var(--color-border);
}

.txn-track li i {
    position: relative;
    z-index: 1;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: var(--sheet-bg);
}

.txn-track li.is-done,
.txn-track li.is-current {
    color: var(--color-text);
}

.txn-track li.is-done i {
    border-color: var(--color-success);
    background: var(--color-success);
}

.txn-track li.is-done::before,
.txn-track li.is-current::before,
.txn-track li.is-failed::before {
    background: var(--color-success);
}

.txn-track li.is-current i {
    border-color: var(--color-warning);
    background: var(--sheet-bg);
    box-shadow: 0 0 0 0.25rem var(--color-warning-bg);
}

.txn-track li.is-failed {
    color: var(--color-danger);
}

.txn-track li.is-failed i {
    border-color: var(--color-danger);
    background: var(--color-danger);
}

/* Every detail on one card, label left and value right, hairlines between. */
.txn-receipt__rows {
    display: grid;
    margin: 0;
    padding: 0 var(--card-pad);
    grid-template-columns: auto minmax(0, 1fr);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.txn-receipt__rows dt,
.txn-receipt__rows dd {
    padding: 0.6875rem 0;
    font-size: var(--text-sm);
}

.txn-receipt__rows dt:not(:first-of-type),
.txn-receipt__rows dd:not(:first-of-type) {
    border-top: 1px solid var(--color-border-subtle);
}

.txn-receipt__rows dt {
    padding-inline-end: var(--space-4);
    color: var(--color-text-muted);
}

.txn-receipt__rows dd {
    margin: 0;
    color: var(--color-text);
    font-weight: 600;
    overflow-wrap: anywhere;
    text-align: end;
}

.txn-receipt__rows dd.is-address {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.txn-receipt__rows[hidden] {
    display: none;
}

/* The reference on its own line, set in the number face, with a copy button. */
.txn-receipt__ref {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.5rem 0.5rem 0.5rem var(--card-pad);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.txn-receipt__ref[hidden] {
    display: none;
}

.txn-receipt__ref > span {
    flex: none;
    color: var(--color-text-muted);
}

.txn-receipt__ref code {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.txn-receipt__ref button {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    height: 1.875rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-action-soft);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}

.txn-receipt__done {
    height: 2.75rem;
    margin-top: var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 700;
    cursor: pointer;
}
/* ===== end Transactions ===== */

/* ===== Daily check-in ===== */

/*
 * A bottom sheet over the home page (built on .app-sheet): the run and the cumulative total on one
 * card, then the 30-day calendar on another, and the check-in button at the foot. Claiming pops a
 * reward card with confetti over the sheet.
 */
.checkin-sheet__panel {
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.checkin-sheet__grip {
    width: 2.25rem;
    height: 0.25rem;
    align-self: center;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.checkin-sheet__head {
    position: relative;
    display: grid;
    min-height: var(--tap-target);
    place-items: center;
}

.checkin-sheet__head h2 {
    font-size: var(--text-md);
    font-weight: 800;
}

.checkin-sheet__head .app-sheet__close {
    position: absolute;
    top: 50%;
    inset-inline-end: 0;
    margin: 0;
    transform: translateY(-50%);
}

/* Continuous days | cumulative, split by a hairline. */
.checkin-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0;
    padding: 0.5rem 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
}

.checkin-summary > div + div {
    border-inline-start: 1px solid var(--color-border-subtle);
}

.checkin-summary dt {
    color: var(--color-text);
    font-size: var(--text-xs);
    line-height: 1.3;
}

.checkin-summary dt b {
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.checkin-summary dd {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.checkin-calendar {
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.checkin-calendar__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkin-calendar__head img {
    width: 1.75rem;
    height: 1.75rem;
}

.checkin-calendar__head p {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.checkin-calendar__head em {
    color: #e5482e;
    font-family: var(--font-numeric);
    font-size: var(--text-lg);
    font-style: normal;
    font-weight: 800;
}

.checkin-calendar__next {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.checkin-calendar__next b {
    color: #e5482e;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* Ten days, five a row. */
.checkin-grid {
    display: grid;
    gap: 0.625rem 0.5rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

/* A day: the coin, the amount, and the day on a strip along the bottom. */
.checkin-cell {
    display: grid;
    width: 100%;
    overflow: hidden;
    justify-items: center;
    padding: 0.5rem 0 0;
    border: 0;
    border-radius: 0.875rem 0.875rem 0.5rem 0.5rem;
    background: var(--color-surface-subtle);
    color: var(--color-text);
    cursor: pointer;
}

.checkin-cell__art {
    position: relative;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
}

.checkin-cell__coin {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0.125rem 0.125rem rgb(150 80 0 / 25%));
}

/* The tick: a thick brush stroke, drawn in when the day is collected. */
/* A round check: a green disc with a white tick, a little smaller than the coin it replaces. */
.checkin-cell__tick {
    display: none;
    width: 1.375rem;
    height: 1.375rem;
    filter: drop-shadow(0 0.125rem 0.25rem rgb(22 163 74 / 35%));
}

.checkin-cell__tick circle {
    fill: #16a34a;
}

.checkin-cell__tick path {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
}

.checkin-cell__amount {
    margin-top: 0.125rem;
    font-family: var(--font-numeric);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.3;
}

.checkin-cell__day {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.1875rem 0;
    background: rgb(42 103 238 / 14%);
    color: #2a67ee;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* Collected: the tick replaces the coin, and the strip fills in. */
.checkin-cell.is-claimed {
    background: rgb(22 163 74 / 8%);
}

.checkin-cell.is-claimed .checkin-cell__coin {
    display: none;
}

.checkin-cell.is-claimed .checkin-cell__tick {
    display: block;
}

.checkin-cell.is-claimed .checkin-cell__amount {
    color: #15803d;
}

.checkin-cell.is-claimed .checkin-cell__day {
    background: linear-gradient(180deg, #4d8bff, #2a67ee);
    color: #fff;
}

.checkin-cell.is-claimed.is-just-claimed .checkin-cell__tick path {
    stroke-dasharray: 16;
    animation: checkin-tick 420ms var(--ease-out) both;
}

/* Today, still to claim: a gold ring and a coin that bobs, asking to be tapped. */
.checkin-cell.is-today {
    background: #fff8e6;
    box-shadow: inset 0 0 0 1.5px #ffb21e, 0 0.375rem 0.75rem -0.375rem rgb(255 160 0 / 60%);
}

.checkin-cell.is-today .checkin-cell__coin {
    animation: checkin-bob 1.6s ease-in-out infinite;
}

.checkin-cell.is-today .checkin-cell__day {
    background: linear-gradient(180deg, #ffd35c, #f59a0b);
    color: #3a1d00;
}

@keyframes checkin-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.125rem) scale(1.06); }
}

@keyframes checkin-tick {
    from { stroke-dashoffset: 16; }
    to { stroke-dashoffset: 0; }
}

.checkin-sheet__claim {
    width: 100%;
    height: 3rem;
    font-size: var(--text-md);
}

/* The claim key: the calculator's blue, as a pill, standing on a darker blue edge. */
.checkin-sheet .checkin-sheet__claim:not(.is-waiting) {
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 60%, #1d47c4 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 40%),
        0 var(--lift) 0 #1a3a9e,
        0 0.625rem 1.25rem -0.75rem rgb(36 89 230 / 70%);
    color: #fff;
    text-shadow: 0 1px 0 rgb(0 0 0 / 15%);
}

.checkin-sheet .checkin-sheet__claim:not(.is-waiting):active {
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 0 0 #1a3a9e;
}

.checkin-sheet__claim.is-waiting {
    border-radius: var(--radius-pill);
}

.checkin-sheet__claim.is-waiting,
.theme-light .checkin-sheet__claim.is-waiting {
    padding-bottom: 0;
    background: var(--color-surface-subtle);
    box-shadow: none;
    color: var(--color-text-muted);
    text-shadow: none;
    cursor: default;
}

/* ---------- the reward card ---------- */

.checkin-reward {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-5);
}

.checkin-reward[hidden] {
    display: none;
}

.checkin-reward__scrim {
    position: absolute;
    inset: 0;
    background: rgb(8 18 48 / 55%);
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
}

.checkin-reward.is-open .checkin-reward__scrim {
    opacity: 1;
}

.checkin-reward__card {
    position: relative;
    display: grid;
    width: min(76%, 16rem);
    justify-items: center;
    padding: 3.25rem var(--space-4) var(--space-5);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #fff1d6 0%, #ffffff 46%);
    box-shadow: 0 1.25rem 2.5rem -0.75rem rgb(8 18 48 / 55%);
    text-align: center;
    transform: scale(0.7);
    opacity: 0;
    transition: transform 360ms cubic-bezier(0.2, 1.4, 0.4, 1), opacity 200ms var(--ease-out);
}

.checkin-reward.is-open .checkin-reward__card {
    transform: none;
    opacity: 1;
}

.checkin-reward__coin {
    position: absolute;
    top: -3rem;
    width: 6rem;
    height: 6rem;
    filter: drop-shadow(0 0.75rem 1rem rgb(200 110 0 / 45%));
    animation: checkin-coin-in 700ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.checkin-reward__card h3 {
    background: linear-gradient(180deg, #ff7a3d, #e5482e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 900;
}

.checkin-reward__card p {
    margin-top: var(--space-3);
    color: #e5482e;
    font-size: var(--text-md);
    font-weight: 700;
}

.checkin-reward__card strong {
    font-family: var(--font-numeric);
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.checkin-reward__close {
    position: relative;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 25%);
    color: #fff;
    font-size: 1.75rem;
}

/* Confetti thrown out from behind the coin; it settles where it lands and stays. */
.checkin-reward__burst {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
}

.checkin-reward__burst i {
    position: absolute;
    width: 0.5rem;
    height: 0.875rem;
    border-radius: 0.125rem;
    background: var(--c);
    opacity: 0;
    animation: checkin-confetti 1800ms cubic-bezier(0.15, 0.8, 0.3, 1) var(--d) both;
}

.checkin-reward__burst i.is-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

@keyframes checkin-confetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
    100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}

@keyframes checkin-coin-in {
    from { transform: translateY(1.5rem) scale(0.4) rotate(-20deg); }
    to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .checkin-cell.is-today .checkin-cell__coin,
    .checkin-reward__coin {
        animation: none;
    }

    /* Without the throw, the confetti simply sits where it would have landed. */
    .checkin-reward__burst i {
        opacity: 1;
        animation: none;
        transform: translate(var(--x), var(--y)) rotate(var(--r));
    }
}

/* ===== end Daily check-in ===== */

/* ===== Savings (fixed plans) ===== */

.fixed-page,
.fixed-plans,
.fixed-report {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* The hero: everything saved, the running plans, and the padlock. */
.fixed-hero {
    position: relative;
    overflow: hidden;
    padding: 0.875rem var(--card-pad) var(--card-pad);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(70% 120% at 0% 0%, rgb(42 103 238 / 14%), transparent 70%),
        linear-gradient(135deg, #eaf2ff 0%, #dde9ff 100%);
}

.fixed-hero__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.fixed-hero__head h1 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.fixed-hero__head h1 span {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: #1b2433;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 600;
}

.fixed-hero__head a {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-hero__amount {
    display: block;
    margin: 0.375rem 0 0.75rem;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

/* The savings balance on the left, Top up (a savings deposit) opposite it. */
.fixed-hero__balance {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.375rem 0 0.75rem;
}

.fixed-hero__balance .fixed-hero__amount {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.fixed-hero__topup {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
    background: #2a67ee;
    box-shadow: 0 0.375rem 0.875rem -0.5rem rgb(42 103 238 / 70%);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
}

.fixed-hero__topup iconify-icon {
    font-size: 0.9375rem;
}

.fixed-hero__plans {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: calc(100% - 5.5rem);
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 75%);
    color: var(--color-text);
    font-size: var(--text-xs);
}

.fixed-hero__plans b {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    color: #2459e6;
    font-weight: 600;
    white-space: nowrap;
}

.fixed-hero__art {
    position: absolute;
    inset-inline-end: 0.75rem;
    bottom: 0.125rem;
    width: 3.75rem;
    height: 3.75rem;
    object-fit: contain;
}

.fixed-title {
    margin: 0.25rem 0 0;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 600;
}

.fixed-closed {
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: rgb(229 88 88 / 10%);
    color: #c43c3c;
    font-size: var(--text-xs);
}

/* The plans to choose from, as a table: rate, duration, Save. */
.fixed-table {
    padding: 0.25rem var(--card-pad) 0.5rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

/* The button column has a set width, so the heading and every row share the same columns. */
.fixed-table header,
.fixed-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 3.5rem;
    align-items: center;
    gap: 0.5rem;
}

.fixed-table header {
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--color-border-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-table header span:last-child {
    grid-column: span 2;
}

.fixed-row {
    padding: 0.625rem 0;
}

.fixed-row__rate {
    color: #2459e6;
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 700;
}

.fixed-row__rate small {
    font-size: var(--text-xs);
    font-weight: 600;
}

.fixed-row__days {
    color: var(--color-text);
    font-size: var(--text-sm);
}

.fixed-row__days b {
    font-family: var(--font-numeric);
    font-size: var(--text-body);
}

.fixed-save {
    display: inline-grid;
    width: 3.5rem;
    height: 1.75rem;
    place-items: center;
    padding: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 60%, #1d47c4 100%);
    box-shadow: 0 0.375rem 0.875rem -0.5rem rgb(36 89 230 / 70%);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
}

.fixed-save.is-off {
    background: var(--color-surface-subtle);
    box-shadow: none;
    color: var(--color-text-dim);
}

.fixed-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 2.5rem 0;
    color: var(--color-text-dim);
    text-align: center;
}

.fixed-empty > span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    font-size: 1.625rem;
}

.fixed-empty p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.fixed-empty a {
    color: #2459e6;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* The More sheet's rows. */
.fixed-more__item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-body);
    text-align: start;
    cursor: pointer;
}

.fixed-more__item iconify-icon {
    color: #2459e6;
    font-size: 1.5rem;
}

/* FAQs: one question per row, the answer opening beneath it. */
.fixed-faq details {
    border-bottom: 1px solid var(--color-border-subtle);
}

.fixed-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.fixed-faq summary::-webkit-details-marker {
    display: none;
}

.fixed-faq summary::after {
    color: var(--color-text-dim);
    content: "+";
    font-size: 1.125rem;
    font-weight: 400;
}

.fixed-faq details[open] summary::after {
    content: "\2212";
}

.fixed-faq details p {
    margin: 0 0 0.875rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.6;
}

/* ---------- create a plan ---------- */

.fixed-create {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fixed-card {
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.fixed-card__label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
}

.fixed-card__label--gap {
    margin-top: 0.875rem;
}

/* Save from: two pockets side by side, the picked one outlined in blue. */
.fixed-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.fixed-source {
    position: relative;
    cursor: pointer;
}

.fixed-source input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fixed-source span {
    display: grid;
    gap: 0.125rem;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.fixed-source strong {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.fixed-source small {
    color: var(--color-text-muted);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
}

.fixed-source input:checked + span {
    border-color: #2a67ee;
    background: rgb(42 103 238 / 6%);
}

.fixed-source input:focus-visible + span {
    outline: 2px solid rgb(42 103 238 / 40%);
    outline-offset: 2px;
}

.fixed-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.fixed-days {
    color: #2459e6;
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 700;
}

.fixed-amount {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 0.875rem 0.75rem;
    border-bottom: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: 1.375rem;
    font-weight: 700;
}

.fixed-amount input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    -moz-appearance: textfield;
}

.fixed-amount input::-webkit-outer-spin-button,
.fixed-amount input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.fixed-amount iconify-icon {
    color: #2459e6;
    font-size: 1.125rem;
}

.fixed-hint {
    margin: 0;
    padding: 0.5rem 0.875rem 0.75rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-hint.is-error {
    color: #e55858;
    font-weight: 600;
}

.fixed-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.fixed-line b {
    color: var(--color-text);
    font-weight: 600;
}

.fixed-line b.is-up,
.fixed-line b .is-up {
    color: #3db470;
}

.fixed-date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* The days slider: the band's ends, - and + keys either side of the track. */
.fixed-slider {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: #2459e6;
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
}

.fixed-slider button {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(42 103 238 / 12%);
    color: #2459e6;
    cursor: pointer;
}

.fixed-slider input {
    --fill: 0%;
    width: 100%;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, #2a67ee var(--fill), rgb(42 103 238 / 15%) var(--fill));
    -webkit-appearance: none;
    appearance: none;
}

.fixed-slider input::-webkit-slider-thumb {
    width: 1.375rem;
    height: 1.375rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #2a67ee;
    box-shadow: 0 0.125rem 0.375rem rgb(36 89 230 / 45%);
    -webkit-appearance: none;
}

.fixed-slider input::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #2a67ee;
}

.fixed-name {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.875rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font: inherit;
}

.fixed-foot {
    margin-top: 0.25rem;
}

.fixed-next {
    width: 100%;
    height: 2.875rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 60%, #1d47c4 100%);
    box-shadow: 0 0.625rem 1.25rem -0.75rem rgb(36 89 230 / 70%);
    color: #fff;
    font: inherit;
    font-size: var(--text-body);
    font-weight: 700;
    cursor: pointer;
}

.fixed-next:disabled {
    background: rgb(42 103 238 / 35%);
    box-shadow: none;
    cursor: default;
}

.fixed-confirm dl {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.fixed-confirm dl > div {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
}

.fixed-confirm dt {
    color: var(--color-text-muted);
}

.fixed-confirm dd {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-weight: 700;
}

.fixed-confirm dd.is-up {
    color: #3db470;
}

.fixed-confirm p {
    margin: 0 0 0.875rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* ---------- my plans ---------- */

.fixed-plans__list {
    display: grid;
    gap: 0.75rem;
}

.fixed-plans__list[hidden] {
    display: none;
}

.fixed-plan {
    display: grid;
    gap: 0.625rem;
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.fixed-plan header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.fixed-plan header div {
    display: grid;
}

.fixed-plan header strong {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.fixed-plan header small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-plan__state {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(42 103 238 / 10%);
    color: #2459e6;
    font-size: 0.625rem;
    font-weight: 700;
}

.fixed-plan__state.is-done {
    background: rgb(61 180 112 / 12%);
    color: #3db470;
}

.fixed-plan dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.fixed-plan dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-plan dd {
    margin: 0.125rem 0 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-body);
    font-weight: 700;
}

.fixed-plan dd.is-up {
    color: #3db470;
}

.fixed-plan__bar {
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: rgb(42 103 238 / 12%);
}

.fixed-plan__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2a67ee;
}

.fixed-plan footer {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ---------- savings report ---------- */

.fixed-month {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
}

.fixed-report__intro {
    margin: -0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.fixed-report__totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.fixed-report__totals > div {
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    padding: 0.875rem 0.5rem;
    text-align: center;
}

.fixed-report__totals > div + div {
    border-inline-start: 1px solid var(--color-border-subtle);
}

.fixed-report__totals span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-report__totals strong {
    color: #2459e6;
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 800;
}

.fixed-report__totals strong.is-up {
    color: #3db470;
}

.fixed-report__totals small {
    color: #3db470;
    font-size: 0.6875rem;
}

.fixed-report__totals small.is-down {
    color: #e55858;
}

.fixed-report__stats {
    display: grid;
    gap: 0.875rem;
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.fixed-report__stats h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.fixed-report__table {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.fixed-report__table > p {
    margin: 0;
    padding: 0.625rem 0.75rem;
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 100%);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
}

.fixed-report__table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    text-align: center;
}

.fixed-report__table th {
    padding: 0.5rem 0.25rem;
    color: #2459e6;
    font-weight: 600;
}

.fixed-report__table td {
    padding: 0.5rem 0.25rem;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.fixed-report__table td:first-child {
    color: var(--color-text-muted);
    font-family: inherit;
}

.fixed-report__switch {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
}

.fixed-report__switch button {
    height: 2.25rem;
    border: 1px solid #2a67ee;
    border-radius: var(--radius-pill);
    background: transparent;
    color: #2459e6;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.fixed-report__switch button.is-active {
    background: #2a67ee;
    color: #fff;
}

.fixed-ring {
    position: relative;
    width: 12rem;
    margin: 0.5rem auto 0;
}

.fixed-ring svg {
    display: block;
    width: 100%;
    height: auto;
}

.fixed-ring figcaption {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.125rem;
    text-align: center;
}

.fixed-ring strong {
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 700;
}

.fixed-ring span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.fixed-legend {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fixed-legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
}

.fixed-legend i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.fixed-legend span {
    color: var(--color-text-muted);
}

.fixed-legend b {
    color: var(--color-text);
    font-family: var(--font-numeric);
}

.fixed-months__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.fixed-months__item.is-active {
    color: #2459e6;
    font-weight: 700;
}

.fixed-months__item iconify-icon {
    font-size: 1.125rem;
}

/* ===== end Savings ===== */

/* ===== VIP ladder ===== */
.vip-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4) var(--page-gutter) var(--space-7);
}

/* ---------- badge (shared by the hero and the grid) ---------- */

/*
 * The badge artwork with the level number on the shield face. The number is sized from the badge's
 * own width (container units), so it sits in the same spot at any size: a bevelled gold figure on
 * active badges, silver on locked ones.
 */
.vip-badge {
    position: relative;
    display: inline-block;
    width: 4.5rem;
    flex: 0 0 auto;
    container-type: inline-size;
    line-height: 0;
}

.vip-badge img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0.25rem 0.375rem rgb(120 70 0 / 25%));
}

.vip-badge__level {
    position: absolute;
    top: 38%;
    left: 50%;
    background: linear-gradient(180deg, #fff6c8 0%, #ffd34d 38%, #f0a000 62%, #b86b00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34cqw;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    filter:
        drop-shadow(0 0.06em 0 #7a3f00)
        drop-shadow(0 0.1em 0.08em rgb(90 40 0 / 55%));
    -webkit-text-stroke: 0.03em #7a3a00;
    transform: translate(-50%, -50%);
}

.vip-badge.is-locked .vip-badge__level {
    background: linear-gradient(180deg, #ffffff 0%, #dfe4ec 40%, #9aa5b8 70%, #5f6a7e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter:
        drop-shadow(0 0.06em 0 #3f4757)
        drop-shadow(0 0.1em 0.08em rgb(20 25 40 / 45%));
    -webkit-text-stroke: 0.03em #394153;
}

.vip-badge.is-locked img {
    filter: drop-shadow(0 0.25rem 0.375rem rgb(40 50 70 / 18%));
}

.vip-badge--hero {
    width: 8rem;
}

/* ---------- current level ---------- */

/* Straight on the page, no card: the badge floating on a soft glow, the level, and "Active". */
.vip-hero {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    padding-top: var(--space-2);
    text-align: center;
}

.vip-hero::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 50%;
    width: 12rem;
    height: 9rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 214 107 / 45%), transparent);
    transform: translateX(-50%);
    pointer-events: none;
}

.vip-hero .vip-badge {
    margin-bottom: -0.25rem;
    animation: vip-float 3s ease-in-out infinite;
}

/* The current level as a gold pill tucked under the badge. */
.vip-hero__name {
    position: relative;
    margin: 0;
    padding: 0.25rem 0.875rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffe08a 0%, #f5a623 100%);
    box-shadow: 0 0.375rem 0.875rem -0.5rem rgb(194 120 0 / 70%);
    color: #4a3200;
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.02em;
}



/* ---------- progress ---------- */

.vip-progress header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-body);
}

.vip-progress header strong {
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* A groove the gold runs along. */
.vip-progress__track {
    overflow: hidden;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: rgb(6 26 110 / 30%);
    box-shadow: inset 0 1px 2px rgb(3 10 34 / 40%);
}

.vip-progress__fill {
    display: block;
    width: var(--vip-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, #ffe08a 0%, #ffa11f 60%, #f07800 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%);
    transition: width 600ms ease;
}

.vip-progress__note {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Trading mode: where the member stands on invites and trades against the next level. */





/* A locked level's requirements in trading mode, one per line. */
.vip-cell > .vip-cell__needs {
    display: grid;
    white-space: normal;
}

/* ---------- all levels ---------- */

.vip-levels__label {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.vip-grid {
    display: grid;
    gap: 1rem 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
}

/* No card: each level is its crest, its name and its figure, straight on the page. */
.vip-cell {
    display: grid;
    min-width: 0;
    justify-items: center;
    text-align: center;
}

.vip-cell .vip-badge {
    margin-bottom: 0.25rem;
}


.vip-cell > span {
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text-muted);
    font-family: var(--font-numeric);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}


@keyframes vip-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .vip-progress__fill {
        transition: none;
    }

    .vip-hero .vip-badge {
        animation: none;
    }
}
/* ===== end VIP ladder ===== */

/* ===== Error pages ===== */
.error-page {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:
        max(var(--space-6), env(safe-area-inset-top))
        var(--page-gutter)
        max(var(--space-6), env(safe-area-inset-bottom));
    text-align: center;
}

.error-page__art {
    line-height: 0;
}

.error-page__title {
    margin-top: var(--space-6);
    font-size: var(--text-xl);
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
}

.error-page__body {
    max-width: 22rem;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.error-page__actions {
    width: min(100%, 20rem);
    margin-top: var(--space-7);
}

.error-page__primary {
    display: grid;
    width: 100%;
    height: 3rem;
    place-items: center;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-action);
    color: var(--color-on-action);
    cursor: pointer;
    font: inherit;
    font-size: var(--text-body);
    font-weight: 700;
}

/* Far enough down, and quiet enough, that it is there to be quoted rather than read. */
.error-page__code {
    margin-top: var(--space-5);
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}
/* ===== end Error pages ===== */

/* ===== Activity — withdrawal receipts ===== */

.activity-page {
    display: flex;
    min-height: 60dvh;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) var(--page-gutter) var(--space-7);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    list-style: none;
}

/*
 * Wording on the left, receipt on the right. The thumbnail is a fixed block rather than a share of
 * the row, so a tall screenshot and a wide one sit at the same size and the column of text below
 * never shifts from card to card.
 */
.activity-card {
    display: grid;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    grid-template-columns: minmax(0, 1fr) 3.25rem;
}

.activity-card__body {
    min-width: 0;
}

.activity-card__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem var(--space-2);
    margin: 0;
}

.activity-card__who {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-card__amount {
    flex: 0 0 auto;
    color: var(--color-danger);
    font-size: var(--text-data);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.activity-card__when {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.activity-card__note {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
    overflow-wrap: anywhere;
}

.activity-card__thumb {
    display: block;
    overflow: hidden;
    width: 3.25rem;
    height: 4rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-subtle);
}

.activity-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-card__thumb:active {
    transform: scale(0.97);
}

.activity-empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-7) var(--page-gutter);
    text-align: center;
}

.activity-empty__mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface-raised);
    color: var(--color-text-dim);
}

.activity-empty__mark iconify-icon {
    font-size: 1.75rem;
}

.activity-empty strong {
    margin-top: var(--space-1);
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.activity-empty__hint {
    max-width: 16rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

/*
 * Anchored to the shell rather than the viewport, so on a wide screen it stays with the column it
 * belongs to instead of drifting off to the corner of the window.
 */
.activity-add {
    position: fixed;
    z-index: 800;
    bottom: calc(var(--bottom-nav-height) + max(env(safe-area-inset-bottom), 1.25rem) + var(--space-4));
    left: 50%;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    box-shadow: 0 0.75rem 1.5rem -0.5rem var(--color-action-glow);
    color: var(--color-on-action);
    transform: translateX(calc(min(50vw, var(--container-max) / 2) - 3.25rem - var(--page-gutter)));
    transition: transform 120ms var(--ease-out);
}

.activity-add svg {
    width: 1.5rem;
    height: 1.5rem;
}

.activity-add:active {
    transform: translateX(calc(min(50vw, var(--container-max) / 2) - 3.25rem - var(--page-gutter))) scale(0.94);
}

/* ---------- the proof sheet ---------- */

.activity-sheet {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    align-items: end;
    justify-items: center;
}

.activity-sheet[hidden] {
    display: none;
}

.activity-sheet__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: var(--color-scrim);
    transition: opacity 200ms var(--ease-out);
    backdrop-filter: blur(0.1875rem);
    -webkit-backdrop-filter: blur(0.1875rem);
}

.activity-sheet.is-open .activity-sheet__scrim {
    opacity: 0.62;
}

.activity-sheet__panel {
    position: relative;
    display: flex;
    width: min(100%, var(--container-max));
    max-height: 88dvh;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    padding:
        var(--space-5)
        var(--page-gutter)
        max(env(safe-area-inset-bottom), var(--space-5));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--sheet-bg);
    transform: translateY(100%);
    transition: transform 240ms var(--ease-out);
}

.activity-sheet.is-open .activity-sheet__panel {
    transform: none;
}

.activity-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.activity-sheet__head h2 {
    font-size: var(--text-md);
    font-weight: 700;
}

.activity-sheet__close {
    display: grid;
    width: var(--tap-target);
    height: var(--tap-target);
    place-items: center;
    margin-inline-end: calc(var(--space-2) * -1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
}

.activity-sheet__close iconify-icon {
    font-size: 1.5rem;
}

.activity-sheet__lead {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

/* The file input covers the box, so anywhere in it is the tap target. */
.activity-drop {
    position: relative;
    display: grid;
    min-height: 5.5rem;
    place-items: center;
    padding: var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: center;
}

.activity-drop input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.activity-drop__label {
    color: var(--color-text-muted);
    font-size: var(--text-body);
}

.activity-drop.is-filled {
    border-style: solid;
    border-color: var(--color-action-light);
}

.activity-drop__preview {
    display: block;
    max-height: 9rem;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.activity-drop.is-filled .activity-drop__label {
    margin-top: var(--space-2);
    color: var(--color-action-text);
    font-size: var(--text-sm);
}

.activity-sheet__field textarea {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    resize: none;
}

.activity-sheet__field textarea::placeholder {
    color: var(--color-text-dim);
}

.activity-sheet__field textarea:focus {
    border-color: var(--color-action-light);
    outline: none;
}

.activity-sheet__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

.activity-sheet__meta span:last-child {
    flex: 0 0 auto;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.activity-sheet__submit {
    display: grid;
    width: 100%;
    height: 3rem;
    place-items: center;
    margin-top: var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-action);
    color: var(--color-on-action);
    font-size: var(--text-body);
    font-weight: 700;
}

.activity-sheet__submit:disabled {
    background: var(--color-surface);
    color: var(--color-text-dim);
}

/* ---------- the receipt viewer ---------- */

/*
 * Sits above everything, including the sheet, and paints the image at whatever size fits. The close
 * button is at the foot rather than the corner, which is where a thumb already is.
 */
.activity-viewer {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--page-gutter);
    /* Plain dark behind the photo, as the video player has, so the receipt keeps its own colours. */
    background: rgb(0 0 0 / 90%);
    opacity: 0;
    transition: opacity 160ms var(--ease-out);
}

.activity-viewer[hidden] {
    display: none;
}

.activity-viewer.is-open {
    opacity: 1;
}

.activity-viewer img {
    display: block;
    max-width: 100%;
    max-height: 74dvh;
    border-radius: var(--radius-md);
    object-fit: contain;
}

.activity-viewer__close {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 14%);
    color: #fff;
}

.activity-viewer__close svg {
    width: 1.375rem;
    height: 1.375rem;
}

.activity-viewer__close:active {
    transform: scale(0.94);
}
/* ===== end Activity ===== */

/* ===== Help ===== */

/* Three cards in the support ticket style, stacked. */
.help-page {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: var(--space-2) var(--home-page-gutter) var(--space-5);
}

/* ===== end Help ===== */




/* ===== Amount fields (deposit, withdrawal) ===== */

/*
 * The amount is the one thing these pages ask for, so its field is sunk into the page with a clear
 * border, the currency sits on a small gold coin, and the figure is set large in the number face.
 */
.recharge-field {
    min-height: 3.5rem;
    gap: 0.625rem;
    padding-inline: 0.625rem var(--space-4);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-field-bg);
    box-shadow: inset 0 2px 5px rgb(6 26 110 / 14%);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.recharge-field:focus-within {
    border-color: var(--color-action-light);
    box-shadow: inset 0 2px 5px rgb(6 26 110 / 14%), 0 0 0 0.25rem var(--color-action-soft);
}

.recharge-field > span {
    display: grid;
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--block-gold-face);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%), 0 2px 0 var(--block-gold-edge);
    color: var(--block-gold-ink);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}

/*
 * Sized by the field, not by the text: an input's built-in width grows with its font, and at this size
 * it was wider than the phone, which pushed the whole form off the right edge.
 */
.recharge-field input {
    width: 0;
    min-width: 0;
    flex: 1 1 auto;
    font-family: var(--font-numeric);
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.recharge-field input::placeholder {
    color: var(--color-text-dim);
    font-weight: 600;
}

/* Withdrawal's hint states the minimum, so it is set smaller than the figure it stands in for. */
.withdraw-form .recharge-field input::placeholder {
    font-size: 1.125rem;
}

/* ===== end Amount fields ===== */

/* Sky theme has no sheet: the robot peeks out from behind the wallet buttons instead. */
.theme-sky .home .home-balance__actions {
    position: relative;
    z-index: 2;
}

.theme-sky .home-mascot {
    z-index: 1;
}

/* ===== Settings ===== */

/* Plain rows in two groups, the profile page's list without icons. */
.settings-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.settings-list > * + *::before {
    inset-inline-start: var(--card-pad);
}

.settings-doc__body {
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.settings-doc__empty {
    padding: var(--space-7) 0;
    color: var(--color-text-muted);
    text-align: center;
}

/*
 * A bottom sheet for short forms (the settings page's password change): scrim, a panel sliding up
 * from the foot, a title with a close button.
 */
.app-sheet {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    align-items: end;
    justify-items: center;
}

.app-sheet[hidden] {
    display: none;
}

.app-sheet__scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: var(--color-scrim);
    transition: opacity 200ms var(--ease-out);
    backdrop-filter: blur(0.1875rem);
    -webkit-backdrop-filter: blur(0.1875rem);
}

.app-sheet.is-open .app-sheet__scrim {
    opacity: 0.62;
}

.app-sheet__panel {
    position: relative;
    display: flex;
    width: min(100%, var(--container-max));
    max-height: 88dvh;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    margin: 0;
    padding:
        var(--space-4)
        var(--page-gutter)
        max(env(safe-area-inset-bottom), var(--space-5));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--sheet-bg);
    transform: translateY(100%);
    transition: transform 240ms var(--ease-out);
}

.app-sheet.is-open .app-sheet__panel {
    transform: none;
}

.app-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.app-sheet__head h2 {
    font-size: var(--text-md);
    font-weight: 700;
}

.app-sheet__close {
    display: grid;
    width: var(--tap-target);
    height: var(--tap-target);
    place-items: center;
    margin-inline-end: calc(var(--space-2) * -1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.5rem;
}

.app-sheet__note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* ===== end Settings ===== */

/* On the sky glass list the commission reads in white; the orange is for the light sheet. */
.theme-sky .profile-list__meta.is-accent {
    color: #fff;
}

.settings-doc__body > * + * {
    margin-top: var(--space-3);
}

.settings-doc__body :is(ul, ol) {
    padding-inline-start: var(--space-5);
}

/* ===== AI trading ===== */

.trading-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/*
 * The capital card: white, so the blue Start button stays the one strong colour on the page. The
 * label with its tip, the balance and today's PnL all centred, and the totals in a soft grey panel
 * at the bottom.
 */
.trade-balance {
    position: relative;
    overflow: hidden;
    padding: 0.875rem var(--card-pad) 0.75rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e6edf7;
    background: #fff;
    box-shadow: 0 0.5rem 1.25rem -0.875rem rgb(16 40 90 / 25%);
    color: var(--color-text);
}

/* A faint blue block pattern in the top right corner. */
.trade-balance::before {
    position: absolute;
    top: -1.5rem;
    inset-inline-end: -1rem;
    width: 7rem;
    height: 7rem;
    background:
        linear-gradient(rgb(42 103 238 / 5%), rgb(42 103 238 / 5%)) 1.5rem 1.5rem / 3rem 3rem no-repeat,
        linear-gradient(rgb(42 103 238 / 4%), rgb(42 103 238 / 4%)) 4.5rem 3rem / 1.75rem 1.75rem no-repeat;
    content: "";
    pointer-events: none;
    transform: rotate(12deg);
}

.trade-balance__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.trade-balance__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.trade-balance__tip {
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a96ab;
    font-size: 1.0625rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.trade-balance__note {
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.375rem);
    left: 50%;
    width: max-content;
    max-width: 15rem;
    transform: translateX(-50%);
    text-align: center;
    margin: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
    background: #1b2236;
    box-shadow: 0 0.5rem 1.25rem -0.5rem rgb(8 15 40 / 40%);
    color: #fff;
    font-size: var(--text-xs);
    line-height: 1.45;
}

.trade-balance__note[hidden] {
    display: none;
}

.trade-balance__amount {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.125rem 0.375rem;
    min-width: 0;
    margin: 0.375rem 0 0;
}

.trade-balance__amount strong {
    overflow-wrap: anywhere;
    font-family: var(--font-numeric);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.trade-balance__amount span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Today's PnL under the balance: green up, red down. */
.trade-balance__pnl {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.trade-balance__pnl b,
.trade-balance__pnl em {
    color: #16a34a;
    font-family: var(--font-numeric);
    font-style: normal;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.trade-balance__pnl i {
    font-style: normal;
}

.trade-balance__pnl.is-down b,
.trade-balance__pnl.is-down em {
    color: #dc2626;
}

/* The totals side by side: earnings on the left, trades on the right, a hairline between. */
.trade-balance__stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.625rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: #f4f7fc;
}

.trade-balance__stats > div {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.trade-balance__stats > div + div {
    padding-inline-start: 0.75rem;
    border-inline-start: 1px solid #e3e9f3;
    text-align: end;
}

.trade-balance__stats dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.trade-balance__stats dd {
    overflow: hidden;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.trade-section h2,
.trade-card__head h2 {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

/* Three markets, each with a round check; the picked one in brand blue. */
.trade-markets {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-2);
}

.trade-market {
    position: relative;
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 1.5px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}

.trade-market__check {
    display: grid;
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
    place-items: center;
    border: 2px solid var(--color-border);
    border-radius: 50%;
}

.trade-market.is-picked {
    border-color: #2a67ee;
    background: rgb(42 103 238 / 6%);
}

.trade-market.is-picked .trade-market__check {
    border-color: #2a67ee;
    background: #2a67ee;
    box-shadow: inset 0 0 0 0.1875rem #fff;
}

/* The market's name, and under it its yield band in a quiet grey. */
.trade-market__text {
    display: grid;
    min-width: 0;
    text-align: start;
}

.trade-market__text small {
    overflow: hidden;
    color: var(--color-text-dim);
    font-size: 0.5625rem;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-market.is-closed {
    color: var(--color-text-dim);
}

/*
 * The start button: the full brand blue, smooth, with a faint sheen along the top edge and a few
 * tiny glass flecks scattered across it that glint now and then. Nothing washes over the blue.
 * The play badge is polished white; while the robot runs it turns into a spinner and the label
 * counts up to 100%.
 */
.trade-action {
    display: grid;
}

.trade-start {
    position: relative;
    isolation: isolate;
    display: flex;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 3rem;
    border: 1px solid rgb(255 255 255 / 28%);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 60%, #1d47c4 100%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 45%),
        0 0.625rem 1.25rem -0.75rem rgb(36 89 230 / 70%);
    color: #fff;
    font-size: var(--text-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform 120ms var(--ease-out);
}

/* A faint, smooth sheen on the upper edge only. */
.trade-start::before {
    position: absolute;
    z-index: -1;
    inset: 0 0 55%;
    background: linear-gradient(180deg, rgb(255 255 255 / 16%), rgb(255 255 255 / 0%));
    content: "";
}

/* The glass flecks: tiny points of light, a few brighter, that glint softly. */
.trade-start::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 18% 30%, rgb(255 255 255 / 85%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 27% 72%, rgb(255 255 255 / 55%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 41% 22%, rgb(255 255 255 / 45%) 0 0.75px, transparent 1.25px),
        radial-gradient(circle at 63% 78%, rgb(255 255 255 / 60%) 0 1px, transparent 1.5px),
        radial-gradient(circle at 74% 26%, rgb(255 255 255 / 90%) 0 1.25px, transparent 1.75px),
        radial-gradient(circle at 86% 64%, rgb(255 255 255 / 50%) 0 0.75px, transparent 1.25px),
        radial-gradient(circle at 92% 34%, rgb(255 255 255 / 40%) 0 1px, transparent 1.5px);
    content: "";
    animation: trade-glint 3.6s ease-in-out infinite;
}

@keyframes trade-glint {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .trade-start::after {
        animation: none;
    }
}

.trade-start:active {
    transform: scale(0.985);
}

.trade-start__label {
    position: static;
    display: inline-flex;
    align-items: center;
    font-variant-numeric: tabular-nums;
}

.trade-start__label > span:last-child {
    position: relative;
}

.trade-start__badge {
    position: absolute;
    top: 50%;
    inset-inline-start: 0.3125rem;
    display: grid;
    width: 2.0625rem;
    height: 2.0625rem;
    place-items: center;
    border: 1px solid rgb(255 255 255 / 90%);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #eef4ff 100%);
    box-shadow:
        inset 0 -2px 3px rgb(37 99 235 / 18%),
        0 0.25rem 0.5rem -0.25rem rgb(10 30 90 / 45%);
    color: #2459e6;
    transform: translateY(-50%);
}

.trade-start__play {
    margin-inline-start: 0.125rem;
    font-size: 1rem;
}

.trade-start__spin {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgb(36 89 230 / 20%);
    border-top-color: #2459e6;
    border-radius: 50%;
    animation: trade-spin 800ms linear infinite;
}

.trade-start.is-running {
    cursor: progress;
}

.trade-start.is-running .trade-start__play {
    display: none;
}

.trade-start.is-running .trade-start__spin {
    display: block;
}

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

.trade-card {
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.trade-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.trade-quote {
    display: inline-flex;
    align-items: baseline;
    gap: 0.375rem;
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.trade-quote b,
.trade-quote span {
    color: var(--color-text);
    font-weight: 700;
}

.trade-quote em {
    font-style: normal;
    font-weight: 700;
}

.trade-quote em.is-up {
    color: var(--color-success);
}

.trade-quote em.is-down {
    color: var(--color-danger);
}

/* The trend: a line with a soft fill under it and a dot on the latest price. */
.trade-trend {
    display: block;
    width: 100%;
    height: 5.5rem;
    margin-top: var(--space-3);
    overflow: visible;
}

.trade-trend__area {
    fill: url(#trade-trend-fill);
}

.trade-trend__line {
    fill: none;
    stroke: #2a67ee;
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.trade-trend__dot {
    fill: #2a67ee;
    stroke: #fff;
    stroke-width: 2;
}

.trade-trend.is-down .trade-trend__line {
    stroke: var(--color-danger);
}

.trade-trend.is-down .trade-trend__dot {
    fill: var(--color-danger);
}

/*
 * The session log: one row per step, an icon chip, what happened and the time on the right,
 * newest on top. With no session yet the list is empty and the centred empty state shows instead.
 */
.trade-log__live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(22 163 74 / 10%);
    color: var(--color-success);
    font-size: var(--text-xs);
    font-weight: 700;
}

.trade-log__live[hidden] {
    display: none;
}

.trade-log__live::before {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--color-success);
    content: "";
    animation: live-blink 1.2s ease-in-out infinite;
}

.trade-log__lines {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.trade-log__lines:empty {
    display: none;
}

.trade-log__lines li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4375rem 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    animation: trade-line-in 260ms var(--ease-out);
}

.trade-log__lines li + li {
    border-top: 1px solid var(--color-border-subtle);
}

.trade-log__lines li > i {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    background: #eaf1ff;
    color: #2459e6;
    font-size: 1rem;
    font-style: normal;
}

.trade-log__lines span {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-log__lines time {
    color: var(--color-text-dim);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* A row still in progress trails three dots. */
.trade-log__lines li.is-working span::after {
    content: "";
    animation: trade-dots 1.2s steps(4) infinite;
}

.trade-log__lines li.is-buy > i,
.trade-log__lines li.is-profit > i {
    background: rgb(22 163 74 / 12%);
    color: var(--color-success);
}

.trade-log__lines li.is-sell > i {
    background: rgb(220 38 38 / 10%);
    color: var(--color-danger);
}

.trade-log__lines li.is-buy span,
.trade-log__lines li.is-profit span {
    color: var(--color-success);
    font-weight: 700;
}

.trade-log__lines li.is-sell span {
    color: var(--color-danger);
    font-weight: 700;
}

.trade-log__empty,
.trade-plans__empty {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.5rem;
    min-height: 8rem;
    color: var(--color-text-dim);
    text-align: center;
}

.trade-log__lines:not(:empty) + .trade-log__empty {
    display: none;
}

.trade-log__empty span,
.trade-plans__empty span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    color: #9aa9c2;
    font-size: 1.625rem;
}

.trade-log__empty p,
.trade-plans__empty p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

@keyframes trade-dots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75%, 100% { content: "..."; }
}

@keyframes trade-line-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
}

@media (prefers-reduced-motion: reduce) {
    .trade-log__lines li {
        animation: none;
    }
}

/* ---------- the plans sheet ---------- */

.trade-plans__foot {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.trade-plans__foot {
    font-size: var(--text-xs);
    text-align: center;
}

/* A rounded table: a tinted header row and hairlines between rows. */
.trade-plans__table-wrap {
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.trade-plans__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.trade-plans__table th {
    padding: 0.625rem 0.5rem;
    background: linear-gradient(180deg, #4d8bff, #2a67ee);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: start;
}

.trade-plans__table th:first-child,
.trade-plans__table td:first-child {
    padding-inline-start: var(--card-pad);
}

.trade-plans__table th:last-child,
.trade-plans__table td:last-child {
    padding-inline-end: var(--card-pad);
    text-align: end;
}

.trade-plans__table th:nth-child(3),
.trade-plans__table td:nth-child(3) {
    text-align: center;
}

.trade-plans__table td {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--color-border-subtle);
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

.trade-plans__table tbody tr:nth-child(even) td {
    background: var(--color-surface-subtle);
}

.trade-plans__table td strong {
    display: block;
    font-family: var(--font-body, inherit);
    font-weight: 700;
}

.trade-plans__table td small {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.trade-plans__table td.is-up {
    color: var(--color-success);
    font-weight: 800;
}

/* ---------- how AI trading works ---------- */

.trade-rules__list {
    display: grid;
    gap: 0.875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trade-rules__list li {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
}

.trade-rules__list li > span {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 0.75rem;
    background: #eaf1ff;
    color: #2459e6;
    font-size: 1.25rem;
}

.trade-rules__list strong {
    display: block;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.trade-rules__list p {
    margin: 0.125rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.trade-rules__note {
    margin: 1rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

/* ===== end AI trading ===== */

/* ===== Profit calculator ===== */

.calc-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calc-label {
    display: block;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

/* The market picker: looks like a row, opens the market sheet. */
.calc-picker {
    display: flex;
    width: 100%;
    height: 3rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

/* The picked market's symbol icon (Apple, Bitcoin, EUR/USD flags), as on the Markets page. */
.calc-avatar {
    display: grid;
    flex: none;
    place-items: center;
}

.calc-avatar[hidden] {
    display: none;
}

.calc-avatar .mkt-avatar {
    box-shadow: 0 0 0 1px var(--color-border-subtle);
}

.calc-avatar .mkt-avatar--pair {
    box-shadow: none;
}

.calc-picker__name {
    flex: 1;
    font-size: var(--text-body);
    font-weight: 700;
}

.calc-picker__chevron {
    color: var(--color-text-dim);
    font-size: 1.125rem;
}

/* The amount: minus, the figure, plus. */
.calc-amount {
    display: grid;
    height: 3rem;
    grid-template-columns: 3rem minmax(0, 1fr) 3rem;
    align-items: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition-fast);
}

.calc-amount:focus-within {
    border-color: #2a67ee;
}

.calc-amount.is-error {
    border-color: #e55858;
}

.calc-amount__step {
    display: grid;
    height: 100%;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 1.25rem;
    cursor: pointer;
}

.calc-amount__field {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.125rem;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 700;
}

.calc-amount__field input {
    width: 5.5ch;
    min-width: 2ch;
    max-width: 10rem;
    field-sizing: content;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    -moz-appearance: textfield;
}

.calc-amount__field input::-webkit-outer-spin-button,
.calc-amount__field input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.calc-hint {
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.calc-hint.is-error {
    color: #e55858;
    font-weight: 600;
}

/* Durations, four to a row. */
.calc-days {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calc-day {
    height: 2.125rem;
    padding: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.calc-day.is-picked {
    border-color: #2a67ee;
    background: rgb(42 103 238 / 8%);
    color: #2459e6;
}

/* The result: daily income and total return side by side. */
.calc-result {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.calc-result > div {
    display: grid;
    gap: 0.25rem;
    padding: 0.875rem var(--card-pad) 0.75rem;
    text-align: center;
}

.calc-result > div + div {
    border-inline-start: 1px solid var(--color-border-subtle);
}

.calc-result span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.calc-result strong {
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calc-result > div + div strong {
    color: #3db470;
}

/* Auto-compounding: a ticked box with its label and a line on what it does. */
.calc-compound {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
}

.calc-compound input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.calc-compound__box {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    place-items: center;
    border: 2px solid var(--color-border);
    border-radius: 0.375rem;
    color: transparent;
    font-size: 0.875rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.calc-compound input:checked + .calc-compound__box {
    border-color: #2a67ee;
    background: #2a67ee;
    color: #fff;
}

.calc-compound input:focus-visible + .calc-compound__box {
    outline: 2px solid rgb(42 103 238 / 40%);
    outline-offset: 2px;
}

.calc-compound__text {
    display: grid;
}

.calc-compound__text strong {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.calc-compound__text small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* The compounding breakdown, joined under the daily income and total return. */
.calc-result > .calc-breakdown {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.625rem;
    padding: 0.875rem var(--card-pad);
    border-top: 1px solid var(--color-border-subtle);
    border-inline-start: 0;
    background: var(--color-surface-subtle);
    text-align: start;
}

.calc-result > .calc-breakdown[hidden] {
    display: none;
}

.calc-breakdown h3 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.calc-breakdown dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.calc-breakdown dl > div {
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.calc-breakdown dt {
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

.calc-breakdown dd {
    margin: 0.125rem 0 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.calc-breakdown dd.is-up {
    color: #3db470;
}

.calc-action {
    margin-top: 0.25rem;
}

.calc-submit {
    width: 100%;
    height: 2.875rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 60%, #1d47c4 100%);
    box-shadow: 0 0.625rem 1.25rem -0.75rem rgb(36 89 230 / 70%);
    color: #fff;
    font: inherit;
    font-size: var(--text-body);
    font-weight: 700;
    cursor: pointer;
}

.calc-submit:active {
    transform: scale(0.985);
}

.calc-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: var(--color-text-dim);
    text-align: center;
}

.calc-empty span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    font-size: 1.625rem;
}

.calc-empty p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* The market sheet. */
.calc-options {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calc-option {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.calc-option.is-picked {
    border-color: #2a67ee;
    background: rgb(42 103 238 / 6%);
}

.calc-option__text {
    display: grid;
    flex: 1;
    min-width: 0;
}

.calc-option__text strong {
    font-size: var(--text-sm);
    font-weight: 700;
}

.calc-option__text small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.calc-option__yield {
    color: #3db470;
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-weight: 700;
}

.calc-option__check {
    color: #2a67ee;
    font-size: 1.25rem;
    visibility: hidden;
}

.calc-option.is-picked .calc-option__check {
    visibility: visible;
}

/* ===== end profit calculator ===== */

/* ===== Bonus page ===== */

.bonus-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Two tabs with an underline on the active one. */
.bonus-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--color-border-subtle);
}

.bonus-tab {
    position: relative;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.bonus-tab span {
    min-width: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-pill);
    background: #2a67ee;
    color: #fff;
    font-size: 0.625rem;
    line-height: 1.125rem;
}

.bonus-tab.is-active {
    color: var(--color-text);
    font-weight: 700;
}

.bonus-tab.is-active::after {
    position: absolute;
    inset-inline-end: 15%;
    bottom: -1px;
    inset-inline-start: 15%;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #2a67ee;
    content: "";
}

.bonus-panel {
    display: grid;
    gap: 0.75rem;
}

.bonus-panel[hidden] {
    display: none;
}

.bonus-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--color-text);
}

.bonus-group iconify-icon {
    color: #2a67ee;
    font-size: 1.25rem;
}

.bonus-group h2 {
    flex: 1;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
}

.bonus-group span {
    color: var(--color-text-dim);
    font-size: var(--text-xs);
    font-weight: 600;
}

/*
 * A bonus ticket: the value up top on a blue face, a perforated line with a round notch at each
 * end, and the bonus's name below. Used and expired tickets go grey.
 */
.bonus-ticket {
    --ticket-face: linear-gradient(135deg, #3d7bff 0%, #2459e6 70%, #1d47c4 100%);
    --ticket-notch: #f5fafe;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: 0 0.375rem 1rem -0.75rem rgb(16 40 90 / 35%);
}

.bonus-ticket.is-used,
.bonus-ticket.is-expired {
    --ticket-face: linear-gradient(135deg, #a6b0c0 0%, #8f9aad 100%);
}

.bonus-ticket__top {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem 0.875rem;
    background: var(--ticket-face);
    color: #fff;
}

/* The notches either side of the perforation. */
.bonus-ticket__top::before,
.bonus-ticket__top::after {
    position: absolute;
    bottom: -0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--ticket-notch);
    content: "";
}

.bonus-ticket__top::before {
    inset-inline-start: -0.5rem;
}

.bonus-ticket__top::after {
    inset-inline-end: -0.5rem;
}

.bonus-ticket__value {
    min-width: 0;
}

.bonus-ticket__value p {
    margin: 0;
    color: rgb(255 255 255 / 85%);
    font-size: var(--text-xs);
}

.bonus-ticket__value strong {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-family: var(--font-numeric);
    font-size: 1.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    line-height: 1;
}

.bonus-ticket__value small {
    margin-top: 0.1875rem;
    font-size: var(--text-xs);
    font-weight: 700;
}

.bonus-ticket__side {
    display: grid;
    flex: none;
    justify-items: end;
    align-content: space-between;
    gap: 0.5rem;
}

.bonus-ticket__action {
    display: inline-grid;
    min-width: 4.5rem;
    height: 1.875rem;
    place-items: center;
    padding: 0 0.875rem;
    border-radius: var(--radius-sm);
    background: #fff;
    color: #2459e6;
    font-size: var(--text-sm);
    font-weight: 700;
}

.bonus-ticket.is-used .bonus-ticket__action,
.bonus-ticket.is-expired .bonus-ticket__action {
    background: rgb(255 255 255 / 30%);
    color: #fff;
}

.bonus-ticket__side small {
    color: rgb(255 255 255 / 85%);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.bonus-ticket__side b {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.bonus-ticket__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.75rem 0.875rem;
    border-top: 2px dashed var(--color-border-subtle);
}

.bonus-ticket__name {
    display: grid;
    min-width: 0;
}

.bonus-ticket__name strong {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.bonus-ticket__name span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.bonus-ticket.is-used .bonus-ticket__name strong,
.bonus-ticket.is-expired .bonus-ticket__name strong {
    color: var(--color-text-muted);
}

.bonus-ticket__more {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
}

.bonus-ticket__more iconify-icon {
    transition: transform var(--transition-fast);
}

.bonus-ticket__more[aria-expanded="true"] iconify-icon {
    transform: rotate(180deg);
}

.bonus-ticket__details {
    grid-column: 1 / -1;
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.bonus-ticket__details[hidden] {
    display: none;
}

.bonus-empty {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 3rem 0;
    color: var(--color-text-dim);
    text-align: center;
}

.bonus-empty span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    font-size: 1.625rem;
}

.bonus-empty p {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ===== end bonus page ===== */

/* ===== Transfer: the swap key and the capital gate ===== */

.swap__arrow {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.swap__arrow iconify-icon {
    transition: transform 200ms var(--ease-out);
}

.swap__arrow.is-flipped iconify-icon {
    transform: rotate(180deg);
}

/* No tap flash on the slider: a touch there is a drag, not a button press. */
.transfer-range,
.transfer-range input {
    -webkit-tap-highlight-color: transparent;
}

.transfer-range input:focus,
.transfer-range input:focus-visible {
    outline: none;
}

/* The trading capital card, shown as a popup when Confirm is pressed without the requirements. */
.capital-modal {
    position: fixed;
    z-index: 1100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.capital-modal[hidden] {
    display: none;
}

.capital-modal__scrim {
    position: absolute;
    inset: 0;
    background: rgb(8 15 40 / 55%);
    opacity: 0;
    transition: opacity 200ms ease;
}

/* The reminder: a centred title over a gold hairline, centred text, and the action along its foot. */
.capital-modal__card {
    position: relative;
    display: grid;
    overflow: hidden;
    width: 100%;
    max-width: 20rem;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 1.25rem 2.5rem -1rem rgb(8 15 40 / 45%);
    text-align: center;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 200ms ease, transform 200ms ease;
}

.capital-modal.is-open .capital-modal__scrim,
.capital-modal.is-open .capital-modal__card {
    opacity: 1;
}

.capital-modal.is-open .capital-modal__card {
    transform: none;
}

.capital-modal__close {
    position: absolute;
    top: 0.625rem;
    inset-inline-end: 0.625rem;
    display: grid;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-dim);
    font-size: 1.375rem;
    cursor: pointer;
}

.capital-modal__title {
    margin: 0;
    padding: 1rem 2.5rem 0.75rem;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 600;
}

/* A gold hairline under the title that fades out at both ends. */
.capital-modal__title::after {
    display: block;
    height: 1px;
    margin: 0.75rem -1.5rem 0;
    background: linear-gradient(90deg, transparent, #e8c27a 50%, transparent);
    content: "";
}

.capital-modal__body {
    display: grid;
    gap: 0.5rem;
    padding: 0.25rem 1.25rem 1.25rem;
}

.capital-modal__body p {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: 1.5;
}

.capital-modal__body b {
    color: #1f5ce6;
    font-family: var(--font-numeric);
}

/* Flush with the card's foot, edge to edge. */
.capital-modal__action {
    display: grid;
    min-height: 3.25rem;
    place-items: center;
    padding: 0 1rem;
    border: 0;
    background: #2a67ee;
    color: #fff;
    font: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
}

.capital-modal__action:active {
    background: #1f56d6;
}

/* ===== Support tickets ===== */

.ticket-page,
.ticket-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ticket-new,
.ticket-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
}

.ticket-new > span:first-child {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: #eaf1ff;
    color: #2459e6;
    font-size: 1.375rem;
}

.ticket-new > span:nth-child(2),
.ticket-row > div:first-child {
    display: grid;
    flex: 1;
    min-width: 0;
}

.ticket-new strong,
.ticket-row strong {
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-new small,
.ticket-row small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.ticket-new > iconify-icon {
    color: var(--color-text-dim);
}

/* The help page's group cards: the same card, with the app's own round logo in the icon spot. */
.ticket-new > .ticket-new__brand {
    background: transparent;
}

.ticket-new__brand img {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
}

.ticket-row__side {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 0.25rem;
}

.ticket-status {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.625rem;
    font-weight: 700;
    white-space: nowrap;
}

.ticket-status.is-open {
    background: rgb(255 138 61 / 14%);
    color: #d86a1f;
}

.ticket-status.is-answered {
    background: rgb(42 103 238 / 10%);
    color: #2459e6;
}

.ticket-status.is-closed {
    background: var(--color-surface-subtle);
    color: var(--color-text-dim);
}

/* New ticket: categories as a two-column grid of chips. */
.ticket-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.ticket-category {
    position: relative;
    cursor: pointer;
}

.ticket-category input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ticket-category span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.625rem;
    border: 1.5px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 600;
}

.ticket-category iconify-icon {
    flex: none;
    color: #2459e6;
    font-size: 1.125rem;
}

.ticket-category input:checked + span {
    border-color: #2a67ee;
    background: rgb(42 103 238 / 6%);
}

.ticket-category input:focus-visible + span {
    outline: 2px solid rgb(42 103 238 / 40%);
    outline-offset: 2px;
}

.ticket-refund-note {
    margin: 0.625rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: rgb(42 103 238 / 6%);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.ticket-refund-note[hidden] {
    display: none;
}

.ticket-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    resize: vertical;
}

.ticket-attach {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    color: #2459e6;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
}

.ticket-attach input {
    display: none;
}

.ticket-attach iconify-icon {
    font-size: 1.125rem;
}

/* One ticket: the head, then the conversation, the member on the right and support on the left. */
.ticket-head {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.ticket-head strong {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 700;
}

.ticket-head div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-head small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.ticket-thread {
    display: grid;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ticket-message {
    max-width: 86%;
    justify-self: end;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0.25rem var(--radius-lg);
    background: #2a67ee;
    color: #fff;
}

.ticket-message.is-support {
    justify-self: start;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 0.25rem;
    background: var(--color-surface);
    color: var(--color-text);
}

.ticket-message header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
    opacity: 0.85;
}

.ticket-message p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ticket-message img {
    display: block;
    max-width: 100%;
    margin-top: 0.5rem;
    border-radius: var(--radius-md);
}

.ticket-reply__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

.ticket-reply__foot .ticket-attach {
    margin-top: 0;
}

.ticket-reply__foot .fixed-save {
    border: 0;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}

.ticket-closed {
    margin: 0;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.ticket-closed a {
    color: #2459e6;
    font-weight: 600;
}

/* A capital transfer application's status and review countdown, above the conversation. */
.ticket-application {
    display: grid;
    gap: 0.375rem;
    padding: 0.875rem var(--card-pad);
    border: 1px solid rgb(42 103 238 / 25%);
    border-radius: var(--radius-lg);
    background: rgb(42 103 238 / 5%);
}

.ticket-application > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.ticket-application strong {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.ticket-application p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.ticket-application a {
    color: #2459e6;
    font-weight: 600;
}

.ticket-application__count b {
    color: #2459e6;
    font-family: var(--font-numeric);
    font-size: 1.5rem;
    font-weight: 800;
}

/* ===== end support tickets ===== */

/* ===== Mines closed: the countdown to game day ===== */

.game-closed {
    display: grid;
    min-height: 60dvh;
    align-content: center;
}

.game-closed__card {
    display: grid;
    justify-items: center;
    gap: 0.875rem;
    padding: 1.5rem 1rem 1.25rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / 18%), transparent 60%),
        linear-gradient(160deg, #3a78f5 0%, #1f4fd8 100%);
    box-shadow: 0 1rem 2rem -1rem rgb(31 79 216 / 60%);
    color: #fff;
    text-align: center;
}

.game-closed__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 18%);
    font-size: var(--text-xs);
    font-weight: 700;
}

.game-closed__badge iconify-icon {
    font-size: 1rem;
}

.game-closed__card h1 {
    max-width: 16rem;
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.35;
}

/* Four white tiles with blue figures. */
.game-closed__reels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.game-closed__reel {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
}

.game-closed__reel b {
    display: grid;
    width: 100%;
    height: 3.5rem;
    place-items: center;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 0.375rem 0.75rem -0.375rem rgb(10 30 90 / 45%);
    color: #1f4fd8;
    font-family: var(--font-numeric);
    font-size: 1.625rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.game-closed__reel b.is-rolling {
    animation: game-reel 380ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.game-closed__reel span {
    color: rgb(255 255 255 / 80%);
    font-size: var(--text-xs);
    font-weight: 600;
}

.game-closed__card > p {
    margin: 0;
    color: rgb(255 255 255 / 85%);
    font-size: var(--text-sm);
    font-weight: 600;
}

@keyframes game-reel {
    0% { transform: translateY(-70%); opacity: 0.2; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .game-closed__reel b.is-rolling {
        animation: none;
    }
}

/* ===== end Mines closed ===== */

/* ===== Member videos ===== */

.activity-videos {
    padding: var(--card-pad);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.375rem 1rem -0.75rem rgb(16 40 90 / 30%);
    margin-bottom: 0.875rem;
}

.activity-videos header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.activity-videos h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.activity-videos header a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-pill);
    background: rgb(42 103 238 / 10%);
    color: #2459e6;
    font-size: var(--text-xs);
    font-weight: 700;
}

.activity-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.video-card {
    display: grid;
    gap: 0.375rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.video-card__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-md, 0.75rem);
    background: #0f1a3d;
}

.video-card__frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.video-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 2px solid rgb(255 255 255 / 85%);
    border-radius: 50%;
    background: rgb(0 0 0 / 40%);
    color: #fff;
    font-size: 1rem;
    transform: translate(-50%, -50%);
}

.video-card__badge {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: #ffc53d;
    color: #4a3200;
    font-size: 0.625rem;
    font-weight: 700;
}

.video-card__caption {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--text-xs);
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.video-player {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgb(0 0 0 / 92%);
}

.video-player[hidden] {
    display: none;
}

.video-player video {
    width: 100%;
    max-width: var(--container-max, 30rem);
    max-height: 100dvh;
}

.video-player__close {
    position: absolute;
    z-index: 1;
    top: 1rem;
    inset-inline-end: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

/* A receipt's member line: VIP level and how long they have been here. */
.activity-card__member {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.activity-card__vip {
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ffd666, #f5a623);
    color: #4a3200;
    font-size: 0.625rem;
    font-weight: 800;
}

/* The upload video sheet. */
.video-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 1.25rem 0.75rem;
    border: 2px dashed rgb(42 103 238 / 35%);
    border-radius: var(--radius-lg);
    background: rgb(42 103 238 / 4%);
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
}

.video-drop iconify-icon {
    color: #2459e6;
    font-size: 2rem;
}

.video-drop strong {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-drop small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.video-drop input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.video-sheet form {
    display: grid;
    gap: 0.25rem;
}

.video-sheet__submit {
    margin-top: 0.75rem;
}

.video-sheet__locked {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0 0.25rem;
    text-align: center;
}

.video-sheet__locked > span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: #eef3fb;
    color: #2459e6;
    font-size: 1.5rem;
}

.video-sheet__locked strong {
    color: var(--color-text);
    font-size: var(--text-body);
}

.video-sheet__locked p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.video-sheet__locked .fixed-next {
    display: grid;
    place-items: center;
    margin-top: 0.5rem;
}

.video-sheet__locked--pending > span {
    background: #fff4e0;
    color: #e08a00;
}

.video-sheet__locked--approved > span {
    background: #e6f7ee;
    color: #16a34a;
}

.video-sheet__retry {
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: #fdecec;
    color: #b42318;
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ===== end member videos ===== */

/* ===== Crypto wallet ===== */

.wallet-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wallet-form {
    display: grid;
    gap: 0.75rem;
}

/* Coins and networks as tiles; the picked one takes a blue outline. */
.wallet-coins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

/* Networks: just the network's name in an outline pill sized to it, three to a row. */
.wallet-networks {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0.5rem;
}

.wallet-choice,
.wallet-network {
    position: relative;
    cursor: pointer;
}

.wallet-network[hidden] {
    display: none;
}

.wallet-choice input,
.wallet-network input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.wallet-choice > span {
    display: grid;
    gap: 0.0625rem 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.wallet-network > span {
    display: block;
    padding: 0.375rem 0.875rem;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.wallet-choice > span {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.wallet-choice iconify-icon {
    grid-row: span 2;
    font-size: 1.75rem;
}

.wallet-choice strong {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.wallet-choice small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-choice input:checked + span,
.wallet-network input:checked + span {
    border-color: #2a67ee;
    background: rgb(42 103 238 / 6%);
}

.wallet-choice input:focus-visible + span,
.wallet-network input:focus-visible + span {
    outline: 2px solid rgb(42 103 238 / 40%);
    outline-offset: 2px;
}

.wallet-form__empty {
    margin: 0;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

.wallet-form__empty[hidden] {
    display: none;
}

/* The address field with Paste inside it. */
.wallet-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0 0.5rem 0 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-field-bg, #fff);
}

.wallet-address:focus-within {
    border-color: #2a67ee;
    box-shadow: 0 0 0 0.1875rem rgb(42 103 238 / 12%);
}

.wallet-address input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
}

.wallet-address button {
    flex: none;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: #eaf1ff;
    color: #1f5ce6;
    font: inherit;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
}

.wallet-form__hint[hidden] {
    display: none;
}

.wallet-form__hint {
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.wallet-form__hint.is-error {
    color: var(--color-danger);
}

.wallet-form__warning {
    display: flex;
    gap: 0.375rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: #fff6e6;
    color: #8a5a00;
    font-size: var(--text-xs);
    line-height: 1.45;
}

.wallet-form__warning iconify-icon {
    flex: none;
    font-size: 1rem;
}

/* The saved wallet. */
.wallet-card {
    display: grid;
    gap: 0.5rem;
    padding: var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.5rem 1.25rem -0.875rem rgb(16 40 90 / 25%);
}

.wallet-card__head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.wallet-card__head > iconify-icon {
    font-size: 2.25rem;
}

.wallet-card__head > span:nth-child(2) {
    display: grid;
    flex: 1;
    min-width: 0;
}

.wallet-card__head strong {
    color: var(--color-text);
    font-size: var(--text-md);
    font-weight: 700;
}

.wallet-card__head small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.wallet-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(22 163 74 / 10%);
    color: #15803d;
    font-size: var(--text-xs);
    font-weight: 700;
}

.wallet-card__label {
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.wallet-card__address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.wallet-card__address code {
    min-width: 0;
    flex: 1;
    color: var(--color-text);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.wallet-card__address button {
    display: grid;
    flex: none;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: #2459e6;
    font-size: 1.125rem;
    cursor: pointer;
}

.wallet-page__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.wallet-confirm dl {
    display: grid;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
}

.wallet-confirm dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.wallet-confirm dd {
    margin: 0.125rem 0 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.wallet-confirm p {
    margin: 0 0 0.875rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* ===== end Crypto wallet ===== */

/* ===== VIP rules sheet: the levels table under the steps ===== */

/* How VIP works: every level as a small coloured card, in a row that scrolls sideways. */
.vip-steps {
    display: grid;
    gap: 0.625rem;
    margin: 0.875rem calc(var(--page-gutter) * -1) 0;
    padding: 0.25rem var(--page-gutter) 0.5rem;
    overflow-x: auto;
    grid-auto-columns: 8.25rem;
    grid-auto-flow: column;
    list-style: none;
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.vip-steps::-webkit-scrollbar {
    display: none;
}

.vip-step {
    --step-from: #4f7cf7;
    --step-to: #2550d8;

    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--step-from), var(--step-to));
    color: #ffffff;
    scroll-snap-align: start;
    box-shadow: 0 6px 14px -8px var(--step-to);
}

.vip-step.is-current {
    outline: 2px solid #ffffff;
    outline-offset: -4px;
}

.vip-step header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
}

.vip-step header strong {
    font-size: var(--text-md);
    font-weight: 800;
    letter-spacing: 0.01em;
}

.vip-step header em {
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 24%);
    font-size: var(--text-2xs);
    font-style: normal;
    font-weight: 700;
}

.vip-step dl {
    display: grid;
    gap: 0.3125rem;
    margin: 0;
}

.vip-step dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.vip-step dt {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgb(255 255 255 / 82%);
    font-size: var(--text-xs);
}

.vip-step dd {
    margin: 0;
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 700;
}

.vip-step--tone-0 { --step-from: #8a94a6; --step-to: #5d6778; }
.vip-step--tone-1 { --step-from: #4f8df7; --step-to: #2457d6; }
.vip-step--tone-2 { --step-from: #2fc4a5; --step-to: #0f8f7a; }
.vip-step--tone-3 { --step-from: #8b6cf6; --step-to: #5b3fd1; }
.vip-step--tone-4 { --step-from: #f0a23a; --step-to: #d06f0c; }
.vip-step--tone-5 { --step-from: #f06a8a; --step-to: #c9345a; }
.vip-step--tone-6 { --step-from: #22b8e0; --step-to: #0b7fb3; }
.vip-step--tone-7 { --step-from: #e2b443; --step-to: #a87a0c; }
.vip-step--tone-8 { --step-from: #ef5a4c; --step-to: #b52a1f; }
.vip-step--tone-9 { --step-from: #3c4a6b; --step-to: #1b2440; }

/* A text toggle below the summary; only the extra breakdown drops down. */
.txn-receipt__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.375rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.txn-receipt__toggle[hidden] {
    display: none;
}

.txn-receipt__toggle iconify-icon {
    font-size: 1rem;
    transition: transform 160ms ease;
}

.txn-receipt__toggle[aria-expanded="true"] iconify-icon {
    transform: rotate(180deg);
}

.txn-receipt__more[hidden] {
    display: none;
}

.txn-receipt__more {
    display: grid;
    gap: var(--space-3);
    animation: txn-more-in 180ms ease-out;
}

@keyframes txn-more-in {
    from { opacity: 0; transform: translateY(-0.25rem); }
    to { opacity: 1; transform: none; }
}

/* ===== Invite page ===== */

.ref-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* The headline on a soft blue wash, with the 3D gift and a coin. */
.ref-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    overflow: hidden;
    padding: 0.75rem var(--card-pad);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 140% at 100% 0%, rgb(255 197 61 / 22%), transparent 60%),
        linear-gradient(135deg, #eaf2ff 0%, #dbe8ff 100%);
}

.ref-hero__copy {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 1;
    gap: 0.25rem;
    min-width: 0;
}

.ref-hero__eyebrow {
    color: #2459e6;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ref-hero h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ref-hero h1 b {
    color: #2459e6;
}

.ref-hero p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.ref-hero p.ref-hero__bonus {
    color: #b45309;
    font-weight: 700;
}

.ref-hero__art {
    position: relative;
    flex: none;
    width: 4.25rem;
    height: 4.25rem;
}

.ref-hero__gift {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0.5rem 0.75rem rgb(36 89 230 / 25%));
    animation: ref-float 3.2s ease-in-out infinite;
}

.ref-hero__coin {
    position: absolute;
    bottom: -0.125rem;
    inset-inline-start: -0.375rem;
    width: 1.75rem;
    height: 1.75rem;
    animation: ref-float 3.2s ease-in-out -1.6s infinite;
}

@keyframes ref-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.25rem); }
}

@media (prefers-reduced-motion: reduce) {
    .ref-hero__gift,
    .ref-hero__coin {
        animation: none;
    }
}

/* Invited, active and earned, side by side. */
.ref-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0.5rem 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.5rem 1.25rem -0.875rem rgb(16 40 90 / 25%);
}

.ref-stats > div {
    display: grid;
    gap: 0;
    min-width: 0;
    padding: 0 0.5rem;
    text-align: center;
}

.ref-stats > div + div {
    border-inline-start: 1px solid var(--color-border-subtle);
}

.ref-stats strong {
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-body);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-stats span {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.ref-stats__hold {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.375rem 0.75rem 0;
    padding-top: 0.375rem;
    border-top: 1px dashed var(--color-border-subtle);
    color: #b45309;
    font-size: var(--text-xs);
}

/* The QR card: the code with the logo in its middle, then code and link with copy, then Share. */
.ref-card {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0.875rem var(--card-pad) var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 0.5rem 1.25rem -0.875rem rgb(16 40 90 / 25%);
}

.ref-qr {
    position: relative;
    display: grid;
    width: 8.75rem;
    height: 8.75rem;
    place-items: center;
    padding: 0.5rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 0.75rem 1.5rem -1rem rgb(16 40 90 / 35%);
}

.ref-qr__code,
.ref-qr__code svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ref-qr__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    padding: 0.1875rem;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 0 0 0.125rem #fff;
    transform: translate(-50%, -50%);
}

.ref-qr__logo img {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    object-fit: contain;
}

.ref-card__scan {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.ref-card__rows {
    display: grid;
    width: 100%;
    gap: 0.375rem;
    margin: 0;
}

.ref-card__rows > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0.625rem 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.ref-card__rows dt {
    flex: none;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.ref-card__rows dd {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 700;
}

.ref-card__rows dd > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-card__link {
    max-width: 11rem;
    font-weight: 500;
}

.ref-card__rows button {
    display: grid;
    flex: none;
    padding: 0.25rem;
    border: 0;
    background: transparent;
    color: #2459e6;
    font-size: 1.0625rem;
    cursor: pointer;
}

.ref-card__share {
    display: flex;
    width: 100%;
    height: 2.625rem;
    margin-top: 0.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #3d7bff 0%, #2459e6 60%, #1d47c4 100%);
    box-shadow: 0 0.625rem 1.25rem -0.75rem rgb(36 89 230 / 70%);
    color: #fff;
    font: inherit;
    font-size: var(--text-body);
    font-weight: 700;
    cursor: pointer;
}

.ref-card__share iconify-icon {
    font-size: 1.125rem;
}

.team2-rates h2 {
    margin: 0 0 0.5rem;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 700;
}

/* The three levels, the direct one picked out. */
.ref-levels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.ref-level {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: 0.4375rem 0.375rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: center;
}

.ref-level.is-direct {
    border-color: rgb(42 103 238 / 35%);
    background: linear-gradient(180deg, #f2f6ff 0%, #ffffff 100%);
}

.ref-level strong {
    color: #2459e6;
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 800;
}

.ref-level span {
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: 700;
}

.ref-level small {
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

/* ===== My team ===== */

.team2 {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Levels as a segmented control: count large, rate small; the picked one lifts in white. */
.team2-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.team2-tabs a {
    display: grid;
    justify-items: center;
    padding: 0.375rem 0.25rem;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: calc(var(--radius-lg) - 0.25rem);
    color: var(--color-text-muted);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.team2-tabs a.is-active {
    background: var(--color-surface);
    box-shadow: 0 0.25rem 0.75rem -0.375rem rgb(16 40 90 / 25%);
    color: #2459e6;
}





.team2-list {
    display: grid;
    gap: 0.375rem;
}

.team2-member {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.team2-member__avatar {
    display: grid;
    width: 2.125rem;
    height: 2.125rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tint) 14%, #fff);
    color: var(--tint);
    font-size: var(--text-body);
    font-weight: 800;
}

.team2-member__who {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 0;
}

.team2-member__who strong {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 700;
}

.team2-member__who em {
    padding: 0 0.375rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffe08a 0%, #f5a623 100%);
    color: #4a3200;
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.5;
}

.team2-member__who small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.team2-member__side {
    display: grid;
    flex: none;
    justify-items: end;
    gap: 0;
}

.team2-member__label {
    color: var(--color-text-dim);
    font-size: 0.625rem;
}

.team2-member__side strong {
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 700;
}

.team2-pill {
    padding: 0.0625rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: 0.625rem;
    font-weight: 700;
}

.team2-pill.is-active {
    background: rgb(22 163 74 / 10%);
    color: #15803d;
}

.team2-empty {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
}

.team2-empty h2 {
    margin: 0.25rem 0 0;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 700;
}

.team2-empty p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.team2-empty a {
    margin-top: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-pill);
    background: #2a67ee;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
}

/* After today's trade: "Next trade" and a clock, centred, in place of the play badge and label. */
.trade-start__next {
    display: none;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    color: #fff;
    font-size: var(--text-body);
    font-weight: 700;
}

.trade-start.is-waiting {
    height: auto;
    min-height: 2.75rem;
    padding: 0.375rem 1rem;
}

.trade-start.is-waiting .trade-start__label {
    display: none;
}

.trade-start.is-waiting .trade-start__next {
    display: inline-flex;
}

.trade-clock {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    direction: ltr;
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.trade-clock__unit {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;
}

.trade-clock__unit-label {
    margin-inline-start: 0.125rem;
    font-size: 0.75em;
    font-weight: 700;
    opacity: 0.9;
}

.trade-clock__digit {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 0.75em;
    height: 1.35em;
    border-radius: 0.25rem;
    background: rgb(255 255 255 / 16%);
}

.trade-clock__digit b {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 800;
}

/* The old digit drops out downward; the new one comes in from above. */
.trade-clock__digit b.is-in {
    animation: trade-digit-in 300ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.trade-clock__digit b.is-out {
    animation: trade-digit-out 300ms ease-in forwards;
}

@keyframes trade-digit-in {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes trade-digit-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .trade-clock__digit b.is-in,
    .trade-clock__digit b.is-out {
        animation: none;
    }

    .trade-clock__digit b.is-out {
        display: none;
    }
}

/* ===== Upload Center: Withdrawals / Videos tabs ===== */

.activity-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: var(--space-3);
}

.activity-panel[hidden] {
    display: none;
}

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-tile {
    display: grid;
    align-content: start;
    gap: 0.375rem;
    min-width: 0;
}

.activity-tile__image {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md, 0.75rem);
    background: #e9eef6;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.activity-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The amount on a soft dark strip at the image's foot. */
.activity-tile__amount {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    inset-inline-start: 0;
    padding: 1.25rem 0.5rem 0.375rem;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / 60%));
    color: #fff;
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 800;
    text-align: start;
}

.activity-tile__who {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.activity-tile__avatar {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--tint) 14%, #fff);
    color: var(--tint);
    font-size: 0.75rem;
    font-weight: 800;
}

.activity-tile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Username and VIP badge on one line; the name gives way first. */
.activity-tile__name > .activity-tile__line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: inherit;
}

.activity-tile__line b {
    overflow: hidden;
    min-width: 0;
    font-weight: 700;
    text-overflow: ellipsis;
}

.activity-tile__line em {
    flex: none;
}

.activity-tile__name {
    display: grid;
    min-width: 0;
}

.activity-tile__name > span {
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-tile__name small {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

.activity-tile__name em {
    padding: 0 0.3125rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #ffe08a 0%, #f5a623 100%);
    color: #4a3200;
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.5;
}

.activity-tile__note {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.activity-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: var(--space-3);
    padding: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    color: #2459e6;
    font-size: var(--text-sm);
    font-weight: 700;
}

/* ===== Tasks page: one-time tasks (install the app, real avatar, VIP levels) ===== */

.goal-list {
    display: grid;
    gap: var(--space-3);
}

.goal-card {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    animation: task-card-in 240ms var(--ease-out) both;
}

.goal-card[hidden] {
    display: none;
}

.goal-card__icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #eaf1ff 0%, #d7e4ff 100%);
    color: #2459e6;
    font-size: 1.125rem;
}

.goal-card__copy {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.goal-card__copy h2 {
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-card__copy p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.goal-card__copy p.is-error {
    color: #e5484d;
}

.goal-card__side {
    display: grid;
    justify-items: end;
    gap: 0.3125rem;
}

.goal-card__reward {
    display: grid;
    justify-items: end;
    line-height: 1.15;
}

.goal-card__reward strong {
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 800;
    white-space: nowrap;
}

.goal-card__reward small {
    color: var(--color-text-muted);
    font-size: 0.625rem;
}

/* The small gold glass pill. */
.goal-btn {
    display: inline-grid;
    min-width: 4.25rem;
    height: 1.625rem;
    place-items: center;
    padding: 0 0.75rem;
    border: 1px solid rgb(255 255 255 / 55%);
    border-radius: var(--radius-pill);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 45%) 0%, rgb(255 255 255 / 0%) 55%),
        linear-gradient(180deg, #ffd66b 0%, #f2a91e 100%);
    box-shadow: 0 0.25rem 0.625rem -0.25rem rgb(242 169 30 / 70%), inset 0 1px 0 rgb(255 255 255 / 60%);
    color: #4a3200;
    font-size: 0.6875rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.goal-btn:active {
    transform: scale(0.96);
}

.goal-btn.is-muted {
    border-color: var(--color-border-subtle);
    background: var(--color-surface-subtle);
    box-shadow: none;
    color: var(--color-text-muted);
    cursor: default;
}

.goal-btn.is-muted:active {
    transform: none;
}

/* The selfie sheet. */
.avatar-shot {
    position: relative;
    display: grid;
    overflow: hidden;
    width: min(100%, 11rem);
    aspect-ratio: 3 / 4;
    margin: 0 auto;
    place-items: center;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
    cursor: pointer;
}

.avatar-shot input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.avatar-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-shot__empty {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.avatar-shot__empty iconify-icon {
    color: #2459e6;
    font-size: 2rem;
}

.avatar-shot__empty strong {
    color: var(--color-text);
    font-size: var(--text-sm);
}

.avatar-sheet__status {
    min-height: 1rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

.avatar-sheet__status[data-tone="error"] {
    color: #e5484d;
}

.avatar-sheet__status[data-tone="ok"] {
    color: #16a34a;
}

/* How to install the app. */
.install-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.install-steps[hidden] {
    display: none;
}

.install-steps li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md, 0.75rem);
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: var(--color-text);
    font-size: var(--text-sm);
}

/* The icon in a soft round chip, drawn in the text colour so it shows on the blue and white sheets alike. */
.install-steps li > i {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 1rem;
    font-style: normal;
}

.install-steps strong {
    font-weight: 700;
}


/* ===== Country in front of the phone number (log in / register) ===== */

.auth-country {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.25rem;
    margin-inline-end: 0.25rem;
    padding: 0 0.5rem 0 0;
    border: 0;
    border-inline-end: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-body);
    line-height: 1;
    cursor: pointer;
}

.auth-country__flag {
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    font-size: 1.25rem;
}

.auth-country__code {
    font-weight: 600;
}

.auth-country__caret {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.country-sheet .app-sheet__panel {
    height: 78dvh;
    max-height: 78dvh;
    overflow: hidden;
}

.country-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.country-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
}

.country-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 calc(var(--page-gutter) * -1);
    padding: 0;
    list-style: none;
    overscroll-behavior: contain;
}

.country-list li[hidden] {
    display: none;
}

.country-list button {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem var(--page-gutter);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: start;
    cursor: pointer;
}

.country-list button:active,
.country-list button.is-picked {
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.country-list__flag {
    flex: none;
    font-size: 1.375rem;
}

.country-list__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.country-list__dial {
    color: var(--color-text-muted);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
}

.country-list button.is-picked .country-list__name {
    font-weight: 700;
}

.country-empty {
    margin: 0;
    padding: 1rem 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

/* ===== Email verification ===== */

.email-verify {
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

.email-verify__title {
    margin: 0.5rem 0 0;
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.email-verify__hint {
    margin: 0 0 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.email-verify__form {
    display: grid;
    gap: 1rem;
}

.email-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.875rem;
    padding: 0 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 1.125rem;
}

.email-field:focus-within {
    border-color: #2459e6;
}

.email-field input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-body);
}

.code-boxes {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
}

.code-boxes input {
    width: 100%;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    outline: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: 1.375rem;
    font-weight: 700;
    text-align: center;
    caret-color: #2459e6;
}

.code-boxes input:focus,
.code-boxes input.is-filled {
    border-color: #2459e6;
}

.code-resend {
    min-height: 1.25rem;
    margin: 0.5rem 0 1rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: end;
}

.code-help {
    margin: 0;
}

.code-help[hidden] {
    display: none;
}

.code-help button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-decoration: underline;
    cursor: pointer;
}

.email-done {
    display: grid;
    justify-items: center;
    gap: 0.375rem;
    margin-top: 2rem;
    text-align: center;
}

.email-done__mark {
    color: #16a34a;
    font-size: 3rem;
}

.email-done h1 {
    margin: 0;
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 800;
}

.email-done p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.profile-list__meta.is-ok {
    color: #16a34a;
}

.calc-submit:disabled {
    opacity: 0.55;
    cursor: default;
    transform: none;
}

/* Stock rows outside US market hours. */
.mkt-closed {
    display: inline-block;
    margin-inline-start: 0.25rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.5625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}

/* The reward on the email verification row, as "+100 Coins" reads on the reference. */
.profile-list__meta.is-reward {
    color: #e5484d;
    font-weight: 600;
}

.email-verify__reward {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: -0.25rem 0 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: #fff5e6;
    color: #b45309;
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ===== Support chat (ticket page), laid out like a messaging app ===== */

body:has(.chat) {
    overflow: hidden;
}

.chat {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 50%;
    display: flex;
    width: min(100%, var(--container-max, 30rem));
    height: var(--chat-height, 100dvh);
    flex-direction: column;
    background: #eef2f8;
    transform: translateX(-50%);
}

.chat-top {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.625rem;
    padding: calc(env(safe-area-inset-top) + 0.5rem) 0.75rem 0.5rem 0.25rem;
    background: linear-gradient(135deg, #2f6bff 0%, #1d47c4 100%);
    color: #fff;
}

.chat-top__back {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    color: #fff;
    font-size: 1.375rem;
}

.chat-top__avatar {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    background: rgb(255 255 255 / 18%);
    font-size: 1.125rem;
}

.chat-top__who {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}

.chat-top__who strong {
    font-size: var(--text-body);
    font-weight: 700;
}

.chat-top__who small {
    overflow: hidden;
    opacity: 0.85;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-top__ticket {
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    background: rgb(255 255 255 / 16%);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-weight: 700;
}

.chat-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.75rem 0.625rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat-note,
.chat-day {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.chat-note span,
.chat-day span {
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 85%);
    box-shadow: 0 1px 1px rgb(15 23 42 / 6%);
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
}

.chat-card {
    display: grid;
    gap: 0.125rem;
    margin: 0.25rem auto 0.5rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    background: #fff8e6;
    color: #7c4a03;
    font-size: var(--text-xs);
    text-align: center;
}

.chat-card strong {
    font-size: var(--text-sm);
}

.chat-msg {
    display: flex;
    margin-top: 0.125rem;
}

.chat-msg.is-mine {
    justify-content: flex-end;
}

.chat-bubble {
    position: relative;
    max-width: 80%;
    padding: 0.4375rem 0.625rem 0.3125rem;
    border-radius: 0.875rem;
    box-shadow: 0 1px 1px rgb(15 23 42 / 8%);
    font-size: var(--text-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.chat-msg.is-theirs .chat-bubble {
    border-start-start-radius: 0.25rem;
    background: #fff;
    color: #0f172a;
}

.chat-msg.is-mine .chat-bubble {
    border-start-end-radius: 0.25rem;
    background: #2459e6;
    color: #fff;
}

.chat-bubble p {
    margin: 0;
    white-space: pre-wrap;
}

.chat-bubble__author {
    display: block;
    margin-bottom: 0.125rem;
    color: #2459e6;
    font-size: 0.6875rem;
}

/* Live chat: the green "online" dot beside the name, and the assistant's typing dots. */
.live-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline-start: 0.25rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0.1875rem rgba(34, 197, 94, 0.2);
    vertical-align: middle;
    animation: live-dot-pulse 2s ease-in-out infinite;
}

@keyframes live-dot-pulse {
    50% { box-shadow: 0 0 0 0.3125rem rgba(34, 197, 94, 0.08); }
}

.chat-typing .chat-bubble {
    padding-block: 0.75rem;
}

.chat-typing__dots {
    display: inline-flex;
    gap: 0.25rem;
}

.chat-typing__dots i {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: #94a3b8;
    animation: chat-typing-dot 1.2s ease-in-out infinite;
}

.chat-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes chat-typing-dot {
    0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.1875rem); }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot, .chat-typing__dots i { animation: none; }
}

.chat-bubble__image {
    display: block;
    overflow: hidden;
    margin: -0.125rem -0.375rem 0.375rem;
    border-radius: 0.625rem;
}

.chat-bubble__image img {
    display: block;
    width: 100%;
    max-height: 16rem;
    object-fit: cover;
}

.chat-bubble__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.1875rem;
    margin-top: 0.125rem;
    opacity: 0.7;
    font-size: 0.625rem;
    line-height: 1;
}

.chat-tick {
    font-size: 0.875rem;
}

.chat-msg.is-pending .chat-bubble {
    opacity: 0.85;
}

.chat-msg.is-failed .chat-bubble {
    background: #e5484d;
    cursor: pointer;
}

.chat-jump {
    position: absolute;
    bottom: 4.75rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: #fff;
    box-shadow: 0 0.25rem 0.75rem rgb(15 23 42 / 18%);
    color: #2459e6;
    font-size: var(--text-xs);
    font-weight: 700;
    transform: translateX(-50%);
}

.chat-jump[hidden] {
    display: none;
}

.chat-composer {
    display: flex;
    flex: none;
    align-items: flex-end;
    gap: 0.375rem;
    padding: 0.5rem 0.5rem calc(env(safe-area-inset-bottom) + 0.5rem);
    background: #eef2f8;
}

.chat-composer__attach {
    position: relative;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: 50%;
    color: #64748b;
    font-size: 1.375rem;
    cursor: pointer;
}

.chat-composer__attach input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chat-composer__field {
    display: grid;
    flex: 1;
    min-width: 0;
    padding: 0.5625rem 0.875rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 1px 1px rgb(15 23 42 / 6%);
}

.chat-composer__field textarea {
    width: 100%;
    max-height: 8rem;
    padding: 0;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: #0f172a;
    font: inherit;
    font-size: var(--text-body);
    line-height: 1.375rem;
}

.chat-composer__file {
    overflow: hidden;
    margin-bottom: 0.25rem;
    color: #2459e6;
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-composer__file[hidden] {
    display: none;
}

.chat-composer__send {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #2459e6;
    color: #fff;
    font-size: 1.125rem;
    cursor: pointer;
}

.chat-composer__send:active {
    transform: scale(0.94);
}

.chat-closed {
    flex: none;
    padding: 0.875rem 1rem calc(env(safe-area-inset-bottom) + 0.875rem);
    background: #fff;
    color: #64748b;
    font-size: var(--text-sm);
    text-align: center;
}

.chat-closed a {
    color: #2459e6;
    font-weight: 700;
}

/* ===== Crypto deposits: coin list, network sheet, address page ===== */

.cdep__label {
    margin: 0.25rem 0 0.5rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cdep-coins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdep-coins li {
    min-width: 0;
}

.cdep-coin {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 5.5rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.25rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 0.875rem;
    background: var(--color-surface);
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
}

.cdep-coin > iconify-icon:first-child {
    flex: none;
    font-size: 1.625rem;
}

.cdep-coin span {
    display: grid;
    min-width: 0;
    max-width: 100%;
    gap: 0.125rem;
    line-height: 1.25;
}

.cdep-coin strong {
    font-size: 0.8125rem;
    font-weight: 700;
}

.cdep-coin small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;
}

.cdep-coin:focus-visible,
.home-promos__card:focus-visible {
    outline: 2px solid #2f6ff0;
    outline-offset: 2px;
}

.cdep-coin:active {
    background: var(--color-surface-subtle);
}

.cdep-sheet__grab {
    display: block;
    width: 2.75rem;
    height: 0.3125rem;
    margin: -0.25rem auto 0.25rem;
    border-radius: 999px;
    background: var(--color-border);
}

.cdep-sheet h2 {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 700;
}

.cdep-networks {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdep-networks li + li {
    border-top: 1px solid var(--color-border-subtle);
}

.cdep-networks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0.125rem;
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 600;
}

.cdep-networks a iconify-icon {
    color: var(--color-text-muted);
}

.cdep-networks__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: #f5a623;
}

.cdep-address {
    display: grid;
    gap: 0.75rem;
}

.cdep-qr {
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    padding-top: 0.25rem;
}

.cdep-qr__code {
    width: 11.5rem;
    padding: 0.625rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem -0.75rem rgb(15 23 42 / 30%);
}

.cdep-qr__code svg {
    display: block;
    width: 100%;
    height: auto;
}

.cdep-qr p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.cdep-card {
    padding: 0.875rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.cdep-card small {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cdep-card__network {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

.cdep-card__network strong {
    display: block;
    margin-top: 0.125rem;
    color: var(--color-text);
    font-size: var(--text-body);
}

.cdep-switch {
    display: grid;
    width: 2.375rem;
    height: 2.375rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-subtle);
    color: #2459e6;
    font-size: 1.125rem;
    cursor: pointer;
}

.cdep-card__address {
    padding-top: 0.75rem;
}

.cdep-card__address > p {
    margin: 0.25rem 0 0;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    word-break: break-all;
    user-select: all;
}

.cdep-card__memo {
    color: var(--color-text-muted) !important;
}

.cdep-copy {
    display: flex;
    width: 100%;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #ffc35c 0%, #f5a623 55%, #e88b0c 100%);
    box-shadow: 0 0.5rem 1rem -0.625rem rgb(232 139 12 / 75%);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.cdep-copy:active {
    transform: scale(0.985);
}

.cdep-min {
    padding: 0.75rem 0.875rem;
    border: 1px solid rgb(245 166 35 / 30%);
    border-radius: var(--radius-lg);
    background: rgb(245 166 35 / 8%);
}

.cdep-min > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.cdep-min small {
    color: #c27803;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cdep-min strong {
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-md);
    font-weight: 800;
}

.cdep-min p {
    margin: 0.375rem 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.cdep-min .cdep-min__approx {
    margin-top: 0.125rem;
    text-align: end;
}

.cdep-recent {
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.cdep-recent h2 {
    margin: 0 0 0.25rem;
    font-size: var(--text-sm);
    font-weight: 700;
}

.cdep-recent ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdep-recent li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.cdep-recent li + li {
    border-top: 1px solid var(--color-border-subtle);
}

.cdep-recent span {
    display: grid;
}

.cdep-recent strong {
    font-size: var(--text-sm);
}

.cdep-recent small {
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.cdep-recent em {
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 700;
}

.cdep-recent em.is-ok {
    color: #16a34a;
}

.cdep-recent em.is-low {
    color: #e5484d;
    font-size: var(--text-xs);
}

/* Links in chat messages as small inline buttons. */
.chat-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.125rem 0;
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-pill);
    background: #2459e6;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    vertical-align: middle;
}

.chat-msg.is-mine .chat-link {
    background: #fff;
    color: #2459e6;
}

.chat-link:active {
    transform: scale(0.97);
}

.chat-bubble__image {
    cursor: zoom-in;
}

/* ===== Change language ===== */

.language-sheet .app-sheet__panel {
    max-height: 80dvh;
}

.language-list {
    display: grid;
    overflow-y: auto;
    margin: 0 calc(var(--page-gutter) * -1);
}

.language-list button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem var(--page-gutter);
    border: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text);
    text-align: start;
    cursor: pointer;
}

.language-list button:last-child {
    border-bottom: 0;
}

.language-list span {
    display: grid;
    line-height: 1.3;
}

.language-list strong {
    font-size: var(--text-body);
    font-weight: 600;
}

.language-list small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Picked the way the country list is: a tint of the sheet's own text colour, so it reads on
   the blue theme and the light one alike. */
.language-list button:active,
.language-list .is-current {
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.language-list .is-current strong {
    font-weight: 700;
}

.language-list iconify-icon {
    flex: none;
    color: currentColor;
    font-size: 1.25rem;
}

/* The language button in the sign-in header, where Register / Log in used to be. */
.auth-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.auth-lang iconify-icon {
    font-size: 1.0625rem;
}

.auth-lang__caret {
    color: var(--color-text-muted);
    font-size: 0.75rem !important;
}

/* ===== Orders: the AI trading order history ===== */
.orders-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: 0 0 var(--space-6);
}

.orders-tabs {
    display: flex;
    height: var(--tap-target);
    align-items: stretch;
    gap: var(--space-5);
    padding-inline: var(--page-gutter);
}

.orders-tabs a {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--text-body);
    font-weight: 500;
    text-decoration: none;
}

.orders-tabs a.is-active {
    color: var(--color-text);
    font-weight: 600;
}

.orders-tabs a.is-active::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.5rem;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--color-action);
    content: "";
    transform: translateX(-50%);
}

.orders-list {
    display: grid;
    gap: var(--space-2);
    padding: 0 var(--page-gutter);
}

.orders-day {
    display: grid;
    gap: var(--space-2);
}

.orders-day__label {
    margin: 0;
    padding: var(--space-2) var(--space-1) 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
}

.order-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.order-card__head {
    display: grid;
    align-items: center;
    gap: var(--space-3);
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
}

.order-card__head .mkt-avatar {
    width: 2.25rem;
    height: 2.25rem;
    box-shadow: 0 0 0 1px var(--color-border-subtle);
}

.order-card__instrument {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.order-card__instrument strong {
    color: var(--color-text);
    font-size: var(--text-body);
    font-weight: 700;
}

.order-card__instrument span {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-card__result {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
}

.order-card__result strong {
    color: var(--color-success);
    font-family: var(--font-numeric);
    font-size: var(--text-body);
    font-weight: 700;
}

.order-card__percent {
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-pill);
    background: var(--color-success-bg);
    color: var(--color-success);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-weight: 600;
}

.order-card__trades {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-card__trades li {
    display: grid;
    align-items: center;
    gap: var(--space-2);
    grid-template-columns: auto minmax(0, 1fr) auto;
    font-size: var(--text-sm);
}

.order-card__trades b {
    color: var(--color-success);
    font-family: var(--font-numeric);
    font-weight: 600;
}

.order-card__meta {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.order-card__meta div {
    display: grid;
    gap: 0.1875rem;
    min-width: 0;
}

.order-card__meta dt {
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
}

.order-card__meta dd {
    margin: 0;
    overflow: hidden;
    color: var(--color-text);
    font-family: var(--font-numeric);
    font-size: var(--text-xs);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-side {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.order-side.is-buy {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.order-side.is-sell {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.order-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-text-dim);
    font-size: var(--text-xs);
}

.order-card__status {
    color: var(--color-text-muted);
    font-weight: 600;
}

.orders-more {
    display: flex;
    height: var(--input-height);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-action);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.orders-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    margin: var(--space-6) var(--page-gutter) 0;
    padding: var(--space-6) var(--card-pad);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    text-align: center;
}

.orders-empty > span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-subtle);
    color: var(--color-text-dim);
    font-size: 1.625rem;
}

.orders-empty h2 {
    margin: 0;
    color: var(--color-text);
    font-size: var(--text-md);
}

.orders-empty p {
    max-width: 18rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.orders-empty__action {
    display: inline-flex;
    height: var(--input-height);
    align-items: center;
    margin-top: var(--space-2);
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--color-action);
    color: var(--color-on-action);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}
/* ===== end Orders ===== */