#orbsCanvas {
  display:block;
  inset:0;
  pointer-events:none;
  position:fixed;
  z-index:0;
}

.layout,.login-wrap {
  position:relative;
  z-index:1;
}

:root {
  --lux-red:#ff2e63;
  --lux-red-deep:#8e0f2a;
  --lux-violet:#b45cff;
  --glass:hsla(0,0%,100%,.045);
  --glass-strong:hsla(0,0%,100%,.075);
  --glass-line:hsla(0,0%,100%,.12);
  --glass-line-soft:hsla(0,0%,100%,.07);
  --glass-blur:18px;
  --glass-shadow:0 18px 50px rgba(0,0,0,.48);
  --glass-shadow-soft:0 8px 26px rgba(0,0,0,.34);
}

body {
  --body-bg:radial-gradient(1100px 620px at 82% -12%,rgba(255,46,99,.17),transparent 62%),radial-gradient(880px 520px at 6% 108%,rgba(142,15,42,.18),transparent 62%),radial-gradient(760px 700px at 50% 46%,rgba(180,92,255,.1),transparent 70%),linear-gradient(165deg,#170a24,#10061a 38%,#0a0714 68%,#16081c);
  background:var(--body-bg);
  background-attachment:fixed;
}

body.light {
  --body-bg:radial-gradient(1100px 620px at 82% -12%,rgba(255,46,99,.12),transparent 62%),radial-gradient(880px 520px at 6% 108%,rgba(142,15,42,.08),transparent 62%),radial-gradient(760px 700px at 50% 46%,rgba(147,51,234,.07),transparent 70%),linear-gradient(165deg,#fbf7ff,#f9f3fb 45%,#f6f0f7);
  --glass:hsla(0,0%,100%,.55);
  --glass-strong:hsla(0,0%,100%,.72);
  --glass-line:rgba(142,15,42,.14);
  --glass-line-soft:rgba(142,15,42,.08);
  --glass-shadow:0 18px 50px rgba(90,20,40,.14);
  --glass-shadow-soft:0 8px 26px rgba(90,20,40,.1);
}

.captcha-box,.card,.login-card,.modal,.otp-item,.stat,.uc-drop {
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  background:var(--glass)!important;
  border:1px solid var(--glass-line)!important;
  box-shadow:var(--glass-shadow-soft),inset 0 1px 0 hsla(0,0%,100%,.09)!important;
  overflow:hidden;
  position:relative;
}

.card.table-wrap {
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-color:var(--border) var(--bg-soft);
  scrollbar-gutter:stable;
  scrollbar-width:thin;
}

.card.table-wrap::-webkit-scrollbar {
  height:10px;
}

.card.table-wrap::-webkit-scrollbar-track {
  background:var(--bg-soft);
  border-radius:999px;
}

.card.table-wrap::-webkit-scrollbar-thumb {
  background:var(--border);
  border:2px solid var(--bg-soft);
  border-radius:999px;
}

.card.table-wrap::-webkit-scrollbar-thumb:hover {
  background:var(--muted);
}

.card.table-wrap td:first-child,.card.table-wrap th:first-child {
  background:var(--panel);
  box-shadow:1px 0 0 var(--border);
  inset-inline-start:0;
  position:sticky;
  z-index:1;
}

.card.table-wrap th:first-child {
  background:var(--bg-soft);
}

[dir=rtl] .card.table-wrap td:first-child,[dir=rtl] .card.table-wrap th:first-child {
  box-shadow:-1px 0 0 var(--border);
}

.card:before,.stat:before {
  background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.35),transparent);
  content:"";
  height:1px;
  inset-inline:0;
  pointer-events:none;
  position:absolute;
  top:0;
}

.card:hover,.stat.clickable:hover {
  border-color:rgba(180,92,255,.38)!important;
  box-shadow:var(--glass-shadow),inset 0 1px 0 hsla(0,0%,100%,.12)!important;
}

