/* ===============================
   THEME: light / dark (CSS vars)
   =============================== */
:root{
  --bg:#ffffff; --text:#0b0b0e; --muted:#6b7280;
  --card:rgba(255,255,255,.70); --border:rgba(0,0,0,.12);
  --btn:#0b0b0e; --btn-text:#ffffff;
  --btn-2:#e5e7eb; --btn-2-text:#0b0b0e;
  --ring:rgba(99,102,241,.35);

  /* увеличенный глобальный шрифт */
  --fs-base: clamp(20px, 1.6vw + 15px, 22px);
  --fs-h1:   clamp(34px, 5.2vw + 10px, 64px);

}

[data-theme="dark"]{
  --bg:#0a0a0b; --text:#f2f2f3; --muted:#9ca3af;
  --card:rgba(24,24,27,.70); --border:rgba(255,255,255,.12);
  --btn:#ffffff; --btn-text:#0b0b0e;
  --btn-2:rgba(255,255,255,.08); --btn-2-text:#f2f2f3;
  --ring:rgba(255,255,255,.22);
}



/* ===============================
   BASE / LAYOUT
   =============================== */
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  font-size:var(--fs-base);
  background:var(--bg);
}

/* fixed gradient backdrop */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(circle at 20% 30%, rgba(255, 80, 160, 0.35), transparent 75%),
            radial-gradient(circle at 85% 40%, rgba(80, 160, 255, 0.35), transparent 75%),
            var(--bg);

  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* container */
.container{
  max-width:min(1100px, 100%);
  margin:0 auto;
  padding:20px clamp(14px, 3.2vw, 28px);
}

/* ===============================
   TOPBAR
   =============================== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:8px; font-weight:700; }
.badge{ font-size:13px; color:var(--muted); border:1px solid var(--border); border-radius:8px; padding:2px 6px; }
.actions{ display:flex; align-items:center; gap:14px; }

/* ===============================
   HERO
   =============================== */
.hero{ padding-top:90px; padding-bottom:60px; }
.hero h1{ font-size:var(--fs-h1); line-height:1.15; margin:22px 0 8px; }
.hero p{ color:var(--muted); font-size:16px; margin:0 0 18px; }

/* ===============================
   FILTERS (pill style)
   =============================== */
.filters{
  display:grid; gap:10px;
  grid-template-columns:1fr 220px 120px;
}
.input-pill,.select-pill{
  height:48px; width:100%; border-radius:999px; padding:0 14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  color:var(--text); outline:none;
  transition:box-shadow .12s ease,border-color .12s ease,background .12s ease;
}
.input-pill::placeholder{ color:color-mix(in srgb, var(--muted) 70%, transparent); }
.select-pill{ appearance:none; }
.input-pill:focus,.select-pill:focus{ box-shadow:0 0 0 3px var(--ring); }

/* ===============================
   BUTTONS
   =============================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  text-decoration:none; border:none; outline:0; cursor:pointer;
  background:var(--btn); color:var(--btn-text);
  height:48px; padding:0 18px; border-radius:14px;
  font-size:15px; font-weight:600;
  transition:transform .06s ease,opacity .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;
  user-select:none;
}
.btn:hover{ opacity:.94; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:focus-visible{ box-shadow:0 0 0 3px var(--ring); }
.btn.secondary{ background:var(--btn-2); color:var(--btn-2-text); }
.btn.outline{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn.ghost{ background:transparent; color:var(--text); }
.btn.block{ width:100%; }
a.btn, a.btn.secondary, a.btn.outline, a.btn.ghost{ text-decoration:none !important; }

/* ===============================
   CARDS (server list)
   =============================== */
.listing{
  display:grid; gap:22px; margin:20px 0 90px;
  /* single wide card centered (like screenshot #2) */
  grid-template-columns:1fr;
  max-width:960px;
  margin-left:auto; margin-right:auto;
}
.card{
  border:1px solid var(--border); border-radius:18px;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
  container-type:inline-size; /* enable container queries if needed later */
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  border-color:color-mix(in srgb, var(--border) 40%, transparent);
}
.card-head{ display:flex; align-items:center; gap:14px; padding:14px 14px 8px; }

/* icon */
.icon{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  font-size:26px;
}
.icon img{
  width:100%; height:100%; object-fit:contain;
  padding:4px; border-radius:16px; display:block;
  background:color-mix(in srgb, var(--bg) 96%, transparent);
}

