/* Esparta Brasil — polimento visual global v2.2.1
   Camada apenas visual. Não altera fluxos, eventos, dados ou permissões. */
:root{
  --bg:#070a0e;
  --panel:#0d1218;
  --panel2:#121923;
  --line:#252e39;
  --text:#f4f6f8;
  --muted:#8c97a6;
  --gold:#eab31f;
  --gold2:#ffd35a;
  --soft:#201a0d;
  --danger:#ef7474;
  --sp-surface:rgba(14,19,26,.88);
  --sp-surface-2:rgba(18,25,35,.92);
  --sp-border:rgba(255,255,255,.075);
  --sp-gold-border:rgba(234,179,31,.24);
  --sp-shadow:0 20px 60px rgba(0,0,0,.24);
  --sp-shadow-soft:0 10px 34px rgba(0,0,0,.16);
}
html{background:#070a0e;scrollbar-color:#4e4529 #0a0e13}
body{
  background:
    radial-gradient(900px 520px at 82% -10%,rgba(234,179,31,.055),transparent 62%),
    radial-gradient(720px 520px at -8% 40%,rgba(58,83,116,.08),transparent 62%),
    #070a0e;
  letter-spacing:-.005em;
}
::selection{background:rgba(234,179,31,.28);color:#fff}

/* Estrutura principal */
.app{grid-template-columns:264px minmax(0,1fr);background:transparent}
.sidebar{
  border-right:1px solid var(--sp-border);
  background:linear-gradient(180deg,rgba(9,13,18,.97),rgba(7,10,14,.98));
  padding:20px 14px 16px;
  gap:14px;
  box-shadow:18px 0 50px rgba(0,0,0,.08);
}
.brand{
  min-height:56px;
  padding:4px 8px 12px;
  gap:12px;
  font-size:13px;
  color:#f3f3f0;
}
.brandmark.small{
  width:42px;height:42px;border-radius:13px;
  border-color:rgba(234,179,31,.42);
  background:linear-gradient(145deg,#19170e,#0d1117 70%);
  box-shadow:inset 0 0 0 3px rgba(234,179,31,.025),0 8px 28px rgba(0,0,0,.24);
}
.usercard{
  border-color:var(--sp-border);
  background:linear-gradient(145deg,rgba(17,23,31,.94),rgba(11,16,22,.94));
  border-radius:18px;
  padding:14px;
  min-height:112px;
  box-shadow:var(--sp-shadow-soft);
}
.usercard .avatar{box-shadow:0 0 0 2px #0c1117,0 0 0 3px rgba(234,179,31,.34)}
.username{letter-spacing:-.015em}
.nav{gap:4px;padding:2px 0}
.nav button{
  min-height:44px;
  border-radius:12px;
  color:#949eac;
  font-size:12px;
  padding:10px 12px;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.nav button .ico{font-size:16px;color:#a9b2be;transition:color .16s ease}
.nav button:hover{background:rgba(255,255,255,.045);color:#eef1f4;transform:translateX(2px)}
.nav button:hover .ico{color:var(--gold2)}
.nav button.active{
  background:linear-gradient(90deg,rgba(234,179,31,.15),rgba(234,179,31,.045));
  color:#fff;
  box-shadow:inset 2px 0 0 var(--gold),0 8px 24px rgba(0,0,0,.08);
}
.nav button.active .ico{color:var(--gold2)}
.nav .sep{background:rgba(255,255,255,.06);margin:8px 8px}
.logout{
  border-color:var(--sp-border);
  background:rgba(255,255,255,.025);
  color:#aab3bf;
  border-radius:12px;
  transition:.16s ease;
}
.logout:hover{border-color:rgba(239,116,116,.3);background:rgba(239,116,116,.06);color:#f0a1a1}
.workspace{background:transparent}
.topbar{
  height:76px;
  padding:0 32px;
  border-bottom:1px solid var(--sp-border);
  background:rgba(7,10,14,.78);
  backdrop-filter:blur(22px) saturate(120%);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
}
.topbar h1{font-size:18px;letter-spacing:-.025em}
.topbar p{font-size:11px;color:#788493}
.search{
  width:min(360px,34vw);
  height:44px;
  border-color:var(--sp-border);
  background:rgba(17,23,31,.8);
  border-radius:14px;
  color:#eef1f4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:.18s ease;
}
.search:focus{border-color:rgba(234,179,31,.42);background:#111821;box-shadow:0 0 0 3px rgba(234,179,31,.065)}
.iconbtn{border-color:var(--sp-border);background:rgba(17,23,31,.82);border-radius:12px;transition:.16s ease}
.iconbtn:hover{border-color:rgba(234,179,31,.28);background:#171b1d;color:var(--gold2)}
.content{padding:30px 38px 72px;max-width:1560px}
.page{max-width:1200px}

/* Superfícies e componentes */
.hero{
  border-color:var(--sp-border);
  border-radius:22px;
  padding:24px;
  background:
    radial-gradient(600px 220px at 95% 0%,rgba(234,179,31,.09),transparent 60%),
    linear-gradient(145deg,rgba(17,24,33,.96),rgba(12,17,23,.96));
  box-shadow:var(--sp-shadow-soft);
}
.hero h2{font-size:30px;letter-spacing:-.035em;margin:5px 0 6px}
.card{
  border-color:var(--sp-border);
  background:linear-gradient(145deg,var(--sp-surface),rgba(11,16,22,.88));
  border-radius:18px;
  padding:17px;
  box-shadow:0 1px 0 rgba(255,255,255,.015),var(--sp-shadow-soft);
}
.card:hover{border-color:rgba(255,255,255,.1)}
.chip{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  color:#929dab;
  padding:5px 9px;
}
.chip.gold{border-color:rgba(234,179,31,.28);background:rgba(234,179,31,.075);color:#f7cd54}
.btn,.iconbtn,.square,.text-action,.password-toggle{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.btn{border-color:var(--sp-border);background:#121923;border-radius:11px;padding:10px 14px}
.btn:hover{border-color:rgba(255,255,255,.13);background:#17202b;transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg,#f2bd2c,#dfa610);
  border-color:#eab31f;
  color:#121006;
  box-shadow:0 8px 24px rgba(234,179,31,.12),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{background:linear-gradient(135deg,#f8ca44,#e8af16);box-shadow:0 10px 30px rgba(234,179,31,.18);transform:translateY(-1px)}
.btn.ghost{background:rgba(255,255,255,.02)}
.btn.danger{background:rgba(239,116,116,.045)}
.input,.select,.textarea{
  border-color:var(--sp-border);
  background:rgba(13,19,27,.9);
  border-radius:12px;
  color:#eef1f4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(234,179,31,.42);background:#101720;box-shadow:0 0 0 3px rgba(234,179,31,.06)}
.input::placeholder,.textarea::placeholder{color:#5f6977}
.empty{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.018);
  border-radius:16px;
  color:#7f8a99;
}
.status{border-radius:12px;border-color:var(--sp-border)}
.notice{border-color:rgba(234,179,31,.27);background:rgba(234,179,31,.065)}
.error{border-color:rgba(239,116,116,.26);background:rgba(239,116,116,.06)}
.modalbg{background:rgba(2,4,7,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal{
  border-color:rgba(255,255,255,.1);
  background:linear-gradient(145deg,#10161e,#0b1016);
  border-radius:22px;
  box-shadow:0 34px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.025);
}
.modalhead{padding-bottom:4px}
.perf{border-color:rgba(255,255,255,.08);background:rgba(8,12,17,.86);backdrop-filter:blur(8px);opacity:.52}

/* Feed / publicações */
.feed{max-width:720px;gap:18px}
.post{
  border-color:var(--sp-border);
  background:linear-gradient(145deg,rgba(14,20,27,.96),rgba(10,15,21,.96));
  border-radius:20px;
  box-shadow:var(--sp-shadow-soft);
}
.posthead{padding:14px 16px}
.postbody{padding:2px 16px 16px;line-height:1.58}
.postmedia{background:#05070a}
.postmedia img,.postmedia video{max-height:700px}
.postactions{border-top-color:rgba(255,255,255,.055);padding:9px 12px}
.postactions button{border-radius:9px;transition:.15s ease}
.postactions button:hover{background:rgba(255,255,255,.035);color:#fff}
.postactions button.on{color:var(--gold2)}

/* Loja / produtos */
.products{gap:16px}
.product{
  border-color:var(--sp-border);
  border-radius:19px;
  background:linear-gradient(145deg,#0f151d,#0a0f15);
  box-shadow:var(--sp-shadow-soft);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.product:hover{transform:translateY(-3px);border-color:rgba(234,179,31,.18);box-shadow:0 18px 46px rgba(0,0,0,.24)}
.productimg{background:radial-gradient(circle at 50% 45%,#121a23,#070a0e 72%)}
.productbody{padding:15px}
.price{color:#f6d365;letter-spacing:-.02em}

/* Direct */
.msglist{gap:10px!important}
.msgcard{
  border-color:var(--sp-border)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(16,22,30,.95),rgba(11,16,22,.95))!important;
  padding:12px 13px!important;
  box-shadow:0 8px 26px rgba(0,0,0,.08);
  transition:transform .15s ease,border-color .15s ease,background .15s ease!important;
}
.msgcard:hover{transform:translateY(-1px);border-color:rgba(234,179,31,.2)!important;background:#121a23!important}
.chat{border-radius:24px!important;border-color:rgba(255,255,255,.1)!important}
.chathead{padding:13px 15px!important;border-bottom-color:rgba(255,255,255,.06)!important;background:rgba(14,20,28,.94)}
.chatmsgs{
  background:
    radial-gradient(500px 360px at 85% 5%,rgba(234,179,31,.035),transparent 70%),
    linear-gradient(180deg,#080c11,#070a0e)!important;
  padding:17px!important;
}
.bubble{
  border-color:rgba(255,255,255,.075)!important;
  background:#121923!important;
  border-radius:17px 17px 17px 6px!important;
  box-shadow:0 5px 18px rgba(0,0,0,.11);
}
.msgrow.mine .bubble{
  background:linear-gradient(145deg,#2a210d,#1d180c)!important;
  border-color:rgba(234,179,31,.24)!important;
  border-radius:17px 17px 6px 17px!important;
}
.chatcompose{border-top-color:rgba(255,255,255,.06)!important;background:#0d131a!important;padding:10px!important}
.square{border-color:rgba(255,255,255,.08)!important;background:#141b24!important;border-radius:11px!important}
.square:hover{border-color:rgba(234,179,31,.22)!important;color:var(--gold2)}
.replybar{background:#141b24!important;border:1px solid rgba(255,255,255,.06)}

/* Perfil social */
body .igp{max-width:1050px!important}
body .igp-shell{
  border-color:rgba(255,255,255,.075)!important;
  background:linear-gradient(145deg,rgba(14,19,26,.94),rgba(9,14,20,.94))!important;
  border-radius:24px!important;
  box-shadow:var(--sp-shadow)!important;
}
body .igp-cover{height:250px!important;background-color:#0b1016!important}
body .igp-cover:after{background:linear-gradient(to bottom,transparent 24%,rgba(8,11,16,.82))!important}
body .igp-avatar{box-shadow:0 0 0 2px rgba(234,179,31,.3),0 12px 36px rgba(0,0,0,.28)!important}
body .igp-name{letter-spacing:-.035em!important}
body .igp-stat b{color:#f6f7f9}
body .igp-meta span{border-color:rgba(255,255,255,.075)!important;background:#101720!important}
body .igp-highlights{border-top-color:rgba(255,255,255,.055)!important;background:rgba(255,255,255,.012)}
body .igp-highlight .ring{border-color:rgba(234,179,31,.52)!important}
body .igp-highlight .inside{background:linear-gradient(145deg,#171e27,#10151c)!important}
body .igp-tabs{border-color:rgba(255,255,255,.06)!important;background:rgba(7,11,16,.45)}
body .igp-post{background:#0d131a!important}
body .igp-post:hover{outline:1px solid rgba(255,255,255,.08);outline-offset:-1px}
body .igp-post .over{backdrop-filter:blur(2px)}
body .igp-about{background:rgba(7,11,16,.28)}
body .igp-info{border-color:rgba(255,255,255,.07)!important;background:#101720!important;border-radius:14px!important}

/* Comunidades / VIP */
.vip-paint-alert{
  border-color:rgba(234,179,31,.28)!important;
  background:linear-gradient(145deg,rgba(33,27,12,.9),rgba(21,18,10,.9))!important;
  border-radius:15px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.vip-paint-stat{
  border-color:var(--sp-border)!important;
  background:linear-gradient(145deg,#111821,#0d131a)!important;
  border-radius:15px!important;
}
.vip-paint-stat b{color:#f4d56d}
.vip-paint-count{box-shadow:0 0 0 3px rgba(234,179,31,.08)}

/* Cadastro e regras */
.rules-block{border-color:rgba(255,255,255,.085)!important;background:#090e14!important;border-radius:17px!important;box-shadow:var(--sp-shadow-soft)}
.rule-card{border-color:rgba(255,255,255,.075)!important;background:#0f151d!important;border-radius:14px!important}
.rule-card.accepted{border-color:rgba(234,179,31,.3)!important;box-shadow:inset 3px 0 0 rgba(234,179,31,.52)}
.rule-summary{padding:12px!important}
.rule-open{border-color:rgba(255,255,255,.09)!important;background:#141c26!important;border-radius:9px!important}
.rule-reader{border-top-color:rgba(255,255,255,.06)!important}
.rule-scroll{background:#080c11!important}
.rules-progress{border-color:rgba(234,179,31,.32)!important;background:rgba(234,179,31,.08)!important}
.register-note{border-color:rgba(255,255,255,.075)!important;background:#0f151d!important;border-radius:13px!important}

/* Tabelas / listas genéricas */
table{border-collapse:separate;border-spacing:0;width:100%}
th{color:#828e9d;font-size:10px;letter-spacing:.05em;text-transform:uppercase}
td,th{border-color:rgba(255,255,255,.055)!important}

/* Scrollbars discretas */
.sidebar,.chatmsgs,.modal,.rule-scroll,.igp-highlights{scrollbar-width:thin;scrollbar-color:#403923 transparent}

/* Motion sem prejudicar acessibilidade */
@media(prefers-reduced-motion:no-preference){
  .card,.post,.product,.msgcard,.hero{transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}
}

/* Responsivo */
@media(max-width:1100px){
  .app{grid-template-columns:238px minmax(0,1fr)}
  .content{padding-left:26px;padding-right:26px}
  .topbar{padding-left:24px;padding-right:24px}
}
@media(max-width:900px){
  .card,.hero,.post,.product{box-shadow:0 8px 28px rgba(0,0,0,.12)}
  .content{padding:22px 18px 64px}
  .topbar{padding:0 18px}
  body .igp-cover{height:190px!important}
}
@media(max-width:760px){
  .hero{border-radius:18px;padding:18px}.hero h2{font-size:25px}
  .card{border-radius:16px;padding:14px}
  .post{border-radius:16px}
  .modal{border-radius:18px}
  .search{width:min(240px,48vw)}
  body .igp-shell{border-radius:18px!important}
  body .igp-cover{height:165px!important}
  .chat{border-radius:0!important}
}
@media(max-width:520px){
  .topbar{height:68px;padding:0 12px}.topbar p{display:none}.topbar h1{font-size:16px}
  .search{height:40px;width:44vw;padding:0 11px}.content{padding:16px 10px 72px}
  .hero{border-radius:16px;padding:16px}.hero h2{font-size:23px}
  .card{border-radius:15px}
  .btn{padding:9px 11px}
  .perf{display:none}
}