:root {
  color-scheme: light;
  --ink: #173428;
  --muted: #68786e;
  --paper: #f4f7f2;
  --card: rgba(255,255,255,.92);
  --line: rgba(25,65,45,.11);
  --green: #2f7a50;
  --green-2: #8fbc73;
  --deep: #123728;
  --lime: #dff0cb;
  --warn: #ad572d;
  --danger: #a83b3b;
  --shadow: 0 24px 70px rgba(27,63,45,.12);
  --radius: 28px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; line-height: 1.6; }
.eyebrow { font-size: 11px; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; color: var(--green); }
.shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }

.marketing { position:relative; min-height:100svh; overflow:hidden; background:linear-gradient(160deg,#fbfdf9 0%,#edf6e9 48%,#f8faf6 100%); }
.ambient { position:absolute; border-radius:50%; pointer-events:none; filter:blur(2px); opacity:.7; will-change:transform; }
.ambient-a { width:460px; height:460px; right:-150px; top:70px; background:radial-gradient(circle,rgba(178,224,122,.55),rgba(178,224,122,0) 68%); animation:drift-a 12s ease-in-out infinite alternate; }
.ambient-b { width:380px; height:380px; left:-170px; top:520px; background:radial-gradient(circle,rgba(85,163,108,.22),rgba(85,163,108,0) 70%); animation:drift-b 15s ease-in-out infinite alternate; }
.ambient-c { width:520px; height:520px; right:18%; top:980px; background:radial-gradient(circle,rgba(211,237,178,.45),rgba(211,237,178,0) 67%); animation:drift-a 18s ease-in-out infinite alternate-reverse; }
.marketing-nav { height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.marketing-brand { display:flex; align-items:center; gap:13px; }
.marketing-brand img { width:46px; height:46px; border-radius:14px; object-fit:contain; background:#fff; box-shadow:0 10px 28px rgba(30,75,49,.11); }
.marketing-brand strong { display:block; font-size:20px; letter-spacing:-.03em; }
.marketing-brand span { display:block; margin-top:3px; color:var(--muted); font-size:9px; letter-spacing:.035em; }
.marketing-actions,.marketing-cta,.trust-line { display:flex; align-items:center; gap:11px; }
.nav-login { border:0; background:transparent; color:var(--deep); font-weight:850; padding:10px 13px; }
.nav-register { padding:11px 16px; border-radius:13px; box-shadow:none; }
.marketing-hero { min-height:610px; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(340px,.68fr); gap:72px; align-items:center; padding-top:36px; padding-bottom:80px; }
.marketing-copy { position:relative; z-index:2; animation:hero-copy-in .8s cubic-bezier(.2,.8,.2,1) both; }
.marketing-kicker { display:inline-flex; padding:8px 11px; border-radius:999px; background:#e2f0d3; color:var(--green); font-size:11px; font-weight:900; letter-spacing:.08em; }
.marketing-copy h1 { max-width:780px; margin:22px 0; font-size:clamp(50px,7vw,88px); line-height:.99; letter-spacing:-.068em; }
.hero-line { display:inline; }.hero-accent { color:#2f8356; }
.marketing-copy > p { max-width:650px; margin:0; color:var(--muted); font-size:18px; line-height:1.8; }
.marketing-cta { margin-top:30px; }
.marketing-cta button { padding:15px 20px; }
.trust-line { flex-wrap:wrap; margin-top:22px; color:#607268; font-size:11px; font-weight:750; gap:18px; }
.product-stage { position:relative; z-index:1; min-height:520px; display:grid; place-items:center; animation:preview-in .9s .12s cubic-bezier(.2,.8,.2,1) both; }
.product-preview { position:relative; width:100%; min-height:450px; overflow:hidden; padding:30px; border:1px solid rgba(255,255,255,.9); border-radius:38px; background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(245,251,241,.7)); box-shadow:0 34px 100px rgba(29,70,47,.18); backdrop-filter:blur(18px); animation:card-float 6s ease-in-out infinite; }
.product-preview:before { content:""; position:absolute; width:260px; height:260px; right:-100px; top:-90px; border-radius:50%; background:rgba(173,215,125,.34); filter:blur(8px); z-index:-1; }
.scan-sheen { position:absolute; inset:-60% -30%; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.7) 49%,transparent 56%); transform:translateX(-55%); animation:sheen 5.8s ease-in-out infinite; pointer-events:none; }
.float-card { position:absolute; z-index:4; display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid rgba(255,255,255,.9); border-radius:16px; background:rgba(255,255,255,.9); box-shadow:0 18px 45px rgba(24,69,45,.14); backdrop-filter:blur(12px); font-size:10px; color:var(--muted); }
.float-card strong { color:var(--deep); font-size:13px; }.float-card i { width:9px; height:9px; border-radius:50%; background:#78bd65; box-shadow:0 0 0 5px rgba(120,189,101,.15); }
.float-protein { left:-54px; top:100px; animation:float-chip 5s ease-in-out infinite; }.float-streak { right:-40px; bottom:70px; animation:float-chip 5.8s .6s ease-in-out infinite reverse; }
.preview-head { display:flex; justify-content:space-between; align-items:flex-start; }
.preview-head span { font-weight:850; }
.preview-head b { font-size:12px; color:var(--green-2); padding:8px 11px; border-radius:999px; background:#edf7e8; }
.preview-ring { width:210px; height:210px; display:grid; place-items:center; margin:32px auto; border-radius:50%; background:conic-gradient(var(--green) 72%,#e4ece0 0); }
.preview-ring:before { content:""; position:absolute; width:164px; height:164px; border-radius:50%; background:#fff; }
.preview-ring div { position:relative; text-align:center; }.preview-ring strong,.preview-ring span { display:block; }.preview-ring strong { font-size:36px; }.preview-ring span { color:var(--muted); font-size:10px; }
.preview-ring.preview-empty { background:radial-gradient(circle at 50% 35%,#dff3cf,#f0f6ec 66%); border:1px dashed rgba(47,131,86,.32); box-shadow:0 0 0 15px rgba(178,224,122,.1); }
.preview-ring.preview-empty strong { color:var(--green-2); font-size:54px; font-weight:400; line-height:1; margin-bottom:8px; }
.preview-meals { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.preview-meals span { padding:12px 7px; border-radius:13px; background:#eff5ec; text-align:center; font-size:10px; font-weight:800; }
.marketing-section { padding-top:90px; padding-bottom:100px; }
.section-title { max-width:720px; margin-bottom:36px; }.section-title span { color:var(--green); font-size:11px; font-weight:900; letter-spacing:.1em; }.section-title h2 { margin:10px 0 0; font-size:clamp(34px,5vw,58px); line-height:1.05; letter-spacing:-.055em; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }.feature-grid article { min-height:225px; padding:24px; border:1px solid var(--line); border-radius:25px; background:rgba(255,255,255,.7); }.feature-grid i { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#e3f0d6; color:var(--green); font-style:normal; font-size:20px; font-weight:900; }.feature-grid h3 { margin:28px 0 9px; }.feature-grid p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }
.feature-grid article { transition:transform .35s ease,box-shadow .35s ease,background .35s ease; }.feature-grid article:hover { transform:translateY(-8px); background:#fff; box-shadow:0 24px 60px rgba(28,70,46,.12); }
.reveal { opacity:0; transform:translateY(34px); transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1); }.reveal.in-view { opacity:1; transform:none; }.feature-grid article:nth-child(2) { transition-delay:.08s; }.feature-grid article:nth-child(3) { transition-delay:.16s; }.feature-grid article:nth-child(4) { transition-delay:.24s; }
.marketing-final { margin-bottom:54px; padding:38px 42px; display:flex; align-items:center; justify-content:space-between; gap:30px; border-radius:32px; background:var(--deep); color:#fff; }.marketing-final span { color:#b9d69e; font-size:11px; font-weight:900; letter-spacing:.08em; }.marketing-final h2 { margin:7px 0 0; font-size:clamp(27px,4vw,44px); letter-spacing:-.045em; }.marketing-final .primary { background:#dff0cb; color:var(--deep); box-shadow:none; white-space:nowrap; }
.marketing-footer { min-height:78px; display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }

.landing {
  min-height: 100svh;
  padding: 24px 0 38px;
  background:
    radial-gradient(circle at 12% 9%, rgba(185,222,139,.48), transparent 28%),
    radial-gradient(circle at 85% 72%, rgba(76,137,91,.22), transparent 30%),
    linear-gradient(145deg, #f8fbf5 0%, #edf4ea 100%);
}
.landing-grid { display: grid; grid-template-columns: 1.08fr .92fr; min-height: calc(100svh - 62px); gap: 44px; align-items: center; }
.brand-lockup { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; letter-spacing: -.03em; }
.brand-lockup img { width: 52px; height: 52px; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(30,75,49,.12); }
.brand-line, .top-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand-owner { margin:6px 0 0 62px; color:var(--muted); font-size:9px; line-height:1.45; letter-spacing:.035em; }
.side-owner { margin-left:58px; color:rgba(255,255,255,.47); max-width:150px; line-height:1.45; }
.lang-toggle { min-width:46px; height:38px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.8); color:var(--deep); font-weight:900; }
.hero h1 { max-width: 680px; margin: 38px 0 18px; font-size: clamp(45px, 6.2vw, 86px); line-height: .98; letter-spacing: -.065em; }
.hero h1 span { color: var(--green); }
.hero > p { max-width: 600px; font-size: 18px; line-height: 1.8; color: var(--muted); }
.hero-features { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.feature-pill { display: flex; gap: 9px; align-items: center; padding: 12px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.65); font-size: 13px; font-weight: 750; }
.feature-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 5px rgba(143,188,115,.17); }
.auth-card { background: var(--card); border: 1px solid rgba(255,255,255,.9); padding: 30px; border-radius: 36px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: #edf2ea; border-radius: 16px; }
.auth-tabs button { border: 0; background: transparent; border-radius: 12px; padding: 12px; color: var(--muted); font-weight: 800; }
.auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 5px 15px rgba(20,60,40,.09); }
.auth-card h2 { margin: 28px 0 8px; font-size: 30px; letter-spacing: -.04em; }
.field { display: grid; gap: 8px; margin-top: 17px; }
.field label { font-size: 12px; font-weight: 800; color: #42564a; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 15px; padding: 14px 15px; background: rgba(248,250,247,.9); color: var(--ink); outline: none; transition: .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 4px rgba(126,174,97,.14); background: #fff; }
.row { display: flex; gap: 12px; align-items: center; }
.row > * { flex: 1; }
.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.code-row button { border: 1px solid var(--line); border-radius: 14px; padding: 0 13px; background: #fff; color: var(--green); font-size: 12px; font-weight: 850; }
.check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; margin: 18px 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--green); }
.text-link { border: 0; padding: 0; background: none; color: var(--green); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.primary, .secondary, .danger-button { border: 0; border-radius: 16px; padding: 14px 18px; font-weight: 850; transition: transform .16s, box-shadow .16s, opacity .16s; }
.primary { background: var(--deep); color: #fff; box-shadow: 0 14px 30px rgba(18,55,40,.22); }
.primary:hover { transform: translateY(-2px); box-shadow: 0 17px 35px rgba(18,55,40,.27); }
.primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.secondary { background: #e8f0e4; color: var(--deep); }
.danger-button { background: #fff0ee; color: var(--danger); }
.wide { width: 100%; }
.auth-card form > .primary { margin-top:23px; }
.auth-secondary-actions { justify-content:center; margin-top:30px; padding-top:2px; gap:28px; }
.auth-note { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

.app-shell { min-height: 100svh; display: grid; grid-template-columns: 250px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100svh; padding: 24px 18px; background: var(--deep); color: #fff; display: flex; flex-direction: column; z-index: 30; }
.sidebar .brand-lockup { padding: 0 8px; }
.sidebar .brand-lockup img { width: 42px; height: 42px; }
.nav { display: grid; gap: 7px; margin-top: 40px; }
.nav button { display: flex; gap: 12px; align-items: center; border: 0; border-radius: 15px; padding: 13px 14px; text-align: left; color: rgba(255,255,255,.66); background: transparent; font-weight: 750; }
.nav button.active, .nav button:hover { color: #fff; background: rgba(255,255,255,.11); }
.nav-icon { width: 22px; text-align: center; font-size: 18px; }
.sidebar-foot { margin-top: auto; padding: 18px 8px 4px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-foot img { width: 146px; max-height: 52px; object-fit: contain; object-position: left; margin-bottom: 12px; }
.sidebar-foot p { margin: 0; font-size: 10px; line-height: 1.7; color: rgba(255,255,255,.48); }
.main { padding: 30px clamp(20px, 4vw, 56px) 90px; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.topbar h1 { margin: 4px 0 0; font-size: clamp(28px,4vw,44px); letter-spacing: -.055em; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--lime); color: var(--deep); font-weight: 900; }
.date-line { color: var(--muted); font-size: 13px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 22px; }
.card { background: var(--card); border: 1px solid rgba(255,255,255,.9); border-radius: var(--radius); box-shadow: 0 16px 50px rgba(33,70,50,.07); }
.card-pad { padding: 24px; }
.hero-card { position: relative; overflow: hidden; min-height: 255px; padding: 30px; background: var(--deep); color: #fff; }
.hero-card:after { content:""; position:absolute; width:260px; height:260px; right:-75px; bottom:-110px; border: 38px solid rgba(202,232,169,.12); border-radius:50%; }
.hero-card h2 { margin: 9px 0 10px; max-width: 520px; font-size: clamp(29px,4vw,46px); line-height: 1.05; letter-spacing: -.05em; }
.hero-card p { max-width: 530px; color: rgba(255,255,255,.65); line-height: 1.7; }
.scan-button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 16px; padding: 14px 17px; background: #dff0cb; color: var(--deep); font-weight: 900; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 20px; }
.stat { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.stat span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; }
.stat strong { display: block; margin-top: 7px; font-size: 23px; letter-spacing: -.04em; }
.progress { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #e7eee4; }
.progress i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--green-2),var(--green)); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 28px 0 14px; }
.section-head h2 { margin: 0; font-size: 23px; letter-spacing: -.035em; }
.section-head p { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.meal-list { display: grid; gap: 10px; }
.meal { display: grid; grid-template-columns: 46px 1fr auto auto; gap: 13px; align-items: center; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.meal-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #edf5e8; font-size: 21px; }
.meal h3 { margin: 0 0 4px; font-size: 14px; }
.meal p { margin: 0; color: var(--muted); font-size: 11px; }
.meal strong { font-size: 13px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 12px; background: #f2f5f1; color: var(--muted); }
.side-stack { display: grid; align-content: start; gap: 18px; }
.ring { width: 164px; height: 164px; margin: 12px auto 18px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) var(--value), #e6ede2 0); }
.ring:before { content:""; width: 126px; height:126px; border-radius:50%; background:#fff; }
.ring-copy { position:absolute; text-align:center; }
.ring-wrap { position:relative; display:grid; place-items:center; }
.ring-copy strong { display:block; font-size:30px; }
.ring-copy span { font-size:11px; color:var(--muted); }
.recipe-grid { display: grid; gap: 10px; }
.recipe { border: 1px solid var(--line); background:#fff; border-radius:18px; padding:14px; }
.recipe-top { display:flex; justify-content:space-between; gap:12px; }
.recipe h3 { margin:3px 0; font-size:14px; }
.recipe p { margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
.tag { display:inline-flex; padding:5px 8px; border-radius:999px; background:#eaf3e4; color:var(--green); font-size:9px; font-weight:900; letter-spacing:.06em; }
.empty { text-align:center; padding:34px 20px; color:var(--muted); border:1px dashed var(--line); border-radius:18px; }

.panel-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr); gap:22px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 15px; }
.settings-list { display:grid; gap:10px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px; border:1px solid var(--line); border-radius:17px; background:#fff; }
.setting-row h3 { margin:0 0 4px; font-size:14px; }
.setting-row p { margin:0; font-size:11px; color:var(--muted); }
.footer-legal { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 18px; font-size:11px; color:var(--muted); }
.wellness-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.wellness-card { padding:17px; display:grid; gap:10px; align-items:center; grid-template-columns:auto 1fr auto; }
.wellness-card > span { font-size:24px; }
.wellness-card small { display:block; color:var(--muted); font-size:10px; font-weight:800; }
.wellness-card strong { display:block; margin-top:4px; font-size:16px; }
.trend-chart { height:230px; display:grid; grid-template-columns:repeat(14,1fr); gap:7px; align-items:end; padding-top:20px; }
.trend-col { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:7px; }
.trend-col span { width:100%; min-height:3px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,var(--green-2),var(--green)); }
.trend-col small { font-size:8px; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); }

.chat-card { min-height: calc(100svh - 150px); display:flex; flex-direction:column; overflow:hidden; }
.chat-head { padding:22px 24px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,#fff,#edf5e9); }
.chat-head h2 { margin:0 0 5px; }
.chat-head p { margin:0; color:var(--muted); font-size:12px; }
.messages { flex:1; min-height:350px; max-height:calc(100svh - 330px); overflow:auto; padding:24px; display:grid; align-content:start; gap:14px; }
.message { max-width:78%; padding:13px 15px; border-radius:18px; line-height:1.65; font-size:14px; white-space:pre-wrap; }
.message.user { justify-self:end; background:var(--deep); color:#fff; border-bottom-right-radius:5px; }
.message.assistant { justify-self:start; background:#edf4ea; border-bottom-left-radius:5px; }
.chat-input { display:grid; grid-template-columns:1fr auto; gap:10px; padding:16px; border-top:1px solid var(--line); }
.chat-input textarea { resize:none; min-height:50px; max-height:120px; border:1px solid var(--line); border-radius:16px; padding:14px; outline:none; }
.chat-input button { min-width:88px; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px; background:rgba(10,28,20,.62); backdrop-filter:blur(9px); }
.modal { width:min(760px,100%); max-height:min(88svh,900px); overflow:auto; border-radius:28px; background:#fff; box-shadow:0 30px 100px rgba(0,0,0,.28); }
.modal.small { width:min(520px,100%); }
.modal-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:20px 24px; background:rgba(255,255,255,.95); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.modal-head h2 { margin:0; font-size:22px; }
.modal-body { padding:24px; }
.legal h3 { margin:28px 0 8px; font-size:17px; }
.legal h3:first-child { margin-top:0; }
.legal p, .legal li { color:#53645a; line-height:1.85; font-size:13px; }
.legal ul { padding-left:20px; }
.legal-meta { padding:13px 15px; background:#eff5ec; border-radius:14px; font-size:12px; line-height:1.7; }
.notice { padding:13px 15px; border:1px solid #e7dcc0; background:#fff9ea; color:#715d2c; border-radius:14px; font-size:12px; line-height:1.7; }
.analysis-image { width:100%; max-height:280px; object-fit:cover; border-radius:20px; }
.analysis-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:18px 0; }
.analysis-stats div { padding:13px 8px; text-align:center; border-radius:14px; background:#f1f6ee; }
.analysis-stats strong { display:block; font-size:19px; }
.analysis-stats span { font-size:10px; color:var(--muted); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.spinner { width:24px; height:24px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes hero-copy-in { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes preview-in { from { opacity:0; transform:translate(24px,30px) scale(.94); } to { opacity:1; transform:none; } }
@keyframes card-float { 0%,100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-12px) rotate(.4deg); } }
@keyframes float-chip { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-14px); } }
@keyframes sheen { 0%,62% { transform:translateX(-55%); } 82%,100% { transform:translateX(55%); } }
@keyframes drift-a { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(-55px,55px,0) scale(1.12); } }
@keyframes drift-b { from { transform:translate3d(0,0,0); } to { transform:translate3d(70px,-35px,0); } }
.toast { position:fixed; left:50%; bottom:30px; z-index:200; transform:translate(-50%,20px); max-width:min(420px,calc(100% - 30px)); padding:12px 17px; border-radius:999px; background:#173428; color:#fff; opacity:0; pointer-events:none; transition:.25s; box-shadow:0 16px 40px rgba(10,30,20,.25); font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 900px) {
  .marketing-hero { grid-template-columns:1fr; gap:42px; padding-top:54px; }
  .product-stage { width:min(560px,100%); margin:auto; }.product-preview { width:min(520px,100%); margin:auto; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .landing-grid { grid-template-columns:1fr; padding:40px 0; }
  .hero { text-align:center; }
  .hero > p { margin-left:auto; margin-right:auto; }
  .brand-lockup, .hero-features { justify-content:center; }
  .auth-card { width:min(540px,100%); margin:auto; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; top:auto; bottom:0; width:100%; height:auto; padding:8px max(12px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:rgba(18,55,40,.96); backdrop-filter:blur(16px); }
  .sidebar .brand-lockup, .sidebar-foot { display:none; }
  .nav { grid-template-columns:repeat(5,1fr); margin:0; gap:3px; }
  .nav button { justify-content:center; flex-direction:column; gap:3px; padding:7px 3px; font-size:10px; }
  .nav-icon { font-size:17px; }
  .main { padding:22px 16px 105px; }
  .dashboard-grid, .panel-grid { grid-template-columns:1fr; }
  .wellness-grid { grid-template-columns:repeat(2,1fr); }
  .topbar { align-items:flex-start; }
  .user-chip span { display:none; }
}
@media (max-width: 580px) {
  .marketing-nav { height:74px; }.marketing-brand span { display:none; }.marketing-brand img { width:39px; height:39px; }.marketing-brand strong { font-size:17px; }.marketing-actions { gap:4px; }.nav-register { padding:10px 12px; }.lang-toggle { min-width:40px; }.marketing-hero { min-height:auto; padding:48px 0 64px; gap:34px; }.marketing-copy h1 { font-size:52px; line-height:.98; letter-spacing:-.06em; }.marketing-copy h1 .hero-line { display:block; white-space:nowrap; }.marketing-copy > p { font-size:15px; }.marketing-cta { align-items:stretch; flex-direction:column; }.marketing-cta button { width:100%; }.product-stage { min-height:450px; }.product-preview { min-height:390px; padding:22px; border-radius:28px; }.float-protein { left:-5px; top:16px; }.float-streak { right:-4px; bottom:7px; }.preview-ring { width:180px; height:180px; }.preview-ring:before { width:140px; height:140px; }.preview-meals { grid-template-columns:1fr; }.marketing-section { padding-top:65px; padding-bottom:70px; }.feature-grid { grid-template-columns:1fr; }.feature-grid article { min-height:auto; }.marketing-final { align-items:stretch; flex-direction:column; padding:28px; }.marketing-final button { width:100%; }.marketing-footer { padding:22px 0; }
  .landing { padding-top:0; }
  .landing-grid { min-height:auto; padding:26px 0; gap:28px; }
  .hero h1 { margin-top:26px; font-size:44px; }
  .hero > p { font-size:15px; }
  .feature-pill { font-size:11px; }
  .auth-card { padding:22px; border-radius:26px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .hero-card { padding:24px; }
  .meal { grid-template-columns:43px 1fr auto; }
  .meal > strong { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .analysis-stats { grid-template-columns:repeat(2,1fr); }
  .wellness-card:last-child { grid-column:1 / -1; }
  .modal-body { padding:18px; }
  .row.stack-mobile { flex-direction:column; align-items:stretch; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}