:root {
  --wr-bg: #07070d;
  --wr-surface: rgba(16, 16, 28, 0.88);
  --wr-surface-strong: rgba(21, 20, 37, 0.96);
  --wr-surface-soft: rgba(32, 28, 50, 0.72);
  --wr-line: rgba(190, 167, 255, 0.16);
  --wr-line-hot: rgba(162, 112, 255, 0.55);
  --wr-violet: #a970ff;
  --wr-violet-bright: #c8a8ff;
  --wr-cyan: #67e8ff;
  --wr-red: #ff4d67;
  --wr-orange: #ff8642;
  --wr-text: #f7f5ff;
  --wr-muted: #aaa7bd;
  --wr-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
}

html {
  background: var(--wr-bg);
  color-scheme: dark;
}

body {
  color: var(--wr-text) !important;
  background-color: var(--wr-bg) !important;
  background-image:
    linear-gradient(125deg, #08080e 0%, #11101c 42%, #09090f 72%, #12101d 100%) !important;
  background-attachment: fixed !important;
  letter-spacing: 0 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    conic-gradient(from 215deg at 22% 28%, transparent 0deg, rgba(115, 67, 205, 0.08) 34deg, rgba(169, 112, 255, 0.38) 68deg, transparent 118deg),
    conic-gradient(from 35deg at 75% 66%, transparent 0deg, rgba(103, 232, 255, 0.1) 42deg, rgba(136, 79, 235, 0.28) 76deg, transparent 132deg),
    linear-gradient(118deg, transparent 28%, rgba(192, 158, 255, 0.12) 43%, transparent 58%);
  background-size: 145% 145%, 165% 165%, 130% 130%;
  filter: blur(26px) saturate(135%);
  animation: wr-liquid-flow 19s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(200, 177, 255, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 232, 255, 0.09) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 82%);
  mask-image: linear-gradient(to bottom, black, transparent 82%);
  animation: wr-grid-drift 30s linear infinite;
}

