/* ===== 行程记账：页面外框 + 费用面板（紧凑版：三段式） ===== */
.ex-wrap { padding: 16px 0 48px; }
.ex-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.ex-head h1 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; color: var(--l2-ink, var(--text)); margin: 0 0 4px; }
.ex-head p { font-size: .8rem; color: var(--l2-ink-3, var(--text-3)); margin: 0; line-height: 1.6; max-width: 620px; }
.ex-tools { display: flex; gap: 7px; flex-wrap: wrap; }
.ex-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-2); border-radius: 9px; padding: 7px 12px; font-size: .78rem; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.ex-btn:hover { border-color: var(--primary); color: var(--primary-600); }
.ex-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.ex-btn.danger:hover { border-color: var(--rose); color: #c23b64; }
.ex-tripbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 12px; padding: 9px 13px; margin-bottom: 12px; font-size: .8rem; color: var(--text-2); }
.ex-tripbar b { color: var(--text); }
.ex-tripbar .sp { color: var(--border); }
.ex-tripbar .right { margin-left: auto; }
.ex-ok { background: var(--primary-50); border: 1px solid var(--primary-200); color: var(--accent-600); border-radius: 10px; padding: 8px 13px; font-size: .8rem; margin-bottom: 12px; }
.ex-err { background: #fdecea; border: 1px solid #f6c9c3; color: #a5281b; border-radius: 10px; padding: 8px 13px; font-size: .8rem; margin-bottom: 12px; }
.ex-err ul { margin: 0; padding-left: 16px; }
.ex-empty { text-align: center; padding: 32px 16px; color: var(--text-4); font-size: .85rem; border: 1px dashed var(--border); border-radius: 14px; background: #fcfefe; }
.ex-empty i { display: block; font-size: 1.7rem; color: var(--primary-200); margin-bottom: 9px; }

/* 选行程页 */
.ex-pickhead { font-size: .9rem; font-weight: 800; color: var(--text); margin: 16px 0 9px; display: flex; align-items: center; gap: 8px; }
.ex-pickhead i { color: var(--primary); }
.ex-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.ex-pickcard { display: flex; flex-direction: column; gap: 7px; background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 12px; padding: 13px 15px; }
.ex-pickcard h3 { font-size: .92rem; font-weight: 700; margin: 0; color: var(--text); line-height: 1.45; }
.ex-pickcard .meta { font-size: .74rem; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 5px 12px; }
.ex-pickcard .foot { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); }
.ex-pickcard .sum { font-family: var(--font-head); font-weight: 800; color: var(--accent-600); font-size: .92rem; }
.ex-pickcard .foot .ex-btn { margin-left: auto; }

/* ============ 费用面板 ============ */
.xp { display: flex; flex-direction: column; gap: 10px; }

/* ① 头卡：左总额 + 右环形与图例 */
.xp-head { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr) minmax(0, 268px); gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 16px; padding: 16px 20px; }
/* 每天花费：头卡第三列（窄屏依次折行） */
.xp-head-t { border-left: 1px solid var(--l2-line, var(--border)); padding-left: 16px; min-width: 0; }
.xp-head-t .hd { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--l2-ink-2, var(--text-2)); margin-bottom: 2px; }
.xp-head-t .hd i { color: var(--primary); }
.xp-head-t .hd span { margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--l2-ink-3, var(--text-3)); }
.xp-head-t .xp-trend-svg { height: 92px; }
@media (max-width: 1080px) { .xp-head { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
  .xp-head-t { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--l2-line, var(--border)); padding: 12px 0 0; } }
