/**
 * OPay Swap SPA — UI/UX 2.0 (2026-05-19)
 *
 * 设计方向: Refined Web3 Modern
 *   - Uniswap 上下卡片结构骨架 + Glassmorphism 玻璃拟物 + 加密绿 #00C853 品牌色 + TG 原生融合
 *   - 反 AI 美学: 具体非通用色 / 三层径向 gradient mesh 氛围 / Inter tabular-nums 金额对齐
 *
 * TG WebApp env vars 自动注入到 :root, 自动适配 TG 明/暗主题:
 *   --tg-theme-bg-color, --tg-theme-text-color, --tg-theme-hint-color, --tg-theme-secondary-bg-color 等
 */

/* ============================================================
 * 1. CSS 变量 — 品牌色 (加密绿) + 玻璃质感 + TG 适配
 * ============================================================ */
:root {
    /* 品牌色 (加密绿) — 替换原 #493d8b 紫蓝 */
    --primary: #00C853;
    --primary-hover: #00E676;                /* hover 亮 10% */
    --primary-dim: rgba(0, 200, 83, 0.12);   /* estimate/best-rate bg */
    --primary-glow: rgba(0, 200, 83, 0.35);  /* 边缘 glow (dark mode mesh) */

    /* TG 适配 + 玻璃质感 */
    --bg: var(--tg-theme-bg-color, #FAFBFC);             /* 极浅冷白 (不纯白) */
    --bg-glass: rgba(255, 255, 255, 0.72);               /* 卡片半透底 (light) */
    --bg-glass-border: rgba(255, 255, 255, 0.4);         /* 卡片高光边 */
    --card-soft: rgba(0, 0, 0, 0.04);                    /* 按钮/搜索框中性灰底 */
    --text: var(--tg-theme-text-color, #0F1419);
    --text-secondary: var(--tg-theme-hint-color, #5B6470);
    --text-tertiary: #99A1AD;
    --border: rgba(0, 0, 0, 0.06);
    --danger: #EF4444;
    --warning: #F59E0B;
    --warning-bg: rgba(245, 158, 11, 0.10);
    --success: #00C853;
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.12);
    --shadow-btn-primary: 0 4px 16px rgba(0, 200, 83, 0.3);
    --btn-text: var(--tg-theme-button-text-color, #ffffff);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: var(--tg-theme-bg-color, #0A0E1A);          /* 深 navy-black */
        --bg-glass: rgba(255, 255, 255, 0.04);
        --bg-glass-border: rgba(255, 255, 255, 0.08);
        --card-soft: rgba(255, 255, 255, 0.06);
        --text: var(--tg-theme-text-color, #F4F6FA);
        --text-secondary: var(--tg-theme-hint-color, #8B95A7);
        --text-tertiary: #5B6470;
        --border: rgba(255, 255, 255, 0.08);
        --primary-dim: rgba(0, 230, 118, 0.15);
        --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
        --shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.6);
        --shadow-btn-primary: 0 4px 16px rgba(0, 230, 118, 0.4);
    }
}

/* ============================================================
 * 2. Reset + 氛围背景 (三层径向 gradient mesh)
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    /* gradient mesh: 三层径向 gradient 叠加 + 实色底 — 关键差异化点, 避免泛 AI 纯白页 */
    background:
        radial-gradient(at 20% 10%, rgba(0, 200, 83, 0.10) 0%, transparent 50%),
        radial-gradient(at 80% 70%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(at 50% 90%, rgba(0, 230, 118, 0.06) 0%, transparent 50%),
        var(--bg);
    background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
    html, body {
        background:
            radial-gradient(at 20% 10%, rgba(0, 200, 83, 0.18) 0%, transparent 55%),
            radial-gradient(at 80% 70%, rgba(99, 102, 241, 0.10) 0%, transparent 55%),
            radial-gradient(at 50% 90%, rgba(0, 230, 118, 0.12) 0%, transparent 55%),
            var(--bg);
    }
}

.app {
    max-width: 480px;
    margin: 0 auto;
    padding: 12px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 通用 .hidden 工具类 (header/main/captcha-step/best-rate-badge/token-modal 通用) */
.hidden { display: none !important; }

/* ============================================================
 * 3. Header + lang-toggle (色调跟随绿)
 * ============================================================ */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 16px;
}
.logo {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}
.lang-toggle {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-toggle:hover {
    background: var(--primary-dim);
    border-color: var(--primary);
    color: var(--primary);
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ============================================================
 * 4. Swap 双卡片 (Glassmorphism 核心)
 * ============================================================ */
.swap-container {
    display: grid;
    grid-template-rows: auto auto auto;       /* pay-card / switch / receive-card */
    gap: 4px;
    position: relative;
}

.swap-card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);    /* Safari 兼容 */
    border: 1px solid var(--bg-glass-border);
    border-radius: 20px;
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s ease;
}
.swap-card:focus-within {
    border-color: var(--primary);
}

.swap-card-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.swap-card-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

/* 金额 input + 估算 span — 超大字号, 无边框, tabular-nums (生产质感) */
#fromAmount, #estimateValue {
    font-size: 34px;
    font-weight: 700;                              /* 600→700 增加力量感, 解决单薄 0 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "ss01", "tnum", "calt"; /* Inter stylistic alt: 闭口 0 / 数字等宽 */
    letter-spacing: -0.02em;                       /* 收紧字距, 专业交易感 */
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
    min-width: 0;        /* flex 收缩兜底, 不被 button 挤爆 */
    color: var(--text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 0;
    line-height: 1.15;
}
#fromAmount::placeholder, #estimateValue.empty {
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Token 选择按钮 (胶囊形, 显 Logo + ticker + ▾) */
#fromTokenBtn, #toTokenBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: 100px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    font-family: inherit;
}
#fromTokenBtn:hover, #toTokenBtn:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
#fromTokenBtn:active, #toTokenBtn:active {
    transform: translateY(0);
}
#fromTokenBtn img, #toTokenBtn img,
#fromTokenBtn .token-logo-fallback, #toTokenBtn .token-logo-fallback {
    width: 26px; height: 26px;
    border-radius: 50%;
    flex-shrink: 0;
}
#fromTokenBtn::after, #toTokenBtn::after {
    content: '▾';
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 2px;
}

