/* SpermaCraft — оформление сайта.
   Тёмная «ночная» тема с золотым акцентом. Каркас: боковая навигация, верхняя полоса, контент.
   Текст — Manrope, заголовки — Unbounded (оба с кириллицей), логотип — пиксельный Press Start 2P.
   Классы, на которые завязаны скрипты (upg-*, roulette-*, chat-*, mc-bar, usercard), сохранены. */

:root{
  --bg:#0b0b0d;
  --panel:#131316;
  --panel-2:#18181c;
  --panel-3:#1e1e23;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.13);
  --text:#ededf0;
  --text-2:#a9a9b3;
  --text-3:#74747f;

  --gold:#e2a63b;
  --gold-hi:#f0b84e;
  --gold-text:#f2c76c;
  --gold-soft:rgba(226,166,59,.12);
  --gold-line:rgba(226,166,59,.38);
  --gold-ink:#1d1400;

  --green:#46c37b;
  --green-soft:rgba(70,195,123,.13);
  --red:#ef5b4c;
  --red-soft:rgba(239,91,76,.13);
  --blue:#5ea0f5;
  --blue-soft:rgba(94,160,245,.13);

  --r-lg:16px;
  --r:11px;
  --r-sm:8px;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --shadow-sm:0 4px 14px rgba(0,0,0,.3);

  --font:'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Unbounded', 'Manrope', sans-serif;
  --font-pixel:'Press Start 2P', monospace;

  --side:248px;
  --top:0px; /* верхняя полоса есть только на телефоне — см. @media ниже */
  --page:1280px;

  /* Совместимость со старыми именами, которыми пользуются модули. */
  --accent:var(--gold);
  --accent-text:var(--gold-text);
  --dim:var(--text-3);
  --row:var(--panel-2);
  --radius:var(--r-sm);
}

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
html{ scroll-padding-top:calc(var(--top) + 16px); }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--gold-text); }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.2; }
p{ margin:0; }
img{ max-width:100%; }
button{ font:inherit; color:inherit; }
::selection{ background:rgba(226,166,59,.35); color:#fff; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:4px; }

.i{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  vertical-align:middle;
}
.i--sm{ width:16px; height:16px; }
.i--lg{ width:24px; height:24px; }

.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.is-muted{ color:var(--text-3); }
.muted{ color:var(--text-2); }
.nowrap{ white-space:nowrap; }
[hidden]{ display:none !important; }

/* ===== Фон ===== */

/* Общий фон: тёмная основа, тёплое свечение сверху и еле заметная сетка «блоков» —
   намёк на Minecraft без картинки. На странице профиля поверх ложится фон из баннера. */
.bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 600px at 18% -12%, rgba(226,166,59,.11), transparent 62%),
    radial-gradient(900px 700px at 105% 8%, rgba(120,90,220,.07), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(70,195,123,.05), transparent 60%),
    var(--bg);
}
.bg::after{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
}

/* ===== Каркас ===== */

.side{
  position:fixed; inset:0 auto 0 0; z-index:40;
  width:var(--side);
  display:flex; flex-direction:column; gap:6px;
  padding:18px 14px;
  background:rgba(14,14,17,.86);
  border-right:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.side-brand{
  display:flex; align-items:center; gap:2px;
  padding:6px 10px 18px;
  font-family:var(--font-pixel);
  font-size:13px;
  letter-spacing:1px;
}
.side-brand:hover{ color:inherit; }
.brand-a{
  background:linear-gradient(100deg, #c99433 0%, #ffe9a8 42%, #c99433 72%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:brandSweep 7s linear infinite;
}
.brand-b{ color:#fff; }
@keyframes brandSweep{ from{ background-position:0% 0; } to{ background-position:260% 0; } }

.side-label{
  padding:14px 12px 6px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3);
}
.side-nav{ display:flex; flex-direction:column; gap:2px; }
.side-link{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-weight:600;
  transition:background .15s, color .15s;
}
.side-link:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.side-link.is-active{ background:var(--gold-soft); color:var(--gold-text); }
.side-link.is-active::before{
  content:''; position:absolute; left:-14px; top:9px; bottom:9px; width:3px;
  border-radius:0 3px 3px 0; background:var(--gold);
  box-shadow:0 0 12px var(--gold);
}

.side-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.server-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:linear-gradient(160deg, rgba(226,166,59,.08), rgba(255,255,255,.02));
}
.server-card-head{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-3); font-weight:600; }
.server-card-head .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }
.server-card code{
  display:block; margin:8px 0 10px;
  font-family:var(--font); font-weight:700; font-size:14px; color:var(--text);
  word-break:break-all;
}

.main{ margin-left:var(--side); min-height:100vh; display:flex; flex-direction:column; }

