:root {
  --lg-bg: #080a10;
  --lg-panel: rgba(18, 24, 34, 0.58);
  --lg-panel-strong: rgba(22, 29, 40, 0.72);
  --lg-panel-soft: rgba(255, 255, 255, 0.07);
  --lg-border: rgba(255, 255, 255, 0.18);
  --lg-border-soft: rgba(255, 255, 255, 0.1);
  --lg-highlight: rgba(255, 255, 255, 0.34);
  --lg-text: #f8fbff;
  --lg-muted: #aeb9c9;
  --lg-blue: #7dd3fc;
  --lg-green: #34d399;
  --lg-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
  --lg-inner: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

html,
body {
  background:
    radial-gradient(circle at 15% 8%, rgba(125, 211, 252, 0.2), transparent 30%),
    radial-gradient(circle at 82% 18%, rgba(52, 211, 153, 0.18), transparent 28%),
    linear-gradient(135deg, #070912 0%, #0d111b 46%, #050608 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 78%);
}

#root {
  position: relative;
  z-index: 1;
}

* {
  letter-spacing: 0 !important;
}

form,
aside,
header,
nav,
main > div,
[class*="bg-[#"],
[class*="bg-black"],
[class*="bg-white/"],
[class*="border-white/"],
[class*="shadow"] {
  border-color: var(--lg-border-soft) !important;
}

form,
[class*="bg-[#171b24]"],
[class*="bg-[#171a21]"],
[class*="bg-[#121821]"],
[class*="bg-[#101319]"],
[class*="bg-[#10141c]"],
[class*="bg-[#0f1218]"],
[class*="bg-[#1b2029]"],
[class*="bg-[#11151d]"],
[class*="bg-[#131720]"],
[class*="bg-[#0d1118]"],
aside,
.scz,
.scz-top,
.scz-bottom {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    var(--lg-panel) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.55) brightness(1.08) !important;
  backdrop-filter: blur(26px) saturate(1.55) brightness(1.08) !important;
  box-shadow: var(--lg-shadow), var(--lg-inner) !important;
}

form,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
button,
input,
textarea,
select,
.scz-tile {
  border-radius: 18px !important;
}

button,
input,
textarea,
select {
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

button {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08) !important;
  border: 1px solid var(--lg-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 28px rgba(0, 0, 0, 0.24) !important;
}

button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.28) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.09)),
    rgba(255, 255, 255, 0.1) !important;
}

.bg-emerald-500,
.bg-emerald-600,
.scz .green {
  background:
    linear-gradient(180deg, rgba(167, 243, 208, 0.95), rgba(16, 185, 129, 0.82)) !important;
  color: #032014 !important;
  border-color: rgba(167, 243, 208, 0.55) !important;
}

.bg-red-500,
.scz .red {
  background:
    linear-gradient(180deg, rgba(252, 165, 165, 0.95), rgba(239, 68, 68, 0.86)) !important;
  color: #fff !important;
  border-color: rgba(252, 165, 165, 0.55) !important;
}

input,
textarea,
select {
  background: rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--lg-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

input:focus,
textarea:focus,
select:focus,
form:focus-within {
  border-color: rgba(125, 211, 252, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.14), var(--lg-inner) !important;
}

.text-slate-400,
.text-slate-500 {
  color: var(--lg-muted) !important;
}

.text-white,
.text-slate-100,
.text-slate-200,
.text-slate-300 {
  color: var(--lg-text) !important;
}

a,
.text-emerald-300,
.text-emerald-400 {
  color: #8eeec6 !important;
}

img,
video {
  border-radius: 16px;
}

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

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12)) !important;
  border: 3px solid rgba(8, 10, 16, 0.68) !important;
  border-radius: 999px;
}

.scz-open {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
    rgba(14, 20, 30, 0.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.scz-stage {
  background:
    radial-gradient(circle at 50% 24%, rgba(125, 211, 252, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(8, 11, 18, 0.95), rgba(3, 5, 9, 0.96)) !important;
}

.scz-avatar,
.scz-tile[data-me="true"] {
  background:
    linear-gradient(180deg, rgba(167, 243, 208, 0.95), rgba(52, 211, 153, 0.76)) !important;
  color: #031d12 !important;
}

@media (max-width: 720px) {
  form,
  aside,
  [class*="bg-[#"] {
    border-radius: 14px !important;
  }

  .scz-bottom {
    gap: 8px;
  }

  .scz button {
    padding: 9px 10px;
  }
}