.swap-card-network {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}

/* 切换箭头 (压在两卡片之间, 负 margin 制造重叠错觉) */
.swap-switch {
    justify-self: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 1px var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--primary);
    transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
    z-index: 2;
    margin: -14px 0;
    font-family: inherit;
    padding: 0;
}
.swap-switch:hover {
    background: var(--primary-dim);
    box-shadow: 0 0 0 1px var(--primary);
    transform: rotate(180deg);
}

/* ============================================================
 * 5. amount-hint 小字 (min: X USDT)
 * ============================================================ */
.amount-hint {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 0 4px;
    margin-top: -4px;
    font-variant-numeric: tabular-nums;
}
.amount-hint:empty { display: none; }

/* ============================================================
 * 6. Estimate loading pulse shimmer (替代静态 "—")
 * ============================================================ */
#estimateValue.loading {
    display: inline-block;
    width: 140px;
    height: 32px;
    background: linear-gradient(90deg,
        var(--primary-dim) 0%,
        rgba(0, 200, 83, 0.25) 50%,
        var(--primary-dim) 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    animation: pulse-shimmer 1.4s ease-in-out infinite;
    color: transparent;
}
@keyframes pulse-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
 * 7. Best Rate Badge (透传比价价值)
 * ============================================================ */
.best-rate-badge {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: var(--primary-dim);
    border-radius: 14px;
    border: 1px solid rgba(0, 200, 83, 0.2);
}
.rate-detail {
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.rate-winner {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.rate-eta {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ============================================================
 * 8. 地址输入 + Warn alert (品牌化警示)
 *
 * 2026-05-20 视觉收紧:
 *   - label 紧贴 input (gap 8→4, font 12→11, 加 letter-spacing 跟 swap-card-label 一致)
 *   - input 弱化 (去 glass + 降 padding/font/radius, 用 card-soft 半透灰底)
 *     避免地址 input 视觉权重抢过上面的 swap 主卡片 32px 大金额数字
 * ============================================================ */
.address-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.address-section label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    padding-left: 4px;
    letter-spacing: 0.02em;
}
.address-section input {
    padding: 11px 14px;
    font-size: 13px;
    background: var(--card-soft);     /* 弱化, 不跟 swap-card glass 抢戏 */
    border: 1px solid transparent;     /* 默认无边框, 仅 focus 时绿色边 */
    border-radius: 12px;
    color: var(--text);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    width: 100%;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.address-section input:hover {
    background: rgba(0, 0, 0, 0.06);
}
.address-section input:focus {
    outline: none;
    border-color: var(--primary);
}
/* SEC P1-1 (2026-05-20): regex 校验失败时的红色边框 + 微弱阴影提示 */
.address-section input.invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}
@media (prefers-color-scheme: dark) {
    .address-section input:hover { background: rgba(255, 255, 255, 0.08); }
}
.address-warn-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--warning-bg);
    border-left: 3px solid var(--warning);
    border-radius: 0 10px 10px 0;
    font-size: 12px;
    color: var(--text);
    line-height: 1.5;
}
.address-warn-alert::before {
    content: '⚠️';
    flex-shrink: 0;
}

