:root { --green:#17635a; --green-d:#0f4a43; --bg:#f4f8f7; --line:#d9e3e1; --red:#b3261e; --amber:#b26a00; }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background:var(--bg); color:#17211f; }
header.top { background:var(--green); color:#fff; display:flex; align-items:center; gap:16px; padding:10px 20px; flex-wrap:wrap; }
header.top h1 { font-size:18px; margin:0; font-weight:600; }
header.top nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
header.top nav button { background:transparent; color:#fff; border:0; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:15px; }
header.top nav button.on { background:rgba(255,255,255,.22); font-weight:600; }
header.top .who { font-size:13px; opacity:.9; }
header.top .out { background:#fff; color:var(--green); border:0; border-radius:8px; padding:6px 12px; cursor:pointer; }
main { padding:18px 20px 60px; max-width:1300px; margin:0 auto; }
.login { max-width:360px; margin:12vh auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px; }
.login h2 { margin-top:0; color:var(--green); }
label { display:block; font-size:13px; margin:10px 0 4px; color:#44514e; }
input, select { width:100%; padding:9px 10px; border:1px solid #b9c7c4; border-radius:8px; font-size:15px; background:#fff; }
input[type=checkbox] { width:auto; }
button.btn { background:var(--green); color:#fff; border:0; padding:9px 16px; border-radius:8px; cursor:pointer; font-size:15px; }
button.btn:hover { background:var(--green-d); }
button.btn.light { background:#fff; color:var(--green); border:1px solid var(--green); }
button.btn.red { background:var(--red); }
button.btn.small { padding:5px 10px; font-size:13px; }
button.btn:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0; }
.row.end { justify-content:flex-end; }
.grow { flex:1; min-width:160px; }
.err { color:var(--red); margin:8px 0; min-height:1em; }
.ok { color:var(--green); }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0; }
.stats { display:flex; gap:10px; flex-wrap:wrap; }
.stat { background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 14px; min-width:120px; }
.stat small { display:block; color:#5b6a67; font-size:12px; }
.stat b { font-size:18px; }
table { border-collapse:collapse; width:100%; background:#fff; }
th, td { border-bottom:1px solid var(--line); padding:7px 9px; text-align:left; font-size:14px; vertical-align:middle; }
th { background:#eaf2f0; position:sticky; top:0; cursor:pointer; white-space:nowrap; }
td.num, th.num { text-align:right; }
tr:hover td { background:#fafdfc; }
.tablewrap { overflow:auto; border:1px solid var(--line); border-radius:10px; max-height:70vh; background:#fff; }
.pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; background:#e6efed; }
.pill.red { background:#fbe3e1; color:var(--red); }
.pill.amber { background:#fff0d6; color:var(--amber); }
.thumb { width:48px; height:48px; border-radius:8px; object-fit:cover; background:#e6efed; }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.tabs button { border:1px solid var(--line); background:#fff; padding:6px 12px; border-radius:16px; cursor:pointer; font-size:13px; }
.tabs button.on { background:var(--green); color:#fff; border-color:var(--green); }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:30px 12px; z-index:10; }
.modal { background:#fff; border-radius:14px; padding:20px; width:min(720px,100%); }
.modal h3 { margin-top:0; color:var(--green); }
.recipe td input, .recipe td select { padding:6px; }
.hint { color:#5b6a67; font-size:13px; }
.warn { background:#fff0d6; border:1px solid #f0cf94; border-radius:8px; padding:8px 12px; margin:8px 0; }
.good { color:var(--green); font-weight:600; }
.bad { color:var(--red); font-weight:600; }
@media print {
  header.top, .noprint, .tabs, .row { display:none !important; }
  main { padding:0; max-width:none; }
  .tablewrap { max-height:none; overflow:visible; border:0; }
  th { position:static; }
}