/* ============================================================
   AFTER-LOGIN  —  deposit / history / vip
   See design.md. Every length below is a 10.jpg mockup pixel;
   .afterlogin-canvas scales the whole composition by --al-k.
   ============================================================ */

   :root {
    --al-k: 0.765143;
    /* 720 / 941 — mockup px -> lobby stage px */
    --al-ink: #0c226d;
    --al-ink-strong: #071443;
    --al-blue: #0b65d3;
    --al-blue-deep: #064cae;
    --al-cyan: #12bfe7;
    --al-surface: #d8e8f8;
    --al-surface-light: #e0edfa;
    --al-gold: #e5b14b;
    --al-gold-bright: #f7d676;
    --al-success: #0d9b6b;
    --al-shadow: rgba(4, 39, 88, 0.35);
    --al-focus: #052f9b;
}

/* ---------- stage & canvas ---------- */
/* .lobby-stage 完全沿用 style.css 的结构，这里不做覆盖 */

/* 整屏背景铺满 bg.webp：手机端舞台只占 80% 宽，两侧留白改为显示背景图而非黑色。
   覆盖 style.css 里 html,body 的深色渐变（body.afterlogin-page 权重更高）。 */
body.afterlogin-page {
    background: url(../images/afterlogin/bg.webp) no-repeat center center;
    background-size: cover;
}

/* 舞台层也透明，让 body 的整屏背景透过 80% 舞台显示；
   否则中间会盖上 .lobby-stage 的深色渐变，变成“中间深色、两侧图片”。 */
body.afterlogin-page .lobby-stage {
    background: transparent;
}

.afterlogin-stage {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    /* 背景改到 body.afterlogin-page 上做整屏铺满，这里保持透明，避免与整屏背景重复（double）。 */
    background: transparent;
    font-family: Lato, Arial, sans-serif;
    color: var(--al-ink-strong);
}

/* 全宽画布：宽高都由舞台反推，不写死尺寸。
   舞台高恒为 720，故 height 恒等于 941 设计像素，坐标系与 10.jpg 一致；
   width 随舞台自由伸展，中间栏跟着变宽。 */
.afterlogin-canvas {
    position: relative;
    display: grid;
    grid-template-columns: 246px 34px minmax(0, 1fr) 27px 292px;
    grid-template-rows: minmax(0, 1fr);
    padding: 15px;
    width: calc(100% / var(--al-k));
    height: calc(100% / var(--al-k));
    transform: scale(var(--al-k));
    transform-origin: 0 0;
}

.afterlogin-stage img {
    max-width: none;
}

/* :where() 把重置规则的权重归零，否则 (0,1,1) 会盖掉 .al-method 等 (0,1,0) 的组件底图，
   只剩 .is-selected (0,2,0) 生效 —— 表现为未选中的卡片全部丢失边框素材 */
:where(.afterlogin-stage button) {
    font-family: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.afterlogin-stage :focus-visible {
    outline: 2px solid var(--al-focus);
    outline-offset: 2px;
}

/* shared section label.
   每个区块的定位基准是「标签顶」，控件行统一比标签顶低 25px：
   标签固定 20px 高 + .al-*-row 的 margin-top 5px。改动其一必须同步另一处。 */
.al-label {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--al-ink);
    margin-bottom: 10px;
}

/* 标签与右侧状态文字同处一行时，锁死 20px，避免 style.css 的 line-height:1.6 撑高行 */
.al-banks-head,
.al-amount-head {
    height: 20px;
    line-height: 20px;
}

/* shared radio / check marker */
.al-radio {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #a8c2de;
    background: rgba(255, 255, 255, 0.65);
    position: relative;
}

.is-selected .al-radio {
    border-color: var(--al-cyan);
    background: var(--al-cyan);
    box-shadow: 0 0 0 3px rgba(18, 191, 231, 0.25);
}

.is-selected .al-radio::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/* ---------- left navigation ---------- */

.al-nav {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 38px 22px 0;
    background: url(../images/afterlogin/left-frame.webp) no-repeat center center;
    background-size: 100% 100%;
}

.al-back {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 12px;
    margin-left: 12px;
    font-size: 32px;
    line-height: 29px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgb(0 0 0 / 94%);
}

.al-back:hover,
.al-back:focus {
    color: var(--al-gold-bright);
}

/* left-frame.webp 的宝箱插画从侧栏 y=617 开始，9 个菜单项必须收在它上面，
   否则深蓝箱体上的navy文字读不清。10 项时 98 + 10*46 + 9*5 = 603，留 14px 余量。
   **11 项是单列的极限**（需压到 42px 行高 + 4px 间距，17px 字已经贴边）；
   第 12 项不能再靠压行高解决，必须改结构（分组折叠 / 侧栏可滚动 / 次要项挪进弹窗）。 */
.al-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.al-menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    flex: none;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: clamp(9.72px, calc(15.55px + 0.42cqi), 20.52px);
    font-weight: 700;
    color: var(--al-ink);
    transition: background 140ms ease, color 140ms ease;
    background: url(../images/afterlogin/payment-method-2.webp) no-repeat center center;
    background-size: 100% 100%;
}

.al-menu-item img {
    flex: none;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.al-menu-item.is-selected {
    color: #fff;
    text-shadow: 0 2px 3px rgba(4, 39, 88, 0.45);
    background: url(../images/afterlogin/payment-method.webp) no-repeat center center;
    background-size: 100% 100%;
}

.al-menu-item.is-selected img {
    width: 40px;
    height: 40px;
}

.al-menu-item:not(.is-selected):hover {
    background: url(../images/afterlogin/payment-method.webp) no-repeat center center;
    background-size: 100% 100%;
    color: #fff;
}

/* ---------- main column ---------- */

/* 左右两侧栏宽度固定，中间列拉伸填满剩余空间 */
.al-main {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 86px 88px 35px minmax(0, 643px);
    align-content: start;
    min-width: 0;
    height: 854px;
    /* 步骤条按中间列实际宽度决定去留，见 .al-steps */
    container-type: inline-size;
}

/* header: title + steps (+ wallets, which overhang to the right) */

.al-header {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
}

.al-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34.56px, calc(21.38px + 2.49cqi), 47.52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--al-blue-deep);
}

/* 标题 + 步骤条 + 钱包必须挤进中间列：钱包只有 128px 露在列内（其余 308px 悬在右侧栏上），
   放不下时是钱包被顶出画布右缘，所以让步骤条先收缩、再整条隐藏 */
.al-steps {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0 0 0 42px;
    padding: 0;
    list-style: none;
}

/* transfer 的 5 步在 1043 设计宽下就要 750px（超出 605 的余量），
   靠虚线连接段收缩补回 —— 文字与序号一律不压 */
.al-step {
    display: flex;
    align-items: center;
    flex: none;
    gap: 10px;
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    font-weight: 700;
    color: var(--al-ink);
    white-space: nowrap;
}

.al-step + .al-step::before {
    content: "";
    flex: 0 1 54px;
    min-width: 0;
    width: 54px;
    margin: 0 12px;
    border-top: 2px dotted #7ba7d6;
}

/* 连接段压到 0 也放不下时（4:3 等窄舞台，中间列 < 972px）步骤条整条让位，
   否则序号会压在钱包上。步骤条是进度提示，非交互，隐藏不丢功能 */
@container (max-width: 980px) {
    .al-steps {
        display: none;
    }
}

.al-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eaf3fd;
    border: 2px solid var(--al-gold);
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    font-weight: 700;
    color: var(--al-ink);
}

