:root {
  --bg: #f6f4ef;
  --fg: #1d2433;
  --muted: #6b7280;
  --accent: #2f6fdb;
  --ok: #1f9d55;
  --late: #d4a106;
  --bad: #d64545;
  --missed: #9ca3af;
  --retry: #e07b24;
  --bar-h: 52px;
  --tap: 44px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--bar-h);
  padding: 0 8px;
  background: var(--fg);
  color: #fff;
}
.topbar h1 { flex: 1; margin: 0; font-size: 18px; font-weight: 600; }

#app { flex: 1; overflow: auto; }
.screen { padding: 16px; }
.empty { color: var(--muted); }

.btn, .icon-btn {
  min-width: var(--tap);
  min-height: var(--tap);
  border: 0;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}
.btn { padding: 0 18px; background: #e5e7eb; color: var(--fg); }
.btn.primary { background: var(--accent); color: #fff; }
.icon-btn { background: transparent; color: inherit; font-size: 22px; }