:root{--accent: #d33;--accent-dark: #a11;--bg: #f7f7f9;--key: #fff;--key-border: #ddd;--key-hover: #f0f0f0;--active: #1e66f5}.scanner-container{display:grid;grid-template-columns:1.5fr 2.5fr;gap:16px;align-items:stretch;flex:1 1 auto;min-height:0;height:auto;padding:12px;box-sizing:border-box;max-width:100%}.panel{background:var(--bg);border:1px solid #eee;border-radius:8px;padding:12px;height:100%;min-height:0;display:flex;flex-direction:column;box-sizing:border-box}.queuePanel{display:flex;flex-direction:column;min-height:0;overflow:hidden;height:100%}.queueHeader{display:flex;align-items:center;gap:8px;margin-bottom:8px}.queueHeader input[type=text]{flex:1;padding:10px 12px;border:1px solid #ccc;border-radius:6px}.queueList{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;max-height:none}.queueItem{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 8px;padding:10px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;cursor:pointer}.queueItem.red{border-color:var(--accent);background:#ffe9e9}.queueItem.pending{border-color:#ff9800;background:#fff3e0}.queueItem.success{border-color:#2f9e44;background:#f0fdf4}.queueItem.active{outline:2px solid var(--active)}.queueItem .name{grid-column:1;grid-row:1;font-weight:600}.queueItem .details{grid-column:1;grid-row:2;font-size:12px;color:#666}.queueItem .right{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;font-size:16px;font-weight:600;color:#000;font-variant-numeric:tabular-nums}.keypadPanel{display:grid;grid-template-columns:110px 1fr;grid-template-rows:auto auto auto auto 1fr;gap:10px;min-height:0;height:100%;width:100%}.keypadPanel .modeButtons{grid-column:1 / span 2;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.keypadPanel .mealPlanToggle{background:#d33;color:#fff;border:1px solid #d33}.keypadPanel .mealPlanToggle[data-enabled=true]{background:#2f9e44;border-color:#2f9e44}.keypadPanel .activeBar{grid-column:1 / span 2;grid-row:2}.keypadPanel .screen{grid-column:1 / span 2;grid-row:3}.keypadPanel .nutritionEditorForm{grid-column:1 / span 2;grid-row:4;margin-bottom:10px}.keypadPanel .keysGrid{grid-column:1 / span 2;grid-row:5;flex:1}.activeBar{display:flex;align-items:center;justify-content:space-between;gap:8px}.activeName{font-size:24px;font-weight:800;padding:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modeBtn{padding:10px;border:1px solid #ccc;background:#fff;border-radius:10px;cursor:pointer;font-weight:700;width:100%;font-size:15px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.2;color:#111}.modeBtn.active{background:#222;color:#fff;border-color:#222}.screen{display:flex;align-items:center;gap:8px}.screen input{flex:1;font-size:clamp(22px,6vw,32px);padding:8px 10px;border:1px solid #ccc;border-radius:8px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen .units{display:none}.keysGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(68px,1fr);gap:8px}.key{background:var(--key);border:1px solid var(--key-border);border-radius:10px;font-size:24px;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;min-height:56px;color:#111}.key:hover{background:var(--key-hover)}.key.op{background:#fef3f3;border-color:#f2d1d1}.key.op:hover{background:#fde7e7}.key.unitToggle{background:#e3f2fd;border-color:#90caf9;font-size:14px;font-weight:600;padding:8px;line-height:1.2}.key.unitToggle:not(:disabled):hover{background:#bbdefb}.key.unitToggle:disabled{opacity:.4;cursor:not-allowed;background:#f5f5f5}.completeBtn{margin-top:4px;padding:24px;font-size:18px;font-weight:700;color:#fff;background:#2f9e44;border:1px solid #2b8a3e;border-radius:10px;cursor:pointer}.completeBtn:hover{background:#2b8a3e}@media (max-width: 900px){.scanner-container{display:flex;flex-direction:column;height:auto;gap:12px}.keypadPanel{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto}.keypadPanel .modeButtons{grid-column:1 / span 2;grid-row:1}.keypadPanel .keysGrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(62px,1fr);grid-column:1 / span 2;gap:8px}.keypadPanel .activeBar{grid-column:1 / span 2;grid-row:2}.keypadPanel .screen{grid-column:1 / span 2;grid-row:3}.keypadPanel .nutritionEditorForm{grid-column:1 / span 2;grid-row:4}.queuePanel{order:2;height:auto;max-height:none}.queueHeader{position:sticky;top:0;z-index:2;background:#fff;padding-bottom:8px}.screen input{font-size:clamp(20px,5.5vw,28px)}}@media (max-width: 640px){.keypadPanel .modeButtons{grid-template-columns:repeat(2,minmax(0,1fr))}.activeName{font-size:18px}.keysGrid{grid-template-columns:repeat(3,minmax(64px,1fr))}.scanner-container,.panel{padding:10px}.queueItem{grid-template-columns:1fr;grid-template-rows:auto auto auto}.queueItem .right{grid-column:1;grid-row:3;justify-content:flex-start}}:root{--color-bg: #f7f7f9;--color-surface: #ffffff;--color-border: #e5e7eb;--color-text: #111827;--color-muted: #6b7280;--color-primary: #1e66f5;--color-success: #22c55e;--color-danger: #ef4444;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-7: 32px;--font-base: 16px;--content-max: 1200px;--bp-sm: 640px;--bp-md: 900px;--bp-lg: 1200px}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--color-bg);color:var(--color-text)}.container{width:100%;max-width:var(--content-max);margin:0 auto;padding-left:var(--space-4);padding-right:var(--space-4)}.stack{display:flex;flex-direction:column;gap:var(--space-3)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.desktop-only{display:block}.mobile-only{display:none}.wrap-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.nav-bar{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-3) var(--space-5);margin-bottom:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.nav-brand{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text);font-weight:700;font-size:22px;line-height:1.1}.nav-links{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap}.nav-link{color:#4b5563;text-decoration:none;padding:8px 14px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;transition:background .2s ease;border:none;background:transparent;cursor:pointer}.nav-link:hover{background:#f3f4f6}.nav-link-active{color:var(--color-primary);background:#eff6ff;border:1px solid #dbeafe}.nav-docs{text-decoration:underline;border:none;background:transparent}.nav-divider{width:1px;height:24px;background:var(--color-border);margin:0 8px}.nav-burger{display:none;background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:6px 10px;cursor:pointer;color:#111;font-weight:600}.nav-drawer{display:none;flex-direction:column;gap:var(--space-2);padding:var(--space-3) 0}.primary-btn{background:var(--color-primary);color:#fff;border:none;padding:10px 16px;border-radius:var(--radius-sm);cursor:pointer;font-weight:600}.primary-btn:disabled{opacity:.6;cursor:not-allowed}.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-3)}.recipesHeader{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}.recipesHeader .headerActions{display:flex;gap:var(--space-2);flex-wrap:wrap}.recipesHeader .headerActions a{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px}.modal-panel{background:#fff;padding:var(--space-5);border-radius:var(--radius-md);width:min(480px,92vw);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-md)}.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}.formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.ingredientsTable,.ingredientsTable table{width:100%}.ingredientsTable{overflow-x:auto}.optionsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.recipesList{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3)}.recipeListItem{min-width:0}.recipeMacros{display:flex;flex-wrap:wrap;gap:12px}.recipeMacros .value{font-size:18px}@media (max-width: 640px){.optionsGrid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}}pre{white-space:pre-wrap;word-break:break-word}.authPage{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f8fafc,#eef2ff);padding:var(--space-5)}.authCard{background:#fff;padding:var(--space-6);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:min(420px,94vw)}.authButton,.demoButton{width:100%;margin-top:var(--space-3)}@media (max-width: 900px){.nav-links{display:none}.nav-burger{display:inline-flex;align-items:center;gap:6px}.nav-bar{padding:var(--space-3)}.nav-brand{font-size:20px}.nav-drawer.open{display:flex}.week-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));overflow-x:auto}}@media (max-width: 640px){.container{padding-left:var(--space-3);padding-right:var(--space-3)}.desktop-only{display:none}.mobile-only{display:block}.wrap-row{gap:var(--space-1)}.modal-panel{padding:var(--space-4);width:min(420px,94vw)}.nav-brand{font-size:18px}.nav-link{font-size:13px;padding:8px 10px}.recipesHeader{flex-direction:column;align-items:flex-start}.recipesHeader .headerActions,.recipesHeader .headerActions a{width:100%}.recipesList{grid-template-columns:1fr}.recipeMacros{gap:8px}.recipeMacros .value{font-size:16px}}