*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== iOS Human Interface Guidelines トークン ===== */
:root {
  --bottom-nav-h: 64px;

  --ios-bg: #F2F2F7;                    /* systemGroupedBackground */
  --ios-bg-elevated: #FFFFFF;           /* secondarySystemGroupedBackground */
  --ios-bg-tertiary: #FFFFFF;
  --ios-label: #000000;
  --ios-label-secondary: rgba(60,60,67,0.6);
  --ios-label-tertiary: rgba(60,60,67,0.3);
  --ios-separator: rgba(60,60,67,0.29);
  --ios-fill-secondary: rgba(120,120,128,0.14);   /* input/segmented track bg */
  --ios-fill-quaternary: rgba(116,116,128,0.08);
  --card-border: rgba(0,0,0,0.045);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);

  --accent: #FF2D55;      /* systemPink：ブランドの主色 */
  --accent-rgb: 255,45,85;
  --accent-2: #AF52DE;    /* systemPurple：補助アクセント */
  --expense-color: #FF2D55;
  --income-color: #30D158; /* systemGreen */
  --system-blue: #0A84FF;
  --system-red: #FF3B30;
  --system-gray: #8E8E93;
  --system-gray2: #AEAEB2;
  --system-gray6: #F2F2F7;

  --card-radius: 14px;
  --control-radius: 10px;
  --sheet-radius: 20px;

  --nav-bar-bg: rgba(242,242,247,0.82);
  --tab-bar-bg: rgba(255,255,255,0.86);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ios-bg: #000000;
    --ios-bg-elevated: #1C1C1E;
    --ios-bg-tertiary: #2C2C2E;
    --ios-label: #FFFFFF;
    --ios-label-secondary: rgba(235,235,245,0.6);
    --ios-label-tertiary: rgba(235,235,245,0.3);
    --ios-separator: rgba(84,84,88,0.65);
    --ios-fill-secondary: rgba(120,120,128,0.24);
    --ios-fill-quaternary: rgba(118,118,128,0.18);
    --card-border: rgba(255,255,255,0.07);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.5);

    --accent: #FF375F;
    --accent-rgb: 255,55,95;
    --accent-2: #BF5AF2;
    --expense-color: #FF6482;
    --income-color: #32D74B;
    --system-blue: #0A84FF;
    --system-red: #FF453A;
    --system-gray: #8E8E93;
    --system-gray6: #1C1C1E;

    --nav-bar-bg: rgba(0,0,0,0.72);
    --tab-bar-bg: rgba(28,28,30,0.82);
  }
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Hiragino Sans', 'Segoe UI', Arial, sans-serif;
  background: var(--ios-bg);
  color: var(--ios-label);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===== ログインオーバーレイ（iOSのアラート／シート表現） ===== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.login-overlay.hidden { display: none; }

/* ===== カテゴリ選択（ポップアップ／iOSアクションシート） ===== */
.category-picker-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 90;
}

.category-picker-overlay.hidden { display: none; }

.category-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.category-picker-sheet {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: 82vh;
  max-height: 720px;
  background: var(--ios-bg-elevated);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  animation: categoryPickerSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes categoryPickerSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.category-picker-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
  border-bottom: 0.5px solid var(--ios-separator);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  flex-shrink: 0;
}

.category-picker-header h2 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: center;
  color: var(--ios-label);
}

.category-picker-back, .category-picker-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ios-fill-secondary);
  border: none;
  color: var(--ios-label-secondary);
  font-size: 1.05rem;
  font-family: inherit;
  cursor: pointer;
}

.category-picker-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}

.category-picker-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  border-bottom: 0.5px solid var(--ios-separator);
  padding: 14px 4px;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ios-label);
  cursor: pointer;
  text-align: left;
}

.category-picker-item:hover, .category-picker-item:active { background: var(--ios-fill-quaternary); }

.category-picker-icon { font-size: 1.35rem; flex-shrink: 0; }
.category-picker-label { flex: 1; }
.category-picker-chevron { color: var(--ios-label-tertiary); font-size: 1.2rem; flex-shrink: 0; }

