/* ══════════════════════════════════════════════════════════════
   BazaFit — Landing: interactive app showcases
   Two live mini-app demos (Конструктор, База знаний) embedded in
   the existing phone frame. Built on BazaFit design tokens.
   ══════════════════════════════════════════════════════════════ */

/* ─── Showcase layout ─────────────────────────────────────── */
.appshow__grid {
  display: grid; grid-template-columns: 1fr 0.92fr; gap: 64px; align-items: center;
}
.appshow--rev .appshow__grid { grid-template-columns: 0.92fr 1fr; }
.appshow--rev .appshow__device { order: -1; }

.appshow__copy .eyebrow { margin-bottom: 18px; }
.appshow__copy h2 {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -0.022em;
  line-height: 1.08; margin: 0; text-wrap: balance;
}
.appshow__copy > p {
  font-size: 17.5px; line-height: 1.62; color: var(--text-secondary);
  margin: 20px 0 0; max-width: 500px; text-wrap: pretty;
}

.appshow__try {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px;
  font-size: 13px; font-weight: 600; color: var(--accent-blue);
  background: rgba(0,180,255,0.08); border: 1px solid rgba(0,180,255,0.22);
  padding: 8px 14px; border-radius: var(--r-pill);
}
.appshow__try svg { width: 15px; height: 15px; }

