:root{
    --primary:#6366f1; --primary2:#8b5cf6;
    --text:#1f2330; --text-2:#5b6172; --text-3:#9aa0b0;
    --up:#e23b3b; --down:#15a35a;
    --glass:rgba(255,255,255,.55); --glass-bd:rgba(255,255,255,.65);
    --glass-shadow:0 10px 30px rgba(99,102,241,.12);
  }

  header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:10px}
  header h1{font-size:26px;font-weight:800;letter-spacing:-.5px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));-webkit-background-clip:text;background-clip:text;color:transparent}
  header .sub{font-size:13px;color:var(--text-2);margin-top:4px}
  header .meta{font-size:12px;color:var(--text-3);text-align:right;line-height:1.5}
  .btn-refresh{font-size:13px;font-weight:700;color:#fff;border:none;border-radius:12px;padding:10px 16px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 6px 16px rgba(99,102,241,.3);
    cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
  .btn-refresh:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(99,102,241,.4)}
  .btn-refresh:active{transform:translateY(0)}
  .btn-refresh:disabled{opacity:.6;cursor:default}
  .btn-sync{font-size:12px;font-weight:600;color:#fff;border:none;border-radius:10px;padding:7px 14px;
    background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 4px 12px rgba(16,185,129,.25);
    cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap;margin-top:6px}
  .btn-sync:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,.35)}
  .btn-sync:active{transform:translateY(0)}
  .btn-sync:disabled{opacity:.6;cursor:default}
  .btn-sync.syncing{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 4px 12px rgba(245,158,11,.3)}
  .sync-msg{font-size:12px;margin-top:6px;min-height:18px;text-align:center}
  .sync-msg.ok{color:#059669}
  .sync-msg.err{color:#e23b3b}

  /* ===== 顶部导航栏（PC 端，原样复用主应用 index.html 样式）===== */
  /* 补充主应用 CSS 变量 */
  :root{
    --bg:#f5f6fa;--border:#e8eaef;--surface:#fff;
    --text-secondary:#6b7280;--text-tertiary:#9ca3af;--bg-warm:#f0f1f5;
    --transition:all .2s ease;--primary-light:rgba(99,102,241,.18);
    --primary-soft:rgba(99,102,241,.06);--shadow-xs:0 1px 3px rgba(0,0,0,.05);
    --border-light:rgba(0,0,0,.06);--expense:#10b981;--expense-soft:rgba(16,185,129,.08);
    --income:#e23b3b;--income-soft:rgba(226,59,59,.06);
  }
  .topbar{display:none}
  @media(min-width:1024px){
    .topbar{
      display:flex;align-items:center;gap:32px;
      padding:0 32px;height:72px;border-bottom:1px solid var(--border);
      background:var(--surface);position:sticky;top:0;z-index:100
    }
    .topbar .brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
    .topbar .brand .brand-icon{width:40px;height:40px;font-size:20px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(99,102,241,.3)}
    .topbar .brand .brand-text{font-size:20px;font-weight:800;color:#1f2330;letter-spacing:-.3px}
    .top-nav{display:flex!important;gap:6px;flex:1;justify-content:center}
    .top-nav .sb-tab{
      display:flex;align-items:center;gap:10px;padding:10px 24px;border-radius:12px;
      color:var(--text-secondary);font-size:15px;font-weight:600;cursor:pointer;
      border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-xs);
      transition:var(--transition);font-family:inherit;
      white-space:nowrap;line-height:1.4
    }
    .top-nav .sb-tab .tab-icon{font-size:18px;line-height:1;width:22px;text-align:center}
    .nav-kbd{font-size:11px;font-weight:800;opacity:.36;margin-left:2px;letter-spacing:.02em}
    .top-nav .sb-tab.active .nav-kbd{opacity:.62}
    .top-nav .sb-tab:hover{background:var(--bg-warm);color:#1f2330}
    .top-nav .sb-tab.active{
      background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;
      box-shadow:0 6px 16px rgba(99,102,241,.35);font-weight:700
    }
    .topbar .top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
    .topbar .top-actions .icon-btn-sm{width:38px;height:38px;font-size:18px}
    .topbar .top-actions .top-tool-btn{width:auto;min-width:74px;height:38px;padding:0 12px;gap:6px;font-size:13px;font-weight:900;border:1px solid var(--border-light);background:var(--surface);color:var(--text-secondary);box-shadow:var(--shadow-xs);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
    .topbar .top-actions .top-tool-btn:hover{background:var(--primary-soft);border-color:var(--primary-light);color:#6366f1;transform:translateY(-1px)}
    .topbar .top-actions .top-tool-btn .tool-icon{font-size:16px;line-height:1}
    .topbar .top-actions .top-tool-btn .tool-label{white-space:nowrap}
    .topbar .book-chip{display:flex;align-items:center;gap:6px;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:100px;font-size:14px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:var(--transition);text-decoration:none}
    .topbar .book-chip:hover{border-color:#6366f1;box-shadow:var(--shadow-xs)}
    .sync-status{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--border-light);background:var(--surface);color:var(--text-tertiary);font-size:12px;font-weight:900;box-shadow:var(--shadow-xs);white-space:nowrap}
    .sync-dot{width:7px;height:7px;border-radius:50%;background:var(--text-tertiary);box-shadow:0 0 0 3px rgba(148,163,184,.14)}
    .icon-btn-sm{width:34px;height:34px;border-radius:10px;border:none;background:transparent;color:var(--text-tertiary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition)}
    .icon-btn-sm:hover{background:var(--bg-warm);color:#1f2330}
    /* 让内容区不与 topbar 重叠 */
    
    
  }

  .demo-badge{display:none;background:#fff7e0;border:1px solid #f3d98a;color:#9a6b00;
    font-size:12px;font-weight:600;padding:6px 12px;border-radius:10px;margin-bottom:16px}
  .demo-badge.show{display:block}

  .card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:20px 22px;box-shadow:var(--shadow-xs)}
  .label{font-size:13px;color:var(--text-2);font-weight:600}
  .up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--text-2)}

  /* Hero 总览 */
  .hero{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;margin-bottom:22px}
  .hero-left .hero-total{font-size:46px;font-weight:800;letter-spacing:-1.5px;margin-top:6px;line-height:1.05}
  .hero-left .hero-sub{font-size:13px;color:var(--text-3);margin-top:8px}
  .hero-right{display:flex;gap:34px}
  .hstat{min-width:120px}
  .hstat .hval{font-size:30px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1}
  .hstat .hex{font-size:11px;color:var(--text-3);margin-top:4px}

  .panel{background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
    border:1px solid var(--glass-bd);border-radius:20px;padding:20px 22px;box-shadow:var(--glass-shadow);margin-bottom:22px}
  .panel h2{font-size:16px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .panel h2 .tag{font-size:11px;font-weight:600;color:var(--primary);background:rgba(99,102,241,.1);
    padding:2px 8px;border-radius:8px}

  /* 收益日历 */
  .legend{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:12px;color:var(--text-2);flex-wrap:wrap}
  .lg{width:16px;height:16px;border-radius:5px;display:inline-block;vertical-align:middle}
  .lg.gain{background:rgba(226,59,59,.55)} .lg.loss{background:rgba(21,163,90,.55)} .lg.flat{background:rgba(150,150,150,.2)}
  .lg-note{color:var(--text-3)}
  .cal-head{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:6px}
  .cal-head div{text-align:center;font-size:12px;color:var(--text-3);font-weight:600}
  .cal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .cal-cell{border-radius:12px;padding:8px 8px;min-height:58px;background:rgba(255,255,255,.4);
    border:1px solid rgba(99,102,241,.08);display:flex;flex-direction:column;justify-content:space-between}
  .cal-cell.empty{background:transparent;border:none}
  .cal-cell .cd{font-size:12px;color:var(--text-2);font-weight:600}
  .cal-cell .ca{font-size:12px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}

  /* 表格 */
  table{width:100%;border-collapse:collapse;font-size:14px}
  thead th{font-size:12px;color:var(--text-3);font-weight:600;text-align:right;padding:8px 10px;border-bottom:1px solid rgba(99,102,241,.12)}
  thead th:first-child,tbody td:first-child{text-align:left}
  tbody td{padding:12px 10px;border-bottom:1px solid rgba(99,102,241,.07);text-align:right;font-variant-numeric:tabular-nums}
  tbody tr:last-child td{border-bottom:none}
  .fname{font-weight:700}
  .fcode{font-size:11px;color:var(--text-3);font-weight:500;margin-top:2px}
  .pname{font-size:13px;color:var(--text-2);font-weight:600}
  .est{font-size:11px;color:var(--text-3);margin-top:2px}

  /* 区间盈亏 */
  .periods{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  .pcol{background:rgba(255,255,255,.5);border:1px solid rgba(99,102,241,.12);border-radius:14px;padding:14px 10px;text-align:center}
  .pcol .plabel{font-size:13px;color:var(--text-2);font-weight:700}
  .pcol .pval{font-size:22px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.1}
  .pcol .ppct{font-size:13px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}

  tbody tr.row-click{cursor:pointer;transition:background .15s}
  tbody tr.row-click:hover{background:rgba(99,102,241,.07)}
  .row-hint{font-size:11px;font-weight:600;color:var(--primary);background:rgba(99,102,241,.1);padding:2px 8px;border-radius:8px}

  #mvChart{width:100%;height:360px}
  #monthChart{width:100%;height:300px}
  #allocChart{width:100%;height:300px}

  #detailChart{width:100%;height:240px}

  /* 月/年 切换 */
  .seg{font-size:12px;font-weight:700;color:var(--text-2);background:rgba(99,102,241,.1);border:none;border-radius:8px;padding:5px 13px;cursor:pointer;margin-left:6px}
  .seg.active{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2))}
  .detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0}
  .detail-card{background:rgba(255,255,255,.5);border:1px solid rgba(99,102,241,.12);border-radius:14px;padding:12px 14px}
  .detail-card .dl{font-size:12px;color:var(--text-2);font-weight:600}
  .detail-card .dv{font-size:19px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
  .detail-card .dp{font-size:12px;font-weight:700;margin-top:1px;font-variant-numeric:tabular-nums}
  .detail-meta{font-size:13px;color:var(--text-2);line-height:1.7}

  footer{text-align:center;font-size:12px;color:var(--text-3);margin-top:8px;line-height:1.6}

  /* 投资概要 */
  .dca-note{font-size:13px;color:var(--text-2);margin-top:10px;line-height:1.9;font-variant-numeric:tabular-nums}

  .btn-add{font-size:13px;font-weight:700;color:#fff;border:none;border-radius:12px;padding:9px 16px;
    background:linear-gradient(135deg,var(--primary),var(--primary2));cursor:pointer;box-shadow:0 4px 12px rgba(99,102,241,.25)}
  .btn-add:hover{opacity:.92;transform:translateY(-1px)}
  .btn-add:disabled{opacity:.6;cursor:not-allowed}
  .btn-mini{font-size:12px;font-weight:700;color:var(--primary);border:1px solid rgba(99,102,241,.35);background:rgba(99,102,241,.08);
    border-radius:9px;padding:5px 12px;cursor:pointer;white-space:nowrap}
  .btn-mini:hover{background:rgba(99,102,241,.16)}
  .col-edit{width:64px;text-align:center}
  .row-hint{font-size:12px;color:var(--text-3);font-weight:400}

  .modal-overlay{position:fixed;inset:0;background:rgba(31,35,48,.45);z-index:50;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}
  .modal-overlay.show{display:flex}
  .modal-overlay .modal{position:relative!important;inset:auto!important;display:block;background:var(--glass);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid var(--glass-bd);border-radius:20px;padding:22px 24px;width:100%;max-width:420px;box-shadow:var(--glass-shadow)}
  .modal h3{font-size:17px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
  .modal .close{width:28px;height:28px;border-radius:50%;border:none;background:rgba(99,102,241,.12);color:var(--primary);font-size:18px;line-height:1;cursor:pointer}
  .form-group{margin-bottom:14px}
  .form-group label{display:block;font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:5px}
  .form-group input, .form-group select{width:100%;padding:10px 12px;border:1.5px solid rgba(99,102,241,.18);border-radius:12px;background:rgba(255,255,255,.7);font-size:14px;color:var(--text);outline:none;font-family:inherit}
  .form-group input:focus, .form-group select:focus{border-color:var(--primary)}
  .form-hint{font-size:11px;color:var(--text-3);margin-top:4px}
  .form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
  .form-actions button{padding:9px 18px;border-radius:12px;border:none;font-size:13px;font-weight:700;cursor:pointer}
  .btn-cancel{background:rgba(99,102,241,.1);color:var(--primary)}
  .btn-submit{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2))}
  .msg{font-size:12px;margin-top:10px;padding:8px 12px;border-radius:10px;display:none}
  .msg.show{display:block}
  .msg.ok{background:rgba(21,163,90,.12);color:var(--down)}
  .msg.err{background:rgba(226,59,59,.12);color:var(--up)}

/* ===== 基金页（内置 SPA，统一主应用风格）===== */
.fund-grid{display:grid;grid-template-columns:1fr;gap:16px}
.fund-grid>header{grid-column:1/-1;margin:0!important}
@media(min-width:1024px){
  .fund-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .fund-grid>header{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px}
  /* 让总览 hero 与区间面板占据整行更协调 */
  .fund-grid>.hero{grid-column:1/-1}
}
/* 同步余额按钮反馈跟随基金页 */
.btn-sync{margin-top:0}

/* ===== PC 端 SPA 容器适配 ===== */
/* 主应用 .main 容器在 ≥1024px 设有 height:calc(100dvh-72px) + overflow:hidden，
   基金页内容较长，必须让 #pageFund 自身滚动才能显示完整内容 */
@media(min-width:1024px){
  #pageFund{
    height: calc(100dvh - 72px);
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }
  /* 让 echarts 图表容器在滚动上下文中正确渲染 */
  #pageFund canvas{max-width:100%}
}

/* ===== 盘中估值实时指示条 ===== */
.est-live-bar{font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:12px;margin-bottom:16px;
  display:flex;align-items:center;gap:8px;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.est-live-bar.idle{background:rgba(148,163,184,.12);color:var(--text-2);border:1px solid rgba(99,102,241,.1)}
.est-live-bar.trading{background:rgba(99,102,241,.12);color:var(--primary);border:1px solid rgba(99,102,241,.25)}
.est-dot{width:9px;height:9px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px rgba(226,59,59,.18);
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

/* 持仓列表：盘中估值为主显示 */
.est-val{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.est-badge{font-size:10px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));
  padding:1px 6px;border-radius:6px;margin-left:4px;vertical-align:middle}
.est-sub{font-size:11px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.nav-sub{font-size:11px;color:var(--text-3);margin-top:1px;font-variant-numeric:tabular-nums}
.est-tag{display:inline-block;font-size:10px;font-weight:800;color:#fff;background:#f59e0b;
  padding:1px 6px;border-radius:6px;margin-right:2px;vertical-align:middle}