MediaWiki:Common.css

@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Comfortaa", cursive, sans-serif;
}

/* ================== СИСТЕМА ХАОСА: ТАБЫ И БЛОКИ ================== */

/* Контейнер */
.hj-chaos-container {
  margin-bottom: 1.5em;
}

/* Ряд вкладок */
.hj-chaos-tabs {
  display: flex;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
}

/* Кнопки-вкладки как большие карточки */
.hj-chaos-tab-button {
  flex: 1 1 0;
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: #191919;
  border: none;
  position: relative;
}
.hj-chaos-tab-button:last-child {
  border-right: none;
}

/* Заголовок/подзаголовок кнопки */
.hj-chaos-tab-title {
  font-weight: bold;
  font-size: 1em;
}
.hj-chaos-tab-desc {
  font-size: 0.85em;
  opacity: 0.9;
}

/* Базовые цвета вкладок (не активные) */
.hj-chaos-tab-button[data-chaos="overview"] {
  background: #222833;
}
.hj-chaos-tab-button[data-chaos="calm"] {
  background: #1e2b20;
}
.hj-chaos-tab-button[data-chaos="medium"] {
  background: #2b2615;
}
.hj-chaos-tab-button[data-chaos="high"] {
  background: #2b1818;
}
.hj-chaos-tab-button[data-chaos="storytellers"] {
  background: #1f1c28;
}

/* Активные цвета (фон) */
.hj-chaos-tab-button.active[data-chaos="overview"] {
  background: #2f3b4d;
}
.hj-chaos-tab-button.active[data-chaos="calm"] {
  background: #234526;
}
.hj-chaos-tab-button.active[data-chaos="medium"] {
  background: #5c4716;
}
.hj-chaos-tab-button.active[data-chaos="high"] {
  background: #5c1f1f;
}
.hj-chaos-tab-button.active[data-chaos="storytellers"] {
  background: #2a2238;
}

/* Глобальный ресет рамок у активной вкладки,
   чтобы режимные правила не конфликтовали */
.hj-chaos-tab-button.active {
  border: none;
  border-bottom: none;
  margin-bottom: 0;
}

/* Блок контента — без верхней границы, только бока + низ */
.hj-chaos-block {
  display: none;
  padding: 16px 18px;
  border-style: solid;
  border-width: 0 3px 3px; /* top=0, left/right/bottom=3px */
  border-color: transparent;
  border-radius: 0 0 6px 6px;
  background: #111;
}
.hj-chaos-block.active {
  display: block;
}

/* ------------------------------------------------------------------
   OVERVIEW (СИНИЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-overview .hj-chaos-tabs {
  border-bottom: none;
}

/* рамка вокруг активной вкладки */
.hj-chaos-container.chaos-overview
  .hj-chaos-tab-button.active[data-chaos="overview"] {
  border: 3px solid #4b6284;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px; /* вкладка нависает над блоком */
  z-index: 2;
}

/* рамка и фон блока */
.hj-chaos-container.chaos-overview .hj-chaos-block[data-chaos="overview"] {
  border-color: #4b6284;
  background: #2f3b4d;
}

/* нижняя линия у НЕактивных вкладок */
.hj-chaos-container.chaos-overview .hj-chaos-tab-button:not(.active) {
  border-bottom: 3px solid #4b6284;
}

/* ------------------------------------------------------------------
   CALM (ЗЕЛЁНЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-calm .hj-chaos-tabs {
  border-bottom: none;
}

.hj-chaos-container.chaos-calm .hj-chaos-tab-button.active[data-chaos="calm"] {
  border: 3px solid #3f7a47;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px;
  z-index: 2;
}

.hj-chaos-container.chaos-calm .hj-chaos-block[data-chaos="calm"] {
  border-color: #3f7a47;
  background: #234526;
}

.hj-chaos-container.chaos-calm .hj-chaos-tab-button:not(.active) {
  border-bottom: 3px solid #3f7a47;
}

/* ------------------------------------------------------------------
   MEDIUM (ЖЁЛТО-КОРИЧНЕВЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-medium .hj-chaos-tabs {
  border-bottom: none;
}

.hj-chaos-container.chaos-medium
  .hj-chaos-tab-button.active[data-chaos="medium"] {
  border: 3px solid #c9982b;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px;
  z-index: 2;
}

.hj-chaos-container.chaos-medium .hj-chaos-block[data-chaos="medium"] {
  border-color: #c9982b;
  background: #5c4716;
}

.hj-chaos-container.chaos-medium .hj-chaos-tab-button:not(.active) {
  border-bottom: 3px solid #c9982b;
}

/* ------------------------------------------------------------------
   HIGH (КРАСНЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-high .hj-chaos-tabs {
  border-bottom: none;
}

.hj-chaos-container.chaos-high .hj-chaos-tab-button.active[data-chaos="high"] {
  border: 3px solid #c33a3a;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px;
  z-index: 2;
}

.hj-chaos-container.chaos-high .hj-chaos-block[data-chaos="high"] {
  border-color: #c33a3a;
  background: #5c1f1f;
}

.hj-chaos-container.chaos-high .hj-chaos-tab-button:not(.active) {
  border-bottom: 3px solid #c33a3a;
}

/* ------------------------------------------------------------------
   STORYTELLERS (ФИОЛЕТОВЫЙ)
------------------------------------------------------------------ */

