/* public/css/style.css — базовый стиль + related + swap */
/* [Для себя] аккуратный тёмный UI, дружелюбный к CWV */

:root { --wrap: 1200px; --bg:#0f1115; --fg:#eaeef5; --muted:#9aa4b2; --card:#171a20; --line:#242832; --primary:#52a8ff; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 16px; }
.site-header { border-bottom:1px solid var(--line); position: sticky; top:0; background:rgba(15,17,21,.9); backdrop-filter: blur(6px); z-index:10; }
.site-header .wrap { display:flex; align-items:center; gap:16px; }
.logo { font-weight:700; padding:10px 0; color:#fff; }
.top-nav { margin-left:auto; display:flex; gap:16px; align-items:center; }
.top-nav a { color:#c9d4e0; }
.lang-switch a { padding:2px 6px; border-radius:6px; border:1px solid var(--line); }
.lang-switch a.active { background:var(--card); }

.site-main { padding: 16px 0 48px; }
.site-footer { border-top:1px solid var(--line); color:var(--muted); }
.mt0 { margin-top: 0; }
.lead { color: var(--muted); }

.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:12px; }
.card { display:block; background:var(--card); border:1px solid var(--line); padding:12px; border-radius:12px; }
.card h3 { margin: 0 0 6px; }
.card p { margin: 0; color: var(--muted); }

.calc-panel { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.calc-panel label { display:block; margin:8px 0; }
.calc-panel input, .calc-panel select { width:100%; padding:10px; background:#0c0f14; border:1px solid var(--line); color:#e9eef6; border-radius:8px; }
.calc-panel .row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.calc-panel .row.three { grid-template-columns:1fr auto 1fr; align-items:end; }
.swap-col { display:flex; align-items:center; justify-content:center; }
.btn { padding:10px 14px; border-radius:10px; border:1px solid var(--line); cursor:pointer; }
.btn-primary { background:#1a5fff; color:#fff; }
.btn-light { background:#0c0f14; color:#c9d4e0; }
.btn-icon { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:20px; background:#0c0f14; color:#e9eef6; border:1px solid var(--line); border-radius:10px; }
.btn-icon.spin { transform: rotate(180deg); transition: transform .25s ease; }
.result-ssr { background:#112233; border:1px solid #1b2f45; padding:10px; border-radius:8px; margin:8px 0 12px; }
.live-result { margin-top:12px; font-size:18px; }
.breadcrumbs { color:#9aa4b2; margin-bottom:8px; }
.breadcrumbs a { color:#9db4ff; }

.doc, .seo, .faq, .related { margin-top:18px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.doc .md { color:#cbd4df; }
.tags { list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.tags li { margin:0; }
.tags a { display:inline-block; padding:6px 10px; border:1px solid var(--line); background:#0c0f14; color:#cbd4df; border-radius:999px; font-size:14px; }
.faq details { border:1px dashed var(--line); border-radius:10px; padding:8px 10px; margin:8px 0; }
.faq summary { cursor:pointer; font-weight:600; }

@media (max-width:640px){
  .calc-panel .row { grid-template-columns:1fr; }
  .calc-panel .row.three { grid-template-columns:1fr; }
  .swap-col { order:3; margin:6px 0; }
}

/* --- Search (header & results) ------------------------------------------ */
.site-search{
  display:flex; gap:8px; align-items:center;
  margin-top:8px;
}
.site-search input[type="text"],
.site-search input[type="search"]{
  min-width:280px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#0c0f14;
  color:var(--fg);
  outline:none;
  transition:box-shadow .2s, border-color .2s;
}
.site-search input::placeholder{ color:var(--muted); opacity:.9; }
.site-search input:focus{
  border-color:rgba(82,168,255,.6);
  box-shadow:0 0 0 3px rgba(82,168,255,.2);
}

.site-search button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--primary);
  color:#fff;
  cursor:pointer;
}
.site-search button:hover{ filter:brightness(1.05); }
.site-search button:active{ transform:translateY(1px); }

/* Заглушка поиска (если используется) */
.search-stub{
  opacity:.85;
  border:1px dashed var(--line);
  padding:8px 12px;
  border-radius:10px;
  color:var(--muted);
}

/* Подсветка найденного на странице результатов */
mark{
  background:rgba(82,168,255,.25);
  color:inherit;
  padding:0 .15em;
  border-radius:.25em;
}

/* Пагинация (если включишь) */
.pagination{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.pagination .btn{
  padding:8px 12px; border-radius:10px;
  border:1px solid var(--line);
  background:#0c0f14; color:#c9d4e0;
}
.pagination .btn:hover{ background:#11151b; }
.pagination .btn.btn--ghost{ background:transparent; border-color:transparent; color:var(--muted); cursor:default; }

/* Mobile */
@media (max-width:640px){
  .site-search{ width:100%; margin:8px 0 0; }
  .site-search input[type="text"],
  .site-search input[type="search"]{ min-width:0; width:100%; }
}