.al-step.is-active .al-step-num {
    background: var(--al-blue);
    border-color: var(--al-blue);
    color: #fff;
}

/* wallets sit above the right rail, outside the 1043px column */

/* 钱包悬在右侧栏上方（超出中间列右边界），跟着 .al-main 的右边一起移动，
   右端始终与右侧栏保持 11px 对齐 */
.al-wallets {
    display: flex;
    align-items: center;
    flex: none;
    gap: 12px;
    /* 54 高的钱包挂在 51px 的 header 轨道里，下缘正好压住第二行右端的说明文字
       （transfer 的 Instant Wallet Transfer），所以贴着轨道顶排，不再下移 4px */
    margin-top: 0;
    margin-left: auto;
    margin-right: -308px;
}

.al-wallet {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 54px;
    padding: 0 12px;
    border: 2px solid #f3c65d;
    border-radius: 11px;
    background:
        linear-gradient(180deg, rgba(39, 159, 239, 0.98) 0%, rgba(6, 105, 202, 0.98) 48%, rgba(1, 58, 145, 0.99) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.68),
        inset 0 0 0 2px rgba(255, 235, 159, 0.18),
        inset 0 -3px 7px rgba(0, 27, 91, 0.48),
        0 0 0 1px rgba(4, 70, 151, 0.9),
        0 2px 5px rgba(2, 30, 83, 0.44);
}



.al-wallet img {
    width: 27px;
    height: 27px;
    object-fit: contain;
}

.al-wallet-value {
    font-size: clamp(17.28px, calc(10.69px + 1.25cqi), 23.76px);
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.al-wallet-add,
.al-chart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    transition: filter 140ms ease, transform 140ms ease;
}

