:root{
  --area-bg:#07111f;
  --area-bg2:#0d1a31;
  --area-panel:rgba(255,255,255,.08);
  --area-panel-2:rgba(255,255,255,.11);
  --area-stroke:rgba(255,255,255,.10);
  --area-text:#eef4ff;
  --area-muted:#9fb0d1;
  --area-blue:#53a6ff;
  --area-cyan:#62f3ff;
  --area-green:#38d39f;
  --area-gold:#ffd166;
  --area-danger:#ff7b94;
  --area-shadow:0 20px 60px rgba(0,0,0,.35);
  --area-radius:28px;
}

html,body{min-height:100%}

body.areaUserBody{
  margin:0;
  color:var(--area-text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at top left, rgba(98,243,255,.34), transparent 27%),
    radial-gradient(circle at top right, rgba(22,135,255,.30), transparent 25%),
    radial-gradient(circle at 50% 92%, rgba(56,211,159,.22), transparent 34%),
    radial-gradient(circle at 72% 34%, rgba(255,209,102,.13), transparent 18%),
    linear-gradient(135deg,var(--area-bg) 0%,var(--area-bg2) 55%,#08101b 100%);
  overflow-x:hidden;
}

body.areaUserBody::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  opacity:.08;
  mask-image:radial-gradient(circle at 55% 15%, rgba(0,0,0,1), rgba(0,0,0,0));
}

.areaUserGlow,
.areaUserGlow2,
.areaUserGlow3{
  position:fixed;
  width:54vw;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(98,243,255,.95), rgba(255,255,255,.88), transparent);
  box-shadow:0 0 18px rgba(98,243,255,.8), 0 0 48px rgba(83,166,255,.42);
  opacity:0;
  pointer-events:none;
  z-index:0;
  transform-origin:center;
  animation:areaUserFlash 7s ease-in-out infinite;
}

.areaUserGlow{--flash-rot:-16deg;top:18%;left:-18%;transform:rotate(-16deg);animation-delay:.4s}
.areaUserGlow2{--flash-rot:19deg;top:46%;right:-22%;transform:rotate(19deg);animation-delay:2.1s}
.areaUserGlow3{--flash-rot:-31deg;bottom:18%;left:18%;width:36vw;transform:rotate(-31deg);animation-delay:4s}

@keyframes areaUserFlash{
  0%,70%,100%{opacity:0;filter:blur(0);transform:translate3d(-18px,0,0) rotate(var(--flash-rot, -16deg))}
  74%{opacity:.92;filter:blur(.4px)}
  80%{opacity:.18;transform:translate3d(42px,0,0) rotate(var(--flash-rot, -16deg))}
}

.areaUserWrap{
  position:relative;
  z-index:1;
  width:min(1240px,calc(100vw - 28px));
  margin:0 auto;
  padding:22px 0 34px;
}

.areaUserTopbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:16px;
}

.areaUserEyebrow{
  margin:0;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.58);
  font-weight:900;
}

.areaUserTitle{
  margin:4px 0 0;
  font-size:1.95rem;
  font-weight:1100;
  line-height:1.05;
}

.areaUserSub{
  margin:8px 0 0;
  color:var(--area-muted);
  font-size:.92rem;
  line-height:1.6;
  font-weight:800;
  max-width:66ch;
}

.areaUserActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.areaUserBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  color:var(--area-text);
  text-decoration:none;
  font-weight:950;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}

.areaUserBtn.primary{
  background:linear-gradient(135deg,var(--area-cyan),var(--area-blue));
  color:#07111f;
  border-color:transparent;
}

.areaUserHero,
.areaUserPanel{
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--area-radius);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  box-shadow:var(--area-shadow);
}

.areaUserHero{padding:24px}
.areaUserPanel{padding:22px}

@media (max-width: 900px){
  .areaUserWrap{width:min(100vw - 18px,1240px);padding-top:12px}
  .areaUserTopbar{display:block}
  .areaUserActions{margin-top:12px;justify-content:flex-start}
}