/* PC画面ではボトムシートではなく、見やすい中央ダイアログとして表示する */
@media (min-width: 561px) {
  .category-picker-overlay {
    align-items: center;
    padding: 24px;
  }

  .category-picker-sheet {
    width: 440px;
    height: auto;
    max-height: 80vh;
    border-radius: var(--card-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: categoryPickerPopIn 0.18s ease-out;
  }

  .category-picker-header {
    border-radius: var(--card-radius) var(--card-radius) 0 0;
  }

  .category-picker-list {
    padding: 4px 16px 20px;
  }

  .category-picker-item {
    padding: 14px 6px;
    border-radius: var(--control-radius);
  }
}

@keyframes categoryPickerPopIn {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== 電卓（金額入力） ===== */
.calculator-sheet { height: auto; max-height: none; }

.calculator-body {
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.calculator-display-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calculator-display {
  flex: 1;
  text-align: right;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ios-label);
  padding: 6px 4px;
  overflow-x: auto;
  white-space: nowrap;
}

.calculator-clear-btn, .calculator-backspace-btn {
  flex-shrink: 0;
  background: var(--ios-fill-secondary);
  color: var(--ios-label-secondary);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.calculator-clear-btn:hover, .calculator-backspace-btn:hover { background: rgba(var(--accent-rgb), 0.16); }
.calculator-clear-btn:active, .calculator-backspace-btn:active { opacity: 0.6; }

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.calculator-key {
  background: var(--ios-fill-secondary);
  color: var(--ios-label);
  border: none;
  border-radius: var(--control-radius);
  padding: 16px 0;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.calculator-key:hover { background: var(--ios-fill-quaternary); }
.calculator-key:active { opacity: 0.6; }

.calculator-key-op, .calculator-key-eq {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.calculator-ok-btn { width: 100%; font-size: 1.05rem; }

.login-box {
  background: var(--ios-bg-elevated);
  border-radius: var(--sheet-radius);
  padding: 36px 32px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  max-width: 90vw;
}

.login-box h1 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ios-label);
  margin-bottom: 8px;
}

.login-box p {
  color: var(--ios-label-secondary);
  font-weight: 500;
  margin-bottom: 22px;
}

.login-password-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 260px;
}

.login-password-step input[type="password"],
.login-password-step input[type="email"] {
  text-align: center;
}

.login-error {
  color: var(--system-red);
  font-size: 0.85rem;
  font-weight: 600;
}

.login-password-actions {
  display: flex;
  gap: 10px;
}

.login-password-actions button { flex: 1; }

/* ===== 設定画面：ログイン中ユーザー表示 ===== */
.user-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--ios-fill-secondary);
  border-radius: 9px;
  padding: 2px;
  margin-bottom: 14px;
}

.user-switch-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ios-label-secondary);
  padding: 0 8px 0 6px;
}

.current-user-name {
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ios-label);
  background: var(--ios-bg-elevated);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.user-switch .link-btn {
  padding: 0 8px 0 4px;
}

/* ===== ヘッダーナビ（iOS タブバー／画面下部固定） ===== */
.header-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  display: flex;
  gap: 2px;
  background: var(--tab-bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 6px 6px calc(4px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--ios-separator);
  z-index: 15;
}

.tab-btn {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--system-gray);
  padding: 6px 2px 4px;
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn .tab-icon {
  display: flex;
  line-height: 1;
}

.tab-btn .tab-icon svg {
  width: 25px;
  height: 25px;
}

.tab-btn .tab-label {
  white-space: nowrap;
  letter-spacing: 0;
}

.tab-btn:active { opacity: 0.6; }

.tab-btn.active {
  color: var(--accent);
}

/* ===== メイン ===== */
main {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px calc(32px + var(--bottom-nav-h));
}

.tab-content { display: none; }
.tab-content.active { display: block; }

#tab-input { padding-bottom: 80px; }

/* ===== 入力：支出／収入サブタブ／レポートサブタブ（iOS セグメントコントロール） ===== */
.subtabs, .report-subtabs {
  display: flex;
  gap: 2px;
  background: var(--ios-fill-secondary);
  border-radius: var(--control-radius);
  padding: 2px;
  margin-bottom: 5px;
}