/* title/meta */
.title{ min-width:0; flex:1; }
.name-line{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:17px; }
.rank{ opacity:.6; font-size:15px; }
.name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.star{ color:#fbbf24; }
.tagline{ color:var(--muted); font-size:15px; }

/* ping */
.ping{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
.ping-dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
.ping-good{ background:#10b981; } .ping-mid{ background:#f59e0b; } .ping-bad{ background:#f43f5e; }

/* actions */
.card-actions{
  display:grid; gap:12px; padding:12px 14px;
  grid-template-columns:1fr auto; /* Vote stretches, Visit compact right */
  align-items:center;
}
.card-actions .btn:first-child{ width:100%; }        /* Vote */
.card-actions .btn:last-child{ min-width:120px; }    /* Visit */
.updated{ color:var(--muted); font-size:13px; padding:0 14px 14px; }

/* vote tiers */
.card.tier-rare{ box-shadow:0 12px 30px rgba(50,120,255,.15); }
.card.tier-epic{ box-shadow:0 14px 38px rgba(180,70,255,.18); border-color:rgba(180,70,255,.25); }
.card.tier-legendary{ box-shadow:0 18px 48px rgba(255,160,40,.22); border-color:rgba(255,160,40,.35); }

/* ===============================
   MODALS (base)
   =============================== */
.modal{ position:fixed; inset:0; display:grid; place-items:center; z-index:50; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal-card{
  position:relative;
  width:min(100vw - 24px, 560px); /* вместо min-width чтобы не ломать телефоны */
  max-height:calc(100dvh - 24px);
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:16px;
  padding:22px; box-shadow:0 18px 42px rgba(0,0,0,.45);
  overflow:auto;
}
.modal-title{ font-weight:700; font-size:20px; margin-bottom:12px; }
.input{
  width:100%; height:48px; border:1px solid var(--border); border-radius:14px;
  padding:0 12px; background:color-mix(in srgb, var(--bg) 92%, transparent); color:var(--text);
  outline:none; transition:box-shadow .12s ease,border-color .12s ease;
}
.input:focus{ box-shadow:0 0 0 3px var(--ring); }
.checkbox{ display:flex; align-items:center; gap:10px; color:var(--text); font-size:15px; }
.modal-actions{ display:flex; justify-content:flex-end; gap:16px; margin-top:24px; }
.modal-actions .btn{ min-width:110px; }

/* ===============================
   AUTH MODAL (auth-card)
   =============================== */
.auth-card{
  width:min(100vw - 24px, 640px);
  padding:26px 26px 22px; border-radius:22px;
  background:color-mix(in srgb, var(--bg) 98%, white 2%);
  box-shadow:0 24px 60px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] .auth-card{
  background:color-mix(in srgb, var(--bg) 96%, white 4%);
  box-shadow:0 28px 66px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.04);
}
.auth-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal-subtitle{ color:var(--muted); font-size:14px; }
.field{ margin-top:16px; }
.label{ display:block; font-size:13px; font-weight:700; margin-bottom:8px; }
.input.input-lg{ height:52px; border-radius:14px; padding:0 14px; border:1px solid var(--border); background:color-mix(in srgb, var(--bg) 96%, transparent); }
.input.input-lg:focus{ box-shadow:0 0 0 3px var(--ring); outline:none; }

/* role segmented control */
.segmented{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  padding:6px; border-radius:16px; border:1px solid var(--border);
}
.segmented input[type="radio"]{ display:none; }
.segmented-item{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:46px; border-radius:12px; cursor:pointer;
  font-weight:700; font-size:14px; color:var(--text);
  background:transparent; border:1px dashed transparent;
  transition:background .12s ease,border-color .12s ease,box-shadow .12s ease,transform .06s ease;
}
.segmented-item:hover{ background:color-mix(in srgb, var(--bg) 90%, transparent); }
.seg-badge{ font-size:16px; opacity:.9; }
.seg-hint{ font-weight:600; opacity:.65; margin-left:4px; font-size:12px; }
#role-participant:checked + label.segmented-item,
#role-admin:checked + label.segmented-item{
  background:var(--btn-2); color:var(--btn-2-text);
  border-color:color-mix(in srgb, var(--border) 40%, transparent);
  box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.03);
}

/* auth tabs */
.auth-card .tabs{ display:flex; gap:8px; margin:6px 0 12px; }
.auth-card .tab{
  height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 94%, white 6%);
  font-weight:700; font-size:13px; cursor:pointer;
}
.auth-card .tab.active{
  background:var(--btn-2); color:var(--btn-2-text);
  border-color:color-mix(in srgb, var(--border) 40%, transparent);
}
.auth-card .tab-panel{ display:none; }
.auth-card .tab-panel.active{ display:block; }

/* ===============================
   TOAST
   =============================== */