/* ============================================================
 * 9. Primary 按钮 (大圆角 + 绿色阴影 + hover lift)
 * ============================================================ */
.primary-btn {
    width: 100%;
    padding: 16px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: var(--shadow-btn-primary);
    font-family: inherit;
}
.primary-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 200, 83, 0.4);
}
.primary-btn:active:not(:disabled) {
    transform: translateY(0);
}
.primary-btn:disabled {
    background: var(--text-tertiary);
    box-shadow: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.secondary-btn {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg);
    color: var(--primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.secondary-btn:hover {
    background: var(--primary-dim);
    border-color: var(--primary);
}

/* ============================================================
 * 10. Trust footer (替代旧 disclaimer 律师条款风格)
 * ============================================================ */
.trust-footer {
    margin-top: 16px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
}
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--primary-dim);
    color: var(--primary);
    border-radius: 100px;
    font-weight: 600;
    font-size: 11px;
}
.trust-providers {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.trust-info-icon {
    cursor: pointer;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-soft);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;             /* "i" 斜体更专业 */
    line-height: 1;                  /* 关键: 去掉默认 line-height 的 ascender 偏移, 让 i 真正居中 */
    color: var(--text-secondary);
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    vertical-align: middle;
}
.trust-info-icon:hover {
    background: var(--primary-dim);
    color: var(--primary);
}
/* trust-providers parent — 强制 baseline center 不跟随文字 baseline 漂 */
.trust-providers {
    line-height: 1.4;
}

/* ============================================================
 * 11. Token Modal (半屏 slide-up)
 * ============================================================ */
.token-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}
.token-modal.open { pointer-events: auto; }

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.25s ease;
}
.token-modal.open .modal-backdrop { background: rgba(0, 0, 0, 0.4); }

.modal-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    max-height: 75vh;
    background: var(--bg);
    border-radius: 24px 24px 0 0;
    padding: 16px 16px 24px;
    box-shadow: var(--shadow-elevated);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.token-modal.open .modal-sheet { transform: translateY(0); }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 4px 12px;
}
.modal-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--card-soft);
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover {
    background: var(--primary-dim);
    color: var(--primary);
}

.modal-search {
    margin-bottom: 8px;
}
.modal-search input {
    width: 100%;
    padding: 12px 16px;
    background: var(--card-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text);
    font-family: inherit;
}
.modal-search input:focus {
    outline: none;
    border-color: var(--primary);
}

