:root {
  --bg: linear-gradient(180deg, rgba(24,24,31,.92), rgba(18,18,24,.92));
  --panel: linear-gradient(180deg, rgba(24,24,31,.92), rgba(18,18,24,.92)); /* #2b2a31; */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --border: rgba(255, 255, 255, 0.10);
  --sidebar-width: 280px; /* стартовая ширина */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -ms-overflow-style: none;    /* старый Edge/IE */
  scrollbar-width: none;       /* Firefox */
}

.layout {
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-width);
  min-width: 180px;
  max-width: 40vw; /* <= 40% */
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  overflow: hidden;
}

.sidebar .title {
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px 0;
}

.nav {
  display: grid;
  gap: 6px;
  margin-right: 10px;
}

.nav a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid transparent;
}

.nav a:hover {
  border-color: var(--border);
}

.nav a.active {
  background: rgba(255,255,255,0.08);
  border-color: var(--border);
}

.resizer {
  width: 6px;
  cursor: col-resize;
  background: rgba(255,255,255,0.04);
}

.resizer:hover {
  background: rgba(255,255,255,0.10);
}

.content {
  flex: 1;
  padding: 24px;
  overflow: auto;
  -ms-overflow-style: none;    /* старый Edge/IE */
  scrollbar-width: none;       /* Firefox */
}

.content h1 { margin-top: 0; }

/* Loader overlay */
body.is-loading {
  overflow: hidden;
}

#app {
  opacity: 1;
  transition: opacity 160ms ease;
}

body.is-loading #app {
  opacity: 0;
  pointer-events: none;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--bg);
  z-index: 9999;
  transition: opacity 180ms ease;
}

.loading-overlay.is-hidden {
  opacity: 0;
}

.loading-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.loading-title {
  font-weight: 700;
  font-size: 16px;
}

.loading-subtitle {
  margin-top: 2px;
  font-size: 13px;
  color: var(--muted);
}

.loading-noscript {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.85);
  animation: spin 900ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* For Uptime Kuma */
.kuma-center {
  height: calc(100vh - 48px);
  /* height: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.kuma-frame {
  width: min(1200px, 100%);
  height: min(850px, 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
}

.content { height: 100%; }

/* Убираем лишние поля у контента для страницы со статусом */
.content--full {
  padding: 0;        /* если хочешь прям в край */
  overflow: hidden;  /* чтобы не было скролла вокруг iframe */
}

.content::-webkit-scrollbar {  /* Chrome/Yandex/Safari */
  width: 0;
  height: 0;
}
/* iframe занимает всю доступную область справа от sidebar */
.kuma-frame--full {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;         /* без рамки */
  border-radius: 0;  /* если хочешь без скруглений */
  background: transparent;
}

.sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.sidebar-footer {
  margin-top: auto;            /* магия: уводит футер вниз */
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

.sidebar-footer__title {
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.sidebar-footer__sub {
  margin-top: 4px;
  opacity: 0.8;
}
/* Ссылки */
/* Зелёные ссылки только там, где ты явно поставишь class="link" */
a.link {
  color: #42f59e;
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 245, 158, 0.35);
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

a.link:hover {
  color: #7bffbf;
  border-bottom-color: rgba(123, 255, 191, 0.75);
}

a.link:active {
  color: #2fe08a;
}

a.link:visited {
  color: #42f59e; /* без фиолетового */
}

a.link:focus-visible {
  outline: 2px solid rgba(66, 245, 158, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
  background: rgba(66, 245, 158, 0.08);
}

/* Таблицы */
.table-card {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  overflow: hidden;
}

.table-scroll {
  overflow: auto;
}

.svc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px; /* чтобы колонки не слипались */
}

.svc-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0,0,0,0.30);
  border-bottom: 1px solid var(--border);
  padding: 14px 14px;
}

.svc-table tbody td {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.svc-table tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,0.015);
}

.svc-table tbody tr:hover td {
  background: rgba(66,245,158,0.06);
}

.svc-name {
  font-weight: 700;
  font-size: 14px;
}

.svc-meta {
  margin-top: 6px;
}

.tag {
  display: inline-block;
  font-size: 13px;
  padding: 4px 8px;
  margin: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--muted);
  background: rgba(255,255,255,0.03);
}

.tag-ok {
  border-color: rgba(66,245,158,0.35);
  color: rgba(123,255,191,0.95);
  background: rgba(66,245,158,0.08);
  margin-bottom: 4px;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Рыжее предупреждение (на всю ширину) */
.alert-warn {
  width: 100%;
  display: block;

  padding: 14px 16px;
  margin: 14px 0;

  border-radius: 14px;
  border: 1px solid rgba(255, 165, 0, 0.35);
  background: rgba(255, 165, 0, 0.10);

  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  cursor: default;
}

.alert-warn:hover {
  background: rgba(255, 165, 0, 0.14);
  border-color: rgba(255, 165, 0, 0.50);
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.28);
}

.alert-warn:active {
  transform: translateY(0px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}

.alert-warn strong {
  display: inline-block;
  margin-bottom: 6px;
  color: rgba(255, 210, 140, 1);
}

/* Если внутри алерта есть ссылки — они тоже в рыжем стиле */
.alert-warn a {
  color: rgba(255, 210, 140, 1);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 210, 140, 0.35);
}

.alert-warn a:hover {
  border-bottom-color: rgba(255, 210, 140, 0.75);
}

/* iframe-страницы: чтобы контент занимал всю высоту окна */
.content--embed{
  padding: 16px;
  height: 100vh;
  overflow: hidden; /* убираем внешний скролл у страницы */
}

.embed-frame-wrap{
  height: 100%;
  min-height: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  overflow: hidden; /* режем края, чтобы iframe не торчал */
}

