:root{--green:#174b34;--canvas:#f3f7f2;--line:#dfe9e1;--text:#24342b}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--text);font:14px Inter,Segoe UI,Arial,sans-serif}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1400px)/2));background:#fffc;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{display:flex;gap:10px;align-items:center}.brand>b{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:var(--green)}.brand span{display:flex;flex-direction:column}.brand small,.title-row small,.summary>small{font-size:10px;font-weight:800;letter-spacing:.15em;color:#73907e}.brand strong{font-size:19px}.status{padding:8px 12px;border-radius:30px;background:#edf1ed;font-size:12px;font-weight:700}.status.ok{color:#247348;background:#e8f5eb}.status.warn{color:#916d1e;background:#fff3d8}main{max-width:1400px;margin:auto;padding:26px;display:grid;grid-template-columns:200px 1fr;gap:24px}nav{display:flex;flex-direction:column;gap:8px}nav button,nav a{border:0;border-radius:14px;background:transparent;padding:12px 14px;text-align:left;text-decoration:none;color:#607368;font-weight:700}.nav.active,.nav:hover{background:#fff;color:var(--green);box-shadow:inset 3px 0 #f1ca4b,0 6px 20px #25432f10}.view{display:none}.view.active{display:block}.title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.title-row h1{font-size:34px;line-height:1;margin:5px 0 8px;letter-spacing:-.04em}.title-row p{margin:0;color:#74877a}.title-row input{border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px}article,.summary{background:#fff;border:1px solid var(--line);border-radius:24px;padding:20px;margin-bottom:20px;box-shadow:0 8px 28px #263f2e0c}article h2{font-size:15px;margin:0 0 16px}article h2 i{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--green);color:#fff;font-style:normal;font-size:11px;margin-right:8px}article h2 em{font-style:normal;font-size:11px;border-radius:20px;padding:5px 8px;background:#e9f5ec;color:#347653}.products{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.food{min-height:112px;border:2px solid transparent;border-radius:18px;padding:12px;background:#fff1b7;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;color:#72520d}.food:nth-child(2n){background:#d9f1df;color:#275e3a}.food:nth-child(3n){background:#eadff2;color:#684c78}.food.selected{border-color:var(--green);transform:translateY(-2px)}.food span{font-size:20px}.food b{margin-top:8px;font-size:12px}.food small{opacity:.7}.article-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.article-head label{border:1px solid var(--line);border-radius:12px;padding:8px;background:#f7faf7}.article-head input{border:0;outline:0;background:transparent}.customers{display:grid;grid-template-columns:1fr 1fr;margin:0 -20px -20px;background:var(--line);gap:1px}.customer{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#fff}.customer.selected{background:#f7fbf7}.check{width:22px;height:22px;border:1px solid #b7c8bb;border-radius:7px;background:white}.customer.selected .check{background:#2c7650;color:#fff}.customer>span{display:flex;flex:1;min-width:0;flex-direction:column}.customer>span b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer>span small{font-size:11px;color:#829287}.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px}.qty button{width:28px;height:28px;border:0;background:transparent;color:var(--green)}.qty b{min-width:23px;text-align:center;font-size:12px}.summary{position:sticky;top:94px;align-self:start;background:linear-gradient(145deg,#e8f4e9,#f2f7e8)}.summary h2{font-size:22px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{padding:6px 9px;border:1px solid #c7d9cb;border-radius:20px;background:#fff9;font-size:11px;font-weight:700}.summary hr{border:0;border-top:1px dashed #bfd4c5;margin:20px 0}.summary p{display:flex;justify-content:space-between;color:#607669}.total{display:flex;justify-content:space-between;align-items:end}.total b{font-size:30px}.summary>button{width:100%;margin:22px 0 10px;padding:14px;border:0;border-radius:14px;background:var(--green);color:white;font-weight:800}.summary>button:disabled{opacity:.4}.summary #saveNote{display:block;text-align:center;letter-spacing:0}.filters{display:flex;gap:10px;align-items:center}.filters>div{display:flex}.filters button{border:1px solid var(--line);background:#f4f7f4;padding:10px 13px;font-weight:700}.filters button.active,.filters #runReport{background:var(--green);color:#fff}.filters label{margin-left:auto;font-size:11px;color:#74877a}.filters input{display:block;border:1px solid var(--line);border-radius:9px;padding:7px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metrics article b{display:block;font-size:27px;margin-top:8px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px;border-bottom:1px solid #edf1ed;white-space:nowrap}th{font-size:10px;color:#718378;background:#f6f9f6}.due,.clear{padding:5px 8px;border-radius:20px;font-size:11px;font-weight:700}.due{background:#fff0db;color:#a3691c}.clear{background:#e6f4e9;color:#367653}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#173f2e;color:#fff;padding:13px 18px;border-radius:12px;transition:.2s;z-index:9}#toast.show{opacity:1;transform:translate(-50%,0)}.loading{padding:20px;color:#718378}@media(max-width:1050px){main{grid-template-columns:1fr}nav{flex-direction:row;overflow:auto}.products{grid-template-columns:repeat(3,1fr)}.layout{grid-template-columns:1fr}.summary{position:static}}@media(max-width:650px){main{padding:16px}.title-row{align-items:start;gap:15px;flex-direction:column}.title-row h1{font-size:28px}.products{grid-template-columns:repeat(2,1fr)}.customers{grid-template-columns:1fr}.article-head{align-items:flex-start;flex-direction:column}.article-head label{width:100%}.article-head input{width:85%}.filters{align-items:stretch;flex-wrap:wrap}.filters label{margin:0;flex:1}.filters #runReport{width:100%}.metrics{grid-template-columns:1fr}.status{font-size:0}.status::first-letter{font-size:12px}}