.toast{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  background:var(--bg); color:var(--text);
  border:1px solid var(--border); padding:10px 14px; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

/* ===============================
   FOOTER
   =============================== */
.footer{ border-top:1px solid var(--border); color:var(--muted); font-size:12px; padding:20px 0; }

/* ===============================
   ADD SERVER modal extras
   =============================== */
.add-server-card{
  max-width:680px; border-radius:22px; background:var(--bg);
  box-shadow:0 26px 60px rgba(0,0,0,.28);
  -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto;
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px){ .field-row{ grid-template-columns:1fr; } }
.label-row{ display:flex; align-items:center; justify-content:space-between; }
.counter{ font-size:12px; color:var(--muted); }
.hint{ margin-top:6px; font-size:12px; color:var(--muted); }
.add-server-card .input{ background:var(--bg); border:1px solid var(--border); color:var(--text); }
.add-server-card .input:focus{ box-shadow:0 0 0 3px var(--ring); }
.textarea-lg{ min-height:110px; resize:none; line-height:1.45; padding-top:10px; padding-bottom:10px; }
.input-group{ position:relative; }
.input-prefix{ position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.8; }
.input-group .input{ padding-left:36px; }
.add-server-card .modal-actions{ justify-content:space-between; }
.add-server-card .modal-actions .btn{ min-width:140px; }

/* ===============================
   USER BADGE FLOAT
   =============================== */
.user-float{
  position:fixed; right:10px; bottom:3px; z-index:40;
  background:var(--card); color:var(--muted);
  border:1px solid var(--border); padding:8px 12px; border-radius:12px;
  font-size:13px; line-height:1; backdrop-filter:blur(6px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  /* по умолчанию ВИДИМА */
  opacity:1; transform:none;
}

/* Анимацию включаем только если движения не отключены в системе */
@media (prefers-reduced-motion: no-preference){
  .user-float{
    opacity:0; transform:translateY(8px);
    animation:userFloatIn .28s ease forwards;
  }
  @keyframes userFloatIn{ to{ opacity:1; transform:translateY(0); } }
}

/* На случай глобального рубильника — гарантированный фолбэк */
@media (prefers-reduced-motion: reduce){
  .user-float{ opacity:1 !important; transform:none !important; animation:none !important; }
}


/* ===============================
   RESPONSIVE
   =============================== */
@media (max-width:1024px){ .container{ max-width:920px; } }

@media (max-width:840px){
  .filters{ grid-template-columns:1fr 1fr; }
  .card-head{ align-items:flex-start; }
  .ping{ margin-left:auto; }
}

@media (max-width:640px){
  .hero{ padding-top:70px; padding-bottom:46px; }
}

@media (max-width:520px){
  .filters{ grid-template-columns:1fr; }
  .card-actions{ grid-template-columns:1fr; }
  .card-actions .btn:last-child{ width:100%; }
}

/* micro screens 320–360 */
@media (max-width:360px){
  .icon{ width:48px; height:48px; border-radius:14px; }
  .name-line{ font-size:16px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .card:hover{ transform:none !important; }
}

/* === Mobile Filters: 2 inputs сверху, Apply — на всю ширину ниже === */
@media (max-width: 640px){
  .filters{
    grid-template-columns: 1fr 1fr !important;  /* две колонки для инпутов */
    grid-auto-rows: 48px;
    gap: 10px;
  }

  /* 1) Search (первый элемент) — левая колонка, верхняя строка */
  .filters > :nth-child(1){
    grid-column: 1;
    grid-row: 1;
  }

  /* 2) Select (второй элемент) — правая колонка, верхняя строка */
  .filters > :nth-child(2){
    grid-column: 2;
    grid-row: 1;
  }

  /* 3) Apply (третий элемент) — на всю ширину, строкой ниже */
  .filters > :nth-child(3){
    grid-column: 1 / -1;  /* занять обе колонки */
    grid-row: 2;
    height: 48px;
    align-self: stretch;
    width: 100%;
  }
  .filters > :nth-child(3).btn{
    width: 100%;
    border-radius: 14px;
    padding-inline: 18px;
  }
}

/* Очень узкие экраны — можно чуть ниже высоту ряда */
@media (max-width: 360px){
  .filters{ grid-auto-rows: 44px; }
}

/* meta chips under title */
.meta-row{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:4px;
  color:var(--muted); font-size:14px;
}
.meta{
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 96%, transparent);
}
.meta-ok{ background:color-mix(in srgb, #10b981 12%, var(--bg)); border-color:color-mix(in srgb, #10b981 25%, var(--border)); }
.meta-dim{ opacity:.8; }

/* description clamp with toggle */
.desc{
  padding:6px 14px 0; color:var(--muted); font-size:14px; line-height:1.5;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; max-height:calc(1.5em * 3);
}
.desc.open{ -webkit-line-clamp:unset; max-height:none; }
.desc-more{
  margin:4px 14px 0; padding:0; background:transparent; border:0;
  color:var(--muted); font-size:13px; cursor:pointer;
}

/* Visit показывает домен — не даём переносить точку на новую строку */
.btn.outline.block{ white-space:nowrap; }

/* ===== Nice Select (custom dropdown) ===== */
.nice-select{ position:relative; display:inline-block; width:100%; }
.nice-select .nice-trigger{
  width:100%; height:48px; border-radius:12px;
  padding:0 42px 0 16px; text-align:left;
  background: color-mix(in srgb, var(--bg) 92%, white 8%);
  border:1px solid rgba(0,0,0,.10);
  color:var(--text); font-size:15px; font-weight:500;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  cursor:pointer;
}
.nice-select .nice-trigger:focus{ outline:none; box-shadow:0 0 0 4px var(--ring); border-color: color-mix(in srgb, var(--ring) 60%, transparent); }

/* стрелка */
.nice-select .nice-trigger::after{
  content:""; position:absolute; right:14px; top:50%; width:8px; height:8px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.nice-select.open .nice-trigger::after{ transform: translateY(-30%) rotate(-135deg); }

/* панель списка */
.nice-select .nice-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px);
  background: var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  padding:6px; margin:0; list-style:none;
  max-height:280px; overflow:auto; z-index:60;
  display:none;
}
.nice-select.open .nice-list{ display:block; }

/* пункты */
.nice-option{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px; border-radius:10px; cursor:pointer;
  color:var(--text); font-size:15px; white-space:nowrap;
}
.nice-option:hover,
.nice-option[aria-selected="true"]{
  /* чуть притеняем фоном, завязанным на текстовый цвет */
  background: color-mix(in srgb, var(--text) 8%, var(--bg));
  /* тонкая внутренняя обводка, чтобы выбранный пункт читался */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ring) 40%, transparent);
}

.nice-option .tick{
  margin-left:auto; opacity:.7; font-size:14px; display:none;
}
.nice-option[aria-selected="true"] .tick{ display:inline; }

/* прячем оригинальный селект, но оставляем в потоке для формы */
.select-pill.js-nice-select{ opacity:0; width:0; height:0; position:absolute; pointer-events:none; }

/* на тач-устройствах оставляем нативный селект */
@media (hover:none) and (pointer:coarse){
  .select-pill.js-nice-select{ opacity:1; width:100%; height:48px; position:static; pointer-events:auto; }
  .nice-select{ display:none; }
}

@media (max-width: 640px){
  /* Apply — всегда на всю ширину */
  .filters > button.btn {
    width: 100% !important;
    display: block;
    justify-content: center;
    grid-column: 1 / -1;   /* обе колонки */
    height: 48px;
    border-radius: 14px;
    padding-inline: 18px;
  }
}


/* 1) Карточка в тёмной теме — чуть светлее фона, без серости */
[data-theme="dark"] .card{
  background: #141416;                    /* фиксированный графит, не уводит в серый */
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.38);
}
/* 2) Кнопки внутри карточки — цвета не меняем */
[data-theme="dark"] .card .btn{
  background: var(--btn);                 /* остаётся белой */
  color: var(--btn-text);
}
[data-theme="dark"] .card .btn.outline{
  background: transparent !important;     /* контурная — прозрачная, как и должна */
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .card .btn.secondary{
  background: var(--btn-2);
  color: var(--btn-2-text);
}

* {
  user-select: none !important;
}
input, textarea {
  user-select: text !important;
}

.desc{
  padding:6px 14px 0; color:var(--muted); font-size:14px; line-height:1.55;
  white-space: pre-line;              /* <— было normal, стало pre-line */
  overflow-wrap:anywhere; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; max-height:calc(1.55em * 3);
}
.desc.open{
  -webkit-line-clamp:unset;
  max-height:none;
}


/* LIGHT — эффектный, но воздушный */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    /* левое тёплое облако (розовый) */
    radial-gradient(1400px 900px at 12% 30%,
      rgba(255, 90, 170, 0.42) 0%,
      rgba(255, 90, 170, 0.22) 38%,
      transparent 72%),
    /* правое холодное облако (голубой) */
    radial-gradient(1600px 1000px at 88% 22%,
      rgba( 86, 170, 255, 0.40) 0%,
      rgba( 86, 170, 255, 0.20) 40%,
      transparent 76%),
    /* лёгкий фиолетовый шлейф сверху для объёма */
    radial-gradient(900px 600px at 50% -10%,
      rgba(140, 120, 255, 0.12) 0%,
      transparent 70%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* DARK — глубже и спокойнее, акценты приглушены, но читаемы */
[data-theme="dark"] body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    /* левое тёплое облако (магентовое), помягче */
    radial-gradient(1200px 800px at 14% 24%,
      rgba(255, 95, 180, 0.22) 0%,
      rgba(255, 95, 180, 0.14) 32%,
      transparent 68%),
    /* правое холодное облако (сине-голубое) */
    radial-gradient(1400px 900px at 86% 18%,
      rgba( 80, 170, 255, 0.20) 0%,
      rgba( 80, 170, 255, 0.12) 36%,
      transparent 72%),
    /* глубокий фиолетовый купол сверху для «сцены» */
    radial-gradient(1200px 900px at 50% -10%,
      rgba( 90,  40, 160, 0.25) 0%,
      transparent 70%),
    var(--bg);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

/* ===============================
   AUTH TABS — всегда контрастные
   =============================== */
.auth-card .tabs{
  display:flex; gap:8px; margin:6px 0 12px;
}

.auth-card .tab{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; border-radius:10px;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  /* фоновая «пилюля» под обе темы */
  background:color-mix(in srgb, var(--bg) 94%, white 6%);
  color:color-mix(in srgb, var(--muted) 92%, var(--text) 8%);
  font-weight:700; font-size:13px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
[data-theme="dark"] .auth-card .tab{
  /* в дарке делаем пилюлю чуть светлее, чтобы текст читался */
  background:color-mix(in srgb, var(--bg) 86%, #ffffff 14%);
  color:color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
  border-color:rgba(255,255,255,.16);
}

.auth-card .tab:hover{
  background:color-mix(in srgb, var(--bg) 88%, white 12%);
  color:var(--text);
}
[data-theme="dark"] .auth-card .tab:hover{
  background:color-mix(in srgb, var(--bg) 82%, #ffffff 18%);
}

.auth-card .tab:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
}

/* активная вкладка — всегда супер-контрастная */
.auth-card .tab.active{
  background:var(--btn);           /* светлая тема — чёрная пилюля */
  color:var(--btn-text);           /* белый текст */
  border-color:transparent;
}
[data-theme="dark"] .auth-card .tab.active{
  background:#ffffff;              /* тёмная тема — белая пилюля */
  color:#0b0b0e;                   /* тёмный текст */
  border-color:transparent;
}

/* === LEGENDARY — тёплое золото, но без выжига кнопок === */

/* Светлая тема */
:root:not([data-theme="dark"]) .card.tier-legendary {
  background: linear-gradient(145deg,
    #fff4b1 0%,
    #ffe37a 35%,
    #ffd33b 70%,
    #ffb400 100%
  );
  border: 1px solid rgba(255, 180, 40, 0.9);
  box-shadow:
    0 0 12px rgba(255, 190, 60, 0.4),
    0 0 28px rgba(255, 170, 20, 0.3);
}

/* Тёмная тема */
[data-theme="dark"] .card.tier-legendary {
  background: linear-gradient(145deg,
    #1a1200 0%,
    #2a1a00 25%,
    #3b2400 50%,
    #8c5a00 85%,
    #d28f14 100%
  );
  border: 1px solid rgba(255, 190, 60, 0.7);
  box-shadow:
    0 0 10px rgba(255, 160, 40, 0.25),
    0 0 20px rgba(255, 140, 30, 0.15),
    inset 0 0 8px rgba(255, 200, 80, 0.08);
}

/* Исправляем контраст кнопок внутри золотых карточек */
.card.tier-legendary .btn {
  background: var(--btn);
  color: var(--btn-text);
}

/* === Только Visit-кнопка (outline) === */

/* Светлая тема: белая кнопка, чёрный текст */
:root:not([data-theme="dark"]) .card.tier-legendary .btn.outline {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.15);
  font-weight: 600;
}

/* Тёмная тема: чёрная кнопка, белый текст */
[data-theme="dark"] .card.tier-legendary .btn.outline {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25);
  font-weight: 600;
}

/* Hover — мягкое поведение */
.card.tier-legendary .btn.outline:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255, 220, 120, 0.4);
}



