/* =========================================================
   Responsive karkas: mobil (< 768) · planshet (768–1023) · desktop (>= 1024)
   Desktop'da ilova to'liq ekranni egallaydi: chapda doimiy sidebar,
   o'ngda keng kontent. Bo'limlarga xos qoidalar fayl oxirida.
   ========================================================= */

:root {
  --bx-sidebar: 272px;
  --bx-content-max: 1240px;
}

html, body {
  overflow-x: hidden;
}

/* ---------- Dashboard qobig'i ---------- */
.bx-content {
  max-width: 28rem; /* mobil: avvalgi max-w-md */
}

@media (min-width: 640px) {
  .bx-content {
    max-width: 40rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .bx-content {
    max-width: 52rem;
  }
  .bx-bottomnav {
    max-width: 32rem !important;
  }
}

@media (min-width: 1024px) {
  .bx-mobile-only {
    display: none !important;
  }
  .bx-bottomnav {
    display: none !important;
  }
  .bx-drawer {
    transform: none !important;
    width: var(--bx-sidebar) !important;
    max-width: none !important;
    box-shadow: none !important;
  }
  .bx-main {
    margin-left: var(--bx-sidebar);
    min-height: 100vh;
  }
  .bx-main > header {
    padding-left: 2rem;
    padding-right: 2rem;
    min-height: 4rem;
  }
  .bx-content {
    max-width: var(--bx-content-max);
    padding: 2rem 2rem 3rem;
  }
}

@media (min-width: 1536px) {
  :root {
    --bx-sidebar: 296px;
    --bx-content-max: 1400px;
  }
  .bx-content {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }
}

/* ---------- Kirish (auth) ---------- */
.bx-auth-hero {
  display: none;
}
.bx-auth-card {
  max-width: 28rem;
}
.bx-accent {
  color: #6ee7b7;
}
html.light .bx-accent {
  color: #059669;
}

/* Mobil: karta to'liq ekran, chekkalarsiz */
@media (max-width: 479px) {
  .bx-auth-panel {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .bx-auth-card {
    max-width: none;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex;
    min-height: 100svh;
  }
  .bx-auth-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(1.25rem + env(safe-area-inset-top)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
  /* iOS zoom'ning oldini olish: input shrifti >= 16px */
  .bx-auth input {
    font-size: 16px !important;
  }
}

@media (min-width: 640px) {
  .bx-auth-form {
    padding: 2rem 2.25rem !important;
  }
  .bx-auth input {
    height: 3rem !important;
  }
}

@media (min-width: 1024px) {
  .bx-auth-hero {
    position: relative;
    display: flex;
    flex: 1 1 52%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 3.5rem;
    color: #ecfdf5;
    background:
      radial-gradient(circle at 20% 15%, rgba(52, 211, 153, 0.28), transparent 55%),
      radial-gradient(circle at 85% 85%, rgba(45, 212, 191, 0.22), transparent 50%),
      linear-gradient(160deg, #064e3b 0%, #052e22 55%, #03140f 100%);
  }
  .bx-auth-hero-inner {
    position: relative;
    width: 100%;
    max-width: 30rem;
  }
  .bx-auth-hero-logo {
    width: 52px;
    height: 52px;
  }
  .bx-auth-hero .bx-accent {
    color: #6ee7b7;
  }
  .bx-auth-hero-title {
    margin-top: 2.5rem;
    font-size: 2.35rem;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  .bx-auth-hero-list {
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.85rem;
  }
  .bx-auth-hero-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    font-weight: 500;
  }
  .bx-auth-hero-list svg {
    color: #6ee7b7;
  }
  .bx-auth-panel {
    flex: 1 1 48%;
    padding: 3rem !important;
  }
  .bx-auth-card {
    max-width: 30rem;
  }
}

/* ---------- Onboarding / success ---------- */
.bx-flow-card {
  max-width: 28rem;
}
@media (min-width: 768px) {
  .bx-flow {
    padding: 2rem !important;
  }
  .bx-flow-card {
    max-width: 44rem;
    min-height: calc(100svh - 4rem) !important;
  }
}
@media (min-width: 1280px) {
  .bx-flow-card {
    max-width: 56rem;
  }
}

/* =========================================================
   Bo'limlarga xos qoidalar (agentlar qo'shgan)
   ========================================================= */

/* ---------- auth ---------- */
/* =========================================================
   Kirish / ro'yxatdan o'tish, onboarding, success ekranlari
   (agent 2) — responsive.css ga birlashtiriladi
   ========================================================= */

/* ---------- Umumiy: fokus ko'rinishi (WCAG 2.4.11) ---------- */
.bx-auth-input:focus,
.bx-auth-input:focus-visible {
  border-color: rgba(52, 211, 153, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.bx-auth-tab:focus-visible,
.bx-auth-eye:focus-visible,
.bx-auth-link:focus-visible,
.bx-auth-submit:focus-visible,
.bx-flow-option:focus-visible,
.bx-flow-back:focus-visible,
#onboarding-next:focus-visible,
.bx-success-cta:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}

/* Parol ko'rsatish tugmasi: kamida 24x24 (WCAG 2.5.8) */
.bx-auth-eye {
  right: 0.375rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 0.5rem;
  transition: color 0.15s, background-color 0.15s;
}
.bx-auth-eye:hover {
  color: #6ee7b7;
}
.bx-auth-link {
  padding: 0.125rem 0.25rem;
  border-radius: 0.375rem;
  text-underline-offset: 3px;
}
.bx-auth-link:hover {
  text-decoration: underline;
}
.bx-auth-tab:not(.is-active):hover {
  color: #d1fae5;
}
.bx-auth-submit:active:not(:disabled) {
  transform: translateY(1px);
}
.bx-auth-error svg {
  margin-top: 0.125rem;
}

/* Number input strelkalarini yashirish (toza ko'rinish) */
.bx-auth input[type='number']::-webkit-outer-spin-button,
.bx-auth input[type='number']::-webkit-inner-spin-button,
.bx-flow input[type='number']::-webkit-outer-spin-button,
.bx-flow input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bx-auth input[type='number'],
.bx-flow input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Brauzer autofill fonini mavzuga moslash */
.bx-auth-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0c1f19 inset;
  caret-color: #fff;
}

/* ---------- Onboarding ---------- */
.bx-flow-num .bx-flow-unit {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 600;
  color: #6b8a81;
  pointer-events: none;
}
.bx-flow-num input {
  padding-left: 3.5rem !important;
  padding-right: 3.5rem !important;
}
.bx-flow-option {
  min-height: 3.5rem;
  gap: 0.75rem;
}
.bx-flow-option.is-active {
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35) inset;
}
.bx-flow-nav > button {
  min-height: 2.75rem;
}

@media (max-width: 479px) {
  /* Telefonda: karta chekkaga to'liq, tugmalar keng */
  .bx-flow {
    padding: 0 !important;
  }
  .bx-flow-card.bx-flow-panel {
    max-width: none !important;
    min-height: 100svh !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: calc(1rem + env(safe-area-inset-top)) 1.125rem calc(1rem + env(safe-area-inset-bottom)) !important;
  }
  .bx-flow-body {
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
  }
  .bx-flow-nav {
    margin-top: auto !important;
    padding-top: 2rem;
  }
  .bx-flow-nav #onboarding-next {
    flex: 1 1 auto;
    justify-content: center;
  }
  /* Success: ichki panel to'liq ekran */
  .bx-flow-card:not(.bx-flow-panel) {
    max-width: none !important;
    min-height: 100svh !important;
  }
  .bx-success-panel {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1.125rem calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
  .bx-success-panel h1 {
    font-size: 1.95rem;
    line-height: 2.3rem;
  }
  .bx-success-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .bx-flow-card.bx-flow-panel {
    padding: 2rem 2.5rem !important;
  }
  .bx-flow-body {
    max-width: 40rem !important;
  }
  .bx-flow-options-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-flow-options-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bx-flow-options-3 .bx-flow-option {
    min-height: 4rem;
  }
  .bx-success-panel {
    padding: 2.5rem 2.5rem 2.25rem !important;
  }
  .bx-success-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .bx-flow-body {
    max-width: 44rem !important;
  }
  .bx-success-panel {
    padding: 3rem 3.5rem !important;
  }
}

/* Success: qiymat (masalan, "Поддержание веса") 2 qatorgacha o'raladi */
.bx-success-value {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.6rem;
}

/* =========================================================
   LIGHT rejim (html.light) — standart rejim
   ========================================================= */
html.light .bx-auth .bx-auth-card,
html.light .bx-flow .bx-flow-panel {
  background-color: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.04);
}
html.light .bx-auth,
html.light .bx-flow {
  background-color: #f3f6f4;
}
html.light .bx-auth .bx-auth-panel {
  background:
    radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
    #f3f6f4;
}

/* Inputlar: karta oq bo'lgani uchun yengil kulrang-yashil fon + aniq chegara */
html.light .bx-auth .bx-auth-input,
html.light .bx-flow .bx-auth-input {
  background-color: #f4f7f6;
  border-color: #d5e0dc;
  color: #10201b;
}
html.light .bx-auth .bx-auth-input:hover,
html.light .bx-flow .bx-auth-input:hover {
  border-color: #b9cbc4;
}
html.light .bx-auth .bx-auth-input:focus,
html.light .bx-flow .bx-auth-input:focus {
  background-color: #ffffff;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
html.light .bx-auth .bx-auth-input::placeholder,
html.light .bx-flow .bx-auth-input::placeholder {
  color: #8a9c96;
  opacity: 1;
}
html.light .bx-auth-input:-webkit-autofill {
  -webkit-text-fill-color: #10201b;
  -webkit-box-shadow: 0 0 0 1000px #eef7f3 inset;
  caret-color: #10201b;
}

/* Matnlar: kontrast >= 4.5:1 */
html.light .bx-auth .bx-auth-label {
  color: #33473f;
}
html.light .bx-auth .bx-auth-hint {
  color: #5d716a;
}
html.light .bx-auth .bx-auth-icon,
html.light .bx-auth .bx-auth-eye {
  color: #6a7f78;
}
html.light .bx-auth .bx-auth-eye:hover {
  color: #047857;
  background-color: rgba(16, 185, 129, 0.08);
}
html.light .bx-auth .bx-auth-sub,
html.light .bx-flow .bx-auth-sub {
  color: #536861;
}
html.light .bx-auth .bx-auth-switch {
  color: #5d716a;
}
html.light .bx-auth .bx-auth-link {
  color: #047857;
}

/* Tab almashtirgich */
html.light .bx-auth .bx-auth-tabs {
  background-color: #eef3f1;
  box-shadow: inset 0 0 0 1px #dfe8e4;
}
html.light .bx-auth .bx-auth-tab {
  color: #5d716a;
}
html.light .bx-auth .bx-auth-tab:not(.is-active):hover {
  color: #1f2f2a;
}
html.light .bx-auth .bx-auth-tab.is-active {
  background-color: #ffffff;
  color: #047857;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(16, 185, 129, 0.25);
}

/* Xato bloki */
html.light .bx-auth .bx-auth-error {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Fokus halqasi light rejimda to'qroq */
html.light .bx-auth-tab:focus-visible,
html.light .bx-auth-eye:focus-visible,
html.light .bx-auth-link:focus-visible,
html.light .bx-auth-submit:focus-visible,
html.light .bx-flow-option:focus-visible,
html.light .bx-flow-back:focus-visible,
html.light #onboarding-next:focus-visible,
html.light .bx-success-cta:focus-visible {
  outline-color: #047857;
}

/* Onboarding light */
html.light .bx-flow .bx-flow-option {
  background-color: #f7faf9;
  border-color: #dce6e2;
  color: #1a2a25;
}
html.light .bx-flow .bx-flow-option:hover {
  border-color: #b9cbc4;
}
html.light .bx-flow .bx-flow-option.is-active {
  background-color: #ecfdf5;
  border-color: #10b981;
  box-shadow: 0 0 0 1px #10b981 inset;
}
html.light .bx-flow .bx-flow-unit {
  color: #6a7f78;
}
html.light .bx-flow .bx-flow-kicker {
  color: #5d716a;
}
html.light .bx-flow .bx-flow-back {
  color: #3f544d;
  border-color: #d5e0dc;
}
html.light .bx-flow .bx-flow-back:hover {
  background-color: #f1f5f3;
}
html.light .bx-flow .bx-flow-track {
  background-color: #e3ebe7;
}

/* Success light */
html.light .bx-flow .bx-success-stat,
html.light .bx-flow .bx-success-macros > div {
  background-color: #f7faf9;
  border-color: #e1e9e5;
}

/* Telefonda light: kartaning o'zi butun ekran — fon oq */
@media (max-width: 479px) {
  html.light .bx-auth,
  html.light .bx-auth .bx-auth-panel,
  html.light .bx-flow {
    background: #ffffff;
  }
  html.light .bx-auth .bx-auth-card,
  html.light .bx-flow .bx-flow-panel {
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-auth *,
  .bx-flow * {
    transition: none !important;
  }
}

/* ---------- overview ---------- */
/* ===== Overview (Bugun) va Meals (Kundalik) — responsive layout ===== */

/* --- Umumiy: kichik tugmalar uchun tap target >= 40px --- */
.bx-ov-tap {
  min-height: 2.5rem;
  min-width: 2.5rem;
}

/* --- Kichik telefonlar (<=400px) --- */
@media (max-width: 400px) {
  .bx-ov-head h1,
  .bx-diary-head h1 {
    font-size: 1.625rem;
  }
  .bx-ov-hero {
    padding: 1rem;
  }
  .bx-ov-run {
    flex-wrap: wrap;
  }
  .bx-ov-run > span:last-child {
    margin-left: auto;
  }
}

/* ================= OVERVIEW ================= */

/* Planshet: 2 ustunli grid */
@media (min-width: 768px) {
  .bx-ov {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head  head"
      "hero  hero"
      "stats stats"
      "run   cam"
      "fast  fast"
      "meals meals";
    gap: 1rem;
  }
  .bx-ov-head  { grid-area: head; }
  .bx-ov-hero  { grid-area: hero; }
  .bx-ov-stats { grid-area: stats; }
  .bx-ov-run   { grid-area: run; }
  .bx-ov-cam   { grid-area: cam; }
  .bx-ov-fast  { grid-area: fast; }
  .bx-ov-meals { grid-area: meals; }

  .bx-ov-fast-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Desktop: hero + yon kartalar, statistika va ro'za rejasi yonma-yon */
@media (min-width: 1024px) {
  .bx-ov {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas:
      "head  head"
      "hero  cam"
      "hero  run"
      "stats fast"
      "meals fast";
    gap: 1.25rem;
    align-items: stretch;
  }
  .bx-ov-head {
    padding-bottom: 0.25rem;
  }
  .bx-ov-hero {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .bx-ov-hero > div:first-child p.text-4xl {
    font-size: 3rem;
    line-height: 1;
  }
  .bx-ov-hero [role="progressbar"] {
    width: 10rem;
    height: 10rem;
    padding: 0.625rem;
  }
  .bx-ov-hero [role="progressbar"] .text-2xl {
    font-size: 1.875rem;
  }
  .bx-ov-cam {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .bx-ov-run {
    align-self: stretch;
  }
  .bx-ov-stats > * {
    height: 100%;
  }
  .bx-ov-fast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-ov-meals {
    align-self: end;
  }
}

/* Katta ekran: ro'za rejasi 4 ustun emas, lekin kengroq */
@media (min-width: 1280px) {
  .bx-ov {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 1.5rem;
  }
  .bx-ov-hero {
    padding: 2rem;
  }
}

/* ================= MEALS (Kundalik) ================= */

/* Planshet: ovqat turlari 2 ustunli */
@media (min-width: 768px) {
  .bx-diary-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
  }
  .bx-diary-foot {
    grid-column: 1 / -1;
  }
}

/* Desktop: chap — ovqatlar ro'yxati, o'ng — hafta + xulosa (sticky) */
@media (min-width: 1024px) {
  .bx-diary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
      "head head"
      "list side";
    align-items: start;
    gap: 1.25rem 1.5rem;
  }
  .bx-diary-head { grid-area: head; }
  .bx-diary-list { grid-area: list; }
  .bx-diary-side {
    grid-area: side;
    position: sticky;
    top: 1.5rem;
  }
  /* Kenglik yetarli bo'lmaganda ro'yxat bitta ustun */
  .bx-diary-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .bx-diary-sum [role="progressbar"] {
    width: 6rem;
    height: 6rem;
  }
}

@media (min-width: 1280px) {
  .bx-diary {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
  .bx-diary-list {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* ---------- scanner ---------- */
/* =========================================================
   Food scanner overlay (js/sections/scanner.js)
   Phones: full-screen sheet. >=640px: centered dialog.
   >=768px: image | nutrition details side by side.
   Layout only - colors come from existing classes (light mode via theme-light.css).
   ========================================================= */

/* ---------- Phones (< 640px): full-screen sheet ---------- */
@media (max-width: 639.98px) {
    .bx-scanner-overlay.bx-scanner-overlay {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }
    .bx-scanner-dialog.bx-scanner-dialog {
        margin: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border-width: 0;
        overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bx-scanner-header.bx-scanner-header {
        padding-top: max(1rem, env(safe-area-inset-top, 0px));
    }
    .bx-scanner-macros.bx-scanner-macros {
        gap: 0.5rem;
    }
}

/* ---------- Tap targets (all sizes, >= 40px) ---------- */
.bx-scanner-modes.bx-scanner-modes > button {
    min-height: 40px;
}
.bx-scanner-meals.bx-scanner-meals > button {
    min-height: 40px;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.bx-scanner-remove.bx-scanner-remove {
    width: 2.5rem;
    height: 2.5rem;
}
.bx-scanner-dialog.bx-scanner-dialog button,
.bx-scanner-dialog.bx-scanner-dialog input {
    touch-action: manipulation;
}
.bx-scanner-dialog.bx-scanner-dialog input:not(.sr-only) {
    min-height: 44px;
}

/* ---------- >= 640px: centered dialog ---------- */
@media (min-width: 640px) {
    .bx-scanner-dialog.bx-scanner-dialog {
        max-width: 44rem;
        max-height: calc(100vh - 2.5rem);
        max-height: calc(100dvh - 2.5rem);
    }
    .bx-scanner-meals.bx-scanner-meals > button {
        min-height: 36px;
    }
}

/* ---------- >= 768px: image | nutrition side by side ---------- */
@media (min-width: 768px) {
    .bx-scanner-dialog.bx-scanner-dialog {
        max-width: 60rem;
    }
    .bx-scanner-grid.bx-scanner-grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
        align-items: start;
    }
    .bx-scanner-controls.bx-scanner-controls {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    .bx-scanner-modes.bx-scanner-modes {
        flex: 0 0 18rem;
    }
    .bx-scanner-meals.bx-scanner-meals {
        justify-content: flex-end;
    }
    /* Manual entry: keep the form a comfortable width instead of stretching */
    .bx-scanner-manual.bx-scanner-manual > div {
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- >= 1024px: desktop ---------- */
@media (min-width: 1024px) {
    .bx-scanner-overlay.bx-scanner-overlay {
        padding: 2rem;
    }
    .bx-scanner-dialog.bx-scanner-dialog {
        max-width: 68rem;
        max-height: calc(100vh - 4rem);
        max-height: calc(100dvh - 4rem);
    }
    .bx-scanner-grid.bx-scanner-grid {
        gap: 1.5rem;
    }
}

@media (min-width: 1536px) {
    .bx-scanner-dialog.bx-scanner-dialog {
        max-width: 74rem;
    }
}

/* Short landscape screens (phones rotated): never clip, scroll inside */
@media (max-height: 520px) and (min-width: 640px) {
    .bx-scanner-overlay.bx-scanner-overlay {
        padding: 0.5rem;
    }
    .bx-scanner-dialog.bx-scanner-dialog {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
}

/* ---------- goals ---------- */
/* =========================================================
   Goals section — responsive layout
   Scope: .bx-content[data-section="goals"] + .bx-goals-* hooks
   1 col phone · 2 col >=768 · 3 col >=1280
   ========================================================= */

.bx-content[data-section="goals"] .bx-goals {
    max-width: 100%;
    min-width: 0;
}

/* ---- Card grid ---- */
.bx-content[data-section="goals"] .bx-goals-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.bx-content[data-section="goals"] .bx-goals-card {
    min-width: 0;
}
.bx-content[data-section="goals"] .bx-goals-side {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
}

/* ---- Weight stats: never overflow on 360px ---- */
.bx-content[data-section="goals"] .bx-goals-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}
.bx-content[data-section="goals"] .bx-goals-stats > div {
    min-width: 0;
}
.bx-content[data-section="goals"] .bx-goals-stats > div + div {
    padding-left: 0.75rem;
}
.bx-content[data-section="goals"] .bx-goals-stats p:last-child {
    white-space: nowrap;
}

/* ---- Macro split pills ---- */
.bx-content[data-section="goals"] .bx-goals-split {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

/* ---- Tap targets >= 40px ---- */
.bx-content[data-section="goals"] .bx-goals-stepbtn {
    width: 2.5rem;
    height: 2.5rem;
}
.bx-content[data-section="goals"] .bx-goals-actions button,
.bx-content[data-section="goals"] .bx-goals-foot button {
    min-height: 2.75rem;
    justify-content: center;
}
.bx-content[data-section="goals"] .bx-goals-form input,
.bx-content[data-section="goals"] .bx-goals-calbox input {
    min-height: 2.75rem;
}

/* ---- Phones ---- */
@media (max-width: 639px) {
    .bx-content[data-section="goals"] .bx-goals-actions {
        flex-wrap: wrap;
    }
    .bx-content[data-section="goals"] .bx-goals-actions button {
        flex: 1 1 auto;
    }
    .bx-content[data-section="goals"] .bx-goals-foot button {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .bx-content[data-section="goals"] .bx-goals-card {
        padding: 1rem;
    }
    .bx-content[data-section="goals"] .bx-goals-stats p:last-child {
        font-size: 1.25rem;
    }
    .bx-content[data-section="goals"] .bx-goals-calbox {
        padding: 1rem;
    }
}

/* ---- >=640: edit form 2 columns ---- */
@media (min-width: 640px) {
    .bx-content[data-section="goals"] .bx-goals-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bx-content[data-section="goals"] .bx-goals-stats {
        gap: 1.5rem;
    }
    .bx-content[data-section="goals"] .bx-goals-stats > div + div {
        padding-left: 1.5rem;
    }
}

/* ---- >=768: header row, 2-col grid ---- */
@media (min-width: 768px) {
    .bx-content[data-section="goals"] .bx-goals-head {
        flex-direction: row;
        align-items: flex-end;
    }
    .bx-content[data-section="goals"] .bx-goals-actions {
        flex-shrink: 0;
    }
    .bx-content[data-section="goals"] .bx-goals-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* steps + water: full row, side by side */
    .bx-content[data-section="goals"] .bx-goals-side {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .bx-content[data-section="goals"] .bx-goals-foot {
        flex-direction: row;
        text-align: left;
    }
    .bx-content[data-section="goals"] .bx-goals-foot button {
        flex-shrink: 0;
    }
    /* weight card form stacks inside the half-width card */
    .bx-content[data-section="goals"] .bx-goals-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- >=1024: cards stretch to equal height ---- */
@media (min-width: 1024px) {
    .bx-content[data-section="goals"] .bx-goals-grid {
        align-items: stretch;
    }
    .bx-content[data-section="goals"] .bx-goals-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- >=1280: 3 columns (weight | macros | steps+water stacked) ---- */
@media (min-width: 1280px) {
    .bx-content[data-section="goals"] .bx-goals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .bx-content[data-section="goals"] .bx-goals-side {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }
    .bx-content[data-section="goals"] .bx-goals-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- steps ---------- */
/* =========================================================
   Qadamlar (steps) bo'limi: mobil -> desktop moslashuv
   ========================================================= */
.bx-content[data-section="steps"] .bx-steps {
  max-width: none;
}

/* Mobil: tor ekranlarda ixchamroq kartalar, tap target >= 40px */
.bx-content[data-section="steps"] .bx-steps-remove {
  width: 2.5rem;
  height: 2.5rem;
}
@media (max-width: 479px) {
  .bx-content[data-section="steps"] .bx-steps .rounded-2xl.p-6 {
    padding: 1.125rem;
  }
  .bx-content[data-section="steps"] .bx-steps-log > div {
    gap: 0.75rem;
  }
}

.bx-steps-ring .bx-ring svg {
  width: 100%;
  height: 100%;
}

/* Planshet+: halqa chapda, statistika va qo'shish paneli o'ngda */
@media (min-width: 768px) {
  .bx-content[data-section="steps"] .bx-steps-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 2rem;
  }
  .bx-content[data-section="steps"] .bx-steps-panel > :first-child {
    margin-top: 0;
  }
}

@media (min-width: 1024px) {
  .bx-content[data-section="steps"] .bx-steps-hero {
    column-gap: 3rem;
    padding: 2rem 2.5rem;
  }
  .bx-content[data-section="steps"] .bx-steps-ring .bx-ring {
    width: 230px !important;
    height: 230px !important;
  }
  .bx-content[data-section="steps"] .bx-steps-ring .bx-ring .text-4xl {
    font-size: 2.75rem;
    line-height: 1;
  }
  .bx-content[data-section="steps"] .bx-steps-chart {
    height: 14rem;
    gap: 0.625rem;
  }
  .bx-content[data-section="steps"] .bx-steps-chart span {
    font-size: 11px;
  }
  /* Faoliyat jurnali: 2 ustunli panjara */
  .bx-content[data-section="steps"] .bx-steps-log {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-content[data-section="steps"] .bx-steps-log > :only-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1536px) {
  .bx-content[data-section="steps"] .bx-steps-log {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- gyms ---------- */
/* =========================================================
   Sport zallar (gyms) bo'limi: kartalar panjarasi
   (xarita yo'q — faqat ro'yxat, shuning uchun grid)
   ========================================================= */
.bx-content[data-section="gyms"] .bx-gyms-inner {
  max-width: none;
}

/* Mobil: ixcham padding, filtr tugmalari >= 40px */
.bx-content[data-section="gyms"] .bx-gyms-filters button {
  min-height: 2.5rem;
}
@media (max-width: 479px) {
  .bx-content[data-section="gyms"] .bx-gyms-inner {
    padding: 1.25rem 0.875rem;
  }
  .bx-content[data-section="gyms"] .bx-gyms-card .p-5 {
    padding: 1rem;
  }
  .bx-content[data-section="gyms"] .bx-gyms-media {
    height: 11.5rem;
  }
}

/* Kartalar panjarasi */
.bx-content[data-section="gyms"] .bx-gyms-grid {
  align-items: start;
}
@media (min-width: 640px) {
  .bx-content[data-section="gyms"] .bx-gyms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-content[data-section="gyms"] .bx-gyms-media {
    height: 11rem;
  }
}

@media (min-width: 1024px) {
  .bx-content[data-section="gyms"] .bx-gyms-inner {
    padding: 2.25rem 2rem;
  }
  /* Qidiruv va filtrlar bir qatorda */
  .bx-content[data-section="gyms"] .bx-gyms-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .bx-content[data-section="gyms"] .bx-gyms-search {
    flex: 1 1 auto;
    margin-bottom: 0;
  }
  .bx-content[data-section="gyms"] .bx-gyms-filters {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-bottom: 0;
  }
  .bx-content[data-section="gyms"] .bx-gyms-grid {
    gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .bx-content[data-section="gyms"] .bx-gyms-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .bx-content[data-section="gyms"] .bx-gyms-inner {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .bx-content[data-section="gyms"] .bx-gyms-media {
    height: 12rem;
  }
}

/* ---------- recipes ---------- */
/* =========================================================
   Retseptlar bo'limi (js/sections/recipes.js) — responsive
   Mobil: 1 ustun, chiplar gorizontal scroll, detal = full-screen sheet
   Desktop: 2/3/4 ustunli grid, chiplar wrap, detal = markaziy dialog
   ========================================================= */

/* ---------- Umumiy ---------- */
.bx-content[data-section="recipes"] .bx-recipes {
  min-width: 0;
}
.bx-recipes-inner {
  min-width: 0;
}

/* Tap target >= 40px */
.bx-recipes-chip {
  min-height: 2.5rem;
  flex-shrink: 0;
}
.bx-recipes-tabs > button {
  min-height: 2.5rem;
}

/* Kategoriyalar: mobil — gorizontal scroll, chekkagacha */
.bx-recipes-chips {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.bx-recipes-chips > * {
  scroll-snap-align: start;
}

/* Grid kartalari */
.bx-recipes-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.bx-recipes-grid > article {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- Telefon (< 640px) ---------- */
@media (max-width: 639px) {
  .bx-content[data-section="recipes"] .bx-recipes-inner {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    padding-top: 1.25rem;
  }
  .bx-content[data-section="recipes"] .bx-recipes h1 {
    font-size: 1.625rem;
    line-height: 2rem;
  }
  /* iOS zoom'ning oldini olish */
  .bx-recipes-filters input,
  .bx-recipes-filters select {
    font-size: 16px;
  }
  /* Chiplar ekran chetigacha scroll bo'ladi */
  .bx-recipes-chips {
    margin-left: -0.875rem;
    margin-right: -0.875rem;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
    scroll-padding-left: 0.875rem;
  }

  /* Detal: full-screen sheet */
  .bx-recipes-backdrop {
    padding: 0 !important;
    align-items: stretch !important;
  }
  .bx-recipes-dialog {
    max-width: none !important;
    max-height: none !important;
    height: 100vh;
    height: 100dvh;
    border-radius: 0 !important;
    overscroll-behavior: contain;
    animation: bx-recipes-sheet-in 0.24s ease-out;
  }
  .bx-recipes-media {
    aspect-ratio: 4 / 3 !important;
  }
  .bx-recipes-close {
    position: fixed !important;
    top: calc(0.75rem + env(safe-area-inset-top)) !important;
    right: 0.75rem !important;
    z-index: 2;
    width: 2.75rem !important;
    height: 2.75rem !important;
  }
  .bx-recipes-body {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
  }
}

@keyframes bx-recipes-sheet-in {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- >= 640px ---------- */
@media (min-width: 640px) {
  .bx-recipes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-recipes-filters {
    flex-direction: row !important;
    align-items: center;
  }
  .bx-recipes-filters > .relative:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }
  .bx-recipes-cal {
    flex: 0 0 15rem;
  }
  .bx-recipes-macros {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .bx-recipes-titlerow {
    flex-direction: row !important;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* ---------- >= 768px ---------- */
@media (min-width: 768px) {
  .bx-recipes-head {
    flex-direction: row !important;
    align-items: flex-end;
    justify-content: space-between;
  }
  .bx-recipes-tabs {
    width: auto !important;
    flex-shrink: 0;
  }
  .bx-recipes-tabs > button {
    flex: 0 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---------- Desktop (>= 1024px) ---------- */
@media (min-width: 1024px) {
  .bx-content[data-section="recipes"] .bx-recipes-inner {
    max-width: none;
    padding: 2rem 2rem 2.5rem;
  }
  .bx-recipes-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem !important;
  }
  /* Chiplar: wrap qatori, scroll yo'q */
  .bx-recipes-chips {
    flex-wrap: wrap;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .bx-recipes-cal {
    flex-basis: 17rem;
  }

  /* Detal: markaziy dialog — rasm chapda, matn o'ngda */
  .bx-recipes-backdrop {
    padding: 2rem !important;
  }
  .bx-recipes-dialog {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    max-width: 72rem !important;
    height: min(88vh, 52rem);
    max-height: 88vh !important;
    overflow: hidden !important;
    border-radius: 1.5rem !important;
    animation: bx-recipes-pop-in 0.2s ease-out;
  }
  .bx-recipes-media {
    aspect-ratio: auto !important;
    height: 100%;
    min-height: 0;
  }
  .bx-recipes-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2rem 2.25rem 2.25rem !important;
  }
  .bx-recipes-titlerow h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
}

@keyframes bx-recipes-pop-in {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Keng desktop: ingredientlar va qadamlar yonma-yon */
@media (min-width: 1280px) {
  .bx-recipes-cols {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem !important;
  }
}

/* ---------- >= 1440px ---------- */
@media (min-width: 1440px) {
  .bx-recipes-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-recipes-dialog {
    animation: none !important;
  }
}

/* Fokus ko'rinishi (WCAG 2.4.11) — rang yo'q, faqat outline */
.bx-recipes button:focus-visible,
.bx-recipes article:focus-visible,
.bx-recipes-dialog button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ---------- aitrainer ---------- */
/* =========================================================
   AI Trainer + AI Chat (js/sections/aitrainer.js)
   Mobil: bitta ustun, yozish paneli pastki nav ustida yopishqoq.
   >= 1280px: chap - reja + chat, o'ng - preferences paneli (sticky).
   ========================================================= */

.bx-content[data-section="aitrainer"] .bx-ait-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.bx-content[data-section="aitrainer"] .bx-ait-side {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  min-width: 0;
}
.bx-content[data-section="aitrainer"] .bx-ait-plan,
.bx-content[data-section="aitrainer"] .bx-ait-chat {
  min-width: 0;
}

/* Tanlovlar: 40px+ tegish maydoni */
.bx-content[data-section="aitrainer"] select {
  min-height: 2.75rem;
}

/* ---------- Chat ---------- */
.bx-content[data-section="aitrainer"] .bx-ait-empty {
  max-width: 26rem;
}
.bx-content[data-section="aitrainer"] .bx-ait-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.bx-content[data-section="aitrainer"] .bx-ait-thread {
  overscroll-behavior: contain;
  max-height: min(520px, 58vh);
}

/* Yozish paneli: pastki nav (~76px) va safe-area ustida yopishib turadi */
.bx-content[data-section="aitrainer"] .bx-ait-composer {
  position: sticky;
  bottom: calc(5.25rem + env(safe-area-inset-bottom));
  z-index: 5;
  align-items: stretch;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  padding: 0.25rem;
  border-radius: 1rem;
}
.bx-content[data-section="aitrainer"] .bx-ait-composer input {
  min-height: 2.75rem;
  font-size: 16px; /* iOS zoom'ni oldini olish */
}
.bx-content[data-section="aitrainer"] .bx-ait-send {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

@media (max-width: 419px) {
  .bx-content[data-section="aitrainer"] .bx-ait-send {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-send-label {
    display: none;
  }
}

/* ---------- >= 640px ---------- */
@media (min-width: 640px) {
  .bx-content[data-section="aitrainer"] .bx-ait-card {
    padding: 1.75rem;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-prefs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-content[data-section="aitrainer"] .bx-ait-span {
    grid-column: span 2 / span 2;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-generate {
    width: auto;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-bubble {
    max-width: 75%;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-composer input {
    font-size: 0.875rem;
  }
}

/* ---------- >= 768px ---------- */
@media (min-width: 768px) {
  .bx-content[data-section="aitrainer"] .bx-ait-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- >= 1024px (pastki nav yo'q) ---------- */
@media (min-width: 1024px) {
  .bx-content[data-section="aitrainer"] .bx-ait-composer {
    bottom: 1rem;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-thread {
    min-height: 360px;
    max-height: clamp(360px, 62vh, 680px);
  }
  .bx-content[data-section="aitrainer"] .bx-ait-thread > * {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- >= 1280px: ustun + yon panel ---------- */
@media (min-width: 1280px) {
  .bx-content[data-section="aitrainer"] .bx-ait-layout {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas:
      "plan side"
      "chat side";
    align-items: start;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-side {
    grid-area: side;
    position: sticky;
    top: 5rem;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-plan {
    grid-area: plan;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-chat {
    grid-area: chat;
  }
  /* Tor yon panelda tanlovlar bitta ustunda */
  .bx-content[data-section="aitrainer"] .bx-ait-prefs {
    grid-template-columns: minmax(0, 1fr);
  }
  .bx-content[data-section="aitrainer"] .bx-ait-span {
    grid-column: auto;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-side .bx-ait-card {
    padding: 1.5rem;
  }
  .bx-content[data-section="aitrainer"] .bx-ait-generate {
    width: 100%;
  }
}

@media (min-width: 1536px) {
  .bx-content[data-section="aitrainer"] .bx-ait-layout {
    grid-template-columns: minmax(0, 1fr) 24rem;
  }
}

/* Light mode: composer foni karta foniga mos (theme-light .bg-[#111a1d] ham shuni beradi) */
html.light .bx-content[data-section="aitrainer"] .bx-ait-composer {
  background-color: rgb(242 245 246);
}

/* ---------- insights ---------- */
/* ===== Insights section — responsive layout (agent 8) =====
   Scoped to .bx-content[data-section="insights"] + bx-insights-* hooks.
   No new colors -> no html.light overrides needed. */

.bx-content[data-section="insights"] .bx-insights {
  width: 100%;
  min-width: 0;
}

/* Header: stacked on phone, title + date chip side by side from 768px */
.bx-content[data-section="insights"] .bx-insights-head > :last-child {
  align-self: flex-start;
}

/* KPI tiles: 2 columns on phone, 4 columns >= 1024px */
.bx-content[data-section="insights"] .bx-insights-kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.bx-content[data-section="insights"] .bx-insights-kpi {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.bx-content[data-section="insights"] .bx-insights-kpi > p:nth-of-type(1) {
  margin-top: 1rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
}
.bx-content[data-section="insights"] .bx-insights-kpi > p:nth-of-type(2) {
  font-size: 1.5rem;
  line-height: 1.9rem;
  overflow-wrap: anywhere;
}
.bx-content[data-section="insights"] .bx-insights-kpi > p:nth-of-type(2) > span {
  display: inline-block;
  margin-left: 0.25rem;
}
.bx-content[data-section="insights"] .bx-insights-kpi > div:nth-of-type(2) {
  align-items: flex-start;
  line-height: 1rem;
}
.bx-content[data-section="insights"] .bx-insights-kpi > div:nth-of-type(2) > span:first-child {
  flex-shrink: 0;
  margin-top: 0.3rem;
}

/* Tabs: comfortable tap targets */
.bx-content[data-section="insights"] .bx-insights-tabs button {
  min-height: 44px;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

/* Panels & chart grids */
.bx-content[data-section="insights"] .bx-insights-grid {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
.bx-content[data-section="insights"] .bx-insights-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

/* SVG charts: always scale to container width, keep aspect ratio */
.bx-content[data-section="insights"] .bx-insights-chart {
  height: auto;
  min-width: 0;
}
.bx-content[data-section="insights"] .bx-insights-chart > svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
}
/* Slightly larger axis labels on narrow screens (SVG is scaled down) */
.bx-content[data-section="insights"] .bx-insights-chart svg text {
  font-size: 13px;
}

/* AI insight cards: single column on phone */
.bx-content[data-section="insights"] .bx-insights-cards {
  grid-template-columns: minmax(0, 1fr);
}
.bx-content[data-section="insights"] .bx-insights-cards article {
  min-width: 0;
  padding: 1rem;
}

@media (min-width: 640px) {
  .bx-content[data-section="insights"] .bx-insights-kpi,
  .bx-content[data-section="insights"] .bx-insights-panel,
  .bx-content[data-section="insights"] .bx-insights-cards article {
    padding: 1.25rem;
  }
  .bx-content[data-section="insights"] .bx-insights-kpis {
    gap: 1rem;
  }
  .bx-content[data-section="insights"] .bx-insights-kpi > p:nth-of-type(2) {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
  .bx-content[data-section="insights"] .bx-insights-chart svg text {
    font-size: 12px;
  }
}

@media (min-width: 768px) {
  .bx-content[data-section="insights"] .bx-insights-head {
    flex-direction: row;
    align-items: flex-end;
  }
  .bx-content[data-section="insights"] .bx-insights-head > :last-child {
    align-self: auto;
    flex-shrink: 0;
  }
  .bx-content[data-section="insights"] .bx-insights-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-content[data-section="insights"] .bx-insights-cards article {
    height: 100%;
  }
}

@media (min-width: 1024px) {
  /* Use the full desktop content width provided by the shell */
  .bx-content[data-section="insights"] .bx-insights {
    max-width: none;
  }
  .bx-content[data-section="insights"] .bx-insights-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .bx-content[data-section="insights"] .bx-insights-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .bx-content[data-section="insights"] .bx-insights-panel {
    padding: 1.5rem;
  }
  /* Push chart footers (peak cards / tip) to panel bottom for even rows */
  .bx-content[data-section="insights"] .bx-insights-chart {
    margin-top: auto;
    padding-top: 1.5rem;
  }
  .bx-content[data-section="insights"] .bx-insights-chart svg text {
    font-size: 11px;
  }
}

@media (min-width: 1536px) {
  .bx-content[data-section="insights"] .bx-insights-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- settings ---------- */
/* =========================================================
   Sozlamalar (data-section="settings")
   Mobil: bitta ustun. >=1024: chapda profil (sticky), o'ngda guruhlar.
   >=1280: guruhlar 2 ustunli gridda.
   ========================================================= */

/* Tap target >= 40px */
.bx-content[data-section="settings"] .bx-settings-close {
  width: 2.5rem;
  height: 2.5rem;
}
.bx-content[data-section="settings"] .bx-settings-toggle::after {
  content: "";
  position: absolute;
  inset: -0.375rem -0.25rem;
}
.bx-content[data-section="settings"] .bx-settings-main button:not(.bx-settings-toggle),
.bx-content[data-section="settings"] .bx-settings-aside a {
  min-height: 2.5rem;
}
.bx-content[data-section="settings"] .bx-settings-modal-actions button {
  min-height: 2.75rem;
}
/* iOS zoom'ning oldini olish */
@media (max-width: 639px) {
  .bx-content[data-section="settings"] input {
    font-size: 16px;
  }
}

/* Juda tor ekran: statistikalar 2x2 */
@media (max-width: 379px) {
  .bx-content[data-section="settings"] .bx-settings-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Modal: telefonda pastdan chiquvchi to'liq kenglikdagi sheet */
@media (max-width: 639px) {
  .bx-settings-modal {
    padding: 0 !important;
  }
  .bx-settings-sheet {
    max-width: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0 !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    max-height: 90svh;
    overflow-y: auto;
  }
}
@media (min-width: 640px) {
  .bx-settings-sheet {
    max-width: 28rem;
    max-height: calc(100svh - 3rem);
    overflow-y: auto;
  }
}
/* ---------- Desktop layout ---------- */
@media (min-width: 1024px) {
  .bx-content[data-section="settings"] .bx-settings-grid {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }
  .bx-content[data-section="settings"] .bx-settings-aside {
    position: sticky;
    top: 5rem;
  }
  .bx-content[data-section="settings"] .bx-settings-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-content[data-section="settings"] .bx-settings-save {
    bottom: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .bx-content[data-section="settings"] .bx-settings-grid {
    grid-template-columns: minmax(19rem, 24rem) minmax(0, 1fr);
    gap: 1.5rem;
  }
  .bx-content[data-section="settings"] .bx-settings-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
  }
  .bx-content[data-section="settings"] .bx-settings-edit {
    grid-column: 2;
    grid-row: span 2;
  }
  .bx-content[data-section="settings"] .bx-settings-look,
  .bx-content[data-section="settings"] .bx-settings-goals {
    grid-column: 1;
  }
  .bx-content[data-section="settings"] .bx-settings-wide {
    grid-column: 1 / -1;
  }
  .bx-content[data-section="settings"] .bx-settings-save {
    justify-self: end;
    min-width: 16rem;
  }
}

/* ---------- results ---------- */
/* =========================================================
   Natijalar (data-section="results")
   Mobil: bitta ustun. Planshet: 4 ta stat. Desktop: sarlavha +
   range bir qatorda, grafiklar yonma-yon, kunlar 2 ustunda.
   ========================================================= */

.bx-content[data-section="results"] {
  overflow-x: clip;
}

/* Tap target >= 40px */
.bx-content[data-section="results"] .bx-results-range button {
  min-height: 2.5rem;
}
.bx-content[data-section="results"] .bx-results-day > button {
  min-height: 3.5rem;
}

/* Yugurish qatori tor ekranda o'raladi, sahifa toshib ketmaydi */
.bx-content[data-section="results"] .bx-results-runrow {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
.bx-content[data-section="results"] .bx-results-bars > div {
  min-width: 0;
}

@media (max-width: 379px) {
  .bx-content[data-section="results"] .bx-results-stats {
    gap: 0.5rem;
  }
  .bx-content[data-section="results"] .bx-results-stat {
    padding: 0.875rem;
  }
}

@media (min-width: 768px) {
  .bx-content[data-section="results"] .bx-results-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bx-content[data-section="results"] .bx-results-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .bx-content[data-section="results"] .bx-results-range {
    flex: 0 0 18rem;
  }
}

@media (min-width: 1024px) {
  .bx-content[data-section="results"] .bx-results-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .bx-content[data-section="results"] .bx-results-bars {
    height: 10rem;
  }
  .bx-content[data-section="results"] .bx-results-stat {
    padding: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .bx-content[data-section="results"] .bx-results-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
  }
  /* Ochilgan kun to'liq kenglikda — tafsilotlar o'qilishi oson */
  .bx-content[data-section="results"] .bx-results-day-open {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1536px) {
  .bx-content[data-section="results"] .bx-results-days {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- run ---------- */
/* =========================================================
   Yugurish (run) bo'limi — responsive layout
   Mobil: marshrut xaritasi tepada to'liq kenglikda, statistika pastda,
          faol yugurishda tugmalar pastki nav ustida "sticky".
   Desktop (>= 1024): chapda katta xarita, o'ngda jonli panel,
          pastda maqsad / qo'lda kiritish / maslahatlar va tarix grid.
   ========================================================= */

/* ---------- Umumiy (mobil birinchi) ---------- */
.bx-content[data-section="run"] .bx-run-grid > * {
  min-width: 0;
}

/* Marshrut: mobilda faqat nuqtalar bo'lsa ko'rinadi */
.bx-content[data-section="run"] .bx-run-map {
  display: none;
  margin-bottom: 1rem;
}
.bx-content[data-section="run"] .bx-run-map.has-route {
  display: block;
}
.bx-content[data-section="run"] .bx-run-map svg:not(.lucide) {
  display: block;
  width: 100%;
  max-height: 240px;
}
.bx-content[data-section="run"] .bx-run-map-empty {
  min-height: 100%;
}

/* Katta taymer 360px ekranda sig'ishi uchun */
.bx-content[data-section="run"] #run-time {
  font-size: clamp(2.75rem, 15vw, 3.75rem);
  line-height: 1;
}

.bx-content[data-section="run"] .bx-run-stat {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Tap target'lar >= 44px */
.bx-content[data-section="run"] .bx-run-manual button {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

/* Faol yugurish: boshqaruv tugmalari pastki nav ustida doim ko'rinadi */
@media (max-width: 1023.98px) {
  .bx-content[data-section="run"] .bx-run-controls.is-active {
    position: sticky;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px) + 0.5rem);
    z-index: 5;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding: 0.5rem;
    border-radius: 1.25rem;
    background: #0e1913;
    box-shadow: 0 -12px 24px -12px rgba(0, 0, 0, 0.55);
  }
  html.light .bx-content[data-section="run"] .bx-run-controls.is-active {
    background: rgb(243 247 245);
    box-shadow: 0 -12px 24px -14px rgba(15, 23, 42, 0.25);
  }
}

/* ---------- >= 640px: tarix 2 ustunda ---------- */
@media (min-width: 640px) {
  .bx-content[data-section="run"] .bx-run-history {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-content[data-section="run"] .bx-run-history > p,
  .bx-content[data-section="run"] .bx-run-history > .py-4 {
    grid-column: 1 / -1;
  }
}

/* ---------- >= 1024px: to'liq ekran desktop ---------- */
@media (min-width: 1024px) {
  .bx-content[data-section="run"] .bx-run-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
  }
  .bx-content[data-section="run"] .bx-run-head { grid-column: 1 / -1; order: 0; }
  .bx-content[data-section="run"] .bx-run-live { grid-column: 1 / -1; order: 1; }
  .bx-content[data-section="run"] .bx-run-goal { order: 2; }
  .bx-content[data-section="run"] .bx-run-manual { order: 3; }
  .bx-content[data-section="run"] .bx-run-tips { order: 4; }
  .bx-content[data-section="run"] .bx-run-hist { grid-column: 1 / -1; order: 5; }
  /* Qo'lda kiritish kartasi yo'q bo'lsa (faol yugurish) maslahatlar kengayadi */
  .bx-content[data-section="run"] .bx-run-grid:not(:has(.bx-run-manual)) .bx-run-tips {
    grid-column: span 2;
  }

  /* Chapda xarita, o'ngda jonli panel */
  .bx-content[data-section="run"] .bx-run-live {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .bx-content[data-section="run"] .bx-run-map,
  .bx-content[data-section="run"] .bx-run-map.has-route {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    min-height: 380px;
  }
  .bx-content[data-section="run"] .bx-run-map svg:not(.lucide) {
    height: 100%;
    max-height: none;
  }
  .bx-content[data-section="run"] .bx-run-map-empty {
    width: 100%;
    min-height: 360px;
  }
  .bx-content[data-section="run"] .bx-run-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
  }
  .bx-content[data-section="run"] #run-time {
    font-size: 4.5rem;
  }

  .bx-content[data-section="run"] .bx-run-history {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
  }
}

@media (min-width: 1536px) {
  .bx-content[data-section="run"] .bx-run-live {
    grid-template-columns: minmax(0, 1.75fr) minmax(360px, 1fr);
  }
  .bx-content[data-section="run"] .bx-run-map,
  .bx-content[data-section="run"] .bx-run-map.has-route {
    min-height: 440px;
  }
}

/* =========================================================
   Mavzu almashtirgich (quyosh | oy)
   ========================================================= */
.bx-theme {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 4.5rem;
  height: 2.25rem;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bx-theme:hover {
  border-color: rgba(52, 211, 153, 0.4);
}
.bx-theme-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1), background-color 0.2s ease;
}
.bx-theme.is-dark .bx-theme-thumb {
  transform: translateX(100%);
  background: #27272a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.bx-theme-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #71717a;
  transition: color 0.2s ease;
}
.bx-theme-opt.is-on {
  color: #34d399;
}
html.light .bx-theme {
  border-color: rgba(15, 23, 42, 0.1);
  background: #eef2ef;
}
html.light .bx-theme-opt {
  color: #94a3b8;
}
html.light .bx-theme-opt.is-on {
  color: #d97706;
}
.bx-theme:focus-visible {
  outline: 2px solid #34d399;
  outline-offset: 2px;
}

/* =========================================================
   Tepadagi panel: faqat mobil/planshet, desktop'da yo'q
   ========================================================= */
.bx-topbar {
  background: rgba(9, 9, 11, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
}
html.light .bx-topbar {
  background: rgba(245, 246, 244, 0.85);
}
@media (min-width: 1024px) {
  .bx-topbar {
    display: none !important;
  }
}

/* =========================================================
   Bosh sahifa (bx-home)
   ========================================================= */
.bx-home {
  --hc-card: #0f1913;
  --hc-border: rgba(255, 255, 255, 0.08);
  --hc-text: #f4f4f5;
  --hc-muted: #a1a1aa;
  --hc-faint: #8b8b94;
  --hc-soft: rgba(255, 255, 255, 0.04);
  --hc-track: rgba(255, 255, 255, 0.08);
  --hc-accent: #34d399;
  --hc-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  color: var(--hc-text);
}
html.light .bx-home {
  --hc-card: #ffffff;
  --hc-border: rgba(15, 23, 42, 0.07);
  --hc-text: #0f172a;
  --hc-muted: #475569;
  --hc-faint: #64748b;
  --hc-soft: #f3f6f4;
  --hc-track: #e5ece8;
  --hc-accent: #059669;
  --hc-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px -12px rgba(15, 23, 42, 0.1);
}

/* Ranglar to'plami (ikonka va progress uchun) */
.bx-home .bx-tone-emerald { --tone: #34d399; --tone-soft: rgba(52, 211, 153, 0.12); }
.bx-home .bx-tone-sky { --tone: #38bdf8; --tone-soft: rgba(56, 189, 248, 0.12); }
.bx-home .bx-tone-blue { --tone: #60a5fa; --tone-soft: rgba(96, 165, 250, 0.12); }
.bx-home .bx-tone-orange { --tone: #fb923c; --tone-soft: rgba(251, 146, 60, 0.12); }
.bx-home .bx-tone-amber { --tone: #fbbf24; --tone-soft: rgba(251, 191, 36, 0.14); }
html.light .bx-home .bx-tone-emerald { --tone: #059669; --tone-soft: #e3f6ee; }
html.light .bx-home .bx-tone-sky { --tone: #0284c7; --tone-soft: #e0f2fe; }
html.light .bx-home .bx-tone-blue { --tone: #2563eb; --tone-soft: #e5edff; }
html.light .bx-home .bx-tone-orange { --tone: #ea580c; --tone-soft: #ffedd5; }
html.light .bx-home .bx-tone-amber { --tone: #b45309; --tone-soft: #fef3c7; }

.bx-home button {
  cursor: pointer;
}

/* Sarlavha */
.bx-home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.bx-home-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--hc-soft);
  border: 1px solid var(--hc-border);
  color: var(--hc-muted);
  font-size: 0.75rem;
  font-weight: 500;
}
.bx-home-title {
  margin: 0.75rem 0 0;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--hc-text);
  overflow-wrap: anywhere;
}
.bx-home-title span {
  color: var(--hc-accent);
}
.bx-home-sub {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--hc-muted);
}
.bx-home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: #10b981;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 10px 24px -8px rgba(16, 185, 129, 0.6);
  transition: background-color 0.2s ease;
}
.bx-home-cta span {
  display: none;
}
.bx-home-cta:hover {
  background: #059669;
}

/* Grid */
.bx-home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.bx-home-card {
  min-width: 0;
  border-radius: 1.5rem;
  border: 1px solid var(--hc-border);
  background: var(--hc-card);
  box-shadow: var(--hc-shadow);
  padding: 1.25rem;
  color: var(--hc-text);
  text-align: left;
}
.bx-home-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.bx-home-h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--hc-text);
}
.bx-home-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hc-accent);
}
.bx-home-muted {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--hc-faint);
}
.bx-home-chip {
  flex-shrink: 0;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--hc-soft);
  color: var(--hc-muted);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.bx-home-bar {
  display: block;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--hc-track);
  overflow: hidden;
}
.bx-home-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tone, #10b981);
  transition: width 0.5s ease;
}

/* Kaloriya kartasi */
.bx-home-hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
}
.bx-home-ring {
  position: relative;
  width: 11rem;
  height: 11rem;
  flex-shrink: 0;
}
.bx-home-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.bx-home-ring circle {
  fill: none;
  stroke-width: 12;
}
.bx-home-ring-track {
  stroke: var(--hc-track);
}
.bx-home-ring-bar {
  stroke: #10b981;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
.bx-home-ring-bar.is-over {
  stroke: #f59e0b;
}
.bx-home-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bx-home-ring-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--hc-text);
}
.bx-home-ring-label {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--hc-faint);
}
.bx-home-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
}
.bx-home-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 1rem;
  background: var(--hc-soft);
}
.bx-home-kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  background: var(--tone-soft);
  color: var(--tone);
}
.bx-home-kpi-label {
  display: block;
  font-size: 0.72rem;
  color: var(--hc-faint);
}
.bx-home-kpi-value {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--hc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-home-kpi-value small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--hc-faint);
}
.bx-home-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hc-border);
}
.bx-home-macro-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  color: var(--hc-faint);
}
.bx-home-macro-row strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--hc-text);
}
.bx-home-macro-row small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--hc-faint);
}
.bx-home-macro .bx-home-bar > span.bg-emerald-400 { background: #10b981; }
.bx-home-macro .bx-home-bar > span.bg-violet-400 { background: #8b5cf6; }
.bx-home-macro .bx-home-bar > span.bg-amber-400 { background: #f59e0b; }

/* Skaner CTA (ikkala mavzuda ham to'q yashil) */
.bx-home-scan {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem;
  border-radius: 1.5rem;
  color: #ecfdf5;
  background:
    radial-gradient(circle at 100% 0%, rgba(110, 231, 183, 0.35), transparent 55%),
    linear-gradient(150deg, #059669 0%, #047857 55%, #065f46 100%);
  box-shadow: 0 18px 40px -18px rgba(5, 150, 105, 0.65);
}
.bx-home-scan-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.bx-home-scan-kicker {
  margin: 1rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a7f3d0;
}
.bx-home-scan-title {
  margin: 0.3rem 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.bx-home-scan-text {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #d1fae5;
}
.bx-home-scan-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.bx-home-btn-light,
.bx-home-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.bx-home-btn-light {
  background: #fff;
  color: #065f46;
}
.bx-home-btn-light:hover {
  background: #ecfdf5;
}
.bx-home-btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}
.bx-home-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Ko'rsatkichlar: qadamlar / suv / yugurish */
.bx-home-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
}
.bx-home-metrics > :last-child {
  grid-column: 1 / -1;
}
.bx-home-metric {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  transition: border-color 0.2s ease;
}
button.bx-home-metric:hover {
  border-color: var(--tone);
}
.bx-home-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bx-home-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.85rem;
  background: var(--tone-soft);
  color: var(--tone);
}
.bx-home-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tone);
}
.bx-home-metric-label {
  margin-top: 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--hc-muted);
}
.bx-home-metric-value {
  margin: 0.15rem 0 0.65rem;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--hc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-home-unit {
  margin-left: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--hc-faint);
}
.bx-home-metric-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.75rem;
  color: var(--hc-faint);
}
.bx-home-play {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.7rem;
  background: #10b981;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.bx-home-water-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
}
.bx-home-water-add {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--tone-soft);
  color: var(--tone);
  font-size: 0.8rem;
  font-weight: 600;
}
.bx-home-water-undo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--hc-soft);
  color: var(--hc-faint);
}
.bx-home-water-add:hover,
.bx-home-water-undo:hover {
  filter: brightness(0.96);
}

/* Ro'za rejasi */
.bx-home-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.8rem;
  border: 1px solid var(--hc-border);
  background: var(--hc-soft);
  color: var(--hc-text);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.bx-home-toggle.is-on {
  border-color: transparent;
  background: #10b981;
  color: #fff;
}
.bx-home-progress-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}
.bx-home-progress-line .bx-home-bar {
  flex: 1;
}
.bx-home-progress-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hc-muted);
}
.bx-home-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.bx-home-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.65rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid var(--hc-border);
  background: transparent;
  text-align: left;
  color: var(--hc-text);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.bx-home-step:hover {
  border-color: rgba(16, 185, 129, 0.4);
}
.bx-home-step-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  background: var(--hc-soft);
  color: var(--hc-faint);
}
.bx-home-step.is-done {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
.bx-home-step.is-done .bx-home-step-check {
  background: #10b981;
  color: #fff;
}
.bx-home-step-title {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-home-step.is-done .bx-home-step-title {
  text-decoration: line-through;
  opacity: 0.7;
}
.bx-home-step-sub {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--hc-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ovqatlarim */
.bx-home-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  background: var(--hc-soft);
  color: var(--hc-muted);
  transition: color 0.2s ease;
}
.bx-home-icon-btn:hover {
  color: var(--hc-accent);
}
.bx-home-meal-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bx-home-meal {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.25rem;
  border-bottom: 1px solid var(--hc-border);
}
.bx-home-meal:last-child {
  border-bottom: 0;
}
.bx-home-meal-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  object-fit: cover;
  background: var(--tone-soft, var(--hc-soft));
  color: var(--tone, var(--hc-accent));
}
.bx-home-meal-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-home-meal-time {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.72rem;
  color: var(--hc-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bx-home-meal-kcal {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
}
.bx-home-meal-kcal small {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--hc-faint);
}
.bx-home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  border: 1px dashed var(--hc-border);
  text-align: center;
}
html.light .bx-home-empty {
  border-color: #d5dfd9;
}
.bx-home-empty p {
  margin: 0;
  max-width: 22rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--hc-muted);
}
.bx-home-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.8rem;
  background: #10b981;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Kichik telefonlar */
@media (max-width: 380px) {
  .bx-home-title { font-size: 1.5rem; }
  .bx-home-card { padding: 1rem; }
  .bx-home-kpis { grid-template-columns: minmax(0, 1fr); }
  .bx-home-kpi { flex-direction: row; align-items: center; }
  .bx-home-macros { gap: 0.6rem; }
}

@media (min-width: 640px) {
  .bx-home-cta {
    width: auto;
    padding: 0 1.15rem;
  }
  .bx-home-cta span {
    display: inline;
  }
  .bx-home-title { font-size: 2rem; }
  .bx-home-hero-body {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }
  .bx-home-kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  .bx-home-kpi {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .bx-home-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bx-home-metrics > :last-child {
    grid-column: auto;
  }
  .bx-home-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .bx-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bx-home-hero,
  .bx-home-scan,
  .bx-home-metrics {
    grid-column: 1 / -1;
  }
  .bx-home-fast .bx-home-steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1024px) {
  .bx-home { gap: 1.5rem; }
  .bx-home-title { font-size: 2.25rem; }
  .bx-home-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
  }
  .bx-home-hero { grid-column: span 8; padding: 1.5rem; }
  .bx-home-scan { grid-column: span 4; padding: 1.5rem; }
  .bx-home-scan-actions { margin-top: auto; padding-top: 1.25rem; grid-template-columns: minmax(0, 1fr); }
  .bx-home-metrics { grid-column: 1 / -1; gap: 1.25rem; }
  .bx-home-metric { padding: 1.25rem; }
  .bx-home-fast { grid-column: span 7; padding: 1.5rem; }
  .bx-home-meals { grid-column: span 5; padding: 1.5rem; }
  .bx-home-fast .bx-home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-home-ring { width: 12.5rem; height: 12.5rem; }
  .bx-home-ring-value { font-size: 2.5rem; }
  .bx-home-hero-body { gap: 2.5rem; }
  .bx-home-kpis { flex: 1; }
  .bx-home-metric-value { font-size: 1.6rem; }
}

@media (min-width: 1280px) {
  .bx-home-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bx-home-kpi {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bx-theme-thumb,
  .bx-home-ring-bar,
  .bx-home-bar > span {
    transition: none;
  }
}