*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Typography: Syne (display) + DM Sans (body) */
h1,h2,h3,.ea-h1,.tsla-hero-content h1,.ea-stat-num,.fcat-title,.logo{font-family:'Syne',sans-serif}
body{font-family:'DM Sans',system-ui,sans-serif}

/* PWA safe-area (iOS notch / Dynamic Island) */
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
.navbar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));}
:root{
  --c1:#06141B;
  --c2:#0d1f2d;
  --c3:#132330;
  --c4:#2a4a5e;
  --c5:#6b8fa8;
  --c6:#e8f4f0;
  --accent:#22d48f;
  --accent2:#18b87a;
  --accent-coral:#ff5e5b;
  --accent-yellow:#ffd166;
  --accent-glow:rgba(34,212,143,.25);
  --green:#22d48f;
  --red:#ff5e5b;
  --orange:#ffd166;
  --purple:#7c6af0;
  --border:rgba(34,212,143,.18);
  --radius:16px;
  --toggle-bg:rgba(255,255,255,.08);
  --toggle-border:rgba(255,255,255,.14);
  --toggle-knob:rgba(255,255,255,.14);
  --toggle-knob-border:rgba(255,255,255,.22);
  --toggle-shadow:rgba(0,0,0,.35);
  --toggle-text:rgba(255,255,255,.65);
}

/* ===== LIGHT MODE ===== */
body[data-theme="light"]{
  --c1:#f0f7f4;
  --c2:#ffffff;
  --c3:#e4f2ec;
  --c4:#9ab8c4;
  --c5:#4a7a8a;
  --c6:#0d1f2d;
  --border:rgba(34,212,143,.18);
  --accent:#18b87a;
  --accent2:#0fa060;
  --accent-glow:rgba(34,212,143,.2);
  --toggle-bg:rgba(0,0,0,.06);
  --toggle-border:rgba(0,0,0,.1);
  --toggle-knob:rgba(255,255,255,.9);
  --toggle-knob-border:rgba(0,0,0,.1);
  --toggle-shadow:rgba(0,0,0,.15);
  --toggle-text:rgba(0,0,0,.55);
}
body[data-theme="light"] .tsla-hero-bg{
  background:linear-gradient(180deg,#e8f4f8 0%,#ddeef5 40%,#d0e8f2 100%);
}
body[data-theme="light"] .hero-glow-1{
  background:radial-gradient(circle,rgba(61,138,173,.12) 0%,transparent 65%);
}
body[data-theme="light"] .hero-glow-2{
  background:radial-gradient(circle,rgba(45,180,120,.08) 0%,transparent 60%);
}
body[data-theme="light"] .hero-grid{
  background-image:
    linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
}
body[data-theme="light"] .navbar.scrolled{
  background:rgba(244,242,239,.9);
}
body[data-theme="light"] .tbtn.tbtn-line{
  background:rgba(0,0,0,.05);
  color:var(--c6);
  border-color:rgba(0,0,0,.12);
}
body[data-theme="light"] .tbtn.tbtn-line:hover{background:rgba(0,0,0,.1)}
body[data-theme="light"] .tsla-section{background:var(--c1)}
body[data-theme="light"] .tsla-section.alt{background:#eceae6}
body[data-theme="light"] .tsla-footer-section{background:linear-gradient(0deg,rgba(0,0,0,.04),transparent)}
body[data-theme="light"] .tsla-hero-content h1,
body[data-theme="light"] .tsla-sec-content h2,
body[data-theme="light"] .tsla-footer-section h2{color:var(--c6)}
body[data-theme="light"] .tsla-eyebrow,
body[data-theme="light"] .tsla-sec-label,
body[data-theme="light"] .nav-a.active{color:var(--accent)}
body[data-theme="light"] .logo{color:var(--c6)}
body[data-theme="light"] .nav-a{color:var(--c5)}
body[data-theme="light"] .nav-a:hover{color:var(--c6);background:rgba(0,0,0,.06)}
body[data-theme="light"] .tsec-icon-wrap.accent-blue{
  background:radial-gradient(circle,rgba(61,138,173,.12) 0%,transparent 100%);
  box-shadow:0 0 60px rgba(61,138,173,.1);
}
body[data-theme="light"] .tsec-icon-wrap.accent-green{
  background:radial-gradient(circle,rgba(34,160,100,.12) 0%,transparent 100%);
  box-shadow:0 0 60px rgba(34,160,100,.1);
}
body[data-theme="light"] .tsec-icon-wrap.accent-purple{
  background:radial-gradient(circle,rgba(130,100,220,.12) 0%,transparent 100%);
  box-shadow:0 0 60px rgba(130,100,220,.1);
}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--c1);color:var(--c6);
  min-height:100vh;line-height:1.6;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.muted{color:var(--c5);font-size:.9rem}
.tbtn.full{width:100%;justify-content:center;padding:14px}

/* ============ LIQUID TOGGLE ============ */
/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher{
  display:flex;align-items:center;gap:3px;
  background:var(--toggle-bg);
  border:1px solid var(--toggle-border);
  border-radius:10px;
  padding:4px 8px;
}
.lang-btn{
  background:none;border:none;
  font-size:.72rem;font-weight:800;font-family:inherit;
  color:var(--c5);cursor:pointer;
  padding:3px 5px;border-radius:6px;
  transition:all .18s;letter-spacing:.4px;
}
.lang-btn:hover{color:var(--c6)}
.lang-btn.active{
  background:var(--accent);
  color:#fff;
  box-shadow:0 2px 8px rgba(141,177,120,.35);
}
.lang-sep{color:var(--border);font-size:.65rem;user-select:none}
@media(max-width:768px){.lang-switcher:not(.mobile-lang){display:none}}
@media(min-width:769px){.mobile-lang{display:none}}
.mobile-lang{margin-top:8px;justify-content:center;padding:8px 16px;border-radius:12px;}

/* ===== GLASS TOGGLE ===== */
.liquid-toggle{
  position:relative;
  width:128px;height:52px;
  background:none;border:none;
  cursor:pointer;padding:0;
  flex-shrink:0;outline:none;
}

/* Track */
.lt-track{
  position:absolute;inset:0;
  border-radius:26px;
  background:#141414;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.75),
    inset -2px -2px 6px rgba(255,255,255,.04),
    0 1px 0 rgba(255,255,255,.05),
    0 8px 32px rgba(0,0,0,.5);
  transition:background .4s ease,box-shadow .4s ease;
}
body[data-theme="light"] .lt-track{
  background:#cacacf;
  box-shadow:
    inset 4px 4px 10px rgba(0,0,0,.14),
    inset -4px -4px 10px rgba(255,255,255,.82),
    0 8px 24px rgba(0,0,0,.12);
}

/* Label text */
.lt-label{
  position:absolute;
  right:16px;top:50%;
  transform:translateY(-50%);
  font-size:.72rem;font-weight:700;letter-spacing:.5px;
  color:rgba(255,255,255,.28);
  z-index:1;
  pointer-events:none;
  transition:opacity .3s,right .4s cubic-bezier(.65,0,.35,1);
  user-select:none;
}
body[data-theme="light"] .lt-label{
  left:16px;right:auto;
  color:rgba(0,0,0,.3);
}

/* Knob */
.lt-knob{
  position:absolute;
  top:6px;left:6px;
  width:40px;height:40px;
  border-radius:50%;
  background:linear-gradient(145deg,#2c2c2e,#1c1c1e);
  box-shadow:
    4px 4px 10px rgba(0,0,0,.65),
    -1px -1px 4px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;
  font-size:.88rem;color:rgba(255,255,255,.7);
  z-index:2;
  transition:left .42s cubic-bezier(.65,0,.35,1),
             background .4s ease,
             box-shadow .4s ease,
             color .3s;
}

/* Light state: knob slides right */
.liquid-toggle.is-light .lt-knob{
  left:82px;
  background:linear-gradient(145deg,#f0f0f2,#d8d8dc);
  color:rgba(0,0,0,.55);
  box-shadow:
    4px 4px 10px rgba(0,0,0,.18),
    -2px -2px 6px rgba(255,255,255,.9),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Animate knob sliding */
.liquid-toggle.going-light .lt-knob{
  animation:glassToRight .42s cubic-bezier(.65,0,.35,1) forwards;
}
.liquid-toggle.going-dark .lt-knob{
  animation:glassToLeft .42s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes glassToRight{
  0%  {left:6px; width:40px;border-radius:50%}
  45% {left:6px; width:62px;border-radius:20px 28px 28px 20px}
  78% {left:60px;width:48px;border-radius:24px 20px 20px 24px}
  100%{left:82px;width:40px;border-radius:50%}
}
@keyframes glassToLeft{
  0%  {left:82px;width:40px;border-radius:50%}
  45% {left:44px;width:62px;border-radius:28px 20px 20px 28px}
  78% {left:10px; width:48px;border-radius:20px 24px 24px 20px}
  100%{left:6px;  width:40px;border-radius:50%}
}

/* Mobile: compact toggle */
@media(max-width:768px){
  .liquid-toggle{width:82px;height:34px;}
  .lt-track{border-radius:17px;}
  .lt-knob{top:4px;left:4px;width:26px;height:26px;font-size:.6rem;}
  .liquid-toggle.is-light .lt-knob{left:52px;}
  .lt-label{font-size:.58rem;right:9px;top:50%;}
  body[data-theme="light"] .lt-label{left:9px;right:auto;}
}

/* ============ NAVBAR ============ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:transparent;
  transition:background .3s ease,backdrop-filter .3s ease,border-color .3s;
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background:rgba(6,20,27,.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-color:var(--border);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 32px;max-width:1200px;margin:0 auto;
}
.logo{
  font-size:1.2rem;font-weight:800;color:var(--c6);
  letter-spacing:-.5px;
}
.nav-links{display:flex;gap:4px}
.nav-a{
  padding:7px 14px;border-radius:8px;color:var(--c5);
  font-size:.85rem;transition:.2s;cursor:pointer;font-weight:500;
}
.nav-a:hover{color:var(--c6);background:rgba(74,92,106,.2)}
.nav-a.active{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:8px}
#authBtns,#userInfo{display:flex;align-items:center;gap:8px}
.user-name{font-size:.88rem;color:var(--c6);font-weight:600}
.burger{display:none;background:none;border:none;color:var(--c6);font-size:1.2rem;cursor:pointer;padding:4px}

/* ============ TESLA BUTTONS ============ */
.tbtn{
  padding:12px 32px;border-radius:30px;
  font-size:.92rem;font-weight:600;
  cursor:pointer;transition:.25s;border:none;
  display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.tbtn.tbtn-fill{
  background:var(--accent);
  color:#06141B;
  font-weight:700;
  box-shadow:0 4px 24px var(--accent-glow);
}
.tbtn.tbtn-fill:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 10px 36px var(--accent-glow)}
.tbtn.tbtn-line{
  background:rgba(255,255,255,.07);
  color:var(--c6);
  border:1px solid rgba(204,208,207,.25);
  backdrop-filter:blur(8px);
}
.tbtn.tbtn-line:hover{background:rgba(255,255,255,.14);border-color:rgba(204,208,207,.5)}
.tbtn.sm{padding:8px 20px;font-size:.82rem}
.tbtn.full{width:100%;justify-content:center;padding:14px}

/* ============ HERO — LIDO STYLE ============ */
/* ===== HERO SLIDESHOW ===== */
.slide-hero{
  position:relative;
  height:100vh;min-height:640px;
  overflow:hidden;
  display:flex;align-items:center;
}

/* Slides container */
.sh-slides{position:absolute;inset:0;z-index:0;}

.sh-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.2s ease;
}
.sh-slide.active{opacity:1;}

/* Background image with Ken Burns */
.sh-img{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1);
}
.sh-img::after{position:absolute;inset:0;}
.sh-slide.active .sh-img{
  animation:kenBurns 9s ease-out forwards;
}

@keyframes kenBurns{
  0%  {transform:scale(1)    translateX(0)}
  100%{transform:scale(1.12) translateX(-1%)}
}

/* Slide backgrounds — cinematic food gradients */
.sh-img-1{
  background:
    radial-gradient(ellipse at 70% 40%, #2d6a2d 0%, #1a4a1a 35%, #0a2a12 65%, #061a0e 100%),
    linear-gradient(135deg, #0d3320 0%, #1a5c2a 50%, #0a2a15 100%);
  background-blend-mode: screen;
}
/* Salat rangi — chuqur yashil, organic */
.sh-img-1::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 65% 35%, rgba(120,200,80,.35) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(80,160,40,.2) 0%, transparent 40%),
    radial-gradient(circle at 30% 60%, rgba(40,100,20,.25) 0%, transparent 45%);
}

/* Nonushta — iliq sariq-to'q sariq */
.sh-img-2{
  background:linear-gradient(135deg, #3a1f0a 0%, #6b3510 30%, #8b4a18 55%, #4a2808 80%, #1a0d04 100%);
}
.sh-img-2::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 60% 40%, rgba(220,140,40,.4) 0%, transparent 50%),
    radial-gradient(circle at 75% 65%, rgba(180,90,20,.25) 0%, transparent 40%),
    radial-gradient(circle at 25% 30%, rgba(200,120,30,.2) 0%, transparent 35%);
}

/* Smoothie — to'q qizil-binafsha */
.sh-img-3{
  background:linear-gradient(135deg, #1a0a2e 0%, #3d1060 30%, #5a1a7a 55%, #2a0845 80%, #0d0418 100%);
}
.sh-img-3::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 65% 35%, rgba(180,60,200,.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(120,30,160,.25) 0%, transparent 40%),
    radial-gradient(circle at 20% 50%, rgba(200,80,220,.2) 0%, transparent 45%);
}

/* O'rtayer denizi taomi — kech qizil + zangori */
.sh-img-4{
  background:linear-gradient(135deg, #0a1a2e 0%, #0d3060 30%, #1a4a8a 55%, #0a2050 80%, #040c1a 100%);
}
.sh-img-4::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 65% 40%, rgba(40,120,220,.4) 0%, transparent 50%),
    radial-gradient(circle at 30% 65%, rgba(20,80,180,.25) 0%, transparent 42%),
    radial-gradient(circle at 78% 70%, rgba(60,160,240,.2) 0%, transparent 38%);
}

/* Dark gradient overlay */
.sh-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.15) 100%),
    linear-gradient(to top,   rgba(0,0,0,.55) 0%, transparent 50%);
}

