/* 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;
}

/* ===== 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;
}
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;
}

/* ===== 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;
}
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;
}