.top{
  position:sticky; top:0; z-index:30;
  height:var(--top);
  display:none; align-items:center; gap:14px;
  padding:0 28px;
  background:rgba(11,11,13,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.top-burger{
  display:none;
  width:40px; height:40px; padding:0;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-2); border-radius:var(--r-sm);
  cursor:pointer;
}
.top-brand{ display:none; font-family:var(--font-pixel); font-size:11px; }
.top-title{ font-weight:700; color:var(--text-2); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.coin-chip{
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 12px 0 8px;
  border-radius:999px;
  background:var(--gold-soft);
  border:1px solid var(--gold-line);
  color:var(--gold-text);
  font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums;
}
.coin-chip .i{ width:18px; height:18px; }

/* Меню пользователя в правом верхнем углу */
.usermenu{ position:relative; }
.usermenu > summary{ list-style:none; }
.usermenu > summary::-webkit-details-marker{ display:none; }
/* Аккаунт внизу бокового меню */
.topbar-me{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px 8px 8px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  cursor:pointer;
}
.topbar-me:hover{ border-color:var(--line-2); background:rgba(255,255,255,.045); }
.topbar-me .avatar{ width:36px; height:36px; }
.me-text{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.25; }
.me-text .username{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me-coins{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:var(--gold-text); font-variant-numeric:tabular-nums; }
.me-coins .i{ width:13px; height:13px; }
.topbar-me > .i{ width:16px; height:16px; color:var(--text-3); transition:transform .15s; }
.usermenu[open] .topbar-me > .i{ transform:rotate(180deg); }
.pop.pop--up{ top:auto; bottom:calc(100% + 8px); left:0; right:0; min-width:0; }

.pop{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60;
  min-width:230px;
  padding:6px;
  background:#17171b;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  animation:popIn .14s ease-out;
}
.pop--left{ right:auto; left:0; }
@keyframes popIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.pop-head{ padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.pop-head b{ display:block; font-size:15px; }
.pop-head span{ font-size:13px; color:var(--text-3); }
.pop-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px;
  border:0; border-radius:var(--r-sm);
  background:none; text-align:left;
  color:var(--text-2); font-weight:600; font-size:14px;
  cursor:pointer;
}
.pop-item:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.pop-item--danger:hover{ background:var(--red-soft); color:#ff9488; }
.pop-sep{ height:1px; background:var(--line); margin:6px 4px; }
.pop form{ margin:0; }

.page{
  width:100%;
  max-width:var(--page);
  margin:0 auto;
  padding:28px 28px 64px;
  display:flex; flex-direction:column; gap:20px;
  flex:1;
}
.page--withSide{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 330px;
  align-items:start;
}
.page-main{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.page-side{ display:flex; flex-direction:column; gap:20px; position:sticky; top:calc(var(--top) + 20px); }

.page-foot{
  padding:22px 28px;
  border-top:1px solid var(--line);
  color:var(--text-3); font-size:13px;
  display:flex; gap:14px; justify-content:space-between; flex-wrap:wrap;
}

/* Заголовок страницы */
.head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.head-text{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:6px; }
.head h1{ font-family:var(--font-display); font-weight:600; font-size:26px; letter-spacing:-.01em; }
.head p{ color:var(--text-2); }
.head-actions{ display:flex; gap:10px; flex-wrap:wrap; }

.crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--text-3); font-weight:600; }
.crumbs a:hover{ color:var(--text); }
.crumbs .i{ width:14px; height:14px; }

/* ===== Панели ===== */

.block, .card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.block{ overflow:hidden; }
.block--open{ overflow:visible; }
.card{ padding:22px 24px; }
.card--narrow{ max-width:440px; width:100%; margin:0 auto; }
.card--center{ text-align:center; }
.card-title{ font-family:var(--font-display); font-weight:600; font-size:20px; margin-bottom:16px; }
.card-title--small{ font-family:var(--font); font-size:16px; font-weight:800; }
.card-note{ color:var(--text-2); font-size:14px; margin-top:14px; }
.card-note--top{ margin:0 0 14px; }
.card-note a, .link{ color:var(--gold-text); font-weight:600; }
.card-note a:hover, .link:hover{ text-decoration:underline; }

.block-header, .block-minorHeader{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 20px;
  font-size:15px; font-weight:800;
  color:var(--text);
}
.block-header::before, .block-minorHeader::before{
  content:''; width:8px; height:8px; border-radius:2px; background:var(--gold);
  box-shadow:0 0 10px rgba(226,166,59,.6);
  flex:0 0 auto;
}
.block-header--plain::before{ display:none; }
.block-header-meta{ font-size:13px; font-weight:600; color:var(--text-3); }
.block-header-end{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.block-body{ display:flex; flex-direction:column; }
.block-row{ padding:14px 20px; border-top:1px solid var(--line); }
.block-row.is-muted{ color:var(--text-3); }

.empty{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:36px 20px; text-align:center; color:var(--text-2);
  border-top:1px solid var(--line);
}
.empty .i{ width:30px; height:30px; color:var(--text-3); }
.empty b{ color:var(--text); font-size:16px; }

/* ===== Кнопки ===== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 16px;
  font-family:inherit; font-size:14px; font-weight:700;
  color:var(--text);
  background:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s, border-color .12s, color .12s, transform .06s;
}
.btn:hover{ background:#26262c; color:var(--text); border-color:rgba(255,255,255,.18); }
.btn:active{ transform:translateY(1px); }
.btn .i{ width:18px; height:18px; }
.btn--accent, .btn--green{
  background:linear-gradient(180deg, var(--gold-hi), var(--gold));
  border-color:transparent;
  color:var(--gold-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 18px rgba(226,166,59,.18);
}
.btn--accent:hover, .btn--green:hover{
  background:linear-gradient(180deg, #ffc860, var(--gold-hi));
  color:var(--gold-ink); border-color:transparent;
}
.btn--ghost{ background:transparent; border-color:transparent; color:var(--text-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:transparent; }
.btn--red{ background:transparent; border-color:rgba(239,91,76,.4); color:#ff8a7d; }
.btn--red:hover{ background:var(--red-soft); border-color:rgba(239,91,76,.6); color:#ffb0a6; }
.btn--small{ height:34px; padding:0 12px; font-size:13px; }
.btn--xs{ height:28px; padding:0 10px; font-size:12px; border-radius:7px; }
.btn--icon{ width:40px; padding:0; }
.btn--small.btn--icon{ width:34px; }
.btn--xs.btn--icon{ width:28px; }
.btn--wide{ width:100%; }
.btn:disabled, .btn.is-busy{ opacity:.6; cursor:default; transform:none; }
.btn.is-done{ background:var(--green-soft); border-color:rgba(70,195,123,.5); color:#8be0b0; }

/* ===== Поля ===== */

.form{ display:flex; flex-direction:column; gap:16px; }
.form > .btn{ align-self:flex-start; }
.form > .btn--wide{ align-self:stretch; }
.form--row{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.form--row .field-input{ flex:1; min-width:200px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field-label{ font-size:13px; font-weight:700; color:var(--text-2); }
.field-hint{ font-size:13px; color:var(--text-3); }
.field-input, select, textarea{
  width:100%;
  background:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  color:var(--text);
  font-family:inherit; font-size:15px;
  padding:10px 13px;
  transition:border-color .12s, box-shadow .12s;
}
.field-input::placeholder, textarea::placeholder{ color:var(--text-3); }
.field-input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--gold-line); box-shadow:0 0 0 3px var(--gold-soft);
}
.field-input--area{ min-height:110px; resize:vertical; line-height:1.55; }
.field-input--tiny{ width:120px; padding:7px 10px; font-size:14px; }
.field-input--file{ padding:8px 10px; font-size:14px; }
select.field-input, select{ padding:9px 12px; cursor:pointer; }
input[type=checkbox]{ accent-color:var(--gold); width:16px; height:16px; }
input[type=number]{ font-variant-numeric:tabular-nums; }

/* Красивая кнопка выбора файла */
.filepick{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1px dashed var(--line-2);
  border-radius:var(--r);
  background:rgba(255,255,255,.02);
  cursor:pointer;
  color:var(--text-2); font-size:14px;
  transition:border-color .12s, background .12s;
}
.filepick:hover, .filepick.is-drag{ border-color:var(--gold-line); background:var(--gold-soft); color:var(--text); }
.filepick input{ position:absolute; width:1px; height:1px; opacity:0; }
.filepick b{ color:var(--text); }
.filepick-name{ margin-left:auto; color:var(--gold-text); font-weight:700; max-width:50%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Мелочи: теги, чипы ===== */

.tag{
  display:inline-flex; align-items:center; gap:5px;
  height:22px; padding:0 8px;
  font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  border-radius:6px;
  vertical-align:2px;
  background:rgba(255,255,255,.07); color:var(--text-2);
}
.tag .i{ width:13px; height:13px; }
.tag--pin{ background:var(--gold-soft); color:var(--gold-text); }
.tag--lock{ background:var(--red-soft); color:#ff9488; }
.tag--ok{ background:var(--green-soft); color:#8be0b0; }
.tag--info{ background:var(--blue-soft); color:#9cc6ff; }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  height:30px; padding:0 12px 0 5px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--text-2);
}

/* ===== Ники и аватарки ===== */

.username{ font-weight:800; color:var(--gold-text); }
a:hover .username{ filter:brightness(1.2); }
.username--rainbow{
  background:linear-gradient(90deg,#ff7a7a,#ffd93d,#7ee081,#5aa9ff,#c98bff,#ff7a7a);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:rainbow 6s linear infinite;
}
@keyframes rainbow{ from{ background-position:0 0; } to{ background-position:300% 0; } }

.avatar{
  display:block; flex:0 0 auto;
  width:40px; height:40px;
  object-fit:cover; border-radius:50%;
  background:var(--panel-3);
  cursor:pointer;
}
.avatar--tiny{ width:24px; height:24px; }
.avatar--small{ width:32px; height:32px; }
.avatar--big{ width:64px; height:64px; }

/* ===== Всплывающие уведомления ===== */

.toasts{
  position:fixed; right:20px; bottom:20px; z-index:120;
  display:flex; flex-direction:column; gap:10px;
  width:min(380px, calc(100vw - 32px));
  pointer-events:none;
}
.toast, .flash{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 14px;
  background:#19191e;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  font-size:14px; font-weight:600;
}
.toast{ pointer-events:auto; animation:toastIn .25s ease-out; }
.toast.is-leaving{ animation:toastOut .2s ease-in forwards; }
.toast-text{ flex:1; padding-top:1px; overflow-wrap:anywhere; }
.toast .i{ color:var(--blue); }
.toast--success .i{ color:var(--green); }
.toast--error .i{ color:var(--red); }
.toast--error{ border-color:rgba(239,91,76,.35); }
.toast-close{ background:none; border:0; padding:2px; color:var(--text-3); cursor:pointer; }
.toast-close:hover{ color:var(--text); }
.toast-close .i{ color:inherit; width:16px; height:16px; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(20px); } }
.flash{ box-shadow:none; }
.flash--error{ border-color:rgba(239,91,76,.4); background:rgba(239,91,76,.08); }
.flash--success{ border-color:rgba(70,195,123,.4); background:rgba(70,195,123,.08); }

/* ===== Окна: подтверждение и просмотр картинок ===== */

.modal{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(5,5,7,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:fadeIn .15s ease-out;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-box{
  width:min(420px, 100%);
  padding:22px;
  background:#17171b;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  animation:popIn .16s ease-out;
}
.modal-box h3{ font-size:17px; margin-bottom:8px; }
.modal-box p{ color:var(--text-2); font-size:14px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

.lightbox{ cursor:zoom-out; }
.lightbox img{
  max-width:min(1400px, 100%); max-height:calc(100vh - 80px);
  border-radius:var(--r);
  box-shadow:var(--shadow);
}
.lightbox-close{ position:absolute; top:16px; right:16px; }

/* ===== Вкладки ===== */

.tabs{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:4px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  width:fit-content; max-width:100%;
}
.tab{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 14px;
  border-radius:var(--r-sm);
  font-size:14px; font-weight:700; color:var(--text-2);
}
.tab .i{ width:17px; height:17px; }
.tab:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.tab.is-active{ background:var(--panel-3); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }

/* ===== Листалка страниц ===== */

.pager{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; align-items:center; }
.pager-link{
  min-width:38px; height:38px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line);
  font-weight:700; font-size:14px; color:var(--text-2);
}
.pager-link:hover{ color:var(--text); border-color:var(--line-2); }
.pager-link.is-current{ background:var(--gold-soft); border-color:var(--gold-line); color:var(--gold-text); }
.pager-gap{ color:var(--text-3); padding:0 4px; }

/* ===== Главная: приветствие ===== */

.hero{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px; align-items:center;
  padding:28px 30px;
  border-radius:var(--r-lg);
  border:1px solid var(--gold-line);
  background:
    radial-gradient(600px 240px at 0% 0%, rgba(226,166,59,.20), transparent 70%),
    linear-gradient(135deg, #1a1712, #121215 60%);
}
.hero::after{
  content:''; position:absolute; right:-40px; top:-40px; width:260px; height:260px;
  background:
    linear-gradient(var(--gold-soft) 0 0) 0 0 / 40px 40px,
    linear-gradient(rgba(226,166,59,.06) 0 0) 40px 40px / 40px 40px;
  background-repeat:repeat;
  mask-image:radial-gradient(circle at 70% 30%, #000, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 70% 30%, #000, transparent 70%);
  opacity:.7; pointer-events:none;
}
.hero h1{ font-family:var(--font-display); font-weight:600; font-size:28px; letter-spacing:-.01em; }
.hero h1 b{ color:var(--gold-text); font-weight:600; }
.hero p{ color:var(--text-2); margin-top:8px; max-width:560px; }
.hero-actions{ position:relative; z-index:1; display:flex; gap:10px; flex-wrap:wrap; }

/* Шаги для новичка */
.steps{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; padding:0 20px 20px; }
.step{
  display:flex; flex-direction:column; gap:10px;
  padding:16px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:var(--panel-2);
}
.step-num{
  width:28px; height:28px; border-radius:8px;
  display:grid; place-items:center;
  font-weight:800; font-size:13px;
  background:var(--gold-soft); color:var(--gold-text);
}
.step.is-done{ opacity:.6; }
.step.is-done .step-num{ background:var(--green-soft); color:#8be0b0; }
.step b{ font-size:15px; }
.step p{ font-size:13px; color:var(--text-2); flex:1; }

/* ===== Форум: список разделов ===== */

.node{
  position:relative; /* рамка для растянутой ссылки .node-title a::after — иначе она накрывает всю страницу */
  display:grid;
  grid-template-columns:48px minmax(0, 1fr) 120px minmax(220px, .7fr);
  gap:18px; align-items:center;
  padding:16px 20px;
  border-top:1px solid var(--line);
  transition:background .12s;
}
.node:hover{ background:rgba(255,255,255,.02); }
.node-icon{
  width:48px; height:48px; padding:12px;
  border-radius:12px;
  background:var(--panel-3);
  border:1px solid var(--line);
  color:var(--text-2);
  transition:color .15s, background .15s, border-color .15s;
}
.node:hover .node-icon{ color:var(--gold-text); background:var(--gold-soft); border-color:var(--gold-line); }
.node-title{ font-size:16px; font-weight:800; }
/* Весь ряд кликается как ссылка на раздел; ссылки справа лежат поверх. */
.node-title a::after{ content:''; position:absolute; inset:0; }
.node-main{ min-width:0; }
.node-desc{ margin-top:2px; color:var(--text-2); font-size:14px; }
.node-stats{ display:flex; flex-direction:column; align-items:center; text-align:center; color:var(--text-3); font-size:12px; font-weight:600; }
.node-stats b{ color:var(--text); font-size:20px; font-weight:800; }
.node-stats span{ display:flex; flex-direction:column; }
.node-extra{ position:relative; z-index:1; display:flex; gap:12px; align-items:center; min-width:0; }
.node-extra-text{ display:flex; flex-direction:column; min-width:0; gap:2px; font-size:13px; color:var(--text-3); }
.node-extra-title{ color:var(--text); font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.node-extra-title:hover{ color:var(--gold-text); }

/* ===== Форум: список тем ===== */

.thread-row{
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) 110px minmax(160px, .4fr);
  gap:16px; align-items:center;
  padding:14px 20px;
  border-top:1px solid var(--line);
  transition:background .12s;
}
.thread-row:hover{ background:rgba(255,255,255,.02); }
.thread-row.is-pinned{ background:linear-gradient(90deg, rgba(226,166,59,.06), transparent 40%); }
.thread-row-main{ min-width:0; }
.thread-row-title{ font-size:15px; font-weight:800; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.thread-row-title a::after{ content:''; position:absolute; inset:0; }
.thread-row-sub{ font-size:13px; color:var(--text-3); margin-top:2px; }
.thread-row-sub a, .thread-row .node-extra, .thread-row .avatar{ position:relative; z-index:1; }
.thread-row .node-extra-text{ text-align:right; align-items:flex-end; }

/* ===== Форум: сообщения ===== */

.thread-head{
  display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap;
  padding:22px 24px;
}
.thread-head h1{ font-family:var(--font-display); font-weight:600; font-size:24px; flex:1; min-width:240px; line-height:1.3; }
.thread-head-tags{ display:flex; gap:6px; margin-bottom:10px; }
.thread-head-meta{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; color:var(--text-3); font-weight:600; }
.thread-head-meta .avatar{ width:22px; height:22px; }

.notice{
  display:flex; align-items:center; gap:12px;
  padding:13px 16px;
  border-radius:var(--r);
  font-size:14px; font-weight:600;
  border:1px solid var(--line-2);
  background:var(--panel-2);
}
.notice .i{ flex:0 0 auto; }
.notice--lock{ border-color:rgba(239,91,76,.35); background:rgba(239,91,76,.07); color:#ffb0a6; }
.notice--info{ border-color:rgba(94,160,245,.3); background:rgba(94,160,245,.07); color:#b8d6ff; }
.notice--gold{ border-color:var(--gold-line); background:var(--gold-soft); color:var(--gold-text); }

.post{
  display:grid;
  grid-template-columns:190px minmax(0, 1fr);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  scroll-margin-top:calc(var(--top) + 20px);
}
.post:target{ border-color:var(--gold-line); box-shadow:0 0 0 3px var(--gold-soft); }
.post.is-op .post-author{ background:linear-gradient(180deg, rgba(226,166,59,.08), transparent 70%); }
.post-author{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 14px;
  text-align:center;
  border-right:1px solid var(--line);
  background:rgba(255,255,255,.015);
}
.post-author .avatar{ width:72px; height:72px; margin-bottom:6px; box-shadow:0 0 0 3px var(--panel), 0 0 0 4px var(--line-2); }
.post-author-name{ font-size:15px; font-weight:800; word-break:break-word; }
.post-author-title{ font-size:12px; color:var(--text-2); font-weight:600; }
.post-author-meta{ font-size:12px; color:var(--text-3); margin-top:4px; }
.post-body{ padding:18px 22px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.post-head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:13px; color:var(--text-3); font-weight:600; }
.post-head a{ color:inherit; }
.post-head a:hover{ color:var(--text); }
.post-num{ margin-left:auto; color:var(--text-3); }
.post-text{ overflow-wrap:anywhere; line-height:1.65; font-size:15px; }
.post-text p{ margin:0 0 12px; }
.post-text p:last-child{ margin-bottom:0; }
.post-text a{ color:var(--gold-text); text-decoration:underline; text-decoration-color:var(--gold-line); text-underline-offset:3px; }
.post-text code{
  background:var(--panel-3); border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-size:13.5px; font-family:ui-monospace, Consolas, monospace;
}
.post-text blockquote{
  margin:0 0 12px; padding:10px 14px;
  border-left:3px solid var(--gold);
  background:rgba(255,255,255,.03);
  color:var(--text-2);
  border-radius:0 8px 8px 0;
}
.post-deleted{ color:var(--text-3); font-style:italic; display:flex; gap:8px; align-items:center; }
.post-images{ display:flex; gap:10px; flex-wrap:wrap; }
.post-images a{ display:block; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); cursor:zoom-in; }
.post-images img{ display:block; max-width:320px; max-height:240px; transition:transform .2s; }
.post-images a:hover img{ transform:scale(1.03); }
.post-actions{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:auto; padding-top:4px; }
.post-actions form{ margin:0; }

/* Меню модератора над темой */
.mod-menu{ position:relative; }
.mod-menu > summary{ list-style:none; }
.mod-menu > summary::-webkit-details-marker{ display:none; }
.mod-menu .pop{ min-width:300px; }
.upg-grid > p{ grid-column:1 / -1; margin:0; }
.mod-move{ display:flex; gap:6px; padding:6px; }
.mod-move select{ flex:1; padding:6px 8px; font-size:13px; }

/* ===== Редактор сообщения ===== */

.composer{ display:flex; flex-direction:column; gap:12px; }
.composer-title{
  width:100%;
  background:var(--panel-3);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  color:var(--text);
  font-family:var(--font-display); font-weight:500; font-size:19px;
  padding:14px 16px;
}
.composer-title::placeholder{ color:var(--text-3); }
.composer-title:focus{ outline:none; border-color:var(--gold-line); box-shadow:0 0 0 3px var(--gold-soft); }

.composer-box{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:var(--r);
  background:var(--panel-3);
  transition:border-color .12s, box-shadow .12s;
}
.composer-box:focus-within{ border-color:var(--gold-line); box-shadow:0 0 0 3px var(--gold-soft); }
.composer-box.is-drag{ border-color:var(--gold); border-style:dashed; }
.composer-box.is-drag::after{
  content:'Отпусти — картинка прикрепится';
  position:absolute; inset:0; z-index:3;
  display:grid; place-items:center;
  border-radius:var(--r);
  background:rgba(20,16,8,.85);
  color:var(--gold-text); font-weight:800;
}
.composer-toolbar{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:6px;
  border-bottom:1px solid var(--line);
}
.tool{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; min-width:32px; padding:0 8px;
  background:none; border:0; border-radius:7px;
  color:var(--text-2); cursor:pointer;
  font-size:13px; font-weight:700;
}
.tool:hover{ background:rgba(255,255,255,.07); color:var(--text); }
.tool .i{ width:17px; height:17px; }
.tool.is-active{ background:var(--panel); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.tool input[type=file]{ display:none; }
.tool-sep{ width:1px; height:20px; background:var(--line-2); margin:0 6px; }
.composer-mode{ margin-left:auto; display:flex; gap:2px; }
.composer-text{
  display:block; width:100%;
  min-height:150px;
  padding:14px 16px;
  background:transparent; border:0; border-radius:0;
  color:var(--text);
  font-family:inherit; font-size:15px; line-height:1.6;
  resize:vertical;
}
.composer-text:focus{ outline:none; box-shadow:none; }
.composer-preview{ min-height:150px; padding:14px 16px; }
.composer-preview:empty::before{ content:'Пока нечего показать.'; color:var(--text-3); }

.composer-files{
  display:flex; gap:10px; flex-wrap:wrap;
  padding:0 12px 12px;
}
.composer-files:empty{ display:none; }
.thumb{
  position:relative;
  width:96px; height:96px;
  border-radius:var(--r-sm);
  overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--panel);
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-remove{
  position:absolute; top:5px; right:5px;
  width:24px; height:24px; padding:0;
  display:grid; place-items:center;
  border-radius:50%; border:0;
  background:rgba(0,0,0,.72); color:#fff; cursor:pointer;
}
.thumb-remove:hover{ background:var(--red); }
.thumb-remove .i{ width:14px; height:14px; }
.thumb-size{
  position:absolute; left:0; right:0; bottom:0;
  padding:3px 6px;
  font-size:11px; font-weight:700;
  background:linear-gradient(transparent, rgba(0,0,0,.8));
}
.thumb.is-old::after{
  content:'было'; position:absolute; left:6px; top:6px;
  padding:1px 6px; border-radius:5px; font-size:10px; font-weight:800;
  background:rgba(0,0,0,.7); color:var(--text-2);
}
.thumb.is-removed{ opacity:.35; }
.thumb.is-removed .thumb-remove{ background:var(--green); }

.composer-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.composer-hint{ font-size:12px; color:var(--text-3); font-weight:600; }
.composer-hint kbd{
  font-family:inherit; font-size:11px; font-weight:800;
  padding:1px 6px; border-radius:5px;
  background:var(--panel-3); border:1px solid var(--line-2); color:var(--text-2);
}
.composer-foot .btn{ margin-left:auto; }
.composer-draft{ font-size:12px; color:var(--text-3); }

/* ===== Профиль ===== */

.pf-hero{
  position:relative;
  height:320px;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  isolation:isolate;
}
/* Баннер на всю ширину. Типичная шапка — гифка ~500 px, её приходится растягивать в 2–3 раза;
   тогда скрипт ставит .is-soft: лёгкое размытие прячет «лесенку» и шум гифки, а тень снизу
   уводит картинку в фон — выглядит как кадр, а не как растянутый пиксель. */
.pf-hero-img{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center 40%;
}
.pf-hero-img.is-soft{ filter:blur(.7px) saturate(1.08); transform:scale(1.02); }
.pf-hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,8,10,.15) 0%, rgba(8,8,10,0) 30%, rgba(8,8,10,.55) 68%, rgba(14,14,17,.96) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.35) 100%);
}

/* Фон страницы профиля из баннера: кадр 64×36, растянутый на весь экран и размытый.
   Сверху ярче, к низу уходит в обычный фон сайта — контент поверх читается спокойно. */
.pf-backdrop{
  position:fixed; inset:0; z-index:-1;
  width:100%; height:100%;
  filter:blur(40px) saturate(1.25) brightness(.6);
  transform:scale(1.15);
  opacity:0;
  transition:opacity .6s ease;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.65) 45%, transparent 90%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.65) 45%, transparent 90%);
  pointer-events:none;
}
.pf-backdrop.is-ready{ opacity:.7; }

/* Акцент профиля берётся из баннера (скрипт кладёт --tint на body). Без цвета — золото. */
body{ --tint:var(--gold); --tint-soft:var(--gold-soft); --tint-line:var(--gold-line); }
.has-tint .pf-hero{ border-color:var(--tint-line); box-shadow:0 20px 60px -20px var(--tint-soft); }
.has-tint .pf-avatar{ box-shadow:0 0 0 4px rgba(19,19,22,.95), 0 0 0 6px var(--tint), 0 12px 30px rgba(0,0,0,.5); }
.has-tint .pf-grid .block-header::before{ background:var(--tint); box-shadow:0 0 10px var(--tint); }
.has-tint .pf-stats .stat{ border-top:2px solid var(--tint-line); }
.has-tint .pf-role{ border-color:var(--tint-line); }
.pf-hero-edit{ position:absolute; top:14px; right:14px; z-index:2; }
.pf-hero-edit .btn{ background:rgba(10,10,12,.6); border-color:rgba(255,255,255,.15); backdrop-filter:blur(8px); }

.pf-ident{
  position:absolute; left:28px; right:28px; bottom:22px;
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
}
.pf-avatar{
  width:132px; height:132px;
  border-radius:50%;
  object-fit:cover;
  background:var(--panel-3);
  box-shadow:0 0 0 5px rgba(19,19,22,.95), 0 12px 30px rgba(0,0,0,.5);
  flex:0 0 auto;
}
.pf-ident-text{ flex:1; min-width:200px; padding-bottom:6px; display:flex; flex-direction:column; gap:6px; }
.pf-name{ font-family:var(--font-display); font-weight:700; font-size:34px; line-height:1.1; text-shadow:0 2px 14px rgba(0,0,0,.6); word-break:break-word; }
.pf-name .username{ font-weight:inherit; }
.pf-sub{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; font-weight:700; color:var(--text-2); }
.pf-role{
  display:inline-flex; align-items:center; gap:6px;
  height:26px; padding:0 10px;
  border-radius:999px;
  background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.12);
  color:var(--text); font-size:13px;
  backdrop-filter:blur(8px);
}
.pf-online{ display:inline-flex; align-items:center; gap:6px; }
.pf-online .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-3); }
.pf-online.is-on .dot{ background:var(--green); box-shadow:0 0 8px var(--green); }
.pf-actions{ display:flex; gap:8px; padding-bottom:8px; }

.pf-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px;
}
.stat{
  padding:16px 18px;
  border-radius:var(--r);
  background:var(--panel);
  border:1px solid var(--line);
}
.stat b{ display:block; font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; }
.stat span{ font-size:13px; color:var(--text-3); font-weight:600; }
.stat--gold b{ color:var(--gold-text); }

.pf-grid{ display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; align-items:start; }
.pf-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }

.pf-about{ display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:14px; padding:4px 20px 18px; }
.pf-about dt{ color:var(--text-3); font-weight:600; }
.pf-about dd{ margin:0; text-align:right; font-weight:700; }

.profile-badges{ display:flex; gap:8px; flex-wrap:wrap; }

.wall-form{ display:flex; gap:12px; align-items:flex-start; padding:16px 20px; border-top:1px solid var(--line); }
.wall-form textarea{ flex:1; min-height:46px; height:46px; resize:vertical; transition:height .15s; }
.wall-form textarea:focus{ height:90px; }
.wall-item{ display:flex; gap:14px; align-items:flex-start; padding:14px 20px; border-top:1px solid var(--line); }
.wall-item-body{ flex:1; min-width:0; }
.wall-item-head{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:14px; }
.wall-item-head .is-muted{ font-size:12px; font-weight:600; }
.wall-item-text{ margin-top:3px; overflow-wrap:anywhere; color:var(--text); }
.wall-item form{ margin:0; opacity:0; transition:opacity .12s; }
.wall-item:hover form, .wall-item:focus-within form{ opacity:1; }

.mini-list .block-row{ display:flex; flex-direction:column; gap:2px; }
.mini-list a{ font-weight:700; }
.mini-list span{ font-size:12px; color:var(--text-3); font-weight:600; }

/* Окно оформления профиля */
.look{ display:flex; flex-direction:column; gap:18px; margin-top:6px; }
.look-row{ display:flex; flex-direction:column; gap:8px; }
.look-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ===== Участники ===== */

.members-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px;
}
.member-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 16px 18px;
  border-radius:var(--r-lg);
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
  text-align:center;
  transition:transform .15s, border-color .15s;
}
.member-card:hover{ transform:translateY(-2px); border-color:var(--gold-line); color:inherit; }
.member-card-cover{
  align-self:stretch; height:72px; margin:0 -16px;
  background-size:cover; background-position:center;
  position:relative;
}
.member-card-cover::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(19,19,22,.9)); }
.member-card .avatar{ width:72px; height:72px; margin-top:-36px; position:relative; box-shadow:0 0 0 4px var(--panel); }
.member-card-name{ font-size:16px; font-weight:800; word-break:break-word; margin-top:4px; }
.member-card-role{ font-size:12px; color:var(--text-3); font-weight:700; }
.member-card-meta{ font-size:12px; color:var(--text-3); }

