*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-base:#f5f6fa;--bg-surface:#fff;--bg-elevated:#f0f1f5;--bg-hover:#e8eaf0;--border:#dce0e8;--border-light:#c8cdd5;--accent:#6366f1;--accent-hover:#4f46e5;--accent-dim:#6366f114;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--green:#16a34a;--green-dim:#16a34a14;--yellow:#ca8a04;--yellow-dim:#ca8a0414;--red:#dc2626;--red-dim:#dc262614;--blue:#2563eb;--blue-dim:#2563eb14;--gray:#6b7280;--gray-dim:#6b728014;--radius-sm:6px;--radius:10px;--radius-lg:14px;--shadow:0 4px 24px #0000000f;--shadow-sm:0 1px 3px #00000014;--sidebar-width:240px;--header-height:60px}html,body{background:var(--bg-base);height:100%;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,sans-serif;font-size:14px;line-height:1.5}#app{height:100%}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.app-layout{height:100%;display:flex}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border);z-index:100;flex-direction:column;flex-shrink:0;display:flex;position:fixed;top:0;bottom:0;left:0}.sidebar-logo{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:18px 16px;display:flex}.logo-icon{background:var(--accent-dim);border:1px solid var(--accent);border-radius:var(--radius-sm);width:36px;height:36px;color:var(--accent);justify-content:center;align-items:center;display:flex}.logo-text{color:var(--text-primary);font-size:17px;font-weight:700}.sidebar-nav{flex-direction:column;flex:1;gap:2px;padding:12px 8px;display:flex;overflow-y:auto}.nav-item{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:10px;width:100%;padding:9px 12px;font-family:inherit;font-size:13px;font-weight:500;transition:all .15s;display:flex}.nav-item:hover{background:var(--bg-elevated);color:var(--text-primary)}.nav-item.active{background:var(--accent-dim);color:var(--accent);font-weight:600}.nav-icon{flex-shrink:0;align-items:center;display:flex}.nav-badge{background:var(--bg-elevated);color:var(--text-muted);border:1px solid var(--border);border-radius:20px;margin-left:auto;padding:1px 7px;font-size:11px;font-weight:600}.nav-item.active .nav-badge{background:var(--accent-dim);color:var(--accent);border-color:var(--accent)}.sidebar-footer{border-top:1px solid var(--border);padding:12px 14px}.store-info{align-items:center;gap:8px;margin-bottom:10px;display:flex}.store-dot{background:var(--green);border-radius:50%;flex-shrink:0;width:8px;height:8px}.store-dot--off{background:var(--text-muted)}.store-name{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.user-row{justify-content:space-between;align-items:center;display:flex}.user-email{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:160px;font-size:12px;overflow:hidden}.btn-logout{border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;background:0 0;align-items:center;padding:4px 6px;transition:all .15s;display:flex}.btn-logout:hover{border-color:var(--red);color:var(--red)}.main-content{margin-left:var(--sidebar-width);flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.mobile-header{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:50;align-items:center;gap:12px;padding:14px 16px;display:none;position:fixed;top:0;left:0;right:0}.hamburger{cursor:pointer;background:0 0;border:none;flex-direction:column;gap:4px;padding:4px;display:flex}.hamburger span{background:var(--text-primary);border-radius:2px;width:18px;height:2px;display:block}.sidebar-overlay{z-index:150;background:#00000026;display:none;position:fixed;inset:0}.qr-modal-overlay{z-index:1000;background:#00000040;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.qr-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:340px;box-shadow:var(--shadow);padding:32px 24px}.qr-modal h3{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin-bottom:20px;font-size:15px;font-weight:600;overflow:hidden}.qr-modal img{border-radius:var(--radius);background:#fff;width:200px;height:200px;padding:8px}.qr-label{color:var(--text-primary);margin-top:12px;font-size:14px;font-weight:600}.qr-label-sub{color:var(--text-secondary);margin-top:2px;font-size:12px}.qr-modal-actions{justify-content:center;gap:8px;margin-top:20px;display:flex}.btn-print{background:var(--accent);color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:8px 20px;font-size:13px;font-weight:500}.btn-print:hover{background:var(--accent-hover)}.btn-close{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;padding:8px 20px;font-size:13px}.btn-close:hover{border-color:var(--accent);color:var(--accent)}.recipe-modal{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:520px;max-height:80vh;box-shadow:var(--shadow);padding:24px;overflow-y:auto}.recipe-modal h3{color:var(--text-primary);margin-bottom:8px;font-size:16px;font-weight:700}.recipe-desc{color:var(--text-muted);margin-bottom:16px;font-size:12px}.recipe-items{flex-direction:column;gap:8px;margin-bottom:12px;display:flex}.recipe-empty{color:var(--text-muted);padding:12px 0;font-size:13px;font-style:italic}.recipe-item-row{align-items:center;gap:8px;display:flex}.recipe-select{flex:2}.recipe-qty{flex:1;max-width:100px}.recipe-unit{color:var(--text-muted);min-width:50px;font-size:12px}.btn-add-item{border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;background:0 0;align-items:center;gap:6px;margin-bottom:12px;padding:7px 12px;font-family:inherit;font-size:12px;transition:all .15s;display:flex}.btn-add-item:hover{border-color:var(--accent);color:var(--accent)}.recipe-no-materials{background:var(--yellow-dim);border-radius:var(--radius-sm);color:var(--yellow);border:1px solid #ca8a044d;margin-bottom:12px;padding:10px 12px;font-size:12px}.btn-delete-recipe{background:var(--red-dim);color:var(--red);border-radius:var(--radius-sm);cursor:pointer;border:1px solid #dc26264d;padding:8px 16px;font-size:13px;font-weight:500}@media print{body *{visibility:hidden}.qr-printable,.qr-printable *{visibility:visible}.qr-printable{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}@media (width<=768px){:root{--sidebar-width:0px}.app-layout{flex-direction:column!important}.sidebar{z-index:200;transition:transform .25s;top:0;bottom:0;left:0;transform:translate(-100%);width:260px!important;position:fixed!important}.sidebar.open{transform:translate(0)}.sidebar-overlay{display:block!important}.main-content{margin-left:0!important;padding-top:56px!important}.mobile-header{display:flex!important}table{font-size:12px}.stats-row{grid-template-columns:repeat(2,1fr)!important}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}}