/* ===== Токены ===== */
:root{
  --brand:        #2680ff;   /* основной синий */
  --brand-press:  #1a6fe0;
  --bg:           #f1f3f5;   /* фон страницы */
  --card:         #ffffff;
  --subbar:       #e9edf3;
  --ink:          #14181f;   /* основной текст */
  --ink-2:        #5f6772;   /* вторичный текст */
  --ink-3:        #9aa1ab;   /* приглушённый / плейсхолдер */
  --chip:         #e7e9ee;   /* серые кнопки/чипы */
  --chip-press:   #dde0e6;
  --green:        #1aa356;
  --line:         #eceef1;
  --radius:       16px;
  --radius-sm:    12px;
  --pad:          14px;      /* горизонтальные поля страницы */
}

/* ===== Сброс ===== */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

/* Отступ при переходе по якорю — чтобы секцию не перекрывала шапка */
[id]{ scroll-margin-top:68px; }

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#d7dbe0;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
}

button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
svg{ display:block; }

/* Контейнер «телефон» (центрируем макет на широких экранах) */
.phone{
  max-width:420px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
}

/* ===== Верхняя панель ===== */
.appbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  height:56px;
  padding:0 var(--pad);
  background:#fff;
}

.appbar__logo{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:17px; }
.appbar__logo-mark{
  width:22px; height:22px; border-radius:6px;
  background:linear-gradient(135deg,#2680ff,#0a5ad6);
  flex:none;
}
.appbar__actions{ display:flex; align-items:center; gap:8px; }

/* Иконочная кнопка */
.iconbtn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--chip);
  color:var(--ink);
}
.iconbtn:active{ background:var(--chip-press); }

/* Кнопки */
.btn{
  border-radius:12px;
  font-weight:600;
  font-size:15px;
  white-space:nowrap;
}
.btn--primary{
  height:40px;
  padding:0 18px;
  background:var(--brand);
  color:#fff;
}
.btn--primary:active{ background:var(--brand-press); }