.hj-chaos-container.chaos-storytellers .hj-chaos-tabs {
  border-bottom: none;
}

.hj-chaos-container.chaos-storytellers
  .hj-chaos-tab-button.active[data-chaos="storytellers"] {
  border: 3px solid #6b5a8a;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -3px;
  z-index: 2;
}

.hj-chaos-container.chaos-storytellers
  .hj-chaos-block[data-chaos="storytellers"] {
  border-color: #6b5a8a;
  background: #2a2238;
}

.hj-chaos-container.chaos-storytellers .hj-chaos-tab-button:not(.active) {
  border-bottom: 3px solid #6b5a8a;
}

/* --- Шахматный макет для рассказчиков --- */
.hj-storyteller-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
  align-items: stretch;
}
.hj-storyteller-row.reverse {
  flex-direction: row-reverse;
}

.hj-storyteller-card {
  flex: 3;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
}
.hj-storyteller-card h3 {
  margin: 0 0 4px 0;
  font-size: 1.3em;
}
.hj-storyteller-card .hj-st-subtitle {
  font-size: 0.9em;
  opacity: 0.7;
  margin-bottom: 10px;
}
.hj-storyteller-card .hj-st-quote {
  font-style: italic;
  opacity: 0.8;
  margin-bottom: 12px;
  font-size: 0.95em;
}

.hj-storyteller-art {
  flex: 2;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 280px;
  position: relative;
}
/* Nuke every MW wrapper inside the art block */
.hj-storyteller-art *:not(img) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  float: none !important;
  overflow: hidden !important;
  position: static !important;
  pointer-events: none;
}
.hj-storyteller-art .thumbcaption,
.hj-storyteller-art .magnify {
  display: none !important;
  height: 0 !important;
}
.hj-storyteller-art img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  border: none !important;
  border-radius: 0;
  background: transparent !important;
}

/* Блоки параметров внутри карточки рассказчика */
.hj-st-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.hj-st-stat {
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9em;
}
.hj-st-stat b {
  display: block;
  font-size: 0.85em;
  opacity: 0.6;
  margin-bottom: 2px;
}

/* Полноширинные блоки деталей */
.hj-st-details {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.hj-st-details h4 {
  margin: 0 0 6px 0;
  font-size: 0.95em;
}
.hj-st-details ul {
  margin: 4px 0 0 1.2em;
}
.hj-st-details li {
  margin-bottom: 3px;
}

/* Мобилки */
@media (max-width: 800px) {
  .hj-storyteller-row,
  .hj-storyteller-row.reverse {
    flex-direction: column;
  }
  .hj-storyteller-art {
    min-height: 200px;
    max-height: 300px;
  }
  .hj-st-stats {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ */

/* Оформление самих карточек */
.hj-rule-card {
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid #00000055;
  background: rgba(
    0,
    0,
    0,
    0.22
  ); /* дефолтный фон, потом JS его подкрашивает */
  box-shadow:
    inset 0 1px 0 #ffffff10,
    0 0 0 1px #00000022;
}

/* Заголовок внутри блока */
.hj-chaos-block h2 {
  margin-top: 0;
}

/* Карточки сеткой */
.hj-rule-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 980px) {
  .hj-rule-cards {
    grid-template-columns: 1fr;
  }
}

.hj-rule-card h3,
.hj-rule-card h4 {
  margin: 0 0 0.4em 0;
}
.hj-rule-card p {
  margin: 0 0 0.6em 0;
}
.hj-rule-card ul {
  margin: 0.4em 0 0 1.2em;
}

/* Архив (как было) */
.hj-legacy {
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border: 0;
}
.hj-legacy .wikitable {
  background: #111;
  color: inherit;
}

/* Убираем серый фон у всех миниатюр и одиночных картинок */
.thumbinner,
.thumb {
  background: none !important;
  border: none !important;
}

.inline-img {
  background: none !important;
  vertical-align: middle;
}

/* ===== Base dark theme overrides ===== */
html {
  background: #060608 !important;
}

body {
  background: transparent !important;
}

#mw-page-base {
  background: none !important;
}

#mw-head-base {
  background: none !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

#content {
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.8);
}

