/* ============================================================
   首页排版（在 style.css 之后加载，只覆盖首页布局）
   铁考试皮肤：变量已在 style.css 统一，这里只做排版细节
   ============================================================ */

/* ---------- 顶部一行：账本 pill + 月份 chip ---------- */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.home-top .book-selector { flex: 1; min-width: 0; margin: 0; padding-bottom: 0; }
.month-chip {
    flex: 0 0 auto;
    font-size: 0.78rem; font-weight: 500; color: var(--text-secondary);
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 20px; padding: 6px 12px; white-space: nowrap;
    backdrop-filter: var(--glass-blur);
}

/* ---------- 分类支出进度条 ---------- */
.cat-progress { padding: 10px 16px; }
.cp-line { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.cp-line + .cp-line { border-top: 1px solid var(--border); }
.cp-name { flex: 0 0 36px; font-size: 0.78rem; color: var(--text-secondary); }
.cp-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.cp-bar i {
    display: block; height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cp-num { flex: 0 0 80px; text-align: right; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-empty { padding: 14px 0; text-align: center; font-size: 0.8rem; color: var(--text-muted); }

/* ---------- 流水：按日分组 + 当日小计吸顶 ---------- */
.transaction-list { padding: 6px 16px 10px; }
.day-head {
    position: sticky; top: 78px; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 0 4px; padding: 8px 12px;
    font-size: 0.74rem; color: var(--text-muted);
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
}
.day-sum { font-variant-numeric: tabular-nums; }
.tx-item { padding: 12px 0; gap: 12px; }
.tx-icon { width: 38px; height: 38px; border-radius: 11px; font-size: 1.2rem; }
.tx-title { font-size: 0.88rem; }
.tx-meta { font-size: 0.72rem; }
.tx-amount { font-size: 0.95rem; min-width: 80px; }

/* ---------- 分类明细页 ---------- */
.cat-sort { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 14px; }
.seg-mini { display: inline-flex; background: var(--bg-hover); border-radius: 11px; padding: 3px; }
.seg-mini i {
    font-style: normal; font-size: 0.78rem; padding: 6px 14px; border-radius: 9px;
    color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease;
    user-select: none;
}
.seg-mini i.on { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #fff; font-weight: 600; }
.cat-sort-hint { font-size: 0.72rem; color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

.cat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    margin-bottom: 10px; overflow: hidden;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}
.cat-row { display: flex; align-items: center; gap: 10px; padding: 12px; cursor: pointer; }
.cat-row:active { background: var(--bg-hover); }
.cat-ico { width: 34px; height: 34px; border-radius: 10px; font-size: 0.9rem; flex: none; }
.cat-name { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.cat-bar { flex: 1; min-width: 22px; height: 5px; border-radius: 3px; background: var(--bg-hover); overflow: hidden; }
.cat-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; }
.cat-sum { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat-arrow { color: var(--text-muted); font-size: 1rem; flex: none; }
.cat-flows { border-top: 1px solid var(--border); }
.cat-sub {
    padding: 9px 16px 9px 58px;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}
.cat-sub:hover {
    transform: none !important;
    box-shadow: none !important;
    background: var(--bg-hover);
}
.cat-empty { text-align: center; padding: 30px; color: var(--text-muted); font-size: 0.85rem; }

/* ---------- 月份选择按钮 ---------- */
.month-picker {
    display: flex; align-items: center; gap: 6px;
    background: var(--accent-bg); color: var(--accent);
    border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px;
    font-size: 0.82rem; font-weight: 500; cursor: pointer;
    transition: all 0.2s ease;
}
.month-picker:active { transform: scale(0.96); }
.month-picker span { white-space: nowrap; }

/* ---------- 日历格子（7 列标准周视图，手机端稍大字号） ---------- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day-header { text-align: center; font-size: 11px; font-weight: 500; color: var(--text-muted); padding: 4px 0 8px; }
.cal-day {
    aspect-ratio: 1; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 4px 1px; transition: all 0.2s ease;
    background: var(--glass-bg); border: 1px solid var(--border);
    overflow: hidden; position: relative;
}
.cal-day:active { transform: scale(0.94); }
.cal-day.today {
    background: var(--accent-bg); border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}
.cal-day.has { background: var(--bg-hover); }
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day .d-num { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.2; }
.cal-day.today .d-num { font-weight: 700; color: var(--accent); }
.cal-day .d-exp {
    font-size: 9px; font-weight: 700; color: var(--expense);
    margin-top: 2px; line-height: 1.1; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-day .d-inc {
    font-size: 9px; font-weight: 600; color: var(--income);
    margin-top: 1px; line-height: 1.1; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 月份滚轮 ---------- */
.wheel-box { display: flex; justify-content: center; gap: 20px; padding: 8px 0 20px; }
.wheel-col {
    position: relative; width: 110px; height: 176px; overflow-y: auto;
    border-top: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.wheel-col::-webkit-scrollbar { display: none; }
.wheel-item {
    height: 44px; line-height: 44px; text-align: center;
    font-size: 1.05rem; color: var(--text-secondary);
    scroll-snap-align: center;
    transition: color 0.2s, font-size 0.2s, font-weight 0.2s;
    user-select: none;
}
.wheel-item.active { color: var(--accent); font-weight: 600; font-size: 1.2rem; }

/* ---------- 分类修正 chips ---------- */
.catfix-name { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; word-break: break-all; }
.catfix-label { font-size: 0.72rem; color: var(--text-muted); margin: 14px 0 8px; letter-spacing: 0.04em; }
.catfix-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.catfix-chip {
    padding: 7px 14px; border-radius: 999px;
    background: var(--bg-hover); color: var(--text-secondary);
    font-size: 0.82rem; cursor: pointer; transition: all 0.2s ease; user-select: none;
    border: 1px solid var(--border);
}
.catfix-chip.active { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #fff; font-weight: 600; border-color: transparent; }
.catfix-chip:active { transform: scale(0.96); }
.catfix-all { display: flex; align-items: center; gap: 8px; margin: 18px 0 14px; font-size: 0.82rem; color: var(--text-secondary); }
.catfix-all input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- 我的页 hero ---------- */
.profile-hero { padding: 22px !important; }

/* ---------- 账本详情页：月份切换 pill ---------- */
.overview-period {
    display: flex; align-items: center; gap: 6px;
    background: var(--accent-bg); border: 1px solid var(--border);
    border-radius: 20px; padding: 5px 12px;
    font-size: 0.78rem; color: var(--text-secondary);
}

/* ---------- 每日支出曲线（可左右滑动） ---------- */
.daily-scroll-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* 只在横向 contain（图表滑到头不带动页面横移）；纵向必须 auto，
       否则 overflow-y:hidden 无滚动量 → 永远处于 scroll boundary → contain 掐断滚动链 → 图上竖滑整页不动 */
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    padding: 16px 12px 8px;
    scrollbar-width: none;
}
.daily-scroll-wrap::-webkit-scrollbar { display: none; }
.daily-scroll-wrap canvas { width: 680px; height: 180px; display: block; }