:root {
  --catalog-accent: #116b94;
  --catalog-chip: #e5f2f6;
  --catalog-row: #fff;
  --catalog-row-alt: #f0f7f9;
  --catalog-border: #c4dbe2;
}

body[data-theme="halloween"] {
  --catalog-accent: #873d18;
  --catalog-chip: #fbe7d8;
  --catalog-row: #fff8f2;
  --catalog-row-alt: #ffede0;
  --catalog-border: #e8c8b7;
}

body[data-theme="christmas"] {
  --catalog-accent: #72501c;
  --catalog-chip: #f2ead6;
  --catalog-row: #fdfdf8;
  --catalog-row-alt: #f6f1e3;
  --catalog-border: #ddd1b8;
}

body[data-theme="valentines"] {
  --catalog-accent: #993562;
  --catalog-chip: #fae7ee;
  --catalog-row: #fff9fb;
  --catalog-row-alt: #fff0f5;
  --catalog-border: #e9ceda;
}

body[data-theme="summer"] {
  --catalog-accent: #80601c;
  --catalog-chip: #f8efd8;
  --catalog-row: #fbfffd;
  --catalog-row-alt: #f0f8ed;
  --catalog-border: #d3e0c7;
}

body[data-theme="easter"] {
  --catalog-accent: #516837;
  --catalog-chip: #ecf2e3;
  --catalog-row: #fdfcff;
  --catalog-row-alt: #f2eff9;
  --catalog-border: #d7d8cb;
}

.server-controls {
  min-width: 230px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.server-controls label { grid-column: auto; }

.server-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.server-filter {
  min-height: 44px;
  padding: 9px 17px;
  border: 1px solid var(--catalog-border);
  border-radius: 6px;
  background: var(--catalog-chip);
  color: var(--catalog-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .16s, border-color .16s;
}

.server-filter:hover {
  background: var(--catalog-row-alt);
  border-color: var(--catalog-accent);
}

.server-filter[aria-pressed="true"],
.server-filter[aria-pressed="true"]:hover {
  background: var(--catalog-accent);
  border-color: var(--catalog-accent);
  color: #fff;
}

.server-filter:focus-visible {
  outline: 3px solid var(--catalog-accent);
  outline-offset: 3px;
}

.server-filter[data-platform="JAVA"] { --platform-color:#16835e; --platform-tint:#e4f5eb; }
.server-filter[data-platform="MTA"] { --platform-color:#a45a0d; --platform-tint:#fff0da; }
.server-filter[data-platform="FIVEM"] { --platform-color:#794dc2; --platform-tint:#f2eaff; }
.server-filter[data-platform] { border-color:var(--platform-color); background:var(--platform-tint); color:var(--platform-color); }
.server-filter[data-platform]:hover { border-color:var(--platform-color); background:var(--platform-tint); color:var(--platform-color); }
.server-filter[data-platform][aria-pressed="true"],.server-filter[data-platform][aria-pressed="true"]:hover { border-color:var(--platform-color); background:var(--platform-color); color:#fff; }

.server-list {
  border: 1px solid var(--catalog-border);
  border-radius: 8px;
  background: var(--catalog-row);
  overflow: hidden;
}

.server-row {
  padding: 19px 20px;
  border-bottom: 1px solid var(--catalog-border);
}

.server-row:nth-child(even) { background: var(--catalog-row-alt); }
.server-row:last-child { border-bottom: 0; }
.server-row .server-count, .server-row .verified { color: var(--catalog-accent); }
.server-empty { padding: 22px 20px; }
.review-open{border:0;background:transparent;color:#116b94;font-size:13px;font-weight:700;padding:7px 0 0;text-decoration:underline;text-underline-offset:3px}
.review-open:hover{color:#0a4f70}
.review-dialog{width:min(620px,calc(100% - 24px));max-height:min(86vh,820px);padding:0;border:1px solid var(--light-line);border-radius:10px;background:var(--light);color:var(--light-text);overflow:auto}
.review-dialog::backdrop{background:rgba(5,16,23,.76)}
.review-head{display:flex;justify-content:space-between;gap:15px;align-items:start;padding:24px 26px 16px;border-bottom:1px solid var(--light-line)}
.review-head h2{font-size:27px;line-height:1.2;margin:0 0 5px}
.review-head p{margin:0;color:var(--light-muted);font-size:14px}
.review-head .section-context{color:#116b94}
#review-close{width:44px;height:44px;flex:none;border:0;background:transparent;color:var(--light-text);font-size:28px}
.review-list{max-height:260px;overflow:auto;padding:0 26px}
.review-item{padding:16px 0;border-bottom:1px solid var(--light-line)}
.review-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.review-item-head span{color:var(--light-muted);font-size:12px}
.review-item p{margin:7px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}
.review-empty{color:var(--light-muted);padding:8px 0}
.review-create{padding:18px 26px 25px}
.review-create summary{cursor:pointer;color:#116b94;font-weight:700}
.review-create form{display:grid;gap:9px;padding-top:18px}
.review-create label{font-size:13px;font-weight:700}
.review-create textarea{resize:vertical}
.review-create button{justify-self:start}
#review-message{min-height:22px;margin:0;color:#116b94;font-size:13px}

@media (max-width: 700px) {
  .server-controls { min-width: 0; }
  .server-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .server-filter { width: 100%; white-space: normal; }
  .server-row { padding: 17px 14px; }
  .review-head,.review-list,.review-create{padding-left:16px;padding-right:16px}
  .review-item-head{display:block}
}

@media (prefers-reduced-motion: reduce) {
  .server-filter { transition: none; }
}