/* Text content */
.sh-content{
  position:relative;z-index:3;
  max-width:560px;
  padding:0 7% 120px;
}
.sh-eyebrow{
  display:block;
  font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:3.5px;
  color:rgba(255,255,255,.65);
  margin-bottom:20px;
  opacity:0;animation:shFadeUp .8s .2s ease forwards;
}
.sh-title{
  font-size:clamp(2.8rem,5.5vw,5rem);
  font-weight:800;line-height:1.05;
  letter-spacing:-2.5px;
  color:#fff;
  margin-bottom:20px;
  opacity:0;animation:shFadeUp .8s .4s ease forwards;
}
.sh-desc{
  font-size:.95rem;
  color:rgba(255,255,255,.72);
  line-height:1.8;
  margin-bottom:32px;
  max-width:420px;
  opacity:0;animation:shFadeUp .8s .6s ease forwards;
}
.sh-btns{
  display:flex;gap:12px;flex-wrap:wrap;
  opacity:0;animation:shFadeUp .8s .75s ease forwards;
}

@keyframes shFadeUp{
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Slide dots */
.sh-dots{
  position:absolute;bottom:96px;left:7%;z-index:4;
  display:flex;gap:8px;align-items:center;
}
.sh-dot{
  width:28px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.35);
  border:none;cursor:pointer;padding:0;
  transition:background .3s,width .3s;
}
.sh-dot.active{
  background:#fff;width:48px;
}

/* Text fade animation on slide change */
.sh-content.changing .sh-eyebrow,
.sh-content.changing .sh-title,
.sh-content.changing .sh-desc,
.sh-content.changing .sh-btns{
  opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease;
}

/* Stats bar */
.lido-stats{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 7%;
}
body[data-theme="light"] .lido-stats{
  background:rgba(255,255,255,.25);
  border-top:1px solid rgba(255,255,255,.5);
}

/* Keep old lido-hero for compatibility */
.tsla-hero{
  height:100vh;min-height:640px;
  position:relative;
  display:flex;align-items:center;
  overflow:hidden;
}
.lido-hero{padding:0 7% 120px;}

/* Background */
.lido-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#def0fb 0%,#edf8ff 45%,#f8fbff 70%,#e4f4fc 100%);
  transition:background .5s;
}
body:not([data-theme="light"]) .lido-bg{
  background:linear-gradient(180deg,#06141B 0%,#0b1c28 55%,#11212D 100%);
}

/* Subtle grid only in dark */
body:not([data-theme="light"]) .lido-bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(74,92,106,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(74,92,106,.05) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at 30% 50%,rgba(0,0,0,.5),transparent 70%);
}

