:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-sub: #efede7;
  --text: #1f1e1c;
  --text-sub: #6b6a65;
  --border: rgba(31, 30, 28, 0.12);
  --ok-bg: #e4f2e9;
  --ok-text: #0f6e56;
  --ok-bar: #1d9e75;
  --ng-bg: #fbe6e4;
  --ng-text: #a32d2d;
  --ng-bar: #e24b4a;
  --warn-bg: #faeeda;
  --warn-text: #854f0b;
  --accent: #185fa5;
  --radius: 12px;
  --tab-h: 56px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413;
    --surface: #1f1e1c;
    --surface-sub: #2a2926;
    --text: #f1efe8;
    --text-sub: #a8a69e;
    --border: rgba(241, 239, 232, 0.14);
    --ok-bg: #12352a;
    --ok-text: #7fd8b4;
    --ok-bar: #3fbf8f;
    --ng-bg: #3d1a19;
    --ng-text: #f4a3a2;
    --ng-bar: #e86564;
    --warn-bg: #3b2a10;
    --warn-text: #f2c47a;
    --accent: #85b7eb;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding:
    calc(env(safe-area-inset-top) + 16px)
    calc(env(safe-area-inset-right) + 16px)
    calc(env(safe-area-inset-bottom) + var(--tab-h) + 16px)
    calc(env(safe-area-inset-left) + 16px);
  -webkit-tap-highlight-color: transparent;
}

main { max-width: 480px; margin: 0 auto; }

.num { font-variant-numeric: tabular-nums; }
.sub { color: var(--text-sub); font-size: 13px; margin: 0; }
h1 { font-size: 15px; font-weight: 500; color: var(--text-sub); margin: 0 0 12px; }

.card {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

/* ホーム */
.hero-label { margin: 0; font-size: 14px; color: var(--text-sub); }
.hero {
  margin: 0;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.hero.over { color: var(--ng-text); }
.bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-sub);
  overflow: hidden;
  margin: 10px 0 0;
}
.bar > i { display: block; height: 100%; background: var(--ok-bar); border-radius: 4px; }
.bar.over > i { background: var(--ng-bar); }

.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pair .card { padding: 12px 14px; }
.pair .val { font-size: 22px; font-weight: 500; margin: 0; }

.notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 14px;
}

.updated { text-align: center; margin-top: 16px; }

/* 履歴 */
.days { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.day-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.day.ok .day-head { background: var(--ok-bg); color: var(--ok-text); }
.day.ng .day-head { background: var(--ng-bg); color: var(--ng-text); }
.day.plain .day-head { background: var(--surface-sub); color: var(--text); }
.day.today .day-head { outline: 1.5px solid currentColor; outline-offset: -1.5px; }
.day-head .amt { font-weight: 500; }
.chev { width: 18px; height: 18px; flex: none; transition: transform 0.15s ease; }
.day[open-state="true"] .chev { transform: rotate(180deg); }
.day[open-state="true"] .day-head { border-radius: var(--radius) var(--radius) 0 0; }

.detail {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 8px 16px 12px;
}
.detail-sum { margin: 4px 0 6px; }
.items { list-style: none; margin: 0; padding: 0; }
.items li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 8px 0;
  border-top: 0.5px solid var(--border);
  font-size: 14px;
}
.items .time { color: var(--text-sub); }
.items .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  background: var(--warn-bg);
  color: var(--warn-text);
  vertical-align: 1px;
}

/* 見通し */
.rows { display: grid; gap: 8px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row + .row { border-top: 0.5px solid var(--border); padding-top: 8px; }
.section-title { font-size: 13px; color: var(--text-sub); margin: 20px 0 8px; }

/* タブ */
.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--surface);
  border-top: 0.5px solid var(--border);
}
.tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--text-sub);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.tabs button[aria-current="page"] { color: var(--accent); }
.tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}