/* ═══════════════════════════════════════════════════════════════════════════
   STEPS — UMUMIY KOMPONENTLAR (ui/components.js va ilova qobig'i).
   Faqat qayta ishlatiladigan bloklar. Ekranga xos qoidalar — styles/screens/<ekran>.css.
   Rang/soya/radius — faqat tokenlar: --surface, --e1/--e2/--e3, --r-*, makro ranglari.
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeOut{to{opacity:0}}
@keyframes dimIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetDown{from{transform:translate3d(0,var(--drag-y,0px),0)}to{transform:translate3d(0,100%,0)}}   /* --drag-y: tortib yopilganda joriy nuqtadan */
@keyframes pageIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes pageOut{to{opacity:0;transform:translateY(28px)}}
@keyframes toastIn{from{opacity:0;transform:translate3d(0,-18px,0) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translate3d(0,-12px,0) scale(.96)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ───── Tab bar: chap · KAMERA · o'ng ───── */
.tabbar{position:absolute;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tab-h) + var(--sab));padding-bottom:var(--sab);
        display:grid;grid-template-columns:1fr 96px 1fr;align-items:start;
        background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
        box-shadow:inset 0 1px 0 var(--hi),0 -1px 0 var(--edge),0 -12px 32px -20px rgba(0,0,0,.25)}
.tab{display:grid;justify-items:center;align-content:start;gap:4px;padding-top:12px;height:64px;font-size:11px;font-weight:700;color:var(--muted)}
.tab[aria-current="page"]{color:var(--fg)}
.tab[aria-current="page"] svg{color:var(--brand)}
.tab:focus-visible{outline-offset:-4px}

/* Kamera tugmasi — ko'tarilgan, hajmli, brend nuri bilan (DIZAYN.md §1, §5) */
.fab{justify-self:center;margin-top:-22px;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;position:relative;z-index:2;
     background:var(--brand-fill);color:var(--on-brand);
     --fab-ring:0 0 0 6px var(--bg);
     box-shadow:var(--fab-ring),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -3px 6px rgba(0,0,0,.14),
                0 14px 30px -6px var(--brand-glow),0 4px 10px -2px var(--brand-glow);
     transition:transform .35s var(--spring),box-shadow .25s ease}
.fab svg.i{width:30px;height:30px;transition:transform .35s var(--spring),opacity .2s}
.fab .x{position:absolute;opacity:0;transform:rotate(-90deg) scale(.6)}
.fab.open .cam{opacity:0;transform:rotate(90deg) scale(.6)}
.fab.open .x{opacity:1;transform:none}
.fab:focus-visible{outline-offset:4px;border-radius:50%}

/* ───── Overlay qatlamlari (router: page | full | fan; sheet — pastda) ───── */
.ov{position:absolute;inset:0;outline:none}
.ov--page{background:radial-gradient(120% 40% at 50% -4%,var(--aura),transparent 72%),var(--bg);
          overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;
          padding:var(--top) var(--gutter) calc(32px + var(--sab));animation:pageIn .38s var(--ease)}
.ov--page::-webkit-scrollbar{display:none}
.ov--page.is-leaving{animation:pageOut .24s ease forwards}
.ov--full{background:#000;color:#fff;animation:dimIn .25s ease;overflow:hidden}
.ov--full.is-leaving{animation:fadeOut .22s ease forwards}
.ov--fan{background:var(--scrim,var(--dim));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:dimIn .25s ease}
.ov--fan.is-leaving{animation:fadeOut .2s ease forwards}

/* Sahifa overlay'ining yuqori paneli: ‹ Sarlavha */
.topbar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin:-6px -6px 14px;min-height:44px}
.topbar-t{font-size:17px;font-weight:800;letter-spacing:-.01em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar--dark{color:#fff;padding:0 var(--gutter);margin:0}
.topbar--dark .icon-btn{background:rgba(255,255,255,.14);box-shadow:none;color:#fff}

/* Ekran sarlavhasi: ustki yorliq + katta sarlavha + avatar */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 18px}

/* ───── Tugmalar ───── */
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface);color:var(--fg);box-shadow:var(--e1)}
.icon-btn svg.i{width:22px;height:22px}
.icon-btn--sm{width:32px;height:32px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--edge);color:var(--muted)}
.icon-btn--sm svg.i{width:16px;height:16px;stroke-width:2.6}
.icon-btn--ghost{background:none;box-shadow:none}

