html.rc-app-bg,
html.rc-app-bg body {
  background: #050505 !important;
}

#rc-app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#rc-app-bg .bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% -28%, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .22) 26%, rgba(255, 255, 255, .06) 48%, transparent 68%),
    linear-gradient(180deg, #141414 0%, #070707 32%, #000 72%);
}

#rc-app-bg .bg:before {
  content: "";
  position: absolute;
  inset: -40%;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(1100px) rotateX(62deg) translateY(6%);
  transform-origin: center;
  mask-image: linear-gradient(to bottom, transparent 18%, #000 52%, transparent 86%);
  opacity: .22;
}

#rc-app-bg .bg:after {
  display: none;
}

#rc-app-bg .orb {
  position: absolute;
  width: 95vw;
  height: 52vh;
  left: 50%;
  top: -12%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 38%, transparent 70%);
  filter: blur(42px);
  animation: rcWash 18s ease-in-out infinite;
}
@keyframes rcWash {
  0%, 100% { opacity: .7; transform: translate(-50%, 0) scale(1); }
  50% { opacity: 1; transform: translate(-50%, 6%) scale(1.05); }
}

#rc-app-bg .ring {
  position: absolute;
  inset: -22% -10% 20%;
  border: none;
  background: linear-gradient(
    125deg,
    transparent 32%,
    rgba(255,255,255,.05) 44%,
    rgba(255,255,255,.2) 50%,
    rgba(255,255,255,.05) 56%,
    transparent 68%
  );
  filter: blur(22px);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 78%);
  animation: rcSheen 20s ease-in-out infinite;
}
@keyframes rcSheen {
  0%, 100% { transform: translateX(-9%); opacity: .35; }
  50% { transform: translateX(10%); opacity: .85; }
}

#rc-app-bg .vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 58% at 50% 8%, transparent 0%, transparent 40%, rgba(0,0,0,.35) 78%, #000 100%),
    linear-gradient(180deg, transparent 0%, transparent 38%, rgba(0,0,0,.55) 78%, #000 100%);
}

#rc-app-bg .noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

html.rc-app-bg {
  --twc-grey-1000: 0 0% 4.2%;
  --twc-grey-950: 0 0% 10.2%;
  --twc-grey-900: 0 0% 14%;
  --twc-grey-850: 0 0% 18.2%;
  --twc-grey-800: 0 0% 22%;
  --twc-grey-750: 0 0% 26%;
  --twc-grey-700: 0 0% 30%;
  --twc-grey-500: 0 0% 58%;
  --twc-grey-400: 0 0% 68%;
}

html.rc-app-bg #app,
html.rc-app-bg .root-router,
html.rc-app-bg .layout,
html.rc-app-bg .background,
html.rc-app-bg .background.router {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.rc-app-bg .layout,
html.rc-app-bg #app {
  position: relative;
  z-index: 1;
}

html.rc-app-bg .layout .content-wrapper,
html.rc-app-bg .content-wrapper .router,
html.rc-app-bg .content-wrapper .content,
html.rc-app-bg .content.ignore-side,
html.rc-app-bg .always-absolute,
html.rc-app-bg .n-layout,
html.rc-app-bg .n-layout-scroll-container,
html.rc-app-bg .n-config-provider,
html.rc-app-bg .empty-image-container {
  background: transparent !important;
  background-color: transparent !important;
}

html.rc-app-bg .layout .navigation-wrapper {
  background: rgba(6, 6, 6, .58) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-color: rgba(255, 255, 255, .06) !important;
}

html.rc-app-bg .content .divided-card,
html.rc-app-bg .content .settings-container,
html.rc-app-bg .content .n-card,
html.rc-app-bg .content .n-data-table-wrapper,
html.rc-app-bg .content .n-data-table {
  background: rgba(32, 32, 32, .72) !important;
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px !important;
}

html.rc-app-bg .content .bg-grey-900,
html.rc-app-bg .content .bg-grey-850,
html.rc-app-bg .content .bg-grey-800 {
  border-radius: 20px !important;
}

html.rc-app-bg .content .n-tabs-tab,
html.rc-app-bg .content .n-tabs-tab .n-tabs-tab__label {
  color: rgba(255, 255, 255, .72) !important;
}
html.rc-app-bg .content .n-tabs-tab.n-tabs-tab--active,
html.rc-app-bg .content .n-tabs-tab.n-tabs-tab--active .n-tabs-tab__label {
  color: #fff !important;
}

html.rc-app-bg .content .n-switch:not(.n-switch--active) .n-switch__rail {
  background: rgba(255, 255, 255, .16) !important;
}