.al-wallet-add {
    width: 34px;
    height: 34px;
    border: 1px solid #0057ad;
    border-radius: 8px;
    background: linear-gradient(180deg, #188ce2 0%, #0873cf 48%, #0357ae 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -2px 3px rgba(0, 28, 91, 0.42),
        0 1px 3px rgba(2, 30, 83, 0.46);
    color: #fff;
    font-size: clamp(14.04px, calc(8.75px + 1.03cqi), 19.44px);
    text-shadow: 0 1px 2px rgba(0, 25, 75, 0.6);
}

.al-wallet-add:hover,
.al-chart-btn:hover {
    filter: brightness(1.12);
}

.al-wallet-add:active,
.al-chart-btn:active {
    transform: scale(0.94);
}

.al-chart-btn {
    width: 54px;
    height: 54px;
    border-radius: 0;
    font-size: clamp(17.28px, calc(10.69px + 1.25cqi), 23.76px);
    background: url(../images/afterlogin/square.webp) no-repeat center center;
    background-size: contain;
    color: #fff;
}

/* ---------- payment method category ---------- */

.al-methods {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
}

.al-method-row {
    display: flex;
    gap: 16px;
    margin-top: 5px;
}

.al-method {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 70px;
    font-size: clamp(15.12px, calc(9.29px + 1.08cqi), 20.52px);
    font-weight: 700;
    color: var(--al-ink);
    background: url(../images/afterlogin/payment-method-2.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease;
}

/* flex-basis 取设计稿宽度、grow 取同一比例：1043px 时精确还原，更宽时等比拉伸。
   min-width:0 是必须的 —— 否则 min-width:auto 会用内容最小宽度顶开，破坏比例 */
.al-method {
    flex-shrink: 1;
    min-width: 0;
}

.al-method:nth-child(1) { flex-basis: 374px; flex-grow: 374; }
.al-method:nth-child(2) { flex-basis: 334px; flex-grow: 334; }
.al-method:nth-child(3) { flex-basis: 303px; flex-grow: 303; }

.al-method img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.al-method.is-selected {
    background-image: url(../images/afterlogin/payment-method.webp);
    color: #fff;
    text-shadow: 0 2px 3px rgba(4, 39, 88, 0.45);
}

.al-method:not(.is-selected):hover {
    filter: brightness(1.05);
}

/* ---------- banking block ---------- */

/* 三个面板共用同一网格轨道，切换时构图完全不跳。
   面板内部统一用纵向 flex，让各页分区保持正常文档流。 */
.al-panel {
    grid-column: 1;
    grid-row: 4;
    width: 100%;
    height: 643px;
    display: flex;
    flex-direction: column;
}

.al-panel[hidden] {
    display: none;
}

/* select bank */

.al-banks {
    flex: none;
    width: 100%;
}

.al-banks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.al-clearance {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(11.88px, calc(11.34px + 1.85cqi), 18.2px);
    line-height: 20px;
    font-weight: 400;
    color: var(--al-ink);
}

.al-clearance i {
    color: var(--al-success);
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
}

.al-bank-row {
    display: flex;
    gap: 14px;
    margin-top: 5px;
}

.al-bank {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 278 1 278px;
    min-width: 0;
    height: 90px;
    padding: 0 16px;
    text-align: left;
    background: url(../images/afterlogin/select-bank-2.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: flex-basis 160ms ease, flex-grow 160ms ease, filter 140ms ease;
}

/* 选中项按 318:278 的比例变宽，与设计稿一致 */
.al-bank.is-selected {
    flex-grow: 318;
    flex-basis: 318px;
    background-image: url(../images/afterlogin/select-bank.webp);
    filter: drop-shadow(0 0 6px rgba(229, 177, 75, 0.6));
}

.al-bank:not(.is-selected):hover {
    filter: brightness(1.05);
}

.al-bank-logo {
    flex: none;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.al-bank-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* 字号流体缩放：随中间栏（.al-main，container-type:inline-size）宽度用 cqi 连续缩放，
   窄屏（iPad/iPad mini）自动变小，保证整段文字单行完整可见、不截断、不换行撑高。
   锚点：容器≈1445 时 19/14px（设计值），≈667(iPad) 时 14/11px（实测刚好塞满卡片） */
.al-bank-text strong {
    font-size: clamp(15.12px, calc(9.29px + 1.08cqi), 20.52px);
    font-weight: 700;
    color: var(--al-ink);
    white-space: nowrap;
}

.al-bank-text small {
    font-size: clamp(10.8px, calc(6.8px + 0.8cqi), 15.12px);
    font-weight: 400;
    color: #4a6a95;
    white-space: nowrap;
}

.al-bank-add {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 126 1 126px;
    min-width: 0;
    height: 90px;
    font-size: clamp(23.76px, calc(14.58px + 1.71cqi), 32.4px);
    color: var(--al-ink);
    background: url(../images/afterlogin/select-bank-3.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease;
}

.al-bank-add:hover {
    filter: brightness(1.06);
}

/* bank account detail */

.al-bank-detail {
    flex: none;
    width: 100%;
    height: 87px;
    margin-top: 20px;
    border: 1px solid rgba(229, 177, 75, 0.9);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0.97), rgba(204, 226, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(77, 137, 196, 0.34),
        0 2px 4px rgba(4, 39, 88, 0.16);
}

.al-detail-grid {
    height: 100%;
    margin: 0;
    padding: 0 26px;
    display: grid;
    /* 明细格数量会随内容增删变化，用等宽列自动均分，保持平均分布
       （USDT 变体 .al-detail-grid-usdt 有自己的列模板，不受影响） */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
}

.al-detail-cell dt {
    margin: 0 0 4px;
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4a6a95;
}

.al-detail-cell dd {
    margin: 0;
    font-size: clamp(15.12px, calc(9.29px + 1.08cqi), 20.52px);
    font-weight: 700;
    color: var(--al-ink-strong);
    font-variant-numeric: tabular-nums;
}

.al-acct {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* the account number is the one thing users must be able to select */
.al-acct-num {
    user-select: text;
}

.al-copy {
    font-size: clamp(12.96px, calc(8.32px + 0.96cqi), 18.36px);
    color: var(--al-blue);
    transition: color 140ms ease, transform 140ms ease;
}

.al-copy:hover {
    color: var(--al-blue-deep);
}

.al-copy:active {
    transform: scale(0.9);
}

.al-copy.is-copied {
    color: var(--al-success);
}

/* destination gateway */

.al-gateways {
    flex: none;
    width: 100%;
    margin-top: 31px;
}

.al-gateway-row {
    display: flex;
    gap: 37px;
    margin-top: 5px;
}

.al-gateway {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 503px;
    min-width: 0;
    height: 90px;
    padding: 0 22px;
    text-align: left;
    background: url(../images/afterlogin/deposit-destination.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease;
}

.al-gateway.is-selected {
    filter: drop-shadow(0 0 6px rgba(229, 177, 75, 0.6));
}

.al-gateway:not(.is-selected):hover {
    filter: brightness(1.05);
}

.al-gateway-logo {
    flex: none;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.al-gateway-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.al-gateway-text strong {
    font-size: clamp(15.12px, calc(10.29px + 1.08cqi), 20.52px);
    font-weight: 700;
    color: var(--al-ink);
    white-space: nowrap;
}

.al-gateway-text small {
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    font-weight: 400;
    color: #4a6a95;
    white-space: nowrap;
}

/* ---------- deposit amount ---------- */

.al-amount {
    flex: none;
    width: 100%;
    margin-top: 35px;
}

.al-amount-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.al-minlimit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: clamp(15.12px, calc(9.29px + 1.08cqi), 20.52px);
    line-height: 20px;
    color: var(--al-ink);
}

.al-minlimit i {
    color: var(--al-blue);
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
}

.al-minlimit strong {
    font-weight: 700;
    color: var(--al-success);
}

.al-amount-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    margin-top: 5px;
    padding: 0 26px;
    border: 1px solid rgba(229, 177, 75, 0.9);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0.97), rgba(204, 226, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(77, 137, 196, 0.34),
        0 2px 4px rgba(4, 39, 88, 0.16);
}

.al-amount-display {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: clamp(35.64px, calc(22.36px + 2.61cqi), 49.68px);
    font-weight: 700;
    line-height: 1;
    color: var(--al-blue-deep);
    font-variant-numeric: tabular-nums;
}

.al-amount-value {
    width: 225px;
    min-width: 0;
    padding: 0 2px 2px;
    border: 0;
    border-bottom: 2px solid transparent;
    outline: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    caret-color: var(--al-blue-deep);
    transition: border-color 140ms ease, background-color 140ms ease;
}

.al-amount-value:hover {
    border-bottom-color: rgba(11, 101, 211, 0.35);
}

.al-amount-value:focus {
    border-bottom-color: var(--al-blue);
    background: rgba(255, 255, 255, 0.22);
}

.al-preset-row {
    display: flex;
    gap: 10px;
}

.al-preset {
    min-width: 87px;
    height: 53px;
    font-size: clamp(16.2px, calc(10.26px + 1.19cqi), 22.68px);
    font-weight: 700;
    color: var(--al-ink);
    background: url(../images/afterlogin/amount.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease;
    padding: 0 7px;
}

.al-preset:hover {
    filter: brightness(1.06);
}

.al-preset.is-selected {
    color: var(--al-blue-deep);
    filter: drop-shadow(0 0 5px rgba(229, 177, 75, 0.75));
}

/* ---------- promotion + receipt ---------- */

.al-support {
    flex: none;
    width: 100%;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 31px;
}

/* 可变宽浅色栏位用 CSS 原生绘制，避免九宫格接缝与位图拉伸。 */
.al-select-wrap,
.al-file {
    position: relative;
    display: flex;
    align-items: center;
    height: 67px;
    margin-top: 5px;
    padding: 0 22px;
    border: 1px solid rgba(229, 177, 75, 0.92);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0.98), rgba(204, 226, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(77, 137, 196, 0.32),
        0 2px 4px rgba(4, 39, 88, 0.14);
}

/* 优惠选择：向上展开的自定义 listbox。
   该字段位于构图底部（设计稿 y=814），向下展开会被舞台裁掉，故做成 dropup。 */
.al-dropup-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 30px;
    font-size: clamp(15.12px, calc(9.72px + 1.13cqi), 21.6px);
    font-weight: 400;
    color: var(--al-ink-strong);
    text-align: left;
    cursor: pointer;
}

.al-select-caret {
    position: absolute;
    right: 26px;
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    color: var(--al-ink);
    pointer-events: none;
    transition: transform 140ms ease;
}

/* 展开时抬高层级，压住上方的金额面板 */
.al-select-wrap.is-open {
    z-index: 30;
}

.al-select-wrap.is-open .al-select-caret {
    transform: rotate(180deg);
}

.al-dropup-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    margin: 0;
    padding: 8px;
    list-style: none;
    background: linear-gradient(180deg, #f4f9ff 0%, var(--al-surface) 100%);
    border: 2px solid var(--al-gold);
    border-radius: 14px;
    box-shadow: 0 8px 18px var(--al-shadow);
}

.al-dropup-menu[hidden] {
    display: none;
}

.al-dropup-option {
    display: flex;
    align-items: center;
    gap: 11px;
    height: 46px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    color: var(--al-ink);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.al-dropup-option + .al-dropup-option {
    margin-top: 4px;
}

/* 单选指示点 */
.al-dropup-option::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #a8c2de;
    background: rgba(255, 255, 255, 0.7);
}

.al-dropup-option:hover {
    background: rgba(11, 101, 211, 0.12);
}

.al-dropup-option:focus-visible {
    outline: 2px solid var(--al-focus);
    outline-offset: -2px;
}

.al-dropup-option.is-selected {
    color: #fff;
    text-shadow: 0 1px 2px rgba(4, 39, 88, 0.4);
    background: linear-gradient(180deg, #2f8ce4 0%, var(--al-blue-deep) 100%);
    box-shadow: 0 2px 5px var(--al-shadow);
}

.al-dropup-option.is-selected::before {
    border-color: var(--al-gold-bright);
    background: var(--al-gold-bright);
}

.al-file {
    gap: 18px;
    padding: 0 14px;
}

.al-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: none;
    width: 150px;
    height: 55px;
    margin: 0;
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 3px rgba(4, 39, 88, 0.45);
    background: url(../images/afterlogin/choose-file.webp) no-repeat center center;
    background-size: 100% 100%;
    cursor: pointer;
    transition: filter 140ms ease;
}

.al-file-btn:hover {
    filter: brightness(1.08);
}

/* keep the input focusable for keyboard users, but visually replaced by its label */
.al-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.al-file-input:focus-visible + .al-file-name,
.al-file-input:focus-visible ~ .al-file-name {
    outline: 2px solid var(--al-focus);
    outline-offset: 2px;
}

.al-file-name {
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    color: #4a6a95;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- history 交易记录表 ---------- */
/* 复用 .al-panel 的定位与显隐，这里只补表格本身 */

/* 三个等宽页签（Deposit / Withdrawal / Transfer），区别于存款页的 374/334/303 */
.al-method-row.is-equal .al-method {
    flex-basis: 0;
    flex-grow: 1;
    border: 1px solid rgba(229, 177, 75, 0.92);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(244, 249, 255, 0.98), rgba(207, 228, 248, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(77, 137, 196, 0.34),
        0 2px 4px rgba(4, 39, 88, 0.16);
}

/* 两等分页使用完整 1028×140 长版图，直接缩小显示，不做切片。 */
.al-method-row.is-equal .al-method.is-selected {
    border: 0;
    border-radius: 0;
    background: url(../images/afterlogin/payment-method-wide.webp) no-repeat center center;
    background-size: 100% 100%;
    box-shadow: none;
}

.al-thead,
.al-row {
    display: grid;
    align-items: center;
    gap: 10px;
    padding: 0 26px;
}

.al-thead {
    flex: none;
    height: 42px;
    font-size: clamp(9.72px, calc(8.37px + 1.73cqi), 20.04px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4a6a95;
}

.al-rows,
.al-pager {
    flex: none;
}

.al-row {
    flex: none;
    height: 78px;
    font-size: clamp(11.88px, calc(9.34px + 0.85cqi), 17.2px);
    color: var(--al-ink-strong);
    border: 1px solid rgba(229, 177, 75, 0.88);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0.96), rgba(204, 226, 247, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(77, 137, 196, 0.3);
}

.al-row + .al-row {
    margin-top: 8px;
}

/* 列宽比例按各列最长文案实测所需宽度分配，避免「Payment Gateway」等长词折行 */
.al-cols-deposit {
    grid-template-columns: 132fr 143fr 128fr 100fr 78fr 80fr 113fr 147fr;
}

.al-cols-withdrawal {
    grid-template-columns: 150fr 140fr 125fr 120fr 95fr 125fr 176fr;
}

.al-cell-num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.al-cell-muted {
    color: #4a6a95;
}

.al-cell-bonus {
    font-weight: 700;
    color: var(--al-success);
    font-variant-numeric: tabular-nums;
}

/* 状态徽章：颜色之外还有文字，不靠颜色单独表意 */
.al-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border-radius: 15px;
    font-size: clamp(9.72px, calc(9.37px + 1.73cqi), 17.04px);
    font-weight: 700;
    white-space: nowrap;
}

.al-badge::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.al-badge-completed {
    color: #0d7a55;
    background: rgba(13, 155, 107, 0.16);
}

.al-badge-pending {
    color: #8a5a0c;
    background: rgba(229, 177, 75, 0.26);
}

.al-badge-rejected {
    color: #a3341c;
    background: rgba(176, 69, 43, 0.16);
}

/* 空态：吃掉表头以下的剩余高度，不能用 height:100%（那是整个面板的高度） */
.al-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #4a6a95;
}

.al-empty i {
    font-size: clamp(34.56px, calc(21.38px + 2.49cqi), 47.52px);
    color: #a8c2de;
}

.al-empty p {
    margin: 0;
    font-size: clamp(15.12px, calc(9.72px + 1.13cqi), 21.6px);
    font-weight: 700;
}

/* 分页 */
.al-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.al-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    font-weight: 700;
    color: var(--al-ink);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #b6d2ee;
    transition: background 120ms ease, color 120ms ease;
}

.al-page:hover {
    background: rgba(11, 101, 211, 0.12);
}

.al-page.is-current {
    color: #fff;
    background: linear-gradient(180deg, #2f8ce4 0%, var(--al-blue-deep) 100%);
    border-color: var(--al-blue-deep);
}

/* ---------- 面板 2/3 专用件 ---------- */

/* 与 .al-gateway 同底同尺寸，但不可选（二维码卡、警告卡） */
.al-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1 1 503px;
    min-width: 0;
    height: 90px;
    padding: 0 22px;
    text-align: left;
    background: url(../images/afterlogin/deposit-destination.webp) no-repeat center center;
    background-size: 100% 100%;
}

/* 整张卡做成按钮：清掉浏览器默认外观，视觉沿用 .al-info-card 的背景与排版 */
button.al-info-card-btn {
    font: inherit;
    color: inherit;
    border: 0;
    cursor: pointer;
    transition: filter 120ms ease, transform 120ms ease;
}

button.al-info-card-btn:hover {
    filter: brightness(1.04);
}

button.al-info-card-btn:active {
    transform: translateY(1px);
}

.al-qr,
.al-warn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 58px;
    height: 58px;
    border-radius: 12px;
    font-size: clamp(23.76px, calc(14.58px + 1.71cqi), 32.4px);
    color: #fff;
    background: linear-gradient(180deg, #2f8ce4 0%, var(--al-blue-deep) 100%);
}

.al-warn-icon {
    font-size: clamp(20.52px, calc(12.64px + 1.48cqi), 28.08px);
    color: var(--al-ink-strong);
    background: linear-gradient(180deg, var(--al-gold-bright) 0%, var(--al-gold) 100%);
}

/* 真二维码，不是图标：白底留边由 SVG 自带，铺满信息卡的可用高度以便手机扫得到。
   ponytail: 图内容固定为演示地址，换成后端下发地址时要重新生成这张 svg；
   若地址改为每人一个，就得改成前端按地址实时渲染或由后端下发二维码图 */
.al-qr-img {
    flex: none;
    width: 78px;
    height: 78px;
    border-radius: 6px;
}

.al-info-card-warn .al-gateway-text small {
    color: #a2560f;
}

/* 自动入账说明，占位与 .al-file 同高 */
.al-note {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 67px;
    margin-top: 5px;
    padding: 0 22px;
    font-size: clamp(12.96px, calc(8.32px + 1.96cqi), 21.36px);
    color: var(--al-ink);
    border: 1px solid rgba(229, 177, 75, 0.92);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0.98), rgba(204, 226, 247, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(77, 137, 196, 0.32),
        0 2px 4px rgba(4, 39, 88, 0.14);
}

.al-note i {
    color: var(--al-gold);
    font-size: clamp(14.04px, calc(8.75px + 1.03cqi), 19.44px);
}

/* ---------- USDT 面板：扫码优先的双栏 ---------- */
/* 参考站 set72 的 crypto 页把二维码单独放一栏（168px），而不是塞进 90px 信息卡。
   这里沿用那个编排：左栏扫码，右栏金额表单。面板外框仍是 241/643，
   所以切页签时构图整体不跳 —— 只有面板内部的排布不同。 */
.al-crypto-cols {
    flex: none;
    width: 100%;
    height: 498px;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 502fr 511fr;
    gap: 31px;
}

.al-crypto-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 白底是二维码的取景框：扫码要求高对比，不能压在浅蓝面板上 */
.al-qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
    padding: 18px 20px 16px;
    border: 0 solid transparent;
    border-image-source: url(../images/afterlogin/option-bank.webp);
    border-image-slice: 18 fill;
    border-image-width: 18px;
    border-image-repeat: stretch;
}

.al-qr-card-label {
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    font-weight: 700;
    color: var(--al-ink);
}

/* 180 设计px ≈ 138 CSS px，29 模块的码约 4.7px/模块，手机能稳定识别
   （原先塞在信息卡里只有 2.1px/模块）。再大左栏会顶出面板底边。 */
.al-qr-big {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    background: #fff;
}

.al-qr-addr {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    font-weight: 700;
    color: var(--al-ink-strong);
    font-variant-numeric: tabular-nums;
}

.al-qr-addr .al-acct-num {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-crypto-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 0;
}

/* 锁 line-height：style.css 的 1.6 会把三行撑高 12px，左栏就顶出面板 */
.al-crypto-meta-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    line-height: 20px;
    color: #4a6a95;
}

.al-crypto-meta-line strong {
    font-weight: 700;
    color: var(--al-ink-strong);
    font-variant-numeric: tabular-nums;
}

/* 走错链资产不可逆，警告必须比普通说明更重 */
.al-crypto-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
    padding: 14px 16px;
    border: 2px solid var(--al-gold);
    border-radius: 12px;
    background: rgba(255, 244, 214, 0.7);
    font-size: clamp(10.8px, calc(6.8px + 0.8cqi), 15.12px);
    line-height: 1.45;
    color: #7a4a12;
}

.al-crypto-warn i {
    flex: none;
    margin-top: 2px;
    font-size: clamp(14.04px, calc(8.75px + 1.03cqi), 19.44px);
    color: #b0452b;
}

/* 右栏只有 511 宽，六个预设排一行会挤，改 3×2 */
.al-preset-row.is-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.al-preset-row.is-wrap .al-preset {
    width: 100%;
}

/* align-items 必须显式改回 stretch：.al-amount-panel 是 center，
   在纵向 flex 里会让预设网格按内容收窄而不是撑满右栏 */
.al-crypto-amount-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    height: auto;
    padding: 18px 22px;
}

/* 右栏窄，优惠与哈希在同一文档流里改成上下堆叠。 */
.al-crypto-col .al-support {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
}

.al-crypto-col .al-select-wrap {
    width: 100%;
}

/* 钱包地址列更宽，其余列相应收窄 */
.al-detail-grid-usdt {
    grid-template-columns: 200fr 480fr 160fr 151fr;
}

.al-demo-tag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: clamp(9.72px, calc(5.4px + 0.63cqi), 11.88px);
    font-weight: 700;
    color: #fff;
    background: #b0452b;
    text-transform: uppercase;
}

/* 金额区左侧堆叠：大额 + USDT 实付换算 */
.al-amount-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.al-amount-convert {
    margin: 0;
    font-size: clamp(10.8px, calc(6.8px + 0.8cqi), 15.12px);
    color: #4a6a95;
}

.al-amount-convert strong {
    font-weight: 700;
    color: var(--al-success);
    font-variant-numeric: tabular-nums;
}

/* ---------- right rail ---------- */

.al-rail {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    height: 773px;
    margin-top: 104px;
}

/* 装饰底框一律用 background-image：它们本就是 aria-hidden 的纯装饰，
   若做成 absolute 的首个子元素，会盖在静态排布的正文之上 */
.al-bonus,
.al-summary {
    flex: none;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.al-bonus {
    background-image: url(../images/afterlogin/welcome-bonus.webp);
}

.al-summary {
    background-image: url(../images/afterlogin/deposit-summary.webp);
}

/* welcome bonus */

/* 内容自下而上排布，靠 flex 居中，不用绝对定位摆位 */
.al-bonus {
    height: 376px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 22px;
}

.al-bonus-pct {
    margin: 0;
    font-size: 62.64px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-shadow: 0 3px 6px rgba(4, 39, 88, 0.55);
}

.al-bonus-label {
    margin: 4px 0 0;
    font-size: 21.6px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 4px rgba(4, 39, 88, 0.5);
}

.al-claim {
    flex: none;
    margin-top: 15px;
    width: 246px;
    height: 57px;
    font-size: 20.52px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 2px 3px rgba(4, 39, 88, 0.45);
    background: url(../images/afterlogin/claim-btn.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease, transform 140ms ease;
}

.al-claim:hover {
    filter: brightness(1.08);
}

.al-claim:active {
    transform: scale(0.97);
}

/* deposit summary */

.al-summary {
    height: 372px;
    display: flex;
    flex-direction: column;
    padding: 30px 26px;
}

.al-summary-title {
    margin: 0;
    font-size: 18.36px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--al-blue-deep);
}

.al-summary-rows {
    margin: 24px 0 0;
}

.al-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.al-summary-row dt {
    margin: 0;
    font-size: 20.52px;
    line-height: 21px;
    font-weight: 400;
    color: var(--al-ink);
}

.al-summary-row dd {
    margin: 0;
    font-size: 21.6px;
    line-height: 21px;
    font-weight: 700;
    color: var(--al-ink-strong);
    font-variant-numeric: tabular-nums;
}

.al-summary-bonus {
    color: var(--al-success) !important;
}

.al-summary-rule {
    border-top: 1px solid #a8c2de;
}

.al-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 23px;
    font-size: 23.76px;
    font-weight: 700;
    line-height: 30px;
    color: var(--al-ink-strong);
}

.al-summary-total-value {
    font-size: 28.08px;
    color: var(--al-blue);
    font-variant-numeric: tabular-nums;
}

.al-continue {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: none;
    margin-top: auto;
    gap: 12px;
    width: 250px;
    height: 80px;
    font-size: 22.68px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--al-ink-strong);
    background: url(../images/afterlogin/continue-btn.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease, transform 140ms ease;
}

.al-continue:hover {
    filter: brightness(1.08);
}

.al-continue:active {
    transform: scale(0.97);
}

/* ---------- wallet modals ---------- */

/* 层挂在 #game-stage 里，absolute 就铺满舞台；遮罩也只盖舞台，不盖舞台外的黑边 */
.al-wallet-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 100100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(4, 39, 88, 0.55);
    font-family: Lato, Arial, sans-serif;
}

