:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #1c1c1e;
  --muted: #8a8a8e;
  --line: #e2e3e7;
  --accent: #2f855a;
  --accent-ink: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding-bottom: 3rem;
  -webkit-text-size-adjust: 100%;
}

.topbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(env(safe-area-inset-top), 0.75rem) 1rem 0.75rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.topbar h1 { font-size: 1.15rem; margin: 0; }
.logout { color: var(--muted); text-decoration: none; font-size: 0.85rem; }

.flash {
  margin: 0.75rem 1rem;
  padding: 0.7rem 0.9rem;
  background: #e6f4ea;
  border: 1px solid #b7dfc5;
  border-radius: 0.6rem;
  font-size: 0.9rem;
}
.flash.error { background: #fdecec; border-color: #f3b6b6; }

.empty, .foot { color: var(--muted); text-align: center; margin: 2rem 1rem; font-size: 0.85rem; }

.group { margin: 1rem 0.75rem; }
.group h2 {
  font-size: 0.95rem;
  margin: 0 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.group .count { color: var(--muted); font-size: 0.75rem; font-weight: 400; }

.task {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  padding: 0.8rem 0.9rem;
  margin-bottom: 0.6rem;
}
.task.done { opacity: 0.55; }

.task-head { display: flex; align-items: baseline; gap: 0.5rem; }
.title { font-size: 0.98rem; line-height: 1.35; }

.badge {
  flex: none;
  font-size: 0.68rem;
  padding: 0.15rem 0.45rem;
  border-radius: 1rem;
  color: #fff;
  white-space: nowrap;
}
.b-open { background: #8a8a8e; }
.b-in_progress { background: #3182ce; }
.b-completed { background: var(--accent); }

.completed-at { color: var(--muted); font-size: 0.75rem; margin-top: 0.35rem; }

.complete-box { margin-top: 0.6rem; }
.complete-box summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.85rem;
  list-style: none;
}
.complete-box summary::-webkit-details-marker { display: none; }

.complete-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.6rem; }
.complete-form label { font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.25rem; }
textarea, select, input[type=password] {
  font: inherit;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--ink);
  width: 100%;
}

.btn-complete {
  appearance: none;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.8rem;
  border-radius: 0.6rem;
  cursor: pointer;
}
.btn-complete:active { opacity: 0.85; }

.login-wrap { max-width: 22rem; margin: 4rem auto; padding: 0 1.25rem; }
.login-wrap h1 { font-size: 1.3rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.login-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }