:root{--primary-color: #667eea;--secondary-color: #764ba2;--accent-color: #4CAF50;--background-color: #f8f9fa;--surface-color: #ffffff;--text-primary: #333;--text-secondary: #666;--text-muted: #999;--border-color: rgba(102, 126, 234, .1);--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);--gradient-accent: linear-gradient(45deg, var(--primary-color), var(--secondary-color));--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-xxl: 4rem;--border-radius-sm: 8px;--border-radius-md: 12px;--border-radius-lg: 20px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 8px 25px rgba(0, 0, 0, .15);--shadow-lg: 0 20px 60px rgba(0, 0, 0, .1);--font-size-xs: .875rem;--font-size-sm: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--font-size-display: 3rem;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Roboto,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,video,iframe{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{margin-top:0;line-height:1.2}button,a{outline:none;border:none;text-decoration:none;cursor:pointer}button:focus,a:focus{outline:2px solid #4CAF50;outline-offset:2px}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media screen and (max-width: 768px){.container{padding:0 10px}body{font-size:14px}}@media screen and (max-width: 480px){.container{padding:0 5px}body{font-size:13px}}.page-container{max-width:1000px;margin:0 auto;padding:40px 20px}.page-header{text-align:center;margin-bottom:40px}.page-header h1{font-size:32px;margin-bottom:15px;color:#333}.page-header p{font-size:16px;color:#666;line-height:1.6}.form-container{background:white;padding:30px;border-radius:8px;box-shadow:0 4px 6px #0000001a}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:5px;font-weight:500;color:#333}.form-group input,.form-group textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:14px;font-family:inherit;transition:border-color .3s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#4caf50}.form-group textarea{resize:vertical;min-height:120px}.btn{display:inline-block;padding:12px 24px;border:none;border-radius:4px;font-size:16px;cursor:pointer;text-decoration:none;transition:all .3s ease;text-align:center}.btn-primary{background-color:#333;color:#fff}.btn-primary:hover{background-color:#555}.btn-secondary{background-color:#f4f4f4;color:#333}.btn-secondary:hover{background-color:#e0e0e0}.btn-full-width{width:100%}.btn:disabled{background-color:#ccc;cursor:not-allowed}.card{background:white;border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-5px);box-shadow:0 8px 15px #0003}.card-content{padding:20px}.grid{display:grid;grid-gap:30px;gap:30px}.grid-auto-fit{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}@media screen and (max-width: 768px){.page-container{padding:30px 15px}.page-header h1{font-size:28px}.page-header p{font-size:15px}.form-container{padding:20px}.form-group input,.form-group textarea{padding:10px;font-size:13px}.btn{padding:12px;font-size:15px}.card-content{padding:15px}.grid{gap:20px}.grid-auto-fit{grid-template-columns:1fr}}@media screen and (max-width: 480px){.page-container{padding:20px 10px}.page-header h1{font-size:24px}.page-header p{font-size:14px}.form-container{padding:15px}.form-group input,.form-group textarea{padding:8px;font-size:12px}.btn{padding:10px;font-size:14px}.card-content{padding:12px}.grid{gap:15px}}.navbar{display:flex;justify-content:space-between;align-items:center;padding:20px;background-color:#333;color:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px #0000001a}.navbar-brand{display:flex;align-items:center}.navbar-title{font-size:24px;text-decoration:none;color:#fff;font-weight:700;transition:color .3s ease}.navbar-title:hover{color:#4caf50}.mobile-menu-toggle{display:none;flex-direction:column;cursor:pointer;gap:4px;padding:8px;background:transparent;border:none;z-index:1001;position:relative}.hamburger-line{width:25px;height:3px;background-color:#fff;transition:all .3s ease;border-radius:2px;transform-origin:center}.hamburger-line.active:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.hamburger-line.active:nth-child(2){opacity:0;transform:scale(0)}.hamburger-line.active:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}.navbar-links{list-style:none;display:flex;gap:20px;margin:0;padding:0;align-items:center}.navbar-links li{display:inline-block}.navbar-links a{color:#fff;text-decoration:none;padding:10px 16px;transition:all .3s ease;border-radius:6px;font-weight:500;position:relative}.navbar-links a:hover{background-color:#ffffff1a;transform:translateY(-2px)}.login-btn{background:linear-gradient(45deg,#4CAF50,#45a049)!important;border-radius:6px}.login-btn:hover{background:linear-gradient(45deg,#45a049,#3d8b40)!important;box-shadow:0 4px 15px #4caf504d}.shopping-list-btn{background:linear-gradient(45deg,#2196F3,#1976D2)!important;border-radius:6px}.shopping-list-btn:hover{background:linear-gradient(45deg,#1976D2,#1565C0)!important;box-shadow:0 4px 15px #2196f34d}.user-info{display:flex;align-items:center;gap:15px;background:rgba(255,255,255,.1);padding:8px 15px;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.user-info span{color:#fff;font-weight:500}.logout-btn{background:linear-gradient(45deg,#f44336,#d32f2f)!important;border-radius:6px;font-size:.9rem;padding:6px 12px!important}.logout-btn:hover{background:linear-gradient(45deg,#d32f2f,#c62828)!important;box-shadow:0 4px 15px #f443364d}@media screen and (max-width: 768px){.navbar{padding:15px 20px;position:relative}.navbar-title{font-size:20px}.mobile-menu-toggle{display:flex;order:3}.navbar-brand{order:1;flex:1}.navbar-links{position:absolute;top:100%;left:0;width:100%;background:linear-gradient(135deg,#333 0%,#2c2c2c 100%);flex-direction:column;align-items:stretch;gap:0;max-height:0;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 25px #00000026;border-radius:0 0 12px 12px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:999}.navbar-links.mobile-open{max-height:500px;padding:10px 0}.navbar-links li{width:100%;text-align:left;border-bottom:1px solid rgba(255,255,255,.1);margin:0}.navbar-links li:last-child{border-bottom:none}.navbar-links a{display:block;padding:18px 25px;width:100%;box-sizing:border-box;transition:all .3s ease;border-radius:0}.navbar-links a:hover{background:rgba(255,255,255,.1);transform:translate(8px);border-left:4px solid #4CAF50}.user-info{flex-direction:column;width:100%;gap:12px;padding:20px 25px;background:rgba(255,255,255,.05);border-radius:8px;margin:10px 15px;width:calc(100% - 30px)}}.hero-section{padding:var(--spacing-xxl) 0 var(--spacing-xl);background:var(--gradient-primary);color:#fff;text-align:center;position:relative;overflow:hidden}.hero-section:before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>') repeat}.card{background:var(--surface-color);padding:var(--spacing-xl);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-accent)}.section-title{font-size:var(--font-size-xxl);color:var(--text-primary);margin:0 0 var(--spacing-md);text-align:center;position:relative}.section-title:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:60px;height:4px;background:var(--gradient-accent);border-radius:2px}.page-title{font-size:var(--font-size-display);font-weight:700;margin:0 0 var(--spacing-md);background:linear-gradient(45deg,#fff,#f0f8ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-subtitle{font-size:var(--font-size-lg);opacity:.9;max-width:600px;margin:0 auto;line-height:1.6}.btn-primary{background:var(--gradient-primary);color:#fff;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--border-radius-md);border:none;cursor:pointer;font-size:var(--font-size-md);font-weight:600;transition:all .3s ease;text-decoration:none;display:inline-block}.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.container-max{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}@media (max-width: 768px){.hero-section{padding:var(--spacing-xl) 0 var(--spacing-lg)}.page-title{font-size:var(--font-size-xxl)}.card{padding:var(--spacing-lg)}}@media screen and (max-width: 768px){.user-info span{margin-bottom:8px;text-align:center}.logout-btn{align-self:center;min-width:120px;text-align:center}.navbar-links li{opacity:0;transform:translate(-20px);transition:all .3s ease}.navbar-links.mobile-open li{opacity:1;transform:translate(0)}.navbar-links.mobile-open li:nth-child(1){transition-delay:.1s}.navbar-links.mobile-open li:nth-child(2){transition-delay:.15s}.navbar-links.mobile-open li:nth-child(3){transition-delay:.2s}.navbar-links.mobile-open li:nth-child(4){transition-delay:.25s}.navbar-links.mobile-open li:nth-child(5){transition-delay:.3s}.navbar-links.mobile-open li:nth-child(6){transition-delay:.35s}}@media screen and (max-width: 480px){.navbar{padding:12px 15px}.navbar-title{font-size:18px}.navbar-links a{padding:16px 20px;font-size:.95rem}.user-info{padding:18px 20px;margin-left:10px;margin-right:10px;width:calc(100% - 20px)}}