:root { font-family: Arial, Helvetica, sans-serif; color: #202521; background: #f3f3ee; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
header { padding: 20px max(24px, calc((100vw - 960px)/2)); background: white; border-bottom: 1px solid #c9cec5; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
header strong { font-size: 1.1rem; } header span { font-weight: normal; color: #555d56; }
a { color: #244d37; text-underline-offset: 4px; }
main { max-width: 1008px; margin: 32px auto; padding: 0 24px; }
h1 { margin: 0 0 4px; font-size: 1.8rem; } h2 { margin: 24px 0 12px; font-size: 1.15rem; } p { margin: 0; color: #555d56; }
.heading, .info, .list-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
button, select { font: inherit; min-height: 48px; cursor: pointer; }
button { border: 1px solid #244d37; border-radius: 3px; background: white; color: #244d37; padding: 8px 14px; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid #986400; outline-offset: 3px; }
.days { display: flex; gap: 4px; } .days button[aria-pressed=true] { background: #244d37; color: white; }
.info { border-bottom: 1px solid #c9cec5; margin: 20px 0; padding-bottom: 14px; font-size: .9rem; color: #555d56; }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .stats div { padding: 16px; background: white; border: 1px solid #c9cec5; } .stats strong { display: block; font-size: 1.7rem; } .stats span { color: #555d56; font-size: .9rem; }
.batches { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; } .batch { padding: 18px; border: 1px solid #c9cec5; background: white; } .batch h3 { font-size: 1rem; margin: 0 0 12px; } .quantity { font-size: 2rem; font-weight: bold; } .batch p { font-size: .85rem; } .batch button { width: 100%; margin-top: 16px; } .batch button:disabled { border-color: #c9cec5; color: #555d56; cursor: default; }
.list-heading { margin: 22px 0 12px; } .list-heading h2 { margin: 0; } label { color: #555d56; font-size: .85rem; } select { margin-left: 8px; padding: 8px; background: white; color: #202521; border: 1px solid #c9cec5; }
.table-wrap { overflow-x: auto; border: 1px solid #c9cec5; background: white; } table { border-collapse: collapse; width: 100%; text-align: left; font-size: .9rem; } th, td { padding: 14px 16px; border-bottom: 1px solid #e0e2dc; } th { background: #edf0e8; font-weight: normal; color: #555d56; } tbody tr:last-child td { border-bottom: 0; } .state { white-space: nowrap; } .state.ready { font-weight: bold; color: #244d37; } .status { margin-top: 12px; font-size: .85rem; }
@media(max-width:650px) { .heading { align-items: start; flex-direction: column; } .batches { grid-template-columns: 1fr; } .stats { gap: 8px; } .stats div { padding: 12px; } header { padding: 16px 20px; font-size: .8rem; } main { padding: 0 20px; } .list-heading { align-items: start; flex-direction: column; } }

@media(max-width:650px) {
  :root { font-family: -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
  header { padding: 14px 16px; gap: 8px; } header strong { font-size: 1rem; } header a { font-size: .75rem; } header span { display: block; font-size: .7rem; }
  main { margin: 20px auto; padding: 0 16px 28px; }
  h1 { font-size: 1.5rem; } h2 { font-size: 1rem; } #date { font-size: .85rem; }
  .heading { gap: 14px; } .days { width: 100%; } .days button { flex: 1; }
  .info { margin: 16px 0; font-size: .8rem; }
  .stats strong { font-size: 1.45rem; } .stats span { font-size: .75rem; }
  .batch { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 14px; }
  .batch h3 { margin: 0 0 4px; font-size: .95rem; }
  .batch .quantity { grid-column: 2; grid-row: 1 / 3; font-size: 1.8rem; align-self: center; }
  .batch p { font-size: .75rem; } .batch button { grid-column: 1 / -1; margin-top: 12px; }
  th,td { padding: 12px 10px; font-size: .8rem; } table { min-width: 440px; }
  .status { font-size: .8rem; }
}