.p-pageWrapper,
.p-body,
.p-body-inner {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.p-header,
.p-nav,
.p-sectionLinks {
  background: rgba(8, 8, 16, 0.8) !important;
  border-color: var(--wr-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(22px) saturate(130%);
}

.p-header {
  border-bottom: 1px solid var(--wr-line) !important;
}

.p-nav {
  border-bottom: 1px solid rgba(103, 232, 255, 0.1) !important;
}

.p-nav-inner,
.p-header-inner,
.p-sectionLinks-inner,
.p-body-inner {
  max-width: 1580px !important;
}

.p-header-logo img {
  filter: drop-shadow(0 0 18px rgba(169, 112, 255, 0.28));
  transition: transform 300ms ease, filter 300ms ease;
}

.p-header-logo:hover img {
  transform: translateY(-2px) scale(1.025);
  filter: drop-shadow(0 0 24px rgba(103, 232, 255, 0.38));
}

.p-nav-list .p-navEl,
.p-nav-list .p-navEl-link,
.p-navgroup-link,
.p-sectionLinks-list a {
  color: #d8d5e7 !important;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease !important;
}

.p-nav-list .p-navEl:hover,
.p-navgroup-link:hover,
.p-sectionLinks-list a:hover {
  color: #fff !important;
  background: rgba(169, 112, 255, 0.1) !important;
}

.p-nav-list .p-navEl.is-selected {
  color: #fff !important;
  background: rgba(169, 112, 255, 0.14) !important;
  box-shadow: inset 0 -2px 0 var(--wr-violet);
}

.p-navgroup-link.badgeContainer::after,
.badgeContainer.badgeContainer--highlighted::after {
  background: var(--wr-red) !important;
}

.p-title-value,
.block-header,
.block-minorHeader,
.node-title,
.structItem-title,
.memberHeader-name {
  color: var(--wr-text) !important;
  letter-spacing: 0 !important;
}

.p-title-value {
  font-weight: 800;
  text-shadow: 0 0 24px rgba(169, 112, 255, 0.16);
}

.p-body-header {
  padding: 26px 0 20px !important;
  border-bottom: 1px solid var(--wr-line);
  animation: wr-rise 500ms cubic-bezier(.2,.8,.2,1) both;
}

.block,
.p-body-sidebar > *,
.memberHeader,
.message,
.menu-content,
.overlay-content,
.formSubmitRow-main,
.inputGroup {
  animation: wr-rise 520ms cubic-bezier(.2,.8,.2,1) both;
}

.block-container,
.memberHeader,
.message,
.menu-content,
.overlay-content {
  overflow: hidden;
  color: var(--wr-text) !important;
  background: var(--wr-surface) !important;
  border: 1px solid var(--wr-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--wr-shadow) !important;
  backdrop-filter: blur(18px) saturate(120%);
}

.block-header,
.block-minorHeader,
.block-filterBar,
.block-formSectionHeader,
.memberHeader-main,
.message-cell.message-cell--user {
  background: rgba(29, 25, 47, 0.82) !important;
  border-color: var(--wr-line) !important;
}

.block-header {
  position: relative;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
  font-weight: 800 !important;
}

.block-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 92px;
  height: 2px;
  background: linear-gradient(90deg, var(--wr-violet), var(--wr-cyan));
  box-shadow: 0 0 14px rgba(169, 112, 255, 0.55);
}

.block-row,
.block-body,
.node,
.structItem,
.message-cell,
.dataList-row,
.contentRow {
  color: #ddd9ea !important;
  background: transparent !important;
  border-color: var(--wr-line) !important;
}

.node,
.structItem {
  position: relative;
  transition: background-color 190ms ease, transform 190ms ease, border-color 190ms ease !important;
}

.node:hover,
.structItem:hover {
  z-index: 2;
  background: rgba(169, 112, 255, 0.08) !important;
  border-color: rgba(169, 112, 255, 0.3) !important;
  transform: translateX(4px);
}

.node-icon,
.structItem-statuses,
.contentRow-figure {
  color: var(--wr-violet-bright) !important;
  filter: drop-shadow(0 0 10px rgba(169, 112, 255, 0.22));
}

a,
.link {
  color: var(--wr-violet-bright);
}

a:hover,
.link:hover {
  color: var(--wr-cyan);
}

.button,
a.button,
.button.button--primary,
a.button.button--primary {
  min-height: 38px;
  color: #fff !important;
  background: #7650c7 !important;
  border: 1px solid rgba(207, 185, 255, 0.32) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(83, 48, 153, 0.28) !important;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

.button:hover,
a.button:hover {
  color: #fff !important;
  background: #8e63e5 !important;
  box-shadow: 0 10px 30px rgba(116, 74, 205, 0.4) !important;
  transform: translateY(-1px);
}

.button.button--link,
.button.button--plain {
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

.input,
input.input,
textarea.input,
select.input,
.select2-selection,
.fr-box.fr-basic .fr-wrapper,
.fr-toolbar {
  color: var(--wr-text) !important;
  background: rgba(8, 8, 16, 0.84) !important;
  border-color: var(--wr-line) !important;
  border-radius: 6px !important;
}

.input:focus,
input.input:focus,
textarea.input:focus {
  border-color: var(--wr-violet) !important;
  box-shadow: 0 0 0 3px rgba(169, 112, 255, 0.13) !important;
}

.p-body-sidebar .block-container {
  background: rgba(13, 13, 24, 0.9) !important;
}

.avatar {
  border: 1px solid rgba(200, 168, 255, 0.32);
  box-shadow: 0 0 0 3px rgba(169, 112, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.32);
}

.userBanner {
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.userBanner.wr-role--developer,
.userBanner.wr-role--owner,
.wr-role--developer,
.wr-role--owner {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(100deg, #6b3bc6, #9b58ee 45%, #5732ac) !important;
  border: 1px solid rgba(211, 190, 255, 0.52) !important;
  box-shadow: 0 0 18px rgba(150, 83, 238, 0.34) !important;
}

.userBanner.wr-role--owner,
.wr-role--owner {
  background: linear-gradient(100deg, #bd293f, #ff624d 48%, #a4204e) !important;
  border-color: rgba(255, 178, 151, 0.52) !important;
  box-shadow: 0 0 18px rgba(255, 77, 103, 0.34) !important;
}

.userBanner.wr-role--developer::after,
.userBanner.wr-role--owner::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  transform: translateX(-160%) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  animation: wr-role-shine 3.8s ease-in-out infinite;
}

.wr-verified {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  margin-left: 8px;
  color: #071017;
  background: var(--wr-cyan);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(103, 232, 255, 0.58);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.memberHeader.wr-staff-profile {
  border-color: rgba(169, 112, 255, 0.42) !important;
  box-shadow: 0 20px 75px rgba(37, 19, 78, 0.5) !important;
}

.memberHeader.wr-staff-profile .memberHeader-main {
  background-image: linear-gradient(100deg, rgba(86, 48, 155, 0.28), rgba(17, 17, 31, 0.62)) !important;
}

.p-footer {
  position: relative;
  z-index: 1;
  color: var(--wr-muted) !important;
  background: rgba(6, 6, 12, 0.92) !important;
  border-top: 1px solid var(--wr-line) !important;
  backdrop-filter: blur(18px);
}

.p-footer a,
.p-footer-linkList a {
  color: #cac5dc !important;
}

#wr-profile-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: all;
  opacity: 0;
  background: rgba(4, 4, 10, 0);
  backdrop-filter: blur(0);
  animation: wr-intro-screen 4s cubic-bezier(.2,.8,.2,1) both;
}

.wr-profile-intro__stage {
  position: relative;
  width: min(460px, 88vw);
  height: min(460px, 88vw);
  display: grid;
  place-items: center;
}

.wr-profile-intro__portrait {
  position: relative;
  width: min(230px, 50vw);
  aspect-ratio: 1;
  filter: drop-shadow(0 22px 50px rgba(0, 0, 0, 0.7));
  animation: wr-portrait-arrive 4s cubic-bezier(.2,.8,.2,1) both;
}

.wr-profile-shard {
  position: absolute;
  inset: 0;
  background-image: var(--wr-avatar);
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 2px solid rgba(217, 200, 255, 0.6);
}

.wr-profile-shard--left {
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
  animation: wr-shard-left 4s cubic-bezier(.2,.8,.2,1) both;
}

.wr-profile-shard--right {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
  animation: wr-shard-right 4s cubic-bezier(.2,.8,.2,1) both;
}

.wr-profile-intro__blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 360px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 9px #fff, 0 0 24px var(--wr-cyan), 0 0 50px var(--wr-violet);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(10deg) translateY(-120%);
  animation: wr-blade-cut 4s cubic-bezier(.2,.8,.2,1) both;
}

.wr-profile-intro__blade::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 44px;
  height: 12px;
  border-radius: 3px;
  background: #18151f;
  border: 2px solid #cbbdf0;
  transform: translateX(-50%);
}

.wr-profile-intro__role {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: min(620px, 92vw);
  transform: translateX(-50%);
  color: #fff;
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(20px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: 0 !important;
  text-shadow: 0 0 22px rgba(169, 112, 255, 0.72);
  animation: wr-role-reveal 4s cubic-bezier(.2,.8,.2,1) both;
}

.wr-profile-intro__role::after {
  content: "WEST RUSSIA";
  display: block;
  margin-top: 10px;
  color: var(--wr-cyan);
  font-size: 12px;
  font-weight: 800;
}

@keyframes wr-grid-drift {
  to { background-position: 88px 88px; }
}

@keyframes wr-liquid-flow {
  0% {
    transform: translate3d(-4%, -3%, 0) rotate(-3deg) scale(1.02);
    background-position: 0% 10%, 100% 80%, 30% 40%;
  }
  50% {
    transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.08);
    background-position: 40% 34%, 58% 38%, 72% 56%;
  }
  100% {
    transform: translate3d(-1%, 4%, 0) rotate(-1deg) scale(1.04);
    background-position: 80% 70%, 18% 14%, 16% 74%;
  }
}

@keyframes wr-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wr-role-shine {
  0%, 62% { transform: translateX(-160%) skewX(-22deg); }
  88%, 100% { transform: translateX(340%) skewX(-22deg); }
}

@keyframes wr-intro-screen {
  0% { opacity: 0; background: rgba(4, 4, 10, 0); backdrop-filter: blur(0); }
  10%, 84% { opacity: 1; background: rgba(4, 4, 10, 0.88); backdrop-filter: blur(15px); }
  100% { opacity: 0; background: rgba(4, 4, 10, 0); backdrop-filter: blur(0); }
}

@keyframes wr-portrait-arrive {
  0%, 10% { opacity: 0; transform: scale(.75); }
  24%, 74% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes wr-blade-cut {
  0%, 28% { opacity: 0; transform: translate(-50%, -50%) rotate(10deg) translateY(-120%); }
  34% { opacity: 1; }
  49% { opacity: 1; transform: translate(-50%, -50%) rotate(10deg) translateY(120%); }
  54%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(10deg) translateY(120%); }
}

@keyframes wr-shard-left {
  0%, 44% { transform: translate(0, 0) rotate(0); }
  61%, 79% { transform: translate(-25px, 9px) rotate(-5deg); }
  100% { opacity: 0; transform: translate(-45px, 14px) rotate(-8deg) scale(.92); }
}

@keyframes wr-shard-right {
  0%, 44% { transform: translate(0, 0) rotate(0); }
  61%, 79% { transform: translate(25px, -9px) rotate(5deg); }
  100% { opacity: 0; transform: translate(45px, -14px) rotate(8deg) scale(.92); }
}

@keyframes wr-role-reveal {
  0%, 51% { opacity: 0; transform: translate(-50%, 16px); filter: blur(8px); }
  66%, 84% { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
  100% { opacity: 0; transform: translate(-50%, -6px); }
}

@media (max-width: 900px) {
  body { background-attachment: scroll !important; }
  .p-body-inner { padding-left: 12px !important; padding-right: 12px !important; }
  .node:hover, .structItem:hover { transform: none; }
  .message-cell.message-cell--user { background: rgba(29, 25, 47, 0.62) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  #wr-profile-intro { display: none !important; }
}