.stat:after {
  background:linear-gradient(180deg,var(--lux-red),var(--lux-violet))!important;
  opacity:.95;
  width:3px;
}

.sidebar {
  -webkit-backdrop-filter:blur(22px) saturate(150%)!important;
  backdrop-filter:blur(22px) saturate(150%)!important;
  background:linear-gradient(165deg,rgba(34,16,66,.78),rgba(10,6,22,.88))!important;
  border:1px solid rgba(180,92,255,.22)!important;
}

body.light .sidebar {
  background:linear-gradient(165deg,rgba(255,255,255,.78),rgba(246,242,251,.62))!important;
  border-color:rgba(180,92,255,.3)!important;
}

.brand-name,.hero-brand {
  animation:brandHue 4s ease-in-out infinite;
  color:#f6e7ff;
  display:inline-block;
  font-weight:800;
  text-shadow:0 0 18px rgba(180,92,255,.45);
}

.login-brand {
  animation:brandHueViolet 4.5s ease-in-out infinite;
  color:#f3e9ff;
  display:inline-block;
  font-weight:800;
  text-shadow:0 0 18px rgba(139,61,255,.55);
}

@keyframes brandHue {
  0% {
    color:#f6e7ff;
    text-shadow:0 0 18px rgba(180,92,255,.45);
  }
  25% {
    color:#ff5c8a;
    text-shadow:0 0 22px rgba(255,46,99,.6);
  }
  50% {
    color:#c98bff;
    text-shadow:0 0 22px rgba(180,92,255,.55);
  }
  75% {
    color:#ff8fae;
    text-shadow:0 0 20px rgba(255,46,99,.5);
  }
  to {
    color:#f6e7ff;
    text-shadow:0 0 18px rgba(180,92,255,.45);
  }
}

@keyframes brandHueViolet {
  0%,to {
    color:#f3e9ff;
    text-shadow:0 0 18px rgba(139,61,255,.55);
  }
  50% {
    color:#d9c6ff;
    text-shadow:0 0 26px rgba(180,92,255,.8);
  }
}

.brand {
  background:none;
  -webkit-background-clip:border-box;
  background-clip:border-box;
  color:inherit;
}

.brand small {
  color:var(--muted2);
}

.nav-item:hover {
  background:rgba(180,92,255,.14)!important;
  border-color:rgba(180,92,255,.3)!important;
  color:#fff!important;
}

.nav-item.active {
  background:linear-gradient(135deg,rgba(180,92,255,.45),rgba(255,46,99,.22))!important;
  border-color:rgba(180,92,255,.55)!important;
  box-shadow:0 6px 20px rgba(180,92,255,.3),inset 0 1px 0 rgba(255,255,255,.16);
  color:#fff!important;
}

.topbar {
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  background:rgba(10,7,20,.55)!important;
  border-bottom:1px solid var(--glass-line)!important;
}

body.light .topbar {
  background:hsla(0,0%,100%,.7)!important;
}

.avatar {
  background:var(--brand-grad)!important;
  box-shadow:0 4px 14px rgba(180,92,255,.38);
}

input,select,textarea {
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  background:hsla(0,0%,100%,.05)!important;
  border-color:var(--glass-line)!important;
  color:var(--text);
}

body.light input,body.light select,body.light textarea {
  background:hsla(0,0%,100%,.78)!important;
}

input:focus,select:focus,textarea:focus {
  border-color:rgba(180,92,255,.55)!important;
  box-shadow:0 0 0 3px rgba(180,92,255,.18)!important;
}

.btn {
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  background:var(--glass)!important;
  border-color:var(--glass-line)!important;
  transition:background .18s,border-color .18s,transform .08s,box-shadow .18s;
}

.btn:hover {
  background:rgba(180,92,255,.16)!important;
  border-color:rgba(180,92,255,.4)!important;
}

