/* =========================
   GLOBAL / BACKGROUND
========================= */
@font-face {
  font-family: "SMF Comic Sans MS";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Comic Sans MS"),
    local("ComicSansMS");
}

@font-face {
  font-family: "SMF Comic Sans MS";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Comic Sans MS Bold"),
    local("ComicSansMS-Bold"),
    local("Comic Sans MS");
}

@font-face {
  font-family: "SMF Comic Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/comic-neue-400.ttf") format("truetype");
}

@font-face {
  font-family: "SMF Comic Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/comic-neue-700.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

:root {
  --bg-main: #e6ebf0;
  --panel: #f8fbff;
  --border: #b7c4cf;

  --primary: #3b6e8f;
  --primary-dark: #2f556e;

  --accent: #f4b400;

  --text: #2a2a2a;

  --button-bg: linear-gradient(#ffffff, #dfe8f1);
  --button-hover-bg: linear-gradient(#a9c6da, #8fb3cb);
  --button-active-bg: linear-gradient(#8fb3cb, #7fa6c1);
  --button-border: var(--border);
  --button-hover-border: #5f86a3;
  --button-text: var(--primary-dark);
  --button-hover-text: #1c3a52;
  --button-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0,0,0,0.12);
  --button-hover-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 2px 4px rgba(0,0,0,0.12);
  --button-active-shadow: inset 0 1px 1px rgba(35,74,101,0.22), 0 1px 2px rgba(0,0,0,0.14);
  --site-font: "SMF Comic Sans MS", "Comic Sans MS", "Comic Sans", "SMF Comic Neue", "Trebuchet MS", Arial, sans-serif;
}

html {
  height: 100%;
  background: #2f556e;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  font-family: var(--site-font);
  margin: 0;
  overflow-x: hidden;
  padding: 0;

  background: linear-gradient(135deg, #7fa6c1, #c7d8e6);
}

button {
  font-family: inherit;
}

button:focus {
  outline: none;
}

.main-btn,
.control-btn,
.edit-save-btn,
.staff-button,
.levels-button,
.level-action,
.level-form button,
.copy-code-btn,
.help-footer button,
.level-mode button,
#fullscreen-btn,
.notification-btn,
.play-btn,
.version-btn,
.size-buttons button,
.game-info-editor button,
.help-btn,
.cycle-btn,
.favorite-btn,
.level-actions button,
.level-detail-page .level-code-actions button,
.level-detail-page .level-code-actions a,
.level-detail-page .level-inline-btn,
.level-detail-page .level-text-btn,
.level-detail-page .level-rate-submit,
.inline-view-button,
.contact-actions a,
.reaction-btn,
.profile-music-controls button,
#music-youtube-btn,
.profile-audio-player button,
.music-icon-btn,
.member-quick-links a,
.auth a,
.levels-toolbar-row > .levels-icon-control > .levels-icon-button,
.profile-description-toggle,
.profile-description-collapse,
.level-thumbnail-edit-button {
  padding: 6px 14px;
  border: 1px solid var(--button-border);
  border-radius: 10px;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--button-shadow);
  outline: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease,
    opacity 0.15s ease;
}

.main-btn:not(:disabled):hover,
.control-btn:not(:disabled):hover,
.edit-save-btn:not(:disabled):hover,
.staff-button:not(:disabled):hover,
.levels-button:not(:disabled):hover,
.level-action:not(:disabled):hover,
.level-form button:not(:disabled):hover,
.copy-code-btn:not(:disabled):hover,
.help-footer button:not(:disabled):hover,
.level-mode button:not(:disabled):hover,
#fullscreen-btn:not(:disabled):hover,
.notification-btn:not(:disabled):hover,
.play-btn:hover,
.version-btn:hover,
.size-buttons button:not(:disabled):hover,
.game-info-editor button:not(:disabled):hover,
.help-btn:hover,
.cycle-btn:hover,
.favorite-btn:hover,
.level-actions button:not(:disabled):hover,
.level-detail-page .level-code-actions button:not(:disabled):hover,
.level-detail-page .level-code-actions a:hover,
.level-detail-page .level-inline-btn:hover,
.level-detail-page .level-text-btn:hover,
.level-detail-page .level-rate-submit:not(:disabled):hover,
.inline-view-button:hover,
.contact-actions a:hover,
.reaction-btn:not(:disabled):hover,
.profile-music-controls button:not(:disabled):hover,
#music-youtube-btn:hover,
.profile-audio-player button:not(:disabled):hover,
.music-icon-btn:not(:disabled):hover,
.member-quick-links a:hover,
.auth a:hover,
.levels-toolbar-row > .levels-icon-control > .levels-icon-button:not(:disabled):hover,
.profile-description-toggle:not(:disabled):hover,
.profile-description-collapse:not(:disabled):hover,
.level-thumbnail-edit-button:not(:disabled):hover {
  border-color: var(--button-hover-border);
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
  box-shadow: var(--button-hover-shadow);
}

.main-btn:not(:disabled):active,
.control-btn:not(:disabled):active,
.edit-save-btn:not(:disabled):active,
.staff-button:not(:disabled):active,
.levels-button:not(:disabled):active,
.level-action:not(:disabled):active,
.level-form button:not(:disabled):active,
.copy-code-btn:not(:disabled):active,
.help-footer button:not(:disabled):active,
.level-mode button:not(:disabled):active,
#fullscreen-btn:not(:disabled):active,
.notification-btn:not(:disabled):active,
.play-btn:active,
.version-btn:active,
.size-buttons button:not(:disabled):active,
.game-info-editor button:not(:disabled):active,
.help-btn:active,
.cycle-btn:active,
.favorite-btn:active,
.level-actions button:not(:disabled):active,
.level-detail-page .level-code-actions button:not(:disabled):active,
.level-detail-page .level-code-actions a:active,
.level-detail-page .level-inline-btn:active,
.level-detail-page .level-text-btn:active,
.level-detail-page .level-rate-submit:not(:disabled):active,
.inline-view-button:active,
.contact-actions a:active,
.reaction-btn:not(:disabled):active,
.profile-music-controls button:not(:disabled):active,
#music-youtube-btn:active,
.profile-audio-player button:not(:disabled):active,
.music-icon-btn:not(:disabled):active,
.member-quick-links a:active,
.auth a:active,
.levels-toolbar-row > .levels-icon-control > .levels-icon-button:not(:disabled):active,
.profile-description-toggle:not(:disabled):active,
.profile-description-collapse:not(:disabled):active,
.level-thumbnail-edit-button:not(:disabled):active {
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}

.reaction-btn.active {
  border-color: var(--button-hover-border);
  background: var(--button-active-bg);
  color: var(--button-hover-text);
  box-shadow: var(--button-active-shadow);
}

.main-btn:disabled,
.control-btn:disabled,
.edit-save-btn:disabled,
.staff-button:disabled,
.levels-button:disabled,
.level-action:disabled,
.level-form button:disabled,
.copy-code-btn:disabled,
.help-footer button:disabled,
.level-mode button:disabled,
#fullscreen-btn:disabled,
.notification-btn:disabled,
.play-btn:disabled,
.size-buttons button:disabled,
.game-info-editor button:disabled,
.help-btn:disabled,
.cycle-btn:disabled,
.favorite-btn:disabled,
.level-actions button:disabled,
.level-detail-page .level-code-actions button:disabled,
.level-detail-page .level-inline-btn:disabled,
.level-detail-page .level-text-btn:disabled,
.level-detail-page .level-rate-submit:disabled,
.inline-view-button:disabled,
.reaction-btn:disabled,
.profile-music-controls button:disabled,
.profile-audio-player button:disabled,
.music-icon-btn:disabled,
.levels-toolbar-row > .levels-icon-control > .levels-icon-button:disabled,
.profile-description-toggle:disabled,
.profile-description-collapse:disabled,
.level-thumbnail-edit-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(20%);
}

.main-btn:disabled:hover,
.control-btn:disabled:hover,
.edit-save-btn:disabled:hover,
.staff-button:disabled:hover,
.levels-button:disabled:hover,
.level-action:disabled:hover,
.level-form button:disabled:hover,
.copy-code-btn:disabled:hover,
.help-footer button:disabled:hover,
.level-mode button:disabled:hover,
#fullscreen-btn:disabled:hover,
.notification-btn:disabled:hover,
.play-btn:disabled:hover,
.size-buttons button:disabled:hover,
.game-info-editor button:disabled:hover,
.help-btn:disabled:hover,
.cycle-btn:disabled:hover,
.favorite-btn:disabled:hover,
.level-actions button:disabled:hover,
.level-detail-page .level-code-actions button:disabled:hover,
.level-detail-page .level-inline-btn:disabled:hover,
.level-detail-page .level-text-btn:disabled:hover,
.level-detail-page .level-rate-submit:disabled:hover,
.inline-view-button:disabled:hover,
.reaction-btn:disabled:hover,
.profile-music-controls button:disabled:hover,
.profile-audio-player button:disabled:hover,
.music-icon-btn:disabled:hover,
.levels-toolbar-row > .levels-icon-control > .levels-icon-button:disabled:hover,
.profile-description-toggle:disabled:hover,
.profile-description-collapse:disabled:hover,
.level-thumbnail-edit-button:disabled:hover {
  border-color: var(--button-border);
  background: var(--button-bg);
  color: var(--button-text);
  box-shadow: var(--button-shadow);
}

body.warning-ack-required {
  overflow: hidden;
}

.mandatory-warning-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 40, 60, 0.65);
}