.al-wallet-modal-layer[hidden],
.al-wallet-modal[hidden] {
    display: none !important;
}

.al-wallet-modal,
.al-wallet-modal * {
    box-sizing: border-box;
}

/* 面板配色与 .al-dropup-menu 同一套：浅蓝渐变 + 2px 金边 + navy 文字 */
/* 弹窗层挂在舞台内（见 afterlogin.js），所以这里的 100% 就是舞台的 720 设计像素高：
   高度封顶在舞台内，超出的部分在弹窗里自己滚 —— 页面本身是 overflow:hidden，不滚 */
.al-wallet-modal {
    width: min(445px, calc(100% - 32px));
    /* 遮罩层现挂在 body（fixed），100% 会变成整屏高；这里改用设计像素 720 封顶，
       再由 --al-modal-scale 缩放，观感与挂在 720 舞台里一致，放大时也不溢出滚动 */
    max-height: calc(720px - 40px);
    transform: scale(var(--al-modal-scale, 1));
    transform-origin: center center;
    color: var(--al-ink-strong);
    background: linear-gradient(180deg, #f4f9ff 0%, var(--al-surface) 100%);
    border: 2px solid var(--al-gold);
    border-radius: 14px;
    box-shadow: 0 18px 40px var(--al-shadow);
    overflow: hidden auto;
    /* body 是 touch-action:none + overflow:hidden，滚动只能发生在弹窗内部 */
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--al-blue) transparent;
    animation: al-wallet-modal-in 150ms ease-out;
}

