/* WoW Craft — тёплая тематическая тема, минимализм */
:root {
  --bg: #16120c;
  --panel: #1f1913;
  --panel-hi: #292117;
  --border: #3b3120;
  --border-hi: #6b5730;
  --gold: #e8c15c;
  --gold-bright: #f0c94f;
  --text: #efe7d6;
  --muted: #a89778;
  --focus: #e8c15c;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--gold); text-decoration: none; transition: color .18s; }
a:hover { color: var(--gold-bright); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: 1.45rem; margin: 1.1rem 0 .5rem; letter-spacing: .01em; }
h2 { font-size: 1.1rem; margin: .7rem 0 .4rem; color: var(--gold); font-weight: 600; }
code { background: var(--panel-hi); padding: .1em .35em; border-radius: 4px; }
small { font-size: .82em; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); font-size: .92em; }

/* Шапка */
.topbar { background: linear-gradient(#241d13, #1d1710); border-bottom: 1px solid var(--border-hi); }
.topbar-inner { display: flex; align-items: center; gap: 22px; padding: 12px 16px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.12rem; color: var(--gold-bright); }
.brand:hover { text-decoration: none; }
.topbar nav { display: flex; gap: 16px; }
.searchform { margin-left: auto; display: flex; gap: 6px; }
.searchform input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 8px 12px; border-radius: 8px; min-width: 230px; font-size: .95rem;
  transition: border-color .18s;
}
.searchform input:focus { border-color: var(--border-hi); outline: none; }
.searchform button, .btn {
  background: linear-gradient(#3a2f1a, #2c2312);
  border: 1px solid var(--border-hi); color: var(--gold);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; display: inline-block;
  font-size: .95rem; transition: border-color .18s, color .18s, background .18s;
}
.searchform button:hover, .btn:hover {
  border-color: #967940; color: var(--gold-bright); text-decoration: none;
}

/* Панели */
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 20px; margin: 14px 0;
}

/* Сетка страницы с рубрикатором */
.page-grid { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; margin-top: 10px; }
@media (max-width: 840px) { .page-grid { grid-template-columns: 1fr; } }

/* Рубрикатор в стиле undermine */
.cats { display: flex; flex-direction: column; gap: 6px; }
.cats.row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.cat {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: linear-gradient(#2b2214, #221b0f);
  border: 1px solid #4a3b20; border-radius: 8px;
  padding: 8px 13px; color: #e3c06a; cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.cats.row .cat { display: inline-flex; }
.cat:hover { border-color: #967940; color: var(--gold-bright); text-decoration: none; background: linear-gradient(#322817, #271f11); }
.cat.active { border-color: var(--gold); color: var(--gold-bright); box-shadow: inset 3px 0 0 var(--gold); }
.cat .cnt { color: var(--muted); font-size: .8em; }

/* Список всех серверов */
.realms { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.realms li { padding: 2px 0; }
.realms.all { margin-top: 8px; }
.pop { font-size: .72em; padding: 1px 8px; border-radius: 9px; }
.pop-full { background: #4c1d1d; color: #ffb3b3; }
.pop-high { background: #4c3a1d; color: #ffd9a0; }
.pop-medium, .pop-recommended { background: #26411c; color: #b9f0a5; }
.pop-low { background: #333; color: #aaa; }

/* Таблицы цен */
table.prices { width: 100%; border-collapse: collapse; margin: 10px 0; }
table.prices th, table.prices td { padding: 8px 10px; border-bottom: 1px solid #2b271c; text-align: left; }
table.prices th { color: var(--gold); font-weight: 600; white-space: nowrap; font-size: .92em; }
table.prices tr { transition: background .15s; }
table.prices tbody tr:hover { background: #241d12; }
.num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ext { text-align: right; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell small { display: block; color: var(--muted); }
.item-icon { border-radius: 6px; border: 1px solid #4a3b20; background: #0d0a06; flex: none; }
.item-icon.big { border-radius: 8px; }
.item-head { display: flex; align-items: center; gap: 14px; margin: 1.1rem 0 .5rem; }

.coin { display: inline-block; margin-left: 3px; font-size: .78em; font-weight: 700; }
.coin-g { color: var(--gold-bright); }
.coin-s { color: #b8b8b8; }

/* Пагинатор */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 20px 0; flex-wrap: wrap; }
.pbtn {
  min-width: 38px; text-align: center; padding: 7px 10px; border-radius: 8px;
  background: linear-gradient(#2b2214, #221b0f); border: 1px solid #4a3b20; color: #e3c06a;
  cursor: pointer; transition: border-color .18s, color .18s;
}
.pbtn:hover { border-color: #967940; color: var(--gold-bright); text-decoration: none; }
.pbtn.current { background: var(--gold); border-color: var(--gold); color: #241c0c; font-weight: 700; cursor: default; }
.pgap { color: var(--muted); padding: 0 2px; }

/* График истории */
.chart { background: #201a11; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart .ax { fill: var(--muted); font-size: 12px; }
.chart .slabel { fill: var(--text); font-size: 12.5px; }
.legend { display: flex; gap: 14px; margin: 6px 0 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-size: .9em; }
.chip i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

details summary { cursor: pointer; color: var(--gold); margin: 8px 0; }

/* Кабинет и авторизация */
.linklike { background: none; border: none; color: var(--gold); cursor: pointer; font: inherit; padding: 0; }
.linklike:hover { color: var(--gold-bright); text-decoration: underline; }
.topbar form[action] { display: inline; }
.flash { border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.flash.notice { background: #1f2e18; border: 1px solid #3f5c30; color: #cdf0b8; }
.flash.alert { background: #331b18; border: 1px solid #63332c; color: #f5c4bb; }
.cabinet-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.char-card .char-title { margin-bottom: 8px; }
.char-card .char-title h2 { color: var(--text); }
.prof { margin: 8px 0; }
.prof-line { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bar { height: 6px; background: #12100a; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6f35, var(--gold)); }
.muted-num { color: var(--muted); }
.foot { margin: 32px auto 20px; color: #6d685e; font-size: .85em; border-top: 1px solid #2b271c; padding-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}