/* feature mini-list */
.appshow__list { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.appshow__list li { display: flex; align-items: flex-start; gap: 15px; }
.appshow__li-ic {
  width: 42px; height: 42px; border-radius: var(--r-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.appshow__li-ic svg { width: 21px; height: 21px; }
.appshow__li-tx b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.appshow__li-tx span { display: block; font-size: 14px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }

.appshow__device { display: flex; justify-content: center; }

/* ─── In-phone app scaffold ───────────────────────────────── */
.bf-app {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding-top: 44px;            /* clear the status bar */
  overflow: hidden;
}
.bf-screen {
  flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
  animation: bf-screen-in 0.32s var(--ease-out);
}
@keyframes bf-screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bf-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 12px; min-height: 38px;
}
.bf-head__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; flex: 1; text-align: center; }
.bf-iconbtn {
  width: 34px; height: 34px; border-radius: var(--r-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: none; color: #fff; cursor: pointer;
  transition: transform .15s var(--ease-out), background .2s;
}
.bf-iconbtn:active { transform: scale(0.92); background: rgba(255,255,255,0.12); }
.bf-iconbtn svg { width: 18px; height: 18px; }
.bf-head__spacer { width: 34px; flex-shrink: 0; }
.bf-textbtn {
  background: none; border: none; color: var(--accent-blue); font-family: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 6px 4px; flex-shrink: 0;
}

.bf-body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 14px 90px; -webkit-overflow-scrolling: touch; }
.bf-body::-webkit-scrollbar { width: 0; }

/* ─── Search ──────────────────────────────────────────────── */
.bf-search {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 13px;
  background: var(--surface-2); border: 1px solid var(--border-solid); border-radius: var(--r-lg);
  margin-bottom: 14px;
}
.bf-search svg { width: 17px; height: 17px; color: var(--text-muted); flex-shrink: 0; }
.bf-search input {
  flex: 1; background: none; border: none; outline: none; color: #fff;
  font-family: inherit; font-size: 14px; min-width: 0;
}
.bf-search input::placeholder { color: var(--text-faint); }

/* ─── Muscle filter chips ─────────────────────────────────── */
.bf-chips {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin: 0 -14px 6px;
  padding-left: 14px; padding-right: 14px; scrollbar-width: none; cursor: grab;
}
.bf-chips.dragging { cursor: grabbing; }
.bf-chips.dragging .bf-chip { pointer-events: none; }
.bf-chips::-webkit-scrollbar { display: none; }
.bf-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  font-size: 13px; font-weight: 600; color: var(--text-body); white-space: nowrap;
  transition: transform .14s var(--ease-out), background .2s, border-color .2s, color .2s;
}
.bf-chip:active { transform: scale(0.94); }
.bf-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bf-chip.active { color: #fff; border-color: transparent; background: rgba(48,167,247,0.18); box-shadow: inset 0 0 0 1px rgba(48,167,247,0.5); }

/* ─── Exercise list rows ──────────────────────────────────── */
.bf-exrow {
  display: flex; align-items: center; gap: 12px; padding: 9px;
  border-radius: var(--r-2xl); cursor: pointer; margin-bottom: 8px;
  background: var(--surface-1); border: 1px solid var(--border-card);
  transition: transform .14s var(--ease-out), background .2s, border-color .2s;
}
.bf-exrow:active { transform: scale(0.985); background: #1a1a20; }
.bf-exrow.selected { border-color: rgba(48,167,247,0.55); background: rgba(48,167,247,0.07); }

.bf-thumb {
  position: relative; width: 54px; height: 54px; border-radius: var(--r-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bf-thumb svg.dumbbell { width: 26px; height: 26px; }
.bf-thumb__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-thumb .play {
  position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.bf-thumb .play svg { width: 9px; height: 9px; color: #fff; margin-left: 1px; }

.bf-exrow__info { flex: 1; min-width: 0; }
.bf-exrow__name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.bf-exrow__muscle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bf-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.bf-check svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .15s; }
.bf-exrow.selected .bf-check { background: var(--accent-blue); border-color: var(--accent-blue); box-shadow: 0 0 10px var(--glow-blue); }
.bf-exrow.selected .bf-check svg { opacity: 1; }

.bf-empty { text-align: center; color: var(--text-muted); padding: 36px 16px; font-size: 13.5px; }
.bf-section-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); margin: 4px 2px 10px; }

/* ─── Floating confirm button ─────────────────────────────── */
.bf-confirm {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 6;
  border: none; border-radius: var(--r-xl); padding: 15px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #36a3d1 0%, #0099ff 100%);
  box-shadow: var(--shadow-cta), inset 0 1px 0 rgba(255,255,255,0.18);
  animation: bf-confirm-in 0.3s var(--ease-out);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bf-confirm svg { width: 18px; height: 18px; }
.bf-confirm:active { transform: scale(0.98); filter: brightness(1.05); }
@keyframes bf-confirm-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ─── Routine editor ──────────────────────────────────────── */
.bf-rname {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-solid);
  border-radius: var(--r-lg); padding: 12px 13px; color: #fff; font-family: inherit;
  font-size: 16px; font-weight: 700; outline: none; margin-bottom: 12px;
}
.bf-rname:focus { border-color: var(--accent-blue); }

.bf-excard {
  background: var(--surface-1); border: 1px solid var(--border-card); border-radius: var(--r-2xl);
  margin-bottom: 10px; overflow: hidden;
}
.bf-excard__top { display: flex; align-items: center; gap: 11px; padding: 10px; cursor: pointer; }
.bf-excard__info { flex: 1; min-width: 0; }
.bf-excard__name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.bf-excard__meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.bf-excard__chev { color: var(--text-muted); transition: transform .28s var(--ease-out); flex-shrink: 0; }
.bf-excard__chev svg { width: 18px; height: 18px; display: block; }
.bf-excard.open .bf-excard__chev { transform: rotate(180deg); }

.bf-acc { max-height: 0; overflow: hidden; transition: max-height .34s cubic-bezier(.4,.2,0,1); }
.bf-excard.open .bf-acc { max-height: 600px; }
.bf-acc__pad { padding: 2px 10px 12px; }

/* sets table */
.bf-sets-head, .bf-set-row {
  display: grid; grid-template-columns: 34px 1fr 1fr 30px; gap: 8px; align-items: center;
}
.bf-sets-head { padding: 4px 0 8px; }
.bf-sets-head div { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--text-faint); text-align: center; }
.bf-set-row { margin-bottom: 7px; }
.bf-set-num {
  width: 28px; height: 28px; border-radius: var(--r-sm); margin: 0 auto;
  background: var(--surface-raised); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #fff;
}
.bf-set-input {
  width: 100%; height: 34px; text-align: center; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-solid); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; outline: none;
}
.bf-set-input:focus { border-color: var(--accent-blue); }
.bf-set-input::placeholder { color: var(--text-faint); font-weight: 400; }
.bf-set-del {
  width: 26px; height: 26px; border-radius: 50%; margin: 0 auto; cursor: pointer;
  background: rgba(255,69,58,0.1); color: var(--danger); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1;
  transition: transform .14s;
}
.bf-set-del:active { transform: scale(0.88); }
.bf-addset {
  width: 100%; margin-top: 4px; padding: 9px; border-radius: var(--r-lg); cursor: pointer;
  background: rgba(48,167,247,0.08); border: 1px dashed rgba(48,167,247,0.4);
  color: var(--accent-blue); font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background .2s;
}
.bf-addset:active { background: rgba(48,167,247,0.16); }

.bf-addmore {
  width: 100%; margin-top: 6px; padding: 13px; border-radius: var(--r-xl); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bf-addmore svg { width: 17px; height: 17px; }
.bf-addmore:active { background: var(--surface-raised); }

.bf-saved {
  text-align: center; padding: 30px 16px; animation: bf-screen-in 0.3s var(--ease-out);
}
.bf-saved__check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  background: rgba(56,239,125,0.12); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(56,239,125,0.25);
}
.bf-saved__check svg { width: 32px; height: 32px; color: var(--accent-green); }
.bf-saved h3 { font-size: 19px; font-weight: 800; margin: 0 0 6px; }
.bf-saved p { font-size: 14px; color: var(--text-muted); margin: 0 0 22px; line-height: 1.5; }

/* ─── Exercise detail modal (video) ───────────────────────── */
.bf-detail {
  position: absolute; inset: 0; z-index: 20; background: var(--bg-app-alt);
  display: flex; flex-direction: column; padding-top: 44px;
  animation: bf-detail-in 0.3s var(--ease-out);
}
@keyframes bf-detail-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bf-detail__body { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 0 16px 16px; scrollbar-width: none; }
.bf-detail__body::-webkit-scrollbar { display: none; }
.bf-video-wrap {
  position: relative; width: 100%; aspect-ratio: 1/1; border-radius: var(--r-4xl); overflow: hidden;
  background: #000; margin-bottom: 16px; border: 1px solid var(--border-card);
}
.bf-video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-video-badge {
  position: absolute; top: 11px; left: 11px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); color: #fff; letter-spacing: 0.3px;
}
.bf-video-badge .rec { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px var(--danger); animation: bf-pulse 1.6s infinite; }
@keyframes bf-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.bf-detail__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.bf-tagpill {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-body);
}
.bf-tagpill.muscle { color: var(--accent-blue); border-color: rgba(48,167,247,0.3); background: rgba(48,167,247,0.08); }
.bf-detail__h { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-faint); margin: 0 0 9px; }
.bf-detail__desc { font-size: 14.5px; line-height: 1.62; color: var(--text-body); margin: 0 0 16px; text-wrap: pretty; }
.bf-detail__steps { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bf-detail__steps li { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; color: var(--text-body); }
.bf-detail__steps .n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; color: var(--accent-blue);
  background: rgba(48,167,247,0.12); border: 1px solid rgba(48,167,247,0.3);
}
.bf-detail__cta {
  position: absolute; left: 16px; right: 16px; bottom: 14px;
  border: none; border-radius: var(--r-xl); padding: 14px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #36a3d1 0%, #0099ff 100%);
  box-shadow: var(--shadow-cta); display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bf-detail__cta svg { width: 18px; height: 18px; }
.bf-detail__cta:active { transform: scale(0.98); }
.bf-detail__cta.added { background: rgba(56,239,125,0.16); color: var(--accent-green); box-shadow: none; }

/* ─── Knowledge base hub ──────────────────────────────────── */
.bf-kb-hub { padding: 2px 2px 0; }
.bf-kb-hub__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent-blue); }
.bf-kb-hub__title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 8px 0 0; }
.bf-kb-hub__sub { font-size: 13px; color: var(--text-muted); margin: 7px 0 16px; }

