/* RustCheck UI polish v7 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Syne:wght@700;800&display=swap");

/* ===== Billing: hide limits instantly (no flash) ===== */
.payments-tab-general .usage,
.payments-tab-general .usage-container,
.payments-tab-general .usage .title,
.content .usage:has(.usage-container),
.content .usage:has(.text-head),
[data-rc-hide-billing-limits="1"],
.rc-hide-billing-limits,
html.rc-app-bg .payments-tab-general .usage,
html.rc-app-bg .payments-tab-general .usage-container,
html.rc-app-bg .payments-tab-general .usage .title,
html.rc-app-bg .content .usage:has(.usage-container),
html.rc-app-bg .content .usage:has(.text-head),
html.rc-app-bg [data-rc-hide-billing-limits="1"],
html.rc-app-bg .rc-hide-billing-limits {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ===== Page header icon — monochrome, next to title ===== */
html.rc-app-bg .rc-page-head {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html.rc-app-bg .rc-page-head-ico,
html.rc-app-bg .rc-page-head-ico.purple,
html.rc-app-bg .rc-page-head-ico.blue,
html.rc-app-bg .rc-page-head-ico.green,
html.rc-app-bg .rc-page-head-ico.amber,
html.rc-app-bg .rc-page-head-ico.red,
html.rc-app-bg .rc-page-head-ico.sky,
html.rc-app-bg .rc-page-head-ico.pink,
html.rc-app-bg .rc-page-head-ico.slate {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}
html.rc-app-bg .rc-page-head-ico svg {
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,.88) !important;
}

/* Hide SPA centered section "hero" icons in Settings / Integrations
   (API key, ban-list gear, etc.) — title icon is enough */
html.rc-app-bg .content .router > .icon,
html.rc-app-bg .content [class*="section-icon"],
html.rc-app-bg .content [class*="settings-icon"],
html.rc-app-bg .content .header + div > .n-icon,
html.rc-app-bg [data-rc-hide-section-ico="1"] {
  display: none !important;
}

/* ===== Players summary cards (instant) ===== */
#rc-players-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
  min-height: 86px;
}
#rc-players-cards .rpc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(32,32,32,.78);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#rc-players-cards .rpc-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
#rc-players-cards .rpc-ico svg { width: 22px; height: 22px; fill: #fff; }
#rc-players-cards .rpc-ico.blue { background: linear-gradient(145deg,#3b82f6,#1d4ed8); }
#rc-players-cards .rpc-ico.green { background: linear-gradient(145deg,#22c55e,#15803d); }
#rc-players-cards .rpc-ico.slate { background: linear-gradient(145deg,#64748b,#334155); }
#rc-players-cards .rpc-label { font-size: 13px; color: rgba(255,255,255,.62); }
#rc-players-cards .rpc-value { font-size: 28px; font-weight: 700; color: #fff; line-height: 1.15; margin-top: 2px; }
#rc-players-cards .rpc-hint { font-size: 12px; color: rgba(255,255,255,.42); margin-top: 2px; }
@media (max-width: 900px) { #rc-players-cards { grid-template-columns: 1fr; } }

/* ===== Signage: round cards, hide heart, keep delete ===== */
html.rc-app-bg .signage-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(22,22,24,.92) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}
html.rc-app-bg .signage-card .gallery {
  border-radius: 0 !important;
}
/* heart / like — actual markup: ra-button preset default|liked !p-1.5 !rounded */
.signage-card .buttons > .ra-button.preset.default,
.signage-card .buttons > .ra-button.preset.liked,
.signage-card .buttons > .ra-button.preset.default-light,
.signage-card .buttons > button.preset.default,
.signage-card .buttons > button.preset.liked,
.signage-card .flex-shrink-0,
.signage-card [class*="flex-shrink-0"],
.signage-card [data-rc-hide-like="1"],
.rc-hide-like,
html.rc-app-bg .signage-card .buttons > .ra-button.preset.default,
html.rc-app-bg .signage-card .buttons > .ra-button.preset.liked,
html.rc-app-bg .signage-card .buttons > .ra-button.preset.default-light,
html.rc-app-bg .signage-card .buttons > button.preset.default,
html.rc-app-bg .signage-card .buttons > button.preset.liked,
html.rc-app-bg .signage-card .flex-shrink-0,
html.rc-app-bg .signage-card [class*="flex-shrink-0"],
html.rc-app-bg .signage-card [data-rc-hide-like="1"],
html.rc-app-bg .rc-hide-like {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
}
/* delete button — keep full row */
.signage-card .buttons,
html.rc-app-bg .signage-card .buttons {
  display: flex !important;
  width: 100% !important;
  justify-content: stretch !important;
}
.signage-card .buttons > .ra-button.preset.destructive,
.signage-card .buttons > button.preset.destructive,
html.rc-app-bg .signage-card .buttons > .ra-button.preset.destructive,
html.rc-app-bg .signage-card .buttons > button.preset.destructive {
  width: 100% !important;
  flex: 1 1 auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(239,68,68,.45) !important;
  background: rgba(90,24,24,.55) !important;
  color: #ffb4b4 !important;
}

