/* base.html 抽出的全站样式（原内联 <style>，见 assets.py 的版本号机制）。
   页面私有样式仍走 base.html 的 {% block extra_style %}。 */
    /* ── CSS 变量 (IBKR 风格) ─────────────────────── */
    :root {
        --primary:   #1976d2;     /* IBKR 蓝 */
        --primary-h: #1565c0;
        --primary-lt:#e3f2fd;
        --accent:    #d32f2f;     /* 红 (跌) */
        --danger:    #d32f2f;
        --danger-h:  #b71c1c;
        --success:   #2e7d32;     /* 绿 (涨) */
        --success-h: #1b5e20;
        --warn:      #ed6c02;
        --gray:      #6c757d;
        --gray-h:    #5a6268;
        /* 语义文字色(浅色=深色调保证白底对比度;深色主题覆盖为亮色调) */
        --pos-t:     #15803d;     /* 盈利/上涨/成功 文字 */
        --neg-t:     #dc2626;     /* 亏损/下跌/危险 文字 */
        --warn-t:    #b45309;     /* 警示/延迟 文字 */
        --info-t:    #2563eb;     /* 信息/链接强调 文字 */
        --topbar-bg: #1a1a1a;     /* 顶部黑条 */
        --topbar-text: #d1d5db;
        --brand-bg:  #ffffff;     /* 品牌+导航行白底 */
        --brand-border: #e0e0e0;
        --bg:        #f5f5f7;     /* 页面背景浅灰 */
        --card-bg:   #ffffff;
        --border:    #e0e0e0;
        --text:      #212529;
        --text-sub:  #5a5f68;     /* 提升对比度至 WCAG AA 5.2:1 */
        --radius:    8px;          /* 现代精致版 IBKR:更柔和圆角 */
        --radius-sm: 6px;
        --radius-lg: 14px;
        --radius-pill: 999px;
        --shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
        --shadow-md: 0 4px 16px rgba(16,24,40,.08);
        --shadow-lg: 0 12px 32px rgba(16,24,40,.12);
        --bottomnav-h: 58px;
        /* 安全区(刘海/底部 home 指示条) */
        --safe-top:    env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left:   env(safe-area-inset-left, 0px);
        --safe-right:  env(safe-area-inset-right, 0px);
    }

    /* ── 深色主题：data-theme="dark" 显式开启；prefers-color-scheme 自动检测 ── */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --bg:           #0f1115;
            --card-bg:      #161922;
            --border:       #2a2f3a;
            --brand-bg:     #161922;
            --brand-border: #2a2f3a;
            --text:         #e6e8ec;
            --text-sub:     #a0a4ae;
            --pos-t:        #4ade80;
            --neg-t:        #f87171;
            --warn-t:       #fbbf24;
            --info-t:       #60a5fa;
            --primary-lt:   rgba(25,118,210,.18);
            --shadow:       0 1px 3px rgba(0,0,0,.45);
            --shadow-md:    0 2px 8px rgba(0,0,0,.55);
            --input-bg:     #1b1f29;
            --stat-item-bg: #1e2330;
            --train-panel-bg: #1b1f29;
            --train-result-bg: #0f172a; --train-result-color: #e2e8f0;
            --tag-bg:       #1c2d3e; --tag-color: #38bdf8;
            --table-header-bg: #1b1f29;
            --table-border:    #232735;
            --table-hover-bg:  #1e2330;
            --code-bg:         #1e2330;
            --badge-bg:        #2a2f3a; --badge-color: #a0a4ae;
            --badge-admin-bg:   #3d1a1a; --badge-admin-color: #fca5a5;
            --badge-manager-bg:  #1a2d3d; --badge-manager-color: #93c5fd;
            --badge-trader-bg:   #1a3d2a; --badge-trader-color: #86efac;
            --badge-customer-bg: #232735; --badge-customer-color: #a0a4ae;
            --chip-entry-bg: #1a2d3d; --chip-entry-color: #93c5fd;
            --chip-holding-bg: #3d1a1a; --chip-holding-color: #fca5a5;
            --chip-exit-bg: #3d2d1a; --chip-exit-color: #fcd34d;
            --chip-default-bg: #232735; --chip-default-color: #cbd5e1;
            --chip-lowtf-bg: #123b36; --chip-lowtf-color: #5eead4;
            --chip-alive-bg: #1a3d2a; --chip-alive-color: #86efac;
            --chip-dead-bg: #3d1a1a; --chip-dead-color: #fca5a5;
            --badge-green-bg: #1a3d2a; --badge-green-color: #86efac;
            --badge-red-bg: #3d1a1a; --badge-red-color: #fca5a5;
            --badge-yellow-bg: #3d2d1a; --badge-yellow-color: #fcd34d;
            --badge-gray-bg: #232735; --badge-gray-color: #a0a4ae;
            --cm-tn-bg: #1a3d2a; --cm-fp-bg: #3d1a1a;
            --cm-fn-bg: #3d1a1a; --cm-tp-bg: #1a3d2a;
            --dec-immediate-bg: #1a2d3d; --dec-immediate-color: #93c5fd;
            --dec-delayed-bg: #3d2d1a; --dec-delayed-color: #fcd34d;
            --dec-alert-bg: #3d1a1a; --dec-alert-color: #fca5a5;
            --dec-pass-bg: #232735; --dec-pass-color: #a0a4ae;
            --row-valid-bg: #3d2d1a;
            --fi-track-bg: #232735;
        }
    }
    :root[data-theme="dark"] {
        --bg:           #0f1115;
        --card-bg:      #161922;
        --border:       #2a2f3a;
        --brand-bg:     #161922;
        --brand-border: #2a2f3a;
        --text:         #e6e8ec;
        --text-sub:     #a0a4ae;
        --pos-t:        #4ade80;
        --neg-t:        #f87171;
        --warn-t:       #fbbf24;
        --info-t:       #60a5fa;
        --primary-lt:   rgba(25,118,210,.18);
        --shadow:       0 1px 3px rgba(0,0,0,.45);
        --shadow-md:    0 2px 8px rgba(0,0,0,.55);
        --input-bg:     #1b1f29;
        --stat-item-bg: #1e2330;
        --train-panel-bg: #1b1f29;
        --train-result-bg: #0f172a; --train-result-color: #e2e8f0;
        --tag-bg:       #1c2d3e; --tag-color: #38bdf8;
        --table-header-bg: #1b1f29;
        --table-border:    #232735;
        --table-hover-bg:  #1e2330;
        --code-bg:         #1e2330;
        --badge-bg:        #2a2f3a; --badge-color: #a0a4ae;
        --badge-admin-bg:   #3d1a1a; --badge-admin-color: #fca5a5;
        --badge-manager-bg:  #1a2d3d; --badge-manager-color: #93c5fd;
        --badge-trader-bg:   #1a3d2a; --badge-trader-color: #86efac;
        --badge-customer-bg: #232735; --badge-customer-color: #a0a4ae;
        --chip-entry-bg: #1a2d3d; --chip-entry-color: #93c5fd;
        --chip-holding-bg: #3d1a1a; --chip-holding-color: #fca5a5;
        --chip-exit-bg: #3d2d1a; --chip-exit-color: #fcd34d;
        --chip-default-bg: #232735; --chip-default-color: #cbd5e1;
        --chip-lowtf-bg: #123b36; --chip-lowtf-color: #5eead4;
        --chip-alive-bg: #1a3d2a; --chip-alive-color: #86efac;
        --chip-dead-bg: #3d1a1a; --chip-dead-color: #fca5a5;
        --cm-tn-bg: #1a3d2a; --cm-fp-bg: #3d1a1a;
        --cm-fn-bg: #3d1a1a; --cm-tp-bg: #1a3d2a;
        --dec-immediate-bg: #1a2d3d; --dec-immediate-color: #93c5fd;
        --dec-delayed-bg: #3d2d1a; --dec-delayed-color: #fcd34d;
        --dec-alert-bg: #3d1a1a; --dec-alert-color: #fca5a5;
        --dec-pass-bg: #232735; --dec-pass-color: #a0a4ae;
        --row-valid-bg: #3d2d1a;
        --fi-track-bg: #232735;
    }
    :root[data-theme="dark"] tbody tr:nth-child(odd) td { background: #1b1f29; }
    :root[data-theme="dark"] tr:hover td { background: #232735; }
    :root[data-theme="dark"] th { background: #1b1f29; }
    :root[data-theme="dark"] input,
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea {
        background: #1b1f29; color: var(--text); border-color: var(--border);
    }
    :root[data-theme="dark"] .modal-box { background: #1b1f29; color: var(--text); }
    :root[data-theme="dark"] .btn-secondary { background: #1b1f29; color: var(--text); border-color: var(--border); }
    :root[data-theme="dark"] .btn-secondary:hover { background: #232735; }
    :root[data-theme="dark"] .back-btn { background: #1b1f29; color: var(--text); border-color: var(--border); }
    :root[data-theme="dark"] .topbar-nav { background: #1b1f29; }
    :root[data-theme="dark"] .badge-green { background: #1a3d2a; color: #86efac; }
    :root[data-theme="dark"] .badge-red { background: #3d1a1a; color: #fca5a5; }
    :root[data-theme="dark"] .badge-yellow { background: #3d2d1a; color: #fcd34d; }
    :root[data-theme="dark"] .badge-gray { background: #232735; color: #a0a4ae; }

    /* ── 三态统一组件：empty / loading / error 占位框 ── */
    .state-box {
        padding: 36px 20px; text-align: center; color: var(--text-sub); font-size: 13px;
        display: flex; flex-direction: column; align-items: center; gap: 10px;
    }
    .state-box .state-icon { font-size: 32px; line-height: 1; opacity: .55; }
    .state-box .state-title { font-size: 14px; font-weight: 600; color: var(--text); }
    .state-box .state-action { margin-top: 6px; }
    .skeleton {
        background: linear-gradient(90deg, var(--border) 25%, #efefef 50%, var(--border) 75%);
        background-size: 200% 100%; animation: skeleton 1.4s ease-in-out infinite;
        border-radius: 4px; min-height: 14px;
    }
    :root[data-theme="dark"] .skeleton {
        background: linear-gradient(90deg, #1f2230 25%, #2a2f3a 50%, #1f2230 75%);
        background-size: 200% 100%;
    }
    @keyframes skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    /* ── 重置 & 基础 ──────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
           background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }
    /* 数字 / 货币列保留等宽，便于扫读 */
    td, th, input[type="number"], .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

    /* 全局键盘 focus ring：替换 outline:none 带来的可达性回退 */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
    .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    /* ── 顶部黑条:仅 logo + 用户信息(IBKR 顶栏风格) ─── */
    .topbar {
        background: var(--topbar-bg); color: var(--topbar-text);
        padding: var(--safe-top) calc(24px + var(--safe-right)) 0 calc(24px + var(--safe-left));
        min-height: calc(44px + var(--safe-top)); height: auto;
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 100;
        gap: 12px; font-size: 13px;
    }
    .topbar-brand {
        font-weight: 700; font-size: 16px; text-decoration: none;
        color: #ffffff;
        white-space: nowrap; flex-shrink: 0;
        letter-spacing: -.01em;
    }
    .topbar-right { display: flex; align-items: center; gap: 14px; }
    .topbar-right .user-chip {
        color: rgba(255,255,255,.85); font-size: 12px; padding: 0 8px;
        border-left: 1px solid rgba(255,255,255,.15); padding-left: 12px;
    }
    .topbar-right a {
        color: rgba(255,255,255,.85); text-decoration: none;
        font-size: 12px; padding: 4px 10px; border-radius: 3px;
        transition: background .15s;
    }
    .topbar-right a:hover { background: rgba(255,255,255,.1); color: white; }
    .topbar-logout {
        background: var(--primary); color: #fff !important;
        padding: 5px 14px !important;
    }
    .topbar-logout:hover { background: var(--primary-h) !important; }

    /* ── 第二行白底品牌 + 主导航(IBKR 风) ───────────── */
    .navbar {
        background: var(--brand-bg);
        border-bottom: 1px solid var(--brand-border);
        padding: 0 24px;
        display: flex; align-items: center; gap: 32px;
        height: 56px;
        position: sticky; top: 44px; z-index: 99;
    }
    .navbar-logo {
        font-weight: 700; font-size: 18px; color: #00827f;
        text-decoration: none; flex-shrink: 0;
        display: inline-flex; align-items: flex-end; gap: 8px;
        line-height: 1; letter-spacing: -.02em;
    }
    .navbar-logo::before {
        content: ""; display: block;
        height: 1.1em; aspect-ratio: 775 / 1511;
        background: url('/static/icons/logo.png?v=9') center/contain no-repeat;
        flex-shrink: 0;
    }
    .topbar-nav {
        display: flex; gap: 0; flex-wrap: nowrap;
        overflow-x: auto; min-width: 0; flex: 1;
        scrollbar-width: none;
        height: 100%;
    }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-nav a {
        color: #4a5568; text-decoration: none;
        padding: 0 14px; font-size: 14px; font-weight: 500;
        white-space: nowrap; flex-shrink: 0;
        display: flex; align-items: center;
        border-bottom: 2px solid transparent;
        transition: color .15s, border-color .15s;
    }
    .topbar-nav a:hover { color: var(--primary); }
    .topbar-nav a.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }
    .topbar-toggle {
        display: none; background: transparent; border: none; color: var(--text);
        font-size: 22px; cursor: pointer; padding: 4px 10px; line-height: 1;
        border-radius: 4px;
    }
    .topbar-toggle:hover { background: rgba(0,0,0,.05); }

    /* ── 布局容器 ─────────────────────────────────── */
    .page-wrap { max-width: 1280px; margin: 0 auto; padding: 20px 24px; }
    .container  { max-width: 1280px; margin: 0 auto; }  /* 向后兼容 */

    h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 16px; color: var(--text); }
    h2 { font-size: 16px; font-weight: 600; color: var(--text); }

    /* ── 卡片 (IBKR 风:细边白底,极小圆角) ─────────── */
    .card {
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 20px 24px; margin-bottom: 16px;
    }
    .card h2 { font-size: 16px; margin-bottom: 14px; padding-bottom: 10px;
               border-bottom: 1px solid var(--border); font-weight: 600; }

    /* ── 按钮 (IBKR 风:扁平蓝、小圆角) ────────────── */
    .btn, button {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 16px; font-size: 13px; font-weight: 500;
        border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
        background: var(--primary); color: white; text-decoration: none;
        transition: background .15s, border-color .15s;
        white-space: nowrap; line-height: 1.4;
    }
    .btn:hover, button:hover { background: var(--primary-h); }
    .btn-danger,  button.btn-danger  { background: var(--danger); }
    .btn-danger:hover, button.btn-danger:hover { background: var(--danger-h); }
    .btn-success, button.btn-success { background: var(--success); }
    .btn-success:hover, button.btn-success:hover { background: var(--success-h); }
    .btn-secondary, button.btn-secondary {
        background: white; color: var(--text); border-color: var(--border);
    }
    .btn-secondary:hover, button.btn-secondary:hover {
        background: #f5f5f7; border-color: #c7c7c9;
    }
    .btn-sm { padding: 4px 10px; font-size: 12px; }
    .btn.disabled, button:disabled {
        background: #e9ecef !important; color: #adb5bd !important;
        border-color: #e9ecef !important;
        cursor: not-allowed; pointer-events: none;
    }
    /* 链接式按钮(IBKR 风的蓝字链接,如 Add/Edit Widgets) */
    .btn-link {
        background: transparent !important; color: var(--primary) !important;
        border: none !important; padding: 4px 6px !important;
        font-weight: 500;
    }
    .btn-link:hover { background: var(--primary-lt) !important; text-decoration: underline; }

    /* ── 返回按钮 ─────────────────────────────────── */
    .back-btn {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: 16px; padding: 5px 12px;
        background: white; color: var(--text); text-decoration: none;
        border: 1px solid var(--border);
        border-radius: var(--radius); font-size: 13px;
    }
    .back-btn:hover { background: #f5f5f7; border-color: #c7c7c9; }

    /* ── 表单元素 ─────────────────────────────────── */
    input, select, textarea {
        padding: 7px 10px; font-size: 13px;
        border: 1px solid var(--border); border-radius: var(--radius);
        background: white; color: var(--text);
        transition: border-color .15s, box-shadow .15s;
    }
    input:focus, select:focus, textarea:focus {
        outline: none; border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(25,118,210,.15);
    }
    label { display: block; font-weight: 500; margin-bottom: 4px; font-size: 13px; color: var(--text-sub); }

    /* ── 表格 (IBKR 风:细边、淡浅灰头、行 hover) ──── */
    .table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--card-bg);
    }
    table { width: 100%; border-collapse: collapse; background: var(--card-bg); }
    th, td { padding: 10px 14px; border-bottom: 1px solid var(--border);
             text-align: left; vertical-align: middle; font-size: 13px; }
    th { background: #fafafa; font-weight: 600;
         color: var(--text-sub); font-size: 12px;
         text-transform: none; letter-spacing: 0;
         border-bottom: 1px solid var(--border);
         position: sticky; top: 0; z-index: 5; }
    /* 隔行变色提升可读性 */
    tbody tr:nth-child(odd) td { background: #fbfbfd; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #f0f4f9; }

    /* ── Badge / 标签 (IBKR 风:小色块、字粗) ────── */
    .badge {
        display: inline-block; padding: 2px 8px; border-radius: 3px;
        font-size: 11px; font-weight: 600;
        letter-spacing: .02em;
    }
    .badge-green  { background: var(--badge-green-bg, #e6f4ea); color: var(--badge-green-color, #1e7e34); }
    .badge-red    { background: var(--badge-red-bg, #fdeaea); color: var(--badge-red-color, #c82333); }
    .badge-yellow { background: var(--badge-yellow-bg, #fff8e1); color: var(--badge-yellow-color, #c77700); }
    .badge-gray   { background: var(--badge-gray-bg, #f1f3f5); color: var(--badge-gray-color, #495057); }
    .badge-blue   { background: var(--primary-lt); color: var(--primary-h); }

    /* ── 涨/跌色文字(IBKR 风格表格里常用) ─────── */
    .pos { color: var(--pos-t, var(--success)); font-weight: 600; }
    .neg { color: var(--neg-t, var(--danger)); font-weight: 600; }

    /* ── Toast 通知 ───────────────────────────────── */
    /* 使用 calc 严格紧贴顶部黑条 + 白底导航之下 */
    #toast-container {
        position: fixed; top: calc(44px + 56px + 12px); right: 20px; z-index: 9999;
        display: flex; flex-direction: column; gap: 8px;
        pointer-events: none;
    }
    @media (max-width: 768px) {
        #toast-container { top: calc(40px + 50px + 12px); right: 12px; left: 12px; }
        .toast { max-width: none; }
    }
    .toast {
        min-width: 280px; max-width: 380px; padding: 11px 16px;
        border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.14);
        font-size: 13px; font-weight: 500; color: white;
        display: flex; align-items: center; gap: 10px;
        pointer-events: auto;
        animation: toast-in .25s ease;
    }
    .toast.fade-out { animation: toast-out .3s ease forwards; }
    .toast-success { background: var(--success); }
    .toast-error   { background: var(--danger); }
    .toast-info    { background: var(--primary); }
    .toast-warn    { background: var(--warn); }
    .toast-icon    { font-size: 18px; flex-shrink: 0; }
    .toast-close   { margin-left: auto; cursor: pointer; opacity: .8; font-size: 18px; }
    .toast-close:hover { opacity: 1; }
    @keyframes toast-in  { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
    @keyframes toast-out { from { opacity:1; transform:translateX(0); }  to { opacity:0; transform:translateX(40px); } }

    /* ── 确认弹窗 ─────────────────────────────────── */
    /* 全屏遮罩一律把 top/right/bottom/left 写全再跟 `inset`:简写要 Chrome 87+,
       旧 WebView(线上实测有 Chrome 80 的机器)整条丢弃 → 偏移全 auto → 遮罩缩成
       静态位置的小盒子,弹窗等于不出现。 */
    .modal-overlay {
        position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(0,0,0,.45);
        z-index: 8000; display: flex; align-items: center; justify-content: center;
        opacity: 0; pointer-events: none; transition: opacity .2s;
    }
    .modal-overlay.active { opacity: 1; pointer-events: auto; }
    .modal-box {
        background: white; border-radius: 12px; padding: 28px 32px;
        max-width: 420px; width: 90%; box-shadow: 0 20px 60px rgba(0,0,0,.25);
        transform: scale(.92); transition: transform .2s;
        max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    }
    .modal-overlay.active .modal-box { transform: scale(1); }
    .modal-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
    .modal-body  { color: var(--text-sub); font-size: 14px; margin-bottom: 22px; white-space: pre-line; }
    .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

    /* ── Loading 按钮 ─────────────────────────────── */
    .btn-loading { position: relative; color: transparent !important; pointer-events: none; }
    .btn-loading::after {
        content: "";
        position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; margin: auto;
        width: 16px; height: 16px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: white;
        border-radius: 50%;
        animation: spin .6s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── 响应式 ───────────────────────────────────── */
    @media (max-width: 1024px) {
        /* iPad / 小笔记本：导航溢出时显示汉堡菜单 */
        .topbar-toggle { display: inline-flex; align-items: center; justify-content: center; }
    }
    @media (max-width: 768px) {
        .topbar {
            padding: var(--safe-top) calc(14px + var(--safe-right)) 0 calc(14px + var(--safe-left));
            min-height: calc(48px + var(--safe-top));
        }
        .topbar-brand { font-size: 17px; }
        .topbar-right .user-chip { display: none; }
        /* 手机端用底部 Tab 栏替代白底导航行 */
        .navbar { display: none; }
        .page-wrap, .container { padding: 14px; }
        .card { padding: 16px; border-radius: var(--radius-lg); }
        h1 { font-size: 21px; margin-bottom: 14px; }
        h2 { font-size: 15px; }
        th, td { padding: 9px 11px; font-size: 12px; }
        /* 触控目标 ≥ 44px 满足 WCAG / iOS HIG */
        .btn, button { padding: 10px 14px; font-size: 13px; min-height: 44px; }
        .btn-sm, button.btn-sm { padding: 8px 12px; font-size: 12px; min-height: 40px; }
        /* 表格在窄屏可水平滚动并提示边缘 */
        .table-wrap { -webkit-overflow-scrolling: touch; box-shadow: inset -8px 0 8px -8px rgba(0,0,0,.12); }
        /* 给底部 Tab 栏让出空间 */
        body { padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); }
        #toast-container { top: calc(48px + var(--safe-top) + 10px); }
    }
    /* ── 手机端底部 Tab 栏(原生 App 风,JS 动态生成) ── */
    .bottom-nav {
        display: none;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
        height: calc(var(--bottomnav-h) + var(--safe-bottom));
        padding: 0 calc(var(--safe-left) + 4px) var(--safe-bottom) calc(var(--safe-right) + 4px);
        background: var(--card-bg);
        background: color-mix(in srgb, var(--card-bg) 88%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 16px rgba(16,24,40,.06);
    }
    .bottom-nav-inner { display: flex; width: 100%; align-items: stretch; }
    .bottom-nav a, .bottom-nav button {
        flex: 1 1 0; min-width: 0; background: transparent; border: none;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 7px 2px 4px; cursor: pointer; text-decoration: none;
        color: var(--text-sub); font-size: 10px; font-weight: 500; line-height: 1.1;
        min-height: var(--bottomnav-h); position: relative;
        transition: color .15s;
    }
    .bottom-nav a:hover, .bottom-nav button:hover { background: transparent; color: var(--primary); }
    .bottom-nav .bn-ico { width: 24px; height: 24px; display: block; }
    .bottom-nav .bn-ico svg { width: 24px; height: 24px; display: block; stroke-width: 1.9; }
    .bottom-nav .bn-label {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .bottom-nav a.active { color: var(--primary); }
    /* 未读徽标 */
    .nav-badge {
        display: inline-flex; min-width: 16px; height: 16px; padding: 0 5px;
        margin-left: 6px; background: var(--danger); color: #fff;
        border-radius: 999px; font-size: 10px; font-weight: 700;
        align-items: center; justify-content: center; line-height: 1; vertical-align: middle;
    }
    .bn-badge {
        position: absolute; top: 5px; left: 50%; margin-left: 4px;
        min-width: 15px; height: 15px; padding: 0 4px; background: var(--danger);
        color: #fff; border-radius: 999px; font-size: 9px; font-weight: 700;
        display: flex; align-items: center; justify-content: center; line-height: 1;
    }
    .more-grid a { position: relative; }
    .bottom-nav a.active::before {
        content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
    }

    /* ── “更多”底部抽屉 ── */
    .more-sheet-overlay {
        position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(16,24,40,.45);
        z-index: 7000; opacity: 0; pointer-events: none; transition: opacity .22s;
    }
    .more-sheet-overlay.active { opacity: 1; pointer-events: auto; }
    .more-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 7001;
        background: var(--card-bg);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-lg);
        padding: 8px 14px calc(18px + var(--safe-bottom));
        transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
        max-height: 78vh; overflow-y: auto;
    }
    .more-sheet-overlay.active .more-sheet { transform: translateY(0); }
    .more-sheet-handle {
        width: 38px; height: 4px; border-radius: 99px; background: var(--border);
        margin: 8px auto 14px;
    }
    .more-sheet-title { font-size: 13px; font-weight: 600; color: var(--text-sub); padding: 0 4px 8px; }
    .more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .more-grid a {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; padding: 14px 6px; text-decoration: none; color: var(--text);
        border-radius: var(--radius); font-size: 11px; font-weight: 500; text-align: center;
        min-height: 72px; transition: background .15s;
    }
    .more-grid a:hover, .more-grid a:active { background: var(--primary-lt); }
    .more-grid a.active { background: var(--primary-lt); color: var(--primary); }
    .more-grid .bn-ico svg { width: 24px; height: 24px; stroke-width: 1.9; }
    .more-grid .bn-label { line-height: 1.2; }

    @media (max-width: 768px) {
        .bottom-nav { display: block; }
    }

    /* 换页进度条:点击导航到新文档接管之间(跨境链路 1~3 秒)唯一的「在动」的东西。
       固定在最顶端、不吃点击;新文档一加载,这条自然随旧文档一起消失。 */
    #navProgress {
        position: fixed; top: 0; left: 0; height: 3px; width: 0;
        background: var(--primary); z-index: 9999; pointer-events: none;
        opacity: 0; border-radius: 0 2px 2px 0;
        box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 60%, transparent);
    }
    #navProgress.on { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.001ms !important;
            transition-duration: 0.001ms !important;
        }
    }

    /* ══════════════ App 版（原生壳 data-app="1"）专属布局 ══════════════ */
    /* 默认（网页版）隐藏 App 头部；网页版布局完全保持现状 */
    .app-header { display: none; }
    :root[data-app] .topbar { display: none; }   /* App 内不要网页版黑色顶栏 */
    :root[data-app] .navbar { display: none; }    /* App 内不要横向主导航（交给底部 Tab） */
    /* App 原生风格标题栏：单行 + 状态栏安全区 + 右侧菜单入口 */
    :root[data-app] .app-header {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        position: sticky; top: 0; z-index: 100;
        background: var(--card-bg);
        border-bottom: 1px solid var(--border);
        padding: calc(var(--safe-top) + 8px) calc(16px + var(--safe-right)) 8px calc(16px + var(--safe-left));
        min-height: calc(48px + var(--safe-top));
    }
    :root[data-app] .app-header-brand {
        font-size: 18px; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    :root[data-app] .app-header-menu {
        background: transparent; border: none; color: var(--text);
        font-size: 22px; line-height: 1; padding: 6px 8px; cursor: pointer;
        border-radius: var(--radius); flex-shrink: 0; min-height: 40px;
    }
    :root[data-app] .app-header-menu:hover { background: var(--primary-lt); }
    /* App 内底部 Tab 栏始终显示（不依赖 768 断点，平板壳也是 App 版） */
    :root[data-app] .bottom-nav { display: block; }
    :root[data-app] body { padding-bottom: calc(var(--bottomnav-h) + var(--safe-bottom)); }
    :root[data-app] .page-wrap, :root[data-app] .container { padding: 14px; }
    :root[data-app] #toast-container { top: calc(56px + var(--safe-top) + 10px); }
    /* App 版列表/卡片密度优化：更舒展的触控目标 */
    :root[data-app] .card { padding: 16px; border-radius: var(--radius-lg); margin-bottom: 14px; }
    :root[data-app] .btn, :root[data-app] button { min-height: 44px; }
    :root[data-app] .btn-sm, :root[data-app] button.btn-sm { min-height: 38px; }
    :root[data-app] th, :root[data-app] td { padding: 12px 12px; font-size: 13px; }
    /* “更多”抽屉里的账户操作区：仅 App 版显示（网页版这些在顶栏） */
    .app-actions { display: none; }
    :root[data-app] .app-actions { display: block; padding: 4px 4px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
    .app-actions .app-actions-user {
        font-size: 13px; color: var(--text-sub); padding: 4px 8px 10px; font-weight: 500;
    }
    .app-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .app-actions-grid a, .app-actions-grid button {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 6px; padding: 12px 6px; text-decoration: none; color: var(--text);
        background: var(--bg); border: 1px solid var(--border);
        border-radius: var(--radius); font-size: 12px; font-weight: 500; cursor: pointer;
        min-height: 64px; width: 100%;
    }
    .app-actions-grid a:hover, .app-actions-grid button:hover { background: var(--primary-lt); }
    .app-actions-grid .aa-ico { font-size: 20px; line-height: 1; }
    .app-actions-grid .aa-logout { color: var(--danger); border-color: var(--danger); }

    /* “更多”抽屉里的设置项（语言切换等，App + 移动网页均显示） */
    .more-settings { padding: 2px 4px 10px; }
    .more-settings-item {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 12px; text-decoration: none; color: var(--text);
        background: var(--bg); border: 1px solid var(--border);
        border-radius: var(--radius); font-size: 14px; font-weight: 500;
        min-height: 48px;
    }
    .more-settings-item:hover { background: var(--primary-lt); }
    .more-settings-item .aa-ico { font-size: 18px; line-height: 1; }
    .more-settings-item .ms-value { margin-left: auto; color: var(--text-sub); font-size: 13px; font-weight: 600; }

    /* App 版隐藏“返回仪表盘/组合”按钮(网页版保留;App 用顶栏品牌+底部 Tab 导航) */
    :root[data-app] .back-btn { display: none !important; }

    /* 键盘弹起(kb-open)：隐藏底部 Tab 栏并取消其留白(否则会浮在键盘上方/挤压) */
    :root.kb-open .bottom-nav { display: none !important; }
    :root.kb-open body { padding-bottom: 0 !important; }

    /* App 版:报表底部「交易明细/每日盈亏/资金提取」快捷栏隐藏(底部导航栏已有这些入口) */
    :root[data-app] .report-quick-links { display: none !important; }

    /* App 版：列表行操作改为点击行→底部弹层(行内操作列隐藏) */
    :root[data-app] .rowsheet-col { display: none !important; }
    :root[data-app] tr[data-rowsheet] { cursor: pointer; }
    :root[data-app] tr[data-rowsheet] td:first-child {
        position: relative; padding-right: 24px;
    }
    :root[data-app] tr[data-rowsheet] td:first-child::after {
        content: "›"; position: absolute; right: 8px; top: 50%;
        transform: translateY(-50%);
        color: var(--text-sub); font-size: 18px; line-height: 1;
    }
    .row-sheet-overlay {
        position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: rgba(16,24,40,.45);
        z-index: 7200; opacity: 0; pointer-events: none; transition: opacity .22s;
    }
    .row-sheet-overlay.active { opacity: 1; pointer-events: auto; }
    .row-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 7201;
        background: var(--card-bg);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-lg);
        padding: 8px 16px calc(20px + var(--safe-bottom));
        transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
        max-height: 82vh; overflow-y: auto;
    }
    .row-sheet-overlay.active .row-sheet { transform: translateY(0); }
    .row-sheet-title { font-size: 16px; font-weight: 700; color: var(--text); padding: 6px 2px 12px; }
    .row-sheet-body .pos-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
    .row-sheet-body .pos-form input, .row-sheet-body .pos-form select { width: auto; flex: 1 1 110px; }
    .row-sheet-body .pos-form button { flex: 1 1 100%; }