:root, [data-theme="light"] {
  /* palette — approximated from reference screenshot, tune if it doesn't quite match */
  --color-bg: #ece4cf;
  --color-card-bg: #f6f1e2;
  --color-fg: #1f3d2b;
  --color-muted: #5c6f56;
  --color-accent: #7a9b5c;
  --color-accent-fg: #f6f1e2;
  --radius-lg: 18px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* retint Pico so untouched elements (links, focus rings, checkboxes) match */
  --pico-background-color: var(--color-bg);
  --pico-color: var(--color-fg);
  --pico-primary: var(--color-accent);
  --pico-primary-background: var(--color-accent);
  --pico-primary-hover-background: color-mix(in srgb, var(--color-accent) 85%, black);
  --pico-primary-inverse: var(--color-accent-fg);
  --pico-card-background-color: var(--color-card-bg);
  --pico-card-border-color: var(--color-fg);
  --pico-border-radius: var(--radius-md);
  --pico-form-element-background-color: transparent;
  --pico-form-element-border-color: var(--color-fg);
  --pico-form-element-color: var(--color-fg);
  --pico-form-element-placeholder-color: var(--color-muted);
  --pico-font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { background: var(--color-bg); }
.container { max-width: 720px; }

.task-card {
  background: var(--color-card-bg);
  border: 2px solid var(--color-fg);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.new-task-card { position: relative; padding-top: 1.6rem; }
.new-task-card .pill { position: absolute; top: -0.6rem; left: 1rem; }

.pill {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.pill-dark { background: var(--color-fg); color: var(--color-card-bg); }
.pill-outline { border: 1.5px solid var(--color-fg); color: var(--color-fg); background: transparent; padding: .15rem .6rem; }

.new-task-card input[type=text],
.new-task-card textarea,
.new-task-card select {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--color-fg);
  border-radius: var(--radius-md);
  color: var(--color-fg);
  margin-bottom: .6rem;
}
.new-task-card textarea { resize: vertical; }

.add-task-btn {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  border: none;
  border-radius: var(--radius-pill);
  padding: .65rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.add-task-btn:hover { background: color-mix(in srgb, var(--color-accent) 85%, black); }

#monitoring-section h3, #do-now-section h3 { display: flex; align-items: center; gap: .5rem; }
#monitoring-section h3 .muted, #do-now-section h3 .muted { font-weight: 400; color: var(--color-muted); font-size: .85rem; }

.task-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.task-details { color: var(--color-muted); font-size: .9rem; margin: .35rem 0 0; }
.task-delete, .task-toggle { padding: .1rem .5rem; margin-top: .5rem; }
.tag { display: inline-block; margin-left: .5rem; padding: .1rem .4rem; border-radius: .3rem; background: color-mix(in srgb, var(--color-fg) 12%, transparent); }
.answer { margin-top: .3rem; font-size: .9rem; }

#voice-inbox { margin-bottom: 1.5rem; }
#mic-btn {
  width: 100%; font-size: 1.05rem; font-weight: 700;
  background: var(--color-accent); color: var(--color-accent-fg);
  border: none; border-radius: var(--radius-pill); padding: .7rem;
}
.voice-capture { background: var(--color-card-bg); border: 2px solid var(--color-fg); border-radius: var(--radius-lg); padding: .75rem; margin-bottom: .75rem; }
.voice-capture textarea { margin-bottom: .5rem; background: transparent; border: 1.5px solid var(--color-fg); border-radius: var(--radius-md); color: var(--color-fg); }
.voice-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.voice-actions button { flex: 1 1 auto; padding: .4rem .6rem; font-size: .85rem; border-radius: var(--radius-pill); }