.btn.solid {
  background:var(--brand-grad)!important;
  border-color:transparent!important;
  box-shadow:0 6px 20px rgba(180,92,255,.34);
  color:#fff!important;
}

.btn.solid:hover {
  box-shadow:0 8px 26px rgba(255,46,99,.34);
  filter:brightness(1.08);
}

.btn.green {
  background:rgba(61,220,151,.14)!important;
}

.table-wrap {
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  background:var(--glass)!important;
  border-color:var(--glass-line)!important;
}

th {
  background:rgba(180,92,255,.07)!important;
  color:#e9d8ff!important;
}

body.light th {
  color:#7e22ce!important;
}

tbody tr:hover {
  background:rgba(180,92,255,.07)!important;
}

td,th {
  border-bottom-color:var(--glass-line-soft)!important;
}

.badge,.pill {
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

.login-card {
  background:linear-gradient(165deg,rgba(16,9,32,.88),rgba(7,4,17,.92))!important;
  border-color:rgba(139,61,255,.35)!important;
  border-radius:26px!important;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 60px rgba(139,61,255,.18),inset 0 1px 0 rgba(201,167,255,.14)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  padding:42px 44px 30px!important;
}

.login-logo {
  background:linear-gradient(135deg,#a78bfa,#8b3dff 55%,#6d28d9)!important;
  box-shadow:0 0 30px rgba(139,61,255,.55)!important;
  color:#fff!important;
}

.login-brand {
  font-size:1.5rem;
}

.btn.cta {
  background:linear-gradient(270deg,#8b3dff,#a78bfa,#6d28d9,#b45cff,#8b3dff)!important;
  box-shadow:0 12px 34px rgba(139,61,255,.5)!important;
  color:#fff!important;
}

.btn.cta:hover {
  filter:brightness(1.08);
}

.btn.cta:active {
  box-shadow:0 0 0 4px rgba(167,139,250,.45),0 14px 40px rgba(139,61,255,.6)!important;
  transform:scale(.97)!important;
}

.captcha-box {
  background:rgba(139,61,255,.08)!important;
  border-color:rgba(139,61,255,.35)!important;
}

.captcha-math {
  color:#d9c6ff!important;
}

body.light .captcha-math {
  color:#6d28d9!important;
}

.demo-hint {
  border-top-color:rgba(139,61,255,.4)!important;
}

.per-sel {
  font-size:.82rem;
  min-width:78px;
  padding:.3rem .5rem;
  width:auto;
}

.range-pick {
  background:hsla(0,0%,100%,.04);
  border:1px solid var(--glass-line-soft);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  margin-top:.3rem;
  max-height:190px;
  overflow-y:auto;
  padding:.5rem;
}

.range-pick .chk {
  align-items:center;
  cursor:pointer;
  display:flex;
  gap:.45rem;
  margin:0;
  padding:.2rem .1rem;
}

.range-pick .chk input {
  width:auto;
}

.range-pick .chk:hover {
  color:var(--text);
}

.modal-backdrop {
  background:rgba(6,3,14,.65)!important;
}

.modal-backdrop,.toast {
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}

.toast {
  background:rgba(16,10,30,.85)!important;
  border-color:var(--glass-line)!important;
}

body.light .toast {
  background:hsla(0,0%,100%,.92)!important;
}

* {
  scrollbar-color:rgba(180,92,255,.45) transparent;
  scrollbar-width:thin;
}

::-webkit-scrollbar {
  height:9px;
  width:9px;
}

::-webkit-scrollbar-track {
  background:transparent;
}

::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,var(--lux-violet),var(--lux-red-deep));
  background-clip:padding-box;
  border:2px solid transparent;
  border-radius:999px;
}

@media (prefers-reduced-motion:reduce) {
  #orbsCanvas {
    display:none;
  }
  .btn,.card,.login-card,.modal,.stat,.toast {
    transition:none!important;
  }
}