/* ===== Player modal (profile-like glass sidebar) ===== */
html.rc-app-bg .vfm:has(.player-modal) .vfm__overlay,
html.rc-app-bg .n-modal-mask {
  backdrop-filter: blur(6px) !important;
  background: rgba(0,0,0,.55) !important;
}

/* Staff / client popup — same glass language */
html.rc-app-bg .vfm:has(.client-modal) .vfm__content,
html.rc-app-bg .vfm__content:has([class*="client"]),
html.rc-app-bg .n-modal:has([class*="client"]) {
  border-radius: 22px !important;
  border: none !important;
  background: rgba(14,14,16,.94) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list::-webkit-scrollbar {
  width: 5px;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}

/* ===== Mute modal — readable text ===== */
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content,
html.rc-app-bg .n-modal:has([class*="mute"]),
html.rc-app-bg [class*="mute-view"],
html.rc-app-bg .player-mute-view {
  border-radius: 22px !important;
  border: none !important;
  outline: none !important;
  background: rgba(16,16,18,.97) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
  overflow: visible !important;
}
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content,
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content p,
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content span,
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content div,
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content label,
html.rc-app-bg [class*="mute-view"] p,
html.rc-app-bg [class*="mute-view"] span,
html.rc-app-bg [class*="mute-view"] div,
html.rc-app-bg [class*="mute-view"] label,
html.rc-app-bg .player-mute-view,
html.rc-app-bg .player-mute-view * {
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}
html.rc-app-bg .mute-view-modal,
html.rc-app-bg .mute-view-modal .header .title,
html.rc-app-bg .mute-view-modal h1,
html.rc-app-bg .mute-view-modal h2,
html.rc-app-bg [class*="mute-view"] .header > span:first-child,
html.rc-app-bg [class*="mute-view"] .header .title {
  color: #fff !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content .header span,
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content .header p,
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content [class*="subtitle"],
html.rc-app-bg [class*="mute-view"] .header span,
html.rc-app-bg [class*="mute-view"] .header p {
  color: rgba(255,255,255,.78) !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  clip-path: none !important;
  max-width: none !important;
  padding-left: 2px !important;
  margin-left: 0 !important;
  transform: none !important;
}
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content .row,
html.rc-app-bg [class*="mute-view"] .row,
html.rc-app-bg [class*="mute-view"] .item {
  background: rgba(255,255,255,.05) !important;
  border: none !important;
  border-radius: 12px !important;
  margin-bottom: 8px !important;
  color: #fff !important;
}
html.rc-app-bg .vfm:has([class*="mute-view"]) .vfm__content .row span:first-child,
html.rc-app-bg [class*="mute-view"] .row .label,
html.rc-app-bg [class*="mute-view"] [class*="label"] {
  color: rgba(255,255,255,.62) !important;
}

/* ===== IP modal — no gray outlines ===== */
.ip-details-modal,
.vfm:has(.ip-details-modal) .vfm__content,
.n-modal:has(.ip-details-modal),
.modal-border:has(.ip-details-modal),
.modal:has(.ip-details-modal),
html.rc-app-bg .ip-details-modal,
html.rc-app-bg .vfm:has(.ip-details-modal) .vfm__content,
html.rc-app-bg .n-modal:has(.ip-details-modal),
html.rc-app-bg .modal-border:has(.ip-details-modal),
html.rc-app-bg .modal:has(.ip-details-modal) {
  border: none !important;
  outline: none !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
  border-radius: 22px !important;
  background: rgba(16,16,18,.96) !important;
  overflow: hidden !important;
}
html.rc-app-bg .modal-border:has(.ip-details-modal),
html.rc-app-bg .modal-border:has(.ip-details-modal)::before,
html.rc-app-bg .modal-border:has(.ip-details-modal)::after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ip-details-modal *,
.vfm:has(.ip-details-modal) .vfm__content *,
.modal:has(.ip-details-modal) *,
html.rc-app-bg .ip-details-modal *,
html.rc-app-bg .vfm:has(.ip-details-modal) .vfm__content *,
html.rc-app-bg .modal:has(.ip-details-modal) * {
  border-color: transparent !important;
  outline: none !important;
}
.ip-details-modal [class*="border"],
.ip-details-modal .rounded,
.ip-details-modal .rounded-md,
.ip-details-modal .rounded-lg,
html.rc-app-bg .ip-details-modal [class*="border"],
html.rc-app-bg .ip-details-modal .rounded,
html.rc-app-bg .ip-details-modal .rounded-md,
html.rc-app-bg .ip-details-modal .rounded-lg {
  border: none !important;
  box-shadow: none !important;
}
html.rc-app-bg .ip-details-modal .content > div,
html.rc-app-bg .ip-details-modal [class*="player"],
html.rc-app-bg .ip-details-modal [class*="row"],
html.rc-app-bg .ip-details-modal .player-box,
html.rc-app-bg .ip-details-modal .image-lines-container {
  border: none !important;
  outline: none !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
html.rc-app-bg .ip-details-modal p,
html.rc-app-bg .ip-details-modal span {
  color: rgba(255,255,255,.9) !important;
}

/* Ban view modal */
html.rc-app-bg .vfm:has([class*="ban-view"]) .vfm__content,
html.rc-app-bg [class*="ban-view"] {
  border: none !important;
  border-radius: 22px !important;
  background: rgba(16,16,18,.96) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
}
html.rc-app-bg .vfm:has([class*="ban-view"]) .vfm__content *,
html.rc-app-bg [class*="ban-view"] * {
  border-color: rgba(255,255,255,.05) !important;
}

/* ===== Servers list ===== */
html.rc-app-bg .servers-page .server-card,
html.rc-app-bg .server-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: linear-gradient(180deg, rgba(22,22,24,.95), rgba(12,12,14,.96)) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(16px) !important;
}
html.rc-app-bg .server-card img,
html.rc-app-bg .server-card .preview,
html.rc-app-bg .server-card [class*="cover"] {
  border-radius: 0 !important;
}
html.rc-app-bg .servers-page .empty,
html.rc-app-bg .servers-page [class*="placeholder"],
html.rc-app-bg .servers-page .add-server {
  border-radius: 20px !important;
  border: 1px dashed rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.03) !important;
}

/* ===== Connect / pair modal ===== */
html.rc-app-bg .vfm:has([class*="pair"]) .vfm__content,
html.rc-app-bg .modal-border:has([class*="pair"]),
html.rc-app-bg .vfm__content:has(.command),
html.rc-app-bg #rc-pair-name-modal .rc-pair-box {
  border: none !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(18,18,20,.97), rgba(10,10,12,.98)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
  overflow: hidden !important;
}

