*{box-sizing:border-box}
:root{
  --bg:#0b0d20;--panel:#0f1226;--muted:#ffffff;--stroke:#262b45;
  --accent:#2b7cff;--ok:#24a06b;--text:#eef0ff;
  /* фон */
  --bg-img: url('bg.webp');
}
html,body{height:100%}

/* базовый цвет и текст */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);             /* только цвет (без картинки) */
  color:var(--text);
}
h2 {
  color:#201614;
}

/* СТАТИЧНЫЙ фон — отдельный фиксированный слой */
body::before{
  content:"";
  position:fixed;
  inset:0;                          /* top:0; right:0; bottom:0; left:0 */
  z-index:-2;                       /* ниже всего контента */
  background: var(--bg) var(--bg-img) center center / cover no-repeat;
  /* фиксируем масштаб и устраняем артефакты */
  transform: translateZ(0);
  will-change: transform;
  image-rendering: auto;
}

/* лёгкая затемняющая вуаль поверх фона для читабельности */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: rgba(0,0,0,.28);
  pointer-events:none;
}

h2#hIngr, 
h2#hIngrD {
  display: flex;
  align-items: center;   /* вертикальный центр для текста и картинки */
  gap: 10px;             /* расстояние между иконкой и текстом */
  line-height: 1.2;
}

h2#hRecs, 
h2#hRecsD {
  display: flex;
  align-items: center;   /* вертикальный центр для текста и картинки */
  gap: 10px;             /* расстояние между иконкой и текстом */
  line-height: 1.2;
}

.wrap{max-width:440px;margin:0 auto;padding:5px}