.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--surface);box-shadow:var(--e1);
        font-weight:800;font-size:15px;color:var(--brand-ink)}
.avatar svg.i{width:20px;height:20px}
.avatar--lg{width:56px;height:56px;font-size:22px;background:var(--brand-fill);color:var(--on-brand);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -8px var(--brand-glow)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:calc(var(--r-sm) + 4px);
     font-size:16px;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.btn svg.i{width:20px;height:20px}
.btn--primary,.cta{background:var(--brand-fill);color:var(--on-brand);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 4px rgba(0,0,0,.12),0 12px 26px -8px var(--brand-glow),0 3px 8px -2px var(--brand-glow)}
.btn--soft{background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.btn--plain{background:var(--surface);color:var(--fg);box-shadow:var(--e1)}
.btn--ghost{background:none;color:var(--brand-ink);padding:0 12px}
.btn--danger{background:color-mix(in srgb,var(--off) 12%,transparent);color:var(--off-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--off) 18%,transparent)}
.btn--block,.cta{width:100%}
.btn--lg,.cta{height:56px;font-size:17px;border-radius:calc(var(--r-sm) + 6px)}
.cta{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;margin-top:16px}
.btn:disabled,.cta:disabled{opacity:.45;box-shadow:none}

/* ───── Halqa (ring) ───── */
.ring{transform:rotate(-90deg);overflow:visible;flex:none}
.ring circle{fill:none;stroke-width:var(--ring-w,20px)}
.ring-t{stroke:var(--brand-soft)}
.ring-p{stroke:var(--brand);stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease),stroke .3s;filter:drop-shadow(0 0 7px var(--brand-glow))}
.ring--near .ring-p{stroke:var(--near);filter:none}
.ring--near .ring-t{stroke:color-mix(in srgb,var(--near) 16%,transparent)}
.ring--off .ring-p{stroke:var(--off);filter:none}
.ring--off .ring-t{stroke:color-mix(in srgb,var(--off) 14%,transparent)}

/* ───── Chiziqli progress ───── */
.bar{--bar-c:var(--brand);height:6px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--bar-c) 15%,transparent);overflow:hidden}
.bar i{display:block;height:100%;border-radius:inherit;background:var(--bar-c);transition:width 1s var(--ease)}
.bar--protein{--bar-c:var(--protein)} .bar--carb{--bar-c:var(--carb)} .bar--fat{--bar-c:var(--fat)}
.bar--water{--bar-c:var(--water)} .bar--near{--bar-c:var(--near)} .bar--off{--bar-c:var(--off)}

/* ───── Chip va pill ───── */
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip{--chip-c:var(--muted);border-radius:var(--r-sm);padding:11px 12px;display:grid;gap:2px;min-width:0;
      background:color-mix(in srgb,var(--chip-c) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--chip-c) 14%,transparent)}
.chip .num{font-size:18px;font-weight:700;color:var(--chip-ink,var(--fg));white-space:nowrap}
.chip span{font-size:12px;font-weight:700;color:var(--muted)}
.chip--protein{--chip-c:var(--protein);--chip-ink:var(--protein-ink)}
.chip--carb{--chip-c:var(--carb);--chip-ink:var(--carb-ink)}
.chip--fat{--chip-c:var(--fat);--chip-ink:var(--fat-ink)}
.chip--brand{--chip-c:var(--brand);--chip-ink:var(--brand-ink)}
.chip--neutral{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--edge)}
/* AI ishonchi past — taxminiy qiymat */
.est{color:var(--muted)!important}
.est::before{content:"≈\00a0"}

