body {
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  background: #faf7f2;
  color: #3d3a34;
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 48px;
}
h1 { font-size: 24px; text-align: center; margin: 8px 0 16px; }
h2 { font-size: 17px; margin: 22px 0 10px; }

/* ===== 登入／註冊 ===== */
.auth-card, .record-card {
  background: #fff; border: 1px solid #e8e3da; border-radius: 14px; padding: 18px;
}
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  flex: 1; padding: 8px; border: none; border-radius: 8px;
  background: #f1ece4; color: #8a857c; font-size: 15px; cursor: pointer;
}
.tab.active { background: #d85a30; color: #fff; }
.auth-card input {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  padding: 11px 12px; font-size: 15px; border: 1px solid #d5cfc5; border-radius: 8px;
}
#auth-submit, #add-btn, #logout-btn {
  border: none; border-radius: 8px; cursor: pointer; font-family: inherit;
}
#auth-submit, #add-btn {
  width: 100%; padding: 12px; font-size: 16px; background: #d85a30; color: #fff;
}
.msg { min-height: 20px; font-size: 14px; color: #c0392b; margin: 8px 0 0; text-align: center; }

/* ===== 主畫面 ===== */
header { display: flex; align-items: center; justify-content: space-between; }
header h1 { margin: 8px 0; text-align: left; }
.whoami { font-size: 14px; color: #8a857c; }
#logout-btn { padding: 5px 12px; font-size: 13px; background: #f1ece4; color: #3d3a34; margin-left: 6px; }

/* 統計卡 */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: #fff; border: 1px solid #e8e3da; border-radius: 12px; padding: 12px 14px;
}
.stat .l { font-size: 12px; color: #8a857c; }
.stat .n { font-size: 20px; font-weight: 700; margin-top: 2px; }
.stat.settle { grid-column: 1 / -1; background: #fef6e8; border-color: #f0d9a8; }
.stat.settle .n { color: #b9770e; font-size: 17px; }

/* 記帳表單 */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.form-grid label { display: flex; flex-direction: column; font-size: 13px; color: #8a857c; gap: 4px; }
.form-grid input, .form-grid select {
  padding: 9px 10px; font-size: 15px; border: 1px solid #d5cfc5; border-radius: 8px; font-family: inherit;
}
.form-grid label.check {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; color: #3d3a34; font-size: 15px;
}
.form-grid label.check input { width: auto; }

/* 明細列表 */
.row {
  display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid #eee6da;
}
.row .cat { flex: none; width: 42px; font-size: 13px; color: #8a857c; }
.row .main { flex: 1; }
.row .main b { font-size: 15px; }
.row .sub { font-size: 12px; color: #a09a8f; }
.row .amt { font-weight: 700; font-size: 16px; }
.row .shared-tag {
  font-size: 11px; color: #b9770e; background: #fef6e8; border-radius: 5px; padding: 1px 6px; margin-left: 6px;
}
.row .del { border: none; background: none; color: #c9a99a; font-size: 18px; cursor: pointer; }
.empty { color: #a09a8f; text-align: center; padding: 20px; }

/* ===== v2 新元素 ===== */
.month-bar { margin: 4px 0 12px; font-size: 14px; color: #8a857c; }
.month-bar select { padding: 6px 10px; font-size: 15px; border: 1px solid #d5cfc5; border-radius: 8px; }

.stat .sub2 { font-size: 12px; color: #a09a8f; margin-top: 2px; }
.stat.settle.done { background: #eaf5ee; border-color: #b6ddc4; }
.stat.settle.done .n { color: #1d8a4e; }
.settle-btn {
  margin-top: 6px; padding: 4px 10px; font-size: 12px; border: none; border-radius: 6px;
  background: #d85a30; color: #fff; cursor: pointer;
}
.stat.settle.done .settle-btn { background: #cfc9bf; color: #3d3a34; }

/* 支出／收入切換 */
.type-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.type-btn {
  flex: 1; padding: 8px; border: 1px solid #d5cfc5; border-radius: 8px;
  background: #fff; color: #8a857c; font-size: 15px; cursor: pointer; font-family: inherit;
}
.type-btn.active { background: #3d3a34; color: #fff; border-color: #3d3a34; }

.form-actions { display: flex; gap: 8px; }
.form-actions #add-btn { flex: 1; }
#cancel-edit {
  padding: 12px 16px; font-size: 15px; border: none; border-radius: 8px;
  background: #f1ece4; color: #3d3a34; cursor: pointer; font-family: inherit;
}

/* 分類統計 */
.cat-stats { margin: 12px 0 4px; }
.cat-title { font-size: 13px; color: #8a857c; margin-bottom: 6px; }
.cat-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cat-name { flex: none; width: 48px; font-size: 13px; }
.cat-bar { flex: 1; height: 8px; background: #f1ece4; border-radius: 999px; overflow: hidden; }
.cat-bar span { display: block; height: 100%; background: #d85a30; border-radius: 999px; }
.cat-amt { flex: none; font-size: 13px; color: #8a857c; font-variant-numeric: tabular-nums; }

/* 明細：收入綠色、支出橘色 */
.row .amt.income { color: #1d8a4e; }
.row .amt.expense { color: #d85a30; }
.row .edit { border: none; background: none; color: #b8b2a6; font-size: 15px; cursor: pointer; }