/* ==========================================
   1. 基础全局配置（强制最外圈大壳子彻底放开留白）
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root {
    --color-web3-blue: #007AFF;       
    --color-web3-blue-hover: #0062cc; 
}

/* 🎯【核心修复】：一键清除全站所有最大上级标签的任何边缘多余留白 */
body, html {
    background-color: #ffffff; 
    color: #1e2329;           
    line-height: 1.5;
    padding: 0 !important; 
    margin: 0 !important;  
}

/* ==========================================
   2. 最外层手机外壳大容器（左右内边距彻底死锁为 0）
   ========================================== */
.phone-window, 
.pool-container {
    width: 100% !important;
    max-width: 430px !important; 
    height: 100vh !important;       
    margin: 0 auto !important;
    background-color: #ffffff; 
    position: relative !important;  
    display: flex !important;
    flex-direction: column !important; 
    overflow: hidden !important;    
    
    /* 
       🎯【终极核心修改】：把大外壳左右两侧的内边距（Padding）死死地改成 0px！
       只要把这里勒紧的绳子放开，里面所有的模块在瞬间就会往两边啪地一下炸开，
       从而达成跟最底部导航条分毫不差的、绝对贴紧手机最边缘的通栏对齐效果！
    */
    padding-left: 0px !important;   
    padding-right: 0px !important;  
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

/* 
   3. 中间可上下滚动的理财内容盒 & 资产独立画布
   🎯【通栏拉满控制】：强制中间所有大灰色卡片、跑马灯和图片横向绝对贴死屏幕边界！
*/
.main-scroll, 
#global-page-assets-content {
    flex: 1;             
    overflow-y: auto !important;    
    width: 100% !important;
    
    /* 左右内边距（padding-left/right）强制锁定为 0px，不留任何白边死角 */
    padding: 12px 0px 80px 0px !important; 
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 
   4. 全站通栏卡片修饰
   既然大灰块现在全部要从最左边贴到最右边，我们把它们左右原本多余的细圆角切掉，
   这样视觉上就会极其规范、高级，完全服从屏幕拉满贴边对齐！
*/
.banner-carousel-area,
.marquee-bar,
.pool-card,
.tabs-container,
.data-board-card,
.spot-account-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0px !important; /* 左右圆角归零，达成完美的通栏贴边 */
    border-left: none !important;  /* 顶满屏幕后不需要无意义的左右两侧框线 */
    border-right: none !important;
    box-sizing: border-box !important;
}
        
        /* ==========================================
           1. 基础全局配置（强制全站所有基础容器绝不留白）
           ========================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        :root {
            --color-web3-blue: #007AFF;       
            --color-web3-blue-hover: #0062cc; 
        }

        body {
            background-color: #ffffff; 
            color: #1e2329;           
            line-height: 1.5;
            padding: 0 !important; /* 🎯【核心增加】：清除可能残留的浏览器 body 内边距 */
            margin: 0 !important;  /* 🎯【核心增加】：清除可能残留的浏览器 body 外边距 */
        }

        /* ==========================================
           2. 手机外壳容器（强令最外圈彻底贴边、左右圆角归零）
           ========================================== */
        .phone-window, 
        .pool-container {
            width: 100% !important;
            max-width: 430px !important; 
            height: 100vh !important;       
            margin: 0 auto !important;
            background-color: #ffffff; 
            position: relative !important;  
            display: flex !important;
            flex-direction: column !important; 
            overflow: hidden !important;    
            /* 
               🎯【核心修改】：把左右内边距（Padding）彻底死死地改成 0！
               这样外层大壳子再也不会往内勒紧了，两边的白色空隙会在瞬间消失！
            */
            padding-left: 0px !important;   
            padding-right: 0px !important;  
            padding-top: 0px !important;
        }

        /* 顶部的灰色导航栏，保持静止不滚动 */
        .header-bar {
            flex-shrink: 0;      
            width: 100% !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background-color: #f5f7fa; 
            border-bottom: 1px solid #e2e8f0;
            border-radius: 0px !important; /* 去除顶部导航左右两边的圆角 */
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* 理财滑动内容区 & 资产独立画布 */
        .main-scroll, 
        #global-page-assets-content {
            flex: 1;             
            overflow-y: auto !important;    
            width: 100% !important;
            /* 🎯 强制中间的所有滑动模块左右完全贴死屏幕，两边彻底不留任何缝隙 */
            padding: 0px 0px 80px 0px !important; 
            box-sizing: border-box;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* 
           全站所有灰色大卡片块通栏控制 
           🎯 既然外层放开了，我们要把这里面的所有块的左右外边距也强制清零，
           并且拿掉两边的圆角，这样它们就会像你截图中的底部导航条一样，
           实现分毫不差的绝对屏幕重合对齐！
        */
        .banner-carousel-area,
        .marquee-bar,
        .pool-card,
        .tabs-container,
        .data-board-card,
        .spot-account-card {
            width: 100% !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            /* 
               【通栏扁平核心】：左右圆角全部切成 0px，左右侧边框全部拿掉，
               这样它们在两侧就会天衣无缝地跟你的手机物理屏幕大边缘合二为一！
            */
            border-radius: 0px !important; 
            border-left: none !important;  
            border-right: none !important;
            box-sizing: border-box !important;
        }

/* ==========================================
   3. 全站卡片块统一规格控制（强制对齐两端边界）
   ========================================== */
.header-bar,
.banner-carousel-area,
.marquee-bar,
.pool-card,
.tabs-container,
.data-board-card {
    width: 100% !important;         /* 强制所有块拉满到相同的 100% 宽度 */
    max-width: 100% !important;
    margin-left: 0 !important;      /* 清空偏离的外边距 */
    margin-right: 0 !important;
    border-radius: 12px !important; /* 全站所有块统一使用 12px 的精致圆角 */
    box-sizing: border-box !important;
}

/* ==========================================
   4. 独立调整块与块之间的微小上下间距（彻底去掉大空白）
   ========================================== */
.header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f5f7fa;     /* 导航栏换成统一浅灰色块 */
    border: 1px solid #e2e8f0;      
    margin-top: 12px !important;    /* 距离顶部留出少许空气感 */
    margin-bottom: 6px !important;  
}

