:root { color-scheme: light dark; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  display: grid;
  place-items: start center;
  min-height: 100vh;
}
main { width: min(34rem, 100% - 2rem); padding: 2rem 0 3rem; }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; }
[hidden] { display: none !important; }

fieldset { border: 1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius: .75rem; padding: 1rem 1.25rem; margin: 0 0 1rem; }
legend { font-weight: 600; padding: 0 .4rem; }
.ajuda { margin: .25rem 0 .75rem; font-size: .9rem; opacity: .75; }
.grupo { margin: 1rem 0; }
.rotulo { display: block; font-weight: 600; margin-bottom: .4rem; }
.linha { display: flex; gap: .6rem; align-items: flex-start; margin: .75rem 0; cursor: pointer; }
.linha input { margin-top: .3rem; }

.dias { display: flex; flex-wrap: wrap; gap: .4rem; }
.dia {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .6rem; border-radius: .5rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}
.dia:has(input:checked) { background: color-mix(in srgb, currentColor 14%, transparent); font-weight: 600; }

select, button { font: inherit; padding: .55rem .8rem; border-radius: .5rem; border: 1px solid currentColor; background: transparent; color: inherit; }
select { min-width: 10rem; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button.secundario { border-color: color-mix(in srgb, currentColor 35%, transparent); }
.acoes { display: flex; gap: .6rem; }
#status { min-height: 1.5rem; margin: .75rem 0 0; }
#status.erro { color: #c0392b; }