.pill{--pill-c:var(--brand);--pill-ink:var(--brand-ink);display:inline-flex;width:max-content;align-items:center;gap:4px;padding:6px 10px;border-radius:var(--r-pill);
      font-size:13px;font-weight:800;white-space:nowrap;color:var(--pill-ink);
      background:color-mix(in srgb,var(--pill-c) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pill-c) 18%,transparent)}
.pill--near{--pill-c:var(--near);--pill-ink:var(--near-ink)}
.pill--off{--pill-c:var(--off);--pill-ink:var(--off-ink)}
.pill--neutral{--pill-c:var(--muted);--pill-ink:var(--muted)}

/* ───── Kartalar va ro'yxat (iOS inset-grouped) ───── */
.card{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--e1);padding:18px}
.list{background:var(--surface);border-radius:var(--r-md);box-shadow:var(--e1);overflow:hidden}
.cell{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 14px;text-align:left;position:relative;color:var(--fg)}
/* ajratuvchi chiziq ikonkadan keyin boshlanadi */
.cell + .cell::before{content:"";position:absolute;top:0;left:var(--sep-left,62px);right:0;height:1px;background:var(--sep)}
.list > .cell:not(:has(.cell-ic,.cell-art)){--sep-left:14px}
button.cell:active{transform:none;background:var(--surface-2)}
/* .list overflow:hidden — fokus chizig'i ichkariga chiziladi, kesilib qolmasin */
.cell:focus-visible{outline-offset:-3px;border-radius:calc(var(--r-md) - 6px)}
.cell-ic{width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;
         background:color-mix(in srgb,var(--tone-c) 14%,transparent);color:var(--tone-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone-c) 12%,transparent)}
.cell-ic svg.i{width:19px;height:19px}
.cell-art{flex:none;display:grid;place-items:center;width:34px;height:34px}
.cell-txt{flex:1;min-width:0;display:grid;gap:2px}
.cell-t{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-s{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-v{font-size:15px;font-weight:700;color:var(--muted);white-space:nowrap;flex:none}
.cell-chev{width:18px!important;height:18px!important;color:var(--muted);opacity:.7}

/* Ikonka plitkasi ranglari */
.tone-neutral{--tone-c:var(--muted);--tone-ink:var(--muted)}
.tone-brand{--tone-c:var(--brand);--tone-ink:var(--brand-ink)}
.tone-protein{--tone-c:var(--protein);--tone-ink:var(--protein-ink)}
.tone-carb{--tone-c:var(--carb);--tone-ink:var(--carb-ink)}
.tone-fat{--tone-c:var(--fat);--tone-ink:var(--fat-ink)}
.tone-water{--tone-c:var(--water);--tone-ink:var(--water-ink)}
.tone-off{--tone-c:var(--off);--tone-ink:var(--off-ink)}

/* ───── Kiritish maydoni ───── */
.field{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border-radius:var(--r-sm);background:var(--surface);color:var(--muted);
       box-shadow:var(--e1);transition:box-shadow .2s}
.field:focus-within{box-shadow:0 0 0 1px var(--focus,var(--brand)),0 0 0 4px var(--brand-soft)}
.field svg.i{width:18px;height:18px}
.field input,.field textarea{flex:1;min-width:0;border:0;background:none;font-size:16px;font-weight:600;color:var(--fg);outline:none;padding:12px 0}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.field .unit{font-weight:700;color:var(--muted)}

/* ───── Segment ───── */
.seg{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:2px;padding:3px;border-radius:var(--r-sm);
     background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--edge);isolation:isolate}
/* tanlangan qism — bitta sirpanuvchi "tabletka" (--i: tanlangan indeks, components.js seg() qo'yadi) */
.seg::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;border-radius:var(--r-xs);
     width:calc((100% - 6px - (var(--n,3) - 1) * 2px) / var(--n,3));box-shadow:var(--e1);
     background:var(--L,var(--surface)) var(--D,color-mix(in srgb,var(--fg) 12%,var(--surface-2)));   /* tunda — ochroq (iOS) */
     transform:translate3d(calc(var(--i,0) * (100% + 2px)),0,0);transition:transform .38s var(--spring)}