.banner-carousel-area {
    height: 160px !important;       /* 固定灰色区域高度 */
    overflow: hidden !important;    /* 超出部分图片利落剪切 */
    padding: 0 !important;      
    margin-bottom: 6px !important;  
    border: 1px solid #e2e8f0;
}

.banner-carousel-area img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.marquee-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    background-color: #f5f7fa; 
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 6px !important;  
}

.data-board-card,
.pool-card {
    background-color: #f5f7fa; /* 核心大块换成统一浅灰色 */
    padding: 20px;
    margin-bottom: 12px !important; 
    border: 1px solid #e2e8f0;
}

/* ==========================================
   5. 功能切换双键与内容面板 (Tabs & Content)
   ========================================== */
.tabs-container {
    display: flex;
    background-color: #f5f7fa; 
    margin-top: 10px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 15px;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.tab-item.active { font-weight: bold; color: #1e2329; }
.tab-item.inactive { font-weight: normal; color: #718096; }

/* 完美融合蓝色变量的激活下划线 */
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 3px;
    background-color: var(--color-web3-blue); /* 优雅引用科技蓝 */
    border-radius: 2px;
}

/* ==========================================
   6. 组件内部细节与按钮（文字、下拉、表格）
   ========================================== */
.header-title { font-size: 16px; font-weight: bold; color: #1e2329; }
.header-logo-link, .header-icon-right { position: relative; display: inline-block; }
.eth-trigger-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #ffffff; cursor: pointer; }
.eth-icon-svg { width: 18px; height: 18px; }
#lang-btn { cursor: pointer; font-size: 18px; padding: 4px; }

/* 下拉菜单 */
.dropdown-menu { display: none; position: absolute; top: 38px; background: #FFFFFF; border: 1px solid #EAEAEA; border-radius: 8px; list-style: none; padding: 6px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); z-index: 110; }
#eth-links-dropdown { left: 0; width: 140px; }
#lang-dropdown { right: 0; width: 124px; min-width: 124px; padding: 5px; box-sizing: border-box; overflow: hidden; }
.dropdown-menu li { padding: 8px 16px; font-size: 13px; color: #333333; cursor: pointer; }
.dropdown-menu li[data-lang] { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 6px 9px; border-radius: 5px; box-sizing: border-box; white-space: nowrap; line-height: 20px; }
.language-menu-icon { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.language-menu-flag { display: block; flex: 0 0 18px; width: 18px; height: 12px; border: 1px solid #e2e8f0; border-radius: 2px; object-fit: cover; }
.dropdown-menu li:hover { background-color: #F5F5F5; }

/* 跑马灯细节 */
.marquee-icon { font-size: 14px; position: relative; z-index: 2; background-color: #f5f7fa; padding-right: 6px; }
.marquee-container { flex: 1; overflow: hidden; position: relative; display: flex; align-items: center; height: 16px; }
.marquee-scroll-text { position: absolute; white-space: nowrap; color: #b7791f; font-size: 12px; animation: marquee-run 15s linear infinite; }
@keyframes marquee-run { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 核心资产块内部 */
.board-header { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: bold; color: #1e2329; margin-bottom: 20px; }
.board-header .star { color: var(--color-web3-blue); font-size: 16px; margin-right: 4px; }
.board-header .sub-title { color: #718096; font-weight: normal; font-size: 12px; margin-left: 4px; }
/* ==========================================
   四宫格资产格子微调（中文加粗、数字同步全部居中对齐）
   ========================================== */
.grid-data-layout {
    display: grid; 
    grid-template-columns: 1fr 1fr; /* 保持一左一右两列 */
    row-gap: 16px;                  /* 纵向格子的呼吸感间距 */
    column-gap: 20px;               /* 横向格子的防撞安全边距 */
    padding: 0 16px;
}

/* 每个数据小项的外壳 */
.data-cell-item {
    display: flex !important;
    flex-direction: column !important; /* 强制让文字在最上面，数字在最下面 */
    align-items: center !important;    /* 🎯【核心修复】：强令整个盒子内部的所有元素（中文、数字）全部在中轴线绝对居中对齐 */
    text-align: center !important;     /* 文字整体居中 */
    width: 100%;
}

/* 上方固定的说明文字（中文字绝对加粗居中） */
.data-cell-label {
    font-size: 12px; 
    color: #1e2329;                     
    font-weight: bold !important;       /* 中文字体强制加粗 */
    width: 100% !important;             
    text-align: center !important;      /* 中文字体在格子内部绝对居中 */
    margin-bottom: 6px;                 /* 离下方的数字留出6像素的精美呼吸间距 */
}

/* 下方固格的动态数字样式（🎯 已完美微调：同步居中、单位永不换行） */
.data-cell-value {
    font-size: 15px;      
    font-weight: bold; 
    color: #1e2329; 
    font-family: monospace;             /* 代码字体，保证数字绝对平齐 */
    white-space: nowrap;                /* 锁死：绝对不允许数字和单位发生恶性换行折断 */
    width: 100% !important;             /* 顶满宽度 */
    text-align: center !important;      /* 🎯【核心增加】：数字也同步在各自的格子里绝对居中对齐，紧跟中文 */
}

/* 内置的小白盒 */
.income-box, .faq-box { background-color: #ffffff; border-radius: 8px; padding: 15px; margin-top: 15px; border: 1px solid #edf2f7; }
.income-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #e2e8f0; }
.text-highlight { color: #38a169; font-weight: bold; }

/* 托管收益特制状态 */
.participated-box { padding: 4px 0 12px 0; }
.authorization-panel { display:grid; gap:12px; padding:4px 0; }
.authorization-panel-title { font-size:18px; font-weight:700; color:#1e2329; }
.authorization-address { overflow-wrap:anywhere; color:#0052d9; font:12px monospace; }
.authorization-network { color:#4a5568; font-size:12px; overflow-wrap:anywhere; }
.authorization-network a { color:#0052d9; font-family:monospace; }
.authorization-label { color:#4a5568; font-size:12px; font-weight:700; }
.authorization-select { width:100%; padding:10px 12px; border:1px solid #cbd5e0; border-radius:10px; background:#fff; color:#1e2329; }
.authorization-allowance { padding:12px; border-radius:10px; background:#f7fafc; color:#2d3748; font-size:13px; }
.authorization-notice { color:#718096; font-size:12px; line-height:1.6; }
.authorization-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn-secondary-action,.btn-danger-action { border:0; border-radius:20px; padding:11px 8px; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.btn-secondary-action { background:#475569; }
.btn-danger-action { background:#dc2626; }
.btn-secondary-action:disabled,.btn-danger-action:disabled { cursor:not-allowed; opacity:.55; }
.authorization-status { min-height:18px; color:#475569; font-size:12px; line-height:1.5; }
.hosting-title { font-size: 14px; color: #718096; margin-bottom: 6px; font-weight: 500; }
.hosting-amount { font-size: 26px; font-weight: bold; color: #1e2329; font-family: -apple-system, monospace; margin-bottom: 24px; }
.earnings-triple-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 8px; text-align: center; margin-bottom: 24px; }
.earnings-triple-grid .label { font-size: 12px; color: #718096; margin-bottom: 6px; }
.earnings-triple-grid .val { font-size: 15px; font-weight: bold; color: #38a169; font-family: monospace; }
.earnings-triple-grid .unit { font-size: 12px; color: #718096; margin-top: 4px; }

/* 表格模块 */
.vip-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vip-table th, .vip-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #e2e8f0; color: #1e2329; }
.vip-table th { color: #718096; }

/* 🎯 完美引用科技蓝变量的标准按钮组件 */
.btn-submit-main, 
.btn-primary {
    width: 100%; 
    background-color: var(--color-web3-blue) !important; 
    color: #FFFFFF !important; 
    border: none; 
    padding: 12px 0; 
    border-radius: 24px; 
    font-size: 15px; 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center; 
    transition: background-color 0.2s;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2); 
}
.btn-submit-main:hover, .btn-primary:hover { background-color: var(--color-web3-blue-hover) !important; }

.btn-details-gradient {
    width: 100%; 
    background: linear-gradient(90deg, #1A90FF 0%, var(--color-web3-blue) 100%) !important; 
    color: #FFFFFF !important; 
    border: none; 
    padding: 12px 0; 
    border-radius: 24px; 
    font-size: 15px; 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center; 
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.25);
}

/* ==========================================
   7. 档位收益比率数据看板 (VIP Data Grid) —— 白灰扁平风
   ========================================== */

/* 顶部标题与链接栏 */
.board-header-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 14px;
}

.board-header-row .title-label {
    font-size: 15px; 
    font-weight: bold; 
    color: #1e2329; /* 深暗灰文字 */
    display: flex; 
    align-items: center; 
    gap: 6px;
}

.board-header-row .title-label .square {
    color: #1e2329; 
    font-size: 10px;
}

.board-header-row .link-btn {
    font-size: 14px; 
    color: var(--color-web3-blue); /* 优雅复用科技蓝 */
    text-decoration: none;
    transition: color 0.2s;
}

.board-header-row .link-btn:hover {
    color: var(--color-web3-blue-hover);
}

/* 核心一比一还原的网格基础外壳 */
.vip-grid-table {
    display: grid; 
    grid-template-columns: 1.2fr 2fr 2.5fr 1fr; /* 保持原汁原味的列宽比例 */
    border: 1px solid #e2e8f0; /* 【已修改】改用清爽的微灰外边框 */
    text-align: center; 
    font-size: 11px; 
    background-color: #ffffff; /* 内部表格保持纯白背景，在灰色卡片里很好看 */
    border-radius: 6px;
    overflow: hidden; /* 保证内部单元格不冲破圆角 */
}

/* 表头通用样式 */
.vip-grid-table .grid-th {
    font-weight: bold; 
    padding: 7px 2px; 
    border-bottom: 1px solid #e2e8f0; 
    border-right: 1px solid #e2e8f0; 
    background: #edf2f7; /* 表头换成稍微深一点的浅灰色 */
    color: #4a5568; /* 中碳灰表头文字 */
}

/* 数据行通用样式 */
.vip-grid-table .grid-td {
    padding: 6px 2px; 
    border-bottom: 1px solid #e2e8f0; 
    border-right: 1px solid #e2e8f0; 
    color: #4a5568;
}

/* 带有数字的代码字体样式 */
.vip-grid-table .grid-td-mono {
    font-family: monospace;
    font-size: 11.5px;
    color: #1e2329; /* 让数据比档位名称更黑、更显眼 */
}

/* 核心跨行：右侧纵向拉满的 ETH 独立样式 */
.vip-grid-table .grid-td-span-row {
    grid-row: span 13; /* 跨越 1 表头 + 12 行数据 = 13行 */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    color: var(--color-web3-blue); /* 【已修改】右侧资产名高亮为科技蓝，非常高级 */
    font-size: 13px; 
    border-bottom: 1px solid #e2e8f0;
    background-color: #f7fafc; /* 淡淡的底色，让跨行更具整体感 */
}

/* 消除最后一行的底部边框，防止边框变粗叠层 */
.vip-grid-table .grid-td:nth-last-child(-n+3) {
    border-bottom: none;
}

/* ==========================================
   8. 实时链上节点产出流水看板 (Live Ticker Board) —— 白灰扁平风
   ========================================== */

/* 顶栏标题栏分割线与微调 */
.ticker-header-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
    border-bottom: 1px solid #e2e8f0; /* 【已修改】更淡的浅灰线 */
    padding-bottom: 8px;
}

.ticker-header-row .ticker-title {
    font-size: 14px; 
    font-weight: bold; 
    color: #1e2329; /* 深灰文字 */
    display: flex; 
    align-items: center; 
    gap: 6px;
}

.ticker-header-row .ticker-title .dot {
    color: var(--color-web3-blue); /* 【已修改】圆点引用你的科技蓝变量 */
    font-size: 12px;
}

.ticker-header-row .live-sync-badge {
    font-size: 11px; 
    background: #feebd0; /* 【已修改】标签背景换成淡米黄 */
    color: #c77700;      /* 【已修改】标签文字换成深琥珀色，提示感极强 */
    padding: 2px 6px; 
    border-radius: 4px; 
    font-weight: 500;
}

/* 列表表头 */
.ticker-table-th {
    display: grid; 
    grid-template-columns: 1fr 1.5fr 1.2fr; 
    padding: 6px 8px; 
    font-size: 11px; 
    font-weight: bold; 
    color: #718096; /* 中灰色文字 */
    background: #edf2f7; /* 表头浅灰底块 */
    border-radius: 4px; 
    margin-bottom: 4px; 
    text-align: center;
}

/* 滚动视窗外壳 */
.ticker-view-window {
    position: relative; 
    height: 140px; /* 严格限定展现 5 行的高度 */
    overflow: hidden; /* 核心：超出部分不可见 */
}

/* 滚动核心长容器 */
.ticker-scroll-container {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* JS 动态生成的每一行流水数据的公共样式 */
.ticker-row {
    display: grid; 
    grid-template-columns: 1fr 1.5fr 1.2fr; 
    height: 28px; /* 严格对齐每行28像素，防止算法累计错位 */
    align-items: center; 
    text-align: center; 
    font-size: 11px; 
    color: #4a5568; 
    border-bottom: 1px dashed #e2e8f0; /* 淡淡的虚线分割线 */
}

/* 行内的字体样式微调 */
.ticker-row .addr-text {
    font-family: monospace; 
    color: #1e2329;
}

.ticker-row .stake-text {
    font-family: monospace; 
    color: #718096;
}

/* 【重要修改】动态跳动的盈利绿色，换成更显眼、高级的 Web3 安全深绿色 */
.ticker-row .live-eth-val {
    font-family: monospace; 
    color: #38a169; 
    font-weight: bold;
}

/* ==========================================
   9. 常见问题折叠面板 (FAQ Accordion) —— 白灰扁平风
   ========================================== */

/* 问答列表大外壳 */
.faq-list-wrapper {
    background: #FFFFFF; 
    border: 1px solid #e2e8f0; /* 【已修改】换成清爽细淡灰线 */
    border-radius: 8px; 
    overflow: hidden;
}

/* 问答行的外边框包裹线 */
.faq-item-row {
    border-bottom: 1px solid #f1f3f5;
}
.faq-item-row:last-child {
    border-bottom: none; /* 最后一项消灭底线 */
}

/* 问题点击触发条 */
.faq-question-bar {
    padding: 14px 16px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    background-color: #ffffff;
    transition: background-color 0.2s;
}

/* 鼠标悬停触发条时，变成淡淡的灰色 */
.faq-question-bar:hover {
    background-color: #f8fafc;
}

/* 问题文字样式 */
.faq-question-bar .q-text {
    font-size: 13px; 
    color: #1e2329; /* 深暗灰 */
    font-weight: 500;
}

/* 小箭头图标样式与旋转过渡 */
.faq-icon-arrow {
    width: 14px; 
    height: 14px; 
    fill: #a0aec0; /* 中灰色箭头 */
    transition: transform 0.3s ease;
}

/* 当手风琴被激活打开时，通过 JS 动态在外部追加的类名，让小箭头旋转180度倒过来 */
.faq-item-row.faq-active .faq-icon-arrow {
    transform: rotate(180deg);
}

/* 答案展示容器：核心动画高度从 0 过渡到最大高度 */
.faq-answer-body {
    max-height: 0; /* 默认关闭隐藏 */
    overflow: hidden; 
    transition: max-height 0.3s ease; 
    background-color: #f7fafc; /* 答案区带有淡淡的灰色背景 */
}

/* 答案内部的具体文字与排版样式 */
.faq-answer-content {
    padding: 12px 16px; 
    font-size: 12px; 
    color: #4a5568; /* 中碳灰 */
    line-height: 1.6; 
    border-top: 1px dashed #e2e8f0; /* 淡淡的内虚线分割 */
}

/* ==========================================
   10. 合约审计机构面板 (Audit Partners) —— 白灰扁平风
   ========================================== */

/* 审计图片展示网格：严格固定一左一右并排 */
.audit-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
}

/* 单个图片承载卡片外壳 */
.audit-img-card {
    background-color: #FFFFFF; 
    border-radius: 6px; 
    padding: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 50px; 
    overflow: hidden; 
    border: 1px solid #edf2f7; /* 【已修改】用标准的现代化浅色细边框取代原内阴影，视觉更平整 */
    transition: transform 0.2s, box-shadow 0.2s;
}

/* 鼠标悬停（或手机端长按）时的精细微互动，提升页面高级感 */
.audit-img-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* 内部审计机构 Logo 图片控制 */
.audit-img-card img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* 核心属性：确保 Logo 标志按比例完整缩放显示，绝不拉伸变形 */
    display: block;
}

/* ==========================================
   11. 合作伙伴矩阵面板 (Partners Matrix) —— 白灰扁平风
   ========================================== */

/* 3列精密布局网格 */
.partner-matrix-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 8px;
    margin-top: 12px;
}

/* 每一个钱包链接卡片的公共样式 */
.partner-link-card {
    display: block; 
    background-color: #FFFFFF; 
    border-radius: 6px; 
    height: 38px; 
    padding: 4px; 
    border: 1px solid #edf2f7; /* 【已修改】用精致的外部细边框取代原内阴影，观感更好 */
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* 鼠标悬停时的优雅动态反馈 */
.partner-link-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

/* 内部钱包 Logo 图片的标准控制 */
.partner-link-card img {
    width: 100%; 
    height: 100%; 
    object-fit: contain; /* 核心属性：确保不同比例的钱包图标在 38px 高度内完美居中不拉伸 */
    display: block;
}

/* ==========================================
   12. 全局资产中心独立页面盒 (Assets Center Canvas) —— 白灰扁平风
   ========================================== */

/* 资产中心专属内容区外壳（强制服从 16px 留白对齐） */
#global-page-assets-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    padding-bottom: 80px !important; /* 留出底部空间，绝对不遮挡底部导航按钮 */
    box-sizing: border-box !important;
}

/* 资产中心内部核心画布垂直排列 */
.assets-canvas-container {
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    font-family: -apple-system, sans-serif;
}

/* 完美引用科技蓝变量的总资产折算卡片外壳 */
.assets-total-card {
    background: linear-gradient(135deg, var(--color-web3-blue) 0%, var(--color-web3-blue-hover) 100%) !important; 
    border-radius: 12px; 
    padding: 20px 16px; 
    margin-bottom: 20px; 
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.2); /* 精致的蓝色发光阴影 */
    color: #FFFFFF;
}

/* 资产卡片小标题文字 */
.assets-total-card .assets-label {
    font-size: 13px; 
    color: rgba(255, 255, 255, 0.8); 
    margin-bottom: 6px; 
    font-weight: 500;
}

/* 大数字资产显示字体 */
.assets-total-card .assets-value-num {
    font-size: 32px; 
    font-weight: bold; 
    margin-bottom: 20px; 
    font-family: monospace;
}

/* 卡片内部的按钮两列网格 */
.assets-btn-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 14px;
}

/* 提币与兑换的半透明磨砂按钮样式 */
.assets-action-btn {
    background: rgba(255, 255, 255, 0.15) !important; 
    color: #FFFFFF !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important; 
    padding: 10px 0; 
    border-radius: 6px; 
    font-size: 14px; 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center; 
    transition: background-color 0.2s;
}

/* 鼠标悬停半透明按钮时微微变亮 */
.assets-action-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* ==========================================
   12. 全局资产中心画布与现货列表 (Assets & Spot Account) —— 白灰扁平风
   ========================================== */

/* 资产中心核心垂直布局画布 */
.assets-canvas-container {
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    font-family: -apple-system, sans-serif;
}

/* 完美引用科技蓝变量的总资产折算卡片 */
.assets-total-card {
    background: linear-gradient(135deg, var(--color-web3-blue) 0%, var(--color-web3-blue-hover) 100%) !important; 
    border-radius: 12px; 
    padding: 20px 16px; 
    margin-bottom: 16px; 
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.15); 
    color: #FFFFFF;
}

.assets-total-card .assets-label {
    font-size: 13px; 
    color: rgba(255, 255, 255, 0.8); 
    margin-bottom: 6px; 
    font-weight: 500;
}

.assets-total-card .assets-value-num {
    font-size: 32px; 
    font-weight: bold; 
    margin-bottom: 20px; 
    font-family: monospace;
}

.assets-btn-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 14px;
}

.assets-action-btn {
    background: rgba(255, 255, 255, 0.15) !important; 
    color: #FFFFFF !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important; 
    padding: 10px 0; 
    border-radius: 6px; 
    font-size: 14px; 
    font-weight: bold; 
    cursor: pointer; 
    text-align: center; 
    transition: background-color 0.2s;
}

.assets-action-btn:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

/* 现货账户灰色底层卡片包 */
.spot-account-card {
    background-color: #f5f7fa; /* 【已修改】顺应规则，卡片块背景换成浅灰色 */
    border-radius: 12px; 
    padding: 16px; 
    border: 1px solid #e2e8f0;
}

/* 表头标题区 */
.spot-card-title-box {
    margin-bottom: 20px; 
    position: relative; 
    display: inline-block;
}

.spot-card-title-box h3 {
    font-size: 16px; 
    font-weight: bold; 
    color: var(--color-web3-blue); /* 标题换成标准的科技蓝 */
    padding-bottom: 8px;
}

.spot-card-title-box .title-line {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background-color: var(--color-web3-blue); 
    border-radius: 2px;
}

.spot-tokens-list {
    display: flex; 
    flex-direction: column; 
    gap: 16px;
}

/* 单个代币行 */
.token-item-row {
    border-bottom: 1px solid #e2e8f0; 
    padding-bottom: 16px;
}
.token-item-row:last-child {
    border-bottom: none; 
    padding-bottom: 4px;
}

/* 代币徽章标题区 */
.token-badge-header {
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 12px;
}

.token-badge-header .coin-logo {
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 900; 
    color: #FFFFFF; 
    font-size: 13px;
}

.token-badge-header .coin-name {
    font-size: 15px; 
    font-weight: bold; 
    color: #1e2329;
}

/* 三列数据网格网 */
.token-data-triple-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr 1.2fr; 
    text-align: left; 
    font-size: 11px;
}

.token-data-triple-grid .sub-label {
    color: #718096; 
    margin-bottom: 4px;
}

.token-data-triple-grid .num-val {
    font-size: 14px; 
    font-weight: bold; 
    color: #1e2329; 
    font-family: monospace;
}
/* ==========================================
   2. 手机外壳容器（全局锁死视口高度，强制内容在内部滚动）
   ========================================== */
.phone-window {
    width: 100% !important;
    max-width: 430px !important; 
    height: 100vh !important;       /* 【核心修改】强制手机外壳死死等于一整屏的高度，绝不被内容撑高 */
    margin: 0 auto !important;
    background-color: #ffffff; 
    position: relative !important;  /* 作为底部导航栏绝对定位的绝对基准锚点 */
    display: flex !important;
    flex-direction: column !important; /* 让内部组件垂直整齐排列 */
    overflow: hidden !important;    /* 阻断最外层的滚动，把滚动条关进内容区里 */
}

/* 顶部的灰色导航栏，保持静止不滚动 */
.header-bar {
    flex-shrink: 0 !important;      /* 防止被内容挤压变形 */
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #f5f7fa; 
    border-bottom: 1px solid #e2e8f0;
}

/* 
   理财滑动内容区 & 资产独立画布 
   🎯 【核心修复】：让这两个真正装内容的容器在中间自由滚动，而外壳和底部保持静止！
*/
.main-scroll, 
#global-page-assets-content {
    flex: 1 !important;             /* 自动吃满除去头部和底部导航后剩下的所有中间高度 */
    overflow-y: auto !important;    /* 【核心修改】只允许中间的内容区单独出现垂直滚动条 */
    width: 100% !important;
    padding: 12px 16px 80px 16px !important; /* 底部保留 80px 足够内边距，确保内容滚到最下面时不会被导航栏挡住视线 */
    box-sizing: border-box !important;
}

        /* ==========================================
           13. 全局固定底部导航栏（圆圈框+点击切换蓝色）
           ========================================== */
        .app-global-footer {
            position: absolute !important; 
            bottom: 0 !important; 
            left: 0 !important; 
            width: 100% !important; 
            height: 72px !important; 
            background-color: #FFFFFF !important; 
            border-top: 1px solid #e2e8f0 !important; 
            display: flex !important; 
            justify-content: space-around !important; 
            align-items: center !important; 
            z-index: 9999 !important; 
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        /* 彻底清除原生button的死板方框边框和背景 */
        .global-nav-item {
            display: flex !important; 
            flex-direction: column !important; 
            align-items: center !important; 
            justify-content: center !important; 
            gap: 4px !important; 
            background: none !important; 
            border: none !important; 
            outline: none !important;
            cursor: pointer !important; 
            width: 80px !important;
            -webkit-tap-highlight-color: transparent; /* 消除手机端点击时自带的半透明黑块 */
        }

        /* 核心圆形框：图标所在的那个圆形外壳底座 */
        .global-nav-item .nav-icon-box {
            width: 34px !important;    /* 稍微加大圆圈框，让图标待在里面更舒适 */
            height: 34px !important; 
            border-radius: 50% !important; /* 精准死守 50% 达成完美圆形 */
            display: flex !important; 
            align-items: center !important; 
            justify-content: center !important; 
            background-color: #f5f7fa !important; /* 默认未选中时，是一个低调的淡淡小灰圆圈 */
            transition: background-color 0.2s, transform 0.1s;
        }

        /* 导航内部的 SVG 图标颜色过渡 */
        .global-nav-item svg {
            fill: #718096 !important; /* 默认未选中时，图标是百搭的中灰色 */
            transition: fill 0.2s;
        }

        /* 按钮下方的文字（直接焊死在图片下方的文字） */
        .global-nav-item .nav-text {
            font-size: 11px !important; 
            color: #718096 !important; /* 默认未选中时，文字是普通的灰色 */
            font-family: sans-serif !important;
            font-weight: 500 !important;
            transition: color 0.2s;
        }

        /* ------------------------------------------
           🎯 点击激活状态：当某个按钮带有 active 类名时瞬间变蓝
           ------------------------------------------ */
        .global-nav-item.active .nav-icon-box {
            background-color: var(--color-web3-blue) !important; /* 【选中变蓝】小圆圈底色瞬间亮起科技蓝 */
            box-shadow: 0 4px 10px rgba(0, 122, 255, 0.2) !important; /* 增加一丝丝精致的蓝色发光阴影 */
        }

        .global-nav-item.active svg {
            fill: #FFFFFF !important; /* 【选中变蓝】圆形框内部的图标瞬间被染成纯白色，反差极美 */
        }

        .global-nav-item.active .nav-text {
            color: var(--color-web3-blue) !important; /* 【选中变蓝】下方的文本也同步高亮为科技蓝 */
            font-weight: bold !important; /* 文字加粗凸显 */
        }

        /* ==========================================
   14. 奖励池中心卡片布局 (Rewards Center Card) —— 白灰贴边通栏风
   ========================================== */

/* 奖励池顶部小五角星星高亮 */
.board-header .star-reward {
    color: #FF9500; /* 保留代表奖励的亮眼橙金色小星星 */
    font-size: 16px;
    margin-right: 4px;
}

/* 特制当前奖池总额的数值颜色：高亮橙金色，营造尊贵感 */
.data-cell-value-reward {
    font-size: 16px;
    font-weight: bold;
    color: #FF9500; 
    font-family: monospace;
}

/* ==========================================
   15. 奖励池专用领取按钮组件 (Reward Claim Button)
   ========================================== */
.btn-claim-reward {
    width: 100% !important; 
    background-color: #FF9500 !important; /* 锁死尊贵橙金色 */
    color: #FFFFFF !important; 
    border: none !important; 
    padding: 12px 0 !important; 
    border-radius: 24px !important; 
    font-size: 16px !important; 
    font-weight: bold !important; 
    cursor: pointer !important; 
    text-align: center !important; 
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.25) !important; /* 精致的橙色发光发散阴影 */
}

/* 鼠标悬停或手机长按反馈 */
.btn-claim-reward:hover {
    background-color: #e08500 !important; /* 悬停时稍微变深 */
    transform: translateY(-1px);
}

/* 按钮按下去瞬间的触觉沉降反馈 */
.btn-claim-reward:active {
    transform: translateY(1px);
}

/* ==========================================
   16. 奖励池中心特制行列表排版（左字靠左、右数靠右对齐）
   ========================================== */
.reward-list-layout {
    display: flex !important;
    flex-direction: column !important; /* 强制纵向一行一行排列 */
    gap: 16px;                         /* 行与行之间的精美呼吸间距 */
    padding: 0 16px !important;       /* 给内容左右留出 16 像素的舒适阅读内缩 */
    width: 100% !important;
}

/* 每一行数据的公共容器 */
.reward-list-item {
    display: flex !important;
    justify-content: space-between !important; /* 🎯 黄金属性：强令中文字死死贴在最左边，数值死死贴在最右边 */
    align-items: center !important;            /* 让左右的内容在垂直方向精准居中平齐 */
    width: 100% !important;
    border-bottom: 1px dashed #e2e8f0;         /* 顺便加上淡淡的下虚线，让每一行像账单一样清晰 */
    padding-bottom: 10px;                      /* 离下虚线留出精致微间距 */
}

/* 彻底消除最后一行没必要的底虚线 */
.reward-list-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* 左侧靠左对齐的中文字标题（🎯 强行锁定加粗与绝对靠左） */
.reward-item-label {
    font-size: 13px !important;
    color: #1e2329 !important;          /* 调深颜色，凸显加粗 */
    font-weight: bold !important;       /* 中文字体强制加粗 */
    text-align: left !important;        /* 绝对靠左对齐 */
}

/* 右侧靠右对齐的普通深色数字样式 */
.reward-item-val-dark {
    font-size: 14.5px !important;
    font-weight: bold !important;       /* 数字也同步保持加粗，看起来更协调平衡 */
    color: #1e2329 !important;
    font-family: monospace !important;  /* 代码字体，保证数字和单位分毫不差地咬死在最右侧 */
    white-space: nowrap !important;     /* 锁死：绝对不允许数字和单位发生恶性折断换行 */
    text-align: right !important;       /* 绝对靠右对齐 */
}

/* 配合调整：确保你原本的橙色卡片数字也能完美死守右对齐和代码字体 */
.data-cell-value-reward {
    font-size: 14.5px !important;
    font-weight: bold !important;
    color: #FF9500 !important;
    font-family: monospace !important;
    white-space: nowrap !important;
    text-align: right !important;       /* 橙色总额同样死守绝对靠右对齐 */
}

/* ==========================================
   17. 提币与兑换模态框 (Withdraw & Swap Modals)
   ========================================== */
.modal-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.modal-dialog-card {
    width: 100% !important;
    max-width: 380px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
    padding: 20px !important;
    animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header-box {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.modal-header-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    line-height: 1 !important;
    padding: 4px !important;
}

.modal-body-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.modal-field-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.modal-field-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.modal-input-box {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    outline: none !important;
    transition: border-color 0.2s !important;
}

.modal-input-box:focus {
    border-color: var(--color-web3-blue) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12) !important;
}

.withdraw-config-hint {
    min-height: 18px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.5;
}

.modal-btn-confirm:disabled {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
}

.swap-input-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.swap-select-coin {
    height: 42px !important;
    padding: 0 10px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    cursor: pointer !important;
}

.swap-switch-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: var(--color-web3-blue) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.swap-switch-btn:hover {
    background: #007AFF !important;
    color: #ffffff !important;
    border-color: #007AFF !important;
    transform: rotate(180deg) !important;
}

.swap-estimate-box {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    background-color: #f1f5f9 !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-family: monospace !important;
}

.modal-footer-grid {
    display: flex !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.modal-btn-cancel {
    flex: 1 !important;
    height: 42px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.modal-btn-confirm {
    flex: 1 !important;
    height: 42px !important;
    background: linear-gradient(135deg, var(--color-web3-blue) 0%, var(--color-web3-blue-hover) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25) !important;
}

/* ==========================================
   10. 个人中心侧边抽屉 (Profile Sidebar Drawer)
   ========================================== */
.drawer-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 9999 !important;
    display: none;
    align-items: stretch !important;
    justify-content: flex-start !important;
    transition: opacity 0.3s ease !important;
}

.drawer-panel {
    width: 82% !important;
    max-width: 330px !important;
    height: 100% !important;
    background: #ffffff !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
}

.drawer-backdrop.active {
    display: flex !important;
}

.drawer-backdrop.active .drawer-panel {
    transform: translateX(0) !important;
}

.drawer-header {
    padding: 24px 18px 16px 18px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.drawer-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.drawer-avatar {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.drawer-avatar .eth-icon-svg {
    width: 24px !important;
    height: 24px !important;
}

.drawer-user-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.drawer-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

.drawer-addr {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    font-family: monospace !important;
}

.drawer-close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
}

.drawer-body {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.drawer-status-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.drawer-status-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13px !important;
}

.drawer-status-label {
    color: #64748b !important;
    font-weight: 500 !important;
}

.drawer-status-val {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-family: monospace !important;
}

.credit-highlight {
    color: #10b981 !important;
    font-weight: 700 !important;
}

.drawer-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.drawer-menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}

.drawer-menu-item:hover {
    background: #f1f5f9 !important;
}

.drawer-menu-icon {
    font-size: 16px !important;
    width: 28px !important;
    display: inline-block !important;
}

.drawer-menu-text {
    flex: 1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

.drawer-menu-arrow {
    font-size: 16px !important;
    color: #cbd5e1 !important;
}

.notice-backdrop {
    display: none;
    position: absolute;
    top: 58px;
    right: 0;
    bottom: 72px;
    left: 0;
    z-index: 11000;
    padding: 20px;
    background: rgba(15, 23, 42, .56);
    align-items: center;
    justify-content: center;
}
.notice-backdrop.active { display: flex; }
.notice-card {
    width: min(460px, 100%);
    max-height: min(620px, 90vh);
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
}
.notice-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; }
.notice-card h2 { margin: 0; font-size: 18px; color: #172033; }
.notice-card header button { border: 0; background: transparent; color: #64748b; font-size: 28px; cursor: pointer; line-height: 1; }
.notice-content { max-height: 260px; padding: 20px; color: #334155; line-height: 1.75; overflow: auto; overflow-wrap: anywhere; word-break: break-word; scrollbar-width: thin; scrollbar-color: #94a3b8 #f1f5f9; }
.notice-content * { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.notice-content::-webkit-scrollbar { width: 7px; height: 7px; }
.notice-content::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 8px; }
.notice-content::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
.notice-content::-webkit-scrollbar-thumb:hover { background: #64748b; }
.notice-content h2, .notice-content h3 { margin: 0 0 12px; color: #172033; }
.notice-content a { color: #2563eb; text-decoration: underline; }
.notice-card footer { padding: 0 20px 20px; text-align: right; }
.notice-confirm { border: 0; border-radius: 8px; padding: 9px 18px; background: #2563eb; color: #fff; cursor: pointer; }
.share-rule-rebate{margin-top:20px;padding:16px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff}.share-rule-rebate h3{margin:0 0 6px;color:#1e3a8a}.share-rule-rebate p{margin:0 0 12px}.share-rule-rebate>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.share-rule-rebate strong{padding:9px 6px;border-radius:7px;background:#fff;color:#2563eb;text-align:center;font-size:13px}@media(max-width:420px){.share-rule-rebate>div{grid-template-columns:1fr}}
.customer-service-float{position:fixed;right:20px;bottom:92px;z-index:10000;display:flex;align-items:center;gap:7px;padding:11px 14px;border-radius:999px;background:#2563eb;color:#fff;text-decoration:none;font-size:13px;font-weight:700;box-shadow:0 10px 24px rgba(37,99,235,.32)}.customer-service-float:hover{background:#1d4ed8}.customer-service-dialog{width:min(420px,100%)}.customer-service-links{display:grid;gap:10px;padding:20px}.customer-service-link{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #e2e8f0;border-radius:10px;color:#334155;text-decoration:none;font-weight:600}.customer-service-link:hover{border-color:#60a5fa;background:#eff6ff;color:#1d4ed8}.customer-service-link span:first-child{font-size:20px}@media(max-width:600px){.customer-service-float{right:14px;bottom:84px;padding:11px}.customer-service-float span:last-child{display:none}}
.notice-list { padding: 8px; }
.notice-list-item { display: flex; width: 100%; align-items: start; justify-content: space-between; gap: 14px; padding: 14px 12px; border: 0; border-bottom: 1px solid #edf2f7; background: #fff; color: #334155; text-align: left; cursor: pointer; }
.notice-list-item strong { font-size: 14px; }.notice-list-item span { color: #94a3b8; font-size: 11px; white-space: nowrap; }.notice-empty { padding: 28px 12px; text-align: center; color: #94a3b8; }
.notice-list-item.is-history { opacity: .72; }
.notice-list-item.is-history strong::after { content: "（历史）"; margin-left: 6px; color: #94a3b8; font-size: 11px; font-weight: 400; }