:root { --ink:#17231e; --green:#1d6c51; --deep:#123a2c; --cream:#f6f3ed; --card:#fffdfa; --line:#e8e5dc; --muted:#738078; --gold:#f4b444; --red:#c95145; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#edf0e9; }
* { box-sizing:border-box; } [hidden] { display:none !important; } body { margin:0; min-width:320px; background:linear-gradient(160deg,#eef1e9 0%,#f8f6f1 38%,#e8f1ea 100%); } button,input,select { font:inherit; } button { cursor:pointer; border:0; } .app-shell { max-width:740px; margin:auto; min-height:100vh; padding:clamp(24px,6vw,48px) 20px 118px; } .screen { display:none; animation:rise .28s ease; } .screen.active { display:block; } @keyframes rise { from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none} }
.app-header { display:flex; align-items:center; gap:12px; } .brand-mark { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; font-family:Georgia,serif; color:white; background:var(--deep); font-weight:700; box-shadow:inset 0 0 0 1px #5ba88a; } .eyebrow { color:var(--green); font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.13em; margin:0 0 5px; } h1,h2,h3,p { margin-top:0; } h1 { font:700 clamp(27px,7vw,38px)/.93 Georgia,serif; letter-spacing:-.045em; margin:0; } h2 { font:700 24px/1.02 Georgia,serif; letter-spacing:-.035em; margin:0; } .icon-button { margin-left:auto; width:38px;height:38px; border-radius:50%; background:transparent; font-size:17px; letter-spacing:2px; color:var(--ink); }
.fridge-summary { display:flex; justify-content:space-between; align-items:center; margin:26px 0 16px; padding:22px 21px 18px; color:#f9fbf8; border-radius:23px; background:linear-gradient(125deg,#174d3c,#286d55); overflow:hidden; position:relative; box-shadow:0 14px 26px #214c3a25; } .fridge-summary:after { content:""; position:absolute; width:180px; height:180px; border-radius:50%; right:-75px; bottom:-110px; border:2px solid #83b69b55; } .fridge-summary strong { font-size:42px; line-height:.9; letter-spacing:-.06em; } .fridge-summary span { color:#bdd6c8; font-size:13px; margin-left:5px; } .fridge-summary .eyebrow { color:#b7d8c4; } .temperature { display:flex; align-items:center; gap:9px; z-index:1; } .temperature span { color:#e8fbf1; font-size:26px; margin:0; } .temperature p { font-size:12px; line-height:1.25; margin:0; color:#d9eadf; } .temperature b { color:white; }
.quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:33px; } .action-card { display:flex; align-items:center; gap:11px; text-align:left; padding:15px; border-radius:18px; background:var(--card); box-shadow:0 5px 18px #2434270c; } .action-card b,.action-card small { display:block; } .action-card b { font-size:14px; } .action-card small { font-size:11px;color:var(--muted);margin-top:2px; } .action-symbol { display:grid;place-items:center;width:31px;height:31px;border-radius:11px;font-size:22px;font-weight:500; } .stock-in .action-symbol { color:var(--green);background:#def2e5; }.stock-out .action-symbol {color:#c85245;background:#fce8e5;}
.section-heading { display:flex;align-items:end;justify-content:space-between;margin-bottom:13px; }.text-button { background:transparent;color:var(--green);font-size:13px;font-weight:800;padding:6px 0; }.filter-row { display:flex;gap:7px;overflow-x:auto;padding-bottom:15px;scrollbar-width:none; }.filter-row::-webkit-scrollbar { display:none; }.chip { white-space:nowrap;padding:7px 12px;border:1px solid var(--line);border-radius:100px;background:#faf9f4;color:#617069;font-size:12px; }.chip.active {background:var(--deep);border-color:var(--deep);color:white;}
.inventory-list { display:grid;gap:10px; }.inventory-item { display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border-radius:17px;box-shadow:0 5px 17px #2535260b; }.product-icon { width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:24px;flex:none; }.product-info { min-width:0;flex:1; }.product-info h3 {margin:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.product-info p {margin:3px 0 0;color:var(--muted);font-size:11px;}.stock-number { text-align:right;}.stock-number strong{display:block;font-size:17px;letter-spacing:-.04em}.stock-number span{font-size:10px;color:var(--muted)} .low-stock strong{color:#c55246}.empty-state{padding:38px 20px;text-align:center;color:var(--muted);background:#fffdfa;border-radius:18px;font-size:13px;}
.simple-header { padding:11px 0 27px; }.simple-header h1 {margin-bottom:9px;}.simple-header>p:last-child {color:var(--muted);font-size:14px;margin:0;}.menu-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.menu-item {background:var(--card);border-radius:19px;padding:16px;min-height:167px;display:flex;flex-direction:column;box-shadow:0 5px 16px #2535260b;}.menu-item .product-icon{margin-bottom:auto}.menu-item h3{font-size:14px;line-height:1.1;margin:12px 0 5px}.menu-item p{color:var(--muted);font-size:11px;margin:0}.menu-item .available{color:var(--green);font-weight:800;margin-top:7px;font-size:11px}.activity-list {display:grid;gap:2px}.activity-item {display:flex;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid var(--line)}.activity-symbol{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:19px;font-weight:700}.activity-symbol.in{background:#dcf1e4;color:var(--green)}.activity-symbol.out{background:#f9e4e1;color:var(--red)}.activity-item h3{font-size:14px;margin:0 0 3px}.activity-item p{font-size:11px;color:var(--muted);margin:0}.activity-item time{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.share-menu{display:flex;align-items:center;gap:15px;margin-top:22px;padding:18px;background:linear-gradient(135deg,#e1eee4,#f7f4eb);border-radius:20px}.share-copy{min-width:0;flex:1}.share-copy h2{font-size:20px}.share-copy>p:not(.eyebrow){margin:8px 0;color:var(--muted);font-size:12px;line-height:1.4}.menu-link{display:block;color:var(--green);font-size:12px;font-weight:800;text-decoration:none;margin-top:10px}.share-copy .text-button{padding:4px 0;margin-top:5px}.qr-card{background:#fff;border-radius:12px;padding:7px;text-align:center;box-shadow:0 4px 13px #244b3815;flex:none}.qr-card img{display:block;width:92px;height:92px}.qr-card span{display:block;color:var(--muted);font-size:8px;font-weight:800;margin-top:3px}
.menu-filter-row{margin:-10px 0 4px}.beer-style-row{margin:0 0 10px}.checkout-note{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:-10px 0 14px;border-radius:14px;background:#e0f0e5;color:var(--deep)}.checkout-note>span{font-size:21px}.checkout-note p{flex:1;margin:0;font-size:11px;line-height:1.35}.checkout-note p b{font-size:12px}.checkout-note button{background:transparent;color:var(--green);font-size:11px;font-weight:800;padding:5px}.menu-item.selected{outline:2px solid #6bae88;background:#fafff9}.rating-summary{padding:7px 0 0;margin-top:auto;background:transparent;color:#9c762c;font-size:11px;font-weight:800;text-align:left}.order-controls{display:grid;grid-template-columns:29px 1fr 29px;align-items:center;gap:6px;margin-top:10px}.order-controls button{width:29px;height:29px;border-radius:50%;background:#dceddf;color:var(--green);font-size:19px;line-height:1}.order-controls button:disabled{opacity:.35}.order-controls span{text-align:center;border-radius:10px;background:#f1f3ee;padding:7px 3px;color:var(--deep);font-size:11px;font-weight:800}.order-bar{position:fixed;z-index:8;bottom:77px;left:50%;width:min(calc(100% - 32px),508px);transform:translateX(-50%);padding:10px 10px 10px 15px;display:flex;align-items:center;gap:12px;background:#193d2f;color:white;border-radius:16px;box-shadow:0 10px 25px #183a2f50}.order-bar div{flex:1}.order-bar span,.order-bar small{display:block}.order-bar span{font-size:13px;font-weight:800}.order-bar small{font-size:10px;color:#cbe0d2;margin-top:2px}.order-bar button{border-radius:11px;background:#f4b444;color:#213029;padding:10px 13px;font-size:12px;font-weight:800}.order-bar button:disabled{opacity:.55}.beer-style-input{margin-top:12px}.beer-style-input[hidden]{display:none}.rating-panel{text-align:center;padding-bottom:28px}.rating-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:#edf1df;margin:12px auto;font-size:30px}.rating-panel h2{margin-top:2px}.rating-panel>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.4;margin:10px auto 17px;max-width:250px}.star-picker{display:flex;justify-content:center;gap:4px}.star-picker button{background:transparent;color:#f1b743;padding:3px;font-size:33px;line-height:1;text-shadow:0 1px #c48d20}.rating-panel .text-button{margin-top:14px}
.tab-bar {position:fixed;z-index:5;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:min(7vw,40px);padding:max(12px, env(safe-area-inset-bottom)) 15px 15px;background:#fffefbE8;backdrop-filter:blur(14px);border-top:1px solid #e7e5df;}.tab{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:40px;color:#778079;background:transparent;font-size:10px}.tab span{font-size:19px;line-height:1}.tab.active{color:var(--green);font-weight:800}.scan-tab{width:52px;height:52px;justify-content:center;margin-top:-31px;color:white;background:var(--green);border:4px solid #f5f5ef;border-radius:50%;box-shadow:0 6px 15px #1e674f45}.scan-tab span{font-size:29px;transform:rotate(90deg)}
.modal{position:fixed;z-index:10;inset:0;background:#13201971;display:none;align-items:end;justify-content:center;padding:15px}.modal.open{display:flex}.modal-panel{width:min(540px,100%);max-height:calc(100dvh - 30px);overflow:auto;background:#fffefa;border-radius:26px 26px 20px 20px;padding:10px 22px 25px;position:relative;animation:slideup .3s ease}.modal-handle{width:38px;height:4px;border-radius:5px;background:#d8d8d1;margin:0 auto 18px}@keyframes slideup{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}.modal-close{position:absolute;right:16px;top:13px;background:#f1f0eb;width:30px;height:30px;border-radius:50%;font-size:23px;color:#58635d}.modal-copy{font-size:13px;line-height:1.45;color:var(--muted);margin:10px 0 17px}.scanner-window{height:180px;border-radius:18px;background:linear-gradient(135deg,#1e3028,#385c49);overflow:hidden;position:relative;display:grid;place-items:center;color:#dcebe1}.scanner-window video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.scanner-window p{z-index:1;margin:74px 0 0;font-size:11px;background:#11251bb8;padding:4px 8px;border-radius:20px}.scanner-reticle{height:96px;width:180px;border:2px solid #e4f9e990;position:absolute;z-index:1;border-radius:5px;box-shadow:0 0 0 999px #10201630}.scanner-reticle:after{content:"";position:absolute;left:5%;right:5%;top:48%;height:2px;background:#f5ba49;box-shadow:0 0 10px #f5ba49}.primary-button{width:100%;margin-top:13px;border-radius:13px;padding:14px;background:var(--green);color:#fff;font-size:14px;font-weight:800;box-shadow:0 7px 16px #1c6a4f2c}.or-divider{display:flex;align-items:center;gap:10px;color:#9aa29d;font-size:11px;margin:17px 0}.or-divider:before,.or-divider:after{content:"";height:1px;flex:1;background:var(--line)}.barcode-entry{display:flex;gap:8px}.barcode-entry input{min-width:0;flex:1;border:1px solid #dcded7;border-radius:11px;padding:11px 12px;font-size:14px}.barcode-entry button{border-radius:11px;padding:0 14px;background:#e6f0e9;color:var(--deep);font-size:12px;font-weight:800}.full-width{width:100%;margin-top:10px}.product-preview{display:none;align-items:center;gap:11px;margin-bottom:14px}.product-preview.visible{display:flex}.product-preview .product-icon{width:39px;height:39px;font-size:21px}.product-preview h3{margin:0;font-size:14px}.product-preview p{margin:3px 0 0;color:var(--muted);font-size:11px}.product-panel form{margin-top:18px}.product-panel label{display:block;font-size:11px;font-weight:800;color:#53625a}.product-panel input,.product-panel select{width:100%;margin-top:6px;border:1px solid #dcded7;border-radius:11px;background:white;padding:11px;font-size:14px;color:var(--ink)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.quantity-control{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:13px;font-weight:800}.quantity-control>div{display:flex;align-items:center;gap:12px}.quantity-button{height:32px;width:32px;border-radius:50%;font-size:20px;color:var(--green);background:#e8f2eb}.quantity-control output{min-width:16px;text-align:center}.back-button{padding:5px 0 16px;background:transparent;color:var(--green);font-size:13px;font-weight:800}.settings-card{padding:17px;background:var(--card);border-radius:17px;margin-bottom:12px}.settings-card label{font-size:12px;font-weight:800;color:#53625a}.settings-card input{display:block;width:100%;border:1px solid #deded7;padding:11px;border-radius:11px;margin-top:7px}.settings-card h3{font-size:14px;margin-bottom:5px}.settings-card p{font-size:12px;color:var(--muted);margin-bottom:15px}.muted-card{background:#f4f0e9}.danger-button{background:transparent;color:#ae453b;padding:0;font-size:12px;font-weight:800}.toast{position:fixed;z-index:20;left:50%;bottom:88px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#17271f;color:white;padding:10px 14px;border-radius:20px;font-size:12px;transition:.24s}.toast.show{opacity:1;transform:translate(-50%,0)}
.sync-line{margin:-6px 0 16px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.01em}.sync-line.sync-warning{color:#a8702a}.settings-hint{font-size:11px;line-height:1.45;color:var(--muted);margin:6px 0 10px}.settings-card .text-button{display:block;margin-bottom:9px}
@media (min-width:620px){.app-shell{padding-top:45px}.inventory-list{grid-template-columns:1fr 1fr}.fridge-summary{margin-top:32px}.menu-grid{grid-template-columns:repeat(3,1fr)}}