.app-navbar{z-index:9999;transition:all var(--transition-normal);border:1px solid hsla(var(--color-text-primary), .08);isolation:isolate;display:flex;position:fixed;box-shadow:0 8px 32px #0006;background:hsla(var(--color-bg-surface), .3)!important;-webkit-backdrop-filter:blur(40px)saturate(180%)!important}.app-navbar:before{content:"";z-index:-1;background:inherit;-webkit-backdrop-filter:inherit;border-radius:inherit;position:absolute;inset:0}@media (max-width:767px){.app-navbar{border:none;border-top:1px solid hsla(var(--color-text-primary), .12);z-index:9999;border-radius:0;flex-direction:row;justify-content:center;align-items:center;height:74px;padding:0;bottom:0;left:0;right:0;box-shadow:0 -4px 25px #00000080;background-color:hsl(var(--color-bg-surface))!important;-webkit-backdrop-filter:none!important;opacity:1!important;background-image:none!important}.app-navbar:before{display:none!important}.nav-branding{display:none}.nav-menu{justify-content:space-around;align-items:stretch;width:100%;height:100%;display:flex}.nav-item{color:hsl(var(--color-text-secondary));padding:var(--space-1);transition:background var(--transition-fast);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;display:flex}.nav-item.active{background:hsla(var(--color-accent), .05);color:hsl(var(--color-accent))}.nav-icon{font-size:1.25rem}.nav-label{text-transform:uppercase;letter-spacing:.05em;font-size:.6rem;font-weight:700}}@media (min-width:768px){.app-navbar{top:var(--nav-offset);left:var(--nav-offset);bottom:var(--nav-offset);width:var(--nav-width);padding:var(--space-8) 0;border-radius:var(--radius-xl);align-items:center;gap:var(--space-12);flex-direction:column}.nav-branding{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.branding-icon-container{filter:drop-shadow(0 4px 12px #0000004d);width:48px;height:48px;transition:transform var(--transition-normal);justify-content:center;align-items:center;display:flex}.branding-icon-img{object-fit:contain;border-radius:var(--radius-md);width:100%;height:100%}.nav-branding:hover .branding-icon-container{transform:scale(1.05)rotate(3deg)}.branding-text{font-family:var(--font-heading);text-transform:uppercase;letter-spacing:.2em;text-align:center;opacity:.9;max-width:80px;font-size:.7rem;font-weight:800;line-height:1.3}.branding-stack{align-items:center;gap:var(--space-4);flex-direction:column;width:100%;display:flex}.family-selector-wrapper{width:80%;margin-top:-4px;animation:.5s ease-out fadeIn}.family-selector{background:hsla(var(--color-bg-surface), .5);border:1px solid hsla(var(--color-text-primary), .1);border-radius:var(--radius-md);width:100%;color:hsl(var(--color-text-primary));padding:var(--space-1) var(--space-2);text-align:center;cursor:pointer;transition:all var(--transition-fast);outline:none;font-size:.6rem;font-weight:600}.family-selector:hover{background:hsla(var(--color-bg-surface), .8);border-color:hsla(var(--color-accent), .3)}.nav-menu{gap:var(--space-6);flex-direction:column;align-items:center;width:100%;display:flex}.nav-item{border-radius:var(--radius-lg);width:76px;height:76px;color:hsl(var(--color-text-secondary));transition:all var(--transition-normal);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.nav-item:before{content:"";background:hsla(var(--color-accent), .1);border-radius:var(--radius-lg);opacity:0;transition:all var(--transition-normal);position:absolute;inset:0;transform:scale(.9)}.nav-item:hover:before{opacity:1;background:hsla(var(--color-accent), .08);transform:scale(1)}.nav-icon{z-index:1;transition:transform var(--transition-fast);font-size:1.75rem}.nav-item:hover .nav-icon{transform:translateY(-2px)}.nav-label{text-transform:uppercase;letter-spacing:.05em;z-index:1;opacity:.8;transition:opacity var(--transition-fast);margin-top:6px;font-size:.6rem;font-weight:700;display:block}.nav-item:hover .nav-label{opacity:1}}.nav-item.active{color:hsl(var(--color-accent))}.nav-item.active .nav-icon{filter:drop-shadow(0 0 12px hsl(var(--color-accent) / .6))}@media (min-width:768px){.nav-item.active:before{opacity:1;background:hsl(var(--color-accent) / .15);border:1px solid hsl(var(--color-accent) / .3);transform:scale(1)}.nav-item.active .nav-label{color:hsl(var(--color-accent));opacity:1;display:block}}.logout-btn{cursor:pointer;background:0 0;border:none;width:100%}.logout-btn:hover{color:#e05252}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.feedback-trigger-btn{z-index:10001;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-full);color:hsl(var(--color-text-primary));transition:all var(--transition-normal);box-shadow:var(--glass-shadow);border:1px solid var(--glass-border);font-weight:500;display:flex;position:fixed;bottom:2rem;right:2rem}.feedback-trigger-btn:hover{background-color:hsl(var(--color-bg-surface-elevated));border-color:hsl(var(--color-accent) / .5);transform:translateY(-4px)scale(1.05)}.feedback-icon{font-size:1.2rem}@media (max-width:768px){.feedback-trigger-btn{bottom:calc(74px + 1.5rem);right:1.5rem}.no-nav .feedback-trigger-btn{bottom:1.5rem}.feedback-label{display:none}.feedback-trigger-btn{padding:var(--space-3);aspect-ratio:1}}.modal-overlay{-webkit-backdrop-filter:blur(8px);z-index:10002;background-color:#0009;justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.feedback-modal{width:90%;max-width:500px;padding:var(--space-8);flex-direction:column;animation:.3s cubic-bezier(.16,1,.3,1) slideUp;display:flex;background-color:hsl(var(--color-bg-surface-elevated))!important;-webkit-backdrop-filter:none!important}.modal-header{margin-bottom:var(--space-6);justify-content:space-between;align-items:center;display:flex}.modal-header h2{background:linear-gradient(135deg, hsl(var(--color-text-primary)), hsl(var(--color-accent)));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin:0;font-size:1.5rem}.close-button{cursor:pointer;color:hsl(var(--color-text-secondary));transition:color var(--transition-fast);background:0 0;border:none;font-size:2rem;line-height:1}.close-button:hover{color:hsl(var(--color-text-primary))}.feedback-intro{color:hsl(var(--color-text-secondary));margin-bottom:var(--space-6);font-size:.95rem}.feedback-form{gap:var(--space-6);flex-direction:column;display:flex}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-group label{color:hsl(var(--color-text-secondary));font-size:.875rem;font-weight:500}.form-group textarea{width:100%;padding:var(--space-4);background:hsl(var(--color-bg-base));border:1px solid var(--glass-border);border-radius:var(--radius-md);color:hsl(var(--color-text-primary));resize:vertical;transition:all var(--transition-fast);font-family:inherit;font-size:1rem}.form-group textarea:focus{border-color:hsl(var(--color-accent) / .5);background:hsl(var(--color-bg-base) / .8);box-shadow:0 0 0 4px hsl(var(--color-accent) / .1);outline:none}.feedback-footer{justify-content:flex-end;gap:var(--space-4);margin-top:var(--space-2);display:flex}.feedback-success{text-align:center;padding:var(--space-8) 0;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.success-icon{margin-bottom:var(--space-2);font-size:3rem}.feedback-success h3{color:hsl(var(--color-success))}.feedback-success p{color:hsl(var(--color-text-secondary));max-width:300px}.error-text{color:#ff6b6b;margin-top:-var(--space-2);font-size:.875rem}
:root{--color-bg-base:30 15% 8%;--color-bg-surface:30 15% 12%;--color-bg-surface-elevated:30 15% 16%;--color-text-primary:40 30% 96%;--color-text-secondary:40 15% 75%;--color-text-muted:40 10% 55%;--color-accent:25 50% 55%;--color-accent-hover:25 50% 45%;--color-accent-subtle:25 50% 55% / .15;--color-success:120 30% 45%;--color-border:30 15% 20%;--color-border-hover:30 15% 30%;--glass-bg:#231f1aa6;--glass-border:#c2b8a326;--glass-shadow:0 8px 32px #140a0566;--font-body:var(--font-inter), system-ui, sans-serif;--font-heading:var(--font-outfit), var(--font-body);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-normal:.3s cubic-bezier(.4, 0, .2, 1);--nav-width:100px;--nav-offset:var(--space-6);--main-content-padding:calc(var(--nav-width) + var(--nav-offset) + var(--space-8))}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:hsl(var(--color-bg-base));width:100%;min-height:100vh;color:hsl(var(--color-text-primary));font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:600;line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow)}.text-gradient{background:linear-gradient(135deg,#dfba9f,#c2a070);-webkit-text-fill-color:transparent;color:#0000;-webkit-background-clip:text;background-clip:text}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.2s ease-out forwards fadeIn}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up{opacity:0;animation:.6s cubic-bezier(.16,1,.3,1) forwards slideUp}.loading-container{justify-content:center;align-items:center;width:100%;min-height:50vh;display:flex}.loading-content{align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.spinner{border:3px solid hsl(var(--color-bg-surface-elevated));border-top-color:hsl(var(--color-accent));border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{letter-spacing:.05em;font-size:.875rem;font-weight:500}.container{width:100%;max-width:800px;padding:0 var(--space-4);margin:0 auto}.container-fluid{width:100%;max-width:1600px;padding:0 var(--space-4);margin:0 auto}.header{padding:var(--space-3) var(--space-4);margin-bottom:var(--space-8);margin-top:var(--space-4);justify-content:space-between;align-items:center;height:60px;display:flex}.logo{font-family:var(--font-heading);letter-spacing:-.03em;font-weight:700}.app-container{background:0 0;min-height:100vh;display:block;position:relative}.main-content{background:0 0;width:100%;min-height:100vh;padding-bottom:120px}@media (min-width:768px){.main-content{padding-left:var(--main-content-padding);padding-top:var(--space-8);padding-bottom:var(--space-8)}.main-content.no-nav{padding-left:0!important}}.btn-primary{padding:var(--space-3) var(--space-6);background-color:hsl(var(--color-accent));color:#fff;border-radius:var(--radius-full);transition:all var(--transition-fast);box-shadow:0 4px 14px 0 hsl(var(--color-accent) / .39);justify-content:center;align-items:center;font-weight:500;display:inline-flex}.btn-primary:hover{background-color:hsl(var(--color-accent-hover));box-shadow:0 6px 20px 0 hsl(var(--color-accent) / .45);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{padding:var(--space-3) var(--space-6);background-color:var(--glass-bg);color:hsl(var(--color-text-primary));border:1px solid var(--glass-border);border-radius:var(--radius-full);transition:all var(--transition-fast);justify-content:center;align-items:center;font-weight:500;display:inline-flex}.btn-secondary:hover{background-color:hsl(var(--color-bg-surface-elevated));border-color:hsl(var(--color-border-hover))}.cooking-loader-container{padding:var(--space-4);justify-content:center;align-items:center;display:inline-flex}.cooking-loader{transform-origin:bottom;filter:drop-shadow(0 4px 10px #0003);animation:.35s linear infinite simmer;overflow:visible}.pot-body,.pot-handle{--pot-grad-start:hsl(var(--color-accent));--pot-grad-end:#a35c29}.pot-rim{filter:drop-shadow(0 1px 2px #fff3)}.steam{stroke-dasharray:15 15;animation:2.5s linear infinite steam-rise}.steam-1{animation-duration:2.3s;animation-delay:.1s}.steam-2{animation-duration:2.7s;animation-delay:.6s}.steam-3{animation-duration:2.1s;animation-delay:1.2s}.bubble{transform-origin:50%;animation:1.8s ease-in-out infinite bubble-rise}.bubble-1{animation-duration:1.6s;animation-delay:.1s}.bubble-2{animation-duration:2s;animation-delay:.4s}.bubble-3{animation-duration:1.4s;animation-delay:.8s}.bubble-4{animation-duration:1.8s;animation-delay:1.1s}@keyframes simmer{0%,to{transform:rotate(0)translateY(0)}25%{transform:rotate(-.6deg)translateY(-.4px)}50%{transform:rotate(0)translateY(0)}75%{transform:rotate(.6deg)translateY(-.4px)}}@keyframes steam-rise{0%{stroke-dashoffset:30px;opacity:0}15%{opacity:.6}80%{opacity:.6}to{stroke-dashoffset:0;opacity:0}}@keyframes bubble-rise{0%{opacity:0;transform:translateY(12px)scale(.4)}20%{opacity:.8}80%{opacity:.8}to{opacity:0;transform:translateY(-16px)scale(1.1)}}
