/* ============================================================
 * aliqay · 用户中心 H5 - 自定义样式
 * ------------------------------------------------------------
 * 来源：原 index.html 内联 <style> 块
 * 加载：index.html 通过 <link rel="stylesheet" href="css/style.css">
 * 框架：Tailwind CSS（CDN/本地）提供 utility class，本文件仅写"无法用 utility 表达"的样式
 * ============================================================ */

/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent; /* PWA：去掉 iOS 点击高亮 */
}

/* aliqay 视图（用户中心）专用容器——模拟手机屏幕宽度 + 给底部 tab 留空 */
#view-alipay {
    position: relative;
    max-width: 414px;
    margin: 0 auto;
    padding-bottom: 80px;
}

/* ===== 手机端：视图与底部导航占满屏幕宽度，去掉左右留白 ===== */
@media (max-width: 480px) {
    #view-alipay,
    #view-merchant {
        max-width: 100% !important;
    }
    #alipay-tabbar {
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* 通用：视图默认隐藏，由 spa-router 控制显隐 */
.view {
    display: none;
}

/* 顶部背景渐变（仅 aliqay 视图） */
.top-bg {
    /* 按参考图逐点采样复刻：右上 #C8DDFC 最深，向左下/下渐浅至 #f5f5f5 */
    background: linear-gradient(200deg, #c8ddfc 0%, #d5e4f9 28%, #e3edf9 55%, #eef2f8 80%, #f5f5f5 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px;
    z-index: 0;
}

.content-z {
    position: relative;
    z-index: 1;
}

/* 模拟图标的基本样式 */
.icon-shape {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* ============================================================
 * Tailwind 类覆盖（品牌定制）
 * 注意：Tailwind CDN 运行时注入样式，此处用 !important 保证优先级
 * ============================================================ */

/* 品牌主色：覆盖 text-blue-600 */
.text-blue-600 {
    color: rgb(41 62 83) !important;
}

/* 行高：覆盖 text-xs */
.text-xs {
    line-height: 1.5rem !important;
}

/* ============================================================
 * 侧边辅助文字（"6积分待领取" / "打理每一笔钱"）
 * 单独字号控制，不随 .text-xs（12px）走
 * ============================================================ */
.side-action-text {
    font-size: 13px;      /* 按需调整 */
    line-height: 1.5rem;  /* 与 .text-xs 覆盖行高保持一致 */
}

/* 复用：side-text 类名（响应式版） */
.side-text {
    font-size: 13px;
    line-height: 1.5rem;
}

/* ============================================================
 * JS 注入的临时浮层（点击反馈 toast）
 * ============================================================ */
#js-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
#js-toast.show {
    opacity: 1;
}

/* ============================================================
 * 响应式尺寸（按 viewport 宽度缩放，跨 320~430px 屏幕统一）
 * 基准：360px 屏 = 1.0 系数
 *   320px → 0.89
 *   360px → 1.00
 *   390px → 1.08
 *   414px → 1.15
 *   430px → 1.19
 * 用 clamp(最小, vw基准, 最大) 防止极端屏溢出
 * ============================================================ */
:root {
    --fin-icon-size:  clamp(26px, 7.5vw,  36px);  /* 9 宫格图标 */
    --fin-text-size:  clamp(10px, 2.9vw,  13px);  /* 9 宫格文字 */
    --fin-hint-size:  clamp(8px,  2.2vw,  10px);  /* 9 宫格第二行小提示 */
    --tab-icon-size:  clamp(20px, 5.8vw,  28px);  /* 底部 tab 图标 */
    --tab-text-size:  clamp(9px,  2.4vw,  11px);  /* 底部 tab 文字 */
    --card-icon-size: clamp(20px, 5.5vw,  26px);  /* 卡片内图标（会员/账单等） */
    --card-text-size: clamp(12px, 3.4vw,  14px); /* 卡片内文字 */
    --side-text-size: clamp(11px, 3.0vw,  13px); /* 卡片右侧辅助文字 */
    --avatar-size:    clamp(48px, 13vw,   64px); /* 头像 */
}

/* 9 宫格 */
.fin-icon  { width: var(--fin-icon-size);  height: var(--fin-icon-size); }
.fin-text  { font-size: var(--fin-text-size);  line-height: 1.25; white-space: nowrap; }
.fin-hint  { font-size: var(--fin-hint-size);  line-height: 1.25; }

/* 底部 tab */
.tab-icon  { width: var(--tab-icon-size);  height: var(--tab-icon-size); }
.tab-text  { font-size: var(--tab-text-size);  line-height: 1.2; white-space: nowrap; }

/* 卡片内 */
.card-icon { width: var(--card-icon-size); height: var(--card-icon-size); }
.card-text { font-size: var(--card-text-size); }
.side-text { font-size: var(--side-text-size); }

/* 头像 */
.avatar    { width: var(--avatar-size); height: var(--avatar-size); }

/* ============================================================
 * 浏览器兼容提示 banner（非 Chrome 浏览器时显示）
 * ============================================================ */
#browser-tip {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff3cd;
    color: #856404;
    padding: 8px 12px;
    font-size: 13px;
    text-align: center;
    z-index: 99999;
    border-bottom: 1px solid #ffe69c;
}
#browser-tip a {
    color: #1677ff;
    text-decoration: underline;
}