/* Esparta Brasil — sidebar + ambient scene 233
   Fundo com textura, marca d'agua e glow suave sem comprometer leitura. */
:root{
  --s233-deep:#060a10;
  --s233-navy:#09111b;
  --s233-blue:#102033;
  --s233-gold:#e9b92f;
  --s233-gold2:#f4cd62;
  --s233-line:rgba(255,255,255,.07);
}

/* SIDEBAR — mais identidade e profundidade */
.sidebar{
  position:sticky!important;
  isolation:isolate;
  overflow-x:hidden!important;
  background:
    radial-gradient(120% 52% at 0% -5%,rgba(233,185,47,.15),transparent 49%),
    radial-gradient(110% 58% at 112% 82%,rgba(40,91,145,.18),transparent 58%),
    linear-gradient(180deg,#0a111a 0%,#07101a 40%,#080c12 100%)!important;
  border-right:1px solid rgba(230,190,72,.11)!important;
  box-shadow:18px 0 55px rgba(0,0,0,.18)!important;
}
.sidebar:before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(115deg,transparent 0 47%,rgba(255,255,255,.023) 48%,transparent 49% 100%),
    linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    radial-gradient(circle,rgba(233,185,47,.18) .7px,transparent .9px);
  background-size:90px 90px,38px 38px,38px 38px,29px 29px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.86),rgba(0,0,0,.35) 67%,transparent 100%);
  opacity:.55;
  animation:s233TextureDrift 26s linear infinite alternate;
}
.sidebar:after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-62px;
  right:-78px;
  bottom:58px;
  height:330px;
  pointer-events:none;
  background:
    url('/icon.svg') 112% 54%/235px 235px no-repeat,
    radial-gradient(circle at 79% 50%,rgba(233,185,47,.16),rgba(233,185,47,.035) 31%,transparent 67%),
    radial-gradient(circle at 16% 80%,rgba(40,95,150,.14),transparent 55%);
  filter:saturate(.85);
  opacity:.20;
  transform:rotate(-4deg);
  animation:s233WatermarkFloat 16s ease-in-out infinite alternate;
}
.sidebar>*{position:relative;z-index:2}

/* Marca */
.brand{
  margin:0 2px 3px!important;
  padding:11px 10px 17px!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}
.brand:after{display:none!important}
.brandmark.small{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(233,185,47,.14),rgba(13,19,28,.92))!important;
  border-color:rgba(233,185,47,.42)!important;
  box-shadow:0 0 0 4px rgba(233,185,47,.035),0 9px 28px rgba(0,0,0,.24)!important;
}
.brandmark.small:after{
  content:"";
  position:absolute;
  inset:-40% -100%;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);
  transform:translateX(-55%);
  animation:s233LogoSheen 9s ease-in-out infinite;
}
.brand>span{
  color:#f2f4f7;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}

/* Usuário como glass card */
.usercard{
  margin:9px 0 12px!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:
    radial-gradient(180px 90px at 0% 0%,rgba(233,185,47,.075),transparent 68%),
    linear-gradient(145deg,rgba(18,28,40,.80),rgba(9,15,23,.72))!important;
  box-shadow:0 14px 30px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(14px) saturate(1.08)!important;
}
.usercard .avatar{
  border:1px solid rgba(244,205,98,.28)!important;
  box-shadow:0 0 0 3px rgba(233,185,47,.035),0 8px 20px rgba(0,0,0,.2)!important;
}
.usercard .username{color:#f5f7fa!important}
.usercard .gamer{color:#8897a7!important}
.usercard .chip{
  border-color:rgba(255,255,255,.07)!important;
  background:rgba(8,14,21,.56)!important;
  backdrop-filter:blur(5px);
}
.usercard .chip.gold{
  border-color:rgba(233,185,47,.20)!important;
  background:rgba(233,185,47,.075)!important;
}

/* Navegação como trilho */
.nav{position:relative;padding:2px 0 10px!important;gap:2px!important}
.nav:before{
  content:"";
  position:absolute;
  left:23px;
  top:10px;
  bottom:12px;
  width:1px;
  background:linear-gradient(to bottom,rgba(233,185,47,.13),rgba(255,255,255,.025) 22%,rgba(255,255,255,.025) 78%,transparent);
  pointer-events:none;
}
.nav button{
  min-height:45px!important;
  margin:0 1px!important;
  padding:7px 10px!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  color:#9ba7b5!important;
}
.nav button:hover{
  background:linear-gradient(90deg,rgba(255,255,255,.044),rgba(255,255,255,.015))!important;
  border-color:rgba(255,255,255,.035)!important;
  color:#edf1f5!important;
}
.nav button.active{
  background:
    radial-gradient(160px 70px at 0% 50%,rgba(233,185,47,.12),transparent 72%),
    linear-gradient(90deg,rgba(233,185,47,.07),rgba(255,255,255,.025))!important;
  border-color:rgba(233,185,47,.12)!important;
  color:#fff!important;
  box-shadow:inset 3px 0 0 var(--s233-gold),0 7px 22px rgba(0,0,0,.11)!important;
}
.nav button.active:before{display:none!important}
.nav button .ico{
  position:relative;
  z-index:1;
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(7,13,21,.66)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.12)!important;
}
.nav button.active .ico{
  color:var(--s233-gold2)!important;
  background:linear-gradient(145deg,rgba(233,185,47,.13),rgba(14,18,24,.85))!important;
  border-color:rgba(233,185,47,.21)!important;
  box-shadow:0 0 18px rgba(233,185,47,.07)!important;
}
.nav .sep{
  position:relative;
  height:1px!important;
  margin:9px 8px!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)!important;
}
.logout{
  margin-top:auto!important;
  border:1px solid rgba(255,255,255,.055)!important;
  background:rgba(7,13,20,.56)!important;
  backdrop-filter:blur(10px);
  color:#8f9aa8!important;
}
.logout:hover{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.09)!important;
  color:#e7ebef!important;
}