.subtab-btn, .report-subtab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--ios-label);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.subtab-btn.active, .report-subtab-btn.active {
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.subtab-content { display: none; }
.subtab-content.active { display: block; }
.report-subtab-content { display: none; }
.report-subtab-content.active { display: block; }

h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--ios-label-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

h2::before { content: none; }

h3 { font-size: 0.98rem; font-weight: 600; color: var(--ios-label); margin: 20px 0 10px; }
h4 { font-size: 0.85rem; font-weight: 600; color: var(--ios-label-secondary); margin-bottom: 8px; }

/* ===== フォーム（iOS グループ化リスト風カード） ===== */
form {
  background: var(--ios-bg-elevated);
  border-radius: var(--card-radius);
  padding: 8px 10px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 0.5px solid var(--card-border);
}

.form-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-row > * { flex: 1; min-width: 140px; }

.form-actions {
  display: flex;
  gap: 10px;
}

.form-actions button { flex: 1; }

.form-actions.sticky-actions {
  position: fixed;
  left: 50%;
  bottom: var(--bottom-nav-h);
  transform: translateX(-50%);
  width: 100%;
  max-width: 720px;
  margin: 0;
  background: var(--nav-bar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--ios-separator);
  z-index: 20;
}

/* ===== 入力（支出・収入・振替）：最も頻繁に使う画面なので、ゆとりを持った大きめサイズにする ===== */
#tab-input form {
  padding: 20px;
  gap: 20px;
}

#tab-input .form-row {
  gap: 14px;
}

#tab-input label {
  font-size: 0.85rem;
  gap: 6px;
}

#tab-input select,
#tab-input input[type="text"],
#tab-input input[type="number"] {
  font-size: 1.08rem;
  min-height: 50px;
  padding: 12px 14px;
}

#tab-input .amount-display-btn {
  font-size: 1.65rem;
  min-height: 66px;
  padding: 14px 16px;
}

#tab-input .split-item-grid .amount-display-btn {
  font-size: 1.1rem;
  min-height: 42px;
  padding: 8px 12px;
}

#tab-input .item-category-btn {
  min-height: 50px;
  font-size: 1.08rem;
  padding: 12px 14px;
}

#tab-input .form-row label:has(.date-nav-field) {
  flex: 0 1 63%;
  min-width: 0;
}

#tab-input .form-row label:has(.date-nav-field) + label {
  flex: 1 1 auto;
  min-width: 0;
}

#tab-input .date-nav-field {
  gap: 4px;
}

#tab-input .date-nav-field input {
  font-size: 0.86rem;
  padding: 12px 4px;
  text-align: center;
}

#tab-input .date-nav-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  font-size: 1.1rem;
  flex-shrink: 0;
}

#tab-input .checkbox-label {
  font-size: 0.95rem;
  gap: 8px;
}

#tab-input .template-picker-btn {
  font-size: 0.88rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72rem;
  color: var(--ios-label-secondary);
  font-weight: 500;
}

select,
input[type="text"],
input[type="number"],
input[type="password"],
textarea {
  border: none;
  border-radius: var(--control-radius);
  padding: 6px 10px;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  background: var(--ios-fill-secondary);
  color: var(--ios-label);
  transition: box-shadow 0.15s;
  width: 100%;
  min-height: 34px;
}

textarea {
  resize: vertical;
  line-height: 1.6;
  white-space: pre;
  min-height: 100px;
}

select:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.35);
  background: var(--ios-fill-secondary);
}

select { cursor: pointer; }

/* ===== Flatpickr カスタムテーマ（iOS 風フラットカレンダー） ===== */
.flatpickr-calendar {
  border-radius: var(--card-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
  border: 0.5px solid var(--card-border) !important;
  font-family: inherit !important;
  background: var(--ios-bg-elevated) !important;
  overflow: hidden;
}

.flatpickr-months {
  background: var(--ios-bg-elevated) !important;
  border-bottom: 0.5px solid var(--ios-separator);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  padding: 6px 0;
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--ios-label) !important;
  fill: var(--ios-label) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--ios-label) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.flatpickr-weekdays { background: var(--ios-bg-elevated) !important; }