.seg[data-none]::before{opacity:0}
.seg button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:6px 4px;border-radius:var(--r-xs);
            font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.seg button svg.i{width:16px;height:16px}
.seg button{transition:color .2s ease}
.seg button[aria-checked="true"]{color:var(--fg)}
.seg button:active{transform:none}

/* ───── Stepper ───── */
.stepper{display:inline-flex;width:max-content;align-items:center;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--edge)}
.stepper button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--e1)}
.stepper button svg.i{width:18px;height:18px;stroke-width:2.6}
.stepper button:disabled{opacity:.35;box-shadow:none}
.stepper output{min-width:64px;text-align:center;font-weight:700;font-size:15px}

/* ───── Toggle (o'chirgich) ───── */
.toggle{position:relative;width:51px;height:31px;border-radius:var(--r-pill);flex:none;background:var(--surface-2);
        box-shadow:inset 0 0 0 1px var(--edge-strong);transition:background-color .25s ease}
.toggle i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
          box-shadow:0 2px 6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);transition:transform .3s var(--spring)}
.toggle[aria-checked="true"]{background:var(--brand);box-shadow:none}
.toggle[aria-checked="true"] i{transform:translateX(20px)}
.toggle:active{transform:none}

/* ───── Bosiladigan maydon ≥ 44px (WCAG 2.5.5 / Apple HIG) ─────
   Vizual o'lcham o'zgarmaydi: shaffof ::after tugmani tashqariga kengaytiradi.
   :where() — nol spetsifiklik, ekran CSS'idagi position qoidalari ustun qoladi. */
:where(.icon-btn--sm,.stepper button,.seg button,.toggle){position:relative}
:where(.icon-btn--sm,.stepper button,.seg button,.toggle)::after{content:"";position:absolute;border-radius:inherit}
.icon-btn--sm::after{inset:-6px}                 /* 32 → 44 */
.stepper button::after{inset:-5px}               /* 34 → 44 */
.seg button::after{inset:-5px 0}                 /* 34 → 44 balandlik; yonma-yon tugmalar ustma-ust tushmaydi */
.toggle::after{inset:-7px -4px}                  /* 51×31 → 59×45 */

/* ───── Pastdan chiqadigan oyna ───── */
.sheet-wrap{position:absolute;inset:0;display:flex;align-items:flex-end}
.sheet-dim{position:absolute;inset:0;background:var(--scrim,var(--dim));animation:dimIn .25s ease}
.sheet{position:relative;width:100%;max-height:92%;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);outline:none;
       border-radius:var(--r-lg) var(--r-lg) 0 0;padding:10px var(--gutter) calc(24px + var(--sab));
       box-shadow:var(--e3);animation:sheetUp .42s var(--ease);scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.sheet-wrap.is-leaving .sheet{animation:sheetDown .28s cubic-bezier(.4,0,1,1) forwards}
.sheet-wrap.is-leaving .sheet-dim{animation:fadeOut .28s ease forwards}
.grab{width:38px;height:5px;border-radius:var(--r-pill);background:var(--edge-strong);margin:0 auto 14px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px}
.sheet-t{font-size:22px;font-weight:800;letter-spacing:-.02em}

/* ───── Bo'sh holat, yuklanish ───── */
.empty{display:grid;justify-items:center;text-align:center;gap:8px;padding:36px 20px}
.empty-art{margin-bottom:6px}
.empty-ic{width:56px;height:56px;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:6px;
          background:var(--brand-soft);color:var(--brand-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent)}