.embed-frame{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ===========================
   Embed pages (iframe full)
   =========================== */
html, body {
  height: 100%;
}

body.page-embed {
  height: 100vh;
  overflow: hidden; /* ✅ убираем внешний скролл страницы */
  -ms-overflow-style: none;    /* старый Edge/IE */
  scrollbar-width: none;       /* Firefox */
}

/* зажимаем весь layout в высоту окна */
body.page-embed #app,
body.page-embed .layout {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* убираем "центровку/макс-ширину/паддинги" у контента */
body.page-embed .content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;

  height: 100%;
  min-height: 0;
  overflow: hidden; /* ✅ чтобы скролл не вылезал у main */
}

/* если у sidebar/резайзера высота не дотягивает */
body.page-embed .sidebar,
body.page-embed .resizer {
  height: 100vh;
}

/* обёртка и сам iframe — строго 100% */
body.page-embed .embed-frame-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;

  border: 0;
  border-radius: 0;  /* ✅ убираем визуальные "отступы" */
  box-shadow: none;
  background: transparent;
  overflow: hidden;
}

body.page-embed .embed-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Делает нативные контролы (select/scrollbar и т.п.) тёмными там, где браузер это умеет */
/* Общий вид select под твой стиль */
select {
  appearance: none;
  -webkit-appearance: none;

  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;

  padding: 10px 38px 10px 14px;
  line-height: 1.2;

  /* стрелка */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

select:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
}

select:focus {
  outline: none;
  border-color: rgba(80, 200, 140, 0.45);
  box-shadow: 0 0 0 4px rgba(80, 200, 140, 0.14);
}

/* Выпадающее меню (работает в большинстве браузеров; в Firefox это особенно важно) */
select option,
select optgroup {
  background-color: #0f1418;
  color: rgba(255, 255, 255, 0.92);
}

/* Чтобы disabled-опции не были "ядрёно белыми" */
select option:disabled {
  color: rgba(255, 255, 255, 0.35);
}
/* прячем нативный select, но оставляем его в DOM для форм */
.ui-select-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

/* контейнер кастом-селекта */
.ui-select {
  position: relative;
  display: inline-block;
  min-width: 180px;
}

/* кнопка, которая выглядит как твой инпут */
.ui-select__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);

  cursor: pointer;
  user-select: none;
}

.ui-select__btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}

.ui-select__btn:focus {
  outline: none;
  border-color: rgba(80, 200, 140, 0.45);
  box-shadow: 0 0 0 4px rgba(80, 200, 140, 0.14);
}

/* стрелка */
.ui-select__chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,0.55);
  border-bottom: 2px solid rgba(255,255,255,0.55);
  transform: rotate(45deg);
  margin-left: 10px;
  flex: 0 0 auto;
}

/* выпадашка */
.ui-select__list {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 8px);
  left: 0;
  right: 0;

  background: #0f1418;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;

  box-shadow: 0 18px 60px rgba(0,0,0,0.45);

  max-height: 280px;
  overflow-y: auto;

  display: none;
}

.ui-select.is-open .ui-select__list {
  display: block;
}

.ui-select__item {
  padding: 10px 12px;
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  white-space: nowrap;
}

.ui-select__item:hover {
  background: rgba(80, 200, 140, 0.12);
}

.ui-select__item.is-selected {
  background: rgba(80, 200, 140, 0.18);
  color: rgba(255,255,255,0.95);
}

/* 3 колонки 33/33/3 + разделитель 2px */
.kuma-split {
  display: grid;
  grid-template-columns: 1fr 2px 1fr 2px 1fr;
  gap: 0;
  padding: 0;
  height: 100%;
  min-height: calc(100vh - 24px); /* можно убрать/подстроить под твой layout */
}

.kuma-divider {
  background: #414046;
  height: 100%;
}

.kuma-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* чтобы содержимое в main не раздувало ширину и не появлялся горизонтальный скролл */
.kuma-split > iframe {
  min-width: 0;
}

/* ===== Sidebar (menu) refresh: nicer items + hidden scroll ===== */

.sidebar {
  /* перебиваем старые padding/overflow из ранних блоков */
  padding: 0 !important;
  overflow: hidden !important;

  display: flex;
  flex-direction: column;
  height: 100vh;
}

.sidebar-top {
  padding: 18px 16px 10px;
}

.sidebar-top .title {
  margin: 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
}

.sidebar-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 6px 12px 12px;

  /* Firefox */
  scrollbar-width: none;
  /* old Edge/IE */
  -ms-overflow-style: none;
}

/* Chrome/Safari */
.sidebar-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);

  color: #e9e9e9;
  text-decoration: none;

  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nav a:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.nav a.active {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(64, 206, 152, 0.35);
  box-shadow: inset 3px 0 0 rgba(64, 206, 152, 0.9);
}

.nav-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);

  font-size: 16px;
  line-height: 1;
}

.nav a.active .nav-ico {
  background: rgba(64, 206, 152, 0.18);
}

.sidebar-bottom {
  flex: 0 0 auto;

  padding: 12px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);

  /* лёгкий “туман” внизу, чтобы футер читался */
  background: linear-gradient(180deg, rgba(24,24,31,.92), rgba(18,18,24,.92));
  /* background: linear-gradient(
    to bottom,
    rgba(35, 34, 40, 0),
    rgba(35, 34, 40, 0.65) 35%,
    rgba(35, 34, 40, 1)
  ); */
}

/* футеры внутри sidebar-bottom — без "случайных" внешних отступов */
.sidebar-bottom .sidebar-footer {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.sidebar-bottom .sidebar-footer + .sidebar-footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-footer__title {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.95;
}

.sidebar-footer__sub {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 6px;
}

/* Quick links */
.quick-links {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  max-height: 100px;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.quick-links::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.quick-links a {
  font-size: 11px;
  text-decoration: none;

  padding: 4px 8px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);

  color: #bdbebd;
}

.quick-links a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
}

/* Quick links: visited не меняет цвет, зелёный только на hover */
.sidebar .quick-links a,
.sidebar .quick-links a:visited {
  color: #bdbebd;
}

.sidebar .quick-links a:hover,
.sidebar .quick-links a:visited:hover {
  color: #2ee68b; /* зелёный только при наведении */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.10);
}

code {
  color: #2ee68b;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 5px;
}


/* ==============================
   ONLY: Bot commands page scope
   ============================== */