#bodyContent {
  position: relative;
  /* No z-index here — avoids creating a stacking context
     that traps the parallax layers inside it */
}

/* ===== Parallax layers (structure only — visuals applied via JS) ===== */
#orbitalis-parallax-bg,
.orb-parallax-layer,
#orbitalis-vignette {
  /* These divs are inserted via mainpage wikitext.
       JS in Common.js applies the actual styles.
       In case JS hasn't loaded yet, hide them to avoid layout issues. */
  display: block;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ===== Wiki content link colours for dark theme ===== */
#content a,
#content a:visited {
  color: rgba(130, 170, 255, 0.85);
}

#content a:hover {
  color: rgba(170, 200, 255, 1);
}

/* ===== Main page: override Citizen skin link styles ===== */
/* CSS fallback — JS engine in Common.js also handles this via DOM */
#orb-content a,
#orb-content a:link,
#orb-content a:visited,
#orb-content a:hover,
#orb-content a:active,
#orb-content a:focus {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  outline: none !important;
}

#orb-content small {
  display: block;
  margin-top: 3px;
}

[id^="orb-card-"] {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

/* ===== Main page: Orbitalis visual design (CSS-first) ===== */

/* Description block */
#orb-desc {
  border-left: 2px solid rgba(91, 141, 239, 0.2) !important;
}

/* Section titles */
#orb-title-docs {
  color: rgba(91, 141, 239, 0.8) !important;
  text-shadow: 0 0 25px rgba(91, 141, 239, 0.2) !important;
}
#orb-title-play {
  color: rgba(180, 130, 255, 0.8) !important;
  text-shadow: 0 0 25px rgba(180, 130, 255, 0.2) !important;
}
/* Decorative underline bars */
#orb-title-docs::after,
#orb-title-play::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-top: 10px;
}
#orb-title-docs::after {
  background: rgba(91, 141, 239, 0.35);
  box-shadow: 0 0 12px rgba(91, 141, 239, 0.12);
}
#orb-title-play::after {
  background: rgba(180, 130, 255, 0.35);
  box-shadow: 0 0 12px rgba(180, 130, 255, 0.12);
}

/* Doc cards — blue accent */
#orb-card-1 {
  border-left: 2px solid rgba(91, 141, 239, 0.3) !important;
  background: linear-gradient(
    90deg,
    rgba(91, 141, 239, 0.04) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
#orb-card-2 {
  border-left: 2px solid rgba(91, 141, 239, 0.25) !important;
  background: linear-gradient(
    90deg,
    rgba(91, 141, 239, 0.032) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
#orb-card-3 {
  border-left: 2px solid rgba(91, 141, 239, 0.2) !important;
  background: linear-gradient(
    90deg,
    rgba(91, 141, 239, 0.024) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
#orb-card-4 {
  border-left: 2px solid rgba(91, 141, 239, 0.15) !important;
  background: linear-gradient(
    90deg,
    rgba(91, 141, 239, 0.016) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}

/* Play cards — purple accent */
#orb-card-5 {
  border-left: 2px solid rgba(180, 130, 255, 0.3) !important;
  background: linear-gradient(
    90deg,
    rgba(180, 130, 255, 0.04) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
#orb-card-6 {
  border-left: 2px solid rgba(180, 130, 255, 0.25) !important;
  background: linear-gradient(
    90deg,
    rgba(180, 130, 255, 0.032) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
#orb-card-7 {
  border-left: 2px solid rgba(180, 130, 255, 0.2) !important;
  background: linear-gradient(
    90deg,
    rgba(180, 130, 255, 0.024) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}
#orb-card-8 {
  border-left: 2px solid rgba(180, 130, 255, 0.15) !important;
  background: linear-gradient(
    90deg,
    rgba(180, 130, 255, 0.016) 0%,
    transparent 70%
  ) !important;
  border-radius: 0 4px 4px 0 !important;
  cursor: pointer;
}

/* Card hover — blue docs */
#orb-card-1:hover,
#orb-card-2:hover,
#orb-card-3:hover,
#orb-card-4:hover {
  background: linear-gradient(
    90deg,
    rgba(91, 141, 239, 0.08) 0%,
    rgba(91, 141, 239, 0.02) 60%,
    transparent 100%
  ) !important;
  border-left-color: rgba(91, 141, 239, 0.6) !important;
  box-shadow:
    inset 3px 0 20px -4px rgba(91, 141, 239, 0.15),
    0 0 25px rgba(91, 141, 239, 0.04) !important;
}
/* Card hover — purple play */
#orb-card-5:hover,
#orb-card-6:hover,
#orb-card-7:hover,
#orb-card-8:hover {
  background: linear-gradient(
    90deg,
    rgba(180, 130, 255, 0.08) 0%,
    rgba(180, 130, 255, 0.02) 60%,
    transparent 100%
  ) !important;
  border-left-color: rgba(180, 130, 255, 0.6) !important;
  box-shadow:
    inset 3px 0 20px -4px rgba(180, 130, 255, 0.15),
    0 0 25px rgba(180, 130, 255, 0.04) !important;
}

/* Server block */
#orb-server {
  border-left: 2px solid rgba(100, 220, 180, 0.3) !important;
  border-radius: 0 4px 4px 0 !important;
}
#orb-online {
  color: rgba(100, 220, 180, 0.55);
  text-shadow: 0 0 15px rgba(100, 220, 180, 0.15);
}