html.rc-app-bg .content.ignore-side > .header,
html.rc-app-bg .layout-page > .header,
html.rc-app-bg .content > .header {
  background: rgba(10, 10, 12, .48) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

html.rc-app-bg .search-input .input-box,
html.rc-app-bg .search-input .input-box.bg-grey-1000,
html.rc-app-bg .search-input .n-input,
html.rc-app-bg .search-input input,
html.rc-app-bg .search-input input.bg-grey-1000 {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html.rc-app-bg .navigation .item-row.router-link-active,
html.rc-app-bg .navigation a.router-link-active .item-row,
html.rc-app-bg .navigation .item-row.active {
  background: rgba(255, 255, 255, .08) !important;
  border-radius: 10px;
  box-shadow: inset 2px 0 0 rgba(255, 255, 255, .55);
}

html.rc-app-bg .page-tip {
  background: rgba(22, 22, 24, .7) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(12px);
  border-radius: 12px !important;
}

html.rc-app-bg .navigation,
html.rc-app-bg .navigation .header,
html.rc-app-bg .navigation .footer {
  background: transparent !important;
}

html.rc-app-bg #rc-dash .dash-bg,
html.rc-app-bg #rc-dash .dash-noise,
html.rc-dash-modal #rc-dash .dash-bg,
html.rc-dash-modal #rc-dash .dash-noise {
  display: none !important;
}

html.rc-app-bg #rc-dash,
html.rc-app-bg #rc-dash .container {
  position: relative;
  z-index: 1;
}

html.rc-dash-on.rc-app-bg,
html.rc-dash-on.rc-app-bg body {
  background: #050505 !important;
}

html.rc-app-bg .content .divided-card,
html.rc-app-bg .content .settings-container,
html.rc-app-bg .content .n-card,
html.rc-app-bg .content .n-data-table-wrapper,
html.rc-app-bg .content .bg-grey-900,
html.rc-app-bg .content .bg-grey-850,
html.rc-app-bg .content .bg-grey-800 {
  overflow: hidden !important;
}

html.rc-app-bg .content .divided-card:has(.n-select--active),
html.rc-app-bg .content .divided-card:has(.n-base-selection--active),
html.rc-app-bg .content .settings-container:has(.n-select--active),
html.rc-app-bg .content .n-card:has(.n-select--active),
html.rc-app-bg .content .n-card:has(.n-base-selection--active),
html.rc-app-bg .content .bg-grey-900:has(.n-select--active),
html.rc-app-bg .content .bg-grey-900:has(.n-base-selection--active),
html.rc-app-bg .content .bg-grey-850:has(.n-select--active),
html.rc-app-bg .content .bg-grey-800:has(.n-select--active) {
  overflow: visible !important;
}

html.rc-app-bg .content .divided-card > :first-child,
html.rc-app-bg .content .n-card > :first-child,
html.rc-app-bg .content .bg-grey-900 > :first-child,
html.rc-app-bg .content .bg-grey-850 > :first-child,
html.rc-app-bg .content .bg-grey-800 > :first-child {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
}

html.rc-app-bg .content .divided-card > :last-child,
html.rc-app-bg .content .n-card > :last-child,
html.rc-app-bg .content .bg-grey-900 > :last-child,
html.rc-app-bg .content .bg-grey-850 > :last-child,
html.rc-app-bg .content .bg-grey-800 > :last-child {
  border-bottom-left-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
}

html.rc-app-bg .content .divided-card .bg-grey-900,
html.rc-app-bg .content .divided-card .bg-grey-850,
html.rc-app-bg .content .n-card .bg-grey-900,
html.rc-app-bg .content .bg-grey-900 .bg-grey-900 {
  border-radius: 0 !important;
}

html.rc-app-bg .content .n-switch,
html.rc-app-bg .content .n-switch .bg-grey-900,
html.rc-app-bg .content .n-switch .bg-grey-850 {
  overflow: visible !important;
  border-radius: 999px !important;
}

html.rc-app-bg .content .n-tabs,
html.rc-app-bg .content .n-tabs-nav,
html.rc-app-bg .content .n-tabs-wrapper,
html.rc-app-bg .content .n-tabs-tab-wrapper {
  overflow: visible !important;
}

html.rc-app-bg .content .n-select,
html.rc-app-bg .content .n-base-selection,
html.rc-app-bg .content .n-base-select-menu,
html.rc-app-bg .n-base-select-menu,
html.rc-app-bg .v-binder-follower-container,
html.rc-app-bg .n-popover,
html.rc-app-bg .n-dropdown-menu {
  z-index: 8000 !important;
}

html.rc-app-bg .content .n-select.n-select--active,
html.rc-app-bg .content .n-base-selection--active,
html.rc-app-bg .content .n-base-selection--focus {
  position: relative;
  z-index: 30;
}

@keyframes rcTabIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
html.rc-app-bg .rc-tab-enter {
  animation: rcTabIn .42s cubic-bezier(.22, 1, .36, 1) both;
}
html.rc-app-bg body:has(.player-modal) .rc-tab-enter,
html.rc-app-bg .vfm .rc-tab-enter,
html.rc-app-bg .player-modal .rc-tab-enter {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.client-edit-modal,
.vfm:has(.client-edit-modal),
.vfm__container:has(.client-edit-modal),
.n-modal-container:has(.client-edit-modal) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