.mandatory-warning-modal-content {
  width: min(920px, 94vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(#f8fbff, #e7eff6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
}

.login-ban-modal .mandatory-warning-modal-content {
  animation: levelGuidelinesPopIn 0.18s ease;
}

.mandatory-warning-modal .level-rates-modal-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  background: #437f9f;
  color: #ffffff;
}

.mandatory-warning-modal .level-rates-modal-header span {
  justify-self: start;
  white-space: nowrap;
  font-size: 26px;
  font-weight: 800;
  text-align: left;
}

.verification-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 40, 60, 0.65);
}

.verification-modal-content {
  width: 560px;
  max-width: 92%;
  background: linear-gradient(#f4f8fc, #e3edf6);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 10px 30px rgba(0,0,0,0.3);
  animation: levelGuidelinesPopIn 0.18s ease;
  overflow: hidden;
}

.verification-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 58px 14px 18px;
  background: linear-gradient(#4a7fa3, #3b6e8f);
  color: white;
  font-weight: bold;
  font-size: 20px;
  text-align: left;
}

.verification-modal-header span {
  white-space: nowrap;
}

.verification-modal-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 8px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  text-indent: -999px;
}

.verification-modal-close:hover {
  background: rgba(255,255,255,0.24);
}

.verification-modal-close::before,
.verification-modal-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.verification-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.verification-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.verification-modal-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 22px 8px;
  color: #385d78;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
}

.verification-modal-body p {
  max-width: 520px;
  margin: 8px 0;
}

.verification-link {
  align-self: center;
  display: inline-block;
  color: var(--primary-dark);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-align: center;
}

.verification-modal-actions {
  padding: 10px;
  text-align: center;
}

.verification-modal-ok {
  width: 106px;
  height: 40px;
  padding: 8px 20px;
  font-size: 16px;
  font-weight: bold;
}

.mandatory-warning-body {
  padding: 18px;
  overflow: auto;
}

.mandatory-warning-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 9px 14px;
  margin: 0 0 13px;
}

.mandatory-warning-meta div,
.mandatory-warning-message {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(35, 61, 82, 0.08);
}

.mandatory-warning-meta dt {
  margin: 0;
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.mandatory-warning-meta dd {
  margin: 2px 0 0;
}

.mandatory-warning-message {
  min-height: 110px;
  color: var(--text);
  white-space: pre-wrap;
}

.mandatory-warning-error {
  margin: 12px 0 0;
  color: #ad3939;
  font-weight: bold;
}

.mandatory-warning-actions {
  display: flex;
  justify-content: center;
  padding: 0 18px 18px;
}

.mandatory-warning-ack {
  min-height: 40px;
  padding: 7px 16px;
  font-size: 15px;
}

.pagination,
.levels-pagination,
.staff-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 0;
}

