:root{--color-primary: #059669;--color-primary-strong: #047857;--color-secondary: #10b981;--color-accent: #ea580c;--color-accent-soft: #ffedd5;--color-background: #ecfdf5;--color-foreground: #0f172a;--color-muted: #f0f8f6;--color-surface: #ffffff;--color-border: #e1f2ed;--color-destructive: #dc2626;--color-ring: #059669;--shadow-card: 0 4px 16px rgba(5, 150, 105, .1);--shadow-card-lg: 0 12px 32px rgba(5, 150, 105, .18);--radius-md: 14px;--radius-lg: 22px;--text-secondary: #476b5f;--gradient-hero: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 100%)}[data-theme=dark]{--color-primary: #34d399;--color-primary-strong: #10b981;--color-secondary: #10b981;--color-accent: #fb923c;--color-accent-soft: #431407;--color-background: #052e22;--color-foreground: #ecfdf5;--color-muted: #0b3b2e;--color-surface: #0a3328;--color-border: #14532d;--color-destructive: #f87171;--color-ring: #34d399;--shadow-card: 0 4px 16px rgba(0, 0, 0, .35);--shadow-card-lg: 0 12px 32px rgba(0, 0, 0, .45);--text-secondary: #a7d4c5;--gradient-hero: linear-gradient(135deg, #059669 0%, #0d9488 55%, #10b981 100%)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:Cairo,system-ui,-apple-system,sans-serif;background:var(--color-background);color:var(--color-foreground);line-height:1.6;min-height:100dvh;transition:background-color .3s ease,color .3s ease}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(600px 300px at 85% 0%,var(--color-secondary) 0%,transparent 60%),radial-gradient(500px 300px at 10% 100%,var(--color-accent) 0%,transparent 55%);opacity:.14;pointer-events:none;z-index:-1}button,input{font-family:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--color-ring);outline-offset:2px}.container{max-width:960px;margin:0 auto;padding:0 20px}.site-header{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--color-background) 82%,transparent);border-bottom:1px solid var(--color-border)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-foreground)}.brand-logo{width:44px;height:44px;border-radius:14px;background:var(--gradient-hero);display:grid;place-items:center;color:#fff;box-shadow:var(--shadow-card);flex-shrink:0}.brand-name{font-weight:800;font-size:1.35rem;line-height:1.2}.brand-tagline{font-size:.8rem;color:var(--text-secondary);font-weight:500}.icon-btn{width:46px;height:46px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-foreground);display:grid;place-items:center;transition:transform .15s ease,background-color .2s ease}.icon-btn:hover{background:var(--color-muted)}.icon-btn:active{transform:scale(.94)}.hero{text-align:center;padding:40px 0 12px}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--color-accent-soft);color:var(--color-accent);font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px;margin-bottom:18px}.hero h1{font-size:clamp(1.7rem,4.5vw,2.7rem);font-weight:900;line-height:1.3;margin-bottom:12px}.hero h1 .accent-word{color:var(--color-primary)}.hero p{color:var(--text-secondary);font-size:1.05rem;max-width:560px;margin:0 auto}.search-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card-lg);padding:24px;margin:28px 0}.search-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px}@media(max-width:768px){.search-row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:700;font-size:.95rem}.field .hint{font-size:.78rem;color:var(--text-secondary)}.input-wrap{position:relative}.input-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.input-wrap input{width:100%;padding:13px 46px 13px 14px;border:2px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-muted);color:var(--color-foreground);font-size:1rem;font-weight:500;transition:border-color .2s ease,box-shadow .2s ease}.input-wrap input::placeholder{color:color-mix(in srgb,var(--text-secondary) 60%,transparent)}.input-wrap input:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary) 18%,transparent);outline:none}.search-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 28px;border:none;border-radius:var(--radius-md);background:var(--gradient-hero);color:#fff;font-size:1.05rem;font-weight:800;min-height:52px;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease;box-shadow:var(--shadow-card)}.search-btn:hover{filter:brightness(1.05);box-shadow:var(--shadow-card-lg)}.search-btn:active{transform:scale(.97)}.search-btn:disabled{opacity:.65;cursor:not-allowed;transform:none}@media(max-width:768px){.search-btn{width:100%}}.quick-title{font-size:.95rem;font-weight:700;color:var(--text-secondary);margin:20px 0 10px;display:flex;align-items:center;gap:8px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-foreground);font-size:.9rem;font-weight:600;transition:background-color .2s ease,color .2s ease,transform .15s ease}.chip:hover{background:var(--color-primary);border-color:var(--color-primary);color:#fff;transform:translateY(-1px)}.status{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:28px 0;color:var(--text-secondary)}.spinner{width:42px;height:42px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-box{background:color-mix(in srgb,var(--color-destructive) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-destructive) 30%,transparent);color:var(--color-destructive);padding:16px 18px;border-radius:var(--radius-md);font-weight:600;display:flex;align-items:center;gap:10px}.section-title{font-size:1.25rem;font-weight:800;margin:28px 0 16px;display:flex;align-items:center;gap:10px}.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.food-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.food-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-lg);border-color:color-mix(in srgb,var(--color-primary) 40%,var(--color-border))}.food-img{width:100%;height:150px;object-fit:cover;background:var(--color-muted)}.food-img-placeholder{width:100%;height:150px;display:grid;place-items:center;background:var(--color-muted);color:color-mix(in srgb,var(--text-secondary) 55%,transparent)}.food-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}.food-name{font-weight:800;font-size:1.02rem;line-height:1.4;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.food-brands{font-size:.82rem;color:var(--text-secondary);font-weight:500}.kcal-pill{display:inline-flex;align-items:center;gap:6px;background:color-mix(in srgb,var(--color-primary) 12%,transparent);color:var(--color-primary-strong);border:1px solid color-mix(in srgb,var(--color-primary) 30%,transparent);border-radius:999px;padding:4px 12px;font-weight:800;font-size:.9rem;align-self:flex-start}[data-theme=dark] .kcal-pill{color:#6ee7b7}.macros{display:flex;flex-wrap:wrap;gap:6px}.macro-chip{font-size:.75rem;font-weight:600;padding:2px 10px;border-radius:999px;background:var(--color-muted);color:var(--text-secondary);border:1px solid var(--color-border)}.calc-btn{margin-top:auto;width:100%;padding:10px;border:none;border-radius:12px;background:var(--gradient-hero);color:#fff;font-weight:800;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s ease,filter .2s ease}.calc-btn:hover{filter:brightness(1.06)}.calc-btn:active{transform:scale(.97)}.detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#02140e8c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;animation:fadeIn .2s ease}.detail-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card-lg);width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;animation:slideUp .25s ease}.detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 0}.detail-img{width:100%;height:180px;object-fit:cover;margin-top:12px;background:var(--color-muted)}.detail-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px}.detail-name{font-size:1.25rem;font-weight:800}.detail-meta{color:var(--text-secondary);font-size:.9rem;font-weight:500}.calc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-box{background:var(--color-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 8px;text-align:center}.stat-value{font-size:1.2rem;font-weight:900;color:var(--color-primary-strong)}[data-theme=dark] .stat-value{color:#6ee7b7}.stat-label{font-size:.72rem;color:var(--text-secondary);font-weight:600;margin-top:2px}.result-hero{background:var(--gradient-hero);color:#fff;border-radius:var(--radius-md);padding:20px;text-align:center;position:relative;overflow:hidden}.result-hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(300px 120px at 20% 20%,rgba(255,255,255,.18),transparent);pointer-events:none}.result-grams{font-size:2.6rem;font-weight:900;line-height:1.1;direction:ltr}.result-unit{font-size:1.05rem;font-weight:600;opacity:.95}.result-desc{margin-top:6px;font-size:.95rem;opacity:.95}.grade-row{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:600;color:var(--text-secondary)}.grade-badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900;color:#fff}.grade-a{background:#16a34a}.grade-b{background:#65a30d}.grade-c{background:#ca8a04}.grade-d{background:#ea580c}.grade-e{background:#dc2626}.note-box{background:color-mix(in srgb,var(--color-accent) 8%,transparent);border:1px dashed color-mix(in srgb,var(--color-accent) 45%,transparent);border-radius:var(--radius-md);padding:12px 14px;font-size:.85rem;color:var(--text-secondary);display:flex;gap:8px;align-items:flex-start}.history-list{display:flex;flex-direction:column;gap:10px}.history-item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .15s ease,border-color .2s ease}.history-item:hover{transform:translateY(-1px);border-color:var(--color-primary)}.history-info{display:flex;align-items:center;gap:12px;min-width:0}.history-thumb{width:46px;height:46px;border-radius:12px;object-fit:cover;background:var(--color-muted);flex-shrink:0}.history-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-meta{font-size:.8rem;color:var(--text-secondary)}.clear-btn{border:none;background:transparent;color:var(--text-secondary);font-size:.82rem;font-weight:600;text-decoration:underline;padding:6px;white-space:nowrap}.clear-btn:hover{color:var(--color-destructive)}.site-footer{margin-top:60px;border-top:1px solid var(--color-border);padding:28px 0 34px;text-align:center;color:var(--text-secondary);font-size:.85rem}.site-footer strong{color:var(--color-foreground)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.reveal{animation:fadeSlideUp .3s ease both}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}