.user-details-wrapper[data-v-3b641f57] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 12px 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--color-white, #ffffff);
    border: 1px solid var(--item-border-color);
    width: 100%;
}
.avatar[data-v-3b641f57] {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--btn-bg-color) 0%, var(--btn-footer-glow) 90%);
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}
.avatar span[data-v-3b641f57] {
    transform: translateY(-2px);
}
.user-details-info[data-v-3b641f57] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.user-details-info h3[data-v-3b641f57],
.user-details-info p[data-v-3b641f57] {
    margin: 0;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}
.user-details-info h3[data-v-3b641f57] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-white, #ffffff);
}
.user-details-info p[data-v-3b641f57] {
    font-size: 14px;
    line-height: 1.4;
    color: #b5a8aa;
    /* color: var(--sub-text-color, #a1a1a1); */
}
.skeleton-circle-avatar[data-v-3b641f57] {
    width: 64px !important;
    min-width: 64px;
    height: 64px !important;
    margin: 0 !important;
    border-radius: 50% !important;
}
ion-skeleton-text[data-v-3b641f57] {
    background: #63636333;
}

.ion-tabs {
    background-color: #000;
}
.loading-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.tab-button-background {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 2px 4px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
}
.tab-button-background ion-icon {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: var(--tab-color);
    margin-bottom: 0px;
}
.tab-button-background.tab-selected ion-icon,
.tab-button-background.tab-selected .tab-name {
    color: var(--tab-color-active);
}
.tab-button-background.tab-selected {
    position: relative;
}
.tab-button-background.tab-selected::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(270deg, rgba(244, 37, 0, 0) 0%, var(--tab-color-active) 50%, rgba(244, 37, 0, 0) 100%);
}
.tab-name {
    font-size: 12px;
    height: 25px;
    color: var(--tab-color);
}

/* ================= normal tab ================= */
.main-tab-bar {
    display: flex;
    align-items: stretch;
    height: 56px;
    padding: 5px 10px 0;
    box-sizing: border-box;
    border-top: 1px solid var(--btn-border-color, var(--special-btn));
    background: linear-gradient(to bottom,
            var(--login-bg-top) 0%,
            var(--login-bg-top) 65%,
            var(--tab-selected-color) 100%);
    border-radius: 25px;
}

/* ================= floating tab ================= */
/* 安全区挂在外层 wrapper，抬起整块 pill；PWA / iOS / TG 都需要，不限 tg-host */
.floating-tabs ion-content {
    --padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}
.floating-tab-wrapper {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    z-index: 1000;
    padding: 5px 0 env(safe-area-inset-bottom, 0px);
}
.floating-tab-wrapper .main-tab-bar {
    border-radius: 30px;
}

/* ================= gem layout ================= */
.gem-tab-layout {
    display: flex;
    justify-content: center;
}
.gem-tab-layout .tab-button-background {
    max-width: 95px;
}
.floating-tab-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    color: var(--content-color);
    background-color: var(--content-color);
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

/* ── Prototype tab bar ─────────────────────────────────────────────────
   Two problems with the previous version: it floated as an inset pill,
   where the prototype runs full width, and its surface was translucent
   enough that scrolling content read straight through it.

   The prototype is a full-bleed bar that fades into the canvas with a
   hairline along the top. The fill therefore has to reach the canvas
   colour before the labels, or list rows show through the labels. */