span.flatpickr-weekday {
  background: var(--ios-bg-elevated) !important;
  color: var(--ios-label-secondary) !important;
  font-weight: 600 !important;
  font-family: inherit !important;
}

.flatpickr-day {
  font-family: inherit !important;
  font-weight: 500 !important;
  color: var(--ios-label) !important;
  border-radius: 50% !important;
}

.flatpickr-day:hover {
  background: var(--ios-fill-secondary) !important;
  border-color: transparent !important;
}

.flatpickr-day.today {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}

.flatpickr-day.today:hover { background: var(--ios-fill-secondary) !important; }

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}

button { font-family: inherit; }

/* ===== ボタン（iOS フィルド／ティンテッドボタン） ===== */
form button[type="submit"],
.primary-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--control-radius);
  padding: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  min-height: 40px;
}

form button[type="submit"]:hover,
.primary-btn:hover { opacity: 0.9; }

form button[type="submit"]:active,
.primary-btn:active { opacity: 0.6; }

.secondary-btn {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  border: none;
  border-radius: var(--control-radius);
  padding: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 36px;
}

.secondary-btn:hover { background: rgba(var(--accent-rgb), 0.22); }
.secondary-btn:active { opacity: 0.6; }

.hidden { display: none !important; }

/* ===== 内訳（追加分）カード：縦積みリスト ===== */
#extra-split-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

#extra-split-items:empty { margin-bottom: 0; }

.split-item {
  background: var(--ios-fill-quaternary);
  border: none;
  border-radius: var(--card-radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.split-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
}

.split-item-grid label { gap: 3px; }

.item-category-label { grid-column: 1 / -1; }

.item-category-content {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.item-category-icon { font-size: 1.15rem; flex-shrink: 0; }

.item-category-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-category-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  border-radius: var(--control-radius);
  padding: 6px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 500;
  background: var(--ios-fill-secondary);
  color: var(--ios-label);
  cursor: pointer;
  text-align: left;
  min-height: 34px;
  transition: background 0.15s;
}

.item-category-btn::after {
  content: '›';
  color: var(--ios-label-tertiary);
  font-weight: 700;
  flex-shrink: 0;
}

.item-category-btn.placeholder { color: var(--ios-label-tertiary); font-weight: 400; }

.item-category-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== 金額表示ボタン（タップで電卓を開く） ===== */
.amount-display-btn {
  width: 100%;
  text-align: left;
  border: none;
  border-radius: var(--control-radius);
  padding: 7px 14px;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  background: var(--ios-fill-secondary);
  color: var(--ios-label);
  cursor: pointer;
  min-height: 36px;
  transition: background 0.15s;
}

.amount-display-btn:hover { background: var(--ios-fill-quaternary); }
.amount-display-btn:active { opacity: 0.6; }
.amount-display-btn.placeholder { color: var(--ios-label-tertiary); }

.split-item-grid .amount-display-btn {
  font-size: 0.92rem;
  font-weight: 600;
  padding: 8px 11px;
  min-height: 38px;
}

.split-item-thirdparty {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  color: var(--ios-label);
}

.remove-item-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--ios-fill-secondary);
  border: none;
  color: var(--ios-label-secondary);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.remove-item-btn:hover { background: var(--system-red); color: #fff; }

/* ===== 一覧フィルター ===== */
.list-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: var(--ios-bg-elevated);
  border: 0.5px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 8px 12px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}

.list-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ios-label-secondary);
  cursor: pointer;
}


.list-search-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--ios-bg-elevated);
  border: 0.5px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  margin-bottom: 8px;
}

/* ===== 一覧：日付グループ ===== */
.list-date-group { margin-bottom: 10px; }

.list-date-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1px 2px 4px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--ios-separator);
}

.list-date-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ios-label-secondary);
}

.list-date-total {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.list-date-total.expense { color: var(--expense-color); }
.list-date-total.income  { color: var(--income-color); }
.list-date-total.transfer { color: var(--accent-2); }

.list-date-records {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ===== 記録リスト ===== */
.record-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.record-item {
  background: var(--ios-bg-elevated);
  border-radius: var(--control-radius);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--card-border);
}

.record-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.record-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.record-date {
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--ios-fill-secondary);
  color: var(--ios-label-secondary);
  padding: 2px 9px;
  border-radius: 20px;
  white-space: nowrap;
}