/* style.css 全局藏掉了滚动条，弹窗里要留一条，否则看不出还有内容 */
.al-wallet-modal::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.al-wallet-modal::-webkit-scrollbar-track {
    background: transparent;
}

.al-wallet-modal::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--al-blue);
}

.al-wallet-modal :focus-visible {
    outline: 2px solid var(--al-focus);
    outline-offset: 2px;
}

.al-wallet-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 52px;
}

.al-wallet-modal-header h2 {
    margin: 0;
    color: var(--al-blue-deep);
    font-size: 20.52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.1px;
}

.al-modal-back {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--al-blue);
    font-size: 18.36px;
    cursor: pointer;
    transition: color 140ms ease;
}

.al-modal-back:hover {
    color: var(--al-gold);
}

.al-main-wallet-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    min-height: 39px;
    padding: 0 20px 7px;
    color: var(--al-ink);
    font-size: 12.96px;
    font-weight: 700;
}

.al-main-wallet-summary strong,
.al-main-wallet-summary span {
    font-variant-numeric: tabular-nums;
}

.al-all-in,
.al-transfer-out,
.al-transfer-in {
    border: 0;
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: filter 140ms ease;
}

.al-all-in:hover,
.al-transfer-out:hover,
.al-transfer-in:hover {
    filter: brightness(1.08);
}