.empty-t{font-size:18px;font-weight:800;letter-spacing:-.01em}
.empty-p{font-size:14px;font-weight:600;color:var(--muted);max-width:30ch;line-height:1.45}
.empty .btn{margin-top:10px}

.spinner{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid color-mix(in srgb,currentColor 22%,transparent);
         border-top-color:currentColor;animation:spin .8s linear infinite}

/* 3D modul yuklanmaganda — oddiy ikonka plitkasi */
.art-fallback{display:inline-grid;place-items:center;border-radius:28%;background:var(--brand-soft);color:var(--brand-ink)}
.art-fallback svg.i{width:50%;height:50%}

/* ───── Toast ───── */
.toast{position:absolute;left:16px;right:16px;margin:0 auto;width:max-content;top:calc(var(--top) - 4px);z-index:60;max-width:calc(100% - 32px);
       display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-radius:var(--r-pill);
       background:var(--inverse,var(--fg));color:var(--on-inverse,var(--bg));font-size:14px;font-weight:700;box-shadow:var(--e2);animation:toastIn .45s var(--spring)}
.toast.is-leaving{animation:toastOut .22s ease forwards}
.toast-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--brand);color:var(--on-brand)}
.toast-ic svg.i{width:14px;height:14px;stroke-width:3}
.toast--off .toast-ic{background:var(--off);color:var(--on-off)}
.toast--neutral .toast-ic{background:color-mix(in srgb,var(--on-inverse,var(--bg)) 22%,transparent);color:var(--on-inverse,var(--bg))}
.toast-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
         white-space:normal;overflow-wrap:anywhere;line-height:1.3;padding-right:8px}   /* 2 qatorgacha, kesilmaydi */
.toast-act{flex:none;padding:6px 12px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--on-inverse,var(--bg)) 16%,transparent);color:var(--on-inverse,var(--bg));font-weight:800}

/* ───── Tasdiqlash oynasi (<dialog>) ───── */
.alert{width:min(300px,calc(100vw - 48px));padding:0;border:0;border-radius:var(--r-md);background:var(--surface);color:var(--fg);
       box-shadow:var(--e2);overflow:hidden;animation:fadeIn .25s var(--ease)}
.alert::backdrop{background:var(--scrim,var(--dim));animation:dimIn .2s ease}
.alert-body{padding:22px 20px 18px;text-align:center;display:grid;gap:6px}
.alert-t{font-size:17px;font-weight:800}
.alert-p{font-size:14px;font-weight:600;color:var(--muted);line-height:1.4}
.alert-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--sep)}
.alert-btn{height:48px;font-size:16px;font-weight:700;color:var(--brand-ink);text-align:center}
.alert-btn + .alert-btn{border-left:1px solid var(--sep)}
.alert-actions--stack{grid-template-columns:1fr}
.alert-actions--stack .alert-btn + .alert-btn{border-left:0;border-top:1px solid var(--sep)}
.alert-btn:focus-visible{outline-offset:-4px;border-radius:var(--r-xs)}
.alert-btn.is-primary{font-weight:800}
.alert-btn.is-danger{color:var(--off-ink);font-weight:800}
.alert-btn:active{transform:none;background:var(--surface-2)}

/* ───── Uzluksiz (squircle) burchaklar — faqat to'rtburchak sirtlar.
   Doira va pill'lar ro'yxatda yo'q: ular shaklini saqlashi kerak. Radiuslar tokens.css da kattalashadi. */
@supports (corner-shape:squircle){
  .card,.list,.chip,.seg,.seg::before,.seg button,.btn,.cta,.field,.sheet,.cell-ic,.empty-ic,.alert{corner-shape:squircle}
  @media (min-width:521px){:root:not(.is-native) .phone{corner-shape:squircle;border-radius:76px}}
}

/* Kamera (qora to'liq ekran) ichidagi bo'sh/xato holati */
.ov--full .empty-t{color:#fff}