.record-category {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* カテゴリ別バッジカラー */
.record-category[data-cat="食費"]       { background: #fef3c7; color: #92400e; }
.record-category[data-cat="外食"]       { background: #ffedd5; color: #9a3412; }
.record-category[data-cat="日用品"]     { background: #dbeafe; color: #1e3a8a; }
.record-category[data-cat="交通費"]     { background: #e0f2fe; color: #0c4a6e; }
.record-category[data-cat="趣味・娯楽"] { background: #fce7f3; color: #831843; }
.record-category[data-cat="学習"]       { background: #e0e7ff; color: #3730a3; }
.record-category[data-cat="衣服・美容"] { background: #fdf2f8; color: #9d174d; }
.record-category[data-cat="交際費"]     { background: #f3e8ff; color: #6b21a8; }
.record-category[data-cat="スポーツ"]   { background: #d1fae5; color: #065f46; }
.record-category[data-cat="医療"]       { background: #fee2e2; color: #991b1b; }
.record-category[data-cat="インフラ"]   { background: #f1f5f9; color: #334155; }
.record-category[data-cat="住宅"]       { background: #ecfccb; color: #365314; }
.record-category[data-cat="車"]         { background: #f3f4f6; color: #1f2937; }
.record-category[data-cat="税"]         { background: #f5f5f4; color: #44403c; }
.record-category[data-cat="保険"]       { background: #ede9fe; color: #4c1d95; }
.record-category[data-cat="資産形成"]   { background: #ecfdf5; color: #064e3b; }
.record-category.masked { background: var(--ios-fill-secondary); color: var(--ios-label-tertiary); }

.record-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ios-label);
}

.record-memo {
  font-size: 0.85rem;
  color: var(--ios-label-secondary);
}

.record-memo.masked-text {
  color: var(--ios-label-tertiary);
  letter-spacing: 0.1em;
}

.bearer-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.bearer-badge.shared { background: #dcfce7; color: #166534; }

.record-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.record-amount {
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.record-amount.expense  { color: var(--expense-color); }
.record-amount.income   { color: var(--income-color); }
.record-amount.transfer { color: var(--accent-2); }

.record-item.clickable {
  cursor: pointer;
  transition: opacity 0.15s;
}

.record-item.clickable:active { opacity: 0.6; }

.edit-btn, .delete-btn {
  background: var(--ios-fill-secondary);
  border: none;
  color: var(--ios-label-secondary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.edit-btn:hover { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); }
.delete-btn:hover { background: rgba(255,59,48,0.14); color: var(--system-red); }

/* ===== 月ナビ ===== */
.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
  background: var(--ios-bg-elevated);
  border-radius: var(--card-radius);
  padding: 6px 16px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--card-border);
}

.month-nav button {
  background: var(--ios-fill-secondary);
  color: var(--accent);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s;
}

.month-nav button:hover { background: rgba(var(--accent-rgb), 0.16); }
.month-nav button:active { opacity: 0.6; }

/* ===== 日付入力の前日・翌日ナビ（全画面共通） ===== */
.date-nav-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-nav-field input { flex: 1; min-width: 0; }

.date-nav-btn {
  background: var(--ios-fill-secondary);
  color: var(--accent);
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  min-height: 30px;
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s;
}

.date-nav-btn:hover { background: rgba(var(--accent-rgb), 0.16); }
.date-nav-btn:active { opacity: 0.6; }

#month-label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ios-label);
  min-width: 90px;
  text-align: center;
}

/* ===== レポート ===== */
.report-card {
  background: var(--ios-bg-elevated);
  border-radius: var(--card-radius);
  padding: 10px 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--card-border);
  margin-bottom: 10px;
}

.settlement-result {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ios-label);
  text-align: center;
  padding: 10px 0;
}

.settlement-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}

.settlement-paid-label {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: var(--ios-label);
}

.mode-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--ios-fill-secondary);
  border-radius: var(--control-radius);
  padding: 2px;
  margin-bottom: 10px;
}

.trend-graph-select-label { margin-bottom: 16px; }

.mode-tab-btn {
  flex: 1;
  min-width: 64px;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--ios-label);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.mode-tab-btn.active {
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.balance-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.balance-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 4px;
  border-top: 0.5px solid var(--ios-separator);
}

.balance-summary-row:first-child { border-top: none; }

.balance-label {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ios-label-secondary);
}

.balance-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ios-label);
  font-variant-numeric: tabular-nums;
}

.balance-value.expense { color: var(--expense-color); }
.balance-value.income  { color: var(--income-color); }

.balance-net-row {
  border-top: 0.5px solid var(--ios-separator);
  margin-top: 2px;
  padding-top: 6px;
}

.balance-summary-row.clickable, .breakdown-row-clickable {
  cursor: pointer;
  transition: opacity 0.15s;
}

.balance-summary-row.clickable:active, .breakdown-row-clickable:active { opacity: 0.6; }

.chart-tabs {
  display: flex;
  gap: 2px;
  background: var(--ios-fill-secondary);
  border-radius: var(--control-radius);
  padding: 2px;
  margin-bottom: 16px;
}

.chart-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 7px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--ios-label);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}

.chart-tab-btn.active {
  background: var(--ios-bg-elevated);
  color: var(--ios-label);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.chart-type-content { display: none; }
.chart-type-content.active { display: block; }

.chart-card-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.chart-card-header h3 { margin: 0; }

.pie-chart-wrap {
  position: relative;
  height: 200px;
  width: 100%;
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
}

.breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 4px;
  border-top: 0.5px solid var(--ios-separator);
}

.breakdown-row:first-child { border-top: none; }

.breakdown-label {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 0.88rem;
  min-width: 0;
}

.breakdown-parent {
  font-weight: 500;
  color: var(--ios-label-secondary);
  white-space: nowrap;
}

.breakdown-sep {
  color: var(--ios-label-tertiary);
}

.breakdown-sub {
  font-weight: 400;
  color: var(--ios-label-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breakdown-amount {
  min-width: 80px;
  text-align: right;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ios-label);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.detail-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ios-label-secondary);
  cursor: pointer;
}

.balance-shared-toggle-label,
.calendar-shared-toggle-label {
  margin-bottom: 10px;
}

/* ===== カレンダー ===== */
.calendar-card {
  background: var(--ios-bg-elevated);
  border-radius: var(--card-radius);
  padding: 10px 8px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--card-border);
  margin-bottom: 10px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 4px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ios-label-secondary);
}

.calendar-weekdays span.calendar-weekday-sun { color: var(--system-red); }
.calendar-weekdays span.calendar-weekday-sat { color: var(--system-blue); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-day {
  min-height: 52px;
  border-radius: 10px;
  background: var(--ios-fill-quaternary);
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.calendar-day.empty {
  background: transparent;
}

.calendar-day.today {
  background: rgba(var(--accent-rgb), 0.1);
  border: 1.5px solid var(--accent);
}

.calendar-day:not(.empty) {
  cursor: pointer;
  transition: background 0.15s;
}

.calendar-day:not(.empty):hover {
  background: var(--ios-fill-secondary);
}

.calendar-day.selected {
  background: var(--accent);
  border-color: transparent;
}

.calendar-day.selected .calendar-day-num { color: #fff; }
.calendar-day.selected .calendar-day-income { color: #d1fae5; }
.calendar-day.selected .calendar-day-expense { color: #ffd7e0; }

.calendar-day-detail { margin-top: 4px; }

.calendar-day-detail h3 { margin-bottom: 8px; }

.calendar-day-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ios-label);
}

.calendar-day-num.calendar-day-sunday { color: var(--system-red); }
.calendar-day-num.calendar-day-saturday { color: var(--system-blue); }

.calendar-day-income,
.calendar-day-expense {
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.calendar-day-income { color: var(--income-color); }
.calendar-day-expense { color: var(--expense-color); }

@media (max-width: 560px) {
  .calendar-day { min-height: 50px; }
  .calendar-day-income, .calendar-day-expense { font-size: 0.55rem; }
}

.paid-by-owner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.paid-by-owner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-top: 0.5px solid var(--ios-separator);
}

.paid-by-owner-row:first-child { border-top: none; }

.paid-by-owner-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ios-label-secondary);
}

.paid-by-owner-amount {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ios-label);
  font-variant-numeric: tabular-nums;
}

.paid-by-owner-diff-row {
  border-top: 0.5px solid var(--ios-separator);
  margin-top: 4px;
  padding-top: 14px;
}

/* ===== レポート：資産タブ ===== */
.asset-report-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}

.asset-report-row {
  padding: 10px 4px;
  border-top: 0.5px solid var(--ios-separator);
}

.asset-report-row:first-child { border-top: none; }

.asset-report-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.asset-report-name { font-size: 0.92rem; font-weight: 600; color: var(--ios-label); }

.asset-report-figures {
  display: flex;
  gap: 8px;
}

.asset-report-figure {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ios-fill-quaternary);
  border-radius: var(--control-radius);
  padding: 6px 10px;
}

.asset-report-figure.clickable { cursor: pointer; transition: opacity 0.15s; }
.asset-report-figure.clickable:active { opacity: 0.6; }

.asset-report-figure-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ios-label-tertiary);
}