@media (max-width: 780px) { .xp-head { grid-template-columns: 1fr; gap: 14px; } }
.xp-total { font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; color: var(--l2-ink, var(--text)); line-height: 1.05; letter-spacing: -1px; }
.xp-total span { font-size: .78rem; font-weight: 600; color: var(--l2-ink-3, var(--text-3)); margin-left: 6px; letter-spacing: 0; }
.xp-kpis { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .78rem; color: var(--l2-ink-3, var(--text-3)); }
.xp-kpis b { color: var(--l2-ink, var(--text)); font-weight: 700; }
.xp-cov { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.xp-cov .track { flex: 1 1 auto; max-width: 190px; height: 5px; background: var(--ice); border-radius: 999px; overflow: hidden; }
.xp-cov .fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.xp-cov .txt { font-size: .72rem; color: var(--l2-ink-3, var(--text-3)); white-space: nowrap; }
.xp-top1 { margin-top: 9px; font-size: .76rem; color: var(--l2-ink-3, var(--text-3)); }
.xp-top1 b { color: var(--l2-ink-2, var(--text-2)); font-weight: 700; }
.xp-top1 em { font-style: normal; opacity: .8; }

.xp-head-r { display: flex; align-items: center; gap: 18px; }
@media (max-width: 640px) { .xp-head-r { flex-direction: column; align-items: flex-start; gap: 12px; } }
.xp-donut { width: 118px; height: 118px; flex: 0 0 118px; }
.xp-donut-pct { font-family: var(--font-head); font-size: 21px; font-weight: 800; fill: var(--text); }
.xp-donut-lbl { font-size: 10.5px; fill: var(--l2-ink-3, var(--text-3)); }
.xp-legend { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.xp-cat { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--l2-line, var(--border)); font-size: .82rem; color: var(--l2-ink-2, var(--text-2)); }
.xp-cat:last-child { border-bottom: none; }
.xp-cat .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.xp-cat .nm { color: var(--l2-ink, var(--text)); font-weight: 600; }
.xp-cat .pct { color: var(--l2-ink-3, var(--text-3)); font-size: .74rem; }
.xp-cat .amt { margin-left: auto; font-weight: 700; color: var(--l2-ink, var(--text)); font-variant-numeric: tabular-nums; }
.xp-none { font-size: .8rem; color: var(--l2-ink-3, var(--text-3)); padding: 6px 0; }

/* ② 走势（细线，安静） */
/* 旧的整行走势块已并入头卡；保留这类样式以免规划器内嵌场景有残留引用 */
.xp-trend { background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 14px; padding: 11px 14px 4px; }
.xp-trend .hd { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 700; color: var(--l2-ink, var(--text)); margin-bottom: 2px; }
.xp-trend .hd i { color: var(--primary); }
.xp-trend .hd span { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--l2-ink-3, var(--text-3)); }
.xp-trend-svg { width: 100%; height: 104px; display: block; }
.xp-trend-v { font-size: 11px; font-weight: 700; fill: var(--l2-ink-2, var(--text-2)); }
.xp-trend-l { font-size: 11px; fill: var(--l2-ink-3, var(--text-3)); }

/* ③ 记一笔 + 从行程记 */
.xp-form { background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 14px; padding: 12px 14px; }
.xp-form.is-hl { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-100); }
.xp-fgrid { display: grid; grid-template-columns: 96px minmax(0, 1fr) 118px 104px 1fr 132px; gap: 8px; align-items: end; }
.xp-fgrid label { display: block; min-width: 0; }
.xp-fgrid label > span { display: block; font-size: .68rem; color: var(--l2-ink-3, var(--text-3)); margin-bottom: 3px; }
.xp-fgrid input, .xp-fgrid select { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: .82rem; color: var(--text); background: #fff; font-family: var(--font-body); }
.xp-fgrid .f-note { grid-column: 5 / 6; }
.xp-fgrid .f-act { grid-column: 6 / 7; display: flex; gap: 6px; }
.xp-fgrid .f-amount input { font-weight: 700; text-align: right; }
@media (max-width: 1000px) {
  .xp-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xp-fgrid .f-note, .xp-fgrid .f-act { grid-column: auto; }
}
@media (max-width: 640px) { .xp-fgrid { grid-template-columns: 1fr 1fr; } }
.xp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-2); border-radius: 9px; padding: 8px 13px; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.xp-btn:hover { border-color: var(--primary); color: var(--primary-600); }
.xp-btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }

