/* ============================================================
   responsive.css — 断点适配
   移动 <768 ｜ 平板 768–1279 ｜ PC ≥1280
   ============================================================ */

/* ---------- 手机 <768 ---------- */
@media (max-width: 767px) {
  /* 页面标题 / 副标题只服务桌面：手机上去掉，顶栏只留月份、角色与设置 */
  .topbar { padding: 8px var(--sp-4); gap: var(--sp-2); }
  .topbar__identity { display: none; }
  .topbar__controls { flex: 1; margin-left: 0; justify-content: space-between; }

  /* KPI 卡片自适应：窄屏两列，第三张占满一行，长金额不再被省略号截断 */
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- 小屏手机微调 ---------- */
@media (max-width: 380px) {
  .kpi__value { font-size: 17px; }
  .month-picker__label { padding: 0 6px; font-size: var(--fs-xs); }
  .seg__btn { min-width: 46px; padding: 0 9px; }
}

/* ---------- 平板 ≥768 ---------- */
@media (min-width: 768px) {
  .content { padding: var(--sp-5) var(--sp-5) calc(var(--tabbar-h) + var(--sp-6)); }
  .topbar { padding: 12px var(--sp-5); flex-wrap: nowrap; }
  .topbar__title { font-size: 19px; }
  .topbar__sub { font-size: var(--fs-xs); }

  .kpi { padding: var(--sp-4); }
  .kpi__value { font-size: 24px; }
  .kpi__label { font-size: var(--fs-xs); }

  .wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pocket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bill__right { flex-direction: row; align-items: center; gap: var(--sp-3); }
  .bill-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .ring { width: 148px; height: 148px; }
  .ring__pct { font-size: 26px; }

  .drawer__panel { max-width: 440px; }
  .login__card { max-width: 400px; }
}

/* ---------- 桌面 ≥1024：侧栏导航 ---------- */
@media (min-width: 1024px) {
  .shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    align-items: start;
  }

  .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: var(--sp-5) var(--sp-3);
    background: var(--c-surface);
    border-right: 1px solid var(--c-line);
  }
  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 var(--sp-2) var(--sp-5);
  }
  .brand__mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--c-ink);
    color: var(--c-on-ink);
    flex: none;
  }
  .brand__text { display: grid; min-width: 0; }
  .brand__name { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; }
  .brand__year {
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--c-text-4);
    font-family: var(--font-num);
  }

  .sidebar__nav { display: grid; gap: 2px; }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 10px;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-text-2);
    border-radius: var(--r-sm);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .nav-item:hover { background: var(--c-ink-soft); color: var(--c-text); }
  .nav-item.is-active {
    background: var(--c-ink);
    color: var(--c-on-ink);
    font-weight: 600;
  }
  .sidebar__foot {
    margin-top: auto;
    display: grid;
    gap: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
  }
  .sidebar__mode {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    font-size: var(--fs-2xs);
    color: var(--c-text-3);
  }

  .main { min-height: 100vh; }
  .tabbar { display: none; }
  .content { padding: var(--sp-5) var(--sp-6) var(--sp-7); }
  .view { max-width: var(--content-max); margin: 0 auto; }
  .topbar { padding: 12px var(--sp-6); }
  .topbar > * { max-width: var(--content-max); }
  .topbar__identity { flex: 1; }
}

/* ---------- 宽屏 ≥1280：三列 ---------- */
@media (min-width: 1280px) {
  :root { --sidebar-w: 248px; }

  .wallet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi__value { font-size: 27px; }

  .overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
  }
  .overview-grid .span-2 { grid-column: 1 / -1; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid .span-2 { grid-column: 1 / -1; }

  .bill-summary { gap: var(--sp-3); }
  .bill-summary__value { font-size: 19px; }
}

/* ---------- 触控优化 ---------- */
@media (pointer: coarse) {
  .attr-btn { height: 28px; padding: 0 9px; font-size: 12px; }
  .bill { padding: 12px; }
  .icon-btn { width: var(--touch); height: var(--touch); }
  .month-picker__btn { width: 34px; height: 34px; }
  .nav-item { height: var(--touch); }
}

/* 触控 + 窄屏：标签按钮再收紧一档，避免换行 */
@media (pointer: coarse) and (max-width: 767px) {
  .attr-btn { height: 26px; padding: 0 6px; font-size: 11px; }
}

/* ---------- 深色系统时保持浅色（账本需要稳定对比） ---------- */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}