/* === EPIC === */
:root:not([data-theme="dark"]) .card.tier-epic {
  background: linear-gradient(145deg, #f2e7ff 0%, #e6d5ff 100%);
  border: 1px solid rgba(180, 70, 255, 0.45);
  box-shadow: 0 0 26px rgba(180, 70, 255, 0.28);
}
[data-theme="dark"] .card.tier-epic {
  background: linear-gradient(145deg, #22082b 0%, #350a44 100%);
  border: 1px solid rgba(190, 90, 255, 0.55);
  box-shadow: 0 0 28px rgba(190, 90, 255, 0.4);
}

/* === RARE === */
:root:not([data-theme="dark"]) .card.tier-rare {
  background: linear-gradient(145deg, #e8f0ff 0%, #d8e4ff 100%);
  border: 1px solid rgba(80, 140, 255, 0.4);
  box-shadow: 0 0 24px rgba(80, 140, 255, 0.25);
}
[data-theme="dark"] .card.tier-rare {
  background: linear-gradient(145deg, #07182c 0%, #0d2740 100%);
  border: 1px solid rgba(100, 160, 255, 0.5);
  box-shadow: 0 0 26px rgba(100, 160, 255, 0.35);
}

/* ховер — не убивать тени */
.card:hover:not(.tier-rare):not(.tier-epic):not(.tier-legendary){
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
}


/* ======================================================
   FEATURED (v3): VIP-оверлей + CTA-пульс, без смены фона
   Сохраняем цвет тира. Legendary+Featured → платина.
   ====================================================== */

/* Базовые VIP-переменные (по умолчанию – нейтральная платина) */
.card.featured{
  --vip1: rgba(220,230,245,.28);   /* основной оверлей */
  --vip2: rgba(175,190,215,.20);   /* градиентная пара */
  --vipGlow: rgba(160,180,220,.40);/* внешнее свечение */
  --vipSheen: rgba(255,255,255,.14); /* блик-скан */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Rare/Epic получают оверлей в своём цветовом ключе */
.card.tier-rare.featured {
  --vip1: rgba(80,140,255,.28);
  --vip2: rgba(120,170,255,.20);
  --vipGlow: rgba(80,140,255,.38);
  --vipSheen: rgba(255,255,255,.14);
}
.card.tier-epic.featured {
  --vip1: rgba(190,90,255,.28);
  --vip2: rgba(220,140,255,.20);
  --vipGlow: rgba(190,90,255,.40);
  --vipSheen: rgba(255,255,255,.16);
}

/* Legendary+Featured — платиновый (чётко отличается от золотого тира) */
:root:not([data-theme="dark"]) .card.tier-legendary.featured{
  --vip1: rgba(240,244,252,.30);
  --vip2: rgba(200,210,232,.20);
  --vipGlow: rgba(150,170,210,.42);
  --vipSheen: rgba(255,255,255,.22);
}
[data-theme="dark"] .card.tier-legendary.featured{
  --vip1: rgba(40,48,62,.30);
  --vip2: rgba(58,67,80,.20);
  --vipGlow: rgba(120,150,210,.40);
  --vipSheen: rgba(255,255,255,.10);
}

.card.featured{ background: inherit !important; }

.card.featured{
  box-shadow:
    inset 0 -70px 120px rgba(0,0,0,.14),
    inset 0  20px  70px rgba(255,255,255,.05);
}

.card.featured::before{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit;
  background: linear-gradient(135deg, var(--vip1), var(--vip2));
  filter: blur(14px);
  opacity:.75;
  z-index:-1;
  animation: vipGlow 3.2s ease-in-out infinite alternate;
}
@keyframes vipGlow{
  from{ opacity:.38; filter: blur(12px); }
  to  { opacity:.82; filter: blur(18px); }
}

.card.featured::after{
  content:"";
  position:absolute; inset:-30%;
  background: linear-gradient(115deg, transparent 44%, var(--vipSheen) 50%, transparent 56%);
  transform: translateX(-120%);
  animation: vipSheen 6.5s linear infinite;
  mix-blend-mode: screen;
  pointer-events:none;
}
@keyframes vipSheen{
  0%{   transform: translateX(-120%) rotate(.001deg); }
  100%{ transform: translateX(120%)  rotate(.001deg); }
}

.featured-badge{
  position:absolute; top:10px; right:12px;
  padding:4px 10px; border-radius:14px;
  font-size:12px; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
  color:#0b0f14;
  background: linear-gradient(90deg,#f1f5f9,#d8e0ea);
  box-shadow: 0 0 8px var(--vipGlow);
  z-index:1;
}
[data-theme="dark"] .featured-badge{
  color:#fff;
  background: linear-gradient(90deg,#3a4350,#56627a);
}

.card.featured .icon img,
.card.featured .icon span{
  filter: drop-shadow(0 0 6px var(--vipGlow));
}

.card.featured:hover{
  transform: translateY(-1px);
  transition: transform .2s ease;
}


:root:not([data-theme="dark"]) .card.featured .btn.block:not(.outline){
  animation: votePulseLight 2.4s ease-in-out infinite;
}
[data-theme="dark"] .card.featured .btn.block:not(.outline){
  animation: votePulseDark 2.4s ease-in-out infinite;
}
@keyframes votePulseLight{
  0%,100%{ transform: translateY(0); box-shadow: none; }
  50%    { transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,0,0,.18); }
}
@keyframes votePulseDark{
  0%,100%{ transform: translateY(0); box-shadow: none; }
  50%    { transform: translateY(-1px); box-shadow: 0 0 22px rgba(255,255,255,.28); }
}

:root:not([data-theme="dark"]) .card.featured .btn.outline{
  animation: ctaPulseLight 2.8s ease-in-out infinite;
  animation-delay: .9s;
}
[data-theme="dark"] .card.featured .btn.outline{
  animation: ctaPulseDark 2.8s ease-in-out infinite;
  animation-delay: .9s;
}
@keyframes ctaPulseLight{
  0%,100%{ transform: translateY(0) scale(1); box-shadow: none; }
  50%    { transform: translateY(-1px) scale(1.01);
           box-shadow: 0 0 18px rgba(0,0,0,.12), 0 0 0 8px rgba(0,0,0,.04); }
}
@keyframes ctaPulseDark{
  0%,100%{ transform: translateY(0) scale(1); box-shadow: none; }
  50%    { transform: translateY(-1px) scale(1.01);
           box-shadow: 0 0 22px rgba(255,255,255,.18), 0 0 26px var(--vipGlow); }
}

@media (prefers-reduced-motion: reduce){
  .card.featured,
  .card.featured::before,
  .card.featured::after,
  .card.featured .btn.block,
  .card.featured .btn.outline{
    animation: none !important;
    transition: none !important;
  }
}



:root:not([data-theme="dark"]) .card .btn.outline {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  font-weight: 600;
}

[data-theme="dark"] .card .btn.outline {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  font-weight: 600;
}

:root:not([data-theme="dark"]) .card .btn.outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(0,0,0,.10);
}
[data-theme="dark"] .card .btn.outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(255,255,255,.18);
}

.card .btn.outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.card.tier-rare.featured {
  --vip1: rgba(50,120,255,.25);
  --vip2: rgba(20,90,255,.35);
  --vipGlow: rgba(80,160,255,.55);
  --vipSheen: rgba(255,255,255,.12);
  box-shadow:
    0 0 35px rgba(60,130,255,.35),
    inset 0 0 50px rgba(20,90,255,.2);
}
.card.tier-rare.featured::before {
  filter: blur(20px);
  opacity: .8;
}


.card.featured,
.card.featured .title,
.card.featured .desc,
.card.featured .meta,
.card.featured .updated {
  color: color-mix(in srgb, var(--text), black 18%) !important;
}
[data-theme="dark"] .card.featured,
[data-theme="dark"] .card.featured .title,
[data-theme="dark"] .card.featured .desc,
[data-theme="dark"] .card.featured .meta,
[data-theme="dark"] .card.featured .updated {
  color: color-mix(in srgb, var(--text), white 12%) !important;
}

.card.featured{
  box-shadow:
    inset 0 -90px 160px rgba(0,0,0,.20),
    inset 0  30px  90px rgba(255,255,255,.06),
    inset 0  0     1px rgba(0,0,0,.28) !important;
}

.card.featured .btn,
.card.featured .name-line,
.card.featured .meta,
.card.featured .updated {
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
[data-theme="dark"] .card.featured .btn,
[data-theme="dark"] .card.featured .name-line,
[data-theme="dark"] .card.featured .meta,
[data-theme="dark"] .card.featured .updated {
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}


.card .btn.block:not(.outline) {
  font-weight: 550 !important;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

:root:not([data-theme="dark"]) .card .btn.block:not(.outline) {
  color: #fff !important;
}

[data-theme="dark"] .card .btn.block:not(.outline) {
  color: #0b0b0e !important;
}

.card .btn.block:not(.outline):hover {
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
[data-theme="dark"] .card .btn.block:not(.outline):hover {
  box-shadow: 0 0 16px rgba(255,255,255,0.18);
}


#premiumBtn.active {
  background: var(--btn);
  color: var(--btn-text);
  border-color: color-mix(in srgb, var(--border) 40%, transparent);
  box-shadow: 0 0 10px rgba(0,0,0,.15);
}
[data-theme="dark"] #premiumBtn.active {
  background: #ffffff;
  color: #0b0b0e;
  box-shadow: 0 0 12px rgba(255,255,255,.25);
}

.add-server-card .premium-offer{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  margin-left:6px;
  border:1px solid var(--border);
  border-radius:999px;
  background: var(--card-2, #f7f8fc);
  color: var(--fg, #0b0d12);
  font-weight:600;
  font-size:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  white-space:nowrap;
}

#premiumBtn.active{
  background: var(--btn, #0b0b0f);
  color: var(--btn-text, #fff);
  border-color: color-mix(in srgb, var(--border, #e6e8ef) 40%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px rgba(0,0,0,.03);
}


.card .icon{
  --icon-size: 80px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.card .icon img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block; background:transparent;
}

.card .icon.is-contain img{ object-fit:contain; padding:8px; }

[data-theme="light"] .card .icon.is-contain{
  background: #e9eef5;
  border: 1px solid #dfe3ea;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

[data-theme="light"] .card .icon.is-contain img{
  filter: contrast(1.18) saturate(1.06);
}

[data-theme="dark"] .card .icon{
  background: #151a22;
  border: 1px solid rgba(255,255,255,.07);
}
[data-theme="dark"] .card .icon.is-contain{
  background: #0f141b;
}


@media (max-width:640px){ .card .icon{ --icon-size: 70px; } }
@media (max-width:400px){ .card .icon{ --icon-size: 58px; } }




.card .icon{
  --icon-size: 80px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid var(--icon-border, #e1e6ef);
  background: var(--icon-bg, #e9eef5);
}

.card .icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.card .icon.is-contain img{
  object-fit: contain;
  padding: 8px;
}

:root[data-theme="light"] .card .icon{
  --icon-bg: #d9e1ea;          /* заметно темнее предыдущего */
  --icon-border: #cfd6e1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
:root[data-theme="dark"] .card .icon{
  --icon-bg: #0f141b;
  --icon-border: rgba(255,255,255,.08);
}

:root[data-theme="light"] .card .icon.is-contain img{
  filter: contrast(1.2) saturate(1.05) brightness(0.92);
}

@media (max-width:640px){ .card .icon{ --icon-size: 70px; } }
@media (max-width:400px){ .card .icon{ --icon-size: 58px; } }


:root[data-theme="light"] .card .icon{
  --icon-bg: #c7d0dc;
  --icon-border: #bac3cf;
  background: var(--icon-bg, #c7d0dc);
  border: 1px solid var(--icon-border, #bac3cf);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

:root[data-theme="light"] .card .icon.is-contain img{
  filter: brightness(0.92) contrast(1.2)
          drop-shadow(0 0 0 rgba(0,0,0,.35))
          drop-shadow(0 1px 2px rgba(0,0,0,.25));
  padding: 8px;
}

:root[data-theme="dark"] .card .icon.is-contain img{
  filter: none;
}

.card .icon{
  --icon-size: 80px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.card .icon img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center;
  display:block;
  background: transparent;
}
.card .icon.is-contain img{
  object-fit: contain;
}
@media (max-width:640px){ .card .icon{ --icon-size: 70px; } }
@media (max-width:400px){ .card .icon{ --icon-size: 58px; } }

.card .icon{
  --icon-size: 80px;
  width: var(--icon-size);
  height: var(--icon-size);
  min-width: var(--icon-size);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
  flex-shrink: 0;
}

.card .icon img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: none;
}

.card .icon.is-contain img{
  object-fit: contain;
  transform: scale(1.06);
}

.icons-ready .card .icon img{
  transition: transform .2s ease, filter .2s ease;
}


.select-pill.js-nice-select{
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 48px;
  position: static;
  pointer-events: none;
}

.filters .btn {
  min-height: 48px;
  line-height: 48px;
  padding: 0 18px;
  min-width: 84px;
  box-sizing: border-box;
}
.hide{ display:none !important; }


.grecaptcha-badge {
  visibility: hidden !important;
}

:root{
  --topbar-h: 56px;     
  --footer-h: 40px;     
}

main.container{
  min-height: calc(100vh - var(--topbar-h) - var(--footer-h));
}

.recaptcha-footer {
  position: static;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  border-top: 1px solid var(--border);
  padding: 4px 8px;          
  line-height: 1.4;        
  user-select: none;
  backdrop-filter: blur(4px);
  height: auto;              
  box-sizing: border-box;
}

.recaptcha-footer a {
  color: var(--link, var(--btn));
  text-decoration: none;
}
.recaptcha-footer a:hover {
  text-decoration: underline;
}




.select-pill.js-nice-select{
  /* visibility: hidden;  ← УДАЛИТЬ */
  opacity: 0;
  width: 100%;
  height: 48px;
  position: static;
  pointer-events: none;
}

/* МОБИЛЬНЫЕ — показываем нативный select */
@media (hover:none) and (pointer:coarse){
  .select-pill.js-nice-select{
    visibility: visible !important;  /* ← ДОБАВИТЬ */
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100%;
    height: 48px;
    position: static;
  }
  .nice-select{ display:none; }
}

/* Кнопки внутри модалки авторизации — аккуратные, без жёстких контрастов */
.auth-card .btn{
  height: 48px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: none;
}

.auth-card .btn.outline{
  background: transparent !important;      /* вернуть норм outline */
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.auth-card .btn.secondary{
  background: var(--btn-2) !important;
  color: var(--btn-2-text) !important;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

/* Чуть усилить hover в модалке — без «вспышек» */
.auth-card .btn:hover{ opacity: .95; transform: translateY(0); }
.auth-card .btn.outline:hover{
  background: color-mix(in srgb, var(--bg) 94%, white 6%);
}
[data-theme="dark"] .auth-card .btn.outline:hover{
  background: color-mix(in srgb, var(--bg) 84%, #fff 16%);
}

@media (max-width: 640px){
  .filters{ grid-template-columns: 1fr 1fr !important; }
  .filters > .input-pill{ grid-column: 1; grid-row: 1; }
  .filters > .select-pill,
  .filters > .nice-select{ grid-column: 2; grid-row: 1; }
  .filters > .btn{ grid-column: 1 / -1; grid-row: 2; }
}

/* =========================
   1) MOBILE: Показать нативный select хроник
   ========================= */
@media (hover:none) and (pointer:coarse){
  /* гарантированно показываем сам <select> и скрываем кастомную обёртку */
  select.js-nice-select,
  .select-pill.js-nice-select{
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    pointer-events: auto !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
  }
  .nice-select{ display:none !important; }
}

/* на всякий случай — если правило выше не сработало, прижимаем сильнее */
html body select.js-nice-select{ opacity:1 !important; }

/* =========================
   2) AUTH: нормальный вид кнопок в модалке
   ========================= */
.auth-card .modal-actions{ gap:12px; }

.auth-card .modal-actions .btn{
  height: 48px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: none;            /* без «планок» */
  transform: none;             /* не прыгают */
}

.auth-card .modal-actions .btn:hover{
  opacity: .96;
  transform: translateY(0);
}

/* “Cancel” делаем контурной, а не серой планкой */
.auth-card .modal-actions .btn.secondary{
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* если “Sign in” приходит как .outline — делаем его лёгкой пилюлей */
.auth-card .modal-actions .btn.outline{
  background: color-mix(in srgb, var(--bg) 94%, white 6%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] .auth-card .modal-actions .btn.outline{
  background: color-mix(in srgb, var(--bg) 84%, #fff 16%) !important;
}

/* =========================
   AUTH: кнопки Continue / Cancel на мобилках — не на всю ширину
   ========================= */
@media (max-width: 640px) {
  .auth-card .modal-actions {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .auth-card .modal-actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 140px !important;
    padding: 0 18px !important;
  }
}

button, a, .btn, input, textarea {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

@media (max-width: 640px) {
  :root {
    --fs-base: clamp(15px, 3.5vw + 10px, 17px);
    --fs-h1:   clamp(26px, 6vw + 8px, 36px);
  }

  .btn {
    height: 44px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
  }

  .input-pill, .select-pill {
    height: 44px;
    font-size: 15px;
    border-radius: 999px;
  }

  .hero {
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .auth-card {
    padding: 20px;
    border-radius: 18px;
  }

  .auth-card .btn {
    height: 44px;
    border-radius: 10px;
    font-size: 14px;
  }

  .filters {
    gap: 8px;
  }

  .card {
    border-radius: 14px;
  }

  .card .icon {
    --icon-size: 60px;
  }

  .name-line {
    font-size: 15px;
  }

  .meta, .desc, .updated {
    font-size: 13px;
  }

  .toast {
    font-size: 10px;
    padding: 8px 10px;
  }
}

/* ===== Topbar: mobile compact ===== */
@media (max-width: 640px){
  .topbar{ padding:8px 12px; }
  .brand{ font-size:16px; }

  .actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;          /* не переносим */
    overflow-x:auto;           /* если уж вообще тесно — можно свайпнуть */
    -webkit-overflow-scrolling:touch;
  }

  .actions .btn{
    height:36px;
    min-width:auto;
    padding:0 10px;            /* было 18px */
    font-size:13px;
    border-radius:10px;
    letter-spacing:0;
    white-space:nowrap;        /* не ломаемся по словам */
  }
}

@media (max-width: 360px){
  .actions .btn{ padding:0 8px; font-size:12px; height:34px; }
}

.topbar .brand { gap: 10px; }

.tg-link {
  --tg-size: 28px;
  width: var(--tg-size);
  height: var(--tg-size);
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid var(--border);
  text-decoration: none;
  position: relative;
  /* было overflow:hidden; — убираем, иначе обрежет сияние */
  overflow: visible;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease,
              color .2s ease, border-color .2s ease;
  will-change: transform;
}

/* внутренняя мягкая “подсветка” внутри круга */
.tg-link::before{
  content:"";
  position:absolute;
  inset: 2px;                     /* внутри круга */
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  background: radial-gradient(closest-side,
               rgba(34,158,217,.40), rgba(34,158,217,.15) 60%, transparent 70%);
  transform: scale(.9);
}

/* внешний пульс-орёл вокруг круга */
.tg-link::after{
  content:"";
  position:absolute;
  inset:-4px;                     /* чуть за круг */
  border-radius: inherit;
  pointer-events:none;
  opacity: 0;
  border: 2px solid #229ED9;
  transform: scale(.85);
}

/* основной “покойный” пульс (работает всегда, без ховера) */
@media (prefers-reduced-motion: no-preference){
  .tg-link::before{
    animation: tgInner 2.6s ease-in-out infinite;
  }
  .tg-link::after{
    animation: tgOuter 2.6s ease-out infinite;
  }

  @keyframes tgInner{
    0%,100% { opacity: 0; transform: scale(.88); }
    45%     { opacity: .70; transform: scale(1); }
  }
  @keyframes tgOuter{
    0%   { opacity: 0;   transform: scale(.85); box-shadow: 0 0 0 rgba(34,158,217,0); }
    30%  { opacity: .55; transform: scale(1.10); box-shadow: 0 0 10px rgba(34,158,217,.55); }
    55%  { opacity: .95; transform: scale(1.28); box-shadow: 0 0 18px rgba(34,158,217,.75); }
    100% { opacity: 0;   transform: scale(.90); box-shadow: 0 0 0 rgba(34,158,217,0); }
  }
}

/* Hover — усиливаем всё, но оставляем твой сдвиг и тень */
.tg-link:hover{
  color: #229ED9;
  border-color: color-mix(in srgb, #229ED9 45%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(34,158,217,.45);
}
.tg-link:hover::before{ opacity: .85; filter: saturate(1.1); }
.tg-link:hover::after {
  opacity: 1;
  box-shadow: 0 0 22px rgba(34,158,217,.85);
  transform: scale(1.30);
}

/* SVG самолётик — оставляем центрировку */
.tg-ico{
  width: 70%;
  height: 70%;
  display: block;
  fill: currentColor;
  transform: translateY(0.6px);
}

/* Тёмная тема — фон мягче, свечение читается */
[data-theme="dark"] .tg-link{
  background: color-mix(in srgb, var(--bg) 70%, #fff 4%);
  border-color: rgba(255,255,255,.14);
}
[data-theme="dark"] .tg-link::after{
  border-color: rgba(34,158,217,.85);
}