:root{--color-primary:#4f46e5;--color-primary-light:#818cf8;--color-primary-dark:#3730a3;--color-success:#10b981;--color-warning:#f59e0b;--color-danger:#ef4444;--color-bg:#f9fafb;--color-surface:#fff;--color-text:#111827;--color-text-secondary:#6b7280;--color-border:#e5e7eb;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #00000012;--shadow-lg:0 10px 25px #0000001a;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-size-xs:clamp(.7rem, .65rem + .25vw, .75rem);--font-size-sm:clamp(.8rem, .75rem + .25vw, .875rem);--font-size-base:clamp(.875rem, .8rem + .4vw, 1rem);--font-size-lg:clamp(1rem, .9rem + .5vw, 1.25rem);--font-size-xl:clamp(1.25rem, 1.1rem + .75vw, 1.5rem);--font-size-2xl:clamp(1.5rem, 1.25rem + 1.25vw, 2rem)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);font-size:var(--font-size-base);color:var(--color-text);background:var(--color-bg);-webkit-text-size-adjust:100%;touch-action:manipulation;-webkit-font-smoothing:antialiased;line-height:1.6}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.container{width:100%;max-width:1200px;padding:0 var(--space-md);margin:0 auto}.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:var(--font-size-base);cursor:pointer;border:none;min-width:44px;min-height:44px;font-weight:600;transition:all .2s;display:inline-flex}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark)}.btn-secondary{background:var(--color-border);color:var(--color-text)}.btn-secondary:hover{background:#d1d5db}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-block{width:100%}.form-group{gap:var(--space-xs);flex-direction:column;display:flex}.form-group label{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:600}.form-group input,.form-group select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);-webkit-appearance:none;outline:none;min-height:44px;font-size:16px;transition:border-color .2s}.form-group input:focus,.form-group select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #4f46e51a}.error-text{color:var(--color-danger);font-size:var(--font-size-sm);opacity:0;grid-template-rows:0fr;margin:0;transition:grid-template-rows .3s,opacity .3s,margin .3s;display:grid;overflow:hidden}.error-text.visible{opacity:1;grid-template-rows:1fr}.error-text>span{overflow:hidden}.success-text{color:var(--color-success);font-size:var(--font-size-sm);opacity:0;grid-template-rows:0fr;margin:0;transition:grid-template-rows .3s,opacity .3s,margin .3s;display:grid;overflow:hidden}.success-text.visible{opacity:1;grid-template-rows:1fr}.success-text>span{overflow:hidden}.page{padding:var(--space-lg) 0;min-height:100vh}.page-title{font-size:var(--font-size-2xl);margin-bottom:var(--space-lg);font-weight:700}.grid-2{gap:var(--space-md);grid-template-columns:1fr;display:grid}@media (width>=768px){.grid-2{grid-template-columns:1fr 1fr}}.grid-3{gap:var(--space-md);grid-template-columns:1fr;display:grid}@media (width>=768px){.grid-3{grid-template-columns:1fr 1fr 1fr}}.bottom-nav{background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-sm) 0;z-index:100;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav a{font-size:var(--font-size-xs);color:var(--color-text-secondary);padding:var(--space-xs);flex-direction:column;justify-content:center;align-items:center;gap:2px;min-width:44px;min-height:44px;text-decoration:none;display:flex}.bottom-nav a.active{color:var(--color-primary)}.bottom-nav a span.icon{font-size:20px}@media (width>=768px){.bottom-nav{display:none}}.sidebar{display:none}@media (width>=768px){.app-layout{grid-template-columns:220px 1fr;min-height:100vh;display:grid}.sidebar{gap:var(--space-sm);background:var(--color-surface);border-right:1px solid var(--color-border);padding:var(--space-lg);flex-direction:column;height:100vh;display:flex;position:sticky;top:0}.sidebar .logo{font-size:var(--font-size-xl);color:var(--color-primary);margin-bottom:var(--space-lg);font-weight:700}.sidebar a{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--color-text-secondary);font-weight:500;text-decoration:none;display:flex}.sidebar a:hover{background:var(--color-bg);color:var(--color-text)}.sidebar a.active{color:var(--color-primary);background:#4f46e514}.sidebar .logout-btn{margin-top:auto}.main-content{padding:var(--space-xl);padding-bottom:var(--space-2xl)}}@media (width<=767px){.main-content{padding:var(--space-md);padding-bottom:80px}}.calorie-ring{width:180px;height:180px;margin:0 auto;position:relative}.calorie-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.calorie-ring svg circle{transition:stroke-dashoffset .6s,stroke .3s}.calorie-ring-center{text-align:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.calorie-ring-center .amount{font-size:var(--font-size-2xl);font-weight:700}.calorie-ring-center .label{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.meal-item{align-items:center;gap:var(--space-md);padding:var(--space-md);border-bottom:1px solid var(--color-border);display:flex}.meal-item:last-child{border-bottom:none}.meal-item .meal-info{flex:1}.meal-item .meal-name{font-weight:600}.meal-item .meal-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.meal-item .meal-cals{color:var(--color-primary);font-weight:700}.meal-item .meal-delete{color:var(--color-text-secondary);cursor:pointer;padding:var(--space-xs);background:0 0;border:none;justify-content:center;align-items:center;min-width:44px;min-height:44px;font-size:18px;display:flex}.meal-item .meal-delete:hover{color:var(--color-danger)}.modal-overlay{z-index:200;padding:var(--space-md);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);width:100%;max-width:480px;box-shadow:var(--shadow-lg)}.modal h2{margin-bottom:var(--space-md)}.suggestion-card{border-radius:var(--radius-lg);padding:var(--space-lg);background:linear-gradient(135deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe}.suggestion-card .suggestion-text{font-size:var(--font-size-lg);color:var(--color-primary-dark);font-weight:500}.macro-bar{gap:var(--space-md);flex-wrap:wrap;display:flex}.macro-item{align-items:center;gap:var(--space-xs);flex-direction:column;flex:1;min-width:70px;display:flex}.macro-item .macro-value{font-size:var(--font-size-lg);font-weight:700}.macro-item .macro-label{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.motivation-banner{z-index:300;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-lg);color:#fff;background:linear-gradient(135deg,#4f46e5,#7c3aed);animation:.4s ease-out motivationSlideIn;display:flex;position:fixed;top:0;left:0;right:0}.motivation-text{font-size:var(--font-size-sm);flex:1;font-weight:500;line-height:1.4}.motivation-close{color:#fff;border-radius:var(--radius-full);cursor:pointer;background:#fff3;border:none;flex-shrink:0;justify-content:center;align-items:center;width:28px;height:28px;font-size:18px;transition:background .2s;display:flex}.motivation-close:hover{background:#ffffff59}@keyframes motivationSlideIn{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.macro-cards{gap:var(--space-sm);margin-bottom:var(--space-md);grid-template-columns:repeat(3,1fr);display:grid}.macro-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-md);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);align-items:center;gap:var(--space-sm);text-align:center;flex-direction:column;display:flex}.macro-card-ring{width:64px;height:64px;position:relative}.macro-card-ring svg{width:100%;height:100%}.macro-card-ring svg circle{transition:stroke-dashoffset .6s}.macro-card-pct{font-size:var(--font-size-xs);color:var(--color-text);justify-content:center;align-items:center;font-weight:700;transition:opacity .3s;display:flex;position:absolute;inset:0}.macro-card-info{flex-direction:column;gap:2px;display:flex}.macro-card-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);font-weight:700}.macro-card-value{font-size:var(--font-size-sm);color:var(--color-text);font-weight:600}.macro-card-sep{color:var(--color-text-secondary);font-weight:400}.macro-card-remaining{font-size:var(--font-size-xs);color:var(--color-text-secondary)}@media (width<=480px){.macro-cards{gap:var(--space-xs);grid-template-columns:repeat(3,1fr)}.macro-card{padding:var(--space-sm)}.macro-card-ring{width:52px;height:52px}}.scan-area{align-items:center;gap:var(--space-lg);padding:var(--space-xl);flex-direction:column;display:flex}.photo-preview{border-radius:var(--radius-lg);width:100%;max-width:400px;overflow:hidden}.photo-preview img{width:100%;height:auto;display:block}.camera-btn{background:var(--color-primary);color:#fff;border:4px solid var(--color-primary-light);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;font-size:32px;transition:transform .2s;display:flex}.camera-btn:hover{transform:scale(1.05)}.steps{gap:var(--space-sm);margin-bottom:var(--space-xl);justify-content:center;display:flex}.step{background:var(--color-border);border-radius:50%;width:10px;height:10px}.step.active{background:var(--color-primary)}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);width:32px;height:32px;margin:var(--space-lg) auto;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.legal-page{width:100%;max-width:680px}.legal-page section{margin-bottom:var(--space-lg)}.legal-page h2{font-size:var(--font-size-lg);margin-bottom:var(--space-sm);color:var(--color-text);font-weight:600}.legal-page p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-sm);line-height:1.7}.legal-page ul{padding-left:var(--space-lg);margin-bottom:var(--space-sm)}.legal-page li{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-xs);line-height:1.7}.legal-updated{font-size:var(--font-size-xs);color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.legal-links{text-align:center;margin-top:var(--space-md);font-size:var(--font-size-xs);color:var(--color-text-secondary)}.legal-links a{color:var(--color-text-secondary);text-underline-offset:2px;text-decoration:underline}.legal-links a:hover{color:var(--color-primary)}.legal-links-sep{margin:0 var(--space-sm)}