/* 主操作走页面的金色按钮语言（同 claim / continue） */
.al-all-in {
    min-width: 55px;
    height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, var(--al-gold-bright) 0%, var(--al-gold) 100%);
    color: var(--al-ink-strong);
    font-size: 11.88px;
}

.al-balance-modal {
    display: flex;
    flex-direction: column;
    height: min(465px, calc(100% - 12px));
}

.al-wallet-game-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 10px 12px 19px;
    padding: 0 10px 0 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: thin;
    scrollbar-color: var(--al-blue) transparent;
}

.al-wallet-game-list::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.al-wallet-game-list::-webkit-scrollbar-track {
    background: transparent;
}

.al-wallet-game-list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--al-blue);
}

.al-wallet-game-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 43px 34px;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    margin-bottom: 5px;
    padding: 3px 9px 3px 11px;
    border: 1px solid #a8c2de;
    border-radius: 6px;
    background: var(--al-surface-light);
    color: var(--al-ink-strong);
    font-size: 11.88px;
}

.al-wallet-game-list li strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-wallet-game-list li > span {
    text-align: right;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.al-transfer-out,
.al-transfer-in {
    height: 22px;
    padding: 0;
    border-radius: 4px;
    font-size: 11.88px;
}

/* Out 用调色板里的成功绿，In 用页面的蓝色渐变（同 .al-wallet-add），
   不再引入体系外的红色；方向另有文字标签，不靠颜色单独表意 */
.al-transfer-out {
    background: var(--al-success);
}

.al-transfer-in {
    background: linear-gradient(180deg, #2f8ce4 0%, var(--al-blue-deep) 100%);
}

.al-point-modal {
    min-height: 140px;
}

.al-point-wallets {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 18px 27px;
}

.al-point-card {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 128px;
    height: 38px;
    padding: 0 9px 0 7px;
    border-radius: 7px;
    background: linear-gradient(180deg, #2f8ce4 0%, var(--al-blue-deep) 100%);
    color: #fff;
    font-size: 14.04px;
    white-space: nowrap;
}

.al-point-card strong {
    margin-left: auto;
    font-size: 16.2px;
    font-variant-numeric: tabular-nums;
}

.al-point-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    color: #fff;
    font-size: 11.88px;
}

.al-point-star-gold {
    background: linear-gradient(180deg, var(--al-gold-bright) 0%, var(--al-gold) 100%);
    color: var(--al-ink-strong);
}

.al-point-star-silver {
    background: linear-gradient(135deg, #f7f7ff 0%, #bac7db 100%);
    color: var(--al-ink);
}

/* ---------- referral QR modal ---------- */

.al-qr-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px 22px 26px;
}

.al-qr-modal-img {
    width: 240px;
    height: 240px;
    max-width: 100%;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 6px 18px var(--al-shadow);
}

.al-qr-modal-hint {
    margin: 0;
    color: var(--al-ink);
    font-size: 15.12px;
}

.al-qr-modal-link {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(4, 39, 88, 0.06);
    color: var(--al-blue-deep);
    font-size: 14.04px;
    text-align: center;
    word-break: break-all;
}

.al-qr-modal-body .al-copy {
    width: 100%;
}

/* ---------- inbox message modal ---------- */

.al-inbox-modal {
    width: min(560px, calc(100% - 32px));
}

.al-inbox-modal-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 94px;
    padding: 20px 72px 18px 84px;
    border-bottom: 1px solid rgba(168, 194, 222, 0.75);
    background:
        radial-gradient(circle at 30px 22px, rgba(18, 191, 231, 0.2), transparent 76px),
        rgba(255, 255, 255, 0.28);
}

.al-inbox-modal-icon {
    position: absolute;
    left: 24px;
    top: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--al-gold-bright);
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, var(--al-cyan), var(--al-blue-deep));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 5px 12px rgba(4, 76, 174, 0.24);
    font-size: 18.36px;
}

.al-inbox-modal-heading {
    min-width: 0;
}

.al-inbox-modal-heading > span {
    display: block;
    margin-bottom: 5px;
    color: var(--al-blue);
    font-size: 11.88px;
    font-weight: 800;
    letter-spacing: 1.25px;
    line-height: 1;
    text-transform: uppercase;
}

.al-inbox-modal-heading h2 {
    margin: 0;
    color: var(--al-ink-strong);
    font-size: 23.76px;
    font-weight: 900;
    line-height: 1.25;
}

.al-inbox-modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(11, 101, 211, 0.22);
    border-radius: 10px;
    color: var(--al-blue-deep);
    background: rgba(255, 255, 255, 0.52);
    font: inherit;
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.al-inbox-modal-close:hover {
    color: #fff;
    border-color: var(--al-blue);
    background: var(--al-blue);
}

.al-inbox-modal-content {
    padding: 22px 26px 20px;
}

.al-inbox-modal-date {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 11px;
    border: 1px solid rgba(11, 101, 211, 0.18);
    border-radius: 999px;
    color: #4a6a95;
    background: rgba(255, 255, 255, 0.46);
    font-size: 14.04px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.al-inbox-modal-body {
    max-height: 240px;
    margin: 16px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    color: var(--al-ink);
    font-size: 16.2px;
    line-height: 1.65;
    white-space: pre-wrap;
}

.al-inbox-modal-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0 26px 24px;
}

.al-inbox-modal-ok {
    min-width: 104px;
    height: 40px;
    padding: 0 24px;
    border: 1px solid var(--al-gold);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, #2f8ce4 0%, var(--al-blue-deep) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        0 4px 10px rgba(4, 76, 174, 0.24);
    font: inherit;
    font-size: 15.12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: filter 140ms ease, transform 140ms ease;
}

.al-inbox-modal-ok:hover {
    filter: brightness(1.08);
}

.al-inbox-modal-ok:active {
    transform: scale(0.97);
}

.al-msg.is-read .al-msg-text strong {
    color: #4a6a95;
}

@keyframes al-wallet-modal-in {
    from {
        opacity: 0;
        transform: scale(calc(var(--al-modal-scale, 1) * 0.97));
    }

    to {
        opacity: 1;
        transform: scale(var(--al-modal-scale, 1));
    }
}

/* ---------- addbank 已绑银行卡 ---------- */

.al-bank-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 67px;
    margin-top: 5px;
}

.al-bank-count {
    margin: 0;
    font-size: clamp(12.96px, calc(8.32px + 0.96cqi), 18.36px);
    color: #4a6a95;
}