/* WORKSPACE — deixa de ser um vazio preto */
.workspace{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(850px 580px at 12% 7%,rgba(43,91,145,.11),transparent 66%),
    radial-gradient(760px 540px at 92% 19%,rgba(233,185,47,.075),transparent 67%),
    radial-gradient(900px 620px at 57% 94%,rgba(32,73,118,.075),transparent 69%),
    linear-gradient(160deg,#080d14 0%,#070a0f 42%,#090d13 100%)!important;
}
.workspace:before{
  content:"";
  position:fixed;
  z-index:0;
  top:72px;
  right:0;
  bottom:0;
  left:280px;
  pointer-events:none;
  background-image:
    linear-gradient(116deg,transparent 0 49%,rgba(255,255,255,.018) 50%,transparent 51% 100%),
    radial-gradient(circle,rgba(255,255,255,.06) .65px,transparent .8px),
    linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:150px 150px,38px 38px,74px 74px,74px 74px;
  mask-image:radial-gradient(ellipse at 48% 35%,#000 10%,rgba(0,0,0,.76) 54%,transparent 100%);
  opacity:.36;
  animation:s233SceneDrift 34s linear infinite alternate;
}
.workspace:after{
  content:"";
  position:fixed;
  z-index:0;
  width:min(43vw,620px);
  aspect-ratio:1;
  right:-90px;
  bottom:-120px;
  pointer-events:none;
  background:
    url('/icon.svg') center/58% 58% no-repeat,
    radial-gradient(circle,rgba(233,185,47,.075),rgba(30,70,112,.032) 42%,transparent 70%);
  opacity:.055;
  filter:grayscale(.2) saturate(.7);
  transform:rotate(-8deg);
  animation:s233SceneMark 20s ease-in-out infinite alternate;
}
.workspace>.topbar,.workspace>.content{position:relative;z-index:2}
.topbar{
  background:linear-gradient(180deg,rgba(8,13,20,.90),rgba(7,11,17,.80))!important;
  border-bottom-color:rgba(255,255,255,.055)!important;
  backdrop-filter:blur(22px) saturate(1.12)!important;
}
.content:before{
  content:"";
  position:absolute;
  z-index:-1;
  width:540px;
  height:540px;
  left:10%;
  top:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(34,81,132,.055),transparent 69%);
  filter:blur(10px);
  pointer-events:none;
}

/* Cards continuam legíveis sobre o cenário */
.post,.card,.product,.community227-card,.notif227,.sponsored-card,.direct,.cchat,.modal{
  backdrop-filter:blur(9px) saturate(1.04);
}
.post,.card,.product,.community227-card,.sponsored-card{
  box-shadow:0 12px 34px rgba(0,0,0,.095)!important;
}

/* Movimento de cenário extremamente lento */
@keyframes s233TextureDrift{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:32px -20px,12px 20px,-12px 8px,9px -12px}
}
@keyframes s233WatermarkFloat{
  from{transform:rotate(-4deg) translate3d(0,0,0);opacity:.17}
  to{transform:rotate(-2deg) translate3d(-7px,-12px,0);opacity:.23}
}
@keyframes s233LogoSheen{
  0%,62%{transform:translateX(-60%);opacity:0}
  72%{opacity:.75}
  86%,100%{transform:translateX(60%);opacity:0}
}
@keyframes s233SceneDrift{
  from{background-position:0 0,0 0,0 0,0 0}
  to{background-position:48px -26px,18px 16px,18px 20px,-20px 8px}
}
@keyframes s233SceneMark{
  from{transform:rotate(-8deg) translate3d(0,0,0) scale(1)}
  to{transform:rotate(-5deg) translate3d(-18px,-14px,0) scale(1.035)}
}

@media(max-width:1050px){
  .workspace:before{left:0}
  .workspace:after{width:min(70vw,520px);right:-150px;opacity:.038}
}
@media(max-width:760px){
  .workspace{
    background:
      radial-gradient(540px 380px at 12% 4%,rgba(43,91,145,.09),transparent 68%),
      radial-gradient(520px 380px at 90% 20%,rgba(233,185,47,.055),transparent 68%),
      linear-gradient(165deg,#080d14,#070a0f 48%,#090d13)!important;
  }
  .workspace:before{opacity:.22;background-size:180px 180px,44px 44px,90px 90px,90px 90px}
  .workspace:after{width:420px;right:-210px;bottom:-110px;opacity:.032}
}
@media(prefers-reduced-motion:reduce){
  .sidebar:before,.sidebar:after,.brandmark.small:after,.workspace:before,.workspace:after{animation:none!important}
}