.asset-report-figure-value {
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ios-label);
}

.asset-report-figure-value.income { color: var(--income-color); }
.asset-report-figure-value.expense { color: var(--expense-color); }

/* ===== 設定メニュー ===== */
.settings-menu-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--ios-bg-elevated);
  border: 0.5px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ios-label);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.settings-menu-item:active { opacity: 0.6; }

.settings-menu-icon { font-size: 1.2rem; flex-shrink: 0; }
.settings-menu-label { flex: 1; }
.settings-menu-chevron { color: var(--ios-label-tertiary); font-size: 1.1rem; flex-shrink: 0; }

.settings-back-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.98rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 0 14px;
}

.settings-back-btn:active { opacity: 0.6; }

.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* ===== テンプレート ===== */
.template-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.template-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-top: 0.5px solid var(--ios-separator);
}

.template-row:first-child { border-top: none; }

.template-info { flex: 1; min-width: 0; }

.template-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ios-label);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.template-meta {
  font-size: 0.78rem;
  color: var(--ios-label-secondary);
  margin-top: 2px;
}

.template-recurring-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  padding: 1px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.template-picker-btn {
  display: block;
  margin: 0 0 6px auto;
}

.template-picker-item-name {
  font-size: 0.7rem;
  color: var(--ios-label-tertiary);
  margin-left: 4px;
}

