/* Общая тема и компоненты страниц Выгодыча (templates/*.html, шапка — fragments/header.html) */
:root{
  color-scheme:light;
  --green:#2E7D4F; --green-dark:#1F4E2E; --green-light:#E8F3EC;
  --accent:#F5A623; --red:#D9534F; --bg:#F0F3F1; --card:#fff;
  /* muted: ≥4.5:1 на белом (WCAG AA) — им набраны почти все мелкие подписи */
  --text:#1c2b22; --muted:#66756c; --radius:16px;
  /* line — рамки контролов, line2 — тонкие разделители строк */
  --line:#dfe5e1; --line2:#f0f3f1;
  /* ink-*: зелёный ТЕКСТОМ (цены, имена, ссылки, статистика) — в тёмной теме светлеет,
     тогда как --green/--green-dark фонами остаются как есть */
  --ink-green:#2E7D4F; --ink-green-dark:#1F4E2E;
}
/* тёмная тема: те же токены; color-scheme перекрашивает нативные контролы и скроллбары.
   Включается системной настройкой (если пользователь не форсировал светлую) или data-theme=dark
   (переключатель в профиле, applyTheme в app.js). Блок токенов продублирован: в CSS нельзя
   объединить media-запрос и селектор атрибута в одно условие.
   Белое остаётся белым намеренно: подложки логотипов (.slogo, .ph) и штрих-код (#bcSvg) — его должен читать сканер. */
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --green-light:#25392c; --bg:#141814; --card:#1e2420;
    --text:#e7ece8; --muted:#a9b5ac; --line:#3a443c; --line2:#2b332d;
    --ink-green:#7fc79a; --ink-green-dark:#9ed6b2;
  }
  :root:not([data-theme=light]) .act.meh.done{background:#333a35;color:#aab4ac}
}
:root[data-theme=dark]{
  color-scheme:dark;
  --green-light:#25392c; --bg:#141814; --card:#1e2420;
  --text:#e7ece8; --muted:#a9b5ac; --line:#3a443c; --line2:#2b332d;
  --ink-green:#7fc79a; --ink-green-dark:#9ed6b2;
}
:root[data-theme=dark] .act.meh.done{background:#333a35;color:#aab4ac}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',system-ui,sans-serif}
body{background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column}

/* шапка */
.top{position:sticky;top:0;z-index:40;background:var(--green-dark);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 28px}
.top a{color:#fff;text-decoration:none}
.top .face{width:42px;height:42px;flex:none}
.logo{font-size:20px;font-weight:800;line-height:1.1;color:#fff;text-decoration:none}
.logo small{display:block;font-size:11px;font-weight:400;opacity:.8}
.top .search{flex:1;max-width:520px;margin-left:auto;position:relative;min-width:0} /* прижат вправо к «Войти»: псевдоцентр между разными по ширине краями выглядел случайным */
.top .search input{width:100%;border:none;border-radius:12px;padding:10px 14px 10px 38px;font-size:14px;background:rgba(255,255,255,.14);color:#fff;outline:none}
.top .search input:focus{background:rgba(255,255,255,.22);box-shadow:0 0 0 2px rgba(255,255,255,.55)} /* outline:none без замены — невидимый фокус */
.top .search input::placeholder{color:rgba(255,255,255,.6)}
.top .search::before{content:'🔍';position:absolute;left:12px;top:9px;font-size:14px}
/* дропдаун автоподсказок под поиском шапки (создаёт initSuggest в app.js) */
.sug{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;background:var(--card);color:var(--text);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.22);max-height:60vh;overflow-y:auto}
.sug.open{display:block}
.sug-h{display:flex;justify-content:space-between;align-items:baseline;padding:8px 14px 3px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.sug-clear{cursor:pointer;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-green)}
.sug-clear:hover{text-decoration:underline}
.sug-i{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:14px;cursor:pointer}
.sug-i.act{background:var(--green-light)} /* и мышь, и клавиатура двигают .act — подсветка всегда одна */
.sug-i img,.sug-ico{width:22px;height:22px;flex:none;border-radius:6px;object-fit:contain}
.sug-ico{display:flex;align-items:center;justify-content:center;font-size:15px}
.sug-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-n b{color:var(--ink-green)}
.sug-i .u{margin-left:auto;flex:none;font-size:12px;color:var(--muted)}
.top .hnav{display:flex;gap:14px;flex:none;font-size:14px}
.top .hnav a{opacity:.85;white-space:nowrap}
.top .hnav a:hover{opacity:1}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-decoration:none;flex:none}
.loginbtn{background:var(--green);border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;flex:none}
@media(max-width:767px){
  .top{padding:10px 12px;gap:10px}
  .logo small{display:none}
  .top .face{display:none} /* мордочка съедала ~50px у поля поиска; бренд остаётся в логотипе и баннере */
  .top .hnav{display:none} /* на мобильном навигация — нижние вкладки/логотип */
  .top .loginbtn,.top .avatar{display:none} /* вход и профиль — во вкладке «Профиль»; шапке остаются логотип и поиск */
}

/* бургер-меню разделов (мобайл; на десктопе те же ссылки — в .hnav) */
.burger{display:none;border:none;background:none;color:#fff;padding:6px;cursor:pointer;flex:none}
.burger .svgi{width:24px;height:24px}
@media(max-width:767px){.burger{display:flex}}
#mnu{position:fixed;top:62px;right:10px;left:auto;margin:0;min-width:250px;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.3)}
#mnu::backdrop{background:rgba(0,0,0,.25)}
#mnu a{display:flex;gap:10px;align-items:center;padding:11px 12px;font-size:14px;color:var(--text);text-decoration:none;border-radius:9px}
#mnu a:hover{background:var(--green-light)}

/* нижняя навигация — mobile only; главная рисует свою (вкладки), остальные страницы — fragments/header :: bnav */
.bnav{display:none}
@media(max-width:767px){
  body:has(.bnav){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line2);z-index:50}
  .bnav a{flex:1;border:none;background:none;font-size:11px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:9px;text-decoration:none}
  .bnav a .ic{font-size:20px;line-height:1}
  .bnav a.on{color:var(--ink-green-dark);font-weight:700}
}

/* футер — перелинковка разделов (fragments/header :: foot) */
.foot{background:var(--green-dark);color:#fff;margin-top:auto;padding:22px 28px;font-size:13px}
.foot-in{max-width:960px;margin:0 auto;display:flex;gap:12px 24px;flex-wrap:wrap;justify-content:space-between;align-items:baseline}
.foot span{display:block;font-size:12px;opacity:.7;margin-top:2px}
.foot nav{display:flex;gap:8px 18px;flex-wrap:wrap}
.foot a{color:#fff;text-decoration:none;opacity:.85}
.foot a:hover{opacity:1;text-decoration:underline}

/* SVG-иконки навигации (спрайт — в fragments/header :: top): эмодзи в хроме выглядели по-разному на каждой платформе */
.svgi{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-4px}
.bnav a .svgi{width:22px;height:22px}

/* кнопки */
.btn{background:var(--green);color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer}
.btn:active{transform:scale(.97)}
.btn.sec{background:var(--card);color:var(--text);border:1px solid var(--line)}
.btn:disabled{opacity:.5;cursor:default}

/* карточка предложения */
.card{background:var(--card);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card .top2{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.badge{background:var(--red);color:#fff;font-weight:700;font-size:13px;border-radius:8px;padding:3px 8px}
.badge.promo{background:var(--accent)}
.store{font-size:13px;color:var(--muted)}
.store a{color:inherit;text-decoration:none}
.store a:hover{text-decoration:underline}
.card h3{font-size:16px;line-height:1.35;margin-bottom:4px}
.card p.descr{font-size:13px;color:var(--muted);margin-bottom:6px}
/* длинное описание свёрнуто до 3 строк; клик разворачивает (offerCard вешает onclick) */
.descr.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.slogo{width:22px;height:22px;border-radius:6px;object-fit:contain;flex:none;background:#fff;border:1px solid var(--line2)}
.prices{display:flex;gap:8px;align-items:baseline;margin-bottom:6px}
.pnew{font-size:19px;font-weight:800;color:var(--ink-green)}
.pold{font-size:13px;color:var(--muted);text-decoration:line-through}
.meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:8px}
.acts{display:flex;gap:8px;flex-wrap:wrap} /* на узких экранах кнопки переносятся, а не распирают страницу */
.act{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:7px 12px;font-size:13px;cursor:pointer;display:flex;gap:6px;align-items:center;color:var(--text);text-decoration:none}
.act:hover{background:var(--green-light)}
@media(max-width:767px){
  .act{min-height:44px} /* тап-таргеты */
  /* иконки-кнопки удаления/редактирования; button.* — чтобы перебить страничные .del/.ib/.tdel, объявленные позже */
  button.del,button.ib,button.tdel{padding:12px 10px}
}
.act.hot.done{background:#FFF1E0;border-color:var(--accent);color:#B36B00}
.act.meh.done{background:#f2f2f2;color:#666}
.act.pop{animation:pop .3s} /* отклик на голос — только что нажатая кнопка «вздрагивает» (done из localStorage не анимируем) */
@keyframes pop{50%{transform:scale(1.18)}}
/* целевое действие карточки — переход в магазин: заметнее вторичных реакций */
.act.go{background:var(--green);border-color:var(--green);color:#fff;font-weight:600;margin-left:auto}
.act.go:hover{background:var(--green-dark)}
/* скелетоны загрузки ленты */
.sk{background:var(--card);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.sk div{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--line2) 25%,var(--line) 37%,var(--line2) 63%);background-size:400% 100%;animation:skm 1.4s infinite}
.sk div:nth-child(1){width:35%;height:18px;margin-bottom:10px}
.sk div:nth-child(2){width:85%;margin-bottom:8px}
.sk div:nth-child(3){width:60%}
@keyframes skm{0%{background-position:100% 0}100%{background-position:0 0}}
.empty{background:var(--green-light);border-radius:var(--radius);padding:18px;font-size:14px;color:var(--ink-green-dark)}
.empty a{color:var(--ink-green)}

/* диалоги: margin:auto возвращает центрирование, убитое обнулением * {margin:0} */
dialog{border:none;border-radius:var(--radius);padding:18px;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);background:var(--card);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.35)}

/* модалка входа (создаётся app.js на любой странице) */
#loginDlg{width:min(92vw,400px)}
#loginDlg h3{font-size:16px;margin-bottom:6px}
#loginDlg .ld-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
#loginDlg input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;outline:none}
#loginDlg input:focus{border-color:var(--green)}
.ld-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ld-or{font-size:13px;color:var(--muted)}
.ld-msg{font-size:13px;margin-top:8px;min-height:16px;color:var(--ink-green-dark)}
.ld-msg.err{color:var(--red)}

/* профиль (#profBody): панель на главной и страница /profile, рендерит renderProfile() из app.js */
.prof-body{padding:0 16px 14px;font-size:13px}
.prof-body .setting{margin-top:10px}
.prof-body label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
.stats{display:flex;gap:8px;margin:8px 0 12px}
.stat{flex:1;background:var(--green-light);border-radius:12px;padding:10px 8px;text-align:center}
.stat b{display:block;font-size:17px;color:var(--ink-green-dark)}
.stat span{font-size:11px;color:var(--muted)}
.lb{margin-top:4px}
.lb-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line2);font-size:13px}
.lb-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-row .kr{font-weight:800;color:var(--ink-green-dark)}
.lclear{display:block;margin:4px 16px 14px;font-size:13px;color:var(--ink-green-dark);background:none;border:none;cursor:pointer;text-decoration:underline}

/* пуш-тост Выгодыча */
.push{position:fixed;top:70px;right:24px;width:340px;max-width:calc(100vw - 20px);background:var(--card);border-radius:14px;padding:12px 14px;box-shadow:0 10px 40px rgba(0,0,0,.25);display:flex;gap:12px;align-items:center;transform:translateX(110%);transition:.45s cubic-bezier(.2,.9,.3,1.2);z-index:60}
.push.show{transform:translateX(0)}
.push .face{width:40px;height:40px;flex:none}
.push b{font-size:13px;display:block}
.push span{font-size:12px;color:var(--muted)}