/* шапка */
.appbar{
  position:sticky;top:0;z-index:2;
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur));
  padding:10px 2px 6px
}
.brand{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.brand .logo{font-size:22px}
.brand h1{margin:0;font-size:18px}

/* верхняя карточка */
.topcard{
  background:var(--glass);
  border:1px solid var(--stroke-trans);
  border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.counter {
  display: flex;
  align-items: center; /* выравниваем всё по центру вертикали */
  gap: 10px;
  background: #0057B7;
  border: 1px solid var(--stroke-trans);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 700;
  line-height: 1; /* убираем влияние межстрочного интервала */
}

/* Иконка */
.counter img {
  width: 32px;
  height: 32px;
  display: block;          /* убирает лишние пробелы */
  object-fit: contain;     /* корректно вписывает SVG */
  vertical-align: middle;  /* подстраховка */
}

/* Текст */
.counter span {
  display: flex;
  align-items: center; /* чтобы текст не смещался, если рядом иконка */
  line-height: 1;
}

/* Кнопка справа */
.counter button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: #FFD700;
  color: #333;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center; /* плюс строго по центру */
  cursor: pointer;
}
.counter .badge{}
.top-actions{margin-left:auto;display:flex;gap:8px}
.btn, .chip{
  background:#0057B7;color:#fff;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:900;}
  .btn1{
  background:#FFD700;color:#fff;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:900;}
.btn.secondary {
  background-image: url('his.svg');
  background-size: contain;   /* изображение вписывается целиком */
  background-repeat: no-repeat; /* не повторяется */
  background-position: center;  /* выравнивается по центру */
  width: 50px;
  height: 50px;
  border: none;
  background-color: transparent; /* если нужно убрать фон кнопки */
  cursor: pointer;
}
.btn.ghost{background-image:url('pr.webp');border:1px solid var(--stroke);color:var(--text)}
.iconbtn{background:rgba(20,23,51,.58);border:1px solid var(--stroke-trans);border-radius:10px;padding:8px;cursor:pointer}
.sub{color:var(--muted);margin:10px 0 16px;text-align:center;margin-top: 30px;font-size:22px}

/* панели / секции */
.panel{
  background:var(--glass);
  border:1px solid var(--stroke-trans);
  border-radius:14px;padding:12px;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  margin-top:100px;
}
.dropzone{
  /* рамка и размеры */
  border: 2px dashed var(--stroke-trans);
  border-radius: 14px !important;
  padding: 25px;
  display: block;
  text-align: center;
  margin: 10px 0;

  /* фон-картинка */
  background-image: url('pho.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* важное для скругления с blur (Safari/iOS) */
  overflow: hidden !important;                   /* подрезать содержимое */
  clip-path: inset(0 round 14px) !important;                 /* ЖЁСТКОЕ обрезание по радиусу */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.dropzone img {
  border-radius: inherit;
  display: block;
}
.dropzone.drag{border-color:#7b8cff}
.dropzone .btn{padding:8px 12px}
.progress{margin:12px 0;padding:10px 12px;background:#12183a;border:1px solid var(--stroke-trans);border-radius:10px}
.hidden{display:none}

h2{font-size:16px;margin:12px 0 8px}
.code{border-radius:10px;padding:10px;white-space:pre-wrap;word-break:break-word}
.section-card{
  background-image:url('pr.webp');
  border:1px solid var(--stroke-trans);
  border-radius:12px;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
@font-face {
  font-family: 'AndyMT';
  src: url('Andy MT Cyrillic Bold_0.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
.section-card1{
  color:#000730;
  font-family: 'AndyMT';
  background-image:url('pr1.webp');
  background-repeat: repeat;
}
.grid{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.recipes .title{font-weight:800;font-size:32px;margin:-50px 0 2px;line-height:1.22}
.recipes .meta{color:#000730;font-size:19px;font-style:italic;margin:0 0 4px;line-height:1.22}
.recipes .block{font-size:22px;margin:4px 0 0;line-height:1.36}
.recipes .list-item{margin:1px 0}

/* селект */
.select{position:relative;display:inline-block}
.select select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:#141733;color:var(--text);border:1px solid var(--stroke-trans);
  padding:8px 36px 8px 10px;border-radius:10px;line-height:1;
  height: 34px;
}
.select:after{
  content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%);
  color:var(--muted); pointer-events:none; font-size:12px
}

/* онбординг/история */
.modal{
  position:fixed;inset:0;background:rgba(5,7,18,.85);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:9999
}
.card{
  width:min(420px,92vw);background:var(--glass);border:1px solid var(--stroke-trans);border-radius:16px;padding:18px;
  backdrop-filter: blur(var(--glass-blur));
}
.card h3{margin:0 0 6px}
.langs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}
.langs .chip{display:flex;align-items:center;justify-content:center}
.splashUA{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.modal.history .panel{
  width:min(720px,92vw);max-height:86vh;overflow:auto;
  background:var(--glass);border:1px solid var(--stroke-trans);border-radius:14px;padding:12px;
  backdrop-filter: blur(var(--glass-blur));
}
.modal.history .head{display:flex;align-items:center;justify-content:space-between;margin:4px 2px 10px}
.modal.history .title{font-size:18px;font-weight:800}
.modal.history .close{background:#141733;border:1px solid var(--stroke-trans);border-radius:10px;color:var(--text);padding:6px 10px;cursor:pointer}
.hist-item{
  display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--stroke-trans);
  border-radius:10px;background:#0c102c;cursor:pointer;margin-bottom:8px
}
.hist-item:hover{background:#10143a}
.hist-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--stroke-trans)}
.hist-meta{display:flex;flex-direction:column}
.hist-title{font-weight:700}
.hist-time{color:var(--muted);font-size:12px}

/* видео */
.videos{display:flex;flex-direction:column;gap:8px;margin:6px 0}
video{width:100%;border-radius:12px;border:1px solid var(--stroke-trans);background:#000}

/* центр.кнопка */
.center{display:flex;justify-content:center;margin:12px 0}

/* экран деталей */
.detail-wrap{max-width:440px;margin:10px auto}
.detail-back{margin:0 0 10px}

/* адаптив */
@media(min-width:768px){
  .wrap{max-width:700px}
  .detail-wrap{max-width:700px}
}

/* фоллбек если нет backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .appbar,.topcard,.panel,.section-card,.dropzone,.card,.modal.history .panel{
    background: var(--glass-strong);
  }
}
/* Модалка без собственного фона — фон и блюр будет в ::before */
/* базовый стиль ДЛЯ ВСЕХ модалок (в т.ч. История) */
.modal{
  position:fixed; inset:0;
  background: rgba(5,7,18,.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
/* Карточка над всем */
.modal .card{
  position: relative;
  z-index: 2;
}
/* онбординг с видеоподложкой */
#onboarding{
  position: fixed;
  inset: 0;
  background: transparent; /* здесь прозрачный фон */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* видеослой */
#onboarding .modal-bg{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* вуаль над видео, но под карточкой; клики пропускает */
#onboarding::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5,7,18,.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none; /* ВАЖНО: не блокировать клики */
}

/* карточка поверх всего */
#onboarding .card{
  position: relative;
  z-index: 2;
}