.modal-list {
    flex: 1;
    overflow-y: auto;
    margin: 0 -4px;
    padding: 0 4px;
    -webkit-overflow-scrolling: touch;
}
.token-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 8px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
    font-family: inherit;
    color: var(--text);
}
.token-row:hover, .token-row:focus-visible {
    background: var(--card-soft);
    outline: none;
}
.token-logo, .token-logo-fallback {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}
.token-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: white;
    /* background 由 JS 按 ticker hash 出来 */
}
.token-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.token-ticker {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
.token-name {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.token-network-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--card-soft);
    color: var(--text-secondary);
    border-radius: 4px;
    font-weight: 600;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ============================================================
 * 12. orderStep — 沿用 v1.x 旧布局, 仅吸收新色 (PRD 不在范围)
 * ============================================================ */
.card {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--bg-glass-border);
    border-radius: 20px;
    padding: 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pay-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--primary-dim);
    border: 2px dashed var(--primary);
    border-radius: 12px;
}
.pay-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.pay-amount .label {
    color: var(--text-secondary);
    font-size: 12px;
}
.pay-amount .value {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.pay-addr-box {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pay-addr {
    flex: 1;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 12px;
    word-break: break-all;
    line-height: 1.4;
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    color: var(--text);
}
.copy-btn {
    padding: 8px 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s ease;
}
.copy-btn:hover { background: var(--primary-hover); }

.pay-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: var(--warning-bg);
    border-radius: 6px;
}
.pay-extra .label {
    font-size: 12px;
    color: var(--warning);
    font-weight: 600;
}
.pay-extra code {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: var(--text);
}

.order-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--card-soft);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text);
}
.order-meta code {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.status-tag {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.status-new, .status-waiting { background: rgba(255, 193, 7, 0.2); color: #ca8a04; }
.status-confirming, .status-exchanging, .status-sending { background: var(--primary-dim); color: var(--primary); }
.status-finished { background: rgba(0, 200, 83, 0.2); color: var(--success); }
.status-failed, .status-expired { background: rgba(239, 68, 68, 0.15); color: var(--danger); }
.status-refunded { background: rgba(107, 114, 128, 0.15); color: var(--text-secondary); }

/* ============================================================
 * 13. Loading overlay (沿用)
 * ============================================================ */
.loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: white;
    z-index: 100;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
 * 11.5. Info Bottom Sheet (2026-05-20 trust-info-icon 点击, 替代 alert)
 *       — 复用 .modal-sheet 视觉, 跟 token-modal 同构
 * ============================================================ */
.info-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}
.info-modal.open { pointer-events: auto; }
.info-modal.open .modal-backdrop { background: rgba(0, 0, 0, 0.4); }
.info-modal.open .modal-sheet { transform: translateY(0); }

.info-sheet { max-height: 60vh; }
.info-body {
    padding: 4px 6px 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    overflow-y: auto;
}
/* Round 2 (2026-05-20): 结构化分节 (2 节信任背书 — 平台零触碰 / 智能聚合路由) */
.info-body .info-section {
    padding: 4px 0;
}
.info-body .info-section + .info-section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);    /* hairline 分隔, 明暗模式都柔和 */
}
.info-body h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.info-body p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================================
 * 13.5. Toast — 顶部弹出错误/提示 (2026-05-20 替代旧版"流浪文本"挤在卡片间)
 * ============================================================ */
.toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    padding: 10px 18px;
    background: var(--danger);
    color: white;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    max-width: 90vw;
    text-align: center;
    animation: toast-slide-down 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toast-slide-down {
    from { transform: translateX(-50%) translateY(-120%); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

/* ============================================================
 * 14. Turnstile boot 验证 section (色调跟随绿)
 * ============================================================ */
.captcha-step {
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--bg-glass-border);
    border-radius: 20px;
    padding: 32px 16px;
    margin: 24px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    box-shadow: var(--shadow-card);
}
.captcha-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.captcha-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: -8px;
}
.captcha-widget {
    min-height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.captcha-hint {
    color: var(--danger);
    font-size: 13px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
}