*{box-sizing:border-box}
:root{
  --bg:#0b0d20;--panel:#0f1226;--muted:#aeb2c9;--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);
}

/* СТАТИЧНЫЙ фон — отдельный фиксированный слой */
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;
}

.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:8px;
  background:rgba(17,23,58,.58);
  border:1px solid var(--stroke-trans);
  border-radius:12px;padding:8px 10px;font-weight:700
}
.counter .badge{background:#182055;border:1px solid var(--stroke-trans);padding:2px 8px;border-radius:999px}
.top-actions{margin-left:auto;display:flex;gap:8px}
.btn, .chip{
  background:var(--accent);color:#fff;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:700
}
.btn.secondary{background:#1d244d}
.btn.ghost{background:transparent;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}

/* панели / секции */
.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);
}
.dropzone{
  border:2px dashed var(--stroke-trans);
  border-radius:14px;padding:18px;text-align:center;
  background:rgba(20,23,51,.58);margin:10px 0;
  backdrop-filter: blur(var(--glass-blur));
}
.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:var(--glass);
  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);
}
.grid{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.recipes .title{font-weight:800;font-size:20px;margin:-50px 0 2px;line-height:1.22}
.recipes .meta{color:var(--muted);margin:0 0 4px;line-height:1.22}
.recipes .block{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
}
.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);
  }
}