/* ===================================================================
   净值账本 · 用户端 —— 视觉与结构对齐 board3 设计图（v2.0）
   8 套配色 / 一层卡片 + 细边框 / 小字信息密度
   =================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ---------- 配色方案（板式：主色 / 底色 / 卡色 / 涨跌固定） ---------- */
:root {
  --up: #d1453b;
  --dn: #1a9c74;
  --r: 13px;
}
[data-theme="songmo"] { --accent:#0E7C66; --accent2:#0A5B4B; --bg:#f4f6f7; --card:#fff; --line:#e4e9ee; --ink:#1b2330; --dim:#7d8996; --dim2:#95a1ac; --tint:#f7faf9; --tintline:#e2ece9; --chip:#f2f5f7; --seg:#eef1f4; --sel:#eaf5f1; }
[data-theme="nuansha"] { --accent:#b98b57; --accent2:#8a5522; --bg:#f6f3ee; --card:#fff; --line:#e8e0d5; --ink:#2a241d; --dim:#8b7f70; --dim2:#a3968a; --tint:#faf7f2; --tintline:#ece3d6; --chip:#f1ece4; --seg:#f0ebe3; --sel:#f6efe4; }
[data-theme="yanzhi"] { --accent:#8a4c5e; --accent2:#a13a4e; --bg:#f7f2f4; --card:#fff; --line:#e9dfe3; --ink:#2b1c22; --dim:#8b7280; --dim2:#a8909b; --tint:#fbf6f8; --tintline:#eee0e6; --chip:#f2eaee; --seg:#f1e9ed; --sel:#f7e9ee; }
[data-theme="shimo"] { --accent:#5c6b78; --accent2:#3b4149; --bg:#f2f4f6; --card:#fff; --line:#e2e6ea; --ink:#1b2228; --dim:#78848e; --dim2:#95a0a8; --tint:#f7f9fa; --tintline:#e3e8ec; --chip:#eef1f4; --seg:#eceff2; --sel:#e9eef1; }
[data-theme="susha"] { --accent:#a99a7c; --accent2:#8a7a5c; --bg:#f5f3ee; --card:#fff; --line:#e7e2d7; --ink:#2a2721; --dim:#8b8474; --dim2:#a59e8f; --tint:#faf8f3; --tintline:#eae4d7; --chip:#f0ece3; --seg:#efebe2; --sel:#f4f0e5; }
[data-theme="dianlan"] { --accent:#3457b0; --accent2:#26418f; --bg:#f2f4f9; --card:#fff; --line:#e0e5f0; --ink:#161d2c; --dim:#76829b; --dim2:#95a0b5; --tint:#f6f8fd; --tintline:#e1e7f4; --chip:#eef1f8; --seg:#ecf0f8; --sel:#e9eefa; }
[data-theme="zitan"] { --accent:#7b5a4a; --accent2:#5a3f33; --bg:#f5f1ee; --card:#fff; --line:#e6ded8; --ink:#291f1a; --dim:#8a786e; --dim2:#a2918a; --tint:#faf7f5; --tintline:#eae1db; --chip:#f0eae6; --seg:#efe8e4; --sel:#f5ece6; }
[data-theme="ziye"] { --accent:#3fb08f; --accent2:#2b8a70; --bg:#12181b; --card:#1a2126; --line:#2a3238; --ink:#e8eef2; --dim:#8b98a2; --dim2:#728089; --tint:#17222a; --tintline:#26333a; --chip:#222b31; --seg:#1f272c; --sel:#1d3330; }

html, body { height: 100%; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: #e9edf0; color: var(--ink); font-size: 13px; line-height: 1.35;
  display: flex; justify-content: center; align-items: stretch;
}

/* ---------- 手机外壳 ---------- */
.phone {
  width: 100%; max-width: 430px; background: var(--card); position: relative;
  display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(20,30,45,.14);
  height: 100vh; height: 100dvh; overflow: hidden;
}
.scr { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* 导航条 */
.nb {
  height: 46px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; font-size: 14px; font-weight: 700; background: var(--card);
  border-bottom: 1px solid var(--line); position: relative; z-index: 3;
}
.nb .lt { display: flex; align-items: center; gap: 6px; min-width: 0; }
.nb .lt .bk { font-size: 17px; color: var(--accent); font-weight: 700; padding-right: 2px; cursor: pointer; }
.nb .lt span.t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb .rt { display: flex; gap: 10px; font-size: 11.5px; font-weight: 700; color: var(--accent); align-items: center; flex: 0 0 auto; }
.nb .rt i { font-style: normal; cursor: pointer; }

/* 内容区 */
.body {
  flex: 1; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overflow-x: hidden; background: var(--bg); min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.body::-webkit-scrollbar { width: 0; height: 0; }

/* 卡片 */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.card.dark { background: linear-gradient(160deg, var(--accent), var(--accent2)); border: 0; color: #fff; }
.card.tint { background: var(--tint); border-color: var(--tintline); }
.card.dash { border-style: dashed; }
.card.warn { background: #fff7f3; border-color: #f6d9c9; }
.card.dang { background: #fffafa; border-color: #f0d3ce; }
[data-theme="ziye"] .card.warn { background: #2a201c; border-color: #4a3327; color: #f0c9b4; }
[data-theme="ziye"] .card.dang { background: #2a1c1c; border-color: #4a2a2a; }

.k { font-size: 11px; color: var(--dim); }
.k2 { font-size: 11px; color: rgba(255,255,255,.76); }
.v { font-size: 15px; font-weight: 800; }
.v.big { font-size: 27px; letter-spacing: -.4px; }
.up { color: var(--up); }
.dn { color: var(--dn); }
.sm { font-size: 10.5px; color: var(--dim2); line-height: 1.6; }
.tiny { font-size: 10.5px; color: var(--dim2); }
b, strong { font-weight: 800; }

/* 标题行 / 分节 */
.sec { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 800; padding: 2px 2px 0; }
.sec .go { font-size: 11px; color: var(--accent); font-weight: 700; cursor: pointer; }

/* 列表行 */
.lrow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 12px; border-bottom: 1px dashed var(--line); }
.lrow:last-child { border: 0; }
.frow { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; gap: 10px; }
.frow:last-child { border: 0; }
.frow .in { color: var(--accent); font-weight: 700; text-align: right; }
.frow .ph { color: #b7c1ca; text-align: right; }
.frow input, .frow select {
  border: 0; background: transparent; text-align: right; font: inherit; font-weight: 700;
  color: var(--accent); width: 52%; outline: none; min-width: 0;
}
.frow input::placeholder { color: #b7c1ca; font-weight: 400; }

/* 产品行 */
.pitem { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); gap: 8px; cursor: pointer; }
.pitem:last-child { border: 0; }
.pitem .n { font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.pitem .t { font-size: 10.5px; color: var(--dim2); margin-top: 2px; }
.pitem .r { text-align: right; flex: 0 0 auto; }
.pitem .r .a { font-size: 12.5px; font-weight: 800; }
.pitem .r .b { font-size: 10.5px; margin-top: 1px; }

/* chips / seg / 按钮 */
.chips { display: flex; gap: 5px; flex-wrap: nowrap; overflow-x: auto; flex: 0 0 auto; padding-bottom: 1px; }
.chips::-webkit-scrollbar { height: 0; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { padding: 5px 9px; border-radius: 20px; background: var(--chip); color: var(--dim); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; border: 0; font-family: inherit; }
.chip.on { background: var(--accent); color: #fff; }
.chip.soft { background: var(--sel); color: var(--accent2); }
.chip.warnc { background: #fdf0e6; color: #b4522a; }

.seg { display: flex; background: var(--seg); border-radius: 9px; padding: 3px; font-size: 12px; font-weight: 700; }
.seg div { flex: 1; text-align: center; padding: 7px 0; border-radius: 7px; color: var(--dim); cursor: pointer; }
.seg div.on { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.btn { height: 42px; border-radius: 10px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 0; font-family: inherit; width: 100%; }
.btn.ghost { background: var(--card); border: 1px solid var(--accent); color: var(--accent); }
.btn.danger { background: var(--card); border: 1px solid #e9c7c2; color: #c0392b; }
.btn.sm2 { height: 34px; font-size: 12.5px; }
.btn:active { transform: scale(.99); }

.foot { flex: 0 0 auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 8px; background: var(--card); border-top: 1px solid var(--line); }

/* tabbar */
.tabbar { flex: 0 0 auto; height: 56px; border-top: 1px solid var(--line); display: flex; background: var(--card); padding-bottom: env(safe-area-inset-bottom); }
.tabbar div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 10.5px; color: var(--dim2); cursor: pointer; }
.tabbar div.on { color: var(--accent); font-weight: 800; }
.tabbar span { font-size: 16px; line-height: 1; }

/* 进度条 / mini 柱 */
.bars { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin-top: 6px; background: var(--chip); }
.bars i { display: block; height: 7px; }
.mini { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.mini i { flex: 1; background: var(--tintline); border-radius: 2px; }
.mini i.hi { background: var(--accent); }

/* 表格 */
.tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tbl th { text-align: left; font-weight: 700; color: var(--dim); background: var(--tint); padding: 6px 4px; border-bottom: 1px solid var(--tintline); }
.tbl td { padding: 6px 4px; border-bottom: 1px solid var(--line); color: var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }

/* 指标网格 */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; font-size: 11.5px; }
.grid2 .c b { display: block; font-size: 13px; margin-top: 1px; }
.grid3 { display: flex; gap: 10px; font-size: 11.5px; }
.grid3 > div { flex: 1; }

/* 日历 */
.calhead { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; padding: 0 2px; }
.calhead .nav { font-size: 17px; color: var(--accent); cursor: pointer; padding: 0 8px; }
.calw { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 10px; text-align: center; color: var(--dim2); margin-bottom: 4px; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal > div { height: 44px; border-radius: 6px; background: var(--tint); font-size: 10.5px; padding: 3px 0 0; text-align: center; color: var(--dim); line-height: 1.2; cursor: pointer; }
.cal > div.mute { background: transparent; color: var(--line); cursor: default; }
.cal > div.has { background: var(--sel); }
.cal > div.today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal > div.sel { background: var(--accent); color: #fff; font-weight: 800; }
.cal > div em { display: block; font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--accent2); }
.cal > div.sel em { color: #fff; }

/* 主题宫格 */
.thgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.th { border: 1px solid var(--line); border-radius: 9px; padding: 8px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; cursor: pointer; }
.th i { width: 22px; height: 22px; border-radius: 7px; display: block; flex: 0 0 auto; }
.th.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }

/* warn / 提示 */
.warn { margin-top: 6px; background: #fff7f3; border: 1px solid #f6d9c9; border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #8a4a2c; line-height: 1.55; }
.warn b { color: #b4522a; }
[data-theme="ziye"] .warn { background: #2a201c; border-color: #4a3327; color: #e0bda8; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 10px);
  background: rgba(20,28,36,.92); color: #fff; font-size: 12px; padding: 9px 14px; border-radius: 20px;
  opacity: 0; pointer-events: none; transition: .18s; z-index: 60; max-width: 84%; text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 桌面：居中一列，外观像手机 */
@media (min-width: 900px) {
  body { background: #dfe4e8; padding: 22px 0; align-items: center; }
  .phone { height: min(920px, calc(100vh - 44px)); border-radius: 22px; border: 1px solid #d3dae0; max-width: 430px; }
  .nb { border-radius: 22px 22px 0 0; }
}