/* Buttons */
#orb-addr {
  border: 1px solid rgba(100, 220, 180, 0.25) !important;
  border-radius: 4px !important;
  background: rgba(100, 220, 180, 0.06) !important;
  color: rgba(100, 220, 180, 0.7) !important;
  cursor: pointer !important;
}
#orb-addr:hover {
  background: rgba(100, 220, 180, 0.12) !important;
  border-color: rgba(100, 220, 180, 0.4) !important;
}
#orb-btn-proxy {
  border: 1px solid rgba(100, 220, 180, 0.2) !important;
  border-radius: 4px !important;
  background: rgba(100, 220, 180, 0.04) !important;
}
#orb-btn-proxy:hover {
  background: rgba(100, 220, 180, 0.1) !important;
  border-color: rgba(100, 220, 180, 0.35) !important;
}
#orb-btn-byond {
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

/* Footer */
#orb-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* ===== Heading styles ===== */
#content h1,
#content h2,
#content h3,
#content h4 {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#firstHeading {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== Navigation / sidebar dark overrides ===== */
#mw-panel .portal h3 {
  color: rgba(255, 255, 255, 0.5) !important;
}

#mw-panel .portal .body a {
  color: rgba(200, 200, 200, 0.7) !important;
}

#mw-panel .portal .body a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Top navigation bar ===== */
#mw-head a {
  color: rgba(200, 200, 200, 0.7) !important;
}

#mw-head a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Page action tabs (Edit, View source, History, etc.) ===== */
/* Vector skin */
.vector-menu-tabs li a,
.vector-menu-tabs li a:visited,
#p-views li a,
#p-cactions li a,
#p-namespaces li a {
  color: rgba(200, 200, 200, 0.7) !important;
}

.vector-menu-tabs li a:hover,
#p-views li a:hover,
#p-cactions li a:hover,
#p-namespaces li a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

.vector-menu-tabs li.selected a,
#p-views li.selected a,
#p-namespaces li.selected a {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Vector tab underline/border */
.vector-menu-tabs li {
  background: none !important;
}

.vector-menu-tabs li.selected {
  background: none !important;
  border-bottom-color: rgba(140, 180, 255, 0.6) !important;
}

/* Citizen skin page actions */
.citizen-header,
.citizen-page-header {
  background: transparent !important;
}

.page-actions a,
.page-actions button,
.citizen-page-heading__actions a,
.citizen-page-heading__actions button {
  color: rgba(200, 200, 200, 0.7) !important;
}

.page-actions a:hover,
.page-actions button:hover,
.citizen-page-heading__actions a:hover,
.citizen-page-heading__actions button:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Section edit links [edit] ===== */
.mw-editsection,
.mw-editsection a,
.mw-editsection-bracket {
  color: rgba(140, 180, 255, 0.5) !important;
}

.mw-editsection a:hover {
  color: rgba(180, 210, 255, 0.9) !important;
}