/* ===== 資産・設定 ===== */
.settings-card {
  background: var(--ios-bg-elevated);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  border: 0.5px solid var(--card-border);
  margin-bottom: 12px;
}

.settings-hint {
  font-size: 0.8rem;
  color: var(--ios-label-tertiary);
  margin-bottom: 8px;
}

.asset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.asset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 0.5px solid var(--ios-separator);
}

.asset-row:first-child { border-top: none; }

.asset-category {
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--ios-fill-secondary);
  color: var(--ios-label-secondary);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.asset-name { flex: 1; font-size: 0.92rem; font-weight: 500; }

.asset-balance-input {
  width: 130px !important;
  text-align: right;
}

#expense-category-text { font-family: 'SF Mono', 'Courier New', monospace; font-size: 0.88rem; }

.export-section { margin-top: 16px; }

.export-checkbox-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 8px;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.link-btn:hover { opacity: 0.7; }

.export-checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}

#export-date-clear { margin-bottom: 4px; }

#category-visibility-expense-list,
#category-visibility-income-list {
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 280px;
}

.category-visibility-sub {
  margin-left: 20px;
  font-size: 0.85rem;
  color: var(--ios-label-secondary);
}

/* ===== 空表示 ===== */
.empty-note {
  text-align: center;
  color: var(--ios-label-tertiary);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 36px 0;
}

.empty-note::before { content: none; }

/* ===== レスポンシブ ===== */
@media (max-width: 560px) {
  header { padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px; }
  main { padding-left: 10px; padding-right: 10px; }
}