/* ================== GearZ Help Center – clean UI ================== */
:root{
  --brand:#d6222a;
  --brand-2:#b81b22;
  --bg:#f3f5f8;
  --panel:#ffffff;
  --text:#0b0e14;
  --muted:#6a707b;
  --border:#e4e8ef;
  --sidebar:#3b4048;
  --sidebar-item:#50555d;
  --sidebar-active:#d6222a;
  --shadow: 0 12px 30px rgba(0,0,0,.08);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Topbar ---------- */
.topbar{ background:linear-gradient(0deg, var(--brand), var(--brand-2)); color:#fff; }
.topbar-inner{ max-width:1180px; margin:0 auto; padding:22px 20px; }
.topbar h1{ margin:0; font-weight:600; letter-spacing:.2px; }
.topbar .brand{ font-weight:700; }

/* ---------- Shell layout ---------- */
.shell{
  max-width:1180px;
  margin:24px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:24px;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--sidebar);
  border-radius:6px;
  padding:12px;
  box-shadow:var(--shadow);
}
.cat-nav{ display:flex; flex-direction:column; gap:8px; }
.cat-btn{
  display:block; width:100%;
  border:0; border-radius:6px;
  background:var(--sidebar-item);
  color:#fff; text-align:left;
  padding:12px 14px;
  cursor:pointer;
  transition:background .2s ease, transform .06s ease;
  font-weight:500;
}
.cat-btn:hover{ background:#5a6069; }
.cat-btn.active{
  background:var(--sidebar-active);
  box-shadow:0 6px 16px rgba(214,34,42,.35);
}
.cat-count{ opacity:.85; font-size:12px; margin-left:6px; }

/* ---------- Right panel ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:var(--shadow);
  padding:16px;
}

/* Controls row */
.controls{
  display:flex; align-items:center; gap:14px; margin-bottom:12px;
}
.search-wrap{
  flex:1; display:flex; align-items:center; gap:8px;
  background:#f7f9fc; border:1px solid var(--border);
  border-radius:6px; padding:6px 6px 6px 10px;
}
#search{
  flex:1; min-width:0; border:0; outline:0;
  background:transparent; padding:8px 6px; font-size:15px;
}
#search::placeholder{ color:#9aa2ad; }
#clear{
  border:1px solid var(--border); background:#eef1f6; border-radius:6px; padding:8px 10px; cursor:pointer;
}
.found{ color:var(--muted); font-size:13px; }

/* ---------- Section headings ---------- */
.section-head{
  margin:6px 2px 10px;
  color:#8c939e;
  font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:12px;
}

/* ---------- Плашки на главной (твои красные карточки) ---------- */
/* Популярные на главной — тот же стиль, что и список */
/* Популярные на главной — тот же стиль, что и список */
.popular-tiles{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 6px 0 8px;
}

/* Никаких отдельных стилей .tile — используем общие:
   .q-row, .q-item, .q-answer уже описаны выше
*/

/* ---------- Список вопросов (аккордеон) ---------- */
#list{ display:flex; flex-direction:column; gap:10px; }
.q-row{
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}
.q-item{
  display:block; width:100%;
  text-align:left;
  text-decoration:none;
  background:transparent;
  border:0;
  padding:16px;
  color:var(--brand);
  font-size:20px; font-weight:600;
  transition:background .2s ease;
  cursor:pointer;
}
.q-item:hover{ background:#fafbfe; }
.q-item.open{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
.q-answer{
  display:none;
  border-top:1px solid var(--border);
  background:#fff;
  padding:14px;
  line-height:1.55;
  white-space:normal;
}
.q-row.open .q-answer{ display:block; }
.q-answer a{
  color: var(--brand);
  text-decoration: underline;
  word-break: break-word;
}
.q-answer a:hover{ text-decoration: none; }

/* ---------- Другие элементы ---------- */
.empty{
  margin:18px 2px 0; color:#9aa2ad; font-size:14px;
}
#toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(12px);
  background:#111827; color:#fff; border:1px solid rgba(255,255,255,.12);
  border-radius:6px; padding:10px 12px; opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:50;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .shell{ grid-template-columns: 1fr; }
  .sidebar{ order:-1; }
}

/* Скрыть остатки "Недавно просмотренные", если вдруг появятся */
#recent, .section-subhead { display:none !important; }

/* Шрифт по умолчанию и сглаживание */
body{
  font-family: "Open Sans", "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Заголовок по центру уже есть; оставим жирность 700 для Open Sans */
.topbar h1{
  font-weight: 700;
}

/* Центрируем заголовок в шапке гарантированно */
.topbar-inner{
  display: flex;
  justify-content: center; /* по горизонтали */
  align-items: center;     /* по вертикали */
  text-align: center;
}

.topbar h1{
  margin: 0;               /* убираем люфт */
  width: 100%;             /* чтобы text-align влиял по всей ширине */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}