/* ===== Final monochrome liquid-glass refinements ===== */

/* Chat page compact actions: remove the old blue accent. */
html.rc-app-bg .player-message-page-header-container button.ra-button {
  color: rgba(255,255,255,.88) !important;
  fill: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(18px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
}
html.rc-app-bg .player-message-page-header-container button.ra-button svg,
html.rc-app-bg .player-message-page-header-container button.ra-button svg * {
  fill: currentColor !important;
  color: rgba(255,255,255,.88) !important;
}
html.rc-app-bg .player-message-page-header-container button.ra-button:hover {
  color: #fff !important;
  fill: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.055)) !important;
}

/* Reports/chat right settings rail and its cards. */
html.rc-app-bg .sidebar-content {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  border-left: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.025), -18px 0 46px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(26px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(108%) !important;
}
html.rc-app-bg .sidebar-content .settings-container {
  position: relative !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 60%, rgba(255,255,255,.04)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 42px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(22px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(108%) !important;
}

/* Closed navigation: keep only a sharp icon, without the muddy square below it. */
html.rc-app-bg .navigation-wrapper.closed .navigation .header .navigation-state-btn {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}
html.rc-app-bg .navigation-wrapper.closed .navigation .header .navigation-state-btn::before,
html.rc-app-bg .navigation-wrapper.closed .navigation .header .navigation-state-btn::after {
  content: none !important;
  display: none !important;
}
html.rc-app-bg .navigation-wrapper.closed .navigation .header .navigation-state-btn svg {
  color: rgba(255,255,255,.82) !important;
  fill: rgba(255,255,255,.82) !important;
  filter: none !important;
  opacity: 1 !important;
}
html.rc-app-bg .navigation-wrapper.closed .navigation .header .navigation-state-btn:hover {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* Shared Integrations / Statistics tabs. */
html.rc-app-bg .tabbed-navigation > .header {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-height: 40px !important;
  padding: 4px !important;
  gap: 3px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.20) !important;
  backdrop-filter: blur(20px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(108%) !important;
  overflow: visible !important;
}
html.rc-app-bg .tabbed-navigation > .header > .element {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  color: rgba(255,255,255,.56) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}
html.rc-app-bg .tabbed-navigation > .header > .element:hover {
  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.045) !important;
}
html.rc-app-bg .tabbed-navigation > .header > .element.selected {
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 5px 14px rgba(0,0,0,.20) !important;
}

/* Server and webhook dialogs: clearer, lighter and more transparent glass. */
html.rc-app-bg .modal-border:has(.command-header) .modal,
html.rc-app-bg .modal-border:has(.server-edit-modal) .modal,
html.rc-app-bg .vfm__content:has(.command-header),
html.rc-app-bg .vfm__content:has(.server-edit-modal) {
  border-color: rgba(255,255,255,.13) !important;
  background:
    radial-gradient(120% 75% at 13% -7%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(145deg, rgba(24,24,24,.56), rgba(8,8,8,.46) 52%, rgba(20,20,20,.52)) !important;
  backdrop-filter: blur(34px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(112%) !important;
  box-shadow: 0 30px 88px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
html.rc-app-bg .modal-border .modal:has(input[type="url"]),
html.rc-app-bg .vfm__content:has(input[type="url"]) {
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(25,25,25,.59), rgba(9,9,9,.49)) !important;
  backdrop-filter: blur(32px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(110%) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.14) !important;
  overflow: hidden !important;
}
html.rc-app-bg .vfm__content .command,
html.rc-app-bg .vfm__content [class*="command"] {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.04) !important;
}

/* Server connect, reconnect and edit dialogs — compact liquid glass. */
html.rc-app-bg .vfm__content:has(.command-header),
html.rc-app-bg .vfm__content:has(.server-edit-modal) {
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(115% 70% at 18% 0%, rgba(255,255,255,.13), transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.025) 48%, rgba(255,255,255,.045)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(112%) !important;
  backdrop-filter: blur(30px) saturate(112%) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.68),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.035) !important;
  overflow: hidden !important;
}