.al-add-bank-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 250px;
    height: 66px;
    justify-content: center;
    font-size: clamp(12.96px, calc(8.32px + 0.96cqi), 18.36px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--al-ink-strong);
    background: url(../images/afterlogin/continue-btn.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease, transform 140ms ease;
}

.al-add-bank-btn:hover {
    filter: brightness(1.08);
}

.al-add-bank-btn:active {
    transform: scale(0.97);
}

/* 卡片网格：两列，超出时列表自己滚动，构图不动 */
.al-bank-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 22px 31px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--al-blue) transparent;
}

.al-bank-grid::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.al-bank-grid::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--al-blue);
}

.al-bank-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 24px;
    border: 0 solid transparent;
    border-image-source: url(../images/afterlogin/option-bank.webp);
    border-image-slice: 18 fill;
    border-image-width: 18px;
    border-image-repeat: stretch;
}

.al-bank-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.al-bank-card-head img {
    flex: none;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.al-bank-card-name {
    font-size: clamp(15.12px, calc(9.29px + 1.08cqi), 20.52px);
    font-weight: 700;
    color: var(--al-ink);
}

/* 默认徽章只挂在默认卡上；文字之外还有勾，不靠颜色单独表意 */
.al-bank-flag {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    font-size: clamp(9.72px, calc(5.83px + 0.68cqi), 12.96px);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background: var(--al-success);
}

.al-bank-card.is-default .al-bank-flag {
    display: inline-flex;
}

.al-bank-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0;
}

.al-bank-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px dashed #a8c2de;
}

.al-bank-default {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px;
    border-radius: 17px;
    font-size: clamp(10.8px, calc(6.8px + 0.8cqi), 15.12px);
    font-weight: 700;
    color: var(--al-blue-deep);
    transition: background 140ms ease;
}

.al-bank-default:hover:not(:disabled) {
    background: rgba(11, 101, 211, 0.12);
}

.al-bank-default:disabled {
    color: var(--al-success);
    cursor: default;
}

.al-bank-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    color: #a4502f;
    transition: background 140ms ease, color 140ms ease;
}

.al-bank-remove:hover {
    color: #fff;
    background: #b0452b;
}

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

/* 加卡弹窗：复用钱包弹窗那一层的开关与焦点逻辑，只补表单排版 */
.al-addbank-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 22px 24px;
}

.al-addbank-form .al-label {
    font-size: clamp(9.72px, calc(6.37px + 0.73cqi), 14.04px);
}

.al-addbank-form .al-input {
    height: 52px;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
}

.al-addbank-form .al-submit {
    width: 100%;
    height: 58px;
    margin-top: 4px;
}

.al-addbank-error {
    margin: 0;
    font-size: clamp(10.8px, calc(6.8px + 0.8cqi), 15.12px);
    font-weight: 700;
    color: #b0452b;
}

.al-addbank-error[hidden] {
    display: none;
}

/* ---------- profile / referral 表单 ---------- */

/* 输入框与 .al-select-wrap 同底同高，profile 与 referral 共用 */
.al-input {
    display: block;
    width: 100%;
    height: 67px;
    margin-top: 5px;
    padding: 0 22px;
    font-family: inherit;
    font-size: clamp(12.96px, calc(8.32px + 1.96cqi), 21.36px);
    color: var(--al-ink-strong);
    outline: 0;
    border: 0;
    background: url(../images/afterlogin/eligible-loyalty-hd.webp) no-repeat center center;
    background-size: 100% 100%;
}

.al-input:focus {
    box-shadow: inset 0 0 0 2px var(--al-focus);
}

/* 注册后锁死的字段（Account Name / Currency），见 member-features.md §7 */
.al-input[readonly] {
    color: #4a6a95;
    cursor: not-allowed;
}

.al-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 31px;
}

.al-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
}

/* 表单主按钮：沿用右栏 Continue 的素材，尺寸略小 */
.al-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 250px;
    height: 66px;
    font-size: clamp(14.04px, calc(8.75px + 1.03cqi), 19.44px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--al-ink-strong);
    background: url(../images/afterlogin/continue-btn.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease, transform 140ms ease;
    border: none;
}

.al-submit:hover {
    filter: brightness(1.08);
}

.al-submit:active {
    transform: scale(0.97);
}

/* referral：分享链接一行 + 二维码卡 + 日期筛选 */
.al-share-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
}

.al-filter-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: 20px;
}

.al-share-row .al-submit,
.al-filter-row .al-submit {
    width: 180px;
    height: 67px;
    margin-top: 5px;
    gap: 10px;
}

/* referral 三段在面板里顺排，不用存款页那套绝对坐标 */
.al-filter,
.al-downline {
    margin-top: 24px;
}

.al-token-row {
    display: flex;
    align-items: center;
    gap: 22px;
}

.al-token {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    color: var(--al-ink);
}

.al-token strong {
    font-size: clamp(16.2px, calc(10.26px + 1.19cqi), 22.68px);
    font-weight: 700;
    color: var(--al-blue-deep);
    font-variant-numeric: tabular-nums;
}

.al-cols-referral {
    grid-template-columns: 150fr 200fr 130fr 150fr;
}

.al-cols-voucher {
    grid-template-columns: 150fr 160fr 220fr 130fr 140fr;
}

/* voucher：兑换码大写等宽，肉眼比对方便 */
.al-code {
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.al-input.al-code-input {
    letter-spacing: 2px;
    text-transform: uppercase;
}

.al-voucher-hint {
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(11.88px, calc(7.34px + 0.85cqi), 16.2px);
    color: #4a6a95;
}

.al-voucher-hint i {
    color: var(--al-blue);
}

.al-voucher-subhead {
    margin-top: 22px;
}

/* ---------- history 筛选条 + 统一流水表 ---------- */

/* 参考站 set72 的 history 用「筛选条 + 单表」，不是三个页签。
   列宽比例取自参考站实测：196/149/185/188/200。 */
.al-filter-bar {
    display: grid;
    grid-template-columns: 324fr 271fr 271fr 150fr;
    align-items: end;
    gap: 16px;
}

.al-filter-bar .al-submit {
    width: 100%;
    height: 67px;
    margin-top: 5px;
}

/* 结果计数与 Reset 同一行，占面板顶部 */
.al-history-meta {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
    font-size: clamp(11.88px, calc(10.34px + 1.85cqi), 18.2px);
    color: #4a6a95;
}

.al-history-count strong {
    font-weight: 700;
    color: var(--al-ink-strong);
    font-variant-numeric: tabular-nums;
}

.al-reset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11.88px, calc(11.34px + 1.85cqi), 18.2px);
    font-weight: 700;
    color: var(--al-blue);
    transition: color 140ms ease;
}

.al-reset-btn:hover {
    color: var(--al-gold);
}

.al-cols-history {
    grid-template-columns: 196fr 149fr 185fr 188fr 200fr;
}

/* Load more 会把行数加到 18，基础的 .al-rows 是 flex:none，会直接顶穿面板
   （舞台 overflow:hidden，多出来的行看不见）。这里让表体吃掉剩余高度并自己滚。 */
.al-rows[data-history-list] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--al-blue) transparent;
}

.al-rows[data-history-list]::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.al-rows[data-history-list]::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--al-blue);
}

/* 类型胶囊：图标 + 文字，颜色只是辅助，语义在文字上 */
.al-type {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    color: var(--al-ink);
}

.al-type i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: clamp(9.72px, calc(5.83px + 0.68cqi), 12.96px);
    color: #fff;
    background: var(--al-blue);
}