.bf-kb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-kb-card {
  position: relative; border-radius: var(--r-2xl); overflow: hidden; cursor: pointer;
  aspect-ratio: 3/4; background: var(--surface-1); border: 1px solid var(--border-card);
  transition: transform .16s var(--ease-out);
}
.bf-kb-card:active { transform: scale(0.96); }
.bf-kb-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bf-kb-card img.thumb-top { object-position: top; }
.bf-kb-card__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: linear-gradient(160deg, #1a1a22, #101015);
}
.bf-kb-card__grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 100%); }
.bf-kb-card__play {
  position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
}
.bf-kb-card__play svg { width: 11px; height: 11px; color: #fff; margin-left: 1px; }
.bf-kb-card__info { position: absolute; left: 0; right: 0; bottom: 0; padding: 11px 11px 12px; }
.bf-kb-card__num { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-blue); }
.bf-kb-card__name { font-size: 13px; font-weight: 700; line-height: 1.18; margin-top: 3px; text-wrap: balance; }

/* ─── Stories overlay ─────────────────────────────────────── */
.bf-stories {
  position: absolute; inset: 0; z-index: 30; background: #000;
  display: flex; flex-direction: column; animation: bf-detail-in 0.28s var(--ease-out);
}
.bf-stories__bars { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 4; display: flex; gap: 4px; }
.bf-sbar { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.28); overflow: hidden; }
.bf-sbar__fill { height: 100%; width: 0; background: #fff; border-radius: 2px; }
.bf-sbar.done .bf-sbar__fill { width: 100%; }
.bf-sbar.active .bf-sbar__fill { width: 100%; transition: width 0.2s linear; }
.bf-stories__close {
  position: absolute; top: 54px; right: 12px; z-index: 6; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bf-stories__close svg { width: 15px; height: 15px; }
.bf-stories__label {
  position: absolute; top: 62px; left: 14px; z-index: 5; display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: #fff; max-width: 70%;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.bf-stories__label .ic { font-size: 16px; }
.bf-stories__viewport { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; background: #000; }
.bf-stories__viewport img { width: 100%; height: 100%; object-fit: contain; transition: opacity .2s; }
.bf-stap { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 3; cursor: pointer; }
.bf-stap.l { left: 0; } .bf-stap.r { right: 0; width: 60%; }
.bf-stories__counter {
  position: absolute; bottom: 12px; right: 14px; z-index: 5; font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.8); background: rgba(0,0,0,0.4); backdrop-filter: blur(6px);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.bf-stories__loader {
  position: absolute; z-index: 4; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18); border-top-color: #fff; animation: bf-spin 0.8s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .appshow__grid, .appshow--rev .appshow__grid { grid-template-columns: 1fr; gap: 48px; justify-items: center; }
  .appshow--rev .appshow__device { order: 0; }
  .appshow__copy { text-align: center; }
  .appshow__copy > p { margin-left: auto; margin-right: auto; }
  .appshow__list { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
}