:root{--bg:#0b0b0f;--bg2:#121218;--card:#161622;--text:#eceef2;--muted:#a9adbb;--acc:#ffd400;--acc2:#ffea7a;--border:#262738;--ok:#1fd36b;--bad:#ff5a5a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.6)),url('/img/bg.webp') center/cover fixed no-repeat;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--acc)}
img{max-width:100%;height:auto;display:block}
.sr{position:absolute;left:-9999px}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.btn{background:var(--acc);color:#111;padding:10px 16px;border:0;border-radius:10px;font-weight:700;cursor:pointer}
.btn:focus{outline:2px solid var(--acc2)}
.site-header{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:14px 20px;background:rgba(18,18,24,.9);backdrop-filter:saturate(140%) blur(8px);position:sticky;top:0;z-index:10}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo img{width:40px;height:40px;border-radius:10px}
.brand{font:700 18px Montserrat,Inter,sans-serif}
.tagline{font:600 12px Inter,sans-serif;color:var(--acc2)}
.nav-toggle{display:none;background:none;border:0}
.main-nav ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.main-nav a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.main-nav a:hover{background:var(--card)}
.site-search{display:flex;gap:8px;align-items:center;margin-left:auto}
.site-search label{position:absolute;left:-9999px}
.site-search input{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);min-width:260px}
.header-tools{display:flex;gap:14px}
.header-tools a{display:flex;gap:8px;align-items:center;color:var(--text);text-decoration:none}
.icon{width:22px;height:22px;fill:var(--acc)}
.main{display:block}
.hero{padding:28px 0}
.hero .wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.hero-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.hero-card .cover{aspect-ratio:16/9;background:#000}
.hero-card .meta{padding:14px}
.hero-card .meta h2{margin:0 0 6px 0;font:700 22px Montserrat,Inter,sans-serif}
.hero-mini{display:grid;gap:16px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:#0f0f16;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:6px 10px;font-size:12px}
.section{padding:24px 0}
.section h2{margin:0 0 14px 0;font:700 22px Montserrat,Inter,sans-serif}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}
.card .cover{aspect-ratio:16/9;background:#000}
.card .body{padding:12px 14px}
.card .body h3{margin:0 0 6px 0;font:700 18px Montserrat,Inter,sans-serif}
.card .body p{margin:0;color:var(--muted);line-height:1.5}
.card .foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--border)}
.badge{background:var(--acc);color:#111;border-radius:8px;padding:4px 8px;font-weight:700;font-size:12px}
.filters{display:grid;grid-template-columns:260px 1fr;gap:16px}
.filter-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px}
.filter-box .group{display:grid;gap:8px;margin-bottom:10px}
.filter-box label{display:flex;gap:8px;align-items:center}
.select{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text)}
.list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tag{background:#0f0f16;border:1px solid var(--border);border-radius:8px;padding:4px 8px;font-size:12px;color:var(--muted)}
.ratings{display:flex;gap:6px;align-items:center}
.ratings button{background:none;border:0;cursor:pointer}
.ratings [data-star]{width:18px;height:18px;display:inline-block;mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\\'0 0 24 24\\'><path d=\\'M12 2l3.09 6.26L22 9.27l-5 4.9L18.18 22 12 18.56 5.82 22 7 14.17l-5-4.9 6.91-1.01z\\'/></svg>') no-repeat center/contain;background:#4b4e66;transition:transform .1s}
.ratings [data-star].active{background:var(--acc)}
.site-footer{padding:28px 20px;background:#0d0d13;border-top:1px solid var(--border)}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:16px;align-items:start}
.footer-brand .logo .brand{font:700 18px Montserrat,Inter,sans-serif}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-nav a{text-decoration:none;color:var(--text)}
.subscribe{display:grid;gap:8px}
.subscribe input{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text)}
.contacts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.page{padding:18px 20px}
.page .container{display:grid;gap:18px}
.article{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.article .head{padding:14px 16px;border-bottom:1px solid var(--border)}
.article .head h1{margin:0;font:700 26px Montserrat,Inter,sans-serif}
.article .content{padding:16px}
.article .content p{margin:0 0 12px 0;line-height:1.7;color:var(--text)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:10px;text-align:left}
.form{display:grid;gap:12px}
.form input,.form textarea{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);width:100%}
.form button{justify-self:start}
.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.breadcrumbs a{color:var(--muted);text-decoration:none}
@media (max-width:1024px){
.grid,.list{grid-template-columns:repeat(2,1fr)}
.hero-grid{grid-template-columns:1fr}
.filters{grid-template-columns:1fr}
.site-search input{min-width:180px}
.footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.site-header{grid-template-columns:auto auto 1fr;grid-template-areas:"logo toggle tools" "nav nav nav" "search search search"}
.logo{grid-area:logo}
.nav-toggle{display:inline-flex;grid-area:toggle}
.header-tools{grid-area:tools;justify-content:flex-end}
.main-nav{grid-area:nav;display:none}
.main-nav.open{display:block}
.main-nav ul{flex-direction:column}
.site-search{grid-area:search;margin-left:0}
.grid,.list{grid-template-columns:1fr}
}
.reco-intro{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:18px}
.reco-intro h1{margin:0 0 8px 0;font:700 26px Montserrat,Inter,sans-serif}
.tips-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;margin:18px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#0f0f16;border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-size:13px;color:var(--muted)}
.compare{margin:18px 0}
.faq{margin:18px 0;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px}
.faq details{background:#0f0f16;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:600}
.mini-guide .head h2{margin:0;font:700 22px Montserrat,Inter,sans-serif}
html,body{overflow-x:hidden}

@media (max-width:640px){
.container{padding:0 12px}
.site-header{grid-template-columns:auto 1fr auto;gap:8px;padding:12px 14px}
.logo img{width:32px;height:32px}
.brand{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50vw}
.tagline{display:none}
.header-tools{gap:10px}
.header-tools a span{display:none}
.header-tools .icon{width:22px;height:22px}

.nav-toggle{display:inline-flex}
.main-nav{display:none}
.main-nav.open{display:block}
.main-nav ul{flex-direction:column;gap:6px;flex-wrap:wrap}
.main-nav a{padding:10px;border-radius:10px;max-width:100%}

.site-search{grid-column:1/-1;display:flex;gap:8px;width:100%}
.site-search input{min-width:0;width:100%}
.site-search .btn{white-space:nowrap}

.hero{padding:20px 0}
.hero .wrap{padding:0 12px}
.hero-grid{grid-template-columns:1fr;gap:12px}
.card .body h3,.hero-card .meta h2{word-break:break-word;overflow-wrap:anywhere}

.grid,.list{grid-template-columns:1fr;gap:12px}
.filters{grid-template-columns:1fr;gap:12px}
.filter-box{padding:12px}
.pills{gap:6px}
.pill{padding:6px 8px;font-size:11px}

.footer-grid{grid-template-columns:1fr;gap:12px}
.footer-brand .logo .brand{font-size:16px}

.article .head h1{font-size:22px}
.article .content{padding:14px}
.table{display:block;width:100%;overflow:auto}
.breadcrumbs{padding:0 12px;gap:6px;flex-wrap:wrap}

.reco-intro{padding:12px}
.tips-box{padding:12px}
.faq{padding:12px}
.faq details{padding:10px}
.chips{gap:6px}
.chip{padding:6px 10px;font-size:12px}
}

@media (max-width:360px){
.brand{max-width:44vw}
.site-search .btn{padding:10px 12px}
}
/* Мобильный фикс переполнений для страницы "Рекомендации" */
@media (max-width: 640px){
  /* ключ: у грид-детей min-width:0, иначе текст распирает контейнер */
  .page .container,
  .reco-intro,
  .filters,
  .filter-box,
  .list,
  .grid,
  .card,
  .article,
  .tips-box,
  .compare,
  .faq { min-width:0; width:100% }

  /* переносы в заголовках/абзацах/ссылках */
  .reco-intro h1,
  .reco-intro p,
  .mini-guide .head h2,
  .card .body h3,
  .article .head h1,
  .article .content p,
  .reco-intro a { overflow-wrap:anywhere; word-break:break-word }

  /* компактная типографика интро */
  .reco-intro{ padding:12px }
  .reco-intro h1{ font-size:22px; line-height:1.25; margin-bottom:6px }
  .reco-intro p{ font-size:14px; line-height:1.6 }

  /* фильтры и список — строго по ширине экрана */
  .filters{ grid-template-columns:1fr; gap:12px }
  .filter-box{ padding:12px }
  .list{ grid-template-columns:1fr; gap:12px }

  /* карточки */
  .card{ border-radius:14px }
  .card .body{ padding:12px }
  .card .foot{ padding:10px 12px }

  /* таблица и FAQ внутри страницы */
  .compare .table{ display:block; width:100%; overflow:auto }
  .faq{ padding:12px }
  .faq details{ padding:10px }
}

/* универсальная страховка от горизонтального скролла для всех страниц */
html,body{ overflow-x:hidden }
.main, .article, .card, .page, .section{ overflow-wrap:anywhere }