:root {
  color: var(--tg-theme-text-color, #111827);
  background: var(--tg-theme-bg-color, #ffffff);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; }

button, input, select, textarea { font: inherit; }

.app-shell {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.25rem 1rem calc(2rem + env(safe-area-inset-bottom));
}

header { margin-bottom: 1.5rem; }

h1, h2, p { margin-top: 0; }
h1 { font-size: 2rem; margin-bottom: 0; }
h2 { font-size: 1.1rem; margin-bottom: .75rem; }

.eyebrow {
  color: var(--tg-theme-hint-color, #6b7280);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: .25rem;
  text-transform: uppercase;
}

.composer, .todo-group {
  background: var(--tg-theme-secondary-bg-color, #f3f4f6);
  border-radius: .9rem;
  margin-bottom: 1rem;
  padding: 1rem;
}

label, .new-section-option span {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  margin-bottom: .35rem;
}

textarea, select, input {
  background: var(--tg-theme-bg-color, #ffffff);
  border: 1px solid var(--tg-theme-hint-color, #9ca3af);
  border-radius: .55rem;
  color: inherit;
  margin-bottom: .9rem;
  padding: .65rem;
  width: 100%;
}

textarea { resize: vertical; }

button {
  background: var(--tg-theme-button-color, #2481cc);
  border: 0;
  border-radius: .55rem;
  color: var(--tg-theme-button-text-color, #ffffff);
  cursor: pointer;
  font-weight: 700;
  padding: .7rem 1rem;
}

button:disabled, input:disabled { cursor: not-allowed; opacity: .55; }

.section-heading { align-items: baseline; display: flex; justify-content: space-between; }
.quiet-button { font-size: .85rem; padding: .45rem .7rem; }
.status { color: var(--tg-theme-hint-color, #6b7280); font-size: .9rem; margin: .6rem 0 0; }
.status.error { color: #d14343; }
.todo-group h3 { font-size: 1rem; margin: 0 0 .55rem; }
.todo-group ul { list-style: none; margin: 0; padding: 0; }
.todo-group li { align-items: center; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); display: flex; gap: .75rem; justify-content: space-between; padding: .6rem 0; }
.todo-group li:first-child { border-top: 0; padding-top: 0; }
.done-button { font-size: .8rem; flex: 0 0 auto; padding: .4rem .6rem; }
.empty { color: var(--tg-theme-hint-color, #6b7280); }