/* Back Office pages (menu, Orders Sync, WMS History): shared look. */
:root {
  --bg: #f2f4ee; --surface: #ffffff; --ink: #1b2a20; --muted: #5d6b60; --line: #d7ddd2;
  --grass: #2f6b45; --straw: #d9a93b; --on-grass: #f4f7f1; --warn: #b3401f;
  --font-display: "Zilla Slab", "Rockwell", Georgia, serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111814; --surface: #19231d; --ink: #e6ece4; --muted: #9aa89d; --line: #2c3a31;
    --grass: #4f9a68; --straw: #e6b84e; --on-grass: #0c1510; --warn: #ff8a6b; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111814; --surface: #19231d; --ink: #e6ece4; --muted: #9aa89d; --line: #2c3a31;
  --grass: #4f9a68; --straw: #e6b84e; --on-grass: #0c1510; --warn: #ff8a6b; color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font-body);
  padding: max(32px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px));
}
[hidden] { display: none !important; }
main { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
main.wide { max-width: 960px; }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1.05; margin: 2px 0 0; }
h2 { font-family: var(--font-display); font-size: 22px; margin: 0; }
h3 { font-size: 15px; margin: 8px 0 0; }
p { margin: 0; }
.note { color: var(--muted); }
form, .card { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.fld input {
  font: 400 17px var(--font-body); color: var(--ink); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 10px; min-height: 46px; padding: 0 12px; width: 100%;
}
button { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--straw); outline-offset: 2px; }
.primary-btn { border: 0; border-radius: 12px; min-height: 50px; padding: 0 16px; font-weight: 600; cursor: pointer; background: var(--grass); color: var(--on-grass); }
.primary-btn:disabled { opacity: .6; cursor: wait; }
.secondary-btn { border: 1.5px solid var(--line); border-radius: 12px; min-height: 44px; padding: 0 14px; font-weight: 600; cursor: pointer; background: var(--surface); color: var(--ink); }
.linkish { background: none; border: 0; padding: 0; cursor: pointer; color: var(--grass); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.msg { font-size: 14px; color: var(--grass); }
.msg.is-error { color: var(--warn); }
.home-link { display: inline-block; min-height: 32px; margin-bottom: 8px; font-weight: 600; color: var(--grass); text-decoration: none; }
.whoami { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; }
.status { font-weight: 600; }
.status.bad { color: var(--warn); }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.code { white-space: nowrap; color: var(--muted); }
.panel { display: flex; flex-direction: column; gap: 12px; }

/* Menu */
.menu { display: grid; gap: 12px; }
.menu a {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border-radius: 16px; text-decoration: none;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink);
}
.menu a:hover { border-color: var(--grass); }
.menu .title { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.1; }
.menu .sub { font-size: 14px; color: var(--muted); }