body.bot-commands-page {
  /* одинаковые ширины колонок во всех таблицах */
  --col-cmd: clamp(260px, 28vw, 380px);
  --col-access: 240px;
  --col-date: 170px;
}

/* фиксируем таблицу, чтобы колонки были одинаковыми по ширине везде */
body.bot-commands-page .svc-table {
  table-layout: fixed;
}

/* 1) Команда */
body.bot-commands-page .svc-table th:nth-child(1),
body.bot-commands-page .svc-table td:nth-child(1) {
  width: var(--col-cmd) !important; /* перебивает inline min/max-width в th */
}

/* 2) Описание (занимает остаток, переносится нормально) */
body.bot-commands-page .svc-table th:nth-child(2),
body.bot-commands-page .svc-table td:nth-child(2) {
  width: auto !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3) Доступность */
body.bot-commands-page .svc-table th:nth-child(3),
body.bot-commands-page .svc-table td:nth-child(3) {
  width: var(--col-access) !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Дата */
body.bot-commands-page .svc-table th:nth-child(4),
body.bot-commands-page .svc-table td:nth-child(4) {
  width: var(--col-date) !important;
  white-space: nowrap;
}

/* ==============================
   "Команда" как код-плашка
   (только 1-й столбец и только тут)
   ============================== */

body.bot-commands-page .svc-table td:nth-child(1) .svc-name {
  /* важно: чтобы не растягивалось на всю ширину и было "как код" */
  display: block;
  width: fit-content;
  max-width: 100%;

  margin: 4px 0;
  padding: 6px 10px;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(46, 230, 139, 0.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.2px;
  font-variant-ligatures: none;

  color: rgba(240, 244, 255, 0.95);

  /* длинные команды не ломают колонку */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body.bot-commands-page .svc-table td:nth-child(1) .svc-name:hover {
  border-color: rgba(46, 230, 139, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* ==============================
   Стиль для реальных блоков кода
   (если есть <pre><code>...</code></pre>)
   ============================== */

body.bot-commands-page pre {
  margin: 14px 0;
  padding: 14px 16px;
  border-radius: 16px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  overflow: auto;
  line-height: 1.45;
}

body.bot-commands-page pre code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", "Courier New", monospace;
  font-variant-ligatures: none;

  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(240,244,255,0.95);
}
/* Вспышка при копировании */
body.bot-commands-page .svc-table td:nth-child(1) .svc-name{
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

body.bot-commands-page .svc-table td:nth-child(1) .svc-name.copied{
  background: rgba(46, 230, 139, 0.18);
  border-color: rgba(46, 230, 139, 0.55);
  color: rgba(46, 230, 139, 0.95);
  box-shadow: 0 0 0 2px rgba(46, 230, 139, 0.18);
}

/* ==========================================================
   2026 visual system — graphite / raspberry
   ========================================================== */
:root {
  --bg: #090a0c;
  --panel: #181a1c;
  --surface: #171a1e;
  --surface-raised: #20252a;
  --text: #f1eef1;
  --muted: #96949a;
  --border: #30343a;
  --border-soft: #242b31;
  --accent: #d80c99;
  --accent-deep: #7a0057;
  --accent-soft: #ecadde;
  --sidebar-width: 292px;
}

html, body {
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  font-family: Inter, "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  font-feature-settings: "ss01", "cv02";
}

.layout { background: transparent; }

.sidebar {
  min-width: 232px;
  max-width: 34vw;
  background: rgba(17, 19, 22, .97) !important;
  border-right: 1px solid var(--border) !important;
}

.sidebar-top {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.sidebar-top .title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  opacity: 1;
  text-transform: none;
  letter-spacing: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--accent-deep);
  border: 1px solid #a60977;
  font: 750 13px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

.brand-copy { font-size: 13px; font-weight: 650; letter-spacing: .02em; }
.brand-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font: 500 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sidebar-scroll { padding: 17px 12px; }
.nav { gap: 2px; }
.nav a {
  min-height: 42px;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #b9b7bc;
  font-size: 13px;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.nav a:hover {
  color: #fff;
  background: #1a1d21;
  border-color: #565b62;
}
.nav a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(122,0,87,.32), rgba(122,0,87,.04));
  border-color: var(--accent);
  box-shadow: none;
}
.nav-ico {
  width: 25px;
  height: auto;
  flex-basis: 25px;
  justify-content: flex-start;
  border-radius: 0;
  background: none !important;
  color: #777981;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}
.nav a.active .nav-ico { color: var(--accent-soft); }

.resizer { width: 3px; background: #070809; }
.resizer:hover { background: var(--accent-deep); }
.content { padding: clamp(24px, 4vw, 56px); }
.content > h1 {
  max-width: 980px;
  margin-bottom: 10px;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.04;
  letter-spacing: -.04em;
}
.content > h1::before {
  content: "//";
  margin-right: .45em;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .58em;
  letter-spacing: 0;
}

.sidebar-bottom {
  padding: 14px 18px 18px;
  background: #0d0f11;
  border-color: var(--border-soft);
}
.sidebar-footer__title { color: #d8d5d9; font-weight: 600; }
.sidebar-footer__sub { color: #77767c; line-height: 1.45; }
.quick-links { gap: 0; max-height: 92px; }
.quick-links a {
  padding: 4px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #85838a !important;
  font: 500 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.quick-links a::before { content: "/"; margin-right: 2px; color: #4f5056; }
.sidebar .quick-links a:hover,
.sidebar .quick-links a:visited:hover { color: var(--accent-soft) !important; background: transparent; }

a.link, a.link:visited { color: var(--accent-soft); border-color: rgba(236,173,222,.35); }
a.link:hover { color: #fff; border-color: var(--accent); }
a.link:focus-visible { outline-color: var(--accent); background: rgba(216,12,153,.1); }

.table-card {
  border-color: var(--border);
  border-radius: 2px;
  background: #181a1c;
  box-shadow: 14px 14px 0 #050607;
}
.svc-table thead th { background: #20252a; color: #aaa8ad; border-color: #3b4046; }
.svc-table tbody td { border-color: #25292e; }
.svc-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,.012); }
.svc-table tbody tr:hover td { background: rgba(216,12,153,.055); }
.tag, .tag-ok {
  border-color: #454950;
  border-radius: 2px;
  background: #202329;
  color: #c9c6cb;
}
code {
  color: var(--accent-soft);
  background: #202329;
  border-color: #393d43;
  border-radius: 2px;
}
.alert-warn {
  border-radius: 0;
  border-color: #73355f;
  border-left: 3px solid var(--accent);
  background: #1a1218;
  box-shadow: none;
}
.loading-card {
  border-radius: 0;
  background: #15171a;
  border-color: #34383e;
  box-shadow: 10px 10px 0 #050607;
}
.spinner { border-radius: 0; border-top-color: var(--accent); animation-duration: 1200ms; }
.kuma-frame { border-radius: 0; border-color: var(--border); background: #101010; }
.ui-select__btn, .ui-select__list { border-radius: 2px; }

@media (max-width: 720px) {
  :root { --sidebar-width: 216px; }
  .brand-copy small { display: none; }
  .sidebar-bottom { display: none; }
  .content { padding: 24px 18px; }
}

/* ==========================================================
   Visual revision 2 — quiet, editorial, human
   ========================================================== */
:root {
  --bg: #101010;
  --panel: #181a1c;
  --surface: #1f2123;
  --surface-raised: #242b31;
  --text: #edf8ff;
  --muted: #9ab2c2;
  --border: #34444f;
  --border-soft: #27333b;
  --accent: #3fa0ef;
  --accent-deep: #1a74e2;
  --accent-soft: #6bd0ff;
  --sidebar-width: 280px;
}

html, body {
  background: var(--bg);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
}

.sidebar {
  background: #181a1c !important;
  border-right-color: #303338 !important;
}
.sidebar-top {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 22px;
}
.sidebar-top .title {
  display: block;
  margin: 0;
  color: #edf8ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.015em;
  text-transform: none;
}
.brand-mark, .brand-copy { display: none !important; }
.sidebar-scroll { padding: 14px 0 18px; }
.nav { gap: 0; }
.nav a {
  position: relative;
  min-height: 43px;
  padding: 10px 22px;
  border: 0;
  color: #aaa6ab;
  font-size: 14px;
  transform: translateX(0);
  transition: color 170ms ease, background-color 170ms ease, padding-left 170ms ease;
}
.nav a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 170ms ease;
}
.nav a:hover {
  padding-left: 27px;
  color: #fff;
  background: rgba(255,255,255,.025);
}
.nav a:hover::before { transform: scaleY(.45); }
.nav a.active {
  padding-left: 27px;
  color: #fff;
  background: rgba(63, 160, 239,.075);
  box-shadow: none;
}
.nav a.active::before { transform: scaleY(1); }
.nav a:nth-child(1) { animation-delay: 30ms; }
.nav a:nth-child(2) { animation-delay: 60ms; }
.nav a:nth-child(3) { animation-delay: 90ms; }
.nav a:nth-child(4) { animation-delay: 120ms; }
.nav a:nth-child(5) { animation-delay: 150ms; }
.nav a:nth-child(6) { animation-delay: 180ms; }
.nav a:nth-child(7) { animation-delay: 210ms; }
.nav a:nth-child(8) { animation-delay: 240ms; }
.nav a:nth-child(9) { animation-delay: 270ms; }
.nav a:nth-child(10) { animation-delay: 300ms; }
.sidebar.is-ready .nav a { animation: nav-enter 360ms ease both; }
.nav-ico { display: none !important; }

.content {
  max-width: none;
  padding: clamp(30px, 4vw, 58px);
  animation: content-enter 420ms ease both;
}
.content > h1 {
  max-width: 980px;
  margin: 0 0 10px;
  color: #edf8ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 3.2vw, 47px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.content > h1::before { content: none; }
.content > p { max-width: 850px; line-height: 1.65; }

.sidebar-bottom { background: #0d0f11; }
.sidebar-footer__title { font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 400; }
.quick-links a { font-family: "Trebuchet MS", "Segoe UI", sans-serif; font-size: 11px; }
.quick-links a::before { content: none; }
.table-card { box-shadow: none; }
.loading-card { box-shadow: none; }
.spinner { border-radius: 50%; }

@keyframes nav-enter {
  from { opacity: 0; transform: translateX(-7px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes content-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar.is-ready .nav a, .content { animation: none; }
  .nav a { transition: none; }
}
.roadmap-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}.roadmap-toolbar button,.filter-btn{padding:9px 13px;border:1px solid var(--border);border-radius:0;color:var(--muted);background:#171a1e;font:14px "Trebuchet MS","Segoe UI",sans-serif;cursor:pointer;transition:color 160ms ease,border-color 160ms ease,background 160ms ease}.roadmap-toolbar button:hover,.filter-btn:hover,.filter-btn.is-active{color:#fff;border-color:var(--accent);background:rgba(63, 160, 239,.08)}
.roadmap-list{display:grid;gap:10px}.roadmap-card,.roadmap-item{padding:18px 20px;border:1px solid var(--border);border-radius:0;background:#181a1c;box-shadow:none;transition:border-color 160ms ease,transform 160ms ease}.roadmap-card:hover,.roadmap-item:hover{border-color:#5a3d51;transform:translateX(3px)}.roadmap-card h2,.roadmap-card h3,.roadmap-item h2,.roadmap-item h3{margin-top:0;font-family:Georgia,"Times New Roman",serif;font-weight:400}.badge,.roadmap-badge{display:inline-block;padding:3px 8px;border:1px solid #474a50;border-radius:0;color:#bbb6bb;background:#202328;font-size:12px}.badge-doing{border-color:#7e315f;color:#edb1da;background:#21141d}.badge-done{border-color:#46544d;color:#b9c8c0}.badge-planned{border-color:#5a5550;color:#cbc1b7}
:root{--radius-sm:6px;--radius:9px;--font-ui:"Bahnschrift Light","Bahnschrift","Segoe UI Variable Text","Segoe UI",Arial,sans-serif}
html,body{font-family:var(--font-ui);font-size:16.5px;font-weight:300;line-height:1.55}
.sidebar-top .title,.sidebar-footer__title,.content>h1,.content h2,.content h3{font-family:var(--font-ui);font-weight:300;letter-spacing:-.015em}
.sidebar-top .title{font-size:19px}.nav a{font-size:15.5px;font-weight:300}.sidebar-footer__title{font-size:14px}.sidebar-footer__sub{font-size:12px}.quick-links a{font-family:var(--font-ui);font-size:12px}
.content>h1{font-size:clamp(34px,3vw,48px);line-height:1.12}.content>p{font-size:17px}.svc-name{font-size:16px;font-weight:500}.svc-table{font-size:15px}.svc-table thead th{font-size:13px}
.table-card{border-radius:var(--radius);overflow:hidden}.tag,.tag-ok{border-radius:999px}.alert-warn{border-radius:var(--radius);border-left-width:3px}.loading-card{border-radius:var(--radius)}code{border-radius:var(--radius-sm)}select,.ui-select__btn,.ui-select__list{border-radius:var(--radius)}
.kuma-split{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px;background:var(--bg)}.kuma-divider{display:none}.kuma-split>.kuma-frame{min-width:0;border:1px solid var(--border)!important;border-radius:10px!important;overflow:hidden;background:#0f1114}
.content:not(.content--full)>.kuma-frame{border-radius:10px;border:1px solid var(--border)}
@media(max-width:1050px){.kuma-split{grid-template-columns:1fr;overflow:auto}.kuma-split>.kuma-frame{min-height:760px}}
.content>*,.resume-page>*{opacity:0}.page-ready .content>*,.page-ready .resume-page>*{animation:section-in 440ms ease both}.page-ready .content>*:nth-child(2),.page-ready .resume-page>*:nth-child(2){animation-delay:55ms}.page-ready .content>*:nth-child(3),.page-ready .resume-page>*:nth-child(3){animation-delay:100ms}.page-ready .content>*:nth-child(4),.page-ready .resume-page>*:nth-child(4){animation-delay:145ms}.page-ready .content>*:nth-child(n+5),.page-ready .resume-page>*:nth-child(n+5){animation-delay:180ms}@keyframes section-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tag,.tag-ok{transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease;cursor:default}.tag:hover,.tag-ok:hover{color:#fff!important;background:rgba(63, 160, 239,.14)!important;border-color:rgba(107, 208, 255,.65)!important;transform:translateY(-2px);box-shadow:0 5px 14px rgba(0,0,0,.2)}
.quick-links a{display:inline-block;transition:color 150ms ease,transform 150ms ease}.quick-links a:hover{transform:translateY(-2px)}.sidebar.is-ready .quick-links a{animation:quick-in 360ms ease both}.sidebar.is-ready .quick-links a:nth-child(3n+2){animation-delay:45ms}.sidebar.is-ready .quick-links a:nth-child(3n){animation-delay:90ms}@keyframes quick-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.svc-table tbody tr{transition:filter 150ms ease}.svc-table tbody tr:hover{filter:brightness(1.08)}
.resume-page{gap:16px!important}.resume-hero,.resume-card,.resume-tech,.resume-contacts,.resume-comp{border-color:var(--border)!important;border-radius:10px!important;background:#14171b!important;box-shadow:none!important}.resume-hero{background:linear-gradient(120deg,rgba(63, 160, 239,.10),transparent 38%),#14171b!important}.resume-hero::after{background:none!important}.resume-hero h1,.resume-card h2,.resume-tech h2,.resume-contacts h2,.resume-comp h2{font-family:var(--font-ui)!important;font-weight:300!important}.resume-badge,.resume-chip,.resume-pill,.resume-status,.resume-status2,.resume-status3{border-color:#4a3a46!important;background:#1d181c!important;color:#ded7dc!important}.resume-chip,.resume-pill{transition:background 150ms ease,border-color 150ms ease,transform 150ms ease!important}.resume-chip:hover,.resume-pill:hover{background:rgba(63, 160, 239,.12)!important;border-color:#a85284!important;transform:translateY(-2px)}.resume-photo{border-radius:10px!important;background:#1b1e22!important;box-shadow:none!important}.resume-job,.resume-skill,.resume-project,.resume-item{border-radius:9px!important;background:#171a1e!important;border-color:#393d42!important;box-shadow:none!important}.resume-job:hover,.resume-project:hover{background:#1d2025!important;border-color:#65435a!important}.resume-status__dot,.resume-status__dot2,.resume-status__dot3{background:#3fa0ef!important;box-shadow:0 0 0 4px rgba(63, 160, 239,.14)!important}
@media(prefers-reduced-motion:reduce){.content>*,.resume-page>*{opacity:1}.page-ready .content>*,.page-ready .resume-page>*,.sidebar.is-ready .quick-links a{animation:none}.tag,.tag-ok,.quick-links a{transition:none}}
/* Final detail pass: tags, quick links, Telegram commands */
.tag,.tag-ok{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:28px!important;margin:3px 4px 3px 0!important;padding:5px 9px!important;border-radius:7px!important;font-family:var(--font-ui)!important;font-size:13.5px!important;font-weight:300!important;line-height:1!important;vertical-align:middle!important;white-space:nowrap!important}

.quick-links{column-gap:10px!important;row-gap:2px!important}.quick-links a,.sidebar .quick-links a,.sidebar .quick-links a:visited{position:relative;padding:4px 0!important;border:0!important;background:transparent!important;color:#8f8b91!important;text-decoration:none!important;transform:none!important}.quick-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent-soft);transform:scaleX(0);transform-origin:right center;transition:transform 190ms ease}.quick-links a:hover,.sidebar .quick-links a:hover,.sidebar .quick-links a:visited:hover{color:#edf8ff!important;background:transparent!important;transform:none!important}.quick-links a:hover::after{transform:scaleX(1);transform-origin:left center}

body.bot-commands-page .svc-table td:nth-child(1) .svc-name{display:inline-flex!important;align-items:center!important;width:auto!important;min-height:30px!important;margin:3px 5px 3px 0!important;padding:6px 10px!important;border:1px solid #45484e!important;border-radius:6px!important;background:#1c2024!important;box-shadow:none!important;color:#e8e2e7!important;font-family:"Bahnschrift","Segoe UI Variable Text","Segoe UI",Arial,sans-serif!important;font-size:14px!important;font-weight:400!important;line-height:1!important;letter-spacing:0!important;transition:color 150ms ease,background-color 150ms ease,border-color 150ms ease,transform 150ms ease!important}
body.bot-commands-page .svc-table td:nth-child(1) .svc-name:hover{color:#fff!important;background:#262129!important;border-color:#8a5677!important;transform:translateY(-1px)}body.bot-commands-page .svc-table td:nth-child(1) .svc-name.copied{color:#fff!important;background:#57103f!important;border-color:#3fa0ef!important;box-shadow:none!important}

@media(prefers-reduced-motion:reduce){.quick-links a::after{transition:none}}

/* Feedback после копирования команды Telegram-бота */
body.bot-commands-page
.svc-table td:nth-child(1)
.svc-name.copied {
    color: #fff !important;
    background: #671149 !important;
    border-color: #e044ac !important;

    animation: command-copied 850ms ease;
}

@keyframes command-copied {
    0% {
        transform: translateY(-1px) scale(1);
        box-shadow: 0 0 0 0 rgba(63, 160, 239, 0);
    }

    22% {
        transform: translateY(-1px) scale(0.96);
        box-shadow: 0 0 0 4px rgba(63, 160, 239, 0.22);
    }

    55% {
        transform: translateY(-1px) scale(1.03);
        box-shadow: 0 0 0 7px rgba(63, 160, 239, 0.08);
    }

    100% {
        transform: translateY(-1px) scale(1);
        box-shadow: 0 0 0 10px rgba(63, 160, 239, 0);
    }
}/*
 * ==========================================================
 * CENTRAL COLOR THEME
 * ==========================================================
 *
 * Для замены цветовой темы в будущем достаточно изменить
 * только переменные в этом блоке :root.
 */

:root {
  /*
   * Основная палитра Fiery Ocean.
   */
  --theme-red-dark: #1a74e2;
  --theme-red: #3fa0ef;
  --theme-cream: #edf8ff;
  --theme-blue-dark: #1a74e2;
  --theme-blue: #6bd0ff;

  /*
   * Производные цвета интерфейса.
   */
  --theme-bg: #101010;
  --theme-sidebar: #141617;

  --theme-panel: #181a1c;
  --theme-panel-raised: #1f2123;
  --theme-panel-hover: #242b31;

  --theme-border: #34444f;
  --theme-border-soft: #27333b;

  --theme-text: var(--theme-cream);
  --theme-muted: #9ab2c2;

  --theme-accent: var(--theme-red);
  --theme-accent-dark: var(--theme-red-dark);
  --theme-accent-soft: #6bd0ff;

  /*
   * Обратная совместимость с существующими стилями.
   */
  --bg: var(--theme-bg);
  --panel: var(--theme-sidebar);

  --surface: var(--theme-panel);
  --surface-raised: var(--theme-panel-raised);

  --text: var(--theme-text);
  --muted: var(--theme-muted);

  --border: var(--theme-border);
  --border-soft: var(--theme-border-soft);

  --accent: var(--theme-accent);
  --accent-deep: var(--theme-accent-dark);
  --accent-soft: var(--theme-accent-soft);

  /*
   * Переменные страницы Minecraft.
   */
  --pg-accent: var(--theme-accent);
  --pg-deep: var(--theme-accent-dark);
  --pg-soft: var(--theme-accent-soft);

  --pg-panel: var(--theme-panel);
  --pg-raised: var(--theme-panel-raised);
  --pg-line: var(--theme-border);
}

/*
 * ==========================================================
 * BASE
 * ==========================================================
 */

html,
body {
  color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
}

/*
 * ==========================================================
 * SIDEBAR
 * ==========================================================
 */

.sidebar {
  background: var(--theme-sidebar) !important;
  border-right-color: var(--theme-border) !important;
}

.sidebar-top {
  border-bottom-color: var(--theme-border-soft) !important;
}

.sidebar-top .title {
  color: var(--theme-text) !important;
}

.sidebar-bottom {
  background: color-mix(
    in srgb,
    var(--theme-sidebar) 84%,
    #000
  ) !important;

  border-color: var(--theme-border-soft) !important;
}

.nav a {
  color: var(--theme-muted) !important;
}

.nav a::before {
  background: var(--theme-accent) !important;
}

.nav a:hover {
  color: var(--theme-text) !important;

  background: color-mix(
    in srgb,
    var(--theme-blue-dark) 60%,
    transparent
  ) !important;
}

.nav a.active {
  color: var(--theme-text) !important;

  background: linear-gradient(
    90deg,
    color-mix(
      in srgb,
      var(--theme-accent-dark) 48%,
      transparent
    ),
    color-mix(
      in srgb,
      var(--theme-accent-dark) 10%,
      transparent
    )
  ) !important;
}

/*
 * ==========================================================
 * QUICK LINKS
 * ==========================================================
 */

.quick-links a,
.sidebar .quick-links a,
.sidebar .quick-links a:visited {
  color: var(--theme-muted) !important;
}

.quick-links a:hover,
.sidebar .quick-links a:hover,
.sidebar .quick-links a:visited:hover {
  color: var(--theme-text) !important;
}

.quick-links a::after {
  background: var(--theme-accent-soft) !important;
}

/*
 * ==========================================================
 * CONTENT
 * ==========================================================
 */

.content {
  color: var(--theme-text);
}

.content h1,
.content h2,
.content h3 {
  color: var(--theme-text) !important;
}

.muted {
  color: var(--theme-muted) !important;
}

/*
 * ==========================================================
 * LINKS
 * ==========================================================
 */

a.link,
a.link:visited {
  color: var(--theme-blue) !important;

  border-bottom-color: color-mix(
    in srgb,
    var(--theme-blue) 45%,
    transparent
  ) !important;
}

a.link:hover {
  color: var(--theme-cream) !important;
  border-bottom-color: var(--theme-accent) !important;
}

a.link:focus-visible {
  outline-color: var(--theme-accent) !important;

  background: color-mix(
    in srgb,
    var(--theme-accent) 12%,
    transparent
  ) !important;
}

/*
 * ==========================================================
 * TABLES
 * ==========================================================
 */

.table-card {
  background: var(--theme-panel) !important;
  border-color: var(--theme-border) !important;
}

.svc-table thead th {
  color: var(--theme-blue) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

.svc-table tbody td {
  border-color: var(--theme-border-soft) !important;
}

.svc-table tbody tr:nth-child(odd) td {
  background: color-mix(
    in srgb,
    var(--theme-panel-raised) 32%,
    transparent
  ) !important;
}

.svc-table tbody tr:hover td {
  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 22%,
    var(--theme-panel)
  ) !important;
}

/*
 * ==========================================================
 * TAGS
 * ==========================================================
 */

.tag,
.tag-ok {
  color: var(--theme-muted) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

.tag:hover,
.tag-ok:hover {
  color: var(--theme-cream) !important;

  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 40%,
    var(--theme-panel-raised)
  ) !important;

  border-color: var(--theme-accent-soft) !important;
}

/*
 * ==========================================================
 * ALERTS
 * ==========================================================
 */

.alert-warn {
  color: var(--theme-text) !important;

  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 24%,
    var(--theme-panel)
  ) !important;

  border-color: color-mix(
    in srgb,
    var(--theme-accent) 60%,
    var(--theme-border)
  ) !important;

  border-left-color: var(--theme-accent) !important;
}

.alert-warn:hover {
  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 34%,
    var(--theme-panel)
  ) !important;

  border-color: var(--theme-accent-soft) !important;
}

.alert-warn strong,
.alert-warn a {
  color: var(--theme-cream) !important;
}

/*
 * ==========================================================
 * CODE
 * ==========================================================
 */

code {
  color: var(--theme-blue) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

/*
 * ==========================================================
 * FORM CONTROLS
 * ==========================================================
 */

select,
.ui-select__btn,
.ui-select__list {
  color: var(--theme-text) !important;
  background-color: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

select:focus,
.ui-select__btn:focus {
  border-color: var(--theme-accent) !important;

  box-shadow: 0 0 0 4px color-mix(
    in srgb,
    var(--theme-accent) 16%,
    transparent
  ) !important;
}

.ui-select__item:hover {
  background: color-mix(
    in srgb,
    var(--theme-blue) 14%,
    transparent
  ) !important;
}

.ui-select__item.is-selected {
  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 35%,
    transparent
  ) !important;
}

/*
 * ==========================================================
 * LOADER
 * ==========================================================
 */

.loading-overlay,
.netmap-loading {
  color: var(--theme-text) !important;
  background: var(--theme-bg) !important;
}

.loading-card {
  background: var(--theme-panel) !important;
  border-color: var(--theme-border) !important;
}

.spinner {
  border-color: color-mix(
    in srgb,
    var(--theme-blue) 25%,
    transparent
  ) !important;

  border-top-color: var(--theme-accent) !important;
}

/*
 * ==========================================================
 * TELEGRAM COMMANDS
 * ==========================================================
 */

body.bot-commands-page
.svc-table td:nth-child(1)
.svc-name {
  color: var(--theme-text) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

body.bot-commands-page
.svc-table td:nth-child(1)
.svc-name:hover {
  color: var(--theme-cream) !important;

  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 30%,
    var(--theme-panel-raised)
  ) !important;

  border-color: var(--theme-accent-soft) !important;
}

body.bot-commands-page
.svc-table td:nth-child(1)
.svc-name.copied {
  color: var(--theme-cream) !important;
  background: var(--theme-accent-dark) !important;
  border-color: var(--theme-accent) !important;
}

/*
 * ==========================================================
 * RESUME
 * ==========================================================
 */

.resume-hero,
.resume-card,
.resume-tech,
.resume-contacts,
.resume-comp {
  color: var(--theme-text) !important;
  background: var(--theme-panel) !important;
  border-color: var(--theme-border) !important;
}

.resume-hero {
  background:
    linear-gradient(
      120deg,
      color-mix(
        in srgb,
        var(--theme-accent-dark) 35%,
        transparent
      ),
      transparent 42%
    ),
    var(--theme-panel) !important;
}

.resume-badge,
.resume-chip,
.resume-pill,
.resume-status,
.resume-status2,
.resume-status3 {
  color: var(--theme-muted) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

.resume-chip:hover,
.resume-pill:hover {
  color: var(--theme-cream) !important;

  background: color-mix(
    in srgb,
    var(--theme-accent-dark) 35%,
    var(--theme-panel-raised)
  ) !important;

  border-color: var(--theme-accent-soft) !important;
}

.resume-job,
.resume-skill,
.resume-project,
.resume-item {
  color: var(--theme-text) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

.resume-status__dot,
.resume-status__dot2,
.resume-status__dot3 {
  background: var(--theme-accent) !important;

  box-shadow: 0 0 0 4px color-mix(
    in srgb,
    var(--theme-accent) 18%,
    transparent
  ) !important;
}

/*
 * ==========================================================
 * MINECRAFT
 * ==========================================================
 *
 * Этот файл также подключается внутрь iframe Minecraft.
 */

.archive-container {
  background: color-mix(
    in srgb,
    var(--theme-panel) 96%,
    transparent
  ) !important;

  border-color: var(--theme-border) !important;
}

.search-container {
  background: var(--theme-sidebar) !important;
  border-color: var(--theme-border) !important;
}

#server-search {
  color: var(--theme-text) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

#server-search:focus {
  border-color: var(--theme-accent) !important;

  box-shadow: inset 3px 0 0 color-mix(
    in srgb,
    var(--theme-accent) 28%,
    transparent
  ) !important;
}

details {
  background: var(--theme-panel) !important;
  border-color: var(--theme-border-soft) !important;
}

details > summary {
  color: var(--theme-text) !important;
  background: var(--theme-panel-raised) !important;
}

details > summary:hover {
  color: var(--theme-cream) !important;
  background: var(--theme-panel-hover) !important;
  border-left-color: var(--theme-blue) !important;
}

details[open] > summary {
  color: var(--theme-cream) !important;

  background: linear-gradient(
    90deg,
    color-mix(
      in srgb,
      var(--theme-accent-dark) 70%,
      var(--theme-panel)
    ),
    var(--theme-panel-raised)
  ) !important;

  border-left-color: var(--theme-accent) !important;
}

details i,
details a {
  color: var(--theme-accent-soft) !important;
}

details code {
  color: var(--theme-blue) !important;
  background: var(--theme-panel-raised) !important;
  border-color: var(--theme-border) !important;
}

.wave-line {
  stroke: color-mix(
    in srgb,
    var(--theme-blue) 28%,
    transparent
  ) !important;
}
/* ==========================================================
   Mobile layout
   ========================================================== */

.mobile-menu-toggle,
.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 820px) {
  :root {
    --mobile-header-height: 58px;
    --mobile-gutter: 16px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body.mobile-menu-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .layout,
  body.page-embed .layout {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .resizer,
  body.page-embed .resizer {
    display: none !important;
  }

  .sidebar,
  body.page-embed .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 1200;
    width: min(86vw, 330px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid var(--theme-border) !important;
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.42);
    transform: translate3d(-104%, 0, 0);
    visibility: hidden;
    transition: transform 230ms ease, visibility 230ms ease;
    overscroll-behavior: contain;
  }

  body.mobile-menu-open .sidebar {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }

  .sidebar-top {
    min-height: var(--mobile-header-height) !important;
    padding: 0 18px !important;
  }

  .sidebar-top .title {
    font-size: 17px !important;
  }

  .sidebar-scroll {
    padding: 10px 10px 18px !important;
    overscroll-behavior: contain;
  }

  .nav {
    gap: 3px !important;
  }

  .nav a {
    min-height: 46px;
    padding: 12px 16px !important;
    font-size: 16px !important;
  }

  .nav a:hover,
  .nav a.active {
    padding-left: 20px !important;
  }

  .sidebar-bottom {
    display: block !important;
    flex: 0 0 auto;
    max-height: 42dvh;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .quick-links {
    gap: 2px 12px !important;
  }

  .quick-links a,
  .sidebar .quick-links a {
    min-height: 32px;
    display: inline-flex !important;
    align-items: center;
    font-size: 12.5px !important;
  }

  .mobile-menu-toggle {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    z-index: 1300;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 96px;
    min-height: 42px;
    padding: 9px 13px;
    color: var(--theme-text);
    background: rgba(24, 26, 28, 0.94);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font: 500 14px/1 var(--font-ui);
    cursor: pointer;
    touch-action: manipulation;
  }

  .mobile-menu-toggle__lines {
    display: grid;
    gap: 4px;
    width: 18px;
  }

  .mobile-menu-toggle__lines span {
    display: block;
    width: 18px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  body.mobile-menu-open .mobile-menu-toggle__lines span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  body.mobile-menu-open .mobile-menu-toggle__lines span:nth-child(2) {
    opacity: 0;
  }

  body.mobile-menu-open .mobile-menu-toggle__lines span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: block;
    background: rgba(4, 7, 9, 0.66);
    opacity: 0;
    visibility: hidden;
    transition: opacity 230ms ease, visibility 230ms ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .content,
  body.page-embed .content {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 100dvh;
    height: auto;
    margin: 0 !important;
    padding: calc(var(--mobile-header-height) + 24px) var(--mobile-gutter) 36px !important;
    overflow: visible;
  }

  .content > h1 {
    max-width: 100%;
    margin-bottom: 12px;
    font-size: clamp(30px, 9vw, 42px) !important;
    overflow-wrap: anywhere;
  }

  .content > p {
    max-width: 100%;
    font-size: 16px !important;
  }

  .alert-warn {
    padding: 14px;
    margin: 16px 0;
  }

  .table-card {
    width: 100%;
    margin-top: 14px;
    overflow: hidden;
  }

  .table-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .svc-table {
    min-width: 720px;
  }

  .svc-table thead th,
  .svc-table tbody td {
    padding: 12px !important;
  }

  body.bot-commands-page .svc-table {
    min-width: 760px !important;
  }

  .tag,
  .tag-ok {
    min-height: 30px !important;
    margin: 3px 4px 3px 0 !important;
  }

  .ui-select {
    width: 100%;
    min-width: 0;
  }

  .kuma-split {
    display: flex !important;
    flex-direction: column;
    gap: 10px !important;
    width: 100%;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: calc(var(--mobile-header-height) + 10px) 8px 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .kuma-split > .kuma-frame {
    flex: 0 0 82dvh;
    width: 100%;
    min-height: 620px !important;
    border-radius: 8px !important;
  }

  .kuma-divider {
    display: none !important;
  }

  .content:not(.content--full) > .kuma-frame,
  .content > iframe:not(.kuma-frame) {
    display: block;
    width: 100%;
    height: calc(100dvh - var(--mobile-header-height) - 36px);
    min-height: 560px;
    border: 0;
  }

  body.page-embed,
  body.page-embed #app {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  body.page-embed .content {
    height: 100dvh;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  :root {
    --mobile-gutter: 12px;
  }

  .mobile-menu-toggle {
    min-width: 44px;
    width: 44px;
    padding: 9px 12px;
  }

  .mobile-menu-toggle__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sidebar {
    width: min(92vw, 330px) !important;
  }

  .sidebar-bottom {
    max-height: 46dvh;
  }

  .content > h1 {
    font-size: clamp(28px, 9.5vw, 36px) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .nav a:hover,
  .tag:hover,
  .tag-ok:hover,
  .quick-links a:hover,
  .svc-table tbody tr:hover {
    transform: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar,
  .mobile-menu-backdrop,
  .mobile-menu-toggle__lines span {
    transition: none !important;
  }
}