/* DohoHub — Smart Filter (подбор сервера). Главная (hero) и /servers.
   Использует CSS-переменные темы. */
.smart-filter {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 16px;
  padding: 22px; box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.sf-title { font-family: var(--font-display, inherit); font-size: 17px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.sf-sub { font-size: 12px; color: var(--text3); margin-bottom: 16px; line-height: 1.5; }
.sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-field { display: flex; flex-direction: column; gap: 5px; }
.sf-field label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); }
.sf-field select {
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px;
  padding: 9px 10px; color: var(--text); font-size: 13px; font-family: var(--font-body, inherit);
  outline: none; cursor: pointer; width: 100%;
}
.sf-field select:focus { border-color: var(--accent); }
/* Вторичные фильтры — скрыты за кнопкой «More filters» */
.sf-more { grid-column: 1 / -1; display: none; grid-template-columns: 1fr 1fr; gap: 12px; }
.smart-filter.sf-open .sf-more { display: grid; }
.sf-more-btn {
  align-self: end; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px dashed var(--border2); border-radius: 8px;
  padding: 9px 10px; color: var(--text2); font-size: 12px; font-weight: 600;
  font-family: var(--font-body, inherit); cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.sf-more-btn:hover { border-color: var(--accent); color: var(--text); }
.sf-more-n {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: #14100a; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-more-car { font-size: 10px; transition: transform 0.15s; }
.smart-filter.sf-open .sf-more-car { transform: rotate(180deg); }
.sf-submit {
  grid-column: 1 / -1; margin-top: 4px;
  background: var(--accent); color: #14100a;
  border: none; border-radius: 10px; padding: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: var(--font-body, inherit); transition: filter 0.15s;
}
.sf-submit:hover { filter: brightness(1.08); }
body.light-theme .sf-submit, html.light-theme .sf-submit { background: #16181D; color: #fff; }
body.light-theme .sf-more-n, html.light-theme .sf-more-n { background: #16181D; color: #fff; }
/* Dedicated CPU checkbox */
.sf-field-check { justify-content: flex-end; }
.sf-check { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text2); user-select: none; }
.sf-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent2); cursor: pointer; margin: 0; }
/* Однострочный вид (finder command bar на главной, как в market-terminal):
   тег + все селекты + More filters + Find servers в один flex-ряд;
   раскрытый .sf-more переносится отдельной строкой ниже (order + flex-basis:100%). */
.smart-filter.sf-line { padding: 12px 16px; border-radius: 12px; }
.smart-filter.sf-line .sf-grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.smart-filter.sf-line .sf-tag {
  align-self: center; white-space: nowrap; padding-top: 14px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--accent);
}
.smart-filter.sf-line .sf-tag::before { content: "▹ "; }
.smart-filter.sf-line .sf-field { flex: 1 1 120px; min-width: 110px; }
.smart-filter.sf-line .sf-more-btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 12px; }
.smart-filter.sf-line .sf-submit {
  flex: 0 0 auto; margin: 0; padding: 10px 20px; font-size: 13px; border-radius: 9px;
}
.smart-filter.sf-line .sf-more {
  flex-basis: 100%; order: 10;
  grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding-top: 12px; border-top: 1px dashed var(--border2); margin-top: 2px;
}
@media(max-width:1100px){
  .smart-filter.sf-line .sf-tag { display: none; }
}
@media(max-width:700px){
  .smart-filter.sf-line .sf-field { flex: 1 1 42%; }
  .smart-filter.sf-line .sf-more-btn, .smart-filter.sf-line .sf-submit { flex: 1 1 42%; }
  .smart-filter.sf-line .sf-more { grid-template-columns: 1fr 1fr; }
}

/* Компактный вид (шапка страницы результатов) — поля по 4 в ряд */
.smart-filter.sf-compact { padding: 16px 18px; }
.smart-filter.sf-compact .sf-grid { grid-template-columns: repeat(4, 1fr); align-items: end; gap: 10px; }
.smart-filter.sf-compact .sf-more { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.smart-filter.sf-compact .sf-more-btn { grid-column: span 3; }
.smart-filter.sf-compact .sf-submit { grid-column: 1 / -1; margin-top: 2px; }
@media(max-width:900px){
  .smart-filter.sf-compact .sf-grid { grid-template-columns: 1fr 1fr; }
  .smart-filter.sf-compact .sf-more { grid-template-columns: 1fr 1fr; }
  .smart-filter.sf-compact .sf-more-btn { grid-column: auto; }
}