/* ===== Карточка профиля во всплывашке ===== */

.usercard{
  position:absolute; z-index:200;
  width:400px; max-width:calc(100vw - 24px);
  background:#17171b;
  border:1px solid var(--line-2);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:popIn .14s ease-out;
}
.usercard-top{
  position:relative;
  padding:18px;
  display:flex; align-items:center; gap:16px;
  background-size:cover; background-position:center;
}
.usercard-top::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,12,14,.35), rgba(23,23,27,.95)); }
.usercard-avatar{
  position:relative;
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px rgba(23,23,27,.9);
  flex:0 0 auto;
}
.usercard-ident{ position:relative; flex:1; min-width:0; }
.usercard-name{ font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:6px; word-break:break-word; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.usercard-name .username{ font-weight:inherit; }
.usercard-info{ font-size:13px; display:flex; flex-direction:column; gap:2px; color:var(--text); font-weight:600; }
.usercard-info span{ color:var(--text-3); }
.usercard-stats{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); }
.usercard-stat{ padding:12px 8px; text-align:center; }
.usercard-stat b{ display:block; font-size:20px; font-weight:800; }
.usercard-stat span{ font-size:12px; color:var(--text-3); font-weight:600; }
.usercard-actions{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); }
.usercard-actions .btn{ flex:1; }
.usercard-loading{ padding:22px; text-align:center; color:var(--text-3); }