/* ===== Dropdown menus / portlets (More, Tools, etc.) ===== */
.vector-menu-content,
.vector-menu-content ul,
#p-cactions .vector-menu-content,
.mw-portlet .mw-portlet-body {
  background: #14141a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.vector-menu-content li a,
.mw-portlet .mw-portlet-body a {
  color: rgba(200, 200, 200, 0.7) !important;
}

.vector-menu-content li a:hover,
.mw-portlet .mw-portlet-body a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ===== Citizen skin sidebar ===== */
.citizen-drawer,
.citizen-drawer__content,
.citizen-menu__card {
  background: #14141a !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.citizen-menu__card a {
  color: rgba(200, 200, 200, 0.7) !important;
}

.citizen-menu__card a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Citizen top header bar */
.citizen-header__logo,
.citizen-header__inner {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Notifications / user menu ===== */
#pt-notifications-alert a,
#pt-notifications-notice a,
#p-personal li a,
.mw-header-notifications a {
  color: rgba(200, 200, 200, 0.7) !important;
}

#p-personal li a:hover,
.mw-header-notifications a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== Edit page / form elements ===== */
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
select {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Edit toolbar */
.oo-ui-toolbar-bar {
  background: #14141a !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.oo-ui-toolbar-bar .oo-ui-buttonElement-button {
  color: rgba(200, 200, 200, 0.7) !important;
}

/* ===== Diff / special pages ===== */
.diff-context {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.diff-addedline {
  background: rgba(50, 120, 50, 0.15) !important;
}

.diff-deletedline {
  background: rgba(120, 50, 50, 0.15) !important;
}

/* ===== Tables (wikitable) ===== */
.wikitable {
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.wikitable th {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.wikitable td {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Infobox / messagebox ===== */
.mbox-small,
.ambox,
.tmbox,
.ombox,
.cmbox,
.fmbox {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Search box ===== */
#simpleSearch {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#searchInput {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* ===== Footer ===== */
#footer {
  color: rgba(255, 255, 255, 0.3);
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

#footer a {
  color: rgba(140, 180, 255, 0.6) !important;
}

/* ===== Category links ===== */
#catlinks {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ===== Table of Contents (native fallback) ===== */
#toc,
.toc {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ===== Orbitalis custom TOC ===== */
/* Opt-in: add <div id="orb-toc"></div> to page wikitext to activate.
   JS creates #orb-toc-sidebar in document.body (outside any skin container). */

/* Hide the marker div */
#orb-toc {
  display: none !important;
}

/* The actual sidebar (appended to body by JS) */
#orb-toc-sidebar {
  position: fixed;
  left: 0;
  top: 56px;
  width: 220px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  background: transparent;
  border-right: none;
  padding: 20px 12px 20px 16px;
  pointer-events: auto;
  font-family: "Comfortaa", sans-serif;
  font-size: 0.82em;
  line-height: 1.45;
  transition: opacity 0.3s ease;
}

/* Title */
#orb-toc-sidebar .orb-toc-head {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#orb-toc-sidebar .orb-toc-head::before {
  display: none;
}

/* List reset */
#orb-toc-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* All items */
#orb-toc-sidebar li {
  margin: 0;
  padding: 0;
}

#orb-toc-sidebar li a {
  display: block;
  padding: 5px 0 5px 12px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none !important;
  transition:
    color 0.2s,
    background 0.2s;
  background: none !important;
  box-shadow: none !important;
}

#orb-toc-sidebar li a:hover {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(91, 141, 239, 0.04) !important;
}

/* Active section (works for all heading levels) */
#orb-toc-sidebar li.orb-toc-active > a {
  color: rgba(140, 180, 255, 0.95);
  background: rgba(91, 141, 239, 0.06) !important;
}

/* h2 (sub-section under h1) */
#orb-toc-sidebar li.orb-toc-h2 a {
  padding-left: 12px;
}

/* h3 indent */
#orb-toc-sidebar li.orb-toc-h3 a {
  padding-left: 24px;
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.35);
}

#orb-toc-sidebar li.orb-toc-h3.orb-toc-active > a {
  color: rgba(140, 180, 255, 0.95);
}

/* h4 indent */
#orb-toc-sidebar li.orb-toc-h4 a {
  padding-left: 36px;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.28);
}

#orb-toc-sidebar li.orb-toc-h4.orb-toc-active > a {
  color: rgba(140, 180, 255, 0.95);
}

/* Custom scrollbar */
#orb-toc-sidebar::-webkit-scrollbar {
  width: 3px;
}
#orb-toc-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
#orb-toc-sidebar::-webkit-scrollbar-thumb {
  background: rgba(91, 141, 239, 0.15);
  border-radius: 2px;
}

/* Mobile: hide fixed sidebar */
@media (max-width: 1100px) {
  #orb-toc-sidebar {
    display: none !important;
  }
}