* { box-sizing: border-box; }
:root{
  --bg:#f5f7fa; --card:#fff; --line:#e8ecf2; --txt:#0f172a; --sub:#64748b; --muted:#94a3b8;
  /* 红涨蓝跌：全站不用绿色（炒股忌绿） */
  --up:#e02b2b; --down:#2563eb; --pri:#1d4ed8; --pri2:#3b82f6;
  --sh:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-lg:0 12px 32px rgba(15,23,42,.14);
  --r:14px;
}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--txt);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;}
h3{margin:0;font-size:15.5px;font-weight:600;}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);padding:0 24px;height:62px;}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.5px;}
.mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#1e3a8a,#3b82f6);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(29,78,216,.28);}
.mark svg{width:18px;height:18px;}
.brand small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:1.2px;}
.topright{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--sub);font-size:13px;}
.toptotal{text-align:right;line-height:1.25;}
.toptotal small{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.5px;}
.toptotal b{font-size:15px;color:var(--txt);font-variant-numeric:tabular-nums;}
.sep{width:1px;height:22px;background:var(--line);}
.mini{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer;color:var(--sub);font-size:13px;}
.mini:hover{border-color:#cbd5e1;color:var(--txt);}

.wrap{max-width:1320px;margin:0 auto;padding:22px 24px 70px;}

/* ---------- 卡片 ---------- */
/* 「当前总额」卡和分类卡同一行 */
.toprow{display:flex;gap:14px;align-items:stretch;margin-bottom:16px;flex-wrap:wrap;}
.toprow #totalCard{flex:0 1 262px;}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 18px 16px;box-shadow:var(--sh);transition:box-shadow .18s;}
.card:hover{box-shadow:0 4px 14px rgba(15,23,42,.08);}
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,#1e3a8a,#60a5fa);opacity:.9;}
/* 主卡：淡红底 + 深红字（柔和不刺眼，红=涨） */
.card.lead{background:linear-gradient(135deg,#fff5f5 0%,#fee8e8 55%,#fcdada 100%);border-color:#f7c9c9;
  box-shadow:0 2px 10px rgba(220,38,38,.10);}
.card.lead:hover{box-shadow:0 6px 16px rgba(220,38,38,.16);}
.card.lead .cl{color:#c04a4a;font-weight:600;padding-right:76px;}
/* 可点的卡片（点「当前总额」看历史金额） */
.card.clickable{cursor:pointer;}
.card.clickable:hover{border-color:#c7d2fe;}
.card.lead .more{position:absolute;right:16px;top:14px;font-size:11.5px;color:#c96a6a;
  background:rgba(255,255,255,.7);border:1px solid #f5cfcf;border-radius:99px;padding:1px 9px;}
.card.lead:hover .more{background:#fff;border-color:#e8a5a5;}
body.dark .card.lead .more{color:#d98f8f;background:rgba(0,0,0,.18);border-color:#5a2a2e;}
.card.lead .cv{color:#a01717;}
.card.lead .csub{color:#c96a6a;}
.card.lead::before{display:none;}
.cl{color:var(--sub);font-size:12.5px;font-weight:500;letter-spacing:.3px;}
.cv{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.22;margin-top:3px;}
.csub{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums;min-height:16px;}

/* ---------- 分类卡 ---------- */
.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;flex:1 1 420px;}
.catcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px 14px;
  box-shadow:var(--sh);cursor:grab;transition:box-shadow .18s;}
.catcard:hover{box-shadow:0 4px 14px rgba(15,23,42,.08);}
.catcard:active{cursor:grabbing;}
.catcard.dragging{opacity:.4;}
.catrow{display:flex;align-items:center;gap:7px;}
.catdot{width:9px;height:9px;border-radius:50%;flex:none;}
.catname{color:var(--sub);font-size:13px;}
.catpct{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.catval{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:5px;}
.catbar-out{height:6px;background:#eef2f7;border-radius:99px;margin-top:10px;overflow:hidden;}
.catbar-in{height:100%;border-radius:99px;}

/* ---------- 面板 ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;box-shadow:var(--sh);}
.ph{display:flex;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.ph h3{position:relative;padding-left:11px;}
.ph h3::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:linear-gradient(180deg,#1e3a8a,#60a5fa);}
.ph-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.hint{color:var(--muted);font-size:12.5px;font-weight:400;}
.chart-box{position:relative;height:360px;}
.cempty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;}

/* ---------- 按钮 ---------- */
.btn{background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px 15px;cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--txt);}
.btn:hover{border-color:#cbd5e1;background:#fafbfc;}
.btn.primary{background:linear-gradient(135deg,#1e3a8a,#3b82f6);border-color:transparent;color:#fff;
  box-shadow:0 2px 8px rgba(29,78,216,.28);}
.btn.primary:hover{box-shadow:0 4px 12px rgba(29,78,216,.36);}
.btn:disabled{opacity:.6;cursor:default;}
/* 记录今日：已记录状态用蓝色系（不用绿色） */
.btn.done{color:var(--pri2);border-color:#bfdbfe;background:#eff6ff;cursor:pointer;}
.btn.done:hover{background:#e4efff;}
body.dark .btn.done{color:#93b4fc;border-color:#2f4a74;background:#16233c;}

/* ---------- 表格 ---------- */
.tablewrap{overflow-x:auto;border-radius:10px;border:1px solid var(--line);}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;}
.tbl th{background:#f8fafc;color:var(--sub);font-size:12px;font-weight:600;letter-spacing:.3px;
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;}
.tbl td{padding:10px 12px;border-bottom:1px solid #f1f5f9;white-space:nowrap;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr:nth-child(even){background:#fcfdfe;}
.tbl tbody tr:hover{background:#f7faff;}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums;}
.tbl td.c,.tbl th.c{text-align:center;}
.tbl tfoot td{font-weight:700;background:#f8fafc;border-top:1px solid var(--line);}
.tbl .name{max-width:230px;overflow:hidden;text-overflow:ellipsis;}
.up{color:var(--up);} .down{color:var(--down);}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;background:#eef2f7;color:#475569;font-weight:500;}
.tag.stock{background:#e8f1ff;color:#1d4ed8;}
.tag.fund{background:#f4efff;color:#6d28d9;}
.tag.pe{background:#fdf0e6;color:#b45309;}
.tag.cash{background:#e0f2fe;color:#0369a1;}
.tag.other{background:#f3f4f6;color:#4b5563;}
.ptag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;background:#f1f5f9;color:#475569;}
.lnk{color:var(--pri2);cursor:pointer;margin-right:10px;font-size:13px;}
.lnk:hover{text-decoration:underline;}
.lnk.del{color:var(--up);}

/* 平台图标 / 序号 / 日期 */
.plogo{display:inline-flex;width:22px;height:22px;border-radius:6px;color:#fff;font-size:11.5px;
  align-items:center;justify-content:center;font-style:normal;margin-right:7px;vertical-align:middle;font-weight:600;}
img.plogo{object-fit:contain;background:#fff;border:1px solid #eef1f5;}
.no{display:inline-block;min-width:20px;text-align:right;color:var(--muted);font-size:12px;margin-right:9px;font-variant-numeric:tabular-nums;}
.udate{color:var(--sub);font-variant-numeric:tabular-nums;}
.udate.today{color:var(--down);font-weight:500;}

/* 金额：纯文本显示（改金额要点「改」，不在这里直接编辑），
   这样和表头「金额」、下方「合计」天然同一条右基准线 */
.amtcell{font-variant-numeric:tabular-nums;font-size:14px;}
.amtcell b{font-weight:600;}
/* 金额可点：点开看这个产品的历史金额 */
.amtlnk{cursor:pointer;display:inline-flex;align-items:center;gap:3px;
  border-bottom:1px dashed transparent;transition:color .15s,border-color .15s;}
.amtlnk:hover{color:var(--pri2);border-bottom-color:var(--pri2);}
.amtlnk .caret{font-style:normal;font-size:10px;color:#c3ccd9;transition:color .15s;}
.amtlnk:hover .caret{color:var(--pri2);}

/* 历史金额弹窗 */
.ihbody{min-width:min(520px,86vw);}
.ihstat{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.ihstat>div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;}
.ihstat span{display:block;color:var(--muted);font-size:11.5px;margin-bottom:3px;white-space:nowrap;}
.ihstat b{font-size:14.5px;font-variant-numeric:tabular-nums;}
.ihhint{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.6;}
.ihchart{height:190px;margin:2px 0 16px;padding:8px 6px 4px;border:1px solid var(--line);border-radius:10px;background:var(--bg);}
.ihbody .tablewrap{max-height:52vh;overflow:auto;}
.ihbody .tbl td,.ihbody .tbl th{padding:8px 10px;font-size:13.5px;}
.ihbody .today-row{background:rgba(37,99,235,.05);}

/* 占比迷你条：百分比右对齐，与表头「占比」同一条右基准线 */
.pctwrap{display:inline-block;min-width:74px;text-align:right;}
.pctbar{height:4px;background:#eef2f7;border-radius:99px;margin-top:4px;overflow:hidden;}
.pctbar i{display:block;height:100%;border-radius:99px;background:#93b4fc;}

/* 拖拽 */
.drag{cursor:grab;color:#d3dae4;font-size:15px;letter-spacing:-2px;user-select:none;padding:0 4px;}
.drag:hover{color:var(--pri2);}
.drag:active{cursor:grabbing;}
.mv{display:inline-block;cursor:pointer;color:#d3dae4;font-size:13px;padding:0 3px;margin-left:4px;}
.mv:hover{color:var(--pri2);}
tr.dragging{opacity:.45;background:#eff5ff;}

/* 下拉（曲线「显示」用） */
.dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;width:min(470px,86vw);
  max-height:340px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--sh-lg);padding:6px 10px 10px;}
.dropdown.open{display:block;}
.dropdown .empty{padding:18px 0;}

/* 产品线下拉（显示哪些曲线） */
.linedrop{position:relative;display:inline-block;}
.dropdown.right{left:auto;right:0;width:min(320px,86vw);}
.dropbar{display:flex;align-items:center;gap:14px;padding:8px 6px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.dropbar .dhint{margin-left:auto;color:var(--muted);font-size:11.5px;}
.chkrow{display:flex;align-items:center;gap:9px;padding:6px 6px;border-radius:7px;cursor:pointer;font-size:13px;}
.chkrow:hover{background:#f6f8fb;}
.chkrow input{width:14px;height:14px;accent-color:var(--pri2);cursor:pointer;flex:none;}
.chkrow i{width:10px;height:10px;border-radius:3px;flex:none;}
.chkrow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.dark .chkrow:hover{background:#1c2942;}
body.dark .dropbar{border-bottom-color:#22304a;}

/* 弹窗 / 登录 */
/* ---------- 分段控件 ---------- */
.seg{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#f8fafc;}
.seg button{border:none;background:transparent;padding:6px 14px;cursor:pointer;font-size:12.5px;
  color:var(--sub);font-family:inherit;}
.seg button:hover{background:#eef2f7;}
.seg button.on{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff;}

/* ---------- 深色模式 ---------- */
body.dark{--bg:#0b1220;--card:#131c2e;--line:#22304a;--txt:#e2e8f0;--sub:#94a3b8;--muted:#64748b;}
body.dark .topbar{background:rgba(19,28,46,.9);}
body.dark .card,body.dark .panel,body.dark .catcard{box-shadow:0 1px 3px rgba(0,0,0,.35);}
body.dark .card:hover,body.dark .catcard:hover{box-shadow:0 4px 16px rgba(0,0,0,.45);}
body.dark .card.lead{background:linear-gradient(135deg,#2a1416 0%,#3d1a1d 55%,#4a2024 100%);border-color:#5a2a2e;}
body.dark .card.lead .cl{color:#e08b8b;}
body.dark .card.lead .cv{color:#f4b9b9;}
body.dark .card.lead .csub{color:#c97979;}
body.dark .tbl th{background:#162033;}
body.dark .tbl td{border-bottom-color:#1b263a;}
body.dark .tbl tbody tr:nth-child(even){background:rgba(255,255,255,.022);}
body.dark .tbl tbody tr:hover{background:rgba(59,130,246,.09);}
body.dark .tbl tfoot td{background:#162033;}
body.dark .tablewrap{border-color:#22304a;}
body.dark .tag{background:#1e2b42;color:#cbd5e1;}
body.dark .tag.stock{background:#17263f;color:#7aa7ff;}
body.dark .tag.fund{background:#241a3d;color:#a78bfa;}
body.dark .tag.pe{background:#33240f;color:#e5a35c;}
body.dark .tag.cash{background:#0c2536;color:#7dd3fc;}
body.dark .tag.other{background:#232f42;color:#b6c2d4;}
body.dark .ptag{background:#1e2b42;color:#cbd5e1;}
body.dark .amtcell{color:var(--txt);}
body.dark .catbar-out,body.dark .pctbar{background:#1b2739;}
body.dark .seg{background:#162033;border-color:#22304a;}
body.dark .seg button:hover{background:#1c2942;}
body.dark .btn{background:#162033;border-color:#22304a;color:var(--txt);}
body.dark .btn:hover{background:#1c2942;border-color:#2c3d5a;}
body.dark .mini{background:#162033;border-color:#22304a;color:var(--sub);}
body.dark .dropdown,body.dark .modal-box,body.dark .login-box{background:#131c2e;border-color:#22304a;color:var(--txt);}
body.dark .mbody input,body.dark .mbody select,body.dark .login-box input{background:#0f1826;border-color:#22304a;color:var(--txt);}
body.dark .drag,body.dark .mv{color:#3a4a66;}

/* ---------- 打印 ---------- */
@media print{
  .topbar .mini,.ph-right,.drag,.mv,.lnk,.dropdown,.caret,.more{display:none !important;}
  /* 深色模式下打印强制转浅色，避免输出黑底页面 */
  body,body.dark{background:#fff;--bg:#fff;--card:#fff;--line:#d7dde5;--txt:#0f172a;--sub:#475569;--muted:#64748b;}
  body.dark .card,body.dark .panel,body.dark .catcard,body.dark .topbar{box-shadow:none;background:#fff;}
  body.dark .tbl th,body.dark .tbl tfoot td{background:#f1f5f9 !important;}
  body.dark .tbl td{border-bottom-color:#eef2f7;color:#0f172a !important;}
  body.dark .tbl tbody tr:nth-child(even){background:#fcfdfe;}
  body.dark .tbl tbody tr:hover{background:#fff;}
  .wrap{max-width:none;padding:0;}
  .card,.panel,.catcard{box-shadow:none;border-color:#d7dde5;break-inside:avoid;}
  .card.lead{background:#fee8e8 !important;print-color-adjust:exact;-webkit-print-color-adjust:exact;box-shadow:none !important;}
  .card.lead .cv{color:#a01717 !important;text-shadow:none;}
  .card.lead .cl{color:#c04a4a !important;}
  .card.lead .csub{color:#c96a6a !important;}
  .chart-box{height:260px;}
  .panel{margin-bottom:10px;page-break-inside:avoid;}
  .tablewrap{border-color:#d7dde5;}
  .tbl th{background:#f1f5f9 !important;}
}

.mask{position:fixed;inset:0;background:rgba(15,23,42,.5);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:100;}
.login-box{background:#fff;border-radius:16px;padding:30px;width:330px;text-align:center;box-shadow:var(--sh-lg);}
.login-box h2{margin:0 0 20px;font-size:19px;}
.login-box input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:15px;outline:none;}
.login-box input:focus{border-color:var(--pri2);box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.login-box button{width:100%;margin-top:14px;padding:11px;border:none;border-radius:9px;
  background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff;font-size:15px;font-weight:500;cursor:pointer;
  box-shadow:0 3px 10px rgba(29,78,216,.28);}
.modal-box{background:#fff;border-radius:16px;padding:22px;width:450px;max-width:94vw;max-height:88vh;overflow:auto;box-shadow:var(--sh-lg);}
.modal-box h3{margin:0 0 16px;}
.modal-box.wide{width:600px;}
.mbody{display:grid;grid-template-columns:96px 1fr;gap:11px 12px;align-items:center;}
.mbody label{color:var(--sub);font-size:13.5px;}
.mbody input,.mbody select,.mbody textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px;outline:none;font-family:inherit;}
.mbody input:focus,.mbody select:focus{border-color:var(--pri2);box-shadow:0 0 0 3px rgba(59,130,246,.12);}
.mfoot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;}
.err{color:var(--up);font-size:13px;margin-top:8px;min-height:16px;}
.empty{text-align:center;color:var(--muted);padding:30px 0;}

@media(max-width:900px){
  .wrap{padding:16px 14px 60px;}
  .topbar{padding:0 14px;height:58px;}
  .toptotal,.sep{display:none;}
  .chart-box{height:300px;}
}
@media(max-width:560px){
  .toprow #totalCard{flex:1 1 100%;}
  .wrap{padding:14px 12px 56px;}
  .tbl th,.tbl td{padding:9px 8px;font-size:13px;}
  .tbl .name{max-width:140px;}
  /* 窄屏收起序号、占比列和上下移动按钮（合计行 colspan 由 JS 同步，不会错位） */
  .tbl.narrow th:nth-child(5),.tbl.narrow td:nth-child(5){display:none;}
  .tbl.narrow .no,.tbl.narrow .mv{display:none;}
  .ihstat{grid-template-columns:repeat(2,1fr);}
  .modal-box.wide{width:94vw;}
  .ihbody{min-width:0;}
}