html.rc-app-bg .vfm__content:has(.command-header)::before,
html.rc-app-bg .vfm__content:has(.server-edit-modal)::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.10), transparent 22%, transparent 74%, rgba(255,255,255,.025));
}

html.rc-app-bg .vfm__content:has(.command-header) > *,
html.rc-app-bg .vfm__content:has(.server-edit-modal) > * {
  position: relative;
  z-index: 1;
}

html.rc-app-bg .vfm__content:has(.command-header) [class*="header"],
html.rc-app-bg .vfm__content:has(.server-edit-modal) [class*="header"] {
  background: transparent !important;
  border-color: rgba(255,255,255,.09) !important;
}

html.rc-app-bg .vfm__content:has(.command-header) .project-connect .avatar-box {
  border: 1px solid rgba(255,255,255,.14) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.32) !important;
}

html.rc-app-bg .vfm__content:has(.command-header) .step .command {
  min-height: 44px !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 20px rgba(0,0,0,.18) !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease !important;
}

html.rc-app-bg .vfm__content:has(.command-header) .step .command:hover {
  border-color: rgba(255,255,255,.20) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.135), rgba(255,255,255,.065)) !important;
  transform: translateY(-1px);
}

html.rc-app-bg .vfm__content:has(.command-header) [class*="warning"],
html.rc-app-bg .vfm__content:has(.command-header) [class*="alert"] {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.055) !important;
  color: rgba(255,255,255,.78) !important;
}

html.rc-app-bg .vfm__content:has(.server-edit-modal) input {
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

@media (max-width: 520px) {
  html.rc-app-bg .vfm__content:has(.command-header),
  html.rc-app-bg .vfm__content:has(.server-edit-modal) {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 20px !important;
  }
}

/* The app mounts these dialogs through .modal-border instead of .vfm__content. */
html.rc-app-bg .modal-border:has(.command-header) .modal,
html.rc-app-bg .modal-border:has(.server-edit-modal) .modal {
  position: relative !important;
  isolation: isolate !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(120% 78% at 15% -6%, rgba(255,255,255,.15), transparent 56%),
    linear-gradient(145deg, rgba(31,31,31,.78), rgba(14,14,14,.70) 52%, rgba(24,24,24,.76)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(110%) !important;
  backdrop-filter: blur(30px) saturate(110%) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden !important;
}

html.rc-app-bg .modal-border:has(.command-header) .modal::before,
html.rc-app-bg .modal-border:has(.server-edit-modal) .modal::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(255,255,255,.075), transparent 30%, transparent 72%, rgba(255,255,255,.018));
}