/* Нейтральная кнопка в шапке; синеет в свёрнутом состоянии */
.btn--soft{
  height:40px;
  padding:0 18px;
  background:var(--chip);
  color:var(--ink);
  transition:background .2s ease, color .2s ease;
}
.btn--soft:active{ background:var(--chip-press); }
body.is-collapsed .btn--soft{ background:var(--brand); color:#fff; }

/* Большая кнопка во всю ширину */
.btn--block{
  display:block;
  width:100%;
  height:56px;
  border-radius:14px;
  font-size:17px;
  font-weight:600;
}

.btn--ghost{
  display:block;
  width:100%;
  height:52px;
  background:var(--chip);
  color:var(--ink);
  border-radius:14px;
  font-weight:500;
}
.btn--ghost:active{ background:var(--chip-press); }

/* ===== Свёрнутая панель приложения =====
   Скрыта вверху страницы, выезжает при скролле (fixed — не влияет на поток) */
.subbar{
  position:fixed;
  top:56px; left:0; right:0;
  z-index:20;
  max-width:420px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:9px var(--pad);
  background:var(--subbar);
  box-shadow:0 6px 16px rgba(20,24,31,.06);
  opacity:0;
  visibility:hidden;
  transform:translateY(-100%);
  transition:transform .28s ease, opacity .2s ease, visibility .28s ease;
}
body.is-collapsed .subbar{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.subbar__back{ color:var(--brand); flex:none; display:grid; place-items:center; }
.subbar .appicon--candy{ width:36px; height:36px; }
.subbar__name{ font-size:17px; font-weight:600; flex:1 1 auto; }
.subbar__download{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
}
.subbar__download:active{ background:var(--brand-press); }

/* ===== Хлебные крошки ===== */
.crumbs{
  display:flex;
  align-items:center;
  gap:6px;
  overflow-x:auto;
  padding:4px 0 6px;
  scrollbar-width:none;
}
.crumbs::-webkit-scrollbar{ display:none; }
.crumbs a{ color:var(--brand); font-weight:600; font-size:16px; white-space:nowrap; }
.crumbs__sep{ color:var(--ink-3); flex:none; }

/* ===== Hero ===== */
.hero{ padding:6px 0 10px; }
.hero__head{ display:flex; align-items:center; gap:16px; }
.hero__id{ min-width:0; }
.hero__title{ font-size:26px; font-weight:700; line-height:1.1; }
.hero__dev{ display:inline-block; margin-top:8px; font-size:16px; font-weight:500; }

.stats{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:22px 2px;
}
.stats__item{ display:flex; flex-direction:column; gap:4px; }
.stats__val{
  display:inline-flex; align-items:center; gap:4px;
  font-size:17px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.stats__val .star{ color:var(--ink); }
.stats__lbl{ font-size:13px; color:var(--ink-3); }

/* ===== Контент ===== */
.page{ padding:var(--pad); display:flex; flex-direction:column; gap:12px; }

.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:16px;
}
.card__title{ font-size:19px; font-weight:700; margin-bottom:12px; }

.muted{ color:var(--ink-2); font-size:14px; margin-bottom:4px; }
.descr{ color:var(--ink); font-size:15px; line-height:1.5; }
.descr--clamp{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:4; overflow:hidden;
}
.descr--clamp.is-expanded{
  -webkit-line-clamp:unset; overflow:visible;
}

/* Ссылки */
.link{ color:var(--brand); font-weight:500; }
.link--more{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:10px; font-size:15px;
}
.link--more .chevron{ transition:transform .2s ease; }
.link--more.is-expanded .chevron{ transform:rotate(180deg); }
.link--big{ display:inline-block; font-size:17px; font-weight:600; }

.chevron{ transition:transform .2s ease; }

/* Что нового */
.whatsnew__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.whatsnew__version{ font-size:16px; font-weight:600; }
.whatsnew__date{ color:var(--ink-3); font-size:14px; }
.whatsnew__note{ color:var(--ink); font-size:14px; margin-top:2px; }

/* Запрашиваемые данные */
.perm{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.perm__icon{ color:var(--ink); flex:none; }
.perm__text{ display:flex; flex-direction:column; }
.perm__name{ font-size:15px; }
.perm__sub{ color:var(--ink-3); font-size:13px; }

/* ===== Иконки приложений (плейсхолдеры) ===== */
.appicon{
  width:44px; height:44px; flex:none;
  border-radius:11px;
  display:grid; place-items:center;
  color:#fff; font-weight:800; font-size:20px;
}
.appicon--candy{ width:38px; height:38px; border-radius:10px;   background-image: url("./logo/icon.png"); background-size: cover}
.appicon--lg{ width:96px; height:96px; border-radius:22px; flex:none; }
.appicon--pyat{ background:#ed1c24; }
.appicon--vkusno{ background:#101820;
  background-image:radial-gradient(circle at 50% 45%,#ff5a00 0 22%,transparent 23%); }
.appicon--magnit{ background:#e11b22; }

/* ===== Чипы ===== */
.chips{
  display:flex;
  gap:10px;
  overflow-x:auto;
  margin-bottom:16px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  flex:none;
  height:40px;
  padding:0 14px;
  border-radius:12px;
  background:var(--chip);
  color:var(--ink);
  font-size:14px; font-weight:500;
  white-space:nowrap;
}
.chip svg{ flex:none; }
.chip--ok{ background:#e7f6ec; color:var(--green); }

/* ===== Скриншоты ===== */
.shots{
  display:flex;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.shots::-webkit-scrollbar{ display:none; }
.shot{
  position:relative;
  width:155px; height:300px;
  flex:none;
  border-radius:16px;
  overflow:hidden;
  scroll-snap-align:start;
}
.shot--1{ background-image: url("./shot/01.png"); background-size: cover}
.shot--2{ background-image: url("./shot/02.png"); background-size: cover }
.shot--3{ background-image: url("./shot/03.png"); background-size: cover }
.shot--4{ background-image: url("./shot/04.png"); background-size: cover }
.shot__cap{
  position:absolute; left:12px; right:12px; top:16px;
  color:#fff; font-weight:800; font-size:20px; line-height:1.1;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.shot__cap--b{ top:auto; bottom:18px; }

/* ===== Возможно, вам понравится ===== */
.suggest__title{ font-size:19px; font-weight:700; padding:4px 0 12px; }
.suggest__row{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.suggest__row::-webkit-scrollbar{ display:none; }

.appcard{ width:148px; flex:none; scroll-snap-align:start; }
.appcard__name{ font-size:14px; font-weight:600; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appcard__cat{ color:var(--ink-3); font-size:13px; margin-top:2px; }
.appcard__meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; font-size:13px; }

.rating{ display:inline-flex; align-items:center; gap:3px; color:var(--ink); font-weight:500; }
.star{ color:#5f6772; }

.badge{
  display:inline-flex; align-items:center; gap:3px;
  color:var(--green); font-weight:600; font-size:12px;
}
.badge svg{ color:var(--green); }

/* ===== Футер ===== */
.footer{
  background:var(--card);
  border-radius:var(--radius);
  padding:4px 16px 20px;
  margin-top:4px;
}

.acc{ border-bottom:1px solid var(--line); }
.acc__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 0;
  font-size:15px; font-weight:600;
  list-style:none;
  cursor:pointer;
}
.acc__head::-webkit-details-marker{ display:none; }
.acc__head .chevron{ color:var(--ink-3); flex:none; }
.acc[open] .acc__head .chevron{ transform:rotate(180deg); }

.acc__list{ padding:0 0 12px; display:flex; flex-direction:column; gap:14px; }
.acc__list a{ color:var(--ink-2); font-size:15px; }
.acc__list a:active{ color:var(--brand); }

/* Минцифры */
.support{ padding:26px 0 22px; }
.support__label{ display:block; color:var(--ink-2); font-size:12px; margin-bottom:4px; }
.support__org{ display:inline-flex; align-items:center; gap:8px; }
.support__crest{
  width:30px; height:34px; flex:none;
  border-radius:3px;
  background:linear-gradient(#c9ccd2,#9aa1ab);
}
.support__name{ font-weight:700; font-size:15px; line-height:1.15; }

/* Социальные сети */
.social{ display:flex; gap:14px; padding:6px 0 22px; }
.social__btn{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:12px;
  background:#1c1c1e;
  color:#fff;
  font-weight:700; font-size:14px;
}
.social__btn:active{ background:#000; }

.footer .btn--ghost + .btn--ghost{ margin-top:12px; }


/* =========================================================
   Страница «Как установить Store» (install.html)
   ========================================================= */
.page--guide{ padding-bottom:84px; }   /* место под нижний тост */

/* ----- Hero ----- */
.ghero{ padding:8px 0 6px; }
.ghero__title{ font-size:30px; font-weight:700; line-height:1.12; }
.ghero__sub{ color:var(--ink-2); font-size:16px; margin:12px 0 18px; }
.ghero .btn--block{ margin-bottom:18px; }
.ghero__illu{
  position:relative;
  height:180px;
  border-radius:18px;
  background:linear-gradient(160deg,#d7e8ff,#eaf2ff 60%,#dfe7f6);
  overflow:hidden;
}
.ghero__badge{
  position:absolute; top:18px; left:18px;
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; padding:6px 12px 6px 8px; border-radius:10px;
  font-weight:700; font-size:13px;
  box-shadow:0 4px 12px rgba(20,24,31,.08);
}
.ghero__illu-t{
  position:absolute; left:18px; bottom:20px;
  font-size:20px; font-weight:700; color:#2a4a78; line-height:1.15;
}

/* ----- Шаги ----- */
.step{ padding:18px 16px; }
.step__head{ display:flex; align-items:flex-start; gap:12px; }
.step__num{
  flex:none;
  width:30px; height:30px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--brand);
  color:#fff; font-weight:700; font-size:15px;
}
.step__title{ font-size:20px; font-weight:700; line-height:1.2; padding-top:2px; }
.step__text{ color:var(--ink); font-size:15px; line-height:1.5; margin-top:12px; }
.step__link{ display:inline-block; margin-top:14px; font-size:15px; }

/* Мокап телефонного экрана */
.mock{
  position:relative;
  height:150px;
  margin-top:16px;
  background:#e9f0ff;
  border:2px solid var(--brand);
  border-bottom:none;
  border-radius:20px 20px 0 0;
  overflow:hidden;
}
.sheet{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff;
  border-radius:16px 16px 0 0;
  padding:16px;
  box-shadow:0 -10px 24px rgba(20,24,31,.10);
}
.sheet .btn--block{ height:46px; font-size:15px; }

.skel{ height:11px; border-radius:6px; background:#e7e9ee; display:block; }
.skel + .skel{ margin-top:9px; }
.skel--60{ width:62%; }
.skel--90{ width:88%; }
.skel-box{ width:74px; height:34px; border-radius:8px; background:#eceef1; }

.sheet__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.txtbtn{ color:var(--brand); font-weight:700; font-size:13px; letter-spacing:.3px; }
.txtbtn--mute{ color:var(--ink-3); }

.dlg__row{ display:flex; align-items:center; gap:10px; }
.dlg__app{ font-weight:700; font-size:16px; }
.dlg__q{ color:var(--ink); font-size:14px; margin-top:10px; }
.dlg__actions{ display:flex; justify-content:flex-end; gap:24px; margin-top:14px; }

.toggle-row{ display:flex; align-items:center; gap:12px; }
.toggle-row__label{ font-size:14px; color:var(--ink); flex:1 1 auto; }
.switch{ flex:none; width:42px; height:24px; border-radius:999px; background:#cfd4db; position:relative; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.switch--on{ background:var(--brand); }
.switch--on::after{ transform:translateX(18px); }

/* ----- Готово ----- */
.done .step__title{ padding-top:4px; }
.done__check{ flex:none; color:var(--brand); display:grid; place-items:center; }
.done__illu{
  height:200px; margin-top:16px;
  border-radius:18px;
  background:radial-gradient(120% 90% at 50% 120%,#2f7bff,#6aa6ff 60%,#bcd6ff);
  display:grid; place-items:center;
}
.done__phone{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; padding:8px 14px; border-radius:12px;
  font-weight:700; font-size:15px;
  box-shadow:0 8px 20px rgba(20,24,31,.18);
}

/* ----- FAQ ----- */
.faq__title{ margin-bottom:6px; }
.faq__item{ border-top:1px solid var(--line); }
.faq__item:first-of-type{ border-top:none; }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px 0;
  font-size:16px; font-weight:500; line-height:1.3;
  list-style:none; cursor:pointer;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q .chevron{ color:var(--ink-3); flex:none; }
.faq__item[open] .faq__q .chevron{ transform:rotate(180deg); }
.faq__a{ color:var(--ink-2); font-size:15px; line-height:1.5; padding:0 0 18px; }
.faq__ask{ margin-top:22px; }
.faq__help{ display:block; text-align:center; margin-top:18px; font-size:16px; font-weight:600; }

/* ----- Инструкции по установке (карусель) ----- */
.instructions{ margin-top:4px; }
.instructions__title{ font-size:24px; font-weight:700; line-height:1.15; padding:8px 0 16px; }
.instructions__row{
  display:flex; gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}
.instructions__row::-webkit-scrollbar{ display:none; }
.guidecard{
  flex:none; width:270px;
  scroll-snap-align:start;
  border-radius:18px;
  padding:20px;
  color:#fff;
  display:flex; flex-direction:column;
  min-height:190px;
}
.guidecard--car{ background:linear-gradient(135deg,#9b30d9,#6a1fb0); }
.guidecard--game{ background:linear-gradient(135deg,#ff4d8d,#c81e6a); }
.guidecard--home{ background:linear-gradient(135deg,#2f7bff,#1b4fd6); }
.guidecard__icon{
  align-self:flex-end;
  width:48px; height:48px;
  display:grid; place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.22);
  color:#fff;
  margin-top:-4px;
}
.guidecard__title{ font-size:20px; font-weight:700; margin-top:6px; }
.guidecard__text{ font-size:14px; line-height:1.4; opacity:.92; margin-top:8px; flex:1 1 auto; }
.guidecard__cta{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:15px; margin-top:14px; }

/* ----- Нижний фиксированный тост ----- */
.toast{
  position:fixed;
  left:0; right:0; bottom:12px;
  z-index:40;
  max-width:396px;
  margin:0 auto;
  display:flex; align-items:center; gap:12px;
  background:#26282c;
  color:#fff;
  font-size:15px; line-height:1.35;
  padding:16px 18px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast__icon{ flex:none; }


/* =========================================================
   Попап «Как найти файл в браузере»
   ========================================================= */
.modal{
  position:fixed; inset:0;
  z-index:100;
  display:none;
  align-items:center; justify-content:center;
  padding:18px;
}
.modal.is-open{ display:flex; animation:modal-fade .2s ease; }
body.modal-open{ overflow:hidden; }

@keyframes modal-fade{ from{ opacity:0; } to{ opacity:1; } }

.modal__overlay{ position:absolute; inset:0; background:rgba(22,26,33,.62); }

.modal__dialog{ position:relative; width:100%; max-width:360px; }

.modal__close{
  position:absolute; top:34px; right:0;
  z-index:3;
  width:38px; height:38px;
  display:grid; place-items:center;
  color:#fff;
}

.modal__mascot{
  position:absolute; top:0; left:50%;
  transform:translateX(-46%);
  width:150px; height:150px;
  z-index:1;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));
}

.modal__card{
  position:relative; z-index:2;
  margin-top:92px;
  background:#fff;
  border-radius:24px;
  padding:24px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  animation:modal-pop .24s ease;
}
@keyframes modal-pop{ from{ transform:translateY(12px); } to{ transform:translateY(0); } }

.modal__title{ font-size:19px; font-weight:700; line-height:1.25; }
.modal__browser{
  display:flex; align-items:center; gap:8px;
  font-size:19px; font-weight:700;
  margin-top:6px;
}

.modal__list{
  margin:18px 0 0;
  padding-left:22px;
  display:flex; flex-direction:column; gap:14px;
}
.modal__list li{ font-size:15px; line-height:1.45; color:var(--ink); padding-left:4px; }
.modal__list b{ font-weight:700; }
.modal__link{ color:var(--brand); text-decoration:underline; }

.modal__btn{ margin-top:22px; }


/* =========================================================
   Индикатор статуса установки (install-tracker.js)
   ========================================================= */
.track{
  position:fixed; top:64px; left:50%;
  transform:translateX(-50%) translateY(-8px);
  z-index:90;
  display:none; align-items:center; gap:9px;
  background:#fff; color:var(--ink);
  padding:10px 16px; border-radius:999px;
  box-shadow:0 10px 28px rgba(20,24,31,.20);
  font-size:14px; font-weight:600;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.track.is-shown{ display:flex; opacity:1; transform:translateX(-50%) translateY(0); }
.track__dot{ width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none; }
.track.is-wait .track__dot{ background:#f5b301; animation:track-pulse 1s infinite; }
.track.is-ok{ color:var(--green); }
.track.is-ok .track__dot{ background:var(--green); }
@keyframes track-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }