:root {
  color-scheme:light;
  --bg:#f5f6f0;
  --panel:#fff;
  --ink:#25372b;
  --muted:#647165;
  --line:#dde5d9;
  --green:#315d42;
  --soft:#e8efdf;
  --negative:#a63925;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
}
textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.notice-link {display:block;padding:12px 18px;background:#fff0dc;color:#794615;font-weight:600;}
.notice-badge {background:#fff0dc;border-radius:7px;padding:2px 7px;color:#794615;}
.checkbox-label {display:flex;align-items:center;gap:10px;}
.checkbox-label input {width:auto;}
h1,
.work-row > strong {
  overflow-wrap: anywhere;
}
.section-heading {
  margin-top: 28px;
  margin-bottom: 12px;
}
.section-spacing {
  margin-top: 20px;
}
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.action-row form {
  margin: 0;
}
.supply-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.supply-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  overflow-wrap: anywhere;
}
.supply-choice > div {
  min-width: 0;
}
.operation-result {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  margin: 20px 0;
}
.date-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.date-fields label {
  min-width: 0;
}
.date-fields input {
  min-width: 0;
}
.receipt-record,
.counts-report {
  margin-top: 18px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.receipt-record .section-meta {
  margin: 0 0 10px;
}
.receipt-record .secondary {
  margin-top: 12px;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
  align-items: end;
}
@media(max-width:600px) {
  .filter-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input,select {
  font:inherit;
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #8fac66;
  outline-offset:3px;
}

.app-shell {
  max-width:1040px;
  margin:auto;
  min-height:100svh;
}

.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:20px 28px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.4px;
}

.brand img {
  border-radius:10px;
}

.brand small,.person small {
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
}

.person {
  text-align:right;
  font-size:14px;
}

.test-banner {
  padding:8px 28px;
  font-size:12px;
  background:var(--soft);
  color:var(--green);
}

main {
  padding:32px 28px 45px;
  min-height:60svh;
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.6px;
  font-weight:600;
  color:var(--green);
  margin-bottom:12px;
}

h1 {
  font-size:34px;
  line-height:1.15;
  font-weight:600;
  letter-spacing:-1.1px;
  margin:0 0 12px;
}

h2 {
  font-size:18px;
  font-weight:600;
  margin:0;
}

p {
  margin:8px 0;
}

.muted,.caption,.product-title {
  color:var(--muted);
}

.caption {
  font-size:12px;
  margin-top:26px;
}

.menu-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:25px;
}

.menu-tile {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  min-height:137px;
  padding:16px;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:17px;
  color:var(--muted);
}

.menu-tile strong {
  font-size:16px;
  line-height:1.3;
  font-weight:500;
  margin:16px 0 7px;
  color:var(--ink);
}

.menu-tile small {
  font-size:12px;
}

.menu-tile:disabled {
  background:transparent;
  opacity:.8;
}

.menu-tile.available {
  border-color:#bacba9;
  background:#eef4e6;
}

.tile-top {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.available .tile-top {
  color:var(--green);
}

label {
  display:block;
  font-size:14px;
  font-weight:500;
  margin:16px 0;
}

input,select {
  width:100%;
  display:block;
  min-height:46px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--panel);
  color:var(--ink);
  margin-top:6px;
  font-size:16px;
}

.primary,.secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:11px;
  padding:11px 18px;
  font-weight:500;
  border:1px solid var(--line);
  text-align:center;
}

.primary {
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}

.secondary {
  background:var(--panel);
  color:var(--green);
}

.auth-panel {
  max-width:400px;
  margin:20px auto 50px;
}

.auth-panel h1 {
  font-size:38px;
}

.auth-panel form {
  margin-top:28px;
}

.auth-panel .primary {
  width:100%;
  margin-top:10px;
}

.auth-panel.compact {
  margin:25px 0;
}