html.rc-app-bg .modal-border:has(.command-header) .modal > *,
html.rc-app-bg .modal-border:has(.server-edit-modal) .modal > * {
  position: relative;
  z-index: 1;
}

html.rc-app-bg .modal-border:has(.command-header) .divided-card > *,
html.rc-app-bg .modal-border:has(.server-edit-modal) .divided-card > * {
  background: transparent !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* Audit/stats compact filters — liquid glass trigger and dropdown. */
html.rc-app-bg .select-wrapper .select.tonal {
  position: relative !important;
  z-index: 20 !important;
}

html.rc-app-bg .select-wrapper .select.tonal .activator {
  min-height: 34px !important;
  padding: 7px 10px !important;
  gap: 7px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(112%) !important;
  backdrop-filter: blur(22px) saturate(112%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 24px rgba(0,0,0,.28) !important;
  color: rgba(255,255,255,.84) !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html.rc-app-bg .select-wrapper .select.tonal .activator:hover,
html.rc-app-bg .select-wrapper .select.tonal .activator.-opened {
  border-color: rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.065)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.21), 0 10px 28px rgba(0,0,0,.34) !important;
}

html.rc-app-bg .select-wrapper .select.tonal .activator .icon {
  fill: rgba(255,255,255,.65) !important;
  opacity: 1 !important;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list {
  min-width: 100% !important;
  margin-top: 7px !important;
  padding: 6px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(110% 75% at 12% 0%, rgba(255,255,255,.13), transparent 58%),
    linear-gradient(145deg, rgba(31,31,31,.86), rgba(13,13,13,.82)) !important;
  -webkit-backdrop-filter: blur(28px) saturate(112%) !important;
  backdrop-filter: blur(28px) saturate(112%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 22px 55px rgba(0,0,0,.56) !important;
  max-height: min(420px, calc(100vh - 110px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list .option {
  min-height: 32px !important;
  padding: 7px 8px !important;
  gap: 8px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: rgba(255,255,255,.76) !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list .option:hover,
html.rc-app-bg .select-wrapper .select.tonal .options-list .option.-active,
html.rc-app-bg .select-wrapper .select.tonal .options-list .option.-selected {
  border-color: rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055)) !important;
  color: #fff !important;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list .option .icon {
  fill: rgba(255,255,255,.58) !important;
  opacity: 1 !important;
}

html.rc-app-bg .select-wrapper .select.tonal .options-list .option:hover .icon,
html.rc-app-bg .select-wrapper .select.tonal .options-list .option.-selected .icon {
  fill: rgba(255,255,255,.90) !important;
}

html.rc-app-bg .select-wrapper .select.tonal .avatar {
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.35) !important;
}

/* Integrations / webhooks — premium compact liquid-glass rows. */
html.rc-app-bg .webhooks .action {
  min-height: 62px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(90% 140% at 4% -15%, rgba(255,255,255,.12), transparent 58%),
    linear-gradient(105deg, rgba(255,255,255,.075), rgba(255,255,255,.028) 56%, rgba(255,255,255,.055)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(110%) !important;
  backdrop-filter: blur(24px) saturate(110%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 12px 30px rgba(0,0,0,.25) !important;
  overflow: hidden !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

html.rc-app-bg .webhooks .action:hover {
  border-color: rgba(255,255,255,.21) !important;
  background:
    radial-gradient(90% 140% at 4% -15%, rgba(255,255,255,.16), transparent 58%),
    linear-gradient(105deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 56%, rgba(255,255,255,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 15px 36px rgba(0,0,0,.31) !important;
  transform: translateY(-1px);
}

html.rc-app-bg .webhooks .action .image-lines-container {
  min-width: 0 !important;
}

html.rc-app-bg .webhooks .action .img-box {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 9px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(0,0,0,.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 6px 16px rgba(0,0,0,.22) !important;
}

html.rc-app-bg .webhooks .action .img-box svg {
  width: 19px !important;
  height: 19px !important;
  fill: rgba(255,255,255,.52) !important;
}

html.rc-app-bg .webhooks .action .lines .title {
  color: rgba(255,255,255,.94) !important;
  font-weight: 600 !important;
}

html.rc-app-bg .webhooks .action .lines .message {
  margin-top: 2px !important;
  color: rgba(255,255,255,.52) !important;
}

html.rc-app-bg .webhooks .action .right {
  align-items: center !important;
  gap: 9px !important;
}

html.rc-app-bg .webhooks .action .right > .ra-button {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.rc-app-bg .webhooks .action .right > .ra-button:hover,
html.rc-app-bg .webhooks .action .right > .ra-button:active,
html.rc-app-bg .webhooks .action .right > .ra-button:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.rc-app-bg .webhooks .action .right > .ra-button > .wrapper {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.rc-app-bg .webhooks .action .right > svg {
  fill: rgba(255,255,255,.30) !important;
  transition: fill .16s ease !important;
}

html.rc-app-bg .webhooks .action .right > svg:hover {
  fill: rgba(255,255,255,.72) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .slider {
  width: 43px !important;
  height: 25px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(0,0,0,.42) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .peer::after {
  top: 4px !important;
  left: 4px !important;
  width: 17px !important;
  height: 17px !important;
  background: linear-gradient(145deg, #f7f7f7, #bdbdbd) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .peer:checked + .slider {
  border-color: rgba(255,255,255,.30) !important;
  background: linear-gradient(110deg, rgba(255,255,255,.70), rgba(255,255,255,.42)) !important;
  box-shadow: 0 0 16px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.38) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .peer:checked + .slider::after {
  background: #fff !important;
}

html.rc-app-bg .webhooks .action .badge {
  left: 7px !important;
  width: 2px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.28) !important;
  box-shadow: 0 0 10px rgba(255,255,255,.10) !important;
}

html.rc-app-bg .webhooks .action:has(input:checked) .badge {
  background: rgba(255,255,255,.90) !important;
  box-shadow: 0 0 13px rgba(255,255,255,.35) !important;
}

@media (max-width: 620px) {
  html.rc-app-bg .webhooks .action {
    min-height: 58px !important;
    padding: 9px 10px !important;
  }

  html.rc-app-bg .webhooks .action .lines .message {
    font-size: 12px !important;
  }
}

/* Integrations refinement: softer filled glass, less chrome. */
html.rc-app-bg .webhooks {
  --rc-hook-glass: rgba(255,255,255,.055);
  --rc-hook-border: rgba(255,255,255,.085);
}

html.rc-app-bg .webhooks .action {
  min-height: 58px !important;
  padding: 9px 13px !important;
  border-color: var(--rc-hook-border) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(105deg, rgba(255,255,255,.075), rgba(255,255,255,.035) 54%, rgba(255,255,255,.05)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(105%) !important;
  backdrop-filter: blur(20px) saturate(105%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.105),
    0 8px 22px rgba(0,0,0,.18) !important;
  transform: none !important;
}

html.rc-app-bg .webhooks .action:hover {
  border-color: rgba(255,255,255,.14) !important;
  background:
    linear-gradient(105deg, rgba(255,255,255,.095), rgba(255,255,255,.045) 54%, rgba(255,255,255,.062)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 26px rgba(0,0,0,.22) !important;
  transform: none !important;
}

html.rc-app-bg .webhooks .action .img-box {
  width: 34px !important;
  height: 34px !important;
  padding: 8px !important;
  border-color: rgba(255,255,255,.075) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075) !important;
}

html.rc-app-bg .webhooks .action .img-box svg {
  width: 17px !important;
  height: 17px !important;
  fill: rgba(255,255,255,.60) !important;
}

html.rc-app-bg .webhooks .action .lines .title {
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em !important;
}

html.rc-app-bg .webhooks .action .lines .message {
  color: rgba(255,255,255,.48) !important;
  line-height: 1.25 !important;
}

html.rc-app-bg .webhooks .action .badge {
  display: none !important;
}

html.rc-app-bg .webhooks .action .custom-switch .slider {
  width: 42px !important;
  height: 24px !important;
  border-color: rgba(255,255,255,.09) !important;
  background: rgba(0,0,0,.38) !important;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.40) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .peer::after {
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  background: #8a8a8a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .peer:checked + .slider {
  border-color: rgba(72,255,137,.38) !important;
  background: linear-gradient(135deg, rgba(31,205,97,.92), rgba(66,226,126,.78)) !important;
  box-shadow: 0 0 14px rgba(45,220,111,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

html.rc-app-bg .webhooks .action .custom-switch .peer:checked + .slider::after {
  background: #fff !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html.rc-app-bg .webhooks .action .right > svg {
  width: 18px !important;
  fill: rgba(255,255,255,.24) !important;
}

html.rc-app-bg .webhooks + *,
html.rc-app-bg .webhooks [class*="divider"] {
  border-color: rgba(255,255,255,.055) !important;
}

/* Sidebar collapse control — one clean glass layer, no nested grey square. */
html.rc-app-bg .navigation .header .navigation-state-btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  color: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(var(--rc-user-glass-blur, 24px)) !important;
  backdrop-filter: blur(var(--rc-user-glass-blur, 24px)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075) !important;
  transition: color .18s ease, border-color .18s ease, background .18s ease !important;
}

html.rc-app-bg .navigation .header .navigation-state-btn:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html.rc-app-bg .navigation .header .navigation-state-btn svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  fill: none !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ===== Staff profile + permissions (not the account/project picker page) ===== */
html.rc-app-bg .vfm .profile:not(.signage-card):not(.client-edit-modal),
html.rc-app-bg .vfm:has(.profile) .vfm__content,
html.rc-app-bg .modal-border:has(.profile) .modal,
html.rc-app-bg .client-card-modal,
html.rc-app-bg .vfm:has(.client-card) .vfm__content {
  border: none !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(18,18,18,.94), rgba(10,10,10,.96)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04) !important;
  overflow: hidden !important;
}
html.rc-app-bg .vfm .profile .header,
html.rc-app-bg .vfm:has(.profile) .header {
  background: linear-gradient(180deg, rgba(40,50,70,.45), transparent) !important;
  border: none !important;
}
html.rc-app-bg .permissions-modal,
html.rc-app-bg .vfm:has(.permissions-modal) .vfm__content,
html.rc-app-bg .modal-border:has(.permissions-modal) .modal {
  border: none !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(16,16,18,.97), rgba(10,10,12,.98)) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.6) !important;
  overflow: hidden !important;
}
html.rc-app-bg .permissions-modal [class*="admin"],
html.rc-app-bg .permissions-modal .row,
html.rc-app-bg .permissions-modal [class*="block"] {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.03) !important;
}

/* ===== Player modal — personal-profile glass language ===== */
html.rc-app-bg .vfm:has(.player-modal),
html.rc-app-bg .n-modal-container:has(.player-modal) {
  z-index: 10050 !important;
  pointer-events: auto !important;
}
html.rc-app-bg .vfm:has(.player-modal) .vfm__overlay,
html.rc-app-bg .n-modal-container:has(.player-modal) .n-modal-mask,
html.rc-app-bg .n-modal-mask {
  pointer-events: auto !important;
  z-index: 10050 !important;
}
html.rc-app-bg .vfm:has(.player-modal) .vfm__container,
html.rc-app-bg .vfm:has(.player-modal) .vfm__content,
html.rc-app-bg .n-modal-container:has(.player-modal) .n-modal,
html.rc-app-bg .n-modal-container:has(.player-modal) .n-card {
  pointer-events: auto !important;
  z-index: 10051 !important;
}
html.rc-app-bg body:has(.vfm .player-modal) .n-data-table,
html.rc-app-bg body:has(.vfm .player-modal) .n-data-table-wrapper,
html.rc-app-bg body:has(.vfm .player-modal) .content table,
html.rc-app-bg body:has(.vfm .player-modal) .content .n-data-table-td,
html.rc-app-bg body:has(.vfm .player-modal) .content .n-data-table-tr {
  pointer-events: none !important;
}
html.rc-app-bg .vfm:has(.player-modal) .vfm__content,
html.rc-app-bg .n-modal-container:has(.player-modal) .n-card,
html.rc-app-bg .modal-border:has(.player-modal) .modal,
html.rc-app-bg .player-modal {
  width: min(1080px, calc(100vw - 32px)) !important;
  max-width: 1080px !important;
  height: min(720px, calc(100vh - 48px)) !important;
  max-height: min(720px, calc(100vh - 48px)) !important;
  min-height: 0 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  outline: none !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.035) !important;
  background: linear-gradient(180deg, rgba(18,18,18,.94), rgba(10,10,10,.96)) !important;
  backdrop-filter: blur(28px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.1) !important;
  color: #f5f5f5 !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}
html.rc-app-bg .player-modal,
html.rc-app-bg .player-modal * {
  animation: none !important;
}
html.rc-app-bg .player-modal .\!bg-grey-900,
html.rc-app-bg .player-modal [class*="bg-grey-900"],
html.rc-app-bg .player-modal .rounded-lg {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.rc-app-bg .player-modal aside,
html.rc-app-bg .player-modal .sidebar,
html.rc-app-bg .player-modal .headers,
html.rc-app-bg .player-modal nav {
  background: rgba(255,255,255,.02) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  pointer-events: auto !important;
}

/* Keep navigation tabs clean: no browser/theme glow under hovered items. */
html.rc-app-bg .tabbed-navigation > .header > .element,
html.rc-app-bg .tabbed-navigation > .header > .element:hover,
html.rc-app-bg .tabbed-navigation > .header > .element:focus,
html.rc-app-bg .tabbed-navigation > .header > .element:focus-visible,
html.rc-app-bg .tabbed-navigation > .header > .element:active {
  outline: none !important;
  text-shadow: none !important;
  filter: none !important;
}
html.rc-app-bg .tabbed-navigation > .header > .element:not(.selected),
html.rc-app-bg .tabbed-navigation > .header > .element:not(.selected):hover {
  box-shadow: none !important;
}
html.rc-app-bg .tabbed-navigation > .header > .element::before,
html.rc-app-bg .tabbed-navigation > .header > .element::after {
  box-shadow: none !important;
  filter: none !important;
}

/* The interface is app-like: text and decorative UI cannot be selected. */
html,
body,
body * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
body ::selection {
  color: inherit;
  background: transparent;
}

/* Tabs may scroll horizontally on narrow screens, but never show a scrollbar. */
html.rc-app-bg .tabbed-navigation,
html.rc-app-bg .tabbed-navigation > .header {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}
html.rc-app-bg .tabbed-navigation > .header {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
html.rc-app-bg .tabbed-navigation::-webkit-scrollbar,
html.rc-app-bg .tabbed-navigation > .header::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Prevent Chromium's backdrop-compositing rectangle below billing tabs. */
html.rc-app-bg.rc-billing-page .tabbed-navigation > .header {
  overflow: hidden !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}
html.rc-app-bg.rc-billing-page .tabbed-navigation > .header > .element:not(.selected),
html.rc-app-bg.rc-billing-page .tabbed-navigation > .header > .element:not(.selected):hover,
html.rc-app-bg.rc-billing-page .tabbed-navigation > .header > .element:not(.selected):focus {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}
html.rc-app-bg .player-modal .item-row,
html.rc-app-bg .player-modal aside a,
html.rc-app-bg .player-modal aside button,
html.rc-app-bg .player-modal .router-link-active,
html.rc-app-bg .player-modal .n-menu-item {
  border-radius: 12px !important;
  border: none !important;
  margin: 2px 8px !important;
  color: rgba(245,245,245,.75) !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 2 !important;
}
html.rc-app-bg .player-modal .router-link-active,
html.rc-app-bg .player-modal .item-row.active,
html.rc-app-bg .player-modal .n-menu-item--selected {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
html.rc-app-bg .player-modal .name,
html.rc-app-bg .player-modal h1,
html.rc-app-bg .player-modal h2 {
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: #f5f5f5 !important;
}
/* Keep native statistic backgrounds, gradients and chart colors. */

/* Pair name overlay */
#rc-pair-name-modal {
  position: fixed;
  inset: 0;
  z-index: 1000100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}
#rc-pair-name-modal .rc-pair-box {
  width: min(420px, 100%);
  padding: 28px 26px 22px;
}
#rc-pair-name-modal h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
#rc-pair-name-modal p {
  margin: 0 0 18px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
#rc-pair-name-modal label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 8px;
}
#rc-pair-name-modal input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 15px;
  outline: none;
}
#rc-pair-name-modal input:focus {
  border-color: rgba(255,255,255,.28);
}
#rc-pair-name-modal .rc-pair-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
#rc-pair-name-modal button {
  min-height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: #f1f1f1;
  font-weight: 600;
  cursor: pointer;
}
#rc-pair-name-modal button.primary {
  background: #fff;
  color: #111;
  border-color: #fff;
}

html.rc-app-bg .n-progress {
  border-radius: 999px !important;
  overflow: hidden !important;
}

/* Final overrides: tabs never cast a pale glow on hover or focus. */
html.rc-app-bg .tabbed-navigation > .header > .element,
html.rc-app-bg .tabbed-navigation > .header > .element:hover,
html.rc-app-bg .tabbed-navigation > .header > .element:focus,
html.rc-app-bg .tabbed-navigation > .header > .element:focus-visible,
html.rc-app-bg .tabbed-navigation > .header > .element:active,
html.rc-app-bg .tabbed-navigation > .header > .element::before,
html.rc-app-bg .tabbed-navigation > .header > .element::after {
  outline: none !important;
  text-shadow: none !important;
  filter: none !important;
}
html.rc-app-bg .tabbed-navigation > .header > .element:not(.selected),
html.rc-app-bg .tabbed-navigation > .header > .element:not(.selected):hover {
  box-shadow: none !important;
}

/* Disable selection everywhere in the application. */
html,
body,
body * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
body ::selection {
  color: inherit;
  background: transparent;
}