:root{
  --bg:#F5F5F7;
  --card:#fff;
  --text:#0b0b0c;
  --muted:#666;
  --muted2:#999;
  --blue:#007AFF;
  --danger:#ff3b30;
  --border:#e8e8ee;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius:16px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--text); }
body.modal-open{ overflow:hidden; }
.topbar{ position:sticky; top:0; z-index:50; background:rgba(245,245,247,.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
.topbar-inner{ max-width:1024px; margin:0 auto; padding:14px 16px; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.topbar h1{ margin:0; font-size:22px; font-weight:900; }
.topbar p{ margin:2px 0 0; color:var(--muted); font-size:13px; }
.topbar-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.container{ max-width:1024px; margin:0 auto; padding:16px; }
.panel{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; text-align:center; }
.stat-value{ font-size:26px; font-weight:900; color:var(--blue); line-height:1; }
.stat-label{ margin-top:6px; font-size:12px; color:var(--muted); }
.controls{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width:820px){ .stats{ grid-template-columns:1fr; } .controls{ grid-template-columns:1fr; } .topbar-inner{ align-items:flex-start; } }
.field label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px; }
.input,.select-trigger{ width:100%; border:1px solid var(--border); border-radius:12px; padding:12px; font-size:15px; outline:none; background:#fff; }
.input:focus,.select-trigger:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,255,.12); }
.select-trigger{ text-align:left; cursor:pointer; position:relative; font-weight:500; }
.select-trigger::after{ content:'▾'; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:12px; }
.hidden-select{ display:none !important; }
.actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.btn{ border:0; border-radius:12px; padding:12px 14px; font-weight:800; cursor:pointer; background:#eee; color:#000; }
.btn.primary{ background:var(--blue); color:#fff; }
.btn.danger{ background:var(--danger); color:#fff; }
.btn:active{ transform:translateY(1px); }
.hidden{ display:none !important; }
.list{ margin-top:14px; display:grid; grid-template-columns:1fr; gap:10px; }
.product{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.product-main{ min-width:0; }
.product h3{ margin:0; font-size:16px; font-weight:900; }
.product .meta{ margin-top:4px; font-size:12px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:#fafafa; white-space:nowrap; width:fit-content; max-width:100%; line-height:1.25; flex-shrink:0; }
.badge.low{ border-color:rgba(255,59,48,.25); background:rgba(255,59,48,.08); color:#b02018; }
.qtybox{ display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.qty{ font-size:22px; font-weight:1000; color:#000; }
.qty-controls{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.smallbtn{ border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px; font-weight:900; cursor:pointer; }
.smallbtn.primary{ border-color:rgba(0,122,255,.25); background:rgba(0,122,255,.08); color:var(--blue); }
.smallbtn.danger{ border-color:rgba(255,59,48,.25); background:rgba(255,59,48,.08); color:var(--danger); }
.footer{ margin:14px 2px 40px; color:var(--muted); }
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:2000; padding:12px; }
.backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.sheet{ position:relative; width:min(720px,calc(100vw - 24px)); max-height:min(88vh,900px); display:flex; flex-direction:column; background:var(--card); border-radius:18px; border:1px solid var(--border); box-shadow:0 18px 45px rgba(0,0,0,.22); overflow:hidden; }
.sheet.small{ width:min(420px,calc(100vw - 24px)); }
.sheet-header{ padding:14px 16px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); flex:0 0 auto; }
.sheet-header h2{ margin:0; font-size:16px; font-weight:1000; }
.icon-btn{ width:36px; height:36px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer; font-weight:1000; }
.sheet-body{ padding:14px 16px; overflow:auto; min-height:0; flex:1 1 auto; }
.sheet-footer{ padding:14px 16px; border-top:1px solid var(--border); display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.spacer{ flex:1; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:620px){ .grid2{ grid-template-columns:1fr; } }
.muted{ color:var(--muted); font-size:13px; margin:0 0 6px; }
.qty-row{ margin:10px 0 12px; display:flex; gap:10px; align-items:center; justify-content:center; }
.qty-btn{ width:48px; height:48px; border-radius:24px; border:0; background:rgba(0,122,255,.10); color:var(--blue); font-size:26px; font-weight:1000; cursor:pointer; }
.qty-input{ width:120px; text-align:center; font-size:24px; font-weight:1000; border-radius:14px; border:1px solid var(--border); padding:12px; background:#f9f9f9; outline:none; }
.qty-input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,122,255,.12); }
.cat-list{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.cat-item{ display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.cat-item .name{ font-weight:900; }
.cat-item .right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.history{ display:flex; flex-direction:column; gap:10px; margin-top:12px; padding-bottom:4px; max-height:56vh; overflow:auto; padding-right:4px; }
.h-item{ border:1px solid var(--border); border-radius:14px; padding:10px 12px; background:#fff; }
.h-item .top{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.h-item .name{ font-weight:1000; }
.h-item .meta{ margin-top:4px; color:var(--muted); font-size:12px; }
.dialog-message{ color:var(--text); line-height:1.5; }
.modal-actions-top{ margin-top:0; margin-bottom:12px; }
@media (max-width:760px){ .product{ grid-template-columns:1fr; align-items:flex-start; } .qtybox{ width:100%; align-items:flex-start; } .qty{ align-self:flex-end; } .qty-controls{ justify-content:flex-start; } }
@media (max-width:520px){ .topbar-actions{ width:100%; justify-content:flex-start; } .sheet-footer{ flex-wrap:wrap; } .sheet-footer .spacer{ display:none; } .sheet-footer .btn{ flex:1 1 calc(50% - 5px); } }
.history-toolbar{ align-items:end; }
.history-clear-wrap{ display:flex; align-items:flex-end; }
.prod-form{ border:1px solid var(--border); border-radius:16px; background:#fff; padding:12px; margin-bottom:12px; }
.production-list{ display:flex; flex-direction:column; gap:12px; margin-top:12px; max-height:56vh; overflow:auto; padding-right:4px; }
.prod-group{ border:1px solid var(--border); border-radius:16px; background:#fff; padding:12px; }
.prod-day{ font-weight:1000; margin-bottom:10px; }
.prod-item{ display:flex; justify-content:space-between; gap:10px; align-items:center; border-top:1px solid var(--border); padding:10px 0; }
.prod-item:first-of-type{ border-top:none; padding-top:0; }
.prod-main{ min-width:0; }
.prod-name{ font-weight:900; }
.prod-meta{ font-size:12px; color:var(--muted); margin-top:4px; }
.prod-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.prod-ok{ color:#1f9d45; font-weight:900; }
.picker-list{ display:flex; flex-direction:column; gap:8px; }
.picker-option{ width:100%; border:1px solid var(--border); background:#fff; border-radius:14px; padding:14px 12px; text-align:left; font-size:15px; font-weight:700; cursor:pointer; }
.picker-option.active{ border-color:rgba(0,122,255,.25); background:rgba(0,122,255,.08); color:var(--blue); }
.cattle-sheet{ width:min(980px,calc(100vw - 24px)); }
.cattle-top-grid{ display:grid; grid-template-columns:1fr 2fr; gap:12px; margin-bottom:12px; }
.inline-form{ display:flex; gap:8px; flex-wrap:wrap; }
.inline-form .input{ flex:1 1 220px; }
.cattle-summary{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:14px; }
.cattle-card{ border:1px solid var(--border); border-radius:14px; background:#fff; padding:12px; }
.cattle-card .label{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.cattle-card .value{ font-size:22px; font-weight:1000; line-height:1.1; }
.cattle-deliverers{ display:flex; flex-direction:column; gap:12px; }
.deliverer-block{ border:1px solid var(--border); border-radius:16px; background:#fff; padding:12px; }
.deliverer-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.deliverer-title{ font-size:18px; font-weight:1000; }
.deliverer-sub{ color:var(--muted); font-size:12px; margin-top:4px; }
.deliverer-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.deliverer-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.deliverer-stat{ border:1px solid var(--border); border-radius:12px; padding:10px; background:#fafafa; }
.deliverer-stat .label{ font-size:12px; color:var(--muted); margin-bottom:4px; }
.deliverer-stat .value{ font-size:18px; font-weight:1000; }
.weight-form{ display:grid; grid-template-columns:1fr 1fr auto auto; gap:8px; margin-bottom:12px; }
.weight-list{ display:flex; flex-direction:column; gap:8px; }
.weight-item{ border-top:1px solid var(--border); padding-top:8px; display:grid; grid-template-columns:1fr 1fr auto; gap:8px; align-items:center; }
.weight-badge{ display:inline-flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:999px; border:1px solid var(--border); background:#fafafa; font-size:13px; white-space:nowrap; }
.weight-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.empty-note{ color:var(--muted); font-size:13px; padding:8px 0; }
.cattle-quick-grid{ display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-top:10px; }
.cattle-compact-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.cattle-compact-item{ border-top:1px solid var(--border); padding-top:6px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.cattle-compact-item:first-child{ border-top:none; padding-top:0; }
.cattle-compact-label{ font-size:13px; color:var(--muted); }
@media (max-width:860px){ .cattle-summary{ grid-template-columns:1fr 1fr; } .deliverer-stats{ grid-template-columns:1fr 1fr; } .weight-form{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .prod-item{ flex-direction:column; align-items:flex-start; } .prod-actions{ width:100%; justify-content:flex-start; } }
@media (max-width:620px){ .cattle-top-grid{ grid-template-columns:1fr; } .cattle-summary{ grid-template-columns:1fr; } .deliverer-stats{ grid-template-columns:1fr; } .weight-form{ grid-template-columns:1fr; } .weight-item{ grid-template-columns:1fr; align-items:flex-start; } .weight-actions{ justify-content:flex-start; } .cattle-quick-grid{ grid-template-columns:1fr; } .cattle-compact-item{ flex-direction:column; align-items:flex-start; } }


/* PWA */
#btnInstallPWA.hidden{display:none !important;}