.pagination button,
.levels-pagination button,
.staff-pagination .page-button {
  min-width: 35px;
  height: 35px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(#ffffff, #dfe8f1);
  color: #3e4d59;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 2px rgba(0,0,0,0.05);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.pagination > button:first-child,
.pagination > button:last-of-type,
.levels-pagination > button:first-child,
.levels-pagination > button:last-of-type {
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

.pagination button:hover:not(.active):not(:disabled),
.levels-pagination button:hover:not(.active):not(:disabled),
.staff-pagination .page-button:not(.active):not(.disabled):hover {
  border-color: #6e98b5;
  background: linear-gradient(#c2d9e8, #a9c9de);
  color: #1c3a52;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 4px rgba(47,85,110,0.15);
}

.pagination button:active:not(.active):not(:disabled),
.levels-pagination button:active:not(.active):not(:disabled),
.staff-pagination .page-button:not(.active):not(.disabled):active {
  background: linear-gradient(#afd0e4, #98bdd4);
  box-shadow:
    inset 0 1px 2px rgba(35,74,101,0.16),
    0 1px 2px rgba(0,0,0,0.1);
}

.pagination button.active,
.levels-pagination button.active,
.staff-pagination .page-button.active {
  pointer-events: none;
  cursor: default;
  border-color: #5f86a3;
  background: linear-gradient(#b7cede, #9db7c8);
  color: #1c3a52;
  font-weight: 700;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.15);
}

.pagination button:disabled,
.levels-pagination button:disabled,
.staff-pagination .page-button.disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.pagination-dots,
.pagination .pagination-dots,
.levels-pagination .pagination-dots,
.staff-pagination .pagination-dots {
  padding: 0 3px;
  color: #3e4d59;
  font-weight: 700;
}

.pagination-jump {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.pagination-jump-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.pagination-jump input {
  width: 64px;
  height: 35px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px 0 0 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  color: var(--primary-dark);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.pagination-jump input::-webkit-outer-spin-button,
.pagination-jump input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.pagination-jump input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.pagination-jump input::placeholder {
  color: #55748b;
  font-style: italic;
  opacity: 1;
}

.pagination-jump input:focus {
  outline: none;
  border-color: #5f86a3;
  background: #ffffff;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.1),
    0 0 0 2px rgba(95,134,163,0.15);
}

.pagination-jump button {
  width: 35px;
  min-width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid var(--button-border);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: var(--button-bg);
  color: #3e4d59;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--button-shadow);
  text-shadow: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease;
}

.pagination-jump button:hover:not(:disabled) {
  border-color: var(--button-hover-border);
  background: var(--button-hover-bg);
  color: #1c3a52;
  box-shadow: var(--button-hover-shadow);
}

.pagination-jump button:active:not(:disabled) {
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}

.pagination-jump svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
}

textarea,
input,
[contenteditable="true"] {
  cursor: url("/cursors/dark-ibeam.cur"), text;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  cursor: default;
}

input[type="range"]::-webkit-slider-thumb {
  cursor: default;
}

input[type="range"]::-moz-range-thumb {
  cursor: default;
}

/* =========================
   HEADER
========================= */
.header {
  background: linear-gradient(#f4f7fa, #d6dee6);
  border-bottom: 1px solid var(--border);

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 5px rgba(0,0,0,0.1);

  margin-bottom: 25px;    
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;

  display: flex;
  align-items: center;
  gap: 20px;
}

/* LOGO */
.logo-area {
  display: flex;
  align-items: center;
  gap: 10px;

  text-decoration: none;
  color: inherit;
}

.logo-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ccc;
  border: 2px solid #888;
}

.logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-text {
  color: var(--primary-dark);
  font-size: 22px;
  font-weight: bold;
}

.auth {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-left: 0px;
}

.auth a {
  padding: 6px 14px;
}

.auth .mobile-actions-menu {
  display: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* NAV IN HEADER */
.header-nav {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-left: auto;
}

/* NAV BUTTON STYLE (smaller than old subnav) */
.header-nav a {
  display: flex;
  align-items: center;
  gap: 6px;

  padding: 4px 2px;

  font-size: 15px;
  font-weight: 600;
  color: var(--primary-dark);

  text-decoration: none;

  transition: color 0.15s ease, transform 0.12s ease;
}

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

@media (max-width: 900px) {
  .header-nav a {
    font-size: 0;
    padding: 8px;
  }

  .header-nav a img {
    margin: 0;
  }
}

.nav-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  fill: currentColor;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.header-nav a:hover .nav-icon {
  opacity: 1;

  filter: brightness(0) saturate(100%)
          invert(35%) sepia(30%) saturate(600%)
          hue-rotate(165deg) brightness(90%);
}

.nav-wrapper {
  max-width: 1320px;
  width: 92%;
  margin: 0 auto 25px auto;

  background: linear-gradient(#eef3f8, #d6dee6);
  border: 1px solid var(--border);
  border-radius: 6px;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(0,0,0,0.12);

  padding: 12px 14px;
}

.nav-item {
  position: relative;
}

/* hidden by default */
.tooltip {
  position: absolute;
  bottom: 155%;
  left: 50%;
  transition: opacity 0.1s ease;
  transform: translateX(-50%);
  z-index: 1000;

  background: #4a90c2;
  color: white;

  font-size: 13px;
  font-weight: bold;

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

  white-space: nowrap;

  opacity: 0;
  pointer-events: none;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.nav-item:hover,
.nav-item:focus-within {
  z-index: 1001;
}

.box:has(.nav-item:hover .tooltip),
.box-inner:has(.nav-item:hover .tooltip),
.member-panel-body:has(.nav-item:hover .tooltip),
.dashboard-icon-actions:has(.nav-item:hover .tooltip),
.comment-actions:has(.nav-item:hover .tooltip),
.reply-actions:has(.nav-item:hover .tooltip) {
  overflow: visible;
}

/* show instantly on hover */
.nav-item:hover .tooltip {
  opacity: 1;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: #4a90c2 transparent transparent transparent;
}

/* =========================
   PAGE WRAPPER
========================= */
.page-wrapper {
  max-width: 1320px;
  width: 92%;
  margin: 0 auto 25px auto;
  padding: 20px;

  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 6px 18px rgba(0,0,0,0.2);
}


/* =========================
   NAV BAR
========================= */
.subnav {
  margin-bottom: 25px;
  margin: 0;
  max-width: 1400px;
  padding: 6px;

  background: transparent;
  border: none;

  display: flex;
  justify-content: center;
  gap: 12px;
}

.subnav a {
  background: linear-gradient(#ffffff, #e3e9ef);
  border: 1px solid var(--border);

  padding: 8px 18px;
  border-radius: 18px;

  color: var(--primary-dark);
  font-weight: bold;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 4px rgba(0,0,0,0.1);

  transition: all 0.15s ease;
}

.subnav a:hover {
  background: var(--button-hover-bg);
  border-color: var(--button-hover-border);
  color: var(--button-hover-text);
  box-shadow: var(--button-hover-shadow);
}

.subnav a.active {
  background: linear-gradient(#cfdbe6, #b7cfe2);
  border-color: #5f86a3;
  color: #1c3a52;

  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.15);

  cursor: default;
  pointer-events: none; /* 🔥 disables clicking */
}

.icon {
  margin-right: 6px;
}


/* =========================
   CONTENT BOXES
========================= */
.main-content {
  flex: 1;
  min-height: 0;
}

.box {
  background: linear-gradient(#f9fcff, #edf3f8);
  border: 1px solid var(--border);
  border-radius: 5px;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 3px 8px rgba(0,0,0,0.08);

  transition: 0.15s;
}

.box:hover {
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 5px 12px rgba(0,0,0,0.12);
}

.box::before {
  content: "";
  display: block;
  height: 6px;

  background: linear-gradient(to right, var(--primary), #7fa6c1);
  border-radius: 10px 10px 0 0;
}

.box.reverse .box-inner {
  flex-direction: row-reverse;
}

.box-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 40px;
  padding: 20px 30px;

  flex-wrap: wrap;
}

.box-inner > * {
  flex: 1 1 400px;
  max-width: 500px;
}

.text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  padding: 0;
}

.text h1,
.text h2 {
  color: var(--primary-dark);
}

.text h1 {
  margin-bottom: 10px;
}

.text h2 {
  margin-top: 20px;
}

.text p {
  max-width: 800px;
  margin: 0 auto;
  color: #444;
  font-size: 16px;
}

strong {
  color: var(--accent);
}

.center-text {
  text-align: center;
}

.single-column {
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start; 
  justify-content: center;
  padding: 10px 20px;
}

.box-inner.single-column {
  width: 100%;
}

.box-inner.single-column .text p {
  max-width: 1000px;
}

.box-inner.single-column > * {
  flex: 1 1 100%;
  max-width: 100%;
  letter-spacing: 0.2px;
}

.single-column .text {
  max-width: 1100px;
  width: 100%;
}

.single-column .text > * {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* TIGHTER H3 SPACING */
.single-column .text h3 {
  margin-bottom: 2px;
}

.single-column .text h3 + p {
  margin-top: 2px;
}

.single-column .text > *:last-child {
  margin-bottom: 10px;
}

.single-column .text h1 {
  margin-bottom: 2px;
}

/* IMAGE PLACEHOLDER */
.img-large {
  max-width: 520px;
  width: 100%;
  height: 400px;

  background: #e5e7eb;
  border: none;
  border-radius: 8px;

  box-shadow: inset 0 0 10px rgba(0,0,0,0.08);
}

.img-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.page-loading-wrapper[hidden],
.home-loading-wrapper[hidden],
.level-page-loading-wrapper[hidden],
.profile-page-loading-wrapper[hidden] {
  display: none !important;
}

.page-loading-panel {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 4px 0 0;
  text-align: left;
}

.page-loading-message {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
  animation: none;
}

html:not(.home-page-loading) .home-loading-wrapper,
html:not(.level-page-loading) .level-page-loading-wrapper,
html:not(.profile-page-loading) .profile-page-loading-wrapper {
  display: none !important;
}

.home-loading-wrapper .box-inner.single-column,
.profile-page-loading-wrapper .box-inner.single-column,
.level-page-loading-wrapper .box-inner.single-column {
  max-width: none;
  padding: 20px 30px 14px;
}

/* Shared width for full-page loading shells. */
.home-loading-wrapper,
.level-page-loading-wrapper,
.profile-page-loading-wrapper {
  width: 92%;
  max-width: 1320px;
}

.home-loading-wrapper .box-inner.single-column,
.level-page-loading-wrapper .box-inner.single-column,
.profile-page-loading-wrapper .box-inner.single-column {
  width: 100%;
  max-width: none;
  padding: 20px 30px 14px;
}

/* =========================
   MEMBER HOME DASHBOARD
========================= */
.member-home[hidden] {
  display: none;
}

.member-dashboard {
  gap: 18px;
}

.member-welcome-box .box-inner.single-column {
  max-width: none;
  margin: 0;
  padding: 22px 30px 24px;
}

.member-welcome-box .single-column .text {
  max-width: none;
}

.member-dashboard-welcome {
  margin: 0;
}

.member-dashboard-welcome h1 {
  margin: 0;
}

.member-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.member-quick-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  font-size: 14px;
  font-weight: 700;
}

.member-quick-links a[hidden] {
  display: none !important;
}

.member-quick-links img {
  width: 15px;
  height: 15px;
  opacity: 0.78;
}

.navigation-tips-modal-content .levels-button {
  padding: 7px 15px;
}

.member-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;
  gap: 22px;
}

.member-panel {
  min-width: 0;
  height: auto;
  overflow: visible;
}

.member-panel:has(.dashboard-icon-actions) {
  overflow: visible;
}

.member-panel:has(.dashboard-icon-actions .nav-item:hover) {
  z-index: 10;
}

.member-panel-body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 16px 20px 18px;
}

.member-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.member-panel-heading h2 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 7px;
  margin: 0;
  color: var(--primary-dark);
  font-size: 21px;
  line-height: 1.2;
}

.member-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.member-panel-actions:empty {
  display: none;
}

.online-count {
  color: var(--primary-dark);
  font-size: 21px;
  font-weight: 700;
  white-space: nowrap;
}

.member-panel-heading h2 img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  opacity: 0.78;
}

.member-panel-heading > a,
.member-panel-actions a {
  flex-shrink: 0;
  color: #55748b;
  font-size: 13px;
  font-weight: 700;
}

.member-panel-heading > a:hover,
.member-panel-actions a:hover {
  color: var(--primary-dark);
  text-decoration: underline;
}

.online-members-list {
  display: block;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid #c5d2dd;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 12px;
}

.online-member {
  display: inline;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.online-member:hover,
.online-member:focus-visible {
  text-decoration-color: currentColor;
}

.online-member-comma {
  color: #55748b;
  font-weight: 700;
}

.online-members-names {
  line-height: 1.45;
}

.online-members-toggle {
  display: block;
  margin-top: 10px;
  padding: 5px 10px;
  border: 1px solid #c5d2dd;
  border-radius: 6px;
  background: linear-gradient(#ffffff, #e8f0f6);
  box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(0,0,0,0.08);
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
}

.online-members-toggle:hover,
.online-members-toggle:focus-visible {
  border-color: #7fa6c1;
  background: linear-gradient(#ffffff, #dbe8f1);
}

.online-members-list .dashboard-muted {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 100%;
  justify-content: center;
  width: 100%;
}

.tips-list,
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.tip-item,
.dashboard-list-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-left: 4px solid #7fa6c1;
  border-radius: 6px;
  background: rgba(255,255,255,0.58);
  color: var(--primary-dark);
}

.dashboard-list-item:hover {
  background: rgba(255,255,255,0.86);
}

.tip-item strong,
.dashboard-list-item strong {
  color: var(--primary-dark);
  font-size: 15px;
}

.tip-item span,
.dashboard-list-item span,
.dashboard-muted {
  color: #55748b;
  font-size: 14px;
  line-height: 1.35;
}

.dashboard-muted {
  padding: 14px 12px;
  border: 1px dashed #c2d2de;
  border-radius: 8px;
  text-align: center;
}

.tips-modal-body {
  max-height: calc(88vh - 62px);
  overflow: auto;
}

.profile-rates-modal-scope .help-modal-content.navigation-tips-modal-content {
  width: min(720px, 92vw);
  animation: levelGuidelinesPopIn 0.18s ease;
}

.profile-rates-modal-scope .help-modal.closing .navigation-tips-modal-content {
  animation: levelGuidelinesPopOut 0.15s ease forwards;
}

.profile-rates-modal-scope .navigation-tips-modal-content .level-rates-modal-header {
  background: linear-gradient(#4a7fa3, #3b6e8f);
}

.profile-rates-modal-scope .navigation-tips-modal-content .help-body {
  padding: 14px 16px 16px;
}

.tips-modal-list,
.tips-modal-editor {
  display: grid;
  gap: 10px;
}

.tips-modal-list {
  padding-bottom: 9px;
}

.tips-modal-editor {
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid #c5d2dd;
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
}

.tips-modal-editor h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 700;
}

.tips-modal-item {
  position: relative;
  padding: 12px 14px;
  border: 1px solid #c5d2dd;
  border-left: 4px solid #7fa6c1;
  border-radius: 6px;
  background: rgba(255,255,255,0.7);
}

.tips-modal-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 6px;
}

.tips-modal-item-header h3 {
  flex: 1 1 auto;
  min-width: 0;
}

.tips-modal-item h3,
.tips-modal-item p {
  margin: 0;
}

.tips-modal-item h3 {
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 700;
}

.tips-modal-item p,
.tips-modal-error {
  color: #55748b;
  font-size: 14px;
  font-weight: 400;
}

.tips-modal-error {
  color: #9b4444;
  font-weight: 700;
}

.tips-modal-error:empty {
  display: none;
}

.tips-modal-error:not(:empty) {
  margin-bottom: 10px;
}

.tips-modal-message {
  padding: 16px 14px;
  border: 1px dashed #c2d2de;
  border-radius: 8px;
  color: var(--primary-dark);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.dashboard-tip-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
  padding: 0;
  border-bottom: 0;
}

.dashboard-tip-form .level-field {
  display: grid;
  gap: 8px;
}

.dashboard-tip-form label {
  margin: 0;
  color: var(--primary-dark);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.dashboard-tip-char-count {
  color: #6b7c8c;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.dashboard-tip-char-count.warning {
  color: #c0392b;
  font-weight: 700;
}

.dashboard-tip-form input,
.dashboard-tip-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  color: #111;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 10px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.dashboard-tip-form input::placeholder,
.dashboard-tip-form textarea::placeholder {
  color: #55748b;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.8;
}

.dashboard-tip-form-actions {
  grid-column: 1 / -1;
}

.dashboard-tip-form textarea {
  min-height: 120px;
  resize: none;
}

.dashboard-tip-form-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 0;
}

.dashboard-tip-form-actions .levels-button {
  min-width: 92px;
  padding: 8px 18px;
}

.tips-modal-item .dashboard-icon-actions .nav-item {
  position: relative;
}

.tips-modal-item .dashboard-icon-actions,
.tips-modal-item .dashboard-icon-actions .nav-item {
  overflow: visible;
}

.tips-modal-item .dashboard-icon-actions {
  position: relative;
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  z-index: 2;
}

.tips-modal-item .dashboard-icon-actions .nav-item:hover {
  z-index: 10000;
}

.tips-modal-item:hover,
.tips-modal-item:has(.dashboard-icon-actions .nav-item:hover) {
  z-index: 10000;
}

.tips-modal-item .dashboard-icon-actions .tooltip {
  z-index: 1001;
  text-align: center;
}

@keyframes levelGuidelinesPopIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes levelGuidelinesPopOut {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

@media (max-width: 900px) {
  .member-dashboard-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .dashboard-tip-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .member-dashboard-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .member-panel-body {
    height: auto;
    min-height: 0;
  }

  .tips-list,
  .dashboard-list,
  .online-members-list {
    overflow: visible;
  }

  .online-members-panel {
    height: auto;
    max-height: 390px;
  }

  .online-members-panel .member-panel-body {
    height: auto;
  }

  .online-members-panel .online-members-list {
    flex: 0 1 auto;
    max-height: min(309px, calc(70vh - 81px));
    overflow-x: hidden;
    overflow-y: auto;
  }
}

@media (max-width: 560px) {
  .member-panel-heading {
    align-items: flex-start;
    flex-direction: row;
    gap: 10px;
  }

  .member-panel-actions {
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 2px;
  }

  .member-panel-heading h2 {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
  }

  .member-panel-heading h2 img {
    margin-top: 2px;
  }

  .dashboard-icon-actions {
    align-items: center;
    flex-direction: row;
  }

  .online-members-panel {
    height: auto;
    max-height: 390px;
  }

  .online-members-panel .member-panel-body {
    height: auto;
  }
}

a {
  text-decoration: none;
  color: #2f5d84;
}

a:hover {
  color: #1b3f5c;
}

.text p a:hover,
.text p a:focus-visible,
.text li a:hover,
.text li a:focus-visible,
.log-title a:hover,
.log-title a:focus-visible,
.log-meta a:hover,
.log-meta a:focus-visible {
  color: #b00000 !important;
  text-decoration: underline;
}

a.mention,
a.mention:visited {
  color: var(--primary-dark) !important;
  text-decoration: none !important;
  font-weight: 700;
}

a.mention:hover,
a.mention:focus {
  color: #b00000 !important;
  text-decoration: underline !important;
}

a.mention strong {
  color: inherit !important;
  font-weight: inherit;
  text-decoration: inherit;
}

.contact-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 15px;
}

.contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
}

.contact-actions a .nav-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.contact-actions.row {
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap; /* keeps it responsive */
}

.not-found-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.not-found-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 8px 14px;
  border: 1px solid var(--button-border);
  border-radius: 10px;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: bold;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: var(--button-shadow);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.not-found-actions a:hover {
  border-color: var(--button-hover-border);
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
  box-shadow: var(--button-hover-shadow);
}

.not-found-actions a:active {
  background: var(--button-active-bg);
  box-shadow: var(--button-active-shadow);
}

@media (max-width: 560px) {
  .not-found-actions {
    gap: 5px;
  }
}

/* =========================
   FOOTER
========================= */
.footer {
  background: #3f647d;
  color: #e6f2ff;
  border-top: none;
}

.footer a {
  color: #eaf4ff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer a:hover {
  color: #ffffff;
  opacity: 0.60;
}

.footer-wrapper {
  margin-top: 0;
}

.footer-section {
  margin-top: auto;
  background: #2f556e;
}

.footer-inner {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 30px;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.footer-center p:last-child {
  font-size: 13px;
  line-height: 1.4;
}

.footer-inner > div {
  flex: 1;
}

.footer-left {
  text-align: left;
  justify-self: end; 
}

.footer-right {
  text-align: center;
  justify-self: center;
}

.footer-center {
  text-align: left;
  justify-self: start;
  max-width: 260px;
}

.footer-center > p:first-of-type a {
  display: inline-block;
  margin-bottom: 6px;
}

.footer-center p:last-child a {
  display: inline;
  margin-bottom: 0;
}

.footer strong {
  color: #ffffff;
  font-size: 19px;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 10px;
}

.footer p {
  margin: 8px 0;
}

.footer::before {
  content: "";
  display: block;
  height: 6px;

  background: linear-gradient(to right, #5d7f99, #9fb8c9);
}

/* COPYRIGHT */
.footer-bottom {
  background: #2f556e;
  color: #cbd5e1;
  text-align: center;
  padding: 14px 0;
  box-shadow: 0 100vh 0 100vh #2f556e;
}

.footer-disclaimer {
  font-size: 12px;
  margin-top: 6px;
  color: #bcd3e6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* CONTENT BOX */

.content-page .box-inner > * {
  max-width: none;
  flex: 1 1 100%;
}

.content-page .text {
  max-width: none;
}

.content-page .text p {
  max-width: 100%;
}

.content-page .single-column {
  max-width: 1250px;
}

.info-page .single-column .text h2 {
  margin: 18px 0 4px;
  line-height: 1.18;
}

.info-page .single-column .text h2:first-child {
  margin-top: 10px;
}

.info-page .single-column .text h2 + p {
  margin-top: 4px;
}

.info-page .single-column .text h2 + h3 {
  margin-top: 10px;
}

.info-page .single-column .text h3 {
  color: var(--primary-dark);
  margin: 14px 0 2px;
  line-height: 1.2;
}

.info-page .single-column .text h3 + p {
  margin-top: 2px;
}

.credits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.credits-loading {
  grid-column: 1 / -1;
}

.credits-group {
  --role-accent: var(--primary);
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid #c5d2dd;
  border-left: 6px solid var(--role-accent);
  border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  padding: 12px 14px;
}

.credits-group.role-founder {
  --role-accent: #990099;
}

.credits-group.role-admin {
  --role-accent: #ff9900;
}

.credits-group.role-moderator {
  --role-accent: #008000;
}

.credits-group.role-contributor {
  --role-accent: #0066ff;
}

.info-page .single-column .text .credits-group h3 {
  color: var(--role-accent);
  margin: 0 0 8px;
}

.credits-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.credits-list li {
  margin: 0;
}

.credits-empty {
  color: #51606a;
  font-size: 15px;
  font-style: italic;
}

.credits-list a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--role-accent) 58%, #ffffff);
  border-radius: 5px;
  background: linear-gradient(#ffffff, #edf3f8);
  color: var(--role-accent);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.credits-list a:hover,
.credits-list a:focus-visible {
  background: linear-gradient(#ffffff, #edf3f8);
  border-color: color-mix(in srgb, var(--role-accent) 58%, #ffffff);
  box-shadow: none;
  color: var(--role-accent);
  text-decoration: underline;
}

.special-thanks-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.special-thanks-list li {
  position: relative;
  margin: 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid #c5d2dd;
  border-left: 5px solid var(--primary);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.58);
  color: #444;
  line-height: 1.42;
}

.special-thanks-list strong {
  color: var(--primary-dark);
}

.info-page .special-thanks-list .special-thanks-founder,
.info-page .special-thanks-list .special-thanks-founder:visited,
.info-page .special-thanks-list .special-thanks-founder strong {
  color: #990099 !important;
}

.info-page .special-thanks-list .special-thanks-admin,
.info-page .special-thanks-list .special-thanks-admin:visited,
.info-page .special-thanks-list .special-thanks-admin strong {
  color: #ff9900 !important;
}

.info-page .special-thanks-list .special-thanks-contributor,
.info-page .special-thanks-list .special-thanks-contributor:visited,
.info-page .special-thanks-list .special-thanks-contributor strong {
  color: #0066ff !important;
}

.info-page .special-thanks-list .special-thanks-founder,
.info-page .special-thanks-list .special-thanks-admin,
.info-page .special-thanks-list .special-thanks-contributor {
  font-weight: 700;
  text-decoration: none;
}

.info-page .special-thanks-list .special-thanks-founder:hover,
.info-page .special-thanks-list .special-thanks-founder:focus-visible,
.info-page .special-thanks-list .special-thanks-admin:hover,
.info-page .special-thanks-list .special-thanks-admin:focus-visible,
.info-page .special-thanks-list .special-thanks-contributor:hover,
.info-page .special-thanks-list .special-thanks-contributor:focus-visible {
  text-decoration: underline;
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.faq-item summary {
  color: var(--primary-dark);
}

.faq-item .bbcode-spoiler-content p {
  margin: 0;
  line-height: 1.45;
}

/* ALIGN LEFT */

.align-left .text {
  text-align: left;
}

.align-left .text p {
  margin-left: 0;
  margin-right: 0;
}

.align-left .contact-actions {
  align-items: flex-start;
  gap: 8px;
}

.align-left .contact-actions a {
  display: inline-flex;
}

.jump-bar .subnav {
  justify-content: center;
  overflow: visible;
  overscroll-behavior-x: auto;
  scrollbar-width: auto;
}

.jump-bar .subnav a {
  flex: 0 1 auto;
  white-space: nowrap;
}

/* =========================
   USER MENU (LIGHTWEIGHT)
========================= */

.user-menu {
  position: relative;
  display: inline-block;
  min-width: 0;
}

.user-menu.open .user-trigger {
  background: rgba(47, 85, 110, 0.08);
}

/* AVATAR — match logo size EXACTLY */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;

  background: #4a90c2;
  color: white;

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

  font-weight: bold;
  font-size: 16px;

  border: 2px solid var(--role-color, #fff);

  overflow: hidden;
  flex-shrink: 0;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* USERNAME — EXACT same as logo-text */
.username {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-dark);

  display: inline-block;
  max-width: 240px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* SMALL ARROW (subtle indicator) */
.user-arrow {
  font-size: 11px;
  opacity: 0.75;
  margin-left: 2px;
  transition: all 0.15s ease;
}

.user-trigger:hover .user-arrow {
  opacity: 1;
  transform: translateY(1px);
}

/* Checkbox group */
.checkbox-group {
  text-align: left;
  margin: 10px 0 15px;
  font-size: 14px;
}

.checkbox-group label {
  display: block;
  margin-bottom: 6px;
}

/* both rows share same base style */
.register-row,
.forgot-row {
  font-size: 14px;
  color: #4a657a;
  line-height: 1.4;
}

/* subtle hierarchy (NOT extreme) */
.forgot-row {
  font-size: 13px;
  opacity: 0.85;
}

/* =========================
   USER MENU (IMPROVED)
========================= */

.user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;

  padding: 4px 10px;
  margin: -4px -10px;

  border-radius: 20px;

  min-width: 0;

  transition: all 0.15s ease;
}

.mobile-actions-trigger {
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--primary-dark);
  box-shadow: var(--button-shadow);
  font-family: inherit;
  font-weight: bold;
}

.mobile-actions-trigger .dropdown-icon {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.mobile-actions-label {
  line-height: 1;
}

.mobile-actions-trigger .user-arrow {
  font-size: 13px;
  line-height: 1;
  margin-left: 1px;
  opacity: 0.82;
}

.user-trigger:hover {
  background: rgba(47, 85, 110, 0.10);
  box-shadow: inset 0 0 0 1px rgba(47, 85, 110, 0.15);
}

.user-menu.open .user-trigger {
  background: rgba(47, 85, 110, 0.14);
  box-shadow: inset 0 0 0 1px rgba(47, 85, 110, 0.15);
}

/* DROPDOWN CARD */
.dropdown {
  position: absolute;
  right: -10px;   /* aligns with hover pill edge */
  left: auto;
  top: calc(100% + 8px);

  z-index: 9999;

  background: linear-gradient(#f8fbff, #eef4f9);
  border: 1px solid #b7c4cf;
  border-radius: 8px;

  min-width: 210px;
  padding: 6px 0;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 10px rgba(0,0,0,0.15);

  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.15s ease;
}

.dropdown.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* BUTTON STYLE ITEMS (MATCH NAV) */
.dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 16px;

  background: none;
  outline: none;
  border: none;
  border-radius: 0;
  box-shadow: none;

  color: var(--primary-dark);
  font-weight: 600;
  font-size: 14px;

  transition: background 0.12s ease;
}

.dropdown a i,
.dropdown-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #1f252b;
  filter: brightness(0) saturate(100%) invert(12%) sepia(9%) saturate(604%) hue-rotate(169deg) brightness(94%) contrast(91%);
  opacity: 0.9;
  text-align: center;
}

.dropdown-icon {
  object-fit: contain;
}

.announcements-loading,
.games-empty-message,
.members-empty,
.staff-loading-message,
.legacy-empty-message,
.levels-loading,
.reply-loading-box,
.report-missing-message,
.page-loading-message,
.dashboard-muted {
  animation: none !important;
}

.reply-loading-box {
  width: 100%;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  color: #55748b;
  text-align: center;
  font-style: italic;
}

.dropdown a:hover {
  background: rgba(47, 85, 110, 0.12);
  border-top-color: transparent;
  color: #1f3f5b;

  box-shadow: inset 3px 0 0 var(--primary);
}

.dropdown a:hover + a {
  border-top-color: transparent;
}

.dropdown a:last-child {
  margin-bottom: 0;
}

.dropdown a + a {
  border-top: 1px solid rgba(0,0,0,0.04);
}

.dropdown-divider {
  height: 0;
  margin: 6px 0;
  border-top: 1px solid rgba(47, 85, 110, 0.18);
}

.dropdown-divider + a {
  border-top: 0;
}

.dropdown a:focus,
.dropdown a:active {
  outline: none;
}

/* LOGOUT (slight emphasis) */
.dropdown a.logout {
  color: #a94442;
}

.dropdown a.logout .dropdown-icon {
  color: #a94442;
  filter: none;
}

/* =========================
   AUTH WRAPPER (CONDENSED WIDTH ONLY)
========================= */
.auth-wrapper {
  max-width: 425px;   /* 👈 controls width (adjust if needed) */
  width: 92%;

  margin: 0 auto 25px auto;
  padding: 20px;

  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 6px;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 6px 18px rgba(0,0,0,0.2);
}

.notification-bell {
  position: relative;

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

  width: 27px;
  height: 32px;

  padding: 0 !important;
  margin: 0 5px 0 6px;

  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #414141 !important;
}

.notification-bell:hover {
  opacity: 1;
}

.notification-bell-icon {
  width: 23px;
  height: 23px;
  display: block;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.notification-bell:hover .notification-bell-icon {
  opacity: 1;
}

.mobile-notification-bell {
  display: none;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -7px;

  min-width: 18px;
  height: 18px;

  padding: 0 5px;

  border-radius: 999px;

  background: #d83b3b;
  color: white;

  font-size: 11px;
  font-weight: bold;

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

  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.notification-badge.hidden {
  display: none;
}

.notifications-page .box-inner.single-column {
  padding-top: 10px;
  padding-bottom: 14px;
}

.notifications-page .box-inner.single-column > .align-left {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.notifications-page .single-column .text {
  max-width: 1100px;
  padding-top: 0;
  justify-content: flex-start;
}

.notifications-page .single-column .text > .notifications-header {
  margin: 10px auto 0;
  text-align: center;
}

.notifications-header h1 {
  color: var(--primary-dark);
  margin: 0;
}

.notification-count {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 4px auto 6px;
  color: #5d7080;
  line-height: 1.2;
}

.notification-count span {
  color: #5d7080;
  white-space: nowrap;
}

.notification-count strong {
  color: var(--primary-dark);
  font-size: 26px;
}

.notifications-page .single-column .text > .notification-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 26px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 1px 3px rgba(47,85,110,0.1);
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.notification-actions {
  justify-content: flex-end;
}

.notification-field {
  justify-self: start;
}

.notification-type-filter {
  justify-self: center;
}

.notification-field,
.notification-type-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.notification-field-label {
  color: #385d78;
  font-size: 17px;
  font-weight: 700;
}

.notification-status-tabs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}

.notification-status-tab {
  position: relative;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid var(--button-border);
  border-radius: 8px;
  background: var(--button-bg);
  color: var(--button-text);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  box-shadow: var(--button-shadow);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.notification-status-tab:hover {
  border-color: var(--button-hover-border);
  background: var(--button-hover-bg);
  color: var(--button-hover-text);
  box-shadow: var(--button-hover-shadow);
}

.notification-status-tab.active {
  border-color: var(--button-hover-border);
  background: var(--button-active-bg);
  color: var(--button-hover-text);
  box-shadow: var(--button-active-shadow);
}

.notification-status-tab::after {
  content: none;
}

.notification-type-filter select {
  width: 220px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #f5f9fd);
  color: var(--primary-dark);
  font: inherit;
  font-weight: 400;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.notification-type-filter select:focus {
  outline: none;
  border-color: #5f86a3;
  box-shadow: 0 0 0 2px rgba(95,134,163,0.14);
}

#notificationsList {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  flex-grow: 0;
  overflow: visible;
  gap: 8px;
}

.notifications-page #notificationsPagination[hidden] {
  display: none !important;
  margin-top: 0;
}

.notification-item {
  text-decoration: none;
  padding: 0;
  border: 1px solid var(--border);
  border-left: 4px solid #7fa6c1;
  border-radius: 6px;
  background: rgba(255,255,255,0.58);
  box-shadow: none;
}

.notification-item + .notification-item {
  margin-top: 0;
}

.notification-item:hover {
  background: rgba(255,255,255,0.86);
}

.notification-item.unread {
  border-color: #5f86a3;
  border-left-color: var(--primary);
  background: linear-gradient(#f7fcff, #e3f0f8);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 5px rgba(47,85,110,0.14);
}

.notification-item-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 14px 16px;
}

.notification-link {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  color: var(--primary-dark);
  text-decoration: none;
}

.notification-link:hover .notification-message {
  text-decoration: underline;
}

.notification-static {
  cursor: default;
}

.notification-static:hover .notification-message {
  text-decoration: none;
}

.notification-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.notification-message {
  min-width: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.custom-notification-text {
  white-space: pre-wrap;
}

.notification-sender,
.notification-target-name {
  display: inline;
  font: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

.notification-target-name {
  color: #2f5d84 !important;
  font-weight: inherit;
  text-decoration: none;
}

.notification-link:hover .notification-target-name,
.notification-link:focus-visible .notification-target-name {
  color: #2f5d84 !important;
}

.notification-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  font-size: 12px;
  font-weight: 400;
  color: #6b7c8c;
}

.notification-meta span:not(:last-child)::after {
  content: "";
  margin-left: 0;
  color: #7f96a8;
}

.notification-custom-message {
  display: block;
  max-width: 780px;
  color: #263848;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.notification-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 42px;
  min-height: 22px;
  padding: 1px 6px;
  border: 1px solid #5f86a3;
  border-radius: 999px;
  background: #dcebf5;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
}

.notification-state.new {
  color: var(--primary-dark);
}

.notification-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.notification-text-btn {
  min-width: 0;
  min-height: 0;
  padding: 4px 5px;
  border-radius: 8px;
  font-size: 13px;
  line-height: normal;
}

.notification-empty {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(#f9fcff, #edf3f8);
  text-align: center;
  color: #55748b;
  font-style: italic;
  animation: none;
}

.notification-btn {
  min-width: 0;
  min-height: 42px;
  padding: 10px 8px;
  border-radius: 10px;
  font-size: 14px;
  line-height: normal;
}

.danger-btn:hover {
  background: linear-gradient(#ffe7e7, #f3c5c5);
  border-color: #c78282;
  color: #873535;
}

.notification-btn.danger-btn,
.notification-text-btn.danger-btn {
  color: #9b4444;
}

@media (max-width: 1100px) {
  .notifications-page .single-column .text > .notification-toolbar {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 12px;
  }

  .notification-actions {
    justify-content: center;
    justify-self: center;
  }

  .notification-field,
  .notification-type-filter {
    justify-content: center;
    justify-self: center;
    width: 100%;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .notifications-page .single-column .text > .notification-toolbar,
  #notificationsList,
  .notification-empty {
    width: calc(100% - 32px);
  }
}

@media (max-width: 760px) {
  .credits-grid {
    grid-template-columns: 1fr;
  }

  .notification-item-main {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
  }

  .notification-controls {
    justify-content: flex-start;
  }
}

/* =========================
   RESPONSIVE FOUNDATION
========================= */
img,
video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

table {
  max-width: 100%;
}

textarea,
input,
select,
button {
  max-width: 100%;
}

@media (max-width: 900px) {
  .header {
    margin-bottom: 16px;
  }

  .header-inner {
    width: 100%;
    padding: 10px 14px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 10px;
  }

  .logo-area {
    min-width: 0;
    flex: 0 1 auto;
  }

  .logo-text {
    font-size: 20px;
  }

  .header-nav {
    display: none;
  }

  .auth {
    margin-left: auto;
    gap: 10px;
    flex: 0 0 auto;
  }

  .desktop-auth-item {
    display: none !important;
  }

  .auth .mobile-notification-bell {
    display: flex;
    flex: 0 0 auto;
  }

  .auth .mobile-actions-menu {
    display: inline-block;
  }

  .mobile-actions-trigger {
    min-height: 38px;
    padding: 7px 11px;
    margin: 0;
    border-radius: 10px;
  }

  .mobile-actions-dropdown {
    right: 0;
    min-width: 220px;
    max-width: calc(100vw - 24px);
  }

  .page-wrapper,
  .nav-wrapper,
  .auth-wrapper {
    width: min(100% - 24px, 1320px);
    margin-bottom: 16px;
  }

  .page-wrapper,
  .auth-wrapper {
    padding: 14px;
  }

  .box-inner,
  .box.reverse .box-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 18px;
  }

  .box-inner > * {
    flex-basis: auto;
    max-width: 100%;
    min-width: 0;
  }

  .single-column {
    padding: 8px 0;
  }

  .content-page .box-inner.single-column {
    padding: 18px 24px;
  }

  .img-large {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .subnav {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
    gap: 8px;
  }

  .subnav a {
    flex: 0 0 auto;
    padding: 8px 14px;
    white-space: nowrap;
  }

  .jump-bar .subnav {
    justify-content: center;
    overflow-x: visible;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: auto;
    padding: 6px;
  }

  .member-dashboard-grid {
    grid-auto-rows: auto;
  }

  .member-panel-body {
    height: auto;
    min-height: 0;
  }

  .tips-list,
  .dashboard-list,
  .online-members-list {
    overflow: visible;
  }

  .online-members-panel {
    height: auto;
    max-height: 390px;
  }

  .online-members-panel .member-panel-body {
    height: auto;
  }

  .online-members-panel .online-members-list {
    flex: 0 1 auto;
    max-height: min(309px, calc(70vh - 81px));
    overflow-x: hidden;
    overflow-y: auto;
  }

  .footer-inner {
    width: min(100% - 24px, 1250px);
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 0;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    justify-self: stretch;
    max-width: none;
    text-align: center;
  }

  .footer-disclaimer {
    padding: 0 14px;
  }
}

@media (max-width: 560px) {
  body {
    background: linear-gradient(135deg, #6e98b5, #d8e4ee);
  }

  .header-inner {
    padding: 9px 10px;
    gap: 8px;
  }

  .logo-circle {
    width: 38px;
    height: 38px;
  }

  .logo-text {
    font-size: 17px;
  }

  .logo-area {
    max-width: calc(100vw - 150px);
  }

  .auth {
    min-width: max-content;
  }

  .mobile-actions-trigger {
    gap: 7px;
    min-height: 36px;
    padding: 6px 9px;
  }

  .mobile-actions-label {
    font-size: 14px;
  }

  .dropdown {
    right: 0;
    max-width: calc(100vw - 24px);
  }

  .page-wrapper,
  .nav-wrapper,
  .auth-wrapper {
    width: calc(100% - 16px);
    border-radius: 5px;
  }

  .page-wrapper,
  .auth-wrapper {
    padding: 8px;
  }

  .nav-wrapper {
    padding: 8px;
  }

  .jump-bar.nav-wrapper {
    padding: 12px 8px;
  }

  .box-inner,
  .box.reverse .box-inner,
  .member-welcome-box .box-inner.single-column {
    gap: 14px;
    padding: 14px;
  }

  .text h1 {
    font-size: 26px;
    line-height: 1.15;
  }

  .text h2 {
    font-size: 22px;
    line-height: 1.18;
  }

  .text p {
    font-size: 15px;
  }

  .contact-actions:not(.row) {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-actions:not(.row) a {
    justify-content: center;
    width: 100%;
  }

  .pagination,
  .levels-pagination,
  .staff-pagination {
    gap: 5px;
  }

  .pagination button,
  .levels-pagination button,
  .staff-pagination .page-button {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
  }

  .pagination .pagination-jump input,
  .levels-pagination .pagination-jump input,
  .staff-pagination .pagination-jump input,
  .pagination .pagination-jump button,
  .levels-pagination .pagination-jump button,
  .staff-pagination .pagination-jump button {
    height: 35px;
  }

  .pagination .pagination-jump button,
  .levels-pagination .pagination-jump button,
  .staff-pagination .pagination-jump button {
    width: 35px;
    min-width: 35px;
    padding: 0;
  }

  .notification-actions {
    align-items: center;
    flex-direction: row;
  }

  .notification-actions .notification-btn {
    width: auto;
  }

  .notification-link {
    align-items: flex-start;
    gap: 5px;
    width: 100%;
  }
}

@media (max-width: 640px), (hover: none) {
  .tooltip {
    display: none;
  }

  .nav-item:hover .tooltip {
    display: block;
    opacity: 1;
  }

  .music-icon-btn::before,
  .music-icon-btn::after {
    display: none;
  }
}

@media (max-width: 1280px) {
  html {
    scrollbar-gutter: auto;
  }

  .help-modal,
  .level-modal,
  .moderation-modal,
  .image-modal,
  .profile-rates-modal-scope .help-modal {
    align-items: center !important;
    justify-content: center !important;
    width: 100dvw !important;
  }
}