/* Left content */
.lido-content{
  position:relative;z-index:3;
  max-width:480px;flex-shrink:0;
}
.tsla-eyebrow{
  display:inline-block;
  font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:3px;
  margin-bottom:22px;
  color:var(--accent);
}
body[data-theme="light"] .tsla-eyebrow{color:#2a7fa8}
.lido-content h1{
  font-size:clamp(2.6rem,5vw,4.4rem);
  font-weight:800;line-height:1.08;
  letter-spacing:-2px;
  color:var(--c6);
  margin-bottom:20px;
}
body[data-theme="light"] .lido-content h1{color:#0a1e2e}
.lido-content p{
  font-size:.97rem;color:var(--c5);
  margin-bottom:32px;line-height:1.75;
}
body[data-theme="light"] .lido-content p{color:#4a6070}
.tsla-btns{display:flex;gap:12px;flex-wrap:wrap}
body[data-theme="light"] .lido-content .tbtn-fill{
  background:#0a1e2e;
  box-shadow:0 4px 20px rgba(10,30,46,.25);
}
body[data-theme="light"] .lido-content .tbtn-line{
  background:rgba(255,255,255,.55);
  color:#0a1e2e;border-color:rgba(10,30,46,.18);
}

/* ===== AURORA BACKGROUND ===== */
/* ===== AURORA BACKGROUND ===== */
.aurora-layer{
  position:absolute;inset:-80px;z-index:1;
  pointer-events:none;
  filter:blur(70px);         /* Blur butun layerga — animatsiya bloklanmaydi */
}
.ab{
  position:absolute;border-radius:50%;
}

/* Light mode aurora */
.ab1{
  width:700px;height:600px;
  top:50px;right:0;
  background:radial-gradient(circle at 40% 40%,#5dd8e8 0%,#93e8f2 45%,transparent 72%);
  opacity:.75;
  animation:aFloat1 14s ease-in-out infinite;
}
.ab2{
  width:580px;height:520px;
  top:120px;right:220px;
  background:radial-gradient(circle,#a8f0f8 0%,#c8f8ff 50%,transparent 74%);
  opacity:.7;
  animation:aFloat2 18s ease-in-out infinite;animation-delay:-6s;
}
.ab3{
  width:500px;height:440px;
  bottom:0;right:60px;
  background:radial-gradient(circle,#b8f4fc 0%,#dafcff 55%,transparent 76%);
  opacity:.65;
  animation:aFloat3 11s ease-in-out infinite;animation-delay:-3s;
}
.ab4{
  width:400px;height:360px;
  top:50%;left:32%;
  background:radial-gradient(circle,#e2fafe 0%,#c4f4fc 52%,transparent 76%);
  opacity:.55;
  animation:aFloat1 20s ease-in-out infinite reverse;animation-delay:-9s;
}
.ab5{
  width:300px;height:280px;
  top:8%;right:44%;
  background:radial-gradient(circle,#00d4e8 0%,#18e8f8 45%,transparent 70%);
  opacity:.4;
  animation:aFloat2 16s ease-in-out infinite;animation-delay:-2s;
}

/* Dark mode aurora */
body:not([data-theme="light"]) .ab1{
  background:radial-gradient(circle at 40% 40%,rgba(21,212,230,.55),rgba(10,140,168,.3) 52%,transparent 75%);
  opacity:1;
}
body:not([data-theme="light"]) .ab2{
  background:radial-gradient(circle,rgba(91,163,200,.4),rgba(38,105,150,.25) 52%,transparent 75%);
  opacity:1;
}
body:not([data-theme="light"]) .ab3{
  background:radial-gradient(circle,rgba(74,222,128,.28),rgba(25,150,90,.15) 52%,transparent 75%);
  opacity:1;
}
body:not([data-theme="light"]) .ab4{
  background:radial-gradient(circle,rgba(167,139,250,.22),rgba(100,75,200,.12) 52%,transparent 75%);
  opacity:1;
}
body:not([data-theme="light"]) .ab5{
  background:radial-gradient(circle,rgba(56,189,248,.3),rgba(20,140,200,.15) 50%,transparent 72%);
  opacity:1;
}

@keyframes aFloat1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(-55px,40px,0) scale(1.1)}
  66%    {transform:translate3d(35px,-28px,0) scale(.93)}
}
@keyframes aFloat2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%    {transform:translate3d(45px,-55px,0) scale(1.13)}
  72%    {transform:translate3d(-30px,35px,0) scale(.91)}
}
@keyframes aFloat3{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-40px,-42px,0) scale(1.11)}
}

/* Stats bar (shared) */
.lst-item{flex:1;text-align:center;padding:0 20px}
.lst-num{font-size:1.6rem;font-weight:800;letter-spacing:-1px;color:#fff;margin-bottom:4px;}
.lst-lbl{font-size:.72rem;color:rgba(255,255,255,.65);font-weight:500}
.lst-div{width:1px;height:40px;background:rgba(255,255,255,.15);flex-shrink:0}

/* Navbar override — transparent on lido hero */
body[data-theme="light"] .navbar{background:transparent}
body[data-theme="light"] .navbar.scrolled{background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.08)}
body[data-theme="light"] .logo{color:#0a1e2e}
body[data-theme="light"] .nav-a{color:#4a6070}
body[data-theme="light"] .nav-a:hover{color:#0a1e2e;background:rgba(0,0,0,.06)}
body[data-theme="light"] .nav-a.active{color:#2a7fa8}
body[data-theme="light"] .burger{color:#0a1e2e}

@media(max-width:900px){
  .sh-content{padding:0 24px 120px;max-width:100%}
  .sh-title{font-size:2.4rem;letter-spacing:-1.5px}
  .sh-dots{left:24px;bottom:90px}
  .lido-stats{padding:18px 24px}
  .lst-num{font-size:1.2rem}
  .lst-item{padding:0 10px}
  /* old lido fallback */
  .lido-hero{padding:90px 24px 130px;align-items:flex-end}
  .lido-content{max-width:100%}
}

/* ============ TESLA SECTIONS ============ */
.tsla-section{
  min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;gap:80px;
  padding:100px 80px;max-width:1200px;margin:0 auto;
  border-top:1px solid var(--border);
}
.tsla-section.alt{direction:rtl}
.tsla-section.alt>*{direction:ltr}
.tsla-sec-label{
  display:inline-block;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:2.5px;
  color:var(--accent);margin-bottom:16px;
}
.tsla-sec-content h2{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:800;
  letter-spacing:-1px;color:var(--c6);
  margin-bottom:16px;line-height:1.1;
}
.tsla-sec-content p{
  color:var(--c5);font-size:.97rem;line-height:1.8;
  margin-bottom:28px;max-width:440px;
}
.tsla-sec-btns{display:flex;gap:10px;flex-wrap:wrap}
.tsla-sec-visual{display:flex;justify-content:center;align-items:center}
.tsec-icon-wrap{
  width:220px;height:220px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:5rem;
  border:1px solid var(--border);
  animation:iconFloat 5s ease-in-out infinite;
}
.tsec-icon-wrap.accent-blue{
  background:radial-gradient(circle,rgba(34,212,143,.14) 0%,rgba(34,212,143,.03) 60%,transparent 100%);
  box-shadow:0 0 80px rgba(34,212,143,.18),inset 0 1px 0 rgba(255,255,255,.05);
  border-color:rgba(34,212,143,.2);
}
.tsec-icon-wrap.accent-green{
  background:radial-gradient(circle,rgba(124,106,240,.15) 0%,rgba(124,106,240,.03) 60%,transparent 100%);
  box-shadow:0 0 80px rgba(124,106,240,.18),inset 0 1px 0 rgba(255,255,255,.05);
  border-color:rgba(124,106,240,.2);
}
.tsec-icon-wrap.accent-purple{
  background:radial-gradient(circle,rgba(255,214,102,.15) 0%,rgba(255,214,102,.03) 60%,transparent 100%);
  box-shadow:0 0 80px rgba(255,214,102,.14),inset 0 1px 0 rgba(255,255,255,.05);
  border-color:rgba(255,214,102,.18);
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.02)}
}

/* FOOTER SECTION */
.tsla-footer-section{
  text-align:center;padding:80px 24px 40px;
  border-top:1px solid var(--border);
  background:linear-gradient(0deg,rgba(17,33,45,.5),transparent);
}
.tsla-footer-section h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-1px;color:var(--c6);margin-bottom:14px}
.tsla-footer-section p{color:var(--c5);font-size:.97rem;margin-bottom:32px;max-width:400px;margin-left:auto;margin-right:auto}

/* ============ INNER PAGES ============ */
.inner-page{
  min-height:100vh;
  padding-top:90px;
  padding-bottom:60px;
}
.inner-container{
  max-width:900px;margin:0 auto;padding:0 24px;
}
.inner-container.narrow{max-width:560px}
.inner-header{margin-bottom:32px}
.inner-header h2{font-size:1.8rem;font-weight:800;letter-spacing:-.5px;color:var(--c6);margin-bottom:6px}
.inner-sub{color:var(--c5);font-size:.9rem}
.section-mini-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--c5);margin-bottom:12px}

/* ============ CARDS ============ */
.card-panel{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px;
  box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03);
}

/* ============ CALORIE RING ============ */
.calring-card{
  background:var(--c2);border:1px solid var(--border);
  border-radius:20px;padding:28px;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  margin-bottom:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.03);
}
.calring-wrap{display:flex;justify-content:center}
.calring-svg{width:220px;height:220px}
.calring-meta{display:flex;gap:8px;width:100%}
.crm-item{
  flex:1;display:flex;align-items:center;gap:8px;
  background:var(--c3);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;
}
.crm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.crm-dot.blue{background:var(--accent)}
.crm-dot.green{background:var(--green)}
.crm-dot.orange{background:var(--orange)}
.crm-item span{font-size:.7rem;color:var(--c5);flex:1}
.crm-item strong{font-size:.85rem;font-weight:800;color:var(--c6)}
.calring-status{
  font-size:.9rem;font-weight:600;color:var(--c5);text-align:center;
  background:var(--c3);border-radius:10px;
  padding:10px 20px;width:100%;border:1px solid var(--border);
}

/* DIARY PROGRESS */
.diary-progress-card{
  background:var(--c2);border:1px solid var(--border);
  border-radius:20px;padding:20px;margin-bottom:14px;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.dp-header{display:flex;justify-content:space-between;font-size:.82rem;color:var(--c5);margin-bottom:12px}
.dp-header strong{color:var(--c6)}
.dp-bar{height:8px;background:rgba(74,92,106,.3);border-radius:8px;overflow:hidden;margin-bottom:12px}
.dp-fill{height:100%;border-radius:8px;background:var(--accent);transition:width 1.2s ease,background .8s ease}
.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dp-stat{background:var(--c3);border:1px solid var(--border);border-radius:12px;padding:10px;text-align:center;font-size:.7rem;color:var(--c5)}
.dp-val{font-size:1rem;font-weight:800;color:var(--c6);margin-bottom:3px}

/* MEALS */
.meal-add-form{
  display:flex;gap:8px;
  background:var(--c2);border:1px solid var(--border);
  border-radius:16px;padding:12px;margin-bottom:14px;
}
.meal-add-form input{
  flex:1;background:var(--c3);border:1px solid var(--border);
  color:var(--c6);padding:10px 14px;border-radius:10px;font-size:.88rem;
  font-family:inherit;
}
.meal-add-form input::placeholder{color:var(--c4)}
.meal-add-form input:focus{outline:none;border-color:var(--accent)}
.meal-add-form input:nth-child(2){flex:.4;max-width:110px}
.meals-list{
  background:var(--c2);border:1px solid var(--border);
  border-radius:20px;padding:20px;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
}
.meals-list-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;
}
.meals-list-header span{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--c5)}
.meal-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;background:var(--c3);
  border:1px solid var(--border);border-radius:12px;
  gap:8px;margin-bottom:6px;
}
.meal-item strong{color:var(--c6);font-size:.9rem}
.meal-item small{color:var(--c5);font-size:.76rem}
.meal-right{display:flex;align-items:center;gap:8px}
.cal-badge{background:var(--accent);color:#fff;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700}
.del-btn{background:none;border:none;color:var(--c4);cursor:pointer;padding:4px 6px;border-radius:6px;transition:.2s;font-size:.78rem}
.del-btn:hover{color:var(--red)}

/* ============ SCAN ============ */
/* ===== CAL AI SCAN PAGE ===== */
.cal-scan-page{max-width:480px;margin:0 auto;padding:80px 16px 40px;}

/* Upload zone */
.cal-upload-zone{
  position:relative;border-radius:24px;overflow:hidden;
  background:var(--c2);border:2px dashed rgba(91,163,200,.25);
  min-height:260px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s;
}
.cal-upload-zone:hover{border-color:var(--accent);}
.cal-upload-inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:40px 24px;text-align:center;
}
.cal-upload-icon{
  width:72px;height:72px;border-radius:50%;
  background:rgba(91,163,200,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:var(--accent);
  margin-bottom:6px;
}
.cal-upload-title{font-size:1rem;font-weight:700;color:var(--c6);}
.cal-upload-sub{font-size:.8rem;color:var(--c5);}
.cal-preview-img{
  width:100%;height:300px;object-fit:cover;display:block;
}
.cal-change-btn{
  position:absolute;bottom:12px;right:12px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
  color:#fff;border:none;border-radius:20px;
  padding:7px 14px;font-size:.78rem;font-weight:600;cursor:pointer;
}

/* Analyze button */
.cal-scan-actions{margin-top:14px;}
.cal-analyze-btn{
  width:100%;padding:16px;border-radius:18px;border:none;
  background:linear-gradient(135deg,var(--accent),#3d8aad);
  color:#fff;font-size:1rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 8px 24px rgba(91,163,200,.3);
  transition:transform .15s,box-shadow .15s;
}
.cal-analyze-btn:active{transform:scale(.97);}

/* Loading */
.cal-loading{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:40px;text-align:center;color:var(--c5);font-size:.9rem;
}
.cal-loading-ring{
  width:48px;height:48px;
  border:3px solid rgba(91,163,200,.2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== RESULT CARD — CAL AI ===== */
.cal-result-card{
  margin-top:20px;
  border-radius:28px;overflow:hidden;
  background:var(--c2);
  border:1px solid var(--border);
  animation:fadeUp .5s ease;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Photo at top */
.cal-rc-photo{position:relative;}
.cal-rc-photo img{
  width:100%;height:220px;object-fit:cover;display:block;
}
.cal-rc-time{
  position:absolute;top:14px;left:14px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(8px);
  color:#fff;font-size:.72rem;font-weight:600;
  padding:4px 10px;border-radius:20px;
}

/* Body */
.cal-rc-body{padding:20px;}

/* Name + serving */
.cal-rc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px;}
.cal-rc-name{font-size:1.25rem;font-weight:800;color:var(--c6);line-height:1.2;}
.cal-rc-serving{
  flex-shrink:0;
  background:var(--c3);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;
  font-size:.82rem;font-weight:600;color:var(--c5);
  white-space:nowrap;
}

/* Calories */
.cal-rc-calories{
  display:flex;align-items:baseline;gap:8px;margin-bottom:20px;
}
.cal-fire{font-size:1.5rem;}
.cal-rc-num{font-size:2.8rem;font-weight:900;color:var(--c6);letter-spacing:-1.5px;line-height:1;}
.cal-rc-kcal{font-size:.85rem;color:var(--c5);font-weight:500;}

/* Macros */
.cal-rc-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px;}
.cal-macro{
  border-radius:18px;padding:14px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.protein-card{background:rgba(239,68,68,.1);}
.carbs-card{background:rgba(234,179,8,.1);}
.fats-card{background:rgba(59,130,246,.1);}
.cm-icon-wrap{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;
}
.protein-card .cm-icon-wrap{background:rgba(239,68,68,.18);color:#ef4444;}
.carbs-card .cm-icon-wrap{background:rgba(234,179,8,.18);color:#eab308;}
.fats-card .cm-icon-wrap{background:rgba(59,130,246,.18);color:#3b82f6;}
.cm-value{font-size:1.1rem;font-weight:800;color:var(--c6);}
.cm-label{font-size:.7rem;color:var(--c5);font-weight:500;}

/* Health Score */
.cal-health-score{
  background:var(--c3);border-radius:18px;padding:16px;margin-bottom:16px;
}
.chs-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.chs-left{display:flex;align-items:center;gap:8px;}
.chs-heart{font-size:1.1rem;}
.chs-title{font-size:.88rem;font-weight:600;color:var(--c6);}
.chs-num{font-size:1rem;font-weight:800;color:var(--c6);}
.chs-track{height:8px;background:rgba(74,92,106,.3);border-radius:4px;overflow:hidden;}
.chs-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#4ade80,#22c55e);transition:width 1s ease;}

/* Ingredients */
.cal-ingredients{margin-bottom:16px;}
.cal-ing-title{font-size:.85rem;font-weight:700;color:var(--c5);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;}
.cal-ing-list{display:flex;flex-wrap:wrap;gap:6px;}
.cal-ing-tag{
  background:var(--c3);border:1px solid var(--border);
  border-radius:20px;padding:5px 12px;
  font-size:.78rem;color:var(--c5);
}

/* Buttons */
.cal-rc-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px;}
.cal-btn-fix{
  padding:14px;border-radius:16px;border:1px solid var(--border);
  background:var(--c3);color:var(--c6);
  font-size:.85rem;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .2s;
}
.cal-btn-fix:hover{background:var(--c4);}
.cal-btn-done{
  padding:14px;border-radius:16px;border:none;
  background:linear-gradient(135deg,var(--accent),#3d8aad);
  color:#fff;font-size:.85rem;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 4px 16px rgba(91,163,200,.3);
}

/* History */
.cal-history-section{margin-top:28px;}
.cal-hist-title{font-size:.85rem;font-weight:700;color:var(--c5);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}

/* ===== CAL AI NUTRITION VIEW (full-screen) ===== */
.cnv-screen{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;
  overflow-y:auto;
  background:#f5f5f7;
  animation:cnvSlideUp .35s cubic-bezier(.32,0,.67,0) forwards;
}
body:not([data-theme="light"]) .cnv-screen{background:#0e1418;}
@keyframes cnvSlideUp{
  from{transform:translateY(100%);opacity:0}
  to  {transform:translateY(0);   opacity:1}
}

/* Photo */
.cnv-photo-wrap{
  position:relative;
  height:42vh;min-height:250px;
  flex-shrink:0;
}
.cnv-photo-img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* Top bar over photo */
.cnv-topbar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:max(52px,env(safe-area-inset-top)) 16px 16px;
}
.cnv-nav-title{
  font-size:.95rem;font-weight:700;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.cnv-icon-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.28);backdrop-filter:blur(10px);
  border:none;cursor:pointer;
  color:#fff;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}

/* White sheet */
.cnv-sheet{
  background:#fff;
  border-radius:28px 28px 0 0;
  margin-top:-24px;
  flex:1;
  padding:22px 20px max(32px,env(safe-area-inset-bottom));
}
body:not([data-theme="light"]) .cnv-sheet{background:#0e1418;}

/* Floating food bubble */
.cnv-food-bubble{
  position:absolute;
  bottom:30px;right:20px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-radius:20px;
  padding:8px 14px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  animation:bubblePop .4s cubic-bezier(.34,1.56,.64,1) .15s both;
}
body:not([data-theme="light"]) .cnv-food-bubble{background:rgba(30,40,50,.92);}
@keyframes bubblePop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.cnv-bubble-name{font-size:.82rem;font-weight:700;color:#111;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body:not([data-theme="light"]) .cnv-bubble-name{color:#f0f0f0;}
.cnv-bubble-cal{font-size:.82rem;font-weight:800;color:#ea4c37;white-space:nowrap;}

/* Meta */
.cnv-sheet-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.cnv-category-lbl{font-size:.72rem;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:1.2px;}
.cnv-time{font-size:.72rem;color:#bbb;font-weight:500;margin-left:auto;}

/* Food name */
.cnv-food-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;}
.cnv-food-name{font-size:1.3rem;font-weight:800;color:#111;line-height:1.25;flex:1;}
body:not([data-theme="light"]) .cnv-food-name{color:#f0f0f0;}

/* Serving counter */
.cnv-srv-ctrl{display:flex;align-items:center;gap:0;flex-shrink:0;border:1.5px solid #e0e0e0;border-radius:22px;overflow:hidden;}
body:not([data-theme="light"]) .cnv-srv-ctrl{border-color:#333;}
.cnv-srv-btn{
  width:34px;height:34px;border:none;background:transparent;
  font-size:1.1rem;font-weight:700;color:#555;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
body:not([data-theme="light"]) .cnv-srv-btn{color:#ccc;}
.cnv-srv-btn:active{background:rgba(0,0,0,.06);}
.cnv-srv-num{min-width:22px;text-align:center;font-size:.9rem;font-weight:700;color:#111;}
body:not([data-theme="light"]) .cnv-srv-num{color:#f0f0f0;}

/* 2×2 Macro grid */
.cnv-macro-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.cnv-mg-card{
  border-radius:18px;padding:14px 16px;
  display:flex;flex-direction:column;gap:3px;
}
.cnv-mg-cal {background:#fff3f0;}  .cnv-mg-carb{background:#fffbeb;}
.cnv-mg-prot{background:#fff1f0;}  .cnv-mg-fat {background:#f0fdf4;}
body:not([data-theme="light"]) .cnv-mg-cal {background:rgba(255,100,50,.1);}
body:not([data-theme="light"]) .cnv-mg-carb{background:rgba(234,179,8,.1);}
body:not([data-theme="light"]) .cnv-mg-prot{background:rgba(239,68,68,.1);}
body:not([data-theme="light"]) .cnv-mg-fat {background:rgba(34,197,94,.1);}
.cnv-mg-emoji{font-size:1.25rem;margin-bottom:2px;}
.cnv-mg-val{font-size:1.25rem;font-weight:900;color:#111;letter-spacing:-.5px;}
body:not([data-theme="light"]) .cnv-mg-val{color:#f0f0f0;}
.cnv-mg-label{font-size:.7rem;color:#999;font-weight:600;text-transform:uppercase;letter-spacing:.6px;}

/* Health Score */
.cnv-health-card{
  background:#fdf0f5;border-radius:18px;
  padding:16px;margin-bottom:18px;
}
body:not([data-theme="light"]) .cnv-health-card{background:rgba(244,114,182,.08);}
.cnv-health-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.cnv-health-left{display:flex;align-items:center;gap:8px;}
.cnv-heart-wrap{
  width:32px;height:32px;border-radius:10px;
  background:#fce7f3;
  display:flex;align-items:center;justify-content:center;
}
.cnv-heart{color:#ec4899;font-size:.85rem;}
.cnv-health-lbl{font-size:.88rem;font-weight:600;color:#333;}
body:not([data-theme="light"]) .cnv-health-lbl{color:#ccc;}
.cnv-health-num{font-size:1rem;font-weight:800;color:#111;}
body:not([data-theme="light"]) .cnv-health-num{color:#f0f0f0;}
.cnv-bar-track{height:7px;background:#f0d6e4;border-radius:4px;overflow:hidden;}
.cnv-bar-fill{height:100%;border-radius:4px;background:#4ade80;transition:width 1.2s ease;}

/* Section title */
.cnv-sec-title{font-size:.78rem;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;}

/* Buttons */
.cnv-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;}
.cnv-btn-fix{
  padding:15px;border-radius:50px;
  border:1.5px solid #ddd;background:#fff;
  font-size:.85rem;font-weight:600;color:#333;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
body:not([data-theme="light"]) .cnv-btn-fix{background:#182028;border-color:#253745;color:#ccc;}
.cnv-btn-done{
  padding:15px;border-radius:50px;border:none;
  background:#111;color:#fff;
  font-size:.85rem;font-weight:700;cursor:pointer;
}
body:not([data-theme="light"]) .cnv-btn-done{background:#5BA3C8;}
.scan-history{display:flex;flex-direction:column;gap:8px}
.history-item{display:flex;gap:12px;background:var(--c2);border-radius:14px;padding:12px;border:1px solid var(--border);align-items:center;cursor:pointer;transition:transform .15s,box-shadow .15s}
.history-item:active{transform:scale(.98);box-shadow:0 2px 12px rgba(0,0,0,.15)}
.history-item img{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--c3);flex-shrink:0}
.history-info{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.history-info strong{font-size:.88rem;color:var(--c6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-info small{color:var(--c5);font-size:.74rem}
.hi-arrow{color:var(--c5);font-size:.75rem;flex-shrink:0}

/* ============ PROFILE ============ */
.profile-card{background:var(--c2);border:1px solid var(--border);border-radius:20px;padding:28px;text-align:center;margin-bottom:14px}
.profile-avatar{width:72px;height:72px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;margin:0 auto 14px}
.profile-card h3{color:var(--c6);font-size:1.1rem;font-weight:700;margin-bottom:4px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.stat-card{background:var(--c2);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:center;font-size:.8rem;color:var(--c5)}
.stat-big{font-size:1.5rem;font-weight:800;color:var(--c6);margin-bottom:3px}
.stat-big.green{color:var(--green)}
.setup-prompt{text-align:center;padding:40px;background:var(--c2);border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:14px;border:1px solid var(--border)}

/* ============ RULER WIDGET ============ */
.rulers-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
@media(max-width:520px){.rulers-row{grid-template-columns:1fr}}

.ruler-widget{
  background:#07101a;
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  display:flex;align-items:center;
  gap:0;height:190px;
  overflow:hidden;
  cursor:grab;
  user-select:none;
  touch-action:none;
  position:relative;
  box-shadow:inset 0 0 40px rgba(0,0,0,.4);
}
.ruler-widget:active{cursor:grabbing}

.rw-track{
  position:relative;
  width:64px;height:100%;
  overflow:hidden;flex-shrink:0;
}
.rw-strip{
  position:absolute;
  width:100%;
  will-change:transform;
}
.rw-tick-row{
  display:flex;align-items:center;
  justify-content:flex-end;
  position:relative;
  padding-right:2px;
}
.rw-tick{height:1px;background:rgba(255,255,255,.15);flex-shrink:0;width:10px}
.rw-tick.mid{width:17px;background:rgba(255,255,255,.28)}
.rw-tick.major{width:26px;background:rgba(255,255,255,.55)}
.rw-tick-lbl{
  position:absolute;right:32px;
  font-size:9px;color:rgba(255,255,255,.38);
  font-weight:600;line-height:1;
  font-family:'Segoe UI',sans-serif;
}

/* Fixed center overlay */
.rw-overlay{
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;
  pointer-events:none;
}
.rw-glow-bar{
  width:3px;height:44px;border-radius:2px;
  flex-shrink:0;
}
.rw-knob{
  width:28px;height:28px;border-radius:50%;
  background:#0a1520;
  border:1.5px solid;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;flex-shrink:0;
  margin-left:-1px;
}

/* Value display */
.rw-display{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.rw-val{
  font-size:3.8rem;font-weight:800;
  line-height:1;letter-spacing:-2px;
  font-family:'Segoe UI',sans-serif;
}
.rw-unit{
  font-size:.7rem;color:rgba(255,255,255,.38);
  font-weight:700;letter-spacing:2px;
  text-transform:uppercase;margin-top:8px;
}

/* ============ SETUP / FORMS ============ */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{margin-bottom:14px;text-align:left}
.form-group label{display:block;margin-bottom:6px;font-size:.78rem;color:var(--c5);font-weight:500;letter-spacing:.3px}
.form-group input,.form-group select{
  width:100%;background:var(--c3);
  border:1.5px solid var(--border);color:var(--c6);
  padding:11px 14px;border-radius:12px;font-size:.9rem;transition:.2s;
  font-family:inherit;
}
.form-group input::placeholder{color:var(--c4)}
.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--accent);background:var(--c3)}
.form-group select option{background:var(--c2);color:var(--c6)}

/* RESULT */
.result-setup{max-width:400px;margin:0 auto;text-align:center;background:var(--c2);border-radius:20px;padding:36px;border:1px solid var(--border)}
.result-icon{font-size:3rem;margin-bottom:12px}
.result-big{font-size:3rem;font-weight:800;margin:14px 0 6px;letter-spacing:-1px;color:var(--green)}
.result-big span{font-size:1rem;color:var(--c5);font-weight:400}
.bmi-result{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-size:.9rem}
.bmi-badge{color:#fff;padding:3px 12px;border-radius:20px;font-size:.8rem;font-weight:700}

/* ============ AUTH ============ */
.auth-page{display:flex;align-items:center;justify-content:center}
.auth-card{
  width:100%;max-width:380px;
  background:var(--c2);border:1px solid var(--border);
  border-radius:24px;padding:36px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.auth-logo{text-align:center;font-size:1.5rem;font-weight:800;color:var(--c6);margin-bottom:8px;letter-spacing:-.5px}
.auth-card h2{text-align:center;margin-bottom:24px;font-weight:700;letter-spacing:-.5px;color:var(--c6)}
.auth-switch{text-align:center;margin-top:16px;font-size:.85rem;color:var(--c5)}
.auth-switch a{color:var(--accent);font-weight:600}
.msg-box{margin-top:10px;padding:10px 14px;border-radius:10px;font-size:.84rem;display:none}
.msg-box.error{display:block;background:rgba(248,113,113,.1);color:var(--red);border:1px solid rgba(248,113,113,.25)}
.msg-box.success{display:block;background:rgba(74,222,128,.08);color:var(--green);border:1px solid rgba(74,222,128,.2)}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--c1)}
::-webkit-scrollbar-thumb{background:var(--c3);border-radius:4px}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .tsla-section{grid-template-columns:1fr;text-align:center;padding:80px 32px;min-height:auto;gap:40px}
  .tsla-section.alt{direction:ltr}
  .tsla-sec-content p{max-width:100%}
  .tsla-sec-btns{justify-content:center}
  .tsla-sec-visual{order:-1}
}
@media(max-width:768px){
  .nav-links{
    display:none;flex-direction:column;
    position:absolute;top:64px;left:0;right:0;
    background:rgba(6,20,27,.98);
    border-bottom:1px solid var(--border);
    padding:16px;z-index:99;
    backdrop-filter:blur(20px);
  }
  .nav-links.open{display:flex}
  .burger{display:block}
  .nav-inner{padding:0 20px}
  .tsla-hero-content h1{letter-spacing:-1px}
  .tsec-icon-wrap{width:160px;height:160px;font-size:3.5rem}
  .nutrients{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:1fr}
  .calring-meta{flex-direction:column}
}
@media(max-width:480px){
  .tsla-btns,.tsla-sec-btns{flex-direction:column;align-items:center}
  .tbtn{width:100%;justify-content:center}
  .tsla-section{padding:60px 20px}
}

/* ============================================================
   CAL AI — HERO
   ============================================================ */
.ea-hero{
  background:#06141B;
  padding:100px 48px 60px;
  overflow:hidden;
  position:relative;
}
body[data-theme="light"] .ea-hero{background:#f0f7f4}
body:not([data-theme="light"]) .ea-hero{background:#06141B}

/* ---- Background blobs — electric green + purple ---- */
.ea-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}
.ea-blob-1{
  width:560px;height:560px;
  background:radial-gradient(circle,rgba(34,212,143,.22),rgba(18,160,100,.06));
  top:-140px;right:-80px;
  opacity:.8;
  animation:blobPulse 8s ease-in-out infinite;
}
.ea-blob-2{
  width:420px;height:420px;
  background:radial-gradient(circle,rgba(124,106,240,.2),rgba(91,106,240,.06));
  bottom:-100px;left:-100px;
  opacity:.7;
  animation:blobPulse 10s ease-in-out infinite reverse;
}
.ea-blob-3{
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(34,212,143,.12),rgba(124,106,240,.08));
  top:45%;right:32%;
  opacity:.6;
  animation:blobPulse 12s ease-in-out infinite 2s;
}
@keyframes blobPulse{
  0%,100%{transform:scale(1) translate(0,0)}
  33%{transform:scale(1.08) translate(12px,-8px)}
  66%{transform:scale(.94) translate(-8px,10px)}
}
body:not([data-theme="light"]) .ea-blob-1{opacity:.6}
body:not([data-theme="light"]) .ea-blob-2{opacity:.5}
body:not([data-theme="light"]) .ea-blob-3{opacity:.4}

.ea-hero-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

/* ---- Left col ---- */
.ea-hero-left{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  gap:22px;
  max-width:460px;
}

/* Social proof badge */
.ea-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(34,212,143,.1);
  backdrop-filter:blur(16px);
  border:1px solid rgba(34,212,143,.3);
  border-radius:100px;
  padding:6px 16px 6px 6px;
  font-size:.8rem;
  font-weight:500;
  color:rgba(255,255,255,.75);
  width:fit-content;
  box-shadow:0 0 20px rgba(34,212,143,.12),inset 0 1px 0 rgba(255,255,255,.08);
}
body[data-theme="light"] .ea-badge{
  background:rgba(34,212,143,.12);
  border-color:rgba(34,212,143,.25);
  color:#0d4a35;
}
body:not([data-theme="light"]) .ea-badge{
  background:rgba(34,212,143,.08);
  border-color:rgba(34,212,143,.25);
  color:rgba(255,255,255,.7);
}

.ea-avatars{display:flex}
.ea-av{
  width:30px;height:30px;
  border-radius:50%;
  border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:800;color:#fff;
  margin-left:-8px;
}
.ea-av:first-child{margin-left:0}

/* Headline */
.ea-h1{
  font-size:clamp(2.6rem,4.5vw,4.2rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-2px;
  color:#f0f8f4;
  font-family:'Syne',sans-serif;
}
body[data-theme="light"] .ea-h1{color:#0d1f2d}
body:not([data-theme="light"]) .ea-h1{color:#f0f8f4}

/* Gradient text — electric green to teal */
.ea-grad{
  background:linear-gradient(135deg,#22d48f 0%,#18e8b0 50%,#06d6a0 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Description */
.ea-desc{
  font-size:1rem;
  line-height:1.7;
  color:rgba(255,255,255,.55);
  max-width:420px;
}
body[data-theme="light"] .ea-desc{color:rgba(13,31,45,.6)}

/* Store buttons */
.ea-store-row{display:flex;gap:10px;flex-wrap:wrap}

.ea-store-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.06);
  color:#fff;
  text-decoration:none;
  padding:12px 20px;
  border-radius:16px;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,background .2s;
  min-width:152px;
  border:1px solid rgba(34,212,143,.25);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(12px);
}
.ea-store-btn::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(34,212,143,.12),transparent);
  opacity:0;
  transition:opacity .22s;
}
.ea-store-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 36px rgba(34,212,143,.2);background:rgba(34,212,143,.1)}
.ea-store-btn:hover::before{opacity:1}
body[data-theme="light"] .ea-store-btn{background:rgba(13,31,45,.06);border-color:rgba(34,212,143,.3);color:#0d1f2d}

.ea-s-icon{font-size:1.5rem;line-height:1}
.ea-s-text{display:flex;flex-direction:column;line-height:1.1}
.ea-s-sub{font-size:.58rem;opacity:.65;letter-spacing:.4px;text-transform:uppercase}
.ea-s-main{font-size:.95rem;font-weight:700;margin-top:2px}

/* ---- Right col — phone wrap ---- */
.ea-phones-wrap{
  flex:0 0 auto;
  position:relative;
  width:520px;
  height:560px;
}

/* Floating food detection tags */
.ea-food-tag{
  position:absolute;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 4px 20px rgba(0,0,0,.14),0 0 0 1px rgba(255,255,255,.8);
  color:#111;
  font-size:.65rem;
  font-weight:700;
  padding:6px 11px;
  border-radius:22px;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  z-index:10;
  animation:eaTagFloat 3s ease-in-out infinite;
}
.ea-food-tag:nth-child(2){animation-delay:.8s}
.ea-food-tag:nth-child(3){animation-delay:1.6s}
@keyframes eaTagFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.ea-food-tag b{
  background:linear-gradient(135deg,#ede9fe,#dbeafe);
  color:#4f46e5;
  padding:2px 6px;
  border-radius:8px;
  font-size:.6rem;
  font-weight:800;
}

/* Arrow between phones */
.ea-arrow-deco{
  position:absolute;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  font-size:2.8rem;
  color:#333;
  opacity:.35;
  pointer-events:none;
  z-index:5;
  font-style:normal;
}
body:not([data-theme="light"]) .ea-arrow-deco{color:#aaa;opacity:.3}

/* Phone frame — realistic device look */
.ea-phone{
  position:absolute;
  border-radius:40px;
  overflow:hidden;
  background:#111;
  outline:8px solid #1c1c1e;
  box-shadow:
    0 40px 80px rgba(0,0,0,.4),
    0 8px 24px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Glow under phones */
.ea-ph-back::after{
  content:'';
  position:absolute;
  bottom:-30px;left:10%;
  width:80%;height:40px;
  background:rgba(91,163,200,.3);
  border-radius:50%;
  filter:blur(18px);
  z-index:-1;
  pointer-events:none;
}
.ea-ph-front::after{
  content:'';
  position:absolute;
  bottom:-30px;left:10%;
  width:80%;height:40px;
  background:rgba(139,92,246,.35);
  border-radius:50%;
  filter:blur(18px);
  z-index:-1;
  pointer-events:none;
}
body[data-theme="light"] .ea-phone{
  box-shadow:0 40px 80px rgba(0,0,0,.18),0 8px 24px rgba(0,0,0,.1);
}

/* Back phone: scanner, slightly rotated, left-center */
.ea-ph-back{
  width:228px;
  height:480px;
  top:70px;
  left:10px;
  z-index:1;
}
/* Front phone: result, straight, right-center, elevated */
.ea-ph-front{
  width:220px;
  height:460px;
  top:20px;
  right:10px;
  z-index:2;
  background:#fff;
  animation:eaFloat 4s ease-in-out infinite;
}
@keyframes eaFloat{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-14px)}
}

.ea-ph-inner{
  width:100%;height:100%;
  display:flex;
  flex-direction:column;
}

/* Status bar */
.ea-ph-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px 6px;
  font-size:.6rem;
  font-weight:700;
  color:rgba(255,255,255,.8);
  background:transparent;
  flex-shrink:0;
}
.ea-ph-bar.dark{color:#0a0a0a}
.ea-ph-icons{letter-spacing:3px;font-size:.55rem}

/* === SCANNER PHONE content === */
.ea-scan-ui{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.ea-scan-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 14px 8px;
  font-size:.7rem;
  color:rgba(255,255,255,.9);
  font-weight:700;
  flex-shrink:0;
}

.ea-scan-circle{
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;
}
.ea-scan-circle.sm{width:22px;height:22px;font-size:.6rem}

/* Camera view — pancake food photo simulation */
.ea-cam-area{
  flex:1;
  position:relative;
  overflow:hidden;
  min-height:0;
  /* warm amber-brown gradient simulating pancakes */
  background:
    linear-gradient(180deg,#2a1a08 0%,#5c3010 20%,#8b4513 40%,#a0522d 55%,#6b3a2a 70%,#3d1f0d 100%);
}
/* Pancake texture layers */
.ea-cam-area::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 60%,rgba(210,140,50,.6) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 40% 70%,rgba(160,82,45,.8) 0%,transparent 50%),
    radial-gradient(ellipse 50% 30% at 60% 40%,rgba(245,165,60,.4) 0%,transparent 45%),
    radial-gradient(ellipse 30% 20% at 30% 50%,rgba(50,20,5,.5) 0%,transparent 40%);
}
/* Blueberry dots on top */
.ea-cam-area::after{
  content:'';
  position:absolute;
  top:25%;left:40%;
  width:10px;height:10px;
  background:#2d1b6e;
  border-radius:50%;
  box-shadow:
    14px -8px 0 6px #1e1060,
    -10px 12px 0 4px #2d1b6e,
    24px 4px 0 5px #1e1060,
    -20px -4px 0 4px #2a1a6a,
    8px 20px 0 5px #1e1060;
}

/* Scan frame */
.ea-cam-frame{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:130px;height:130px;
  border-radius:14px;
  box-shadow:0 0 0 1000px rgba(0,0,0,.2);
}
.ea-cam-frame::before,.ea-cam-frame::after{
  content:'';
  position:absolute;
  width:24px;height:24px;
  border-color:#fff;border-style:solid;
  top:-1px;left:-1px;
  border-width:3px 0 0 3px;
  border-radius:6px 0 0 0;
}
.ea-cam-frame::after{
  top:auto;left:auto;
  bottom:-1px;right:-1px;
  border-width:0 3px 3px 0;
  border-radius:0 0 6px 0;
}

.ea-scan-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  background:#111;
  flex-shrink:0;
}

.ea-scan-food-btn{
  background:rgba(255,255,255,.15);
  color:#fff;
  font-size:.58rem;
  font-weight:700;
  padding:7px 11px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.2);
}

.ea-shutter-btn{
  width:48px;height:48px;
  border-radius:50%;
  background:#fff;
  border:3px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.15);
}

/* === RESULT PHONE content === */
.ea-result-ph{background:#f7f7f7}

.ea-mr-photo{
  position:relative;
  height:170px;
  overflow:hidden;
  flex-shrink:0;
  background:
    linear-gradient(180deg,#2a1a08 0%,#5c3010 20%,#8b4513 40%,#a0522d 55%,#6b3a2a 70%,#3d1f0d 100%);
}
.ea-mr-photo-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 60%,rgba(210,140,50,.7) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 40% 70%,rgba(160,82,45,.8) 0%,transparent 50%);
}
.ea-mr-topbar{
  position:absolute;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,.4),transparent);
  font-size:.62rem;
  color:#fff;
  font-weight:700;
}

.ea-mr-sheet{
  flex:1;
  background:#fff;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:7px;
  overflow:hidden;
}
.ea-mr-cat{
  font-size:.58rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#aaa;
}
.ea-mr-name{
  font-size:.82rem;
  font-weight:800;
  color:#0a0a0a;
  line-height:1.25;
}

.ea-mr-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.ea-mr-cell{
  background:#f5f5f5;
  border-radius:10px;
  padding:7px 8px;
  display:flex;
  align-items:center;
  gap:7px;
}
.ea-mr-ico{font-size:.85rem;line-height:1}
.ea-mr-cell div{display:flex;flex-direction:column;gap:1px}
.ea-mr-cell small{font-size:.48rem;color:#aaa;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.ea-mr-cell b{font-size:.72rem;font-weight:800;color:#0a0a0a}

.ea-mr-hs{display:flex;flex-direction:column;gap:4px}
.ea-mr-hs-row{display:flex;justify-content:space-between;font-size:.58rem;color:#555;font-weight:700}
.ea-mr-bar{height:4px;background:#eee;border-radius:10px;overflow:hidden}
.ea-mr-fill{height:100%;background:linear-gradient(90deg,#4ade80,#22c55e);border-radius:10px}

.ea-mr-btns{display:flex;gap:6px}
.ea-mr-fix,.ea-mr-done{
  flex:1;border:none;cursor:pointer;
  font-size:.58rem;font-weight:700;
  padding:7px 4px;border-radius:10px;
}
.ea-mr-fix{background:#f0f0f0;color:#444}
.ea-mr-done{background:#0a0a0a;color:#fff}

/* ---- Stats row ---- */
.ea-stats-row{
  max-width:860px;
  margin:0 auto;
  padding:40px 48px 72px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--c1);
}
body:not([data-theme="light"]) .ea-stats-row{background:#06141B}

.ea-stat{
  flex:1;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ea-stat-num{
  font-size:clamp(1.8rem,3.5vw,2.6rem);
  font-weight:800;
  font-family:'Syne',sans-serif;
  background:linear-gradient(135deg,#22d48f 0%,#06d6a0 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
}

.ea-stat-lbl{
  font-size:.8rem;
  color:var(--c5);
  font-weight:500;
}
.ea-stat-div{
  width:1px;
  height:40px;
  background:rgba(34,212,143,.15);
  flex-shrink:0;
  margin:0 32px;
}
body:not([data-theme="light"]) .ea-stat-div{background:rgba(34,212,143,.12)}

/* ============================================================
   FOOD CATEGORIES — Figma EasyHealth Template style
   ============================================================ */
.fcat-section{
  padding:80px 48px;
  background:var(--c1);
  position:relative;
  overflow:hidden;
}
.fcat-section::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.fcat-inner{max-width:1200px;margin:0 auto}

.fcat-header{margin-bottom:48px;text-align:center}
.fcat-label{
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:2.5px;
  color:var(--accent);
  display:block;margin-bottom:14px;
}
.fcat-title{
  font-family:'Syne',sans-serif;
  font-size:clamp(2rem,4vw,3rem);
  font-weight:800;
  color:var(--c6);
  line-height:1.1;
  letter-spacing:-1.5px;
}
body[data-theme="light"] .fcat-title{color:#0d1f2d}

.fcat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.fcat-card{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 24px;
  display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  cursor:pointer;
}
.fcat-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:20px 20px 0 0;
  opacity:0;transition:opacity .2s;
}
.fcat-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.2)}
.fcat-card:hover::before{opacity:1}

/* Card accent colors from Figma palette */
.fcat-fish::before{background:linear-gradient(90deg,#5BA3C8,#282d46)}
.fcat-fish:hover{border-color:rgba(91,163,200,.3)}
.fcat-fruit::before{background:linear-gradient(90deg,#ea4c37,#fddf9e)}
.fcat-fruit:hover{border-color:rgba(234,76,55,.3)}
.fcat-veg::before{background:linear-gradient(90deg,#8db178,#486b38)}
.fcat-veg:hover{border-color:rgba(141,177,120,.35)}
.fcat-vegan::before{background:linear-gradient(90deg,#b9caaf,#8db178)}
.fcat-vegan:hover{border-color:rgba(185,202,175,.35)}
.fcat-protein::before{background:linear-gradient(90deg,#ea4c37,#8db178)}
.fcat-protein:hover{border-color:rgba(234,76,55,.25)}
.fcat-grain::before{background:linear-gradient(90deg,#fddf9e,#c2caaf)}
.fcat-grain:hover{border-color:rgba(253,223,158,.3)}

.fcat-icon-wrap{
  font-size:2rem;
  width:52px;height:52px;
  background:var(--c3);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.fcat-card:hover .fcat-icon-wrap{transform:scale(1.1) rotate(-5deg)}

.fcat-card h3{
  font-family:'Syne',sans-serif;
  font-size:1rem;font-weight:700;
  color:var(--c6);margin:0;
}
.fcat-card p{font-size:.83rem;color:var(--c5);line-height:1.55;flex:1}

.fcat-badge{
  display:inline-block;
  background:rgba(34,212,143,.12);
  color:var(--accent);
  font-size:.67rem;font-weight:700;
  padding:4px 10px;border-radius:20px;
  width:fit-content;
  border:1px solid rgba(34,212,143,.2);
  letter-spacing:.3px;
}

@media(max-width:900px){
  .fcat-grid{grid-template-columns:repeat(2,1fr)}
  .fcat-section{padding:60px 32px}
}
@media(max-width:500px){
  .fcat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .fcat-section{padding:48px 20px}
  .fcat-card{padding:20px 16px}
}

/* ---- Responsive ---- */
@media(max-width:1100px){
  .ea-phones-wrap{width:440px;height:500px}
  .ea-ph-back{width:200px;height:420px;left:5px}
  .ea-ph-front{width:195px;height:400px;right:5px}
  .ea-mr-photo{height:145px}
}

@media(max-width:900px){
  .ea-hero{padding:70px 32px 40px;overflow:hidden}
  .ea-hero-inner{gap:32px}
  .ea-phones-wrap{width:360px;height:440px}
  .ea-ph-back{width:170px;height:370px;left:0}
  .ea-ph-front{width:165px;height:355px;right:0;top:30px}
  .ea-mr-photo{height:120px}
}

@media(max-width:820px){
  .ea-hero{padding:60px 24px 36px;overflow:hidden}
  .ea-hero-inner{flex-direction:column;align-items:center;text-align:center;gap:48px}
  .ea-hero-left{max-width:100%;align-items:center}
  .ea-desc{max-width:440px}
  .ea-store-row{justify-content:center}
  .ea-phones-wrap{width:360px;height:400px;margin:0 auto}
  .ea-ph-back{width:168px;height:360px;left:0;top:40px}
  .ea-ph-front{width:162px;height:345px;right:0;top:0}
  .ea-mr-photo{height:115px}
  .ea-arrow-deco{font-size:2rem}
  /* food tags inside on mobile */
  .ea-food-tag{font-size:.6rem}
  .ea-stats-row{padding:28px 24px 48px}
}

@media(max-width:500px){
  .ea-hero{padding:48px 20px 28px}
  .ea-h1{font-size:2rem;letter-spacing:-1px}
  .ea-phones-wrap{width:300px;height:340px}
  .ea-ph-back{width:140px;height:300px;left:0;top:40px}
  .ea-ph-front{width:136px;height:290px;right:0;top:0}
  .ea-mr-photo{height:95px}
  .ea-arrow-deco{display:none}
  /* hide floating tags that go out of bounds */
  .ea-food-tag[style*="left:-"]{display:none}
  .ea-food-tag[style*="right:-"]{display:none}
  .ea-stats-row{padding:20px 16px 40px;flex-wrap:wrap;gap:16px}
  .ea-stat-div{display:none}
  .ea-stat{min-width:120px}
  .ea-store-row{flex-direction:column;align-items:center}
  .ea-store-btn{width:200px;justify-content:center}
}

/* =====================================================
   BOTTOM NAVIGATION (mobile 5-tab)
   ===================================================== */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  height:64px;
  background:var(--c2);
  border-top:1px solid var(--border);
  z-index:900;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
@media(max-width:768px){
  .bottom-nav{display:flex;align-items:stretch}
  main#app{padding-bottom:72px}
}
.bn-tab{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  font-size:.65rem;font-weight:600;letter-spacing:.3px;
  color:var(--c5);
  cursor:pointer;
  text-decoration:none;
  transition:color .2s;
  -webkit-tap-highlight-color:transparent;
}
.bn-tab i{font-size:1.15rem;transition:transform .2s}
.bn-tab.active{color:var(--accent)}
.bn-tab.active i{transform:scale(1.15)}
.bn-tab:active i{transform:scale(.92)}
/* center scan button */
.bn-tab.bn-center{flex:1.2}
.bn-center-btn{
  width:50px;height:50px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-coral));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(141,177,120,.45);
  margin-top:-18px;
  transition:transform .2s,box-shadow .2s;
}
.bn-center-btn i{font-size:1.3rem;color:#fff}
.bn-tab.bn-center.active .bn-center-btn,
.bn-tab.bn-center:active .bn-center-btn{
  transform:scale(1.08);
  box-shadow:0 6px 24px rgba(141,177,120,.6);
}
.bn-tab.bn-center span{font-size:.6rem;margin-top:4px;color:var(--c5)}

/* =====================================================
   RECIPES PAGE
   ===================================================== */
.rcp-page{padding:20px 0 0;min-height:70vh}
.rcp-page h2{font-family:'Raleway',sans-serif;font-size:1.5rem;font-weight:800;color:var(--c6);padding:0 20px 4px}
.rcp-page .rcp-sub{font-size:.8rem;color:var(--c5);padding:0 20px 16px}

/* Search bar */
.rcp-search-bar{
  position:relative;
  margin:0 20px 16px;
}
.rcp-search-bar input{
  width:100%;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 16px 10px 40px;
  font-size:.9rem;font-family:inherit;
  color:var(--c6);
  outline:none;
  transition:border-color .2s;
}
.rcp-search-bar input:focus{border-color:var(--accent)}
.rcp-search-bar input::placeholder{color:var(--c5)}
.rcp-search-bar i{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--c5);font-size:.9rem;
}

/* Filter pills */
.rcp-filters{
  display:flex;gap:8px;padding:0 20px 16px;
  overflow-x:auto;scrollbar-width:none;
}
.rcp-filters::-webkit-scrollbar{display:none}
.rcp-filter{
  flex-shrink:0;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:6px 14px;
  font-size:.78rem;font-weight:600;font-family:inherit;
  color:var(--c5);
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.rcp-filter.active,.rcp-filter:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Creator avatars */
.rcp-creators-section{padding:0 20px 20px}
.rcp-creators-section h3{font-size:.85rem;font-weight:700;color:var(--c6);margin-bottom:12px}
.rcp-creators-scroll{
  display:flex;gap:14px;
  overflow-x:auto;scrollbar-width:none;
  padding-bottom:4px;
}
.rcp-creators-scroll::-webkit-scrollbar{display:none}
.rcp-creator{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  flex-shrink:0;cursor:pointer;
}
.rcp-creator-avatar{
  width:52px;height:52px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-coral));
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;
  border:2px solid transparent;
  transition:border-color .2s,transform .2s;
}
.rcp-creator:hover .rcp-creator-avatar{
  border-color:var(--accent);
  transform:scale(1.05);
}
.rcp-creator span{font-size:.65rem;color:var(--c5);font-weight:600;max-width:56px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Recipe feed */
.rcp-feed{
  display:flex;flex-direction:column;gap:16px;
  padding:0 20px 24px;
}
.rcp-card{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  cursor:pointer;
}
.rcp-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.rcp-card-img{
  width:100%;height:180px;
  object-fit:cover;
  background:var(--c3);
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;
  position:relative;
  overflow:hidden;
}
/* Gradient overlay on img */
.rcp-card-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.35) 100%);
}
/* Colored backgrounds for recipe images */
.rcp-img-1{background:linear-gradient(135deg,#2d4a1e,#1a3a12)}
.rcp-img-2{background:linear-gradient(135deg,#4a1e2d,#3a1218)}
.rcp-img-3{background:linear-gradient(135deg,#1e2d4a,#12183a)}
.rcp-img-4{background:linear-gradient(135deg,#4a3a1e,#3a2a12)}
.rcp-card-body{padding:14px 14px 8px}
.rcp-card-body h4{
  font-family:'Raleway',sans-serif;
  font-size:1rem;font-weight:700;
  color:var(--c6);margin-bottom:5px;
}
.rcp-card-body p{font-size:.78rem;color:var(--c5);line-height:1.4;margin-bottom:8px}
.rcp-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.rcp-tag{
  background:rgba(141,177,120,.15);
  color:var(--accent);
  border-radius:8px;
  padding:3px 8px;
  font-size:.68rem;font-weight:700;
}
.rcp-card-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px 14px;
  border-top:1px solid var(--border);
}
.rcp-author{display:flex;align-items:center;gap:7px}
.rcp-author-av{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-coral));
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;
}
.rcp-author span{font-size:.73rem;color:var(--c5);font-weight:600}
.rcp-meta{display:flex;align-items:center;gap:10px}
.rcp-meta span{font-size:.72rem;color:var(--c5)}
.rcp-meta i{color:var(--accent-coral);font-size:.7rem}

/* =====================================================
   TRAINER PAGE
   ===================================================== */
.trn-page{padding:20px 0 0;min-height:70vh}
.trn-header{padding:0 20px 8px}
.trn-header h2{font-family:'Raleway',sans-serif;font-size:1.5rem;font-weight:800;color:var(--c6)}
.trn-header p{font-size:.8rem;color:var(--c5);margin-top:2px}

/* Stats bar */
.trn-stats{
  display:flex;gap:0;
  margin:12px 20px;
  background:var(--c3);
  border-radius:var(--radius);
  border:1px solid var(--border);
  overflow:hidden;
}
.trn-stat{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  padding:12px 8px;
  position:relative;
}
.trn-stat+.trn-stat::before{
  content:'';
  position:absolute;left:0;top:20%;height:60%;
  width:1px;background:var(--border);
}
.trn-stat-num{
  font-family:'Raleway',sans-serif;
  font-size:1.3rem;font-weight:800;
  color:var(--accent);
}
.trn-stat-lbl{font-size:.65rem;color:var(--c5);font-weight:600;text-align:center}

/* Filters */
.trn-filters{
  display:flex;gap:8px;padding:0 20px 16px;
  overflow-x:auto;scrollbar-width:none;
}
.trn-filters::-webkit-scrollbar{display:none}
.trn-filter{
  flex-shrink:0;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:20px;
  padding:6px 14px;
  font-size:.78rem;font-weight:600;font-family:inherit;
  color:var(--c5);
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.trn-filter.active,.trn-filter:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Trainer grid */
.trn-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:0 20px 20px;
}
@media(min-width:600px){.trn-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.trn-grid{grid-template-columns:repeat(4,1fr)}}

.trn-card{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  cursor:pointer;
}
.trn-card:hover{transform:translateY(-4px);box-shadow:0 10px 32px rgba(0,0,0,.2)}
.trn-avatar{
  width:100%;
  aspect-ratio:1/1;
  background:var(--c3);
  display:flex;align-items:center;justify-content:center;
  font-size:3rem;
  position:relative;
  overflow:hidden;
}
.trn-av-1{background:linear-gradient(135deg,#1e3a2d,#0f2a1a)}
.trn-av-2{background:linear-gradient(135deg,#3a2d1e,#2a1a0f)}
.trn-av-3{background:linear-gradient(135deg,#2d1e3a,#1a0f2a)}
.trn-av-4{background:linear-gradient(135deg,#1e2d3a,#0f1a2a)}
/* verified badge */
.trn-avatar-badge{
  position:absolute;bottom:8px;right:8px;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.trn-avatar-badge i{font-size:.6rem;color:#fff}
.trn-card-body{padding:10px 12px}
.trn-card-body h4{
  font-family:'Raleway',sans-serif;
  font-size:.88rem;font-weight:700;
  color:var(--c6);margin-bottom:2px;
}
.trn-spec{font-size:.7rem;color:var(--accent);font-weight:600;margin-bottom:6px}
.trn-rating{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.trn-rating i{font-size:.65rem;color:#fddf9e}
.trn-rating span{font-size:.68rem;color:var(--c5);font-weight:600}
.trn-actions{display:flex;gap:6px;margin-top:6px}
.trn-btn-cal,.trn-btn-chat{
  flex:1;
  padding:6px 4px;
  border-radius:8px;
  font-size:.7rem;font-weight:700;font-family:inherit;
  cursor:pointer;
  border:none;
  transition:opacity .2s,transform .15s;
}
.trn-btn-cal:active,.trn-btn-chat:active{transform:scale(.95)}
.trn-btn-cal{
  background:var(--accent);
  color:#fff;
}
.trn-btn-chat{
  background:var(--c3);
  color:var(--c6);
  border:1px solid var(--border);
}
.trn-btn-cal:hover{opacity:.9}
.trn-btn-chat:hover{border-color:var(--accent);color:var(--accent)}

/* CTA banner */
.trn-cta{
  margin:4px 20px 28px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 40%,#2a4a1a 100%);
  border-radius:var(--radius);
  padding:22px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  overflow:hidden;
  position:relative;
}
.trn-cta::before{
  content:'';
  position:absolute;right:-30px;top:-30px;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.trn-cta-text h3{
  font-family:'Raleway',sans-serif;
  font-size:1rem;font-weight:800;
  color:#fff;margin-bottom:4px;
}
.trn-cta-text p{font-size:.75rem;color:rgba(255,255,255,.8);line-height:1.4}
.trn-cta-btn{
  flex-shrink:0;
  background:#fff;
  color:var(--accent2);
  border:none;
  border-radius:10px;
  padding:9px 16px;
  font-size:.78rem;font-weight:800;font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.trn-cta-btn:hover{transform:scale(1.04);box-shadow:0 4px 14px rgba(0,0,0,.2)}

/* =====================================================
   MISSING / MISMATCHED CLASS FIXES
   ===================================================== */

/* --- Recipes: search bar inner --- */
.rcp-search-inner{
  position:relative;
  display:flex;align-items:center;
}
.rcp-search-icon{
  position:absolute;left:13px;
  color:var(--c5);font-size:.9rem;pointer-events:none;
}
.rcp-search-input{
  width:100%;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 16px 10px 40px;
  font-size:.9rem;font-family:inherit;
  color:var(--c6);outline:none;
  transition:border-color .2s;
}
.rcp-search-input:focus{border-color:var(--accent)}
.rcp-search-input::placeholder{color:var(--c5)}

/* --- Recipes: creator avatar --- */
.rcp-cr-av{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;color:#fff;
  border:2px solid transparent;
  transition:border-color .2s,transform .2s;
}
.rcp-creator:hover .rcp-cr-av{border-color:var(--accent);transform:scale(1.06)}
.rcp-creator span{font-size:.65rem;color:var(--c5);font-weight:600;max-width:56px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- Recipes: section title row --- */
.rcp-section-title-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px 10px;
}
.rcp-section-title{font-size:.85rem;font-weight:700;color:var(--c6)}
.rcp-see-all{font-size:.75rem;color:var(--accent);font-weight:700;text-decoration:none}
.rcp-see-all:hover{text-decoration:underline}

/* --- Recipes: card overlay badges --- */
.rcp-card-img{position:relative}
.rcp-card-kcal{
  position:absolute;bottom:10px;left:10px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  color:#fff;font-size:.7rem;font-weight:700;
  padding:3px 8px;border-radius:8px;
  z-index:2;
}
.rcp-card-save{
  position:absolute;top:10px;right:10px;
  width:30px;height:30px;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
  border:none;border-radius:8px;
  color:#fff;font-size:.75rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;z-index:2;
}
.rcp-card-save:hover{background:var(--accent-coral)}

/* --- Recipes: card meta row --- */
.rcp-card-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.rcp-time{font-size:.7rem;color:var(--c5)}

/* --- Recipes: author avatar (small) --- */
.rcp-av{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;font-weight:700;color:#fff;flex-shrink:0;
}

/* --- Recipes: macros --- */
.rcp-macros{display:flex;gap:6px}
.rcp-macros span{
  font-size:.68rem;color:var(--c5);font-weight:600;
  background:var(--c3);
  padding:2px 6px;border-radius:6px;
}

/* tag variants */
.rcp-tag-protein{background:rgba(234,76,55,.15);color:var(--accent-coral)}
.rcp-tag-vegan{background:rgba(141,177,120,.15);color:var(--accent)}
.rcp-tag-grain{background:rgba(253,223,158,.2);color:#b8860b}

/* --- Trainer: card top area --- */
.trn-card-top{position:relative}
.trn-avatar{
  font-size:2.5rem;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;
  border-radius:var(--radius) var(--radius) 0 0;
}
.trn-avatar span{font-size:2.8rem}
.trn-medal{
  position:absolute;top:8px;right:8px;
  font-size:1.2rem;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(4px);
  width:30px;height:30px;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.trn-card h4{
  font-family:'Raleway',sans-serif;
  font-size:.9rem;font-weight:700;
  color:var(--c6);
  padding:10px 12px 2px;
}
.trn-spec{padding:0 12px 6px;font-size:.73rem;color:var(--accent);font-weight:600}
.trn-tags{
  display:flex;gap:5px;flex-wrap:wrap;
  padding:0 12px 6px;
}
.trn-tags span{
  background:rgba(141,177,120,.15);
  color:var(--accent);
  font-size:.65rem;font-weight:700;
  padding:2px 7px;border-radius:6px;
}
.trn-rating{
  padding:0 12px 8px;
  font-size:.72rem;color:var(--c5);
}
.trn-rating span{color:var(--c5)}
.trn-actions{padding:0 12px 12px;display:flex;gap:6px}

/* --- Trainer: CTA content wrapper --- */
.trn-cta-content{flex:1}
.trn-cta-content h3{
  font-family:'Raleway',sans-serif;
  font-size:1rem;font-weight:800;
  color:#fff;margin-bottom:4px;
}
.trn-cta-content p{font-size:.75rem;color:rgba(255,255,255,.85);line-height:1.4;margin-bottom:10px}
.trn-cta-emoji{font-size:2.8rem;flex-shrink:0;opacity:.9}

/* =====================================================
   STREAK BADGE
   ===================================================== */
.diary-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.streak-badge{
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(253,223,158,.2),rgba(234,76,55,.15));
  border:1px solid rgba(253,223,158,.4);
  border-radius:14px;
  padding:8px 14px;
  flex-shrink:0;
}
.streak-fire{font-size:1.3rem}
#streakNum{font-family:'Raleway',sans-serif;font-size:1.4rem;font-weight:800;color:#fddf9e}
.streak-lbl{font-size:.7rem;font-weight:700;color:rgba(253,223,158,.8);margin-top:2px}

/* =====================================================
   WEEKLY CHART
   ===================================================== */
.week-chart-card{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
}
.wcc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wcc-title{font-size:.88rem;font-weight:700;color:var(--c6)}
.wcc-goal-lbl{font-size:.72rem;color:var(--c5);font-weight:600}
.wcc-chart{display:flex;flex-direction:column;gap:6px}
.wcc-bars{
  display:flex;align-items:flex-end;gap:5px;
  height:80px;
  position:relative;
}
/* goal dashed line */
.wcc-bars::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:var(--goal-pct, 70%);
  height:1px;
  border-top:1.5px dashed rgba(141,177,120,.4);
  pointer-events:none;
}
.wcc-bar-wrap{flex:1;height:100%;display:flex;align-items:flex-end}
.wcc-bar{
  width:100%;
  border-radius:5px 5px 0 0;
  transition:height .6s cubic-bezier(.4,0,.2,1);
  min-height:4px;
  cursor:pointer;
}
.wcc-bar.today{box-shadow:0 0 10px rgba(141,177,120,.4)}
.wcc-days{display:flex;gap:5px}
.wcc-day-lbl{flex:1;text-align:center;font-size:.62rem;color:var(--c5);font-weight:600}
.wcc-day-lbl.today{color:var(--accent);font-weight:800}

/* =====================================================
   WATER TRACKER
   ===================================================== */
.water-card{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:14px;
}
.water-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.water-info{display:flex;flex-direction:column;gap:2px}
.water-title{font-size:.88rem;font-weight:700;color:var(--c6)}
.water-sub{font-size:.7rem;color:var(--c5)}
.water-amount-badge{
  background:linear-gradient(135deg,rgba(91,163,200,.2),rgba(56,189,248,.1));
  border:1px solid rgba(91,163,200,.3);
  border-radius:10px;
  padding:6px 12px;
  font-family:'Raleway',sans-serif;
  font-size:1.1rem;font-weight:800;
  color:#5BA3C8;
}
.water-amount-badge small{font-size:.65rem;opacity:.8}
.water-drops{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:10px;
}
.water-drop{
  font-size:1.4rem;
  cursor:pointer;
  transition:transform .15s,filter .15s;
  filter:grayscale(1) opacity(.35);
  user-select:none;
}
.water-drop.filled{filter:grayscale(0) opacity(1);transform:scale(1.05)}
.water-drop:hover{transform:scale(1.15)}
.water-progress-bar{
  height:7px;
  background:var(--c3);
  border-radius:6px;
  overflow:hidden;
  margin-bottom:12px;
}
.water-progress-fill{
  height:100%;
  border-radius:6px;
  transition:width .5s ease,background .5s;
}
.water-btns{display:flex;gap:8px}
.water-add-btn{
  flex:1;
  background:rgba(91,163,200,.15);
  border:1px solid rgba(91,163,200,.3);
  border-radius:10px;
  padding:8px;
  font-size:.8rem;font-weight:700;font-family:inherit;
  color:#5BA3C8;cursor:pointer;
  transition:all .2s;
}
.water-add-btn:hover{background:rgba(91,163,200,.28)}
.water-add-lg{flex:1.2}
.water-rem-btn{
  width:38px;height:38px;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--c5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
.water-rem-btn:hover{border-color:var(--accent-coral);color:var(--accent-coral)}

/* =====================================================
   WEIGHT LOG
   ===================================================== */
.weight-card{
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-top:14px;
}
.wt-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wt-title{font-size:.88rem;font-weight:700;color:var(--c6)}
.wt-today{font-size:.78rem;font-weight:700;color:var(--accent)}
.wt-input-row{display:flex;gap:8px;margin-bottom:14px}
.wt-input{
  flex:1;background:var(--c3);
  border:1px solid var(--border);
  border-radius:10px;
  padding:9px 14px;
  font-size:.88rem;font-family:inherit;
  color:var(--c6);outline:none;
  transition:border-color .2s;
}
.wt-input:focus{border-color:var(--accent)}
.wt-save-btn{
  background:var(--accent);
  border:none;border-radius:10px;
  padding:9px 16px;
  font-size:.8rem;font-weight:700;font-family:inherit;
  color:#fff;cursor:pointer;
  white-space:nowrap;
  transition:opacity .2s;
}
.wt-save-btn:hover{opacity:.88}
.wt-chart-wrap{overflow-x:auto;scrollbar-width:none}
.wt-chart-wrap::-webkit-scrollbar{display:none}
.wt-chart{
  display:flex;gap:6px;
  align-items:flex-end;
  min-width:max-content;
  height:90px;
  padding-bottom:22px;
  position:relative;
}
.wt-bar-col{
  display:flex;flex-direction:column;align-items:center;
  width:36px;height:100%;
  position:relative;
}
.wt-val-lbl{font-size:.6rem;color:var(--c5);font-weight:700;margin-bottom:2px}
.wt-bar-track{
  flex:1;width:100%;
  display:flex;align-items:flex-end;
  background:var(--c3);
  border-radius:6px;
  overflow:hidden;
}
.wt-bar-fill{
  width:100%;
  border-radius:6px;
  background:linear-gradient(to top,#8db178,#b9caaf);
  transition:height .5s ease;
}
.wt-bar-fill.today{background:linear-gradient(to top,var(--accent),var(--accent-coral))}
.wt-day-lbl{
  position:absolute;bottom:0;
  font-size:.58rem;color:var(--c5);font-weight:600;
  white-space:nowrap;
}

/* =====================================================
   CATEGORY INFO HINT + MODAL
   ===================================================== */
.fcat-card{cursor:pointer;position:relative}
.fcat-info-hint{
  display:inline-block;
  margin-top:10px;
  font-size:.72rem;font-weight:700;
  color:var(--accent);
  opacity:.75;
  transition:opacity .2s,transform .2s;
}
.fcat-card:hover .fcat-info-hint{opacity:1;transform:translateX(3px)}

/* Overlay */
.catm-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
  z-index:1000;
  animation:fadeIn .25s ease;
}
.catm-overlay.open{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Panel */
.catm-panel{
  position:fixed;
  bottom:0;left:0;right:0;
  max-height:88vh;
  background:var(--c2);
  border-radius:24px 24px 0 0;
  z-index:1001;
  overflow-y:auto;
  padding:0 0 calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  box-shadow:0 -12px 50px rgba(0,0,0,.35);
}
.catm-panel.open{transform:translateY(0)}
@media(min-width:640px){
  .catm-panel{left:50%;right:auto;transform:translate(-50%,100%);width:520px;border-radius:24px;bottom:40px}
  .catm-panel.open{transform:translate(-50%,0)}
}

/* Header */
.catm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 20px 14px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--c2);z-index:2;
}
.catm-title-row{display:flex;align-items:center;gap:12px}
.catm-icon{font-size:2rem;line-height:1}
.catm-title{font-family:'Raleway',sans-serif;font-size:1.2rem;font-weight:800;color:var(--c6)}
.catm-close{
  width:34px;height:34px;border-radius:50%;
  background:var(--c3);border:none;
  color:var(--c5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;flex-shrink:0;
}
.catm-close:hover{background:var(--border);color:var(--c6)}

/* Fact card */
.catm-fact-card{
  margin:16px 16px 0;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 50%,#2a4a1a 100%);
  border-radius:18px;
  padding:18px 18px 14px;
  position:relative;overflow:hidden;
  min-height:130px;
}
.catm-fact-card::before{
  content:'';position:absolute;right:-20px;top:-20px;
  width:100px;height:100px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.catm-fact-label{
  font-size:.72rem;font-weight:800;
  color:rgba(255,255,255,.75);
  letter-spacing:.5px;
  text-transform:uppercase;
  margin-bottom:8px;
  display:flex;align-items:center;gap:5px;
}
.catm-fact-text{
  font-size:.92rem;line-height:1.55;
  color:#fff;font-weight:500;
  min-height:52px;
  transition:opacity .35s,transform .35s;
}
.catm-fact-text.fade-out{opacity:0;transform:translateY(-6px)}
.catm-fact-text.fade-in{opacity:1;transform:translateY(0)}
.catm-fact-dots{
  display:flex;gap:5px;margin-top:12px;
}
.catm-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background .3s,width .3s;
  cursor:pointer;
}
.catm-dot.active{background:#fff;width:18px;border-radius:4px}
.catm-fact-progress{
  position:absolute;bottom:0;left:0;
  height:3px;
  background:rgba(255,255,255,.4);
  border-radius:0 0 0 18px;
  transition:none;
}

/* Doctor advice */
.catm-advice-section{margin:16px 16px 0}
.catm-advice-label{
  font-size:.75rem;font-weight:800;color:var(--c5);
  letter-spacing:.5px;text-transform:uppercase;
  display:flex;align-items:center;gap:6px;
  margin-bottom:10px;
}
.catm-advice-label i{color:var(--accent-coral)}
.catm-advice-list{display:flex;flex-direction:column;gap:8px}
.catm-advice-item{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
}
.catm-advice-icon{
  width:32px;height:32px;border-radius:10px;
  background:rgba(234,76,55,.12);
  color:var(--accent-coral);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}
.catm-advice-text{font-size:.82rem;line-height:1.5;color:var(--c6)}
.catm-advice-text strong{color:var(--c6);font-weight:700;display:block;margin-bottom:2px;font-size:.84rem}

/* Nutrient pills */
.catm-nutrients{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:14px 16px 0;
}
.catm-nut{
  display:flex;align-items:center;gap:6px;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:10px;
  padding:7px 12px;
  font-size:.75rem;font-weight:700;
  color:var(--c6);
}
.catm-nut i{color:var(--accent);font-size:.8rem}

/* =====================================================
   AI SUPPORT CHAT WIDGET
   ===================================================== */
.chat-fab{
  position:fixed;
  bottom:calc(72px + 16px);
  right:20px;
  width:54px;height:54px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-coral));
  border:none;color:#fff;
  font-size:1.2rem;
  cursor:pointer;
  z-index:800;
  box-shadow:0 4px 20px rgba(141,177,120,.5);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,box-shadow .2s;
}
@media(min-width:769px){
  .chat-fab{bottom:32px;right:32px}
}
.chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(141,177,120,.65)}
.chat-fab:active{transform:scale(.92)}
.chat-fab-badge{
  position:absolute;top:-3px;right:-3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent-coral);
  border:2px solid var(--c1);
  font-size:.58rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* Panel */
.chat-panel{
  position:fixed;
  bottom:72px;left:0;right:0;
  width:100%;
  height:min(520px, calc(100svh - 140px));
  background:var(--c2);
  border:1px solid var(--border);
  border-radius:20px 20px 0 0;
  z-index:850;
  display:flex;flex-direction:column;
  transform:translateY(calc(100% + 200px));
  visibility:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1), visibility 0s .35s;
  box-shadow:0 -8px 40px rgba(0,0,0,.28);
}
@media(min-width:769px){
  .chat-panel{
    bottom:100px;
    right:32px;
    left:auto;
    width:370px;
    border-radius:20px;
    height:500px;
    transform:translateY(calc(100% + 250px));
  }
}
.chat-panel.open{transform:translateY(0);visibility:visible;transition:transform .35s cubic-bezier(.4,0,.2,1), visibility 0s 0s}

/* Header */
.chat-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.chat-op-info{display:flex;align-items:center;gap:10px}
.chat-op-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-coral));
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:800;color:#fff;
  box-shadow:0 2px 10px rgba(141,177,120,.4);
}
.chat-op-name{font-size:.93rem;font-weight:700;color:var(--c6)}
.chat-op-badge{
  background:var(--accent);color:#fff;
  font-size:.58rem;font-weight:800;
  padding:1px 5px;border-radius:4px;
  margin-left:4px;vertical-align:middle;
}
.chat-op-status{
  font-size:.68rem;color:var(--c5);
  display:flex;align-items:center;gap:4px;margin-top:2px;
}
.chat-online-dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;display:inline-block;
  box-shadow:0 0 5px #4ade80;
}
.chat-close-btn{
  width:32px;height:32px;border-radius:50%;
  background:var(--c3);border:none;
  color:var(--c5);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.chat-close-btn:hover{background:var(--border);color:var(--c6)}

/* Messages */
.chat-messages{
  flex:1;overflow-y:auto;
  padding:14px 14px 6px;
  display:flex;flex-direction:column;gap:10px;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.chat-msg{display:flex;gap:8px;max-width:88%}
.chat-msg.user{align-self:flex-end;flex-direction:row-reverse}
.chat-msg.ai{align-self:flex-start}
.chat-msg-av{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),var(--accent-coral));
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:800;color:#fff;margin-top:2px;
}
.chat-msg.user .chat-msg-av{background:var(--c4)}
.chat-bubble{
  padding:9px 12px;
  border-radius:16px;
  font-size:.83rem;line-height:1.5;
  color:var(--c6);
  background:var(--c3);
  border:1px solid var(--border);
  word-break:break-word;
}
.chat-msg.user .chat-bubble{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  border-radius:16px 4px 16px 16px;
}
.chat-msg.ai .chat-bubble{border-radius:4px 16px 16px 16px}
.chat-time{font-size:.59rem;color:var(--c5);margin-top:3px;padding:0 2px}
.chat-msg.user .chat-time{text-align:right}

/* Typing dots */
.chat-typing{display:flex;gap:4px;align-items:center;padding:2px 2px}
.chat-typing span{
  width:7px;height:7px;border-radius:50%;
  background:var(--c5);
  animation:chatDot .9s infinite;
}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chatDot{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-5px);opacity:1}
}

/* Suggestions */
.chat-suggestions{
  display:flex;gap:7px;
  padding:6px 12px 10px;
  overflow-x:auto;scrollbar-width:none;
  flex-shrink:0;
}
.chat-suggestions::-webkit-scrollbar{display:none}
.chat-sugg{
  flex-shrink:0;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:16px;
  padding:5px 11px;
  font-size:.72rem;font-weight:600;font-family:inherit;
  color:var(--accent);cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.chat-sugg:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* Input */
.chat-input-row{
  display:flex;gap:8px;
  padding:10px 14px 12px;
  border-top:1px solid var(--border);
  flex-shrink:0;
}
.chat-input{
  flex:1;
  background:var(--c3);
  border:1px solid var(--border);
  border-radius:12px;
  padding:9px 14px;
  font-size:.85rem;font-family:inherit;
  color:var(--c6);outline:none;
  transition:border-color .2s;
}
.chat-input:focus{border-color:var(--accent)}
.chat-input::placeholder{color:var(--c5)}
.chat-send-btn{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none;color:#fff;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,opacity .2s;
}
.chat-send-btn:hover{opacity:.88}
.chat-send-btn:active{transform:scale(.9)}
.chat-send-btn:disabled{opacity:.4;cursor:not-allowed}

/* =====================================================
   iPHONE 15 PRO MOCKUP
   ===================================================== */
.iph{
  position:absolute;
}
.iph-back{
  width:210px;height:440px;
  top:60px;left:20px;
  z-index:1;
  animation:scannerSwap 12s cubic-bezier(.45,0,.55,1) infinite;
}
.iph-front{
  width:220px;height:460px;
  top:10px;left:290px;
  z-index:2;
  animation:eatrightSwap 12s cubic-bezier(.45,0,.55,1) infinite;
}

/* Scanner: starts back-left → moves to front-right */
@keyframes scannerSwap{
  0%,38%{
    transform:rotate(-4deg) scale(0.93);
    z-index:1;
    filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6));
  }
  44%{
    z-index:3;
    transform:rotate(-4deg) scale(0.93);
    filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6));
  }
  52%,88%{
    transform:translateX(270px) rotate(2deg) scale(1.06);
    z-index:3;
    filter:brightness(1) drop-shadow(0 40px 60px rgba(34,212,143,.25)) drop-shadow(0 20px 30px rgba(0,0,0,.3));
  }
  96%,100%{
    transform:rotate(-4deg) scale(0.93);
    z-index:1;
    filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6));
  }
}

/* EatRight app: starts front-right → moves to back-left */
@keyframes eatrightSwap{
  0%,38%{
    transform:scale(1.05);
    z-index:2;
    filter:brightness(1) drop-shadow(0 50px 70px rgba(34,212,143,.2)) drop-shadow(0 20px 40px rgba(0,0,0,.4));
  }
  44%{
    z-index:1;
    transform:scale(1.05);
    filter:brightness(1) drop-shadow(0 50px 70px rgba(34,212,143,.2)) drop-shadow(0 20px 40px rgba(0,0,0,.4));
  }
  52%,88%{
    transform:translateX(-270px) rotate(-5deg) scale(0.90);
    z-index:1;
    filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6));
  }
  96%,100%{
    transform:scale(1.05);
    z-index:2;
    filter:brightness(1) drop-shadow(0 50px 70px rgba(34,212,143,.2)) drop-shadow(0 20px 40px rgba(0,0,0,.4));
  }
}

/* ── Responsive phone sizes + swap adjustments ── */
@media(max-width:1100px){
  .iph-back{width:192px;height:402px;left:18px;top:55px}
  .iph-front{width:200px;height:420px;left:228px;top:8px}
  @keyframes scannerSwap{
    0%,38%{transform:rotate(-4deg) scale(0.93);z-index:1;filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6))}
    44%{z-index:3;transform:rotate(-4deg) scale(0.93);filter:brightness(0.65)}
    52%,88%{transform:translateX(210px) rotate(2deg) scale(1.06);z-index:3;filter:brightness(1) drop-shadow(0 40px 60px rgba(34,212,143,.25))}
    96%,100%{transform:rotate(-4deg) scale(0.93);z-index:1;filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6))}
  }
  @keyframes eatrightSwap{
    0%,38%{transform:scale(1.05);z-index:2;filter:brightness(1) drop-shadow(0 50px 70px rgba(34,212,143,.2))}
    44%{z-index:1;transform:scale(1.05);filter:brightness(1)}
    52%,88%{transform:translateX(-210px) rotate(-5deg) scale(0.90);z-index:1;filter:brightness(0.65) drop-shadow(0 30px 50px rgba(0,0,0,.6))}
    96%,100%{transform:scale(1.05);z-index:2;filter:brightness(1) drop-shadow(0 50px 70px rgba(34,212,143,.2))}
  }
}
@media(max-width:820px){
  /* Mobil: ikki telefon yon-yoniga sig'adi, yaqin */
  .iph-back{width:158px;height:332px;left:6px;top:38px}
  .iph-front{width:168px;height:352px;left:182px;top:6px}
  /* Proporsional kichik frame elementlari */
  .iph-frame{border-radius:28px}
  .iph-screen{border-radius:25px}
  /* Dynamic Island yashirin — qora bo'shliq yo'q */
  .iph-island{display:none}
  .iph-status{padding:3px 10px 3px}
  .iph-status-dark{padding:3px 10px 3px}
  .iph-time{font-size:8px}
  .iph-icons svg{transform:scale(0.7);transform-origin:right center}
  .iph-btn-vol-up{width:2px;height:20px}
  .iph-btn-vol-dn{width:2px;height:20px}
  .iph-btn-power{width:2px;height:30px}
  /* Kichik ekran uchun kompakt app header */
  .iph-app-header{padding:5px 10px 10px}
  .iph-week-row{display:none}
  .iph-ring-wrap{width:74px;height:74px;margin:2px auto 4px}
  .iph-ring-wrap svg{width:74px;height:74px}
  .iph-ring-txt b{font-size:.78rem}
  .iph-log{padding:6px 8px}
  .iph-food-card{padding:6px;gap:6px}
  .iph-food-img{width:44px;height:44px}
  .iph-bottom-nav{padding:6px 14px 10px}
  @keyframes scannerSwap{
    0%,38%{transform:rotate(-4deg) scale(0.93);z-index:1;filter:brightness(0.65) drop-shadow(0 20px 35px rgba(0,0,0,.6))}
    44%{z-index:3;transform:rotate(-4deg) scale(0.93);filter:brightness(0.65)}
    52%,88%{transform:translateX(176px) rotate(2deg) scale(1.06);z-index:3;filter:brightness(1) drop-shadow(0 30px 50px rgba(34,212,143,.25))}
    96%,100%{transform:rotate(-4deg) scale(0.93);z-index:1;filter:brightness(0.65) drop-shadow(0 20px 35px rgba(0,0,0,.6))}
  }
  @keyframes eatrightSwap{
    0%,38%{transform:scale(1.05);z-index:2;filter:brightness(1) drop-shadow(0 30px 55px rgba(34,212,143,.2))}
    44%{z-index:1;transform:scale(1.05);filter:brightness(1)}
    52%,88%{transform:translateX(-176px) rotate(-5deg) scale(0.90);z-index:1;filter:brightness(0.65) drop-shadow(0 20px 35px rgba(0,0,0,.6))}
    96%,100%{transform:scale(1.05);z-index:2;filter:brightness(1) drop-shadow(0 30px 55px rgba(34,212,143,.2))}
  }
}
@media(max-width:500px){
  .iph-back{width:130px;height:272px;left:5px;top:30px}
  .iph-front{width:138px;height:290px;left:154px;top:4px}
  .iph-frame{border-radius:20px}
  .iph-screen{border-radius:17px}
  .iph-island{display:none}
  .iph-status{padding:2px 8px 2px}
  .iph-status-dark{padding:2px 8px 2px}
  .iph-time{font-size:7px}
  .iph-btn-vol-up{width:2px;height:14px}
  .iph-btn-vol-dn{width:2px;height:14px}
  .iph-btn-power{width:2px;height:20px}
  .iph-app-header{padding:4px 8px 8px}
  .iph-ring-wrap{width:60px;height:60px;margin:2px auto 3px}
  .iph-ring-wrap svg{width:60px;height:60px}
  .iph-ring-txt b{font-size:.65rem}
  .iph-log{padding:4px 6px}
  .iph-food-card{padding:5px;gap:5px}
  .iph-food-img{width:36px;height:36px;border-radius:7px}
  .iph-bottom-nav{padding:5px 10px 8px}
  @keyframes scannerSwap{
    0%,38%{transform:rotate(-4deg) scale(0.93);z-index:1;filter:brightness(0.65) drop-shadow(0 15px 25px rgba(0,0,0,.6))}
    44%{z-index:3;transform:rotate(-4deg) scale(0.93);filter:brightness(0.65)}
    52%,88%{transform:translateX(149px) rotate(2deg) scale(1.06);z-index:3;filter:brightness(1) drop-shadow(0 20px 35px rgba(34,212,143,.25))}
    96%,100%{transform:rotate(-4deg) scale(0.93);z-index:1;filter:brightness(0.65) drop-shadow(0 15px 25px rgba(0,0,0,.6))}
  }
  @keyframes eatrightSwap{
    0%,38%{transform:scale(1.05);z-index:2;filter:brightness(1) drop-shadow(0 20px 40px rgba(34,212,143,.2))}
    44%{z-index:1;transform:scale(1.05);filter:brightness(1)}
    52%,88%{transform:translateX(-149px) rotate(-5deg) scale(0.90);z-index:1;filter:brightness(0.65) drop-shadow(0 15px 25px rgba(0,0,0,.6))}
    96%,100%{transform:scale(1.05);z-index:2;filter:brightness(1) drop-shadow(0 20px 40px rgba(34,212,143,.2))}
  }
}

.iph-frame{
  width:100%;height:100%;
  border-radius:44px;
  background:linear-gradient(145deg,#4a4a4a,#2a2a2a,#1a1a1a);
  padding:3px;
  position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.06);
}
.iph-frame-light{
  background:linear-gradient(145deg,#c8c8c8,#a8a8a8,#909090);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 0 0 1px rgba(255,255,255,.15);
}

/* Side buttons */
.iph-btn-vol-up,.iph-btn-vol-dn,.iph-btn-power{
  position:absolute;
  background:linear-gradient(90deg,#2a2a2a,#3a3a3a);
  border-radius:2px;
}
.iph-frame-light .iph-btn-vol-up,
.iph-frame-light .iph-btn-vol-dn,
.iph-frame-light .iph-btn-power{
  background:linear-gradient(90deg,#a0a0a0,#b8b8b8);
}
.iph-btn-vol-up{width:3px;height:30px;left:-3px;top:24%}
.iph-btn-vol-dn{width:3px;height:30px;left:-3px;top:36%}
.iph-btn-power{width:3px;height:44px;right:-3px;top:28%}

.iph-screen{
  width:100%;height:100%;
  border-radius:41px;
  background:#0d1f2d;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  position:relative;
}
.iph-screen-light{
  background:#f0f7f4;
}

/* Dynamic Island */
.iph-island{
  position:absolute;
  top:10px;left:50%;
  transform:translateX(-50%);
  width:88px;height:26px;
  background:#000;
  border-radius:20px;
  z-index:10;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.iph-island-dark{background:#0d1f2d}

/* Status bar */
.iph-status{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px 4px;
  flex-shrink:0;
  position:relative;z-index:5;
}
.iph-status-dark{
  padding:14px 20px 4px;
}
.iph-time{font-size:.68rem;font-weight:700;color:rgba(255,255,255,.9);letter-spacing:-.3px}
.iph-status-dark .iph-time{color:rgba(0,0,0,.8)}
.iph-icons{display:flex;align-items:center;gap:5px}

/* Scanner phone UI */
.iph-scan-ui{flex:1;display:flex;flex-direction:column;overflow:hidden}
.iph-scan-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 14px 8px;
  font-size:.68rem;font-weight:700;color:#fff;
  flex-shrink:0;
}
.iph-icon-btn{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
}

.iph-cam-view{
  flex:1;position:relative;overflow:hidden;
  background:#100800;
}
.iph-food-scene{
  position:absolute;inset:0;
  overflow:hidden;
}
.food-slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
}
.food-slide-1{
  animation:foodFade 8s infinite;
}
.food-slide-2{
  animation:foodFade 8s infinite 4s;
}
@keyframes foodFade{
  0%{opacity:0}
  8%{opacity:1}
  42%{opacity:1}
  50%{opacity:0}
  100%{opacity:0}
}
/* Food name label inside camera */
.iph-food-label{
  position:absolute;bottom:14px;left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(34,212,143,.4);
  border-radius:20px;
  padding:4px 14px;
  font-size:10px;font-weight:600;color:#fff;
  white-space:nowrap;
  display:flex;align-items:center;gap:6px;
  opacity:0;
}
.iph-food-label span{
  color:#22d48f;font-weight:700;
}
.food-label-1{
  animation:labelFade 8s infinite;
}
.food-label-2{
  animation:labelFade 8s infinite 4s;
}
@keyframes labelFade{
  0%{opacity:0;transform:translateX(-50%) translateY(4px)}
  10%{opacity:1;transform:translateX(-50%) translateY(0)}
  42%{opacity:1;transform:translateX(-50%) translateY(0)}
  50%{opacity:0;transform:translateX(-50%) translateY(4px)}
  100%{opacity:0;transform:translateX(-50%) translateY(4px)}
}
/* Floating tags sync with food slides */
.food-tag-plov{
  animation:tagFade 8s infinite;
}
.food-tag-manti{
  animation:tagFade 8s infinite 4s;
}
@keyframes tagFade{
  0%{opacity:0;transform:translateY(4px)}
  10%{opacity:1;transform:translateY(0)}
  42%{opacity:1;transform:translateY(0)}
  50%{opacity:0;transform:translateY(4px)}
  100%{opacity:0;transform:translateY(4px)}
}

.iph-scan-frame{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:110px;height:110px;
}
.iph-corner{
  position:absolute;width:18px;height:18px;
  border-color:#22d48f;border-style:solid;
}
.iph-corner.tl{top:0;left:0;border-width:3px 0 0 3px;border-radius:4px 0 0 0}
.iph-corner.tr{top:0;right:0;border-width:3px 3px 0 0;border-radius:0 4px 0 0}
.iph-corner.bl{bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 4px}
.iph-corner.br{bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 4px 0}

.iph-scan-line{
  position:absolute;left:4px;right:4px;top:10%;
  height:1.5px;
  background:linear-gradient(90deg,transparent,#22d48f,transparent);
  box-shadow:0 0 8px rgba(34,212,143,.6);
  animation:scanMove 2s ease-in-out infinite;
}
@keyframes scanMove{
  0%{top:8%}50%{top:88%}100%{top:8%}
}

.iph-scan-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px 14px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(10px);
  flex-shrink:0;
  gap:8px;
}
.iph-mode-pill{
  font-size:.5rem;font-weight:700;color:rgba(255,255,255,.45);
  padding:3px 8px;border-radius:10px;
}
.iph-mode-pill.active{color:#22d48f;background:rgba(34,212,143,.12)}
.iph-shutter{
  width:44px;height:44px;border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.iph-shutter-inner{
  width:34px;height:34px;border-radius:50%;
  background:#fff;
}
.iph-gallery-thumb{
  width:28px;height:28px;border-radius:7px;
  background:linear-gradient(135deg,#5c3010,#8b4513);
  border:1.5px solid rgba(255,255,255,.2);
  flex-shrink:0;
}

/* ── APP UI (front phone) ── */
.iph-app-header{
  background:linear-gradient(180deg,#0d1f2d 0%,#132a40 100%);
  padding:8px 12px 14px;
  flex-shrink:0;
}
.iph-app-logo{
  font-family:'Syne',sans-serif;
  font-size:.78rem;font-weight:800;
  color:#22d48f;text-align:center;
  margin-bottom:6px;letter-spacing:-.3px;
}
.iph-week-row{
  display:flex;justify-content:space-around;
  margin-bottom:8px;
}
.iph-day{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:.45rem;font-weight:600;color:rgba(255,255,255,.4);
}
.iph-day span{
  width:22px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.58rem;font-weight:700;
}
.iph-day.today{color:rgba(255,255,255,.9)}
.iph-day.today span{background:rgba(255,255,255,.2);color:#fff}

.iph-ring-wrap{
  display:flex;align-items:center;justify-content:center;
  position:relative;margin:2px auto 6px;
  width:90px;height:90px;
}
.iph-ring-txt{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  text-align:center;line-height:1.1;
}
.iph-ring-txt b{font-size:.88rem;font-weight:800;color:#fff;display:block}
.iph-ring-txt small{font-size:.38rem;color:rgba(255,255,255,.5);font-weight:500}

.iph-macros{
  display:flex;justify-content:space-around;
  background:rgba(255,255,255,.07);
  border-radius:12px;padding:6px 4px;
}
.iph-macro{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
}
.iph-macro span{font-size:.65rem}
.iph-macro b{font-size:.62rem;font-weight:800;color:#fff;line-height:1}
.iph-macro small{font-size:.38rem;color:rgba(255,255,255,.4);font-weight:500}

.iph-log{padding:8px 10px;flex:1;overflow:hidden}
.iph-log-title{
  font-size:.55rem;font-weight:700;color:rgba(13,31,45,.5);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;
}
.iph-food-card{
  background:#fff;border-radius:14px;
  display:flex;align-items:center;gap:8px;
  padding:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.iph-food-img{
  width:52px;height:52px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#5c3010,#9a4e28);
}
.iph-food-info{flex:1;min-width:0}
.iph-food-name{font-size:.52rem;font-weight:700;color:#0d1f2d;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iph-food-cal{font-size:.75rem;font-weight:900;color:#0d1f2d;line-height:1}
.iph-food-cal small{font-size:.42rem;color:#888;font-weight:500}
.iph-food-macros{font-size:.42rem;color:#888;margin-top:2px}
.iph-food-time{
  font-size:.44rem;font-weight:700;
  background:rgba(0,0,0,.06);
  color:#666;padding:3px 6px;border-radius:6px;flex-shrink:0;
}

.iph-bottom-nav{
  display:flex;align-items:center;justify-content:space-around;
  padding:8px 16px 14px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  flex-shrink:0;
}
.iph-nav-item{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}
.iph-nav-fab{
  width:44px;height:44px;border-radius:50%;
  background:#0d1f2d;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(13,31,45,.3);
}

/* Remove old phone styles conflict */
.ea-phones-wrap .ea-phone{display:none}

/* =====================================================
   SITE FOOTER
   ===================================================== */
.site-footer{
  text-align:center;
  padding:16px 16px 24px;
  border-top:1px solid rgba(255,255,255,.06);
  margin-top:0;
}
.site-footer-links{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:4px 8px;
  margin-bottom:10px;
}
.site-footer-links a{
  font-size:.82rem;color:var(--c5);
  text-decoration:none;opacity:.7;
  transition:opacity .2s,color .2s;
  padding:2px 4px;
}
.site-footer-links a:hover{opacity:1;color:var(--accent)}
.sf-dot{color:var(--c5);opacity:.3;font-size:.82rem}
.site-footer-copy{
  font-size:.78rem;color:var(--c5);opacity:.45;
}

/* =====================================================
   SCROLL-REVEAL ANIMATIONS
   ===================================================== */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* Hero entrance animations */
.ea-hero-left > *{
  opacity:0;
  animation:heroFadeUp .7s cubic-bezier(.22,1,.36,1) forwards;
}
.ea-hero-left > *:nth-child(1){animation-delay:.1s}
.ea-hero-left > *:nth-child(2){animation-delay:.22s}
.ea-hero-left > *:nth-child(3){animation-delay:.34s}
.ea-hero-left > *:nth-child(4){animation-delay:.46s}
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

/* Phone mockup entrance */
.ea-phones-wrap{
  animation:heroPhoneIn .9s cubic-bezier(.22,1,.36,1) .3s both;
}
@keyframes heroPhoneIn{
  from{opacity:0;transform:translateX(40px)}
  to{opacity:1;transform:translateX(0)}
}

/* Navbar glassmorphism enhancement */
.navbar{
  border-bottom:1px solid rgba(34,212,143,.08);
}
.navbar.scrolled{
  background:rgba(6,20,27,.85) !important;
  backdrop-filter:blur(28px) !important;
  -webkit-backdrop-filter:blur(28px) !important;
  border-color:rgba(34,212,143,.12) !important;
}

/* Logo accent */
.logo{
  font-family:'Syne',sans-serif !important;
  font-size:1.25rem !important;
  font-weight:800 !important;
  letter-spacing:-.3px;
  background:linear-gradient(135deg,#22d48f,#06d6a0);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Card glass effect */
.fcat-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(34,212,143,.12);
  backdrop-filter:blur(8px);
}
body[data-theme="light"] .fcat-card{
  background:rgba(255,255,255,.8);
  border-color:rgba(34,212,143,.15);
}

/* Footer CTA enhancement */
.tsla-footer-section h2{
  font-family:'Syne',sans-serif;
  letter-spacing:-2px;
}
.tsla-footer-section{
  background:linear-gradient(0deg,rgba(34,212,143,.04),transparent) !important;
}

/* Feature section h2 */
.tsla-sec-content h2{
  font-family:'Syne',sans-serif;
  letter-spacing:-1.5px;
}

/* Glow line separator */
.fcat-section::before{
  background:linear-gradient(90deg,transparent,rgba(34,212,143,.4),transparent) !important;
}

/* Avatar initials → green glow */
.ea-av{
  box-shadow:0 0 0 2px rgba(34,212,143,.3);
}

/* Food tag calorie badge → green */
.ea-food-tag b{
  background:rgba(34,212,143,.15);
  color:#22d48f;
}

/* Water tracker bar */
.wt-bar-fill{background:linear-gradient(to top,var(--accent),#06d6a0) !important}