.al-type-deposit i { background: var(--al-success); }
.al-type-withdrawal i { background: #a4502f; }
.al-type-transfer i { background: var(--al-blue); }
.al-type-bet i { background: #6b4bb8; }
.al-type-reward i { background: var(--al-gold); color: var(--al-ink-strong); }

/* 进账为绿、出账为砖红；正负号本身也在文案里，不靠颜色单独表意 */
.al-amt-in,
.al-amt-out {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.al-amt-in { color: var(--al-success); }
.al-amt-out { color: #a4502f; }

.al-load-more {
    flex: none;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 220px;
    height: 52px;
    margin-top: 14px;
    font-size: clamp(12.96px, calc(7.78px + 0.91cqi), 17.28px);
    font-weight: 700;
    color: var(--al-ink-strong);
    background: url(../images/afterlogin/continue-btn.webp) no-repeat center center;
    background-size: 100% 100%;
    transition: filter 140ms ease, transform 140ms ease;
}

.al-load-more:hover {
    filter: brightness(1.08);
}

.al-load-more:active {
    transform: scale(0.97);
}

.al-load-more[hidden] {
    display: none;
}

/* ---------- pending 卡片 / inbox 列表 ---------- */

/* 两页都是「一列可滚动的条目 + 底部固定件」，.al-panel 已是 flex 列，
   这里只让列表吃掉剩余高度并自己滚动，构图其余部分不动 */
.al-pending-list,
.al-msg-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-right: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--al-blue) transparent;
}

.al-pending-list::-webkit-scrollbar,
.al-msg-list::-webkit-scrollbar {
    display: block;
    width: 4px;
}

.al-pending-list::-webkit-scrollbar-thumb,
.al-msg-list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: var(--al-blue);
}

/* 卡片与消息行共用交易记录表的底纹，高度随内容伸缩（九宫格只拉伸中段） */
.al-pcard,
.al-msg {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--al-ink-strong);
    border: 0 solid transparent;
    border-image-source: url(../images/afterlogin/option-bank.webp);
    border-image-slice: 18 fill;
    border-image-width: 18px;
    border-image-repeat: stretch;
}

.al-pcard + .al-pcard,
.al-msg + .al-msg {
    margin-top: 8px;
}

/* 展开用原生 <details>，不写 JS：键盘、ARIA 由浏览器提供 */
.al-pcard-head {
    display: grid;
    grid-template-columns: 250fr 170fr 150fr 1fr;
    align-items: center;
    gap: 10px;
    height: 78px;
    padding: 0 26px;
    font-size: clamp(11.88px, calc(9.5px + 1.08cqi), 18.28px);
    cursor: pointer;
    list-style: none;
}

.al-pcard-head::-webkit-details-marker {
    display: none;
}

.al-pcard-id {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.al-pcard-type {
    color: #4a6a95;
}

.al-pcard-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    font-size: clamp(10.8px, calc(8.96px + 1.08cqi), 20.52px);
    font-weight: 700;
    color: var(--al-blue);
    white-space: nowrap;
}

.al-pcard-toggle i {
    transition: transform 140ms ease;
}

.al-pcard[open] .al-pcard-toggle i {
    transform: rotate(180deg);
}

/* 展开区沿用银行明细条的 dt/dd 排版，不另立一套 */
.al-pcard-body {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0 26px 20px;
    border-top: 1px dashed #a8c2de;
    padding-top: 16px;
}

.al-pending-note {
    flex: none;
    margin: 12px 0 0;
    font-size: clamp(10.8px, calc(6.8px + 0.8cqi), 15.12px);
    color: #4a6a95;
}

.al-msg {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: center;
    gap: 16px;
    height: 78px;
    padding: 0 26px;
    transition: filter 140ms ease;
}

.al-msg:hover {
    filter: brightness(1.04);
}

.al-msg-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.al-msg-text strong {
    font-size: clamp(12.96px, calc(9.4px + 0.96cqi), 18.36px);
    font-weight: 700;
    color: var(--al-ink);
}

.al-msg-text small {
    font-size: clamp(10.8px, calc(8.96px + 1.88cqi), 17.28px);
    color: #4a6a95;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.al-msg-date {
    justify-self: end;
    font-size: clamp(10.8px, calc(7.88px + 1.88cqi), 18.36px);
    color: #4a6a95;
    font-variant-numeric: tabular-nums;
}

/* ---------- transfer / withdraw 专用件 ---------- */

/* From / To 并排一行，与 .al-support 用同一道 31px 间距。
   4px 下移吃掉本行 95px 轨道里的余量：右端的 Instant Wallet Transfer 说明
   与 header 里下缘伸到 84px 的钱包同处一列，不让开会被压掉字顶 */
.al-transfer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 31px;
    margin-top: 4px;
}

/* From/To 提到上方后，面板里少了一整段（92 高 + 43 间距）。
   其余四段重新均分空间：间距一律 58，Support 仍锁在 548 ——
   它的 dropup 是向上展开的，挪动会改变已验证的净空。 */
.al-panel.is-transfer .al-bank-detail {margin-top: 0;}
.al-panel.is-transfer .al-gateways {margin-top: 20px;}
.al-panel.is-transfer .al-amount {margin-top: 32px;}
.al-panel.is-transfer .al-support {margin-top: 23px;}

/* Transfer All / Transfer Max 放标题行：塞进预设行会挤爆 1043px 的金额面板 */
.al-amount-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Transfer amount 的右侧动作列需比标题基线高 10px。 */
.al-transfer-amount-actions {
    transform: translateY(-10px);
}

/* 流水要求矩阵：表头 + 两行 Type，正好吃满 gateway 槽位的 90px */
.al-req-grid {
    width: 100%;
    height: 90px;
    margin-top: 5px;
    padding: 0 26px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    font-size: clamp(15.12px, calc(9.29px + 1.08cqi), 20.52px);
    color: var(--al-ink-strong);
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(229, 177, 75, 0.9);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(241, 248, 255, 0.97), rgba(204, 226, 247, 0.95));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(77, 137, 196, 0.32),
        0 2px 4px rgba(4, 39, 88, 0.14);
}

.al-req-grid thead th {
    font-size: clamp(12.96px, calc(8.32px + 0.96cqi), 18.36px);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #4a6a95;
}

.al-req-grid tbody th {
    font-weight: 700;
    color: var(--al-ink);
}

/* 页面上半部的 From / To 下拉必须向下展开，向上会顶出画布 */
.al-select-wrap.is-down .al-dropup-menu {
    top: calc(100% + 10px);
    bottom: auto;
}

/* From 已选中的钱包不能同时作为 To */
.al-dropup-option[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

.al-preset-action {
    width: auto;
    height: 30px;
    padding: 0 14px;
    border: 1px solid rgba(229, 177, 75, 0.92);
    border-radius: 10px;
    background: linear-gradient(180deg, #f4f9ff 0%, #d8e8f8 72%, #c5ddf3 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(67, 124, 182, 0.34),
        0 1px 3px rgba(4, 39, 88, 0.16);
    font-size: clamp(16.2px, calc(10.26px + 1.19cqi), 22.68px);
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {

    .afterlogin-stage *,
    .afterlogin-stage *::before,
    .afterlogin-stage *::after {
        transition: none !important;
    }

    .al-claim:active,
    .al-continue:active,
    .al-copy:active,
    .al-inbox-modal-ok:active {
        transform: none;
    }

    .al-wallet-modal {
        animation: none;
    }
}