/* ===== Настройки ===== */

.settings{ display:grid; grid-template-columns:220px minmax(0, 1fr); gap:24px; align-items:start; }
.settings-nav{
  position:sticky; top:calc(var(--top) + 20px);
  display:flex; flex-direction:column; gap:2px;
}
.settings-nav a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--r-sm);
  font-weight:700; font-size:14px; color:var(--text-2);
}
.settings-nav a:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.settings-nav a.is-active{ background:var(--panel); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); }
.settings-body{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.settings-body > section{ scroll-margin-top:calc(var(--top) + 20px); }
.set-row{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.set-row + .set-row{ margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.set-row-text{ flex:1; min-width:200px; }
.set-row-text b{ display:block; font-size:15px; }
.set-row-text span{ font-size:13px; color:var(--text-3); }
.set-preview-cover{
  width:220px; height:56px; border-radius:var(--r-sm);
  background-size:cover; background-position:center;
  border:1px solid var(--line);
}

.datalist{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 20px; font-size:14px; }
.datalist dt{ color:var(--text-3); font-weight:600; }
.datalist dd{ margin:0; font-weight:700; }

.pairs{ display:flex; justify-content:space-between; gap:12px; margin:0 0 8px; font-size:14px; }
.pairs:last-child{ margin-bottom:0; }
.pairs dt{ color:var(--text-3); font-weight:600; }
.pairs dd{ margin:0; font-weight:700; }

.profile{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }

/* ===== Таблицы ===== */

.table-wrap{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; font-size:14px; }
.table th, .table td{ text-align:left; padding:12px 20px; border-top:1px solid var(--line); vertical-align:middle; }
.table th{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); background:rgba(255,255,255,.015); }
.table tr:hover td{ background:rgba(255,255,255,.015); }
.table code{ color:var(--gold-text); font-size:13px; }
.card .table th, .card .table td{ padding:10px 8px; }

/* ===== Сайдбар форума ===== */

.side-row{ display:flex; gap:11px; align-items:flex-start; padding:12px 20px; border-top:1px solid var(--line); }
.side-row-text{ display:flex; flex-direction:column; min-width:0; gap:1px; font-size:13px; }
.side-row-text > a:first-child{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-row-text .is-muted{ font-size:12px; font-weight:600; }
.members-row{ display:flex; flex-direction:row; gap:8px; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line); }
.mini-stats{ display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); }
.mini-stats div{ padding:14px 8px; text-align:center; }
.mini-stats div + div{ border-left:1px solid var(--line); }
.mini-stats b{ display:block; font-size:19px; font-weight:800; }
.mini-stats span{ font-size:12px; color:var(--text-3); font-weight:600; }

/* ===== Чат ===== */

.chat-log{
  height:300px;
  overflow-y:auto;
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  scrollbar-width:thin;
}
.chat-msg{
  display:flex; align-items:flex-start; gap:10px;
  padding:6px 8px;
  border-radius:var(--r-sm);
  font-size:14px;
}
.chat-msg:hover{ background:rgba(255,255,255,.025); }
.chat-msg .avatar{ margin-top:1px; }
.chat-body{ flex:1; min-width:0; }
.chat-line{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.chat-log:has(.chat-empty){ height:120px; }
.chat-mark{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--panel-3); color:var(--text-3); }
.chat-mark .i{ width:16px; height:16px; }
.chat-msg--game .chat-mark{ background:var(--green-soft); color:#8be0b0; }
.chat-author{ font-weight:800; white-space:nowrap; }
.chat-src{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#8be0b0; background:var(--green-soft); border-radius:4px; padding:0 5px; }
.chat-text{ overflow-wrap:anywhere; color:var(--text); }
.chat-time{ font-size:11px; color:var(--text-3); font-weight:600; white-space:nowrap; }
.chat-msg--system .chat-text{ color:var(--text-2); font-style:italic; }
.chat-del{ background:none; border:0; color:var(--text-3); cursor:pointer; padding:0 4px; opacity:0; }
.chat-msg:hover .chat-del{ opacity:1; }
.chat-del:hover{ color:var(--red); }
.chat-form{ display:flex; gap:10px; align-items:center; padding:12px; border-top:1px solid var(--line); }
.chat-form .field-input{ flex:1; }
.chat-empty{ margin:auto; color:var(--text-3); font-size:14px; }

/* ===== Админка ===== */

.admin-tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.tile{
  display:flex; flex-direction:column; gap:4px;
  padding:18px;
  border-radius:var(--r-lg);
  background:var(--panel);
  border:1px solid var(--line);
}
.tile .i{ color:var(--gold-text); margin-bottom:6px; }
.tile b{ font-size:26px; font-weight:800; }
.tile span{ font-size:13px; color:var(--text-3); font-weight:600; }
a.tile:hover{ border-color:var(--gold-line); color:inherit; }

.secret{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:18px 20px;
  border-radius:var(--r-lg);
  border:1px solid var(--gold-line);
  background:linear-gradient(135deg, rgba(226,166,59,.12), rgba(226,166,59,.03));
}
.secret-text{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:4px; }
.secret-text span{ font-size:13px; color:var(--text-2); font-weight:600; }
.secret code{
  font-family:var(--font-pixel);
  font-size:16px; letter-spacing:2px;
  color:var(--gold-text);
  word-break:break-all;
}
.secret-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.urow{
  display:grid;
  grid-template-columns:44px minmax(0, 1.2fr) 150px 110px auto;
  gap:14px; align-items:center;
  padding:12px 20px;
  border-top:1px solid var(--line);
}
.urow.is-banned{ background:rgba(239,91,76,.04); }
.urow.is-banned .avatar{ opacity:.5; }
.urow-name{ display:flex; flex-direction:column; min-width:0; }
.urow-name a{ font-weight:800; }
.urow-name span{ font-size:12px; color:var(--text-3); font-weight:600; }
.urow-balance{ font-weight:800; color:var(--gold-text); font-variant-numeric:tabular-nums; }
.urow-actions{ display:flex; gap:6px; justify-content:flex-end; }
.urow-actions .btn.is-active{ border-color:var(--gold-line); color:var(--gold-text); }
.urow:target{ background:var(--gold-soft); }
.drawer{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; padding-top:6px; }
.drawer-box{ padding:14px; border-radius:var(--r); background:var(--panel-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.drawer-box h4{ font-size:13px; color:var(--text-2); display:flex; gap:8px; align-items:center; }
.drawer-box h4 .i{ width:16px; height:16px; }
.drawer-box form{ display:flex; gap:8px; flex-wrap:wrap; margin:0; }
.drawer-box .field-input{ flex:1; min-width:120px; }
.quick{ display:flex; gap:6px; flex-wrap:wrap; }

.admin-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line); }
.admin-inline{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; flex:1; }
.admin-inline .field-input{ flex:1; min-width:180px; }
.admin-grid{
  display:grid;
  grid-template-columns:minmax(140px, 1fr) minmax(160px, 1.4fr) 150px 120px 150px 80px auto;
  gap:9px; align-items:center;
}
.admin-row-meta{ display:flex; gap:12px; align-items:center; margin-top:10px; font-size:13px; }
.admin-actions{ display:flex; gap:7px; flex-wrap:wrap; align-items:center; }
.inline-form{ display:inline-flex; margin:0; gap:6px; align-items:center; }

.sec-row{ padding:16px 20px; border-top:1px solid var(--line); }
.sec-row-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.sec-row-head .node-icon{ width:40px; height:40px; padding:9px; }
.sec-row-head b{ font-size:15px; }
.sec-row-head span{ font-size:12px; color:var(--text-3); font-weight:600; }
.sec-row-head .btn{ margin-left:auto; }

.icon-pick{ display:flex; gap:6px; flex-wrap:wrap; }
.icon-pick label{ cursor:pointer; }
.icon-pick input{ position:absolute; opacity:0; width:1px; height:1px; }
.icon-pick svg{
  width:38px; height:38px; padding:8px;
  border-radius:9px; border:1px solid var(--line-2);
  background:var(--panel-3); color:var(--text-2);
}
.icon-pick input:checked + svg{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold-text); }
.icon-pick input:focus-visible + svg{ outline:2px solid var(--gold); outline-offset:2px; }

/* Роли */
.role-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:14px 20px; border-top:1px solid var(--line); }
.role-form{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; flex:1; }
.role-form > .field-input{ flex:1; min-width:150px; }
.role-key{ font-size:12px; color:var(--text-3); min-width:110px; font-weight:700; }
.role-colors{ display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.role-color{ width:36px; height:32px; padding:2px; background:var(--panel-3); border:1px solid var(--line-2); border-radius:7px; cursor:pointer; }
.role-swatch{ width:20px; height:20px; border:1px solid rgba(255,255,255,.2); border-radius:50%; cursor:pointer; padding:0; }
.role-swatch:hover{ transform:scale(1.15); border-color:#fff; }
.role-check{ display:flex; gap:6px; align-items:center; font-size:13px; color:var(--text-2); font-weight:600; }
.role-preview{ min-width:90px; font-size:15px; }
.is-banned{ opacity:.6; }

/* ===== Вход и регистрация ===== */

.auth{
  min-height:100vh;
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(380px, .9fr);
}
.auth-art{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:40px;
  background:
    linear-gradient(180deg, rgba(11,11,13,.2), rgba(11,11,13,.9)),
    url('/assets/img/bg.jpg') center / cover no-repeat,
    #111;
  border-right:1px solid var(--line);
}
.auth-art .side-brand{ font-size:18px; padding:0; }
.auth-art h2{ font-family:var(--font-display); font-weight:600; font-size:34px; line-height:1.2; max-width:520px; }
.auth-art h2 b{ color:var(--gold-text); font-weight:600; }
.auth-art p{ color:var(--text-2); margin-top:12px; max-width:460px; }
.auth-panel{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
.auth-box{ width:100%; max-width:380px; display:flex; flex-direction:column; gap:22px; }
.auth-box h1{ font-family:var(--font-display); font-weight:600; font-size:26px; }
.auth-box > p{ color:var(--text-2); }
.auth-switch{ font-size:14px; color:var(--text-2); }
.auth-switch a{ color:var(--gold-text); font-weight:700; }
.pass{ position:relative; }
.pass .field-input{ padding-right:46px; }
.pass-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; background:none; border-radius:7px;
  color:var(--text-3); cursor:pointer; display:grid; place-items:center;
}
.pass-toggle:hover{ color:var(--text); background:rgba(255,255,255,.05); }

.error-page{ text-align:center; padding:60px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.error-status{ font-family:var(--font-pixel); font-size:56px; color:var(--gold-text); text-shadow:4px 4px 0 rgba(226,166,59,.2); }
.error-page p{ color:var(--text-2); max-width:440px; }

/* ===== Minecraft ===== */

.mc-head{ image-rendering:pixelated; border-radius:4px; vertical-align:middle; }
.mc-head--big{ width:48px; height:48px; flex:0 0 auto; }
.mc-badge{
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 10px 0 4px;
  border-radius:999px;
  background:rgba(10,10,12,.55); border:1px solid rgba(255,255,255,.12);
  color:var(--text); font-size:13px; font-weight:700;
  backdrop-filter:blur(8px);
}
.mc-badge .mc-head{ width:18px; height:18px; }

.mc-linked{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mc-linked-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:140px; }
.mc-linked-text b{ font-size:16px; }
.mc-linked-text .is-muted{ font-size:13px; }

.mc-code{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.mc-code-value{
  font-family:var(--font-pixel);
  font-size:20px; letter-spacing:4px;
  color:var(--gold-text);
  background:var(--panel-3);
  border:1px solid var(--gold-line);
  border-radius:var(--r);
  padding:14px 18px;
}
.mc-code .is-muted{ font-size:13px; }
.mc-code .mc-code-value{ font-size:15px; letter-spacing:2px; }
.mc-bar-inner > .i{ color:var(--gold-text); }
.look-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.look-actions .filepick{ flex:1; min-width:220px; position:relative; }
.filepick{ position:relative; }
.step code, .card-note code, .notice code{ background:var(--panel-3); padding:2px 7px; border-radius:5px; color:var(--gold-text); font-weight:700; }

.mc-skin{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.mc-skin-title{ margin:0 0 12px; font-size:14px; font-weight:800; color:var(--text-2); }
.mc-skin-row{ display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.mc-skin-preview{
  image-rendering:pixelated;
  width:128px; height:128px; flex:0 0 auto;
  background:var(--panel-3);
  border:1px solid var(--line);
  border-radius:var(--r);
}
.mc-skin-preview--empty{ opacity:.5; }
.mc-skin-forms{ display:flex; flex-direction:column; gap:10px; flex:1; min-width:220px; }
.mc-skin-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mc-skin-form input[type=file]{ max-width:100%; font-size:13px; }
.mc-skin-form select{ width:auto; }

/* Плашка подтверждения входа в игру: висит поверх любой страницы, пока игрок заморожен. */
.mc-bar{
  position:sticky; top:var(--top); z-index:25;
  background:linear-gradient(90deg, rgba(226,166,59,.22), rgba(226,166,59,.08));
  border-bottom:1px solid var(--gold-line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.mc-bar-inner{
  max-width:var(--page); margin:0 auto;
  padding:10px 28px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.mc-bar-text{ font-size:14px; font-weight:600; }
.mc-bar-text b{ color:var(--gold-text); }
.mc-bar-timer{ font-size:13px; color:var(--text-2); margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.mc-bar-form{ display:inline; margin:0; }

/* ===== Апгрейдер ===== */

.upg{ padding:26px 24px 28px; }
.upg-title{
  margin:0 0 24px; text-align:center;
  font-family:var(--font-display); font-weight:600;
  font-size:26px; letter-spacing:2px;
  color:var(--gold-text);
}
.upg-chevrons{ color:var(--gold); }
.upg-stage{ display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center; }
.upg-slot{
  min-height:220px; padding:18px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center;
}
.upg-slot-title{ margin:0; font-size:13px; color:var(--text-3); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.upg-slot-hint{ margin:0; font-size:13px; color:var(--text-3); }
.upg-slot-body{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.upg-slot-body:not(:empty) + .upg-slot-hint{ display:none; }
.upg-slot-body img{ width:72px; height:72px; }
.upg-dial{ position:relative; width:240px; height:240px; flex:0 0 auto; }
.upg-dial-svg{ width:100%; height:100%; overflow:visible; }
.upg-dial-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:12; transition:stroke .35s ease; }
.upg-dial-fill{ fill:none; stroke:var(--gold); stroke-width:12; stroke-linecap:butt; transition:stroke-dashoffset .2s ease, stroke .35s ease; filter:drop-shadow(0 0 6px rgba(226,166,59,.5)); }
.upg-dial-needle{ fill:var(--gold-text); stroke:#000; stroke-width:3; stroke-linejoin:round; }
.js-dial-needle{ will-change:transform; }
.upg-dial-value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px;
  font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--gold-text); pointer-events:none;
}
.upg-dial-value small{ font-size:16px; opacity:.7; }
.upg-actions{ display:flex; justify-content:center; margin:24px 0 26px; }
.upg-go{ min-width:280px; height:48px; font-size:16px; letter-spacing:.5px; }
.upg-columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.upg-panel{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:14px; }
.upg-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.upg-panel-head h3{ margin:0; font-size:14px; color:var(--text-2); }
.upg-search{ flex:1; min-width:140px; padding:7px 11px; font-size:13px; }
.upg-mults{ display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.upg-mults .is-active{ border-color:var(--gold-line); background:var(--gold-soft); color:var(--gold-text); }
.upg-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px; max-height:330px; overflow-y:auto; scrollbar-width:thin; }
.upg-cell{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px; cursor:pointer; text-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  color:inherit; font:inherit;
  transition:border-color .12s, transform .12s;
}
.upg-cell:hover{ border-color:var(--gold-line); transform:translateY(-1px); }
.upg-icon{ image-rendering:pixelated; }
.upg-cell-name{ font-size:12px; line-height:1.2; font-weight:600; }
.upg-cell-price{ font-size:11px; color:var(--text-3); }
.upg-cell-chance{ font-size:11px; color:var(--gold-text); font-weight:700; }
.upg-cell-count{ position:absolute; right:6px; top:6px; font-size:11px; color:var(--gold-text); background:var(--panel-2); border-radius:4px; padding:0 4px; font-weight:700; }
.upg-stepper{ display:flex; align-items:center; gap:6px; }
.upg-stepper input{ width:64px; text-align:center; padding:4px; }
.upg-feed{ margin-top:24px; }
.upg-feed h3{ font-size:14px; color:var(--text-2); margin:0 0 8px; }
.upg-feed ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.upg-feed li{ display:flex; gap:8px; align-items:center; font-size:13px; padding:6px 10px; border-radius:var(--r-sm); background:rgba(255,255,255,.02); }
.upg-feed li b{ margin-left:auto; }
.upg-feed li.is-won b{ color:#7ee081; }
.upg-feed li.is-lost b{ color:#ff7a7a; }
.upg-dial.is-won .upg-dial-fill{ stroke:#7ee081; }
.upg-dial.is-lost .upg-dial-fill{ stroke:#ff7a7a; }
.upg-dial.is-lost .upg-dial-track{ stroke:rgba(255,122,122,.18); }
.upg-toast{
  position:fixed; left:50%; bottom:28px; z-index:50;
  transform:translate(-50%, 16px); opacity:0; pointer-events:none;
  max-width:calc(100% - 32px); padding:12px 18px;
  background:#2a1b1b; border:1px solid rgba(255,122,122,.45); border-radius:var(--r);
  color:#ffb3b3; font-size:14px; font-weight:600; box-shadow:var(--shadow);
  transition:opacity .25s ease, transform .25s ease;
}
.upg-toast.is-shown{ opacity:1; transform:translate(-50%, 0); }

/* ===== Рулетка ===== */

.roulette{ padding:22px 20px 24px; border-top:1px solid var(--line); }
.roulette-window{
  position:relative; overflow:hidden; height:116px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, #0f0f12 0%, #17171b 50%, #0f0f12 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.roulette-strip{ display:flex; align-items:center; height:100%; padding:0 12px; will-change:transform; }
.roulette-cell{
  flex:0 0 120px; height:84px; margin-right:12px;
  border:1px solid var(--line-2); border-bottom-width:3px; border-radius:var(--r-sm);
  background:var(--panel-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  text-align:center; padding:6px;
}
.roulette-cell--empty{ opacity:.5; }
.roulette-cell-dot{ width:14px; height:14px; border-radius:50%; }
.roulette-cell-title{ font-size:13px; font-weight:700; }
.roulette-pointer{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; margin-left:-1px;
  background:var(--gold); box-shadow:0 0 14px rgba(226,166,59,.8);
}
.roulette-pointer::before, .roulette-pointer::after{
  content:''; position:absolute; left:-5px;
  border-left:6px solid transparent; border-right:6px solid transparent;
}
.roulette-pointer::before{ top:0; border-top:8px solid var(--gold); }
.roulette-pointer::after{ bottom:0; border-bottom:8px solid var(--gold); }
.roulette-result{ margin:16px 0 0; min-height:22px; text-align:center; font-size:16px; font-weight:700; color:var(--text-2); }
.roulette-result--win{ color:var(--gold-text); }
.roulette-result--fail{ color:#ff9488; }
.roulette-controls{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.roulette-go{ min-width:240px; height:48px; font-size:16px; }
.roulette-go:disabled{ opacity:.6; cursor:default; }
.roulette-balance{ color:var(--text-2); font-size:14px; font-weight:600; }
.roulette-balance b{ color:var(--gold-text); }
.roulette-columns{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.spin-row{ display:flex; align-items:center; gap:10px; font-size:14px; padding:12px 20px; border-top:1px solid var(--line); }
.spin-row .is-muted{ margin-left:auto; font-size:12px; white-space:nowrap; font-weight:600; }
.spin-win{ color:var(--gold-text); font-weight:700; }
.prize-row{ display:flex; align-items:center; gap:12px; }
.prize-dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; }
.prize-title{ flex:1; }
.prize-kind{ font-size:13px; }
.prize-chance{ color:var(--text); min-width:52px; text-align:right; }

/* ===== Узкие экраны ===== */

@media (max-width:1180px){
  .page--withSide{ display:flex; flex-direction:column; }
  .page-side{ position:static; }
  .pf-grid{ grid-template-columns:1fr; }
  .admin-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:980px){
  :root{ --top:56px; }
  .top{ display:flex; }
  .top .avatar{ width:36px; height:36px; }
  .side{ transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow); }
  .side.is-open{ transform:none; }
  .side-scrim{ position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.55); }
  .main{ margin-left:0; }
  .top{ padding:0 16px; }
  .top-burger{ display:inline-flex; }
  .top-brand{ display:block; }
  .top-title{ display:none; }
  .page{ padding:20px 16px 48px; }
  .mc-bar-inner{ padding:10px 16px; }
  .node{ grid-template-columns:44px minmax(0, 1fr); gap:12px 14px; }
  .node-icon{ width:44px; height:44px; padding:11px; }
  .node-stats, .node-extra{ grid-column:2; }
  .node-stats{ flex-direction:row; gap:6px; align-items:baseline; }
  .node-stats span{ flex-direction:row; gap:5px; align-items:baseline; }
  .node-stats b{ font-size:14px; }
  .thread-row{ grid-template-columns:40px minmax(0, 1fr); gap:6px 12px; }
  .thread-row .node-stats, .thread-row .node-extra{ grid-column:2; }
  .thread-row .node-extra-text{ text-align:left; align-items:flex-start; flex-direction:row; gap:6px; }
  .settings{ grid-template-columns:1fr; }
  .settings-nav{ position:static; flex-direction:row; overflow-x:auto; }
  .settings-nav a{ white-space:nowrap; }
  .urow{ grid-template-columns:40px minmax(0, 1fr) auto; }
  .urow-role, .urow-balance{ display:none; }
  .auth{ grid-template-columns:1fr; }
  .auth-art{ display:none; }
  .steps{ grid-template-columns:1fr; }
  .hero{ grid-template-columns:1fr; }
}

@media (max-width:720px){
  .post{ grid-template-columns:1fr; }
  .post-author{
    flex-direction:row; text-align:left; align-items:center; flex-wrap:wrap; gap:10px;
    padding:12px 16px; border-right:0; border-bottom:1px solid var(--line);
  }
  .post-author .avatar{ width:40px; height:40px; margin:0; }
  .post-author-meta{ margin:0 0 0 auto; }
  .post-body{ padding:14px 16px; }
  .post-images img{ max-width:100%; }
  .pf-hero{ height:auto; min-height:300px; border-radius:var(--r); }
  .pf-ident{ position:relative; left:auto; right:auto; bottom:auto; padding:120px 16px 18px; flex-direction:column; align-items:flex-start; gap:12px; }
  .pf-avatar{ width:96px; height:96px; }
  .pf-name{ font-size:26px; }
  .head h1, .thread-head h1{ font-size:21px; }
  .hero{ padding:22px 20px; }
  .hero h1{ font-size:22px; }
  .upg{ padding:18px 12px 20px; }
  .upg-stage{ grid-template-columns:1fr; justify-items:center; }
  .upg-dial{ width:200px; height:200px; }
  .upg-slot{ width:100%; min-height:150px; }
  .upg-columns{ grid-template-columns:1fr; }
  .upg-go{ min-width:0; width:100%; }
  .roulette-columns{ grid-template-columns:1fr; }
  .roulette-go{ width:100%; }
  .admin-grid{ grid-template-columns:1fr; }
  .composer-hint{ display:none; }
  .block-header, .block-minorHeader, .block-row, .side-row, .wall-item, .wall-form, .spin-row{ padding-left:14px; padding-right:14px; }
  .card{ padding:18px 16px; }
  .coin-chip{ padding:0 10px 0 6px; }
  .toasts{ left:16px; right:16px; width:auto; bottom:16px; }
  .field-input, .composer-title, .composer-text, select, textarea, input{ font-size:16px; }
}

@media (hover:none){
  .wall-item form, .chat-del{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}