.xp-quick { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
.xp-quick > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--l2-ink, var(--text)); display: flex; align-items: center; gap: 7px; list-style: none; }
.xp-quick > summary::-webkit-details-marker { display: none; }
.xp-quick > summary i { color: var(--primary); }
.xp-quick > summary span { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--l2-ink-3, var(--text-3)); }
.xp-quick .hint { font-size: .74rem; color: var(--l2-ink-3, var(--text-3)); margin: 7px 0 2px; }
.xp-qday { padding-top: 9px; }
.xp-qhead { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--l2-ink-3, var(--text-3)); margin-bottom: 6px; }
.xp-qhead b { color: var(--l2-ink-2, var(--text-2)); font-weight: 800; }
.xp-qhead .dt { margin-left: auto; font-weight: 700; color: var(--accent-600); }
.xp-qhead .dt.is-zero { color: var(--l2-ink-3, var(--text-3)); font-weight: 500; }
.xp-qchips { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-qchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: #fff; color: var(--text-2); border-radius: 999px; padding: 5px 11px; font-size: .76rem; font-weight: 600; cursor: pointer; transition: all .15s; }
.xp-qchip:hover { border-color: var(--primary); color: var(--primary-600); background: var(--primary-50); }
.xp-qchip i { font-size: .72rem; color: var(--text-4); }
.xp-qchip.is-done { background: var(--primary-50); border-color: var(--primary-200); color: var(--accent-600); }
.xp-qchip.is-done::after { content: "✓"; font-size: .66rem; }

/* ④ 分组明细 */
.xp-detail { background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 14px; padding: 12px 16px 6px; }
.xp-detail > .hd { display: flex; align-items: center; gap: 7px; font-size: .84rem; font-weight: 700; color: var(--l2-ink, var(--text)); margin-bottom: 4px; }
.xp-detail > .hd i { color: var(--primary); }
.xp-detail > .hd span { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--l2-ink-3, var(--text-3)); }
.xp-group { margin-bottom: 8px; }
.xp-ghd { display: flex; align-items: center; gap: 8px; padding: 6px 0 5px; font-size: .8rem; color: var(--l2-ink, var(--text)); border-bottom: 1px solid var(--l2-line, var(--border)); }
.xp-ghd .dot { width: 8px; height: 8px; border-radius: 50%; }
.xp-ghd .n { font-size: .7rem; color: var(--l2-ink-3, var(--text-3)); font-weight: 500; }
.xp-ghd .sum { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.xp-ghd .d { font-size: .7rem; color: var(--l2-ink-3, var(--text-3)); font-weight: 500; }
/* 无边框表格：组头与行共用同一套列宽
   日期 60 | 内容 1fr | 分类 92 | 来源 96 | 金额 96 | 操作 var(--acts-w) */
.xp-ghd { display: grid; grid-template-columns: auto auto 1fr 92px 96px 96px var(--acts-w, 56px); gap: 10px; align-items: center; }
.xp-ghd .sum { margin-left: 0; text-align: right; }
.xp-row-main { display: grid; grid-template-columns: 60px minmax(0, 1fr) 92px 96px 96px var(--acts-w, 56px); gap: 10px; align-items: center; }
.xp-row .when { flex: none; }
.xp-row .what b { display: block; }
.xp-row .cat { justify-self: start; margin-left: 0; }
.xp-row .src { justify-self: start; }
.xp-row .src .tag { margin-left: 0; }
.xp-row .amt { text-align: right; font-variant-numeric: tabular-nums; }
.xp-row .acts { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
/* 行内分类标签：明细按天分组后，分类信息回落到每一行 */
.xp-row .cat { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 6px 1px 5px;
  border-radius: 999px; font-size: .68rem; font-weight: 600; color: var(--l2-ink-2, var(--text-2));
  background: color-mix(in srgb, var(--l2-line, #e6ecef) 55%, transparent); white-space: nowrap; }
.xp-row .cat i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
html[data-theme="dark"] .xp-row .cat { background: rgba(255,255,255,.08); color: #cfe0e4; }
.xp-row { border-bottom: 1px dashed var(--l2-line, var(--border)); }
.xp-row:last-child { border-bottom: none; }
.xp-row-main { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .82rem; }
.xp-row .when { flex: 0 0 74px; font-size: .74rem; font-weight: 700; color: var(--l2-ink-2, var(--text-2)); }
.xp-row .when em { display: block; font-style: normal; font-weight: 400; color: var(--l2-ink-3, var(--text-3)); font-size: .68rem; }
.xp-row .what { min-width: 0; flex: 1 1 auto; }
.xp-row .what b { color: var(--l2-ink, var(--text)); font-weight: 600; }
.xp-row .what em { display: block; font-style: normal; font-size: .72rem; color: var(--l2-ink-3, var(--text-3)); margin-top: 2px; }
.xp-row .what .tag { display: inline-block; font-size: .62rem; color: var(--accent-600); background: var(--primary-50); border-radius: 5px; padding: 1px 7px; margin-left: 6px; }
.xp-row .amt { flex: 0 0 auto; font-weight: 700; color: var(--l2-ink, var(--text)); font-variant-numeric: tabular-nums; }
.xp-row .acts { display: inline-flex; gap: 2px; opacity: .35; transition: opacity .15s; }
.xp-row:hover .acts { opacity: 1; }
.xp-icon { border: 1px solid transparent; background: transparent; color: var(--text-4); cursor: pointer; padding: 4px 6px; border-radius: 7px; font-size: .74rem; }
.xp-icon:hover { border-color: var(--border); color: var(--text); background: #fff; }
.xp-icon.danger:hover { color: #c23b64; }
.xp-row-edit { padding: 10px; background: var(--primary-50); border-radius: 10px; margin-bottom: 6px; }

/* ⑤ 设置 */
.xp-setup { background: #fff; border: 1px solid var(--l2-line, var(--border)); border-radius: 14px; padding: 11px 15px; }
.xp-setup > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--l2-ink, var(--text)); display: flex; align-items: center; gap: 7px; list-style: none; }
.xp-setup > summary::-webkit-details-marker { display: none; }
.xp-setup > summary i { color: var(--primary); }
.xp-setup > summary span { margin-left: auto; font-size: .72rem; font-weight: 500; color: var(--l2-ink-3, var(--text-3)); }
.xp-setup form { margin-top: 10px; }
.xp-hint { font-size: .72rem; color: var(--l2-ink-3, var(--text-3)); margin: 8px 0 0; }

/* 行程点位行内费用（规划器 / 行程页） */
.pl-item-cost { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 2px 7px; font-size: .72rem; color: var(--text-3); width: 84px; }
.pl-item-cost:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-100); }
.pl-item-cost.has-value { color: var(--accent-600); border-color: var(--primary-200); background: var(--primary-50); font-weight: 700; }
.pl-item-cost.is-saving { opacity: .55; }
.pl-day-cost { font-size: .72rem; font-weight: 700; color: var(--accent-600); margin-left: 6px; font-style: normal; }
.pl-day-cost.is-zero { color: var(--text-4); font-weight: 500; }
.pl-trip-cost { font-size: .74rem; color: var(--text-3); margin-left: 6px; }
.pl-trip-cost b { color: var(--accent-600); font-weight: 800; }

/* 打印 */
@media print {
  .navbar, .footer-discover, .crumbs, .ex-tools, .ex-head p, .xp-quick, .xp-form, .xp-setup { display: none !important; }
  .ex-wrap { padding: 0; }
  .xp-head, .xp-trend, .xp-detail { border-color: #ccc; page-break-inside: avoid; }
  .xp-row .acts { display: none; }
}

/* ===== 覆盖：明细行改成六列无边框表格（放在文件末尾以确保优先级高于上面的 flex 定义） ===== */
.xp-row-main { display: grid; grid-template-columns: 60px minmax(0, 1fr) 92px 96px 96px var(--acts-w, 56px); gap: 10px; align-items: center; }
.xp-ghd { display: grid; grid-template-columns: auto auto 1fr 92px 96px 96px var(--acts-w, 56px); gap: 10px; align-items: center; }
.xp-row .what { display: block; }
.xp-row .what b { display: block; }
.xp-row .what em { display: block; }
.xp-row .cat { justify-self: start; margin-left: 0; }
.xp-row .src { justify-self: start; }
.xp-row .amt { text-align: right; font-variant-numeric: tabular-nums; }
.xp-row .acts { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.xp-ghd .sum { margin-left: 0; text-align: right; }
@media (max-width: 700px) {
  .xp-row-main { grid-template-columns: 54px minmax(0, 1fr) auto; }
  .xp-row .cat, .xp-row .src { grid-column: 2; }
  .xp-ghd { grid-template-columns: auto auto 1fr auto; }
}