.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999!important;padding:1rem;opacity:1;visibility:visible;transition:opacity .2s ease,visibility .2s ease}.modal-overlay[data-active=false]{opacity:0;visibility:hidden}.modal{background:var(--bg-card, #ffffff);border-radius:12px;width:90%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;transform:translateY(0);transition:transform .3s ease-out}.modal-overlay[data-active=false] .modal{transform:translateY(-30px)}.modal[data-size=sm]{max-width:500px}.modal[data-size=md],.modal:not([data-size]){max-width:800px}.modal[data-size=lg]{max-width:1000px}.modal[data-size=xl]{max-width:1280px}.modal[data-size=fullscreen]{width:95vw;height:90vh;max-width:none;max-height:none}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-primary, rgba(0, 0, 0, .1));background:var(--bg-secondary, #f8fafc);flex-shrink:0}.modal-header h2,.modal-header h3,.modal-title{margin:0;font-size:var(--font-size-xl, 1.25rem);font-weight:600;color:var(--text-primary, #2d3436);line-height:1.3}.modal-close{background:none;border:none;font-size:1.5rem;color:var(--text-muted, #636e72);cursor:pointer;padding:.25rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;line-height:1;transition:all .15s ease}.modal-close:hover{background:var(--bg-tertiary, #e9ecef);color:var(--text-primary, #2d3436)}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-body>*:first-child{margin-top:0}.modal-body>*:last-child{margin-bottom:0}.modal-body table,.modal-body img,.modal-body pre,.modal-body code{max-width:100%;box-sizing:border-box;overflow-wrap:break-word;word-break:break-word}.modal-footer{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--border-primary, rgba(0, 0, 0, .1));background:var(--bg-secondary, #f8fafc);flex-shrink:0}.modal-footer .btn,.modal-footer button{margin:0}.modal-footer[data-align=start]{justify-content:flex-start}.modal-footer[data-align=center]{justify-content:center}.modal-footer[data-align=between]{justify-content:space-between}.modal-section{margin-bottom:1.5rem}.modal-section:last-child{margin-bottom:0}.modal-section-title{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--text-secondary, #636e72);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-light, rgba(0, 0, 0, .06))}.modal-form{display:flex;flex-direction:column;gap:1rem}.modal-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.modal-loading,.modal-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem;text-align:center;gap:1rem}.modal-loading{color:var(--text-muted, #636e72)}.modal-error{color:var(--color-error, #ff9b5c)}@media(max-width:640px){.modal-overlay{padding:.5rem;align-items:flex-end}.modal{box-sizing:border-box;width:100%;max-height:90vh;border-radius:12px 12px 0 0}.modal[data-size=sm],.modal[data-size=md],.modal[data-size=lg],.modal[data-size=xl]{max-width:100%}.modal-header{padding:1rem}.modal-body{box-sizing:border-box;max-width:100%;overflow-wrap:break-word;word-break:break-word;padding:1rem}.modal-footer{padding:1rem;flex-direction:column-reverse}.modal-footer .btn,.modal-footer button{width:100%}}body.modal-open{overflow:hidden}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-slide-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content,.add-tank-addition-modal,.inventory-import-modal,.manual-depletion-modal,.batch-detail-modal,.packaging-run-modal,.brew-notes-modal,.delete-brew-session-modal,.cogs-estimate-modal,.depletion-preview-modal{background:var(--bg-card, #ffffff);border-radius:12px;width:90%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d}:root{--color-orange: #ff9b5c;--color-peach: #fbd1a2;--color-teal-light: #7dcfb6;--color-cyan: #00b2ca;--color-blue-dark: #7dcfb6;--color-green-light: #81eb9d;--header-bg: #f78256;--app-bg: #f1f2f6;--primary-accent: #7dcfb6;--secondary-accent: #fbd1a2;--text-main: #2d3436;--outline-main: #2d3436;--tank-grey: #d1d4d9;--bg-app: var(--app-bg);--bg-navbar: var(--primary-accent);--bg-app-header: var(--header-bg);--bg-button: var(--color-green-light);--bg-button-hover: var(--secondary-accent);--bg-button-secondary: var(--text-main);--bg-button-secondary-hover: #000000;--bg-card: #ffffff;--bg-card-alt: #f8fafc;--bg-table-header: var(--header-bg);--bg-table-body: #ffffff;--bg-input: #ffffff;--text-navbar: #ffffff;--text-button: #2d3436;--text-table-header: #ffffff;--text-table-body: var(--text-main);--text-primary: var(--text-main);--text-secondary: #636e72;--text-muted: #a0a4a8;--page-title-color: var(--text-main);--overview-title-color: var(--primary-accent);--card-title-color: var(--text-main);--bg-button-surface: transparent;--bg-button-active: var(--color-cyan);--bg-nav-item: color-mix(in srgb, var(--color-teal-light), white 30%);--bg-nav-item-hover: color-mix(in srgb, var(--color-teal-light), black 8%);--bg-nav-item-active: color-mix(in srgb, var(--color-teal-light), black 12%);--border-primary: var(--outline-main);--border-secondary: var(--outline-main);--border-table: var(--outline-main);--border-card: var(--outline-main);--border-button-small: var(--outline-main);--table-row-hover-bg: color-mix(in srgb, var(--color-cyan), transparent 90%);--table-row-even-bg: color-mix(in srgb, var(--color-blue-dark), white 98%);--table-row-odd-bg: #ffffff;--table-row-selected-bg: color-mix(in srgb, var(--color-peach), transparent 85%);--color-surface-light-1: #ffffff;--color-surface-light-2: color-mix(in srgb, var(--color-blue-dark), white 98%);--color-surface-light-3: color-mix(in srgb, var(--color-blue-dark), white 96%);--color-surface-light-4: color-mix(in srgb, var(--color-blue-dark), white 94%);--color-surface-light-5: color-mix(in srgb, var(--color-blue-dark), white 92%);--input-bg: #ffffff;--input-border: var(--outline-main);--input-text: var(--text-main);--focus-ring: var(--primary-accent);--badge-bg: var(--secondary-accent);--badge-text: var(--text-main);--modal-bg: #ffffff;--modal-overlay: rgba(29, 78, 137, .6);--modal-title-color: var(--text-primary);--color-success-500: var(--color-cyan);--color-success-600: var(--color-teal-light);--color-warning-400: var(--color-orange);--color-warning-500: var(--color-orange);--color-error-500: var(--color-orange);--color-error-600: var(--color-orange);--color-info-500: var(--color-cyan);--color-info-600: var(--color-blue-dark);--status-fermentation-active: var(--color-cyan);--status-fermentation-dry-hop: var(--color-teal-light);--status-fermentation-complete: var(--color-orange);--status-fermentation-cold: var(--color-blue-dark);--status-fermentation-ready-to-crash: var(--color-orange);--status-fermentation-crashing: var(--color-blue-dark);--status-fermentation-ready-to-package: var(--color-teal-light);--status-fermentation-packaged: var(--color-peach);--stage-scheduled: var(--color-peach);--stage-brewing: var(--color-cyan);--stage-fermentation: var(--color-teal-light);--stage-conditioning: var(--color-cyan);--stage-ready-to-transfer: var(--color-orange);--stage-transfer-clarification: var(--color-orange);--stage-bright-beer: var(--color-teal-light);--stage-complete: var(--color-blue-dark);--color-border-secondary-light: rgba(255, 155, 92, .3);--color-border-secondary-medium: rgba(255, 155, 92, .5);--color-border-secondary-strong: var(--color-orange);--font-sans: "Orbitron", "Exo 2", "Audiowide", "Electrolize", "Michroma", monospace, sans-serif;--font-display: "Orbitron", "Exo 2", "Audiowide", "Electrolize", "Michroma", monospace, sans-serif;--font-brand: "Orbitron", "Exo 2", "Audiowide", "Electrolize", "Michroma", monospace, sans-serif;--font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono: "Courier New", "Monaco", "Menlo", monospace;--font-size-xs: .8rem;--font-size-sm: .9rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.35rem;--font-size-2xl: 1.6rem;--font-size-3xl: 2rem;--font-size-4xl: 2.4rem;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--line-height-loose: 2;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0em;--letter-spacing-wide: .05em;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--button-height-sm: 2rem;--button-height-md: 2.5rem;--button-height-lg: 3rem;--button-padding-x-sm: .75rem;--button-padding-x-md: 1rem;--button-padding-x-lg: 1.5rem;--button-border-radius: .375rem;--button-font-size: var(--font-size-sm);--button-font-weight: 600;--button-border-width: 1px;--button-radius: 8px;--button-small-radius: 4px;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 6px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--border-radius: 6px;--shadow-xs: 0 1px 2px rgba(29, 78, 137, .08);--shadow-sm: 0 2px 6px rgba(29, 78, 137, .1);--shadow-md: 0 6px 16px rgba(29, 78, 137, .12);--shadow-lg: 0 10px 24px rgba(29, 78, 137, .14);--shadow-xl: 0 16px 38px rgba(29, 78, 137, .18);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--app-header-height: 60px;--sidebar-width: 280px;--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700;--z-notification: 800;--gradient-teal: linear-gradient(135deg, var(--color-teal-light), var(--color-cyan));--gradient-orange: linear-gradient(135deg, var(--color-peach), var(--color-orange));--gradient-hero: linear-gradient( 90deg, var(--color-cyan), var(--color-teal-light) 35%, var(--color-orange) 70% );--gradient-subtle: linear-gradient(155deg, rgba(255, 155, 92, .15), rgba(251, 209, 162, .1));--gradient-card: linear-gradient(145deg, rgba(125, 220, 182, .3), rgba(0, 178, 202, .2));--color-primary-300: var(--color-peach);--color-primary-400: var(--color-teal-light);--color-primary-500: var(--color-cyan);--color-primary-600: var(--color-orange);--color-primary-700: var(--color-blue-dark);--color-secondary-500: var(--color-orange);--color-neutral-700: var(--color-blue-dark);--color-border: var(--border-primary);--color-surface: var(--bg-card);--color-text: var(--text-primary);--color-teal: var(--color-cyan);--color-teal-dark: var(--color-blue-dark);--color-primary: var(--color-primary-500);--color-primary-dark: var(--color-primary-700);--color-primary-light: var(--color-primary-400);--color-orange-light: var(--color-peach);--color-error: var(--color-error-500);--color-warning: var(--color-warning-500);--color-success: var(--color-success-500);--color-info: var(--color-info-500);--bg-hover: #f8fafc;--color-surface-alt: #f8fafc;--color-surface-alt2: var(--color-teal-light);--color-text-dim: var(--color-blue-dark);--color-text-faint: var(--color-blue-dark);--color-border-strong: var(--color-orange);--input-placeholder: var(--color-blue-dark);--button-bg: var(--bg-button);--button-bg-hover: var(--bg-button-hover);--table-header-bg: var(--bg-table-header);--app-header-bg: var(--bg-app-header);--pageheader-bg: var(--color-cyan);--pageheader-text: var(--color-blue-dark);--pageheader-shadow: 0 2px 16px rgba(29, 78, 137, .15)}:root[data-theme=dark]{--color-bg: #22231f;--color-surface: #2e2f2a;--color-surface-alt: #3a3b34;--color-surface-alt2: #4a4b44;--color-teal: var(--color-primary-500);--teal-primary: var(--color-primary-500);--teal-primary-hover: var(--color-primary-400);--teal-primary-dark: var(--color-primary-700);--teal-primary-10: rgba(27, 123, 90, .1);--teal-primary-20: rgba(27, 123, 90, .2);--color-orange: #f79256;--orange-primary: #f79256;--orange-primary-hover: var(--color-primary-400);--orange-primary-10: var(--teal-primary-10);--orange-primary-20: var(--teal-primary-20);--color-text: #eae8e3;--color-text-secondary: #c7e3d0;--color-text-tertiary: #f6c3a2;--color-text-dim: #b8b6ae;--color-border: rgba(234, 232, 227, .15);--color-border-strong: rgba(234, 232, 227, .25);--color-input-bg: rgba(255, 255, 255, .1);--color-input-border: rgba(27, 123, 90, .3);--color-input-focus: var(--color-primary-400);--table-header-bg: var(--color-secondary-500);--table-row-hover-bg: rgba(242, 139, 75, .1);--color-sidebar-bg: var(--color-blue-dark);--color-sidebar-bg-strong: color-mix(in srgb, var(--color-blue-dark), black 10%);--color-bg-radial: radial-gradient(circle at 25% 15%, rgba(27, 123, 90, .04), transparent 55%), radial-gradient(circle at 80% 75%, rgba(242, 139, 75, .04), transparent 60%);--pageheader-bg: #006b5e;--pageheader-text: #e7f7f5;--pageheader-shadow: 0 2px 16px rgba(0, 0, 0, .45)}:root,:root[data-theme=light]{--color-bg: var(--bg-app);--color-bg-radial: var(--bg-app);--color-surface: var(--bg-card);--color-surface-alt: var(--bg-card-alt);--color-surface-alt2: var(--color-primary-200);--color-border: var(--border-card);--color-border-strong: var(--color-primary-700);--color-text: var(--text-primary);--color-text-dim: var(--color-primary-700);--color-text-faint: var(--color-primary-600);--color-teal: var(--color-primary-500);--color-teal-dark: var(--color-primary-700);--color-teal-light: var(--color-primary-400);--color-orange-dark: #eb7f41;--color-orange-light: #fbd1a2;--bg-hover: var(--color-mint-200);--tabular-border: var(--border-table);--tabular-bg: var(--color-primary-200);--tabular-row-alt: var(--color-primary-100);--brand-teal: var(--color-primary-500);--brand-teal-dark: var(--color-primary-700);--brand-red: var(--color-error-500);--color-primary: var(--color-primary-500);--color-primary-dark: var(--color-primary-700);--color-primary-light: var(--color-primary-400);--table-row-odd-bg: var(--color-primary-200);--input-bg: var(--input-bg);--input-text: var(--text-primary);--input-placeholder: var(--color-primary-600);--focus-ring: var(--color-mint-500);--color-dark-blue: var(--color-primary-700);--color-dark-blue-hover: var(--color-primary-600);--color-sidebar-bg: var(--bg-navbar);--color-sidebar-bg-strong: var(--color-primary-700);--color-sidebar-border: var(--color-neutral-200);--color-sidebar-text: var(--color-neutral-50);--color-sidebar-pill: var(--color-primary-100);--color-sidebar-pill-hover: var(--color-primary-200);--bg-primary: var(--color-neutral-50);--bg-secondary: var(--color-neutral-100);--bg-tertiary: var(--color-neutral-200);--border-color: var(--border-table);--teal-primary: var(--color-primary-500);--teal-dark: var(--color-primary-700);--accent-orange: var(--color-secondary-500);--accent-orange-dark: var(--color-secondary-700)}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var( --font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif );font-size:var(--font-size-base);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal);color:var(--color-text);background:var(--bg-app);text-rendering:optimizeLegibility;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);color:var(--color-text)}h1{font-size:var(--font-size-4xl);letter-spacing:var(--letter-spacing-tight);margin-bottom:var(--spacing-md)}h2{font-size:var(--font-size-3xl);letter-spacing:var(--letter-spacing-tight);margin-bottom:var(--spacing-md)}h3{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}h4{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-sm)}h5{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}h6{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-xs)}p{margin:0 0 var(--spacing-md);color:var(--color-text)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);display:block;margin-bottom:var(--spacing-xs)}input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=time],select,textarea{font-family:inherit;font-size:var(--font-size-sm);line-height:var(--line-height-normal);padding:.5rem .875rem;border:2px solid var(--input-border);border-radius:var(--radius-md);background:var(--input-bg);color:var(--input-text);width:100%;min-height:36px;transition:border-color var(--transition-base),box-shadow var(--transition-base),background var(--transition-base)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 3px #7dcfb64d}input::placeholder,textarea::placeholder{color:var(--input-placeholder);opacity:1}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]:focus{border:2px solid var(--color-teal-light);padding:calc(.5rem - 1px) calc(.875rem - 1px)}input[type=checkbox]{margin-right:6px;vertical-align:middle;width:auto;min-height:auto}label input[type=checkbox]{margin-right:4px}select::-ms-expand{display:none}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:focus-visible{outline:3px solid var(--color-teal);outline-offset:2px}.app{min-height:100vh;background:var(--color-bg-radial)}.app-content-wrapper{min-height:100vh;margin-left:var(--sidebar-width);padding-top:var(--app-header-height);display:flex;flex-direction:column;transition:margin-left var(--transition-base)}.app-header-bar{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;height:var(--app-header-height);display:flex;align-items:center;gap:var(--spacing-md);padding:0 var(--spacing-lg);padding-right:calc(var(--spacing-lg) + 12px);background:var(--app-header-bg, var(--color-orange))!important;color:var(--color-bg-primary);border-bottom:2px solid rgba(0,0,0,.1);box-shadow:var(--shadow-sm);box-sizing:border-box}.app-header-bar:after{display:none}.page-title-center{position:absolute;left:50%;transform:translate(-50%);text-align:center;pointer-events:none}.page-title-header{margin:0;font-size:20px;font-weight:700;color:var(--color-bg-primary);pointer-events:none;text-transform:uppercase;letter-spacing:1px}.brand{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-brand);font-size:var(--font-size-2xl);font-weight:700;letter-spacing:.02em;color:var(--color-primary-700)}.header-right{margin-left:auto;display:flex;align-items:center;gap:var(--spacing-sm)}.brand-emoji{font-size:var(--font-size-2xl);filter:drop-shadow(0 0 2px rgba(0,0,0,.2))}.brand-text{color:var(--color-bg-primary);font-family:var(--font-brand);font-size:1.4rem;font-weight:700;letter-spacing:.02em}.app-main{flex:1;padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);display:flex;flex-direction:column;gap:var(--spacing-lg)}.text-xs{font-size:var(--font-size-xs)}.text-sm{font-size:var(--font-size-sm)}.text-base{font-size:var(--font-size-base)}.text-lg{font-size:var(--font-size-lg)}.text-xl{font-size:var(--font-size-xl)}.text-2xl{font-size:var(--font-size-2xl)}.text-3xl{font-size:var(--font-size-3xl)}.text-4xl{font-size:var(--font-size-4xl)}.text-caption{font-size:.75rem;line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-wide);color:var(--color-text-tertiary)}.text-helper{font-size:.75rem;line-height:1.4;color:var(--color-text-secondary)}.text-label{font-size:var(--font-size-sm);line-height:var(--line-height-tight);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.text-body-sm{font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-primary)}.text-body{font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary)}.text-body-lg{font-size:var(--font-size-lg);line-height:var(--line-height-normal);color:var(--color-text-primary)}.heading-xl{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight)}.heading-2xl{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight)}.heading-3xl{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight)}.heading-4xl{font-size:var(--font-size-4xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-disabled{color:var(--color-text-disabled)}.text-muted{color:var(--color-text-tertiary);font-size:var(--font-size-sm)}.text-faint{color:var(--color-text-faint)}.text-success{color:var(--color-success)}.text-warning{color:var(--color-warning)}.text-error{color:var(--color-error)}.text-info{color:var(--color-info)}.text-white{color:var(--text-button)!important}.text-grey{color:var(--text-table-body)!important}.font-normal{font-weight:var(--font-weight-regular)}.font-medium{font-weight:var(--font-weight-medium)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-underline{text-decoration:underline}.text-line-through{text-decoration:line-through}.text-no-underline{text-decoration:none}.text-uppercase{text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.text-no-case{text-transform:none}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.text-truncate-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.text-tight{line-height:var(--line-height-tight);letter-spacing:-.02em}.text-normal{line-height:var(--line-height-normal);letter-spacing:0}.text-relaxed{line-height:var(--line-height-relaxed)}.text-loose{line-height:var(--line-height-loose)}.text-hint{color:var(--color-text-tertiary);font-size:.75rem;font-weight:var(--font-weight-regular);margin-top:var(--spacing-xs);display:block}.text-required:after{content:" *";color:var(--color-error)}.text-optional{font-size:.75rem;color:var(--color-text-tertiary);font-weight:var(--font-weight-regular)}.text-mono{font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.bg-primary{background-color:var(--color-bg-primary)}.bg-secondary{background-color:var(--color-bg-secondary)}.bg-tertiary{background-color:var(--color-bg-tertiary)}.bg-success-light{background-color:var(--color-success-light)}.bg-warning-light{background-color:var(--color-warning-light)}.bg-error-light{background-color:var(--color-error-light)}.bg-info-light{background-color:var(--color-info-light)}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-row{display:flex;flex-direction:row;gap:var(--spacing-md);align-items:flex-start;flex-wrap:wrap}.flex-1{flex:1}.flex-center{display:flex;align-items:center;justify-content:center}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-xs{gap:var(--spacing-xs)}.gap-sm{gap:var(--spacing-sm)}.gap-md{gap:var(--spacing-md)}.gap-lg{gap:var(--spacing-lg)}.gap-xl{gap:var(--spacing-xl)}.mt-0{margin-top:0}.mt-xs{margin-top:var(--spacing-xs)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.mt-lg{margin-top:var(--spacing-lg)}.mt-xl{margin-top:var(--spacing-xl)}.mb-0{margin-bottom:0}.mb-xs{margin-bottom:var(--spacing-xs)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mb-lg{margin-bottom:var(--spacing-lg)}.mb-xl{margin-bottom:var(--spacing-xl)}.p-0{padding:0}.p-xs{padding:var(--spacing-xs)}.p-sm{padding:var(--spacing-sm)}.p-md{padding:var(--spacing-md)}.p-lg{padding:var(--spacing-lg)}.p-xl{padding:var(--spacing-xl)}.grid{display:grid;gap:var(--spacing-md)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-auto-fit{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.auto-grid{display:grid;gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.container,.layout-container{max-width:1400px;margin:0 auto;padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-3xl)}.code{font-family:var(--font-family-mono);font-size:var(--font-size-sm);background-color:var(--color-bg-secondary);color:var(--color-text-primary);padding:.125em .375em;border-radius:.25rem;white-space:nowrap}.code-block{font-family:var(--font-family-mono);font-size:var(--font-size-sm);background-color:var(--color-bg-secondary);color:var(--color-text-primary);padding:var(--spacing-md);border-radius:var(--border-radius-md);overflow-x:auto;line-height:var(--line-height-normal)}.sr-only,.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}.card,.paper,[class*=-card],[class*=-panel],[class*=-section],.viewmode-section,.stat-card{border:1px solid var(--border-card);border-radius:var(--radius-lg);background-color:var(--bg-card);box-shadow:var(--shadow-xs);transition:transform var(--transition-base),box-shadow var(--transition-base)}.card:hover,.paper:hover,.stat-card:hover,.recipe-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--color-orange)}.card{padding:var(--spacing-lg)}.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--border-card)}.card-title{font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);margin:0;letter-spacing:.2px}.card-content{color:var(--text-primary)}.card svg,.panel-orange svg,.overview-panel svg{color:var(--color-blue-dark);stroke:currentColor}.card.orange{border-color:var(--color-orange)!important;border-left:5px solid var(--color-orange)!important}.card.teal{border-color:var(--color-teal-light)!important;border-left:5px solid var(--color-teal-light)!important}.card.blue{border-color:var(--color-blue-dark)!important;border-left:5px solid var(--color-blue-dark)!important}.card.peach{border-color:var(--color-peach)!important;border-left:5px solid var(--color-peach)!important}table,.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg-table-body);border:2px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;font-size:var(--font-size-sm);box-shadow:var(--shadow-xs)}thead th,.table th{background:var(--table-header-bg)!important;color:var(--text-table-header)!important;font-weight:700;font-size:.75rem;text-align:center;padding:.875rem .9rem;border-bottom:2px solid rgba(255,255,255,.25);border-right:1px solid rgba(255,255,255,.3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}tbody td,.table td{padding:.875rem .9rem;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border);color:var(--color-text);text-align:left;vertical-align:top}tbody tr:last-child td,.table tr:last-child td{border-bottom:none}thead th:last-child,.table th:last-child,tbody td:last-child,.table td:last-child{border-right:none}tbody tr:nth-child(2n),.table tr:nth-child(2n){background:var(--table-row-even-bg)}tbody tr:nth-child(odd),.table tr:nth-child(odd){background:var(--table-row-odd-bg)}tbody tr:hover,.table tr:hover{background:var(--table-row-hover-bg)}tbody tr[data-selected],.selected{background-color:var(--table-row-selected-bg)}tbody tr.clickable,.table tr.clickable{cursor:pointer}.table td.empty{text-align:center;color:var(--color-text-dim);font-style:italic}.main-dashboard.dashboard-home{background:var(--color-bg, var(--app-bg, #f1f2f6))}.dashboard-home .overview-panel{background:var(--color-surface, var(--bg-card, #ffffff));border:2px solid var(--border-secondary, var(--color-orange, #ff9b5c));border-radius:var(--radius-lg, 12px);padding:1.5rem 2rem;margin-bottom:1.5rem;box-shadow:none;overflow:hidden}.dashboard-home .overview-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md, 1rem);margin-bottom:.5rem;padding-bottom:.1rem}.dashboard-home .overview-title{color:var(--overview-title-color, var(--primary-accent, #7dcfb6));font-size:var(--font-size-xl, 1.25rem);font-weight:700;margin:0 0 .2rem;display:inline-flex;align-items:center;gap:.4rem}.dashboard-home .overview-actions{display:flex;gap:var(--spacing-sm, .5rem);flex-wrap:wrap;align-items:center}.dashboard-home .overview-body{padding:.5rem 0 0}.dashboard-home .table-container{border-radius:var(--radius-md, 8px);overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;background:var(--bg-card, #ffffff);border:1px solid var(--border-card, var(--color-border, #e2e8f0));box-shadow:var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, .05));padding:.5rem}.dashboard-home .table-container table{min-width:max-content}.dashboard-home .table .status-success{background:#4caf501f;color:#388e3c;font-weight:600}.dashboard-home .table .status-error{background:#f4433621;color:var(--color-error-600, #dc2626);font-weight:600}.dashboard-home .table .status-warning{background:#f8943021;color:var(--color-orange, #ff9b5c);font-weight:600}.dashboard-home .overview-panel svg,.dashboard-home .overview-title svg{color:var(--color-blue-dark, var(--primary-accent, #7dcfb6));stroke:currentColor}.table-row,.totals-row{font-weight:700;background-color:var(--bg-table-header);color:var(--text-table-header)}.table-cell,.totals-cell{color:var(--color-bg-primary);padding:8px;border:1px solid var(--color-border)}.table-container,.table-wrapper,.datatable-scroll{overflow-x:auto;border-radius:8px;margin:1rem 0;background:var(--bg-table-body);box-shadow:0 2px 8px #00000014}.datatable-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.datatable-toolbar{display:flex;gap:var(--spacing-sm);align-items:center;flex-wrap:wrap}.datatable-filter{max-width:280px}.table thead th .sort-indicator{display:inline-block;margin-left:.35rem;width:.6rem;height:.6rem;background:#ffffff80;clip-path:polygon(50% 15%,0 85%,100% 85%);opacity:.5;transition:var(--transition-base)}.table thead th .sort-indicator.active.asc{transform:rotate(180deg);opacity:1}.table thead th .sort-indicator.active.desc{opacity:1}.drag-handle-cell{text-align:center;padding:4px 2px;width:1.8rem}.drag-handle{display:inline-block;font-size:14px;line-height:1.5;opacity:.45}tr.draggable-row{transition:background .12s ease}tr.draggable-row.drag-origin{opacity:.6;background:#4db8a01f}tr.draggable-row.drag-over{outline:2px dashed rgba(77,184,160,.6);outline-offset:-2px}tr.draggable-row.drag-over td{background:#4db8a01f}.table-cell-ellipsis{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}@media(min-width:1200px){.table-cell-ellipsis{max-width:320px}}.badge{display:inline-flex;align-items:center;gap:var(--spacing-xs);background:var(--badge-bg);color:var(--badge-text);font-size:var(--font-size-xs);padding:.25rem .65rem;border-radius:var(--radius-full);font-weight:600;letter-spacing:.04em;box-shadow:var(--shadow-xs)}.badge.teal{background:var(--color-teal)}.badge.outline{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.status-badge{display:inline-block;font-weight:700;letter-spacing:.01em;border-radius:999px;padding:.18em .8em;font-size:var(--font-size-xs);background:var(--color-neutral-100);color:var(--color-neutral-800);line-height:1.2}.status-badge.atp-pass{background:#dcfce7;color:#166534;border:1px solid rgba(22,101,52,.1)}.status-badge.atp-fail{background:#fee2e2;color:var(--color-error);border:1px solid rgba(153,27,27,.1)}.status-badge.atp-na{background:var(--color-neutral-100);color:var(--color-neutral-500)}.status-badge.status-active{background:#00c76d2e;color:#0a5a38;border:1px solid rgba(0,199,109,.35)}.status-badge.status-warning{background:#f8943033;color:#7a3f00;border:1px solid rgba(248,148,48,.4)}.notification{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);border:1px solid transparent}.notification-success{background:var(--color-success);color:var(--color-bg-primary);border-color:var(--color-success)}.notification-error{background:var(--color-error);color:var(--color-bg-primary);border-color:var(--color-error)}.notification-warning{background:var(--color-warning);color:var(--color-bg-primary);border-color:var(--color-warning)}.notification-info{background:var(--color-info);color:var(--color-bg-primary);border-color:var(--color-info-500)}.ds-alert{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:1px solid transparent;background:var(--color-surface-alt);color:var(--color-text);display:flex;flex-direction:column;gap:var(--spacing-xs)}.ds-alert-title{font-weight:700;font-size:var(--font-size-sm)}.ds-alert-body{color:var(--color-text-dim);font-size:var(--font-size-sm)}.ds-alert--success{background:#22c55e1f;border-color:#22c55e66;color:#14532d}.ds-alert--warning{background:#f894301f;border-color:#f8943066;color:#722f22}.ds-alert--error{background:#dc26261f;border-color:#dc262666;color:#7f1d1d}.ds-alert--info{background:#00c0b41f;border-color:#00c0b459;color:#075e57}.ds-loading{padding:var(--spacing-lg);border-radius:var(--radius-md);background:var(--color-surface-alt);color:var(--color-text-dim);text-align:center}.ds-empty-state{padding:var(--spacing-lg);border-radius:var(--radius-md);border:1px dashed var(--color-border);color:var(--color-text-faint);text-align:center}.panel-orange{background:var(--bg-card)!important;border:1px solid var(--border-secondary)!important;border-radius:var(--radius-lg)!important;padding:1.5rem 2rem!important;box-shadow:var(--shadow-sm)!important}.panel-title{color:var(--color-primary-700, var(--color-primary-500));margin:0}.panel-content{background:linear-gradient(135deg,#0080800d,#ff660008);border:1px solid var(--color-primary-200, var(--color-primary-500));border-radius:8px;padding:1rem;overflow:auto}.app-modal-header h1,.app-modal-header h2,.app-modal-header h3,.app-modal-content h1,.app-modal-content h2,.app-modal-content h3,.modal-title,.version-modal-title{color:var(--modal-title-color)!important;font-weight:700}.app-modal-header .title,.app-modal-content .title,.app-modal-header{color:var(--modal-title-color)!important}.form-group,.field{display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:120px}.field label{font-size:var(--font-size-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-dim)}.input-group{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-md);align-items:flex-end;flex-wrap:wrap}.input-label{font-size:var(--font-size-xs);font-weight:400;color:var(--color-text-dim)}.checkbox-group{display:inline-flex;align-items:center;gap:.4rem}.checkbox-group input[type=checkbox]{margin:0}.checkbox-group label{margin:0;font-weight:500;color:var(--color-text)}.label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);display:block;margin-bottom:var(--spacing-xs)}.label-required .label-text:after{content:"*";color:var(--color-error);margin-left:.25rem}.form-help{font-size:.75rem;color:var(--color-text-tertiary);margin-top:.25rem;display:block}.form-error{font-size:var(--font-size-sm);color:var(--color-error);margin-top:.25rem;display:block}.form-success{font-size:var(--font-size-sm);color:var(--color-success);margin-top:.25rem;display:block}.batch-info{min-width:190px;line-height:1.15;padding:.5rem}.batch-recipe-name{font-weight:600}.batch-details{font-size:var(--font-size-sm);opacity:.8}.batch-tank{font-size:var(--font-size-sm);opacity:.75}.stage-chips{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}.stage-chips.stack{flex-direction:column}.stage-chips .chip{display:inline-block;padding:.25rem .5rem;background:#1e293b0d;border:1px solid rgba(30,41,59,.1);border-radius:3px;font-size:.75rem;white-space:nowrap}.stage-chips .chip.out{background:#dc262614;border-color:#dc262633;color:var(--color-error)}body{background:var(--bg-app)!important;min-height:100vh}.app,.app-content-wrapper,.app-main{background:var(--bg-app)!important}.navbar-grouped{background:var(--bg-navbar)!important}.nav-group-trigger,.nav-group-trigger.direct-link,.nav-item{color:var(--text-navbar)!important}.mobile-menu-toggle{background:var(--bg-nav-item)!important;color:var(--text-navbar)!important}.app-header-bar{background:var(--bg-app-header)!important;color:var(--text-navbar)!important}input[type=text],input[type=number],input[type=email],input[type=password],input[type=date],input[type=time],select,textarea,.ds-input,.ds-select,.ds-textarea,.number-input,.select-input,.input-field{border:1px solid var(--outline-main)!important;background:var(--color-bg-primary)!important;border-radius:4px!important;color:var(--text-main)!important}.mantine-Button-root[data-variant=filled]:not([data-color]){background:var(--bg-button)!important;color:var(--text-button)!important;border-radius:var(--button-radius, 8px)!important;font-weight:600!important}.mantine-Button-root[data-variant=filled]:not([data-color]):hover{background:var(--bg-button-hover)!important}.mantine-Button-root[data-size=sm][data-variant=filled]:not([data-color]),.mantine-Button-root[data-size=xs][data-variant=filled]:not([data-color]),.mantine-ActionIcon-root[data-variant=filled]:not([data-color]){background:transparent!important;color:var(--border-button-small)!important;border:none!important;box-shadow:none!important;border-radius:var(--button-small-radius, 4px)!important}.mantine-Button-root[data-size=sm][data-variant=filled]:not([data-color]):hover,.mantine-Button-root[data-size=xs][data-variant=filled]:not([data-color]):hover,.mantine-ActionIcon-root[data-variant=filled]:not([data-color]):hover{background:#0000000a!important;color:var(--border-button-small)!important}.mantine-Input-leftSection,.mantine-Input-rightSection,.mantine-Select-rightSection,.mantine-Select-leftSection{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}.mantine-ActionIcon-root:focus,.mantine-Input-leftSection:focus,.mantine-Input-rightSection:focus,.mantine-Select-rightSection:focus{outline:none!important;box-shadow:none!important}table thead,.table thead,.mantine-Table-thead,table th,.table th,.mantine-Table-th{background:var(--bg-table-header)!important;color:var(--text-table-header)!important}table tbody,.table tbody,.mantine-Table-tbody{background:var(--bg-table-body)!important}table td,.table td,.mantine-Table-td{background:var(--bg-table-body)!important;color:var(--text-table-body)!important}table tbody tr:hover,.mantine-Table-root tbody tr:hover{background-color:var(--table-row-hover-bg)}table[data-striped] tbody tr:nth-of-type(odd),.mantine-Table-root[data-striped] tbody tr:nth-of-type(odd){background-color:var(--table-row-even-bg)}table tbody tr[data-selected],table tbody tr.selected,.mantine-Table-root tbody tr[data-selected],.mantine-Table-root tbody tr.selected{background-color:var(--table-row-selected-bg)}.mantine-Table-root:focus-within{border-color:var(--color-mint-500)}.select-input .select__indicator,.select-input .select-indicator,.select-input .dropdown-icon,.select-input .icon,.select-input .caret{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}@media(max-width:1199px){.app-content-wrapper{margin-left:0}.app-header-bar{padding-left:calc(var(--spacing-lg) + 3.75rem)}}@media(max-width:900px){.grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}.row{flex-direction:column}.container,.layout-container{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-2xl)}.app-main{padding:var(--spacing-md) var(--spacing-lg) var(--spacing-xl)}}@media(max-width:768px){.btn,.button,.ds-button{padding:.5rem 1rem!important;font-size:.875rem!important}table th,.table th,table td,.table td{padding:.625rem .75rem!important;font-size:var(--font-size-sm)!important}}@media(max-width:640px){.container,.layout-container{padding:var(--spacing-sm) var(--spacing-md) var(--spacing-xl)}.app-main{padding:var(--spacing-sm) var(--spacing-md) var(--spacing-lg)}.app-header-bar{padding-left:calc(var(--spacing-md) + 2.5rem)}h1,.h1{font-size:1.8rem}table,.table{font-size:var(--font-size-xs)}.card,.paper{padding:var(--spacing-md)}.heading-4xl{font-size:var(--font-size-3xl)}.heading-3xl{font-size:var(--font-size-2xl)}.heading-2xl{font-size:var(--font-size-xl)}.text-body-lg{font-size:var(--font-size-base)}.btn{font-size:var(--font-size-xs);height:var(--button-height-sm);padding:0 var(--button-padding-x-sm)}}@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-teal);border-radius:var(--radius-sm);border:2px solid var(--color-surface)}::-webkit-scrollbar-thumb:hover{background:var(--color-teal-dark)}body.theme-transition,body.theme-transition *,body.theme-transition *:before,body.theme-transition *:after{transition:background-color .3s ease,color .3s ease,border-color .3s ease!important}.skip-to-main{position:absolute;top:-40px;left:0;background:var(--color-primary);color:var(--color-bg-primary);padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;z-index:100}.skip-to-main:focus{top:0}@media print{body{background:#fff;color:#000}.card,.paper{border:1px solid #000;box-shadow:none}button,.btn,.ds-button{display:none}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;background-color:transparent;border:1px solid var(--color-border);border-radius:var(--border-radius-md);cursor:pointer;font-size:var(--font-size-base);transition:var(--transition-base);color:var(--color-text-primary)}.theme-toggle:hover{background-color:var(--color-bg-secondary);border-color:var(--color-border-dark)}.theme-toggle:focus{outline:2px solid var(--color-primary);outline-offset:2px}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}[data-theme=dark] .theme-toggle{color:var(--color-text-primary);border-color:var(--color-border)}[data-theme=dark] .theme-toggle:hover{background-color:var(--color-bg-secondary);border-color:var(--color-border-dark)}[data-theme=dark] .theme-toggle:focus{outline-color:var(--color-primary)}[data-theme=dark] .theme-toggle:active{background-color:var(--color-bg-tertiary)}:root{--color-orange: #ff9b5c;--color-peach: #fbd1a2;--color-teal: #7dcfb6;--color-cyan: #00b2ca;--color-charcoal: #2d3436;--gray-50: #f8fafc;--gray-100: #f1f2f6;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--color-primary: var(--color-cyan);--color-primary-hover: color-mix(in srgb, var(--color-cyan), black 10%);--color-secondary: var(--color-peach);--color-secondary-hover: color-mix(in srgb, var(--color-peach), black 10%);--color-danger: var(--color-orange);--color-danger-hover: color-mix(in srgb, var(--color-orange), black 10%);--color-success: var(--color-teal);--color-success-hover: color-mix(in srgb, var(--color-teal), black 10%);--color-warning: var(--color-orange);--color-info: var(--color-cyan);--bg-app: #f1f2f6;--bg-card: #ffffff;--bg-primary: var(--color-cyan);--bg-secondary: var(--color-peach);--bg-danger: var(--color-orange);--bg-success: var(--color-teal);--bg-hover: var(--gray-100);--bg-active: var(--gray-200);--text-primary: var(--color-charcoal);--text-secondary: var(--gray-600);--text-muted: var(--gray-400);--text-inverse: #ffffff;--text-link: var(--color-cyan);--border: var(--color-charcoal);--border-light: var(--gray-200);--border-focus: var(--color-cyan);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--z-dropdown: 100;--z-sticky: 200;--z-modal: 1000;--z-popover: 1100;--z-toast: 1200;--button-height-sm: 28px;--button-height-md: 38px;--button-height-lg: 44px;--button-padding-x-sm: .75rem;--button-padding-x-md: 1rem;--button-padding-x-lg: 1.25rem;--table-header-bg: var(--color-orange);--table-header-color: var(--text-inverse);--table-row-even-bg: var(--gray-50);--table-row-hover-bg: color-mix(in srgb, var(--color-cyan), transparent 95%);--input-height: 38px;--input-padding-x: .75rem;--input-bg: var(--bg-card);--input-border: var(--border-light);--input-focus-border: var(--color-cyan);--modal-overlay-bg: rgb(0 0 0 / .5);--modal-width-sm: 400px;--modal-width-md: 600px;--modal-width-lg: 800px;--modal-width-xl: 1000px;--card-padding: var(--space-6);--card-bg: var(--bg-card);--card-border: var(--border-light);--header-height: 60px;--sidebar-width: 280px;--container-max-width: 1400px;--container-padding: var(--space-4);--header-bg: var(--color-orange);--app-bg: var(--bg-app);--primary-accent: var(--color-teal);--secondary-accent: var(--color-peach);--text-main: var(--text-primary);--outline-main: var(--border);--tank-grey: var(--gray-300);--bg-navbar: var(--color-teal);--bg-app-header: var(--color-orange);--bg-button: var(--color-teal);--bg-button-hover: var(--color-peach);--bg-button-secondary: var(--color-charcoal);--bg-table-header: var(--color-orange);--bg-table-body: var(--bg-card);--bg-input: var(--bg-card);--text-navbar: var(--text-inverse);--text-button: var(--text-inverse);--text-table-header: var(--text-inverse);--text-table-body: var(--text-primary);--color-orange-light: var(--color-peach);--color-teal-light: var(--color-teal);--color-blue-dark: var(--color-teal);--color-green-light: var(--color-teal);--color-primary-300: var(--color-peach);--color-primary-400: var(--color-teal);--color-primary-500: var(--color-cyan);--color-primary-600: var(--color-orange);--color-primary-700: var(--color-teal);--color-secondary-500: var(--color-orange);--color-neutral-700: var(--color-charcoal);--color-success-500: var(--color-cyan);--color-success-600: var(--color-teal);--color-warning-400: var(--color-orange);--color-warning-500: var(--color-orange);--color-error-500: var(--color-orange);--color-error-600: var(--color-orange);--color-info-500: var(--color-cyan);--color-info-600: var(--color-teal);--border-primary: var(--border);--border-secondary: var(--border);--border-table: var(--border);--border-card: var(--border);--status-fermentation-active: var(--color-cyan);--status-fermentation-dry-hop: var(--color-teal);--status-fermentation-complete: var(--color-orange);--status-fermentation-cold: var(--color-teal);--status-fermentation-ready-to-crash: var(--color-orange);--status-fermentation-crashing: var(--color-teal);--status-fermentation-ready-to-package: var(--color-teal);--status-fermentation-packaged: var(--color-peach);--stage-scheduled: var(--color-peach);--stage-brewing: var(--color-cyan);--stage-fermentation: var(--color-teal);--stage-conditioning: var(--color-cyan);--stage-ready-to-transfer: var(--color-orange);--stage-transfer-clarification: var(--color-orange);--stage-bright-beer: var(--color-teal);--stage-complete: var(--color-teal)}.navbar-grouped{position:fixed;left:0;top:var(--app-header-height);bottom:0;width:var(--sidebar-width);background:var(--bg-navbar);border-right:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;padding:1rem 0;z-index:1000;overflow-y:auto;transition:transform .3s ease;box-shadow:2px 0 12px #0000001a;margin-top:0}.navbar-grouped:before,.navbar-grouped:after{display:none}.navbar-grouped::-webkit-scrollbar{width:6px}.navbar-grouped::-webkit-scrollbar-track{background:var(--bg-navbar)}.navbar-grouped::-webkit-scrollbar-thumb{background:#0003;border-radius:3px}.navbar-grouped::-webkit-scrollbar-thumb:hover{background:#0000004d}.mobile-menu-toggle{display:none;align-items:center;justify-content:center;background:#fff3;color:var(--color-bg-primary);border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-md);width:40px;height:40px;padding:0;font-weight:700;font-size:var(--font-size-lg);cursor:pointer;transition:all .3s ease;box-shadow:var(--shadow-sm);-webkit-backdrop-filter:none;backdrop-filter:none;flex-shrink:0}.app-header-bar .mobile-menu-toggle{margin-right:var(--spacing-sm)}.mobile-menu-toggle:hover{background:var(--button-bg-hover, var(--color-primary-600));transform:scale(1.05)}.nav-groups{list-style:none;margin:0;padding:0 .75rem;display:flex;flex-direction:column;gap:.5rem;flex:1}.nav-group{position:relative;width:100%}.nav-group-trigger,.nav-group-trigger.direct-link{width:100%;text-align:left;display:flex;align-items:center;gap:.5rem;background:var(--bg-nav-item);border:1px solid rgba(0,0,0,.15);padding:.875rem 1rem;cursor:pointer;font-weight:600;font-size:var(--font-size-sm);transition:all .18s ease;text-decoration:none}.nav-group-trigger:hover,.nav-group-trigger.direct-link:hover{background:var(--bg-nav-item-active);border-color:#00000014;color:var(--color-blue-dark)}.nav-group.active>.nav-group-trigger,.nav-group.active>.nav-group-trigger.direct-link{background:var(--color-sidebar-bg-strong);border-color:color-mix(in srgb,var(--text-navbar),transparent 60%);color:var(--text-navbar);box-shadow:0 2px 10px color-mix(in srgb,var(--primary-accent),transparent 55%)}.nav-group-emoji{font-size:var(--font-size-lg);line-height:1.5}.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:auto;opacity:.7;transition:transform .2s ease}.nav-group.open .caret{transform:rotate(180deg)}.nav-dropdown{list-style:none;margin:.25rem 0 0;padding:0;display:none;flex-direction:column;gap:.15rem;padding-left:2.5rem}.nav-group.open .nav-dropdown{display:flex}.nav-item{display:block;color:var(--text-navbar);padding:.5rem 1rem;background:var(--bg-nav-item-hover);font-size:var(--font-size-sm);border-radius:var(--radius-sm);transition:all .18s ease;background:var(--bg-button-surface);margin-bottom:.25rem}.nav-item:hover{background:var(--bg-button);color:var(--text-button);transform:translate(4px)}.nav-item.current{background:var(--bg-button);color:var(--text-button);font-weight:600;border-left:3px solid var(--bg-table-header);box-shadow:0 2px 8px #0003}.nav-item.disabled{opacity:.5;cursor:not-allowed}.nav-item .tag{background:var(--bg-table-header);color:var(--text-table-header);font-size:var(--font-size-sm);padding:.125rem .375rem;border-radius:12px;font-weight:700;margin-left:.5rem}.sidebar-close{position:absolute;top:.75rem;right:.75rem;background:var(--bg-nav-item);border:1px solid rgba(0,0,0,.12);color:var(--text-navbar);font-size:var(--font-size-2xl);line-height:1.5;cursor:pointer;padding:.25rem .5rem;border-radius:var(--radius-sm);transition:transform .18s ease,background-color .18s ease;z-index:10}.sidebar-close:hover{background:var(--bg-nav-item-hover);border-color:#0000002e;transform:scale(1.05)}@media(max-width:1199px){.navbar-grouped{transform:translate(-100%)}.mobile-menu-toggle{display:flex}.navbar-grouped.sidebar-open{transform:translate(0)}.navbar-grouped.sidebar-open:before{content:"";position:fixed;inset:0;background:#00000080;z-index:-1}}@media(min-width:1200px){.navbar-grouped{transform:translate(0)}.mobile-menu-toggle{display:none}}.navbar-grouped .nav-group-trigger,.navbar-grouped .nav-group-trigger.direct-link,.navbar-grouped .nav-item,.navbar-grouped .sidebar-close{background:var(--bg-nav-item);border-color:#0000001f;color:var(--text-navbar)}.navbar-grouped .nav-group-trigger:hover,.navbar-grouped .nav-item:hover,.navbar-grouped .sidebar-close:hover{background:var(--bg-nav-item-hover);transform:translate(0)}.navbar-grouped [style*="rgba(255, 255, 255)"]{background:var(--bg-nav-item)}.user-menu-container{position:relative}.user-menu-trigger{display:flex;align-items:center;gap:.6rem;padding:.45rem .8rem;background:#ffffff26;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all .2s ease}.user-menu-trigger:hover{background:#ffffff40;border-color:#fff6}.user-avatar{width:26px;height:26px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;overflow:hidden;border:1px solid rgba(255,255,255,.3)}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-name{font-weight:600;font-size:var(--font-size-sm)}.user-menu-arrow{font-size:10px;opacity:.5}.user-menu-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:220px;background:#fff;border-radius:12px;box-shadow:0 10px 25px #0000001a;border:1px solid var(--color-primary-100);z-index:1001;overflow:hidden}.user-menu-header{padding:1rem;background:var(--color-primary-50);border-bottom:1px solid var(--color-primary-100)}.user-menu-email{font-weight:700;color:var(--color-primary-900);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-name{color:var(--color-primary-600);font-size:var(--font-size-sm);margin-top:2px}.user-menu-divider{height:1px;background:var(--color-primary-100)}.user-menu-item{display:block;width:100%;padding:.8rem 1rem;background:none;border:none;text-align:left;color:var(--color-secondary-600);cursor:pointer;font-size:14px;transition:all .2s;font-weight:500}.user-menu-item:hover{background:var(--color-secondary-50);color:var(--color-secondary-700)}.error-page-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--color-bg-radial);padding:2rem;position:relative}.error-page-content{max-width:600px;width:100%;background:linear-gradient(160deg,#4db8a00d,#e875520a),var(--color-surface);border-radius:var(--radius-lg);padding:3rem 2.5rem;border:1px solid var(--color-border);box-shadow:var(--shadow-md);text-align:center;position:relative;z-index:10}[data-theme=dark] .error-page-content{background:var(--color-neutral-900);color:var(--color-neutral-100)}.error-title{font-size:5rem!important;font-weight:700;margin:.5rem 0!important;line-height:1.5!important;letter-spacing:-1px!important;color:var(--color-teal)!important}.error-icon{color:var(--color-text-dim);opacity:.9;margin-bottom:.6rem}[data-theme=dark] .error-title{color:var(--color-neutral-100)}.error-btn[disabled],.error-btn[aria-disabled=true]{opacity:.6;cursor:not-allowed;transform:none}.error-subtitle{font-size:var(--font-size-2xl)!important;font-weight:600;color:var(--color-orange)!important;margin:1rem 0!important;letter-spacing:.2px!important}[data-theme=dark] .error-subtitle{color:var(--color-neutral-100)}.error-message{font-size:var(--font-size-lg);color:var(--color-text-dim)!important;margin:1.5rem 0 2rem;line-height:1.6}[data-theme=dark] .error-message{color:var(--gray-400)}.error-actions{display:flex;gap:1rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}.error-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 1.4rem;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}.error-btn.primary{background:var(--color-teal);color:#fff}.error-btn.primary:hover{background:var(--color-teal-dark);transform:translateY(-1px);box-shadow:0 8px 16px #2d937b40}.error-btn.secondary{background:var(--color-orange);color:#fff}.error-btn.secondary:hover{background:var(--color-orange-dark);transform:translateY(-1px);box-shadow:0 8px 16px #e8755240}.error-footer{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}[data-theme=dark] .error-footer{border-top-color:var(--color-neutral-700)}.error-hint{font-size:var(--font-size-sm);color:var(--color-text-faint);font-style:italic;margin:0}[data-theme=dark] .error-hint{color:var(--gray-500)}.error-details-section{margin:2rem 0;text-align:left}.error-details-toggle{background:#4db8a01f;border:1px solid rgba(77,184,160,.35);color:var(--color-teal-dark);padding:.55rem .9rem;border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:600;transition:all .2s ease;width:100%;text-align:left}[data-theme=dark] .error-details-toggle{background:#4db8a026;color:var(--color-teal)}.error-details-toggle:hover{background:#4db8a033;border-color:#4db8a099}.error-details-box{margin-top:1rem;padding:1rem;background:var(--color-surface-alt);border-radius:var(--radius-md);border-left:4px solid var(--color-orange)}[data-theme=dark] .error-details-box{background:#0000004d}.error-details-box code{color:var(--color-error);font-family:Courier New,monospace;font-size:var(--font-size-sm);word-break:break-word}[data-theme=dark] .error-details-box code{color:var(--color-danger)}.error-info-box{background:linear-gradient(135deg,#4db8a01f,#e875521a);border:1px solid rgba(77,184,160,.25);border-radius:var(--radius-lg);padding:1.5rem;margin:2rem 0;text-align:left}[data-theme=dark] .error-info-box{background:linear-gradient(135deg,#4db8a026,#e875521f)}.error-info-box h4{margin:0 0 1rem;color:var(--color-teal);font-size:var(--font-size-lg)}[data-theme=dark] .error-info-box h4{color:var(--color-teal)}.error-info-box ul{margin:0;padding-left:1.5rem;list-style:none}.error-info-box li{margin:.5rem 0;color:var(--color-text-dim);font-size:var(--font-size-sm)}[data-theme=dark] .error-info-box li{color:var(--color-text-dim, #9db0bf)}.error-info-box li:before{content:"";display:inline-block;width:6px;height:6px;background:var(--color-orange);border-radius:50%;margin-right:.5rem}.maintenance-countdown{background:linear-gradient(135deg,var(--color-orange) 0%,var(--orange-300) 100%);color:#fff;padding:1.5rem;border-radius:var(--radius-lg);margin:2rem 0;box-shadow:0 8px 18px #e8755240}.countdown-label{font-size:var(--font-size-sm);opacity:.9;margin-bottom:.5rem;font-weight:500}.countdown-time{font-size:var(--font-size-4xl);font-weight:800;letter-spacing:2px;font-family:Courier New,monospace}.maintenance-info{border-color:#e875524d}.maintenance-info h4,[data-theme=dark] .maintenance-info h4{color:var(--color-orange)}.error-status-online{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:1rem;background:linear-gradient(135deg,#22c55e2e,#22c55e14);border-radius:var(--radius-lg);color:var(--color-success);font-weight:600;font-size:var(--font-size-lg);margin:2rem 0}[data-theme=dark] .error-status-online{color:var(--color-primary-500)}.pulse-dot{width:12px;height:12px;background:var(--color-success-500);border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}}@media(max-width:768px){.error-page-wrapper{padding:1rem}.error-page-content{padding:2rem 1.5rem}.error-title{font-size:var(--font-size-4xl)}.error-subtitle{font-size:1.4rem}.error-message{font-size:var(--font-size-base)}.error-actions{flex-direction:column;width:100%}.error-btn{width:100%;justify-content:center}}@media(max-width:480px){.error-title{font-size:var(--font-size-4xl)}.error-subtitle{font-size:var(--font-size-lg)}.error-message{font-size:var(--font-size-sm)}.error-btn{padding:.75rem 1.25rem;font-size:var(--font-size-sm)}}