.alert {
  background:#fff0e9;
  border:1px solid #eac6b5;
  color:#903921;
  border-radius:11px;
  padding:12px;
  font-size:14px;
}

.search-form {
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.search-form label {
  flex:1 1 240px;
  margin:0;
}

.section-meta {
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
  margin:25px 0 12px;
}

.section-meta strong {
  font-size:18px;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.stock-row {
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

.thumb {
  width:56px;
  min-width:56px;
  height:72px;
  border-radius:9px;
  background:var(--panel);
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
}

.thumb span {
  font-size:10px;
  color:var(--muted);
  position:absolute;
}

.thumb img {
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain;
  background:var(--panel);
}

.thumb img.failed {
  display:none;
}

.stock-content {
  min-width:0;
  flex:1;
}

.stock-content h2 {
  overflow-wrap:anywhere;
}

.product-title {
  font-size:12px;
  margin:4px 0;
  overflow-wrap:anywhere;
}

.stock-quantities {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:10px;
}

.stock-quantities span {
  font-size:12px;
  color:var(--muted);
}

.stock-quantities strong {
  display:block;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.stock-quantities .negative {
  color:var(--negative);
}

.maker-group {
  margin:18px 0;
  background:var(--panel);
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
}

.maker-group>h2 {
  color:var(--green);
  border-bottom:1px solid var(--line);
  padding-bottom:12px;
}

.work-row {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.work-row:last-child {
  border-bottom:0;
  padding-bottom:0;
}

.work-row>div {
  min-width:0;
}

.quantity {
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

.pagination {
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:22px;
}

.bottom-nav {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  position:sticky;
  bottom:0;
  background:var(--panel);
  border-top:1px solid var(--line);
  padding:8px 12px max(10px,env(safe-area-inset-bottom));
  z-index:5;
}

.bottom-nav a,.bottom-nav button {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size:11px;
  color:var(--muted);
  background:transparent;
  border:0;
  min-height:46px;
  width:100%;
  border-radius:9px;
}

.bottom-nav span {
  font-size:22px;
  line-height:1.2;
}

.bottom-nav a[aria-current=page] {
  background:var(--soft);
  color:var(--green);
}

.bottom-nav form {
  margin:0;
}

.empty {
  padding:35px 0;
}

.empty h1 {
  font-size:25px;
}

.empty p {
  color:var(--muted);
}

.empty .secondary {
  margin-top:15px;
}

@media(min-width:740px) {
  .stock-row {
    padding:20px;
  }
  .stock-quantities {
    max-width:380px;
  }
  .bottom-nav {
    max-width:540px;
    margin:auto;
    border:1px solid var(--line);
    border-radius:16px 16px 0 0;
  }
  .auth-panel {
    margin-top:40px;
  }
}

@media(max-width:600px) {
  .app-header {
    padding:17px 18px;
  }
  .brand {
    font-size:18px;
  }
  .person {
    font-size:12px;
    max-width:125px;
  }
  .test-banner {
    padding:8px 18px;
  }
  main {
    padding:26px 18px 34px;
  }
  h1 {
    font-size:30px;
  }
  .menu-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .menu-tile {
    padding:13px;
    min-height:140px;
  }
  .auth-panel h1 {
    font-size:34px;
  }
  .search-form .primary {
    flex:1;
  }
  .stock-quantities {
    gap:10px;
  }
  .stock-row {
    gap:11px;
  }
}

@media(prefers-color-scheme:dark) {
  :root {
    color-scheme:dark;
    --bg:#1c241e;
    --panel:#263029;
    --ink:#edf2e8;
    --muted:#b3c0af;
    --line:#3d4c3e;
    --green:#b4d49f;
    --soft:#32442e;
    --negative:#ffad95;
  }
  .primary {
    color:#1c2b1c;
  }
  .menu-tile.available {
    background:#2c3d29;
    border-color:#526a45;
  }
  .alert {
    background:#422e26;
    border-color:#704733;
    color:#ffd0bc;
  }
}