.floating-tab-wrapper {
    left: 0;
    right: 0;
    padding: 0;
}
.floating-tab-wrapper .main-tab-bar,
.main-tab-bar {
    border-radius: 0;
    border-top: 1px solid var(--ap-hairline, rgba(255, 255, 255, 0.10));
    background: linear-gradient(to top,
            var(--content-color, #080808) 0%,
            var(--content-color, #080808) 72%,
            transparent 100%);
    backdrop-filter: blur(14px);
    --border: none;
    min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-button-background {
    --background: transparent;
    --background-focused: transparent;
    --background-hover: transparent;
    --ripple-color: transparent;
    --color: var(--ap-text-mute, rgba(229, 234, 250, 0.54));
    --color-selected: var(--color-white, #E5EAFA);
}
.main-tab-bar ion-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

/* Only the active glyph takes the brand colour; its label goes to full
   foreground rather than also turning accent, which is what stops the bar
   reading as a block of colour. */
ion-tab-button.tab-selected ion-icon {
    color: var(--tab-color-active, #E5252A);
}
.tab-name {
    font-size: 10px;
    letter-spacing: 0.01em;
    font-weight: 500;
}
ion-tab-button.tab-selected .tab-name {
    font-weight: 600;
    color: var(--color-white, #E5EAFA);
}

/* ── Tab bar, 390 x 67 frame ───────────────────────────────────────────
   Four equal icon cells on a solid brand-tinted bar with a hairline on top.
   The name stays on each button as its accessible label. */
.floating-tab-wrapper .main-tab-bar,
.main-tab-bar {
    height: calc(67px + env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid color-mix(in srgb, var(--color-white, #ffffff) 12%, transparent);
    background: color-mix(in srgb, var(--hero, #AC0101) 14%, var(--content-color, #200101));
    backdrop-filter: none;
}
.floating-tab-content {
    height: calc(67px + env(safe-area-inset-bottom, 0px));
}
.tab-button-background {
    padding: 0;
    gap: 4px;
}
.tab-button-background ion-icon,
.main-tab-bar ion-icon {
    width: 23px;
    height: 23px;
    font-size: 23px;
    margin: 0;
    color: var(--tab-color, #A1A1A1);
}
.tab-button-background.tab-selected ion-icon {
    color: var(--tab-color-active, #E4072F);
}
.tab-button-background.tab-selected::before,
.tab-name {
    display: none;
}

.temp-invite-modal {
    --width: 100%;
    --height: auto;
    --border-radius: 20px 20px 0 0;
    --background: var(--content-background, #1c1c1c);
    align-items: flex-end;
}

.temp-invite-sheet[data-v-63732e76] {
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    color: var(--color-white, #fff);
}
.sheet-header[data-v-63732e76] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.sheet-title[data-v-63732e76] {
    font-size: 18px;
    font-weight: 700;
}
.close-btn[data-v-63732e76] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--color-white, #fff);
    font-size: 22px;
}
.sheet-label-row[data-v-63732e76] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sheet-label[data-v-63732e76] {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}
.sheet-label-row .sheet-label[data-v-63732e76] {
    margin-bottom: 0;
}
.expire-tabs[data-v-63732e76] {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.expire-tab[data-v-63732e76] {
    flex: 1;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--ap-border, rgba(255, 255, 255, 0.28));
    background: transparent;
    color: var(--color-white, #fff);
    font-size: 13px;
    font-weight: 600;
}
.expire-tab.active[data-v-63732e76] {
    border-color: var(--btn-bg-color, #DE0202);
    background: var(--btn-bg-color, #DE0202);
    color: var(--login-bg-footer, #fff);
}
.rate-row[data-v-63732e76] {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.rate-block[data-v-63732e76] {
    flex: 1;
    min-width: 0;
}
.rate-box[data-v-63732e76] {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-right: 12px;
    border-radius: 12px;
    background: var(--item-color, rgba(0, 0, 0, 0.28));
}
.rate-box ion-input[data-v-63732e76] {
    --background: transparent;
    --color: var(--color-white, #fff);
    --placeholder-color: rgba(255, 255, 255, 0.45);
    --highlight-height: 0;
    --padding-start: 12px;
    --padding-end: 8px;
    --padding-top: 10px;
    --padding-bottom: 10px;
    flex: 1;
}
.rate-suffix[data-v-63732e76] {
    font-size: 14px;
    font-weight: 700;
}
.rate-hint[data-v-63732e76] {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.78));
}
.remark-input[data-v-63732e76] {
    --background: var(--item-color, rgba(0, 0, 0, 0.28));
    --color: var(--color-white, #fff);
    --placeholder-color: rgba(255, 255, 255, 0.45);
    --highlight-color: #fff !important;
    --highlight-color-focused: #fff;
    --highlight-color-valid: #fff;
    --highlight-color-invalid: #fff;
    --highlight-height: 0;
    --padding-start: 12px;
    --padding-end: 12px;
    --padding-top: 10px;
    --padding-bottom: 10px;
    margin-bottom: 16px;
    border-radius: 12px;
}
.get-btn[data-v-63732e76] {
    --border-radius: 999px;
    margin: 0;
    height: 44px;
    font-weight: 700;
}
.stats-entry[data-v-63732e76] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.78));
    font-size: 13px;
    font-weight: 600;
}
.stats-entry ion-icon[data-v-63732e76] {
    font-size: 16px;
}

/* :root {
    --skeleton-color: rgba(243, 243, 243, 0.5);
    --skeleton-highlight: rgba(236, 236, 236, 0.5);
    --color-white: #fff;
} */
.image-wrapper[data-v-712a7151] {
    height: 250px;
    width: 100%;
    position: relative;
    color: white;
    background: #000;
    overflow: hidden;
    border-radius: 12px;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}
.image-wrapper[data-v-712a7151]::before,
.image-wrapper[data-v-712a7151]::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);
    animation: moveLight-712a7151 12s infinite linear;
    background-color: rgba(24, 6, 6, 0.3);
    mix-blend-mode: screen;
    filter: blur(50px);
}
.overlay-content[data-v-712a7151] {
    position: relative;
    z-index: 2;
    height: 110%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wrapper-title[data-v-712a7151] {
    font-size: 14px;
    margin-bottom: 5px;
    color: #e4e4e4 !important;
    z-index: 3;
}
.wrapper-value[data-v-712a7151] {
    font-size: 32px;
    font-weight: bold;
    margin: 5px 0;
    z-index: 3;
}
.wrapper-sgd[data-v-712a7151] {
    font-size: 18px;
    font-weight: 700;
    color: var(--tab-selected-color);
    z-index: 3;
}
ion-button[data-v-712a7151] {
    --background: var(--special-btn) !important;
}
.image-wrapper[data-v-712a7151]::after {
    background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 75%);
    animation: moveLight2-712a7151 18s infinite linear;
    filter: blur(80px);
}
@keyframes moveLight-712a7151 {
0% {
        transform: translate(0%, 0%) rotate(0deg);
}
50% {
        transform: translate(30%, -20%) rotate(180deg);
}
100% {
        transform: translate(0%, 0%) rotate(360deg);
}
}
@keyframes moveLight2-712a7151 {
0% {
        transform: translate(-20%, 30%) rotate(0deg);
}
50% {
        transform: translate(20%, -10%) rotate(180deg);
}
100% {
        transform: translate(-20%, 30%) rotate(360deg);
}
}

/* 卡片*/
.card[data-v-712a7151] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 12px;
}
.main-card[data-v-712a7151] {
    position: relative;
    cursor: pointer;
    /* margin-top: -35px; */
}
.home-footer[data-v-712a7151] {
    /* margin-top: -110px;
    position: absolute; */
    width: 100%;
    /* top: 280px; */
    /* z-index: 999; */
    padding: 0 10px;
    /* padding-top: 40px; */
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

/* Actions */
.card-actions[data-v-712a7151] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    margin-top: 10px;
    margin-bottom: 0px;
    overflow-x: auto;
    scrollbar-width: none;
}
.card-actions[data-v-712a7151]::-webkit-scrollbar {
    display: none;
}
.action-item[data-v-712a7151] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
    height: 90px;
    cursor: pointer;
    border-radius: 8px;
}
.action-item[data-v-712a7151]:hover {
    background: var(--ap-sheen, rgba(255, 255, 255, 0.06));
}
.action-item[data-v-712a7151]:active {
    transform: scale(0.98);
}
.icon-circle[data-v-712a7151] {
    width: 88px;
    height: 73px;
    padding: 8px 10px;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    border-radius: 8px;
}
.icon-circle ion-icon[data-v-712a7151] {
    font-size: 26px;
    color: #A5A4A9 !important;
    margin-bottom: -4px;
}
.action-item span[data-v-712a7151] {
    font-size: 0.85em;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bill-section[data-v-712a7151] {
    padding: 0;
}
.bill-section ion-button[data-v-712a7151] {
    --border-width: 1px;
    --border-style: solid;
    --border-color: var(--btn-border-color, transparent);
}
.bill-item[data-v-712a7151] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    background: var(--item-color, rgba(0, 0, 0, 0.22));
    padding: 12px 14px;
    box-shadow: none;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.2s ease, transform 0.12s ease;
    border: 1px solid var(--ap-border, rgba(146, 17, 21, 0.7));
    animation: hRise-712a7151 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bill-item[data-v-712a7151]:active {
    transform: scale(0.99);
    background: var(--ap-surface, rgba(0, 0, 0, 0.34));
}
.bill-icon[data-v-712a7151] {
    font-size: 20px;
    margin-right: 13px;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ap-surface, rgba(0, 0, 0, 0.28));
    display: flex;
    justify-content: center;
    align-items: center;
}
.bill-icon ion-icon[data-v-712a7151] {
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
    font-size: 20px;
}
.bill-title[data-v-712a7151] {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white, #E5EAFA);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bill-content[data-v-712a7151] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bill-intro[data-v-712a7151] {
    font-size: 12px;
    margin-top: 2px;
    color: var(--ap-text-mute, rgba(229, 234, 250, 0.54));
}
.bill-side[data-v-712a7151] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 90px;
    text-align: right;
    gap: 2px;
    flex-shrink: 0;
}
.bill-minor[data-v-712a7151] {
    color: var(--ap-text-mute, rgba(229, 234, 250, 0.54));
    font-size: 12px;
}
.bill-brief[data-v-712a7151] {
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.bill-brief[data-v-712a7151] {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.issue-card[data-v-712a7151] {
    padding: 20px 0;
}
.issue-card .issue-title[data-v-712a7151] {
    margin-top: 6px;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 18px;
}
.issue-card .step[data-v-712a7151] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--item-border-color);
}
.issue-card .step[data-v-712a7151]:last-child {
    border-bottom: none;
}
.issue-card .dot[data-v-712a7151] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
}
.issue-card .step.active .dot[data-v-712a7151] {
    background: var(--success-color);
}
.issue-card .step-title[data-v-712a7151] {
    font-size: 14px;
}
.issue-card .desc[data-v-712a7151] {
    font-size: 12px;
    color: var(--sub-text-color);
    margin-top: 4px;
}
.issue-card ion-button[data-v-712a7151] {
    --border-radius: 22px;
    margin: 0;
    min-width: 100px;
    --background: linear-gradient(0deg in srgb,
            var(--highlight-color, var(--btn-bg-color, #FFBE00)) 5%,
            color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 88%, #8a3c00) 81%) !important;
}
.no-data[data-v-712a7151] {
    text-align: center;
    color: var(--sub-text-color);
    padding: 30px 0;
    font-size: 1em;
}
.bill-total[data-v-712a7151] {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 22px 4px 14px;
}
.bill-left[data-v-712a7151] {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: var(--color-white, #E5EAFA);
}
.bill-right[data-v-712a7151] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    color: var(--ap-accent, #DE0202);
    background: rgba(222, 2, 2, 0.10);
    background: color-mix(in srgb, var(--ap-accent, #DE0202) 14%, transparent);
    border: 1px solid rgba(222, 2, 2, 0.28);
    border-color: color-mix(in srgb, var(--ap-accent, #DE0202) 34%, transparent);
    transition: transform var(--ap-dur-fast, 120ms) var(--ap-ease-out, ease),
        background var(--ap-dur-base, 220ms);
}
.bill-right[data-v-712a7151]:active {
    transform: scale(0.96);
}
.bill-timed[data-v-712a7151] {
    font-size: 12px;
    color: #ccc;
}
.platform_iconty[data-v-712a7151] {
    background-color: black;
}

/* the router outlet behind the page defaults to white; give the page the
   theme background so the transparent header blends into the content.
   Ionic Vue renders <ion-page> as <div class="ion-page">, so target the class. */
.ion-page {
&[data-v-712a7151] {
    /* background: var(--content-background, linear-gradient(to bottom, #6F0204 0%, #000000 100%)); */
    /* background: linear-gradient(180deg, #1C1C1C 0px, #AC0101 412px) top / 100% 412px no-repeat,
        var(--canvas, #200101); */
    }
&.home_top_bg {
&[data-v-712a7151] {
        background: var(--home-top-bg, var(--content-background, #200101));
        }
.home-footer[data-v-712a7151] {
            background: var(--canvas, #200101);
}
}
}
ion-header[data-v-712a7151] {
    box-shadow: none;
    background: transparent !important;
    /* background: var(--home-hero, transparent) !important; */
}
ion-header[data-v-712a7151]::after {
    display: none;
}
ion-toolbar[data-v-712a7151] {
    --background: transparent;
    --border-width: 0;
    --border-color: transparent;
    --color: var(--color-white, #E5EAFA);
    --min-height: 52px;
}
ion-toolbar ion-button[data-v-712a7151] {
    --background: transparent !important;
}
ion-toolbar ion-icon[data-v-712a7151],
ion-buttons ion-icon[data-v-712a7151],
ion-menu-button[data-v-712a7151] {
    --color: var(--color-white, #E5EAFA) !important;
    color: var(--color-white, #E5EAFA) !important;
}
ion-header ion-title[data-v-712a7151] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: var(--color-white, #E5EAFA);
    font-weight: 700;
    font-size: 17px;
}
.no-data[data-v-712a7151] {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px 0;
    opacity: 0.9;
}
.placeholder-box[data-v-712a7151] {
    width: 100%;
    margin: 0 auto 20px;
    margin-left: 90px;
}
.text[data-v-712a7151] {
    color: #bfc6d4;
    font-size: 14px;
    margin-top: 20px;
}
svg circle[data-v-712a7151] {
    fill: blue;
}
.invite[data-v-712a7151] {
    padding: 18px;
    background: linear-gradient(135deg,
            var(--item-color, rgba(0, 0, 0, 0.22)) 0%,
            var(--invite-bg, #380102) 100%);
    border: 1px solid var(--ap-border, rgba(146, 17, 21, 0.7));
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    margin-bottom: 90px;
}
.section-title[data-v-712a7151] {
    width: 78%;
    color: var(--color-white, #E5EAFA);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.invite-text[data-v-712a7151] {
    font-size: 13.5px;
    width: 76%;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
    margin: 8px 0 14px;
    line-height: 1.45;
}
.invite-actions[data-v-712a7151] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
    gap: 10px;
}
.invite-actions.both[data-v-712a7151] {
    justify-content: space-between;
}
.invite-btn[data-v-712a7151] {
    padding: 11px 22px;
    background: var(--btn-bg-color, #DE0202);
    color: #ffffff;
    width: auto;
    display: inline-block;
    border: none;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 10px 24px -8px var(--btn-footer-glow, #921115);
    transition: transform 0.15s ease;
}
.invite-btn[data-v-712a7151]:active {
    transform: translateY(2px);
}

/* system_notice 横幅跑马灯 */
.notice-marquee-wrap[data-v-712a7151] {
    width: calc(100% - 32px);
    margin: 8px auto 6px;
    background: var(--item-color, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--ap-border, rgba(146, 17, 21, 0.7));
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    padding: 9px 0;
    display: flex;
    align-items: center;
}
.notice-marquee[data-v-712a7151] {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 12px;
    display: flex;
    align-items: center;
}
.notice-marquee-text[data-v-712a7151] {
    display: inline-block;
    animation: marquee-scroll-712a7151 18s linear infinite;
    font-size: 12.5px;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
    white-space: nowrap;
}
@keyframes marquee-scroll-712a7151 {
0%,
    5% {
        transform: translateX(0);
}
95%,
    100% {
        transform: translateX(var(--marquee-end, 0));
}
}
.invite-img[data-v-712a7151] {
    width: 90px;
    height: 90px;
    right: 0px;
    bottom: 0px;
    position: absolute;
    border-bottom-right-radius: 20px;
}
ion-title img[data-v-712a7151] {
    height: 18px;
    margin-top: 15px;
}
.notification-wrapper[data-v-712a7151] {
    position: relative;
}
.notification-badge[data-v-712a7151] {
    position: absolute;
    color: #fff;
    top: -4px;
    right: -5px;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 8px;
    padding: 0 4px;
}
.balance-card[data-v-712a7151] {
    position: relative;
    background: var(--home-card-background, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--ap-border, rgba(146, 17, 21, 0.7));
    box-shadow: var(--home-card-box-shadow, 0 14px 34px -16px rgba(0, 0, 0, 0.75));
    width: calc(100% - 32px);
    max-width: 520px;
    height: auto;
    margin: 12px auto 0;
    padding: 30px 20px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light, #E5EAFA);
    animation: hRise-712a7151 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.quick-actions[data-v-712a7151] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin: 20px 6px 4px;
    animation: hRise-712a7151 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}
.qa[data-v-712a7151] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.qa-circle[data-v-712a7151] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-surface, rgba(0, 0, 0, 0.28));
    border: 1px solid var(--ap-hairline, rgba(255, 255, 255, 0.10));
    color: var(--color-white, #E5EAFA);
    transition: transform var(--ap-dur-fast, 120ms) var(--ap-ease-out, ease);
}

/* The glyph takes the label-on-primary token, not white: on a gold or light
   brand a white glyph on the accent fill disappears. */
/* .qa-circle.primary {
    background: var(--ap-accent, #DE0202);
    border-color: transparent;
    color: var(--login-bg-footer, #ffffff);
    box-shadow: 0 8px 22px -6px var(--ap-glow, #921115);
} */
.qa:active .qa-circle[data-v-712a7151] {
    transform: scale(0.94);
}
.qa-circle ion-icon[data-v-712a7151] {
    font-size: 22px;
}
.qa-label[data-v-712a7151] {
    font-size: 11.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.balance-title[data-v-712a7151] {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
    margin-bottom: 10px;
}
.balance-amount[data-v-712a7151] {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-white, #E5EAFA);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.balance-pending[data-v-712a7151] {
    font-size: 13px;
    color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
    margin-top: 12px;
}
.currency[data-v-712a7151] {
    color: #e5e5e5;
}
@keyframes hRise-712a7151 {
from {
        opacity: 0;
        transform: translateY(12px);
}
to {
        opacity: 1;
        transform: translateY(0);
}
}
ion-skeleton-text[data-v-712a7151] {
    border-radius: 10px;
}

/* ── Prototype composition ─────────────────────────────────────────────
   The screen was built as a stack of separate boxes: a bordered balance
   card, then one bordered card per transaction. The prototype instead lets
   the balance sit open on the canvas and groups the transactions into a
   single glass card divided by hairlines, which is most of why the two
   looked unrelated despite matching colours. */
.balance-card[data-v-712a7151] {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    max-width: none;
    margin: 8px auto 0;
}

/* One card, not four. The wrapper takes the surface and the rows become
   plain dividers inside it. */
.bill-list-scroll[data-v-712a7151] {
    background: var(--ap-card, rgba(0, 0, 0, 0.2));
    border: 1px solid var(--ap-hairline, rgba(255, 255, 255, 0.10));
    border-radius: 22px;
    padding: 2px 14px;
    overflow: hidden;
}
.bill-item[data-v-712a7151] {
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 13px 0;
    border-bottom: 1px solid var(--ap-hairline, rgba(255, 255, 255, 0.10));
}
.bill-item[data-v-712a7151]:last-of-type {
    border-bottom: none;
}

/* The row icon is a plain tinted disc in the prototype, not a bordered
   tile, so it recedes behind the merchant name. */
.bill-icon[data-v-712a7151] {
    width: 38px;
    height: 38px;
    border: none;
}

/* The "more" action belongs outside the card it summarises. */
.bill-list-scroll ion-button[data-v-712a7151] {
    margin-top: 10px;
}

/* ── Home, 390 x 844 frame ──────────────────────────────────────────────
   A hero gradient runs from near-black under the header into the brand
   colour, and the content sheet slides up over its lower 81px. The
   gradient spans 412px, so the header shows its first 54px and the hero
   continues from there. --hero is defined in styles/index.css. */
.ion-page[data-v-712a7151] {
    --hero-base: #1c1c1c;
    --on-hero: color-mix(in srgb, var(--color-white, #ffffff) 92%, var(--hero, #AC0101));
    /* The hero block, its header strip and the sheet are drawn only when the
       platform sends hero_color. These reference --hero-color without a
       fallback, so on other platforms they are invalid and the var() calls
       below fall back to transparent: the page keeps its own background. */
    --home-head: linear-gradient(180deg in srgb, var(--hero-base) 0%,
            color-mix(in srgb, var(--hero-color) 13%, var(--hero-base)) 100%);
    /* Same rule for the controls: the grey panels belong to the hero layout,
       the dark translucent ones are what other platforms already use. */
    --home-qa-bg: color-mix(in srgb, var(--hero-color) 0%, rgba(255, 255, 255, 0.1));
    --home-qa-border: color-mix(in srgb, var(--hero-color) 0%, rgba(255, 255, 255, 0.45));
    --home-qa-primary: linear-gradient(0deg in srgb,
            var(--highlight-color, var(--btn-bg-color, #FFBE00)) 5%,
            color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 88%, color-mix(in srgb, var(--hero-color) 0%, #8a3c00)) 81%);
    --home-qa-primary-shadow:
        inset 4px 0 6px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 60%, transparent),
        inset 0 4px 3px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 40%, #ffffff),
        inset 0 3px 10px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 70%, color-mix(in srgb, var(--hero-color) 0%, #ffff00));
    --home-pill-bg: color-mix(in srgb, var(--hero-color) 0%, rgba(44, 44, 44, 0.6));
    --home-pill-border: color-mix(in srgb, var(--hero-color) 0%, rgba(253, 251, 252, 0.47));
    --home-pill-text: color-mix(in srgb, var(--hero-color) 0%, var(--color-white, #ffffff));
    --home-rows-bg: color-mix(in srgb, var(--hero-color) 0%, color-mix(in srgb, var(--color-white, #ffffff) 25%, var(--item-color, #121212)));
    --home-row-bg: color-mix(in srgb, var(--hero-color) 0%, var(--item-color, #121212));
    --home-row1-bg: color-mix(in srgb, var(--hero-color) 6%, var(--item-color, #121212));
    --home-row-divider: color-mix(in srgb, var(--hero-color) 0%, transparent);
    --home-icon-bg: color-mix(in srgb, var(--hero-color) 0%, color-mix(in srgb, var(--color-white, #ffffff) 4%, var(--item-color, #121212)));
    --home-icon1-bg: color-mix(in srgb, var(--hero-color) 15%, var(--item-color, #121212));
}

/* Home paints its own header strip, so the shared header glow is off here. */
.ion-page ion-header ion-toolbar[data-v-712a7151],
.ion-page ion-header ion-toolbar[data-v-712a7151]:last-of-type {
    --background: transparent;
}
ion-toolbar[data-v-712a7151] {
    --min-height: 54px;
    --padding-top: 0;
    --padding-bottom: 0;
    box-shadow: none;
}

/* Ionic's iOS mode draws a 0.55px hairline under the last toolbar through a
   more specific selector; the header blends into the canvas, so it is off. */
ion-header ion-toolbar[data-v-712a7151]:last-of-type {
    --border-width: 0;
}
ion-header ion-title[data-v-712a7151] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.notification-badge[data-v-712a7151] {
    top: -2px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    --background: var(--danger-color, var(--btn-bg-color, #FF1E42));
    background: var(--danger-color, var(--btn-bg-color, #FF1E42));
}

/* Same canvas as the other redesigned screens; index.html sets ion-content
   with !important, so this has to match that weight. */
ion-content[data-v-712a7151] {
    --background: transparent !important;
}
.home-hero[data-v-712a7151] {
    padding: 12px 15px 102px;
    /* --home-hero: linear-gradient(180deg, #1C1C1C 0%, #AC0101 121.56%); */
    /* background: var(--home-hero, transparent); */
    background: transparent;
}
.balance-card[data-v-712a7151] {
    margin: 0;
    padding: 0;
    text-align: center;
}
.balance-title[data-v-712a7151] {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--on-hero);
}
.balance-amount[data-v-712a7151] {
    margin: 10px 0;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--color-white, #ffffff);
}
.balance-pending[data-v-712a7151] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--on-hero);
}
.quick-actions[data-v-712a7151] {
    display: flex;
    justify-content: center;
    gap: 0;
    /* margin: 0; */
    margin: 12px 0 4px;
    padding: 18px 0 0;
}
.qa[data-v-712a7151] {
    flex: 1;
    gap: 8px;
}
.qa-circle[data-v-712a7151] {
    width: 51px;
    height: 51px;
    border-radius: 999px;
    background: var(--home-qa-bg, rgba(0, 0, 0, 0.32));
    border: 1px solid var(--home-qa-border, transparent);
    box-shadow: none;
    color: var(--color-white, #ffffff);
}

/* The primary action is the brand's highlight colour with a lit inner rim. */
.qa-circle.primary[data-v-712a7151] {
    border: none;
    /* background: var(--home-qa-primary, var(--btn-bg-color, #DE0202));
    box-shadow: var(--home-qa-primary-shadow, 0 8px 18px -8px var(--btn-footer-glow, #921115)); */
    background: linear-gradient(0deg in srgb,
            var(--highlight-color, var(--btn-bg-color, #FFBE00)) 5%,
            color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 88%, #8a3c00) 81%);
    box-shadow:
        inset 4px 0 6px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 60%, transparent),
        inset 0 4px 3px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 40%, #ffffff),
        inset 0 3px 10px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 70%, #ffff00);
    color: var(--login-bg-footer, #ffffff);
}
.qa-circle ion-icon[data-v-712a7151] {
    font-size: 22px;
}
.qa-label[data-v-712a7151] {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--on-hero);
}
.home-footer[data-v-712a7151] {
    position: relative;
    margin-top: -81px;
    padding: 14px;
    border-radius: 28px 28px 0 0;
}
.bill-section[data-v-712a7151] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bill-total[data-v-712a7151] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}
.bill-left[data-v-712a7151] {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-white, #ffffff);
}
.bill-right[data-v-712a7151] {
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--home-pill-bg, color-mix(in srgb, var(--btn-bg-color, #DE0202) 18%, transparent));
    border: 1px solid var(--home-pill-border, color-mix(in srgb, var(--btn-bg-color, #DE0202) 55%, transparent));
    box-shadow: none;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--home-pill-text, color-mix(in srgb, var(--btn-bg-color, #DE0202) 60%, #ffffff));
}

/* Rows sit on the panel colour; the 1px gaps between them show the card
   behind, which is what draws the dividers. */
.bill-list-scroll[data-v-712a7151] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
    border-radius: 19px;
    border: 1px solid color-mix(in srgb, var(--color-white, #ffffff) 12%, transparent);
    /* background: var(--home-rows-bg, rgba(0, 0, 0, 0.28)); */
    background: var(--item-color);
}
.bill-list-scroll.empty[data-v-712a7151] {
    display: none;
}
.bill-item[data-v-712a7151] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 13px;
    border: none;
    border-bottom: 1px solid var(--home-row-divider, var(--hairline, rgba(255, 255, 255, 0.1)));
    border-radius: 0;
    background: var(--home-row-bg, transparent);
}
.bill-list-scroll .bill-item[data-v-712a7151]:last-child {
    border-bottom: none;
}
.bill-icon[data-v-712a7151] {
    width: 35px;
    height: 35px;
    margin: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    /* background: var(--home-icon-bg, rgba(0, 0, 0, 0.3)); */
    background: var(--special-btn, #381212);
}
.bill-icon ion-icon[data-v-712a7151] {
    font-size: 18px;
    color: var(--color-white, #ffffff);
}
.bill-content[data-v-712a7151] {
    gap: 1px;
}
.bill-title[data-v-712a7151] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white, #ffffff);
}
.bill-intro[data-v-712a7151] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}
.bill-side[data-v-712a7151] {
    gap: 1px;
}
.bill-minor[data-v-712a7151] {
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-white, #ffffff) 43%, #000000);
}
.bill-brief[data-v-712a7151] {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}
.bill-section .more-bills[data-v-712a7151] {
    margin: 0;
    height: 40px;
    font-size: 13.5px !important;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    --border-radius: 10.3px;
    --border-width: 0;
    --background: var(--special-btn, #300A0A);
    --background-hover: var(--special-btn, #300A0A);
    --color: var(--color-white, #ffffff);
    color: var(--color-white, #ffffff);
}
.more-bills ion-icon[data-v-712a7151] {
    font-size: 15px;
    color: var(--color-white, #ffffff);
}
.invite[data-v-712a7151] {
    margin: 0 0 90px;
    padding: 15px;
    min-height: 103px;
    border: none;
    border-radius: 17px;
    background: var(--invite-bg, linear-gradient(164deg in srgb, #9D0521 14.6%, #221014 85.4%));
}
.section-title[data-v-712a7151] {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white, #ffffff);
}
.invite-text[data-v-712a7151] {
    margin: 4px 0 8px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--on-hero);
}
.invite-actions[data-v-712a7151] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
    gap: 10px;
}
.invite-actions.both[data-v-712a7151] {
    justify-content: space-between;
}
.invite-btn[data-v-712a7151] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: var(--highlight-color, var(--btn-bg-color, #FFBE00));
    box-shadow: none;
    color: var(--highlight-text, var(--login-bg-footer, #7D182C));
    font-size: 10.7px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.invite-img[data-v-712a7151] {
    width: 87px;
    height: 86px;
    right: -8px;
    bottom: -4px;
}

.card-carousel-container[data-v-30464eaa] {
    position: relative;
    overflow: hidden;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 20px;
}
.carousel-arrow[data-v-30464eaa] {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    display: none;
}
@media (min-width: 768px) {
.carousel-arrow[data-v-30464eaa] {
        display: flex;
}

    /* .back-cvv {
        margin-top: 20px !important;
    } */
}
.carousel-arrow[data-v-30464eaa]:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
}
.carousel-arrow[data-v-30464eaa]:focus {
    outline: none;
}

/* 左箭头定位 */
.left-arrow[data-v-30464eaa] {
    left: 16px;
}

/* 右箭头定位 */
.right-arrow[data-v-30464eaa] {
    right: 16px;
}
.card-slider[data-v-30464eaa] {
    display: flex;
    transition: transform 0.3s ease-in-out;
    cursor: grab;
    width: 100%;
}
.card-slider[data-v-30464eaa]:active {
    cursor: grabbing;
}
.card-slide[data-v-30464eaa] {
    min-width: 100%;
    aspect-ratio: 1.6 / 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-display[data-v-30464eaa] {
    position: relative;
    width: 100%;
    /* aspect-ratio: 1.6 / 1; */
    padding-top: 220px;
    margin: 0 auto;
    perspective: 1000px;
    z-index: 11;
    cursor: pointer;
}
.flip-container[data-v-30464eaa] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin: 0 auto;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-container.flipped[data-v-30464eaa] {
    transform: rotateY(180deg);
}
.front[data-v-30464eaa],
.back[data-v-30464eaa] {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    overflow: hidden;
}
.front[data-v-30464eaa] {
    transform: rotateY(0deg);
    z-index: 2;
}
.front img[data-v-30464eaa],
.back img[data-v-30464eaa] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-display img[data-v-30464eaa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-brand[data-v-30464eaa],
.card-number[data-v-30464eaa],
.card-holder[data-v-30464eaa],
.card-expiry[data-v-30464eaa] {
    position: absolute;
    width: max-content;
    color: white;
    font-size: 14px;
    z-index: 999;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.card-number[data-v-30464eaa] {
    font-weight: 700;
}
.card-brand[data-v-30464eaa] {
    top: 15%;
    left: 8%;
    font-size: 18px;
    font-weight: bold;
}
.card-number[data-v-30464eaa] {
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    font-size: 18px;
    letter-spacing: 2px;
}
.card-holder[data-v-30464eaa] {
    left: 25%;
    text-transform: uppercase;
}
.card-expiry[data-v-30464eaa] {
    bottom: 7px;
    right: 8%;
}
.back[data-v-30464eaa] {
    transform: rotateY(180deg);
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.back-card-expiry[data-v-30464eaa] {
    position: absolute;
    display: flex;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    color: #ffffff;
}
.back-cvv[data-v-30464eaa] {
    display: flex;
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #ffffff;
}
.back-placeholder[data-v-30464eaa] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    width: max-content;
    font-size: 14px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
.back-card-holder[data-v-30464eaa] {
    position: absolute;
    /* top: 50%;
    left: 50%;
    transform: translate(-40%, -50%); */
    display: flex;
    font-size: 12px;
    color: #ffffff;
}
.card-name-label[data-v-30464eaa] {
    margin-top: -12px;
    font-size: 16px;
    font-weight: bold;
    color: var(--btn-bg-color);
}
.pagination-dots[data-v-30464eaa] {
    display: flex;
    justify-content: center;
    z-index: 99;
    margin-left: 50%;
    margin-top: 12px;
    transform: translateX(-50%);
}
.dot[data-v-30464eaa] {
    height: 8px;
    width: 8px;
    background-color: #d8d8d8;
    border-radius: 50%;
    margin: 0 4px;
    transition: background-color 0.3s ease;
}
.dot.active[data-v-30464eaa] {
    background-color: var(--btn-bg-color);
    width: 12px;
    border-radius: 10px;
}
.action-icon[data-v-30464eaa] {
    color: white;
    vertical-align: middle;
    font-size: 18px;
    margin-left: 5px;
    margin-top: -4px;
}
.cvv-icon[data-v-30464eaa] {
    color: #ffffff;
    margin-left: 5px;
    font-size: 16px;
}

/* ── Card face, 353 x 209 frame ────────────────────────────────────────
   Positions are a share of the card and type is set in container units,
   so the face scales with the card on any screen width. */
/* .card-slide {
    aspect-ratio: 353 / 209;
} */
.flip-container[data-v-30464eaa] {
    container-type: inline-size;
    border-radius: 14px;
    box-shadow: 0 4px 4px 0 color-mix(in srgb, var(--hero, #C41212) 60%, transparent);
}
.front .card-brand[data-v-30464eaa],
.front .card-balance[data-v-30464eaa],
.front .card-number[data-v-30464eaa],
.front .card-holder[data-v-30464eaa],
.front .card-expiry[data-v-30464eaa] {
    position: absolute;
    transform: none;
    margin: 0;
    color: #ffffff;
    text-shadow: none;
    white-space: nowrap;
}
.front .card-brand[data-v-30464eaa] {
    top: 7.2%;
    left: 5.7%;
    font-size: 5.64cqw;
    font-weight: 800;
    line-height: 1.2;
}
.front .card-balance[data-v-30464eaa] {
    top: 31%;
    left: 5.7%;
    display: flex;
    flex-direction: column;
}
.card-balance-label[data-v-30464eaa] {
    font-size: 2.4cqw;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.72);
}
.card-balance-value[data-v-30464eaa] {
    font-size: 9.62cqw;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.front .card-number[data-v-30464eaa] {
    top: 66.5%;
    left: 5.7%;
    font-family: ui-monospace, "Roboto Mono", "SF Mono", Menlo, monospace;
    font-size: 3.97cqw;
    font-weight: 500;
    letter-spacing: 0.09em;
}
.front .card-holder[data-v-30464eaa] {
    top: 84.2%;
    left: 5.7%;
    bottom: auto;
    font-size: 3.68cqw;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.front .card-expiry[data-v-30464eaa] {
    top: 82.8%;
    right: 7.6%;
    bottom: auto;
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    font-size: 3.97cqw;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.card-expiry-label[data-v-30464eaa] {
    font-size: 1.58cqw;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
}
.pagination-dots[data-v-30464eaa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.3px;
    margin: 21px 0 0;
    transform: none;
}
.pagination-dots .dot[data-v-30464eaa] {
    width: 4px;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: #3a3a3a;
    opacity: 1;
}
.pagination-dots .dot.active[data-v-30464eaa] {
    width: 12px;
    border-radius: 2px;
    background: var(--tab-color-active, #C80003);
}

/* .card-section {
    margin-top: 20px;
} */
.balance-section[data-v-1e3ae31d] {
    padding: 10px 15px;
    padding-top: 0;
    height: 100px;
    margin-bottom: 20px;
    margin-top: -15px;
}
.card-balance[data-v-1e3ae31d] {
    font-size: 28px;
    font-weight: 700;
    margin: 3px 0;
    color: var(--color-text-light);
}
.card-name[data-v-1e3ae31d] {
    font-size: 14px;
    color: var(--color-primary-light);
    font-weight: 500;
}
.card-actions[data-v-1e3ae31d] {
    display: flex;
    gap: 10px;
    padding: 0;
    border-radius: 12px;
    margin: 6px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.card-actions[data-v-1e3ae31d]::-webkit-scrollbar {
    display: none;
}
.balance-info-card[data-v-1e3ae31d] {
    border-radius: 16px;
    padding: 20px 12px;
    margin: 18px 0 0;
    background-color: var(--item-color);
    /* box-shadow: 1px 4px 12px rgba(0, 0, 0, 0.3); */
    border: 1px solid var(--item-border-color);
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
}
.balance-item[data-v-1e3ae31d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.balance-item .label[data-v-1e3ae31d] {
    color: var(--color-white);
    font-size: 14px;
}
.balance-item .value[data-v-1e3ae31d] {
    font-weight: bold;
    color: var(--flowed-in);
    font-size: 16px;
}
.balance-title[data-v-1e3ae31d] {
    color: #A5A4A9;
}
.bill-section[data-v-1e3ae31d] {
    position: relative;
}
.section-title[data-v-1e3ae31d] {
    margin: 20px 0 12px;
    font-size: 16px;
    color: var(--color-white);
}
.bill-item[data-v-1e3ae31d] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    /* background-color: var(--item-color); */
    padding: 12px 6px;
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid var(--item-border-color);
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
}
.bill-icon[data-v-1e3ae31d] {
    font-size: 28px;
    margin-right: 18px;
    flex-shrink: 0;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}
.bill-icon ion-icon[data-v-1e3ae31d] {
    color: var(--color-white);
}
.bill-content[data-v-1e3ae31d] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bill-title[data-v-1e3ae31d] {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-white);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.bill-intro[data-v-1e3ae31d] {
    font-size: 12px;
    color: #A5A4A9 !important;
    margin-top: 2px;
}
.bill-side[data-v-1e3ae31d] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 90px;
    text-align: right;
    gap: 2px;
    flex-shrink: 0;
}
.bill-minor[data-v-1e3ae31d] {
    color: #ccc;
}
.bill-brief[data-v-1e3ae31d] {
    font-size: 1em;
    font-weight: 600;
}
.no-data[data-v-1e3ae31d] {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px 0;
    opacity: 0.9;
    color: var(--color-white);
}
.no-data img[data-v-1e3ae31d] {
    margin-bottom: 30px;
}
ion-button[data-v-1e3ae31d] {
    --color: #ffffff;
    --background: #a5a4a9;
    font-weight: 600;
    font-size: 0.95em;
}
.invite-btn[data-v-1e3ae31d] {
    width: 100%;
    padding: 15px;
    background: var(--color-primary-light);
    color: white;
    border: none;
    border-radius: 8px;
    text-align: center;
}
.card-action[data-v-1e3ae31d] {
    display: flex;
    justify-content: space-between;
}
.view-card[data-v-1e3ae31d] {
    height: 40px;
    width: 48%;
    background: var(--surface-input);
    color: #ffffff;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    font-weight: 900;
    border-radius: 40px;
}

/* .card-footer {
    padding: 5px 0;
} */
.footer-top[data-v-1e3ae31d] {
    margin: 0 auto;
    width: 36px;
    height: 5px;
    background: #D8D8D8;
    border-radius: 5px;
}
.action-item[data-v-1e3ae31d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
    height: 90px;
    color: white;
    cursor: pointer;
    border-radius: 25px;
    background: var(--special-btn) !important;
    border: 1px solid var(--btn-border-color, transparent);
}
.action-item[data-v-1e3ae31d]:hover {
    background: rgba(0, 0, 0, 0.03);
}
.action-item[data-v-1e3ae31d]:active {
    transform: scale(0.98);
}
.icon-circle[data-v-1e3ae31d] {
    width: 88px;
    height: 40px;
    padding: 8px 10px;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1;
}
.icon-circle ion-icon[data-v-1e3ae31d] {
    font-size: 24px;
    color: #A5A4A9 !important;
    margin-bottom: -4px;
}
ion-header ion-title[data-v-1e3ae31d] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}
.card-footer ion-button[data-v-1e3ae31d] {
    width: 100%;
}

/* 底部文字 */
.text[data-v-1e3ae31d] {
    color: #bfc6d4;
    font-size: 14px;
}
.gem-footer[data-v-1e3ae31d] {
    margin-top: 15px;
    padding: 15px 20px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    font-weight: 400;
    font-size: 12px;
}
.gem-active[data-v-1e3ae31d] {
    margin-top: 30px;
}
.bill-tips[data-v-1e3ae31d] {
    font-size: 14px;
}
.card-logn[data-v-1e3ae31d] {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 200px;
    height: 200px;
    z-index: 99;
    background-position: 55% 50%;
    background-size: 60%;
    opacity: 1;
    background-repeat: no-repeat;
}
.ticket-sty[data-v-1e3ae31d] {
    position: absolute;
    right: 10px;
    top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-white);
    cursor: pointer;
    text-decoration: underline;
}
.ticket-sty .icon[data-v-1e3ae31d] {
    font-size: 17px;
}

/* ── My Cards, 390 x 844 frame ─────────────────────────────────────────
   24px side margins, card face, three card actions, a balance panel, then
   the transactions grouped in one rows card. Colours resolve through
   theme_config via the shared tokens in styles/index.css. */
ion-header[data-v-1e3ae31d] {
    box-shadow: none;
}
ion-header[data-v-1e3ae31d]::after {
    display: none;
}
ion-toolbar[data-v-1e3ae31d],
ion-header ion-toolbar[data-v-1e3ae31d]:last-of-type {
    --min-height: 54px;
    --padding-top: 0;
    --padding-bottom: 0;
    --border-width: 0;
    --background: var(--nav-header-bg, transparent);
    background: transparent;
    box-shadow: none;
}
ion-header ion-title[data-v-1e3ae31d] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-white, #ffffff);
}

/* index.html sets ion-content with !important, so this matches that weight. */
ion-content[data-v-1e3ae31d] {
    --background: transparent !important;
    --padding-start: 24px;
    --padding-end: 24px;
    --padding-top: 14px;
}
.card-footer[data-v-1e3ae31d] {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.card-actions[data-v-1e3ae31d] {
    display: flex;
    gap: 9px;
    /* The carousel already leaves 20px under the dots. */
    margin: 10px 0 0;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}
.card-actions .action-item[data-v-1e3ae31d] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}
.card-actions .action-item span[data-v-1e3ae31d] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: var(--color-white, #ffffff);
}
.ca-box[data-v-1e3ae31d] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
    background: var(--panel, #381212);
    transition: transform var(--ap-dur-fast, 120ms) var(--ap-ease-out, ease);
}
.ca-box ion-icon[data-v-1e3ae31d] {
    font-size: 21px;
    color: var(--color-white, #ffffff);
}

/* The first action is the primary one: filled from the action colour with a
   lit inner rim, as the inline Send button on the verify screens. */
.action-item.primary .ca-box[data-v-1e3ae31d] {
    border: none;
    /* background: linear-gradient(270deg in srgb,
            color-mix(in srgb, var(--btn-bg-color, #E4072F) 55%, #000000) 3%,
            color-mix(in srgb, var(--btn-bg-color, #E4072F) 67%, #000000) 50%,
            color-mix(in srgb, var(--btn-bg-color, #E4072F) 72%, #000000) 100%);
    box-shadow: inset 0 1px 10px 0 color-mix(in srgb, var(--btn-bg-color, #E4072F) 85%, #ffffff); */
    background: linear-gradient(0deg in srgb,
            var(--highlight-color, var(--btn-bg-color, #FFBE00)) 5%,
            color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 88%, #8a3c00) 81%);
    box-shadow:
        inset 4px 0 6px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 60%, transparent),
        inset 0 4px 3px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 40%, #ffffff),
        inset 0 3px 10px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 70%, #ffff00);
}
.action-item.primary .ca-box ion-icon[data-v-1e3ae31d] {
    color: var(--login-bg-footer, #ffffff);
}
.action-item:active .ca-box[data-v-1e3ae31d] {
    transform: scale(0.96);
}
.balance-info-card[data-v-1e3ae31d] {
    margin: 30px 0 0;
    padding: 13px;
    border: none;
    border-radius: 17px;
    box-shadow: none;
    background: color-mix(in srgb, color-mix(in srgb, var(--content-color, #200101) 30%, #3a3a3a) 60%, transparent);
}
.balance-item[data-v-1e3ae31d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: none;
}
.balance-item .label[data-v-1e3ae31d] {
    font-size: 13px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-white, #ffffff) 79%, #000000);
}
.balance-item .value[data-v-1e3ae31d] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-white, #ffffff);
}
.bill-section[data-v-1e3ae31d] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}
.section-title[data-v-1e3ae31d] {
    margin: 23px 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: color-mix(in srgb, var(--color-white, #ffffff) 80%, #000000);
}
.bill-rows[data-v-1e3ae31d] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    border-radius: 19px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
    /* background: color-mix(in srgb, #494a4a 90%, transparent); */
    /* background: var(--ap-card, rgba(0, 0, 0, 0.2)); */
    background: var(--item-color);
}
.bill-rows .bill-item {
&[data-v-1e3ae31d] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 13px;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* background: var(--surface-row, #200101); */
    }
&[data-v-1e3ae31d]:not(:last-child) {
        border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
}
}
.bill-rows .bill-icon[data-v-1e3ae31d] {
    width: 35px;
    height: 35px;
    margin: 0;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    /* background: var(--panel, #381212); */
    background: var(--special-btn, #381212);
}
.bill-rows .bill-icon ion-icon[data-v-1e3ae31d] {
    font-size: 18px;
    color: var(--color-white, #ffffff);
}
.bill-rows .bill-title[data-v-1e3ae31d] {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white, #ffffff);
}
.bill-rows .bill-intro[data-v-1e3ae31d],
.bill-rows .bill-minor[data-v-1e3ae31d] {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-white, #ffffff) 42%, #000000);
}
.bill-rows .bill-brief[data-v-1e3ae31d] {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}
.ticket-sty[data-v-1e3ae31d] {
    color: var(--sub-text-color, #a1a1a1);
}

/* The canvas is painted once on the page, so a gradient runs unbroken behind
   the transparent header and content. index.html gives ion-content a solid
   colour with !important, so this matches that weight. */
.ion-page[data-v-1e3ae31d] {
    background: var(--canvas, #200101);
}
ion-header[data-v-1e3ae31d] {
    background: transparent;
}
ion-content[data-v-1e3ae31d] {
    background-color: transparent !important;
}

ion-header ion-title.header-title-center[data-v-c1f6e532] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}

/* --- 内边距 --- */
.ion-padding[data-v-c1f6e532] {
    --padding-start: 16px;
    --padding-end: 16px;
    --padding-top: 16px;
    --padding-bottom: 16px;
}

/* --- 卡片通用样式 --- */
.card[data-v-c1f6e532] {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    padding: 15px;
}

/* --- 余额部分 --- */
.balance-section[data-v-c1f6e532] {
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px 0;
}
.balance-title[data-v-c1f6e532] {
    margin: 0 0 12px;
    color: var(--color-text-light);
    font-weight: 600;
    font-size: 16px;
}
.balance-total-amount[data-v-c1f6e532] {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--color-text-light);
}
.balance-pending[data-v-c1f6e532] {
    margin-top: 5px;
    color: var(--color-text-light);
    font-size: 14px;
}

/* --- 动作按钮部分 --- */
.action-buttons[data-v-c1f6e532] {
    display: flex;
    justify-content: space-between;
    margin: 24px auto 32px;
    gap: 12px;
}
.custom-button[data-v-c1f6e532] {
    flex: 1;
    background: var(--special-btn) !important;
    color: #fff;
    border-radius: 12px;
    width: 95px;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85em;
    cursor: pointer;
    transition: transform 0.2s;
}
.custom-button[data-v-c1f6e532]:active {
    transform: translateY(-2px);
    background: #A5A4A9;
}
.custom-button ion-icon[data-v-c1f6e532] {
    font-size: 28px;
    margin-bottom: 6px;
    color: #fff;
}
.button-label[data-v-c1f6e532] {
    text-align: center;
    white-space: nowrap;
}

/* --- 资产列表部分 --- */
.asset-title[data-v-c1f6e532] {
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
}
.asset-list[data-v-c1f6e532] {
    display: flex;
    flex-direction: column;
    padding-bottom: 64px;
}
.home-header[data-v-c1f6e532] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 6px;
}
.header-title[data-v-c1f6e532] {
    font-size: 1em;
    font-weight: 700;
    color: #111111;
}
.asset-item[data-v-c1f6e532] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 7px 10px;
    margin-bottom: 10px;
    border-radius: 16px;
    border: 1px solid var(--item-border-color);
    /* background: var(--item-color); */
    column-gap: 10px;
}
.asset-item img[data-v-c1f6e532] {
    width: 50px;
    height: 50px;
}
.asset-icon[data-v-c1f6e532] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.asset-name-remark-group[data-v-c1f6e532] {
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asset-name[data-v-c1f6e532] {
    font-weight: bold;
    color: var(--color-white);
    font-size: 14px;
}
.asset-remark[data-v-c1f6e532] {
    color: var(--color-white);
    margin-top: 3px;
    font-size: 12px;
}

/* 价值和描述的容器样式 */
.asset-current-wrapper[data-v-c1f6e532] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* 右对齐 */
    text-align: right;
}
.asset-current[data-v-c1f6e532] {
    font-weight: bold;
    color: var(--color-text-light);
    /* 价值蓝色强调色 */
    font-size: 1em;
    white-space: nowrap;
}

/* 描述样式 */
.asset-balance[data-v-c1f6e532] {
    color: #999;
    /* 灰色 */
    font-size: 0.8em;
    /* 字体小一些 */
    margin-top: 2px;
    /* 与价值有一点间距 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* 确保在容器内不超过宽度 */
}
.menu-icon[data-v-c1f6e532] {
    font-size: 25px;
    color: var(--color-background-dark);
}
ion-header ion-title[data-v-c1f6e532] {
    color: black;
}
.assets-section[data-v-c1f6e532] {
    padding-bottom: 50px;
}

/* ── My Wallet, 390 x 844 frame ────────────────────────────────────────
   Total balance and the three quick actions share one panel; the assets
   are grouped in a single rows card. Shared tokens live in
   styles/index.css. */
ion-header[data-v-c1f6e532] {
    box-shadow: none;
}
ion-header[data-v-c1f6e532]::after {
    display: none;
}
ion-toolbar[data-v-c1f6e532],
ion-header ion-toolbar[data-v-c1f6e532]:last-of-type {
    --min-height: 54px;
    --padding-top: 0;
    --padding-bottom: 0;
    --border-width: 0;
    --background: var(--nav-header-bg, transparent);
    background: transparent;
    box-shadow: none;
}
ion-header ion-title[data-v-c1f6e532] {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-white, #ffffff);
}
ion-toolbar ion-buttons ion-icon[data-v-c1f6e532] {
    color: var(--color-white, #ffffff) !important;
}

/* index.html sets ion-content with !important, so this matches that weight. */
ion-content[data-v-c1f6e532] {
    --background: transparent !important;
    --padding-start: 24px;
    --padding-end: 24px;
    --padding-top: 14px;
}
.wallet-hero[data-v-c1f6e532] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 17px;
    border-radius: 17px;
    background: rgba(44, 44, 44, 0.49);
}
.wallet-hero .balance-section[data-v-c1f6e532] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.balance-title[data-v-c1f6e532],
.balance-pending[data-v-c1f6e532] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--sub-text-color, #a1a1a1);
}
.balance-total-amount[data-v-c1f6e532] {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    text-align: center;
    color: var(--color-white, #ffffff);
}
.wallet-hero .action-buttons[data-v-c1f6e532] {
    display: flex;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 11px 0 0;
}
.qa[data-v-c1f6e532] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}
.qa-circle[data-v-c1f6e532] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white, #ffffff);
    transition: transform var(--ap-dur-fast, 120ms) var(--ap-ease-out, ease);
}

/* The primary action is the brand's highlight colour with a lit inner rim,
   the same treatment as Deposit on Home. */
.qa-circle.primary[data-v-c1f6e532] {
    border: none;
    background: linear-gradient(0deg in srgb,
            var(--highlight-color, var(--btn-bg-color, #FFBE00)) 5%,
            color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 88%, #8a3c00) 81%);
    box-shadow:
        inset 4px 0 6px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 60%, transparent),
        inset 0 4px 3px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 40%, #ffffff),
        inset 0 3px 10px 0 color-mix(in srgb, var(--highlight-color, var(--btn-bg-color, #FFBE00)) 70%, #ffff00);
    color: var(--login-bg-footer, #ffffff);
}
.qa:active .qa-circle[data-v-c1f6e532] {
    transform: scale(0.94);
}
.qa-circle ion-icon[data-v-c1f6e532] {
    font-size: 22px;
    color: inherit;
}
.qa-label[data-v-c1f6e532] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    color: color-mix(in srgb, var(--color-white, #ffffff) 92%, var(--hero, #AC0101));
}
.assets-section[data-v-c1f6e532] {
    margin: 12px 0 0;
    padding: 0;
}
.asset-title[data-v-c1f6e532] {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-white, #ffffff);
}
.asset-list[data-v-c1f6e532] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    border-radius: 19px;
    border: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
    /* background: color-mix(in srgb, #494a4a 90%, transparent); */
    /* background: var(--ap-card, rgba(0, 0, 0, 0.2)); */
    background: var(--item-color);
}
.asset-list .asset-item {
&[data-v-c1f6e532] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px 13px;
    border: none;
    border-radius: 0;
    box-shadow: none;

    /* background: var(--surface-row, #200101); */
    }
&[data-v-c1f6e532]:not(:last-child) {
        border-bottom: 1px solid var(--hairline, rgba(255, 255, 255, 0.12));
}
}
.asset-icon-slot[data-v-c1f6e532] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 999px;
    /* background: var(--panel, #381212); */
    background: var(--special-btn, #381212);
}
.asset-icon-slot .asset-icon[data-v-c1f6e532] {
    width: 22px;
    height: 22px;
    margin: 0;
    object-fit: contain;
}
.asset-name-remark-group[data-v-c1f6e532] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.asset-name[data-v-c1f6e532] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-white, #ffffff);
}
.asset-remark[data-v-c1f6e532] {
    font-size: 12px;
    line-height: 1.5;
    color: var(--sub-text-color, #a1a1a1);
}
.asset-current-wrapper[data-v-c1f6e532] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.asset-balance[data-v-c1f6e532] {
    font-size: 12px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-white, #ffffff) 43%, #000000);
}
.asset-current[data-v-c1f6e532] {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-white, #ffffff);
}

/* The canvas is painted once on the page, so a gradient runs unbroken behind
   the transparent header and content. index.html gives ion-content a solid
   colour with !important, so this matches that weight. */
.ion-page[data-v-c1f6e532] {
    background: var(--canvas, #200101);
}
ion-header[data-v-c1f6e532] {
    background: transparent;
}
ion-content[data-v-c1f6e532] {
    background-color: transparent !important;
}

.container[data-v-592ae47a] {
    display: flex;
    flex-direction: column;
    height: 100%;
}
ion-button[data-v-592ae47a] {
    --background: var(--special-btn) !important;
}
ion-header ion-title[data-v-592ae47a] {
    display: flex !important;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}
ion-buttons ion-button[data-v-592ae47a] {
    --color: black;
}
.content-wrapper[data-v-592ae47a] {
    padding: 0px 20px 20px 20px;
}
.menu-list[data-v-592ae47a] {
    background-color: var(--item-color);
    border-radius: 10px;
    margin-top: 0;
    cursor: pointer;
    overflow: hidden;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); */
    box-shadow: 0px 4px 4px 0px #00000040;
    border: 1px solid var(--item-border-color);
}
.second-menu-list[data-v-592ae47a] {
    margin-top: 15px;
}
.menu-item[data-v-592ae47a] {
    display: flex;
    align-items: center;
    padding: 8px 0px;
    border-bottom: 1px solid var(--item-border-color);
    font-size: .9em;
    /* color: var(--tab-color); */
    color: var(--color-white);
    transition: background-color 0.2s ease;
}
.menu-icon[data-v-592ae47a] {
    width: 31px;
    height: 31px;
    margin-right: 12px;
    flex-shrink: 0;
    border: none;
    border-radius: 14px;
    background: var(--special-btn, #381212);
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu-icon ion-icon[data-v-592ae47a] {
    margin: 0;
    font-size: 18px;
    color: var(--color-white, #ffffff);
}
.menu-item[data-v-592ae47a]:last-child {
    border-bottom: none;
}

/* .menu-item.clickable:active {
    background-color: var(--item-border-color);
} */
.menu-item span[data-v-592ae47a] {
    flex-grow: 1;
}
.menu-item ion-skeleton-text[data-v-592ae47a] {
    background: #63636333;
    --background-hover: #ccc;
    border-radius: 4px;
}
.menu-list .menu-item ion-skeleton-text[data-v-592ae47a]:first-child {
    border-radius: 50% !important;
}
.arrow[data-v-592ae47a] {
    font-size: 16px;
    color: #A1A1A1;
    margin-left: auto;
}
ion-skeleton-text[data-v-592ae47a] {
    display: block;
}
.right-section[data-v-592ae47a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.notification-badge[data-v-592ae47a] {
    min-width: 18px;
    height: 18px;
    background-color: #ff3b30;
    color: white;
    font-size: 12px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: 1;
}
.notification-badge[data-v-592ae47a]:empty::after {
    content: '99+';
}

ion-menu.main-menu[data-v-b4a78bbe] {
    --width: 100% !important;
    --max-width: 100% !important;
}
ion-content.menu-content[data-v-b4a78bbe] {
    /* --background: var(--content-color) !important; */
    height: 100%;
}
.scroll-container[data-v-b4a78bbe] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0 10px;
}
.main-body[data-v-b4a78bbe] {
    flex: 1;
}

/* 4. 头部样式 */
/* .ion-header {
    background-color: var(--content-color) !important;
    --border-bottom: none !important;
} */
ion-toolbar[data-v-b4a78bbe] {
    --background: transparent;
    --border-width: 0;
    box-shadow: none;
}

/* 5. 个人资料 */
.profile-container[data-v-b4a78bbe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0 0 0;
}

/* 6. 卡片网格 */
.card-grid[data-v-b4a78bbe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.card[data-v-b4a78bbe] {
    background: var(--item-color) !important;
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--item-border-color);
    justify-content: space-between;
    align-items: flex-start;
    color: var(--color-white);
}
.card ion-label[data-v-b4a78bbe] {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-white) !important;
}

/* 7. 列表样式 */
ion-list[data-v-b4a78bbe] {
    background: var(--item-color);
    border-radius: 10px;
    margin-top: 20px;
}
.menu-item-header[data-v-b4a78bbe] {
    background-color: var(--skeleton-bg-color);
    padding: 11px 15px;
    font-size: .8em;
    color: var(--tab-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
ion-item[data-v-b4a78bbe] {
    --background: var(--item-color);
    color: var(--color-white);
    font-size: 14px;
    --min-height: 45px;
    border-bottom: 1px solid var(--item-border-color);
}
ion-item[data-v-b4a78bbe]:last-child {
    border-bottom: none;
}
ion-item ion-label[data-v-b4a78bbe] {
    font-weight: bold;
    font-size: 1rem;
    color: var(--color-white) !important;
}

/* 8. 登出按钮 */
.logout-btn[data-v-b4a78bbe] {
    color: #fff;
    margin-top: 16px;
    margin-left: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px 6px;
}
ion-icon[data-v-b4a78bbe] {
    color: var(--color-white) !important;
}
.logout-icon[data-v-b4a78bbe] {
    font-size: 25px;
    margin-right: 5px;
}

/* 9. 版本信息：去掉绝对定位 */
.version-info[data-v-b4a78bbe] {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 30px;
    /* 留出底部边距 */
}
.version[data-v-b4a78bbe] {
    color: var(--color-white);
    font-size: 0.8rem;
    opacity: 0.6;
}
.logout-text[data-v-b4a78bbe] {
    color: var(--color-white);
    font-weight: 700;
}
.close-icon-container[data-v-b4a78bbe] {
    display: flex;
    height: 30px;
    justify-content: flex-end;
    padding: 10px 15px 0 0;
}

/* 暗黑模式适配 */
/* @media (prefers-color-scheme: dark) {
    ion-label {
        color: #ffffff !important;
    }
} */

/* PWA install banner, AlexPay design system. Dark glass + crimson.
   Styles and icons only; logic and bindings unchanged. */
.pwa-install-banner[data-v-96a91ee8] {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(16, 6, 7, 0.97), rgba(16, 6, 7, 0.9));
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--ap-border, rgba(146, 17, 21, 0.7));
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #E5EAFA;
}
.close-btn[data-v-96a91ee8] {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: all 0.2s;
}
.close-btn[data-v-96a91ee8]:hover {
  background: var(--ap-hairline, rgba(255, 255, 255, 0.10));
  color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
}
.content[data-v-96a91ee8] {
  gap: 16px;
}
.left[data-v-96a91ee8] {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.icon[data-v-96a91ee8] {
  color: var(--btn-bg-color, #DE0202);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.icon svg[data-v-96a91ee8] {
  width: 30px;
  height: 30px;
}
.text[data-v-96a91ee8] {
  flex: 1;
  min-width: 0;
}
.title[data-v-96a91ee8] {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--color-white, #E5EAFA);
}
.desc[data-v-96a91ee8] {
  font-size: 13px;
  color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
  margin: 0;
}
.install-btn[data-v-96a91ee8] {
  background: var(--btn-bg-color, #DE0202);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  box-shadow: 0 10px 24px -8px var(--btn-footer-glow, #921115);
  margin-top: 10px;
  float: right;
}
.install-btn[data-v-96a91ee8]:hover {
  transform: translateY(-2px);
}
.install-btn[data-v-96a91ee8]:active {
  transform: translateY(0);
}
.ios .guide[data-v-96a91ee8] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--btn-bg-color, #DE0202);
  flex-shrink: 0;
}
.share-icon[data-v-96a91ee8] {
  width: 26px;
  height: 26px;
  color: var(--btn-bg-color, #DE0202);
}
.ios .tip[data-v-96a91ee8] {
  white-space: nowrap;
  font-weight: 600;
}
.slide-enter-active[data-v-96a91ee8],
.slide-leave-active[data-v-96a91ee8] {
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;
}
.slide-enter-from[data-v-96a91ee8],
.slide-leave-to[data-v-96a91ee8] {
  transform: translateY(100%);
  opacity: 0;
}

/* 全局安全区域适配 */
ion-tab-bar[data-v-a453a143] {
    padding-bottom: env(safe-area-inset-bottom);
    /* background-color: #fff; */
    background-color: #333;
    height: calc(56px + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

html,
body,
#app,
ion-app {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.app-wrapper {
    width: 100vw;
    height: 100vh;
    background: #000;
    position: relative;
    overflow: hidden;
}

:root {
    /* --color-primary-dark: #660708; */
    /* --color-primary-medium: #A4161A; */
    /* --color-primary-lighter: #E5383B; */
    /* --color-secondary-dark: #161A1D; */
    /* --color-neutral-medium: #B1A7A6; */
    /* --color-neutral-light: #D3D3D3; */
    /* --color-background-dark: #0B090A; */
    /* --color-background-light: #F5F3F4; */
    --color-primary-light: #380102a2;
    --color-text-light: #E5EAFA;
    --ion-header-icon-color: #ffffff;
    --surface-input: #92111580;
    --flowed-in:#00E560;
    --flowed-out:#EE4A4A;
    --btn-bg-color:#DE0202;
    --header-bg: #FFFFFF;
    --ion-card-background: #92111580;
    --ion-item-background: #92111580;
    --content-color: #080808ff;
    --tab-selected-color: #db93935e;
    --item-color: #00000033;
    /* Also unset by fetchAppLoginBefore, and visible during the pre-login
       skeleton state. --surface-input is set there, so tracking it keeps
       the placeholders on the active theme. */
    --skeleton-bg-color: var(--surface-input, #92111580);
    --color-white: #ffffff;
    /* --not-transaction-loading: ; */
    --special-btn: var(--surface-input, #92111580);
    --login-bg-top: #160808ff;
    --login-bg-footer: #ffffff;
    /* Unquoted: a quoted string is not a valid <color> and the declaration
       is dropped at parse time. Applies to --invite-bg below as well. */
    --tab-color: #E5EAFA;
    --tab-color-active: var(--btn-bg-color, #E5252A);
    --user-avatar: #000000;
    --btn-footer-glow: #222;
    --sub-text-color: #888;
    --sub-theme-color: #f70707ea;
    --invite-bg: #380102a2;
    /* fetchAppInitialData sets both of these; fetchAppLoginBefore does not,
       so pre-login screens render whatever is declared here. Deriving them
       from keys the pre-login call does set keeps them consistent with the
       active theme in that window. Backend values override on login. */
    --item-border-color: color-mix(in srgb, var(--sub-theme-color, #921115) 55%, transparent);
    --home-card-background: var(--item-color, rgba(0, 0, 0, 0.2));
    --home-card-box-shadow: 0px 4px 4px 0px #00000040;
    --dialog-bg-color: #333;
    --toolbar-background: #0c1527;
    --content-background: #17274B;
    --input-item-background: #0E192D;
    --item-primary-gray-background: var(--surface-input, #17274B);
    /* --primary-background: #17274B; */
}

/* ─────────────────────────────────────────────────────────────────────
   Secondary UI tokens, derived from the active theme.

   theme_config supplies the keys above per brand. It carries no key for
   dimmed text, muted text, hairline rules or a surface sheen, so those
   four are mixed from the theme's own foreground colour rather than
   declared as fixed light-on-dark rgba. That keeps them legible on both
   dark and light theme_config payloads without per-brand overrides.

   Each declares plain rgba first and color-mix second. Engines without
   color-mix (below Safari / iOS 16.2) drop the second declaration and
   retain the first.

   Percentages are set from a WCAG contrast check against both a black
   and a white canvas; see the ratios noted on each line. Lowering them
   fails AA on light theme_config values.
   ───────────────────────────────────────────────────────────────────── */

:root {
    /* Tracks header_icon, so it follows the theme's own foreground. */
    --ap-fg: var(--color-white, #E5EAFA);

    /* 10.5:1 on black, 4.6:1 on white */
    --ap-text-dim: rgba(229, 234, 250, 0.72);
    --ap-text-dim: color-mix(in srgb, var(--ap-fg) 72%, transparent);

    /* 6.1:1 on black, 3.1:1 on white */
    --ap-text-mute: rgba(229, 234, 250, 0.54);
    --ap-text-mute: color-mix(in srgb, var(--ap-fg) 54%, transparent);

    --ap-hairline: rgba(255, 255, 255, 0.10);
    --ap-hairline: color-mix(in srgb, var(--ap-fg) 12%, transparent);

    --ap-sheen: rgba(255, 255, 255, 0.06);
    --ap-sheen: color-mix(in srgb, var(--ap-fg) 7%, transparent);

    /* Aliases, so component styles reference one name per role. */
    --ap-accent: var(--btn-bg-color, #DE0202);
    --ap-glow: var(--btn-footer-glow, #921115);
    --ap-surface: var(--input-item-background, rgba(0, 0, 0, 0.28));
    --ap-card: var(--home-card-background, rgba(0, 0, 0, 0.20));
    --ap-border: var(--item-border-color, rgba(146, 17, 21, 0.7));
    --ap-in: var(--flowed-in, #00E560);
    --ap-out: var(--flowed-out, #EE4A4A);

    /* Ambient background layers. Both keys are set pre-login, so the
       effect follows the active brand on the auth screens too. */
    --ap-aurora-1: var(--btn-footer-glow, #a80207);
    --ap-aurora-2: var(--sub-theme-color, #c8102e);

    /* Motion scale. */
    --ap-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ap-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ap-dur-fast: 120ms;
    --ap-dur-base: 220ms;
    --ap-dur-slow: 380ms;
}

ion-router-outlet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    ion-router-outlet {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) !important;
        width: 375px;
        height: 812px;
        max-width: 375px;
        max-height: 812px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        border-radius: 12px;
    }
    ion-menu {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 375px;
        height: 812px;
        max-width: 375px;
        max-height: 812px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        border-radius: 12px;
    }
    /* Modal 挂在 App 根上，与 outlet 同级，需单独对齐手机框 */
    ion-modal {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* sheet / breakpoint 模态以 --width 为准，仅写 width 会撑满视口 */
        --width: 375px;
        --height: 812px;
        --max-width: 375px;
        --max-height: 812px;
        width: 375px;
        height: 812px;
        max-width: 375px;
        max-height: 812px;
        border-radius: 12px;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    ion-router-outlet {
        border-radius: 0;
    }
}

ion-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

ion-content {
    /* --background: #ffffff; */
    width: 100%;
    height: 100%;
    overflow: hidden; /* 修改为 hidden，移除滚动条 */
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    scrollbar-width: thin !important; /* 设置滚动条宽度为 "thin" */
    scrollbar-color: #d6d2d2 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

ion-content::part(scroll) {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

ion-content::part(scroll)::-webkit-scrollbar {
    display: none;
}

ion-back-button {
    color: var(--color-white);
}

ion-toolbar {
    --border-style: none;
}

ion-header {
    background: var(--toolbar-background);
}

ion-toolbar {
    --color: var(--ion-header-icon-color) !important;
    --padding-top: 6px;
    --padding-bottom: 6px;
    box-shadow: 1px 2px 4px #74707036;
}

ion-input .native-input {
    caret-color: var(--btn-bg-color) !important;
}

ion-buttons ion-icon {
    color: var(--ion-header-icon-color) !important;
}

ion-button {
    margin: 16px 0;
    font-size: 14px !important;
    --background: linear-gradient(to bottom, var(--btn-bg-color) 0%, var(--btn-bg-color) 50%, var(--btn-footer-glow) 100%);
    text-transform: none !important;
    font-weight: 900;
    color: var(--login-bg-footer);
}

ion-menu-button {
    color: var(--ion-header-icon-color) !important;
}

ion-button {
    --background-activated: var(--btn-bg-color) !important;
    --background-focused: var(--btn-bg-color) !important;
    --background-hover: var(--btn-bg-color) !important;
}

ion-button:focus,
ion-button:hover,
ion-button:active {
    filter: brightness(0.9);
}

ion-header {
    scrollbar-width: thin;
}

ion-header ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

ion-header ::-webkit-scrollbar-thumb {
    background-color: var(--color-primary-light);
    border-radius: 36px;
}

ion-header ion-segment {
    padding-bottom: 6px;
}

ion-segment-button {
    --color-checked: var(--btn-bg-color);
    --indicator-color: var(--special-btn);
}

.input-clear-icon.sc-ion-input-md {
    color: red;
    width: 14px;
    height: 14px;
    border: 1px solid red;
    border-radius: 7px;
    margin-right: 5px;
}

.ion-color.sc-ion-searchbar-ios-h .searchbar-input.sc-ion-searchbar-ios {
    background: none;
    color: var(--color-white);
}

.searchbar-left-aligned.sc-ion-searchbar-ios-h .searchbar-search-icon.sc-ion-searchbar-ios {
    color: var(--color-white);
}

ion-title {
    color: var(--color-white) !important;
}

ion-toast::part(button) {
    font-size: 16px;
    min-height: 34px;
    width: 48px;
    border-radius: 48px;
    margin-left: 15px;
}

.action-sheet-button {
    --button-color: var(--color-text-light, #eee);
    --button-color-focused: var(--color-white, #fff);
}

/* MD 默认 flex-start；覆盖 Ionic scoped 样式 */

ion-action-sheet.select-action-sheet .action-sheet-button,
ion-action-sheet .action-sheet-button {
    text-align: center !important;
}

ion-action-sheet.select-action-sheet .action-sheet-button-inner,
ion-action-sheet .action-sheet-button-inner {
    justify-content: center !important;
}

.router-loading .loading-wrapper,
.custom-loading .loading-wrapper {
    box-shadow: none;
}

/* Canvas, hero colour and nav header shared by the redesigned screens.
   The canvas is the platform's content_background (flat or a gradient),
   falling back to content_color. The header is a soft hero-coloured glow
   that fades to transparent, so it sits on the canvas rather than reading
   as a separate bar. hero_color is optional; without it a darkened
   theme_color is used. */

:root {
	--canvas: var(--content-background, var(--content-color, #200101));
	--hero: var(--hero-color, color-mix(in srgb, var(--color-primary-light, #AC0101) 45%, #000000));
	/* --nav-header-bg: radial-gradient(208px 62px at 50% -11px in srgb,
			var(--hero) 0%, transparent 100%); */
	/* --nav-header-bg: radial-gradient(53.22% 115.74% at 50% -20.37%, #AC0101 0%, #200101 100%); */
	/* Surfaces are translucent so a gradient canvas shows through them. On a
	   flat canvas they resolve to the same colour as an opaque fill would. */
	--panel: color-mix(in srgb, color-mix(in srgb, var(--hero) 26%, #2f2f2f) 50%, transparent);
	/* --surface-row: color-mix(in srgb, var(--content-color, #200101) 55%, transparent); */
	/* --surface-row: #200101; */
	--disabled-fill: color-mix(in srgb, #3c3c3c 70%, transparent);
	--hairline: color-mix(in srgb, var(--color-white, #ffffff) 12%, transparent);
}

/* One header treatment on every page: the platform canvas is painted once
   on the page and the header and content are transparent over it, so the
   header never reads as a separate bar. index.html sets ion-content with
   !important, so the content rule matches that weight; pages that draw their
   own header (the home hero) override these with stronger rules. */

.ion-page {
	background: var(--canvas, #200101);
}

.ion-page ion-header {
	background: transparent;
	box-shadow: none;
}

.ion-page ion-header::after {
	display: none;
}

.ion-page ion-header ion-toolbar,
.ion-page ion-header ion-toolbar:last-of-type {
	--background: var(--nav-header-bg, transparent);
	--border-width: 0;
	background: transparent;
	box-shadow: none;
	filter: none;
}

.ion-page ion-content {
	--background: transparent !important;
	background-color: transparent !important;
}

/* ion-skeleton-text renders into a shadow root, so a stylesheet rule cannot
   reach its shimmer gradient; only custom properties cross that boundary.
   Ionic composes the gradient from --background-rgb, which must be a bare
   r,g,b list rather than a <color>, so it cannot read a theme token.
   Every theme_config payload in use draws on a dark canvas, so a white
   shimmer suits all of them and stays brand-neutral. */

ion-skeleton-text {
	--background-rgb: 255, 255, 255;
	--background: var(--ap-sheen, rgba(255, 255, 255, 0.06));
}

.logo-btn {
	padding: 0;
	margin-right: 4px;
}

.header-logo {
	height: 18px;
	width: auto;
	display: block;
}

.button-native{
  	--color: var(--color-primary-light) !important;
}

/* Alerts share the toast system: theme dialog surface, hairline border,
   title in the foreground and body one step down, so a dialog and a toast
   read as the same family. */

.my-alert {
	--background: var(--dialog-bg-color);
	--border-radius: 16px;
	--button-background: transparent !important;
}

.my-alert .alert-wrapper {
	background: var(--dialog-bg-color, #1E2329);
	border: 1px solid var(--ap-hairline, rgba(255, 255, 255, 0.10));
	border-radius: 16px;
	box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.72);
}

.my-alert .alert-title{
	color: var(--color-white, #E5EAFA) !important;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.015em;
}

.my-alert .alert-message{
	color: var(--ap-text-dim, rgba(229, 234, 250, 0.72));
	white-space: pre-wrap;
	font-size: 13.5px;
	line-height: 1.5;
}

.my-alert .alert-wrapper:focus {
  	outline: none !important;
}

.notice-alert .alert-message {
    text-align: left;
	/* min-height: max-content; */
	max-height: 60vh;
	padding-bottom: 10px;
}

/* 调整按钮间距 */

.my-alert .alert-button-group {
	justify-content: space-between;
	margin-top: 12px;
}

.my-alert .alert-button {
    color: var(--btn-bg-color);
	border-color: rgba(160,160,160,0.6);
	flex: 1 1 auto;
}

.my-alert .alert-button-inner {
	justify-content: center;
}

.my-alert .alert-button.alert-confirm-btn {
    background: var(--btn-bg-color) !important;
    border-color: var(--btn-bg-color);
    color: var(--login-bg-footer);
    border-radius: 999px;
    min-width: 0px;
    margin: 0 10px;
    font-weight: 700;
    height: 44px;
}

/* Glass rather than an accent outline: on a gold or navy brand a filled and
   an outlined button in the same colour compete at the same weight. */

.my-alert .alert-button.alert-cancel-btn {
    border: 1px solid var(--ap-hairline, rgba(255, 255, 255, 0.10)) !important;
    color: var(--color-white, #E5EAFA);
    background: var(--ap-surface, rgba(0, 0, 0, 0.28));
    border-radius: 999px;
    margin: 0 10px;
    margin-bottom: 5px;
    font-weight: 600;
    height: 44px;
}

.bill-minor {
  	font-size: 12px;
}

.telegram-bind-alert {
	--background: linear-gradient(135deg, #fff);
	--border-radius: 12px;
	--color: black !important;
	--border-bottom:none !important;
	box-shadow: none !important;  
	outline: none !important;
	box-shadow: 3px 3px 3px #030303;
}

.telegram-bind-alert .alert-wrapper {
	backdrop-filter: none;   
	outline: none !important;         
	box-shadow: none !important;
	box-shadow: 4px 6px 20px rgb(255 255 255 / 10%) !important;
}

.telegram-bind-alert .alert-wrapper {
  	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
}

.telegram-bind-alert .alert-message {
	color: black;
	font-weight: 500;
}

.telegram-bind-alert .alert-cancel-button {
  	color: #888888; 
  	background: transparent;
  	font-size: 14px;
  	padding: 10px;
}

.telegram-bind-alert .alert-confirm-button {
  	color: var(--btn-bg-color); 
  	font-size: 14px;
}

.telegram-bind-alert .alert-title {
	color:black !important; 
	font-size: 1.2em; 
	font-weight: bold;
}

/* ─────────────────────────────────────────────────────────────────────
   Toasts.

   One surface for every type: the theme's own dialog colour, a hairline,
   and a 3px status bar down the leading edge carrying the only colour that
   changes between types. Previously each type recoloured the whole card,
   which put a saturated block over the screen and forced the message
   colour to be overridden per type.

   Ionic reflects the `color` prop as an .ion-color-* class on the host, so
   the status colour is selected here rather than in the widget. Success and
   error reuse the money-movement tokens, so a toast agrees with the figures
   on screen under every theme.
   ───────────────────────────────────────────────────────────────────── */

/* The `color` prop drives Ionic's own painting through --ion-color-base, so
   remapping that is what stops the host filling with the raw status colour
   behind the card. Setting --background alone leaves the host visible at the
   rounded corners. */

ion-toast.custom-card-toast.ion-color,
ion-toast.toast-warning.ion-color {
	--ion-color-base: color-mix(in srgb, var(--color-white, #ffffff) 14%, #000000) !important;
	--ion-color-contrast: var(--color-white, #E5EAFA) !important;
}

.custom-card-toast,
.toast-warning {
	--background: color-mix(in srgb, var(--color-white, #ffffff) 14%, #000000);
	--color: var(--color-white, #E5EAFA);
	--border-radius: 14px;
	--border-width: 1px;
	--border-style: solid;
	--border-color: var(--ap-hairline, rgba(255, 255, 255, 0.10));
	--box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7);
	--ap-status: var(--ap-accent, #DE0202);
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px;
}

.custom-card-toast.ion-color-success,
.toast-warning.ion-color-success { --ap-status: var(--ap-in, #00E560); }

.custom-card-toast.ion-color-danger,
.toast-warning.ion-color-danger { --ap-status: var(--ap-out, #EE4A4A); }

.custom-card-toast.ion-color-warning,
.toast-warning.ion-color-warning { --ap-status: #F5A524; }

.custom-card-toast.ion-color-primary,
.toast-warning.ion-color-primary { --ap-status: var(--ap-accent, #DE0202); }

.custom-card-toast::part(container),
.toast-warning::part(container) {
	max-width: 92% !important;
	padding-inline-start: 14px;
	border-inline-start: 5px solid var(--ap-status);
	background: color-mix(in srgb, var(--color-white, #ffffff) 14%, #000000);
	backdrop-filter: blur(10px);
}

.custom-card-toast::part(header),
.toast-warning::part(header) {
	font-size: 15px !important;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--color-white, #E5EAFA);
	margin-bottom: 2px;
}

.custom-card-toast::part(message),
.toast-warning::part(message) {
	font-size: 12px !important;
	line-height: 1.5;
	color: var(--sub-text-color, #a1a1a1);
}

.toast-content { padding: 0px !important; }

.custom-card-toast .toast-button,
.toast-warning .toast-button {
	padding: 0 !important;
	margin: 0 !important;
}

/* The leading button is the status icon, so it takes the status colour.
   The trailing one is dismiss and stays neutral. */

.custom-card-toast::part(button),
.toast-warning::part(button) {
	margin-left: 12px !important;
	height: 32px !important;
	width: 32px !important;
	display: flex !important;
	border-radius: 16px;
	justify-content: center !important;
	background-color: transparent;
	color: var(--ap-text-mute, rgba(229, 234, 250, 0.54));
}

.custom-card-toast::part(button start),
.toast-warning::part(button start) {
	color: var(--ap-status);
	background-color: color-mix(in srgb, var(--ap-status) 16%, transparent);
	margin-left: 0 !important;
}

.custom-card-toast::part(icon),
.toast-warning::part(icon) { font-size: 18px !important; }

/* Toasts sit just below the 54px nav header rather than over it, and close
   on their own timer, so the dismiss button is not shown. */

ion-toast.custom-card-toast,
ion-toast.toast-warning {
	top: 58px;
}

.custom-card-toast::part(container),
.toast-warning::part(container) {
	width: 362px;
	max-width: calc(100% - 28px) !important;
}

.custom-card-toast::part(button cancel),
.toast-warning::part(button cancel) {
	display: none !important;
}

.custom-select-popover ion-item {
	  --color: var(--color-white) !important; 
}

.toast-button-group-end{
  	margin-right: -30px !important;
}

.no-data-message {
	text-align: center;
	padding-top: 50px;
	color: #999;
}

.starfield {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.router-loading .loading-wrapper{
  	background: transparent;
}

.router-loading ion-spinner {
	width: 40px;
	height: 40px;
}

.custom-loading .loading-wrapper{
  	background: transparent;
}

.custom-loading ion-spinner {
	width: 40px;
	height: 40px;
}

/* Telegram Mini App（html.tg-host 由 applyDarkChrome 添加） */

html.tg-host {
	--tg-viewport-stable: 100vh;
	--tg-viewport-height: 100vh;
}

html.tg-host ion-modal {
	--max-height: var(--tg-viewport-stable, 100vh);
}/* For information on how to create your own theme, please see:
http://ionicframework.com/docs/theming/ */

/* src/theme/variables.css */

/* Ionic Variables */
:root {
  /** primary color */
  --ion-color-primary: #020202;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8eff;

  /** secondary color */
  --ion-color-secondary: #0cd1e8;
  --ion-color-secondary-rgb: 12, 209, 232;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #0bb8cc;
  --ion-color-secondary-tint: #24d6ea;
}

/* Other global styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}