/* ============================================================
   L2 Brasil.club — Vote System Skin
   Visual-only redesign. Logic, forms, IDs and JS hooks preserved.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#05070b;
  --panel:#0e1420;
  --panel-2:#121b2a;
  --glass:rgba(12,18,28,.82);
  --gold:#f3c866;
  --gold-2:#ffe6a3;
  --gold-3:#9f7428;
  --blue:#28b7ff;
  --blue-2:#7fe4ff;
  --red:#c23a2e;
  --green:#38d989;
  --text:#edf4ff;
  --muted:#aeb9c8;
  --dim:#6f7c91;
  --line:rgba(243,200,102,.26);
  --line-blue:rgba(40,183,255,.25);
  --shadow:0 24px 80px rgba(0,0,0,.62);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{min-height:100%;margin:0;padding:0}
html{
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg, rgba(4,8,15,.28), rgba(4,8,15,.92) 58%, #05070b 100%),
    radial-gradient(circle at 50% 0%, rgba(255,217,120,.22), transparent 30%),
    radial-gradient(circle at 78% 26%, rgba(40,183,255,.14), transparent 26%),
    url(../images/l2brasil.club.png);
  background-size:cover, auto, auto, cover;
  background-position:center top;
  background-attachment:fixed;
}
body{
  min-height:100%;
  color:var(--text);
  font-family:Inter, Arial, sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, transparent, #000 12%, #000 68%, transparent);
  opacity:.45;
}
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.62) 100%);
}

/* Links */
a{color:var(--gold);text-decoration:none;transition:.22s ease}
a:hover{color:var(--gold-2);text-shadow:0 0 16px rgba(243,200,102,.42)}

/* Layout */
.corpo-topo{
  width:min(100%, 1060px);
  min-height:100vh;
  margin:0 auto;
  padding:24px 18px 36px;
  position:relative;
  z-index:1;
}
#server{
  width:100%;
  min-height:36px;
  position:relative;
}
#vote{display:none}
#logo{
  width:min(760px, 94vw);
  height:152px;
  margin:8px auto 8px;
  background-image:url(../images/vote_l2brasil_club.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(243,200,102,.34));
}
.section-title{
  font-family:Cinzel, Georgia, serif;
  font-size:clamp(20px, 3.2vw, 34px);
  font-weight:900;
  color:var(--gold-2);
  letter-spacing:.18em;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 24px rgba(243,200,102,.35);
}
.section-divider{
  width:min(430px, 80vw);
  height:1px;
  margin:12px auto 10px;
  background:linear-gradient(90deg, transparent, rgba(40,183,255,.68), var(--gold), rgba(40,183,255,.68), transparent);
  box-shadow:0 0 20px rgba(40,183,255,.4);
}
.ornament{color:var(--gold);opacity:.78;text-align:center;letter-spacing:.6em}

/* Card principal */
#login-box{
  width:min(760px, 96vw);
  min-height:360px;
  margin:26px auto;
  position:relative;
  border-radius:var(--radius);
  padding:1px;
  background:
    linear-gradient(135deg, rgba(255,230,163,.72), rgba(40,183,255,.24) 34%, rgba(194,58,46,.34) 70%, rgba(255,230,163,.56));
  box-shadow:var(--shadow), 0 0 48px rgba(40,183,255,.12), 0 0 60px rgba(243,200,102,.12);
  overflow:hidden;
}
#login-box:before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:calc(var(--radius) - 1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 32%),
    linear-gradient(135deg, rgba(255,230,163,.09), rgba(40,183,255,.04)),
    var(--glass);
  backdrop-filter:blur(10px);
  z-index:0;
}
#login-box:after{
  content:"";
  position:absolute;
  width:260px;height:260px;right:-90px;top:-110px;
  background:radial-gradient(circle, rgba(40,183,255,.2), transparent 66%);
  pointer-events:none;
}
.center-login{
  position:relative;
  z-index:1;
  width:auto;
  min-height:358px;
  margin:0;
  padding:26px 28px 24px;
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(4,8,14,.15), rgba(4,8,14,.46)),
    url(../images/bg_boxlogin.gif);
  background-size:cover;
  background-position:center;
}
.center-login:before,.center-login:after{
  content:"";position:absolute;inset:16px;pointer-events:none;border:1px solid rgba(243,200,102,.16);border-radius:16px
}
.center-login:after{inset:22px;border-color:rgba(40,183,255,.12)}

/* Avisos */
.aviso-offline{
  position:relative;
  width:min(650px, 100%);
  margin:0 auto 22px!important;
  padding:14px 18px;
  border-radius:16px;
  color:#fff3df;
  font-size:14px;
  line-height:1.55;
  border:1px solid rgba(243,200,102,.28);
  background:linear-gradient(135deg, rgba(194,58,46,.22), rgba(10,18,30,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.28);
}
.aviso-offline strong{
  display:block;
  margin-bottom:5px;
  color:var(--gold-2);
  font-family:Cinzel, Georgia, serif;
  font-size:13px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.aviso-offline .icon-sword{display:none}

/* Formulários */
.formulario{
  width:100%;
  margin:22px auto 8px;
  position:relative;
  z-index:2;
  color:var(--text);
  font-size:14px;
}
table{border-collapse:separate;border-spacing:0 10px;margin:0 auto;color:var(--muted)}
td{font-size:13px;letter-spacing:.03em;vertical-align:middle}
input[type=text],input[type=password],select{
  width:290px;
  max-width:100%;
  height:44px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(243,200,102,.28);
  outline:none;
  color:var(--text);
  background:linear-gradient(180deg, rgba(6,12,20,.88), rgba(13,23,36,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.22);
  font-family:Inter, Arial, sans-serif;
  font-size:14px;
  transition:.22s ease;
}
input[type=text]:focus,input[type=password]:focus,select:focus{
  border-color:var(--blue-2);
  box-shadow:0 0 0 3px rgba(40,183,255,.13), 0 0 22px rgba(40,183,255,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
select option{background:#101827;color:var(--text)}

button,.button,input[type=submit]{
  min-width:250px;
  height:46px;
  padding:0 22px;
  border:0;
  border-radius:14px;
  cursor:pointer;
  color:#1a1203;
  font-family:Cinzel, Georgia, serif;
  font-size:13px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  background:linear-gradient(180deg, #fff1ba 0%, #f3c866 42%, #b57b22 100%);
  box-shadow:0 14px 28px rgba(0,0,0,.34), 0 0 22px rgba(243,200,102,.22), inset 0 1px 0 rgba(255,255,255,.72);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
button:hover,.button:hover,input[type=submit]:hover{transform:translateY(-2px);filter:saturate(1.12) brightness(1.04);box-shadow:0 18px 34px rgba(0,0,0,.42), 0 0 34px rgba(243,200,102,.34)}
button:active,.button:active,input[type=submit]:active{transform:translateY(0)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Mensagens / loaders */
.msg,.edits{
  width:min(660px, 100%);
  margin:18px auto 0;
  padding:14px 16px;
  display:none;
  border-radius:14px;
  color:var(--text);
  background:rgba(10,17,28,.82);
  border:1px solid rgba(243,200,102,.25);
  border-left:4px solid var(--gold);
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  font-size:14px;
  line-height:1.55;
}
.loading,.verify,.entrega{
  width:100%;
  display:none;
  text-align:center;
  padding:18px 0;
  color:var(--gold-2);
  font-family:Cinzel, Georgia, serif;
  font-size:12px;
  letter-spacing:.14em;
}
.loading img,.verify img,.entrega img{filter:drop-shadow(0 0 12px rgba(243,200,102,.28))}

/* Área logada / banners de voto */
#banners{
  width:min(650px, 100%)!important;
  padding:4px 0 0!important;
}
#banners a{
  display:inline-block;
  margin:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(243,200,102,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
#banners img{max-width:120px;height:auto;border-radius:8px;vertical-align:middle}
#total_votos{
  position:absolute;
  top:0;right:0;
  padding:10px 14px;
  border-radius:999px;
  color:var(--gold-2);
  background:rgba(8,13,22,.68);
  border:1px solid rgba(243,200,102,.22);
  font-family:Cinzel, Georgia, serif;
  font-size:12px;
  letter-spacing:.08em;
  box-shadow:0 10px 26px rgba(0,0,0,.26);
}
#adm a{
  position:absolute;
  top:12px;right:12px;
  z-index:4;
  min-width:126px;
  height:36px;
  line-height:36px;
  padding:0 12px;
  border-radius:999px;
  text-align:center;
  color:var(--gold-2);
  background:rgba(6,12,20,.82);
  border:1px solid rgba(243,200,102,.25);
  font-family:Cinzel, Georgia, serif;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
#adm a:hover{background:rgba(243,200,102,.12)}
#update{color:var(--muted);font-size:12px}

#inst_1,#inst_2{float:left;min-height:44px;line-height:44px;color:var(--muted);font-size:13px}
#inst_1{width:42%}#inst_2{width:58%}
#creditos,#creditos2{color:var(--dim);font-size:12px;text-align:center}
.fb-like-box-back,.fb-like-box{background:rgba(8,13,22,.66);border:1px solid rgba(243,200,102,.18);border-radius:16px}
.hidden{display:none!important}

/* Overrides para blocos antigos com inline style */
[style*="bg_votesystem.gif"]{border-radius:16px;background-color:rgba(9,15,25,.54)!important;background-blend-mode:soft-light}
[style*="border-bottom:1px solid #666"]{border-bottom-color:rgba(243,200,102,.22)!important;color:var(--gold-2)!important}

@media (max-width:640px){
  .corpo-topo{padding:16px 10px 28px}
  #logo{height:96px;margin-top:2px}
  .center-login{padding:18px 14px}
  table{width:100%!important}
  tr,td{display:block;width:100%!important;text-align:left}
  td:first-child{height:auto!important;margin:4px 0;color:var(--gold-2)}
  input[type=text],input[type=password],select,button,.button,input[type=submit]{width:100%;min-width:0}
  #total_votos{position:relative;display:inline-block;right:auto;top:auto}
  #inst_1,#inst_2{width:100%;line-height:28px;min-height:28px}
}

/* ===== Ajustes da tela logada / votação ===== */
.logged-bar{
  position:relative;
  z-index:3;
  width:min(650px, 100%);
  min-height:44px;
  margin:0 auto 18px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-radius:14px;
  color:var(--gold-2);
  border:1px solid rgba(243,200,102,.22);
  background:linear-gradient(90deg, rgba(194,58,46,.14), rgba(9,17,28,.62), rgba(40,183,255,.08));
  box-shadow:0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  font-family:Cinzel, Georgia, serif;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.logged-user{color:#fff7df; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.logged-exit a{
  display:inline-flex;
  min-width:64px;
  height:28px;
  padding:0 12px;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#111827!important;
  background:linear-gradient(180deg, #fff1ba, #d59b35);
  font-size:10px!important;
  letter-spacing:.14em!important;
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.55);
}
.vote-panel{
  position:relative;
  z-index:2;
  width:min(650px, 100%)!important;
  margin:0 auto!important;
  padding:18px 18px 22px!important;
  min-height:190px;
  border-radius:18px;
  border:1px solid rgba(243,200,102,.17);
  background:linear-gradient(180deg, rgba(5,10,18,.34), rgba(5,10,18,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  text-align:center;
  overflow:hidden;
}
.vote-panel-title{
  color:var(--gold-2);
  font-family:Cinzel, Georgia, serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 6px;
}
.vote-panel-subtitle{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.05em;
  margin:0 auto 16px;
}
.vote-sites{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px;
  margin:0 auto 16px;
}
.vote-sites:after{content:"";display:block;clear:both;}
.vote-sites > div[style*="width:87px"]{
  float:none!important;
  margin:0!important;
  width:112px!important;
  height:70px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(243,200,102,.26)!important;
  border-radius:14px!important;
  background-color:rgba(255,255,255,.045)!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  box-shadow:0 12px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden;
}
.vote-sites > div[style*="width:87px"] a{
  display:flex!important;
  width:100%;
  height:100%;
  margin:0!important;
  padding:0!important;
  align-items:center;
  justify-content:center;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.vote-sites > div[style*="width:87px"] img{
  width:87px!important;
  height:47px!important;
  max-width:87px!important;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.vote-sites > div[style*="width:87px"] > div{
  width:100%!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4px!important;
  border-radius:12px;
  color:#fff5d9;
  font-family:Inter, Arial, sans-serif!important;
  font-size:10px!important;
  line-height:1.2!important;
  background:rgba(0,0,0,.72)!important;
}
.receive-action{
  width:100%;
  clear:both;
  text-align:center;
  padding:2px 0 0;
}
.receive-action button,
.character-reward button{margin:16px auto 0!important;}
.character-reward{
  width:100%;
  clear:both;
  text-align:center;
  color:var(--gold-2);
  font-family:Cinzel, Georgia, serif;
  font-size:14px;
  letter-spacing:.08em;
  margin-top:10px;
}
.character-reward select{margin-top:14px!important; width:260px!important;}
.reward-warning{margin:14px auto!important; width:min(560px, 100%)!important;}
.empty-votes{padding:18px; color:var(--muted); font-size:15px; line-height:1.55;}
.empty-votes .empty-icon{font-size:28px; margin-bottom:8px; color:var(--gold);}
.empty-votes span{color:var(--gold-2);}

@media (max-width:640px){
  .logged-bar{flex-direction:column; align-items:stretch; text-align:center; padding:12px; line-height:1.4;}
  .logged-exit a{width:100%;}
  .vote-panel{padding:16px 12px 20px!important;}
  .vote-sites{gap:10px;}
  .vote-sites > div[style*="width:87px"]{width:104px!important;height:66px!important;}
}

/* ===== Premium Effects Upgrade ===== */

@keyframes floatCard {
  0%{transform:translateY(0px)}
  50%{transform:translateY(-4px)}
  100%{transform:translateY(0px)}
}

@keyframes goldPulse {
  0%{box-shadow:0 0 0 rgba(243,200,102,.0)}
  50%{box-shadow:0 0 28px rgba(243,200,102,.25)}
  100%{box-shadow:0 0 0 rgba(243,200,102,.0)}
}

@keyframes shine {
  from{transform:translateX(-120%) skewX(-18deg)}
  to{transform:translateX(220%) skewX(-18deg)}
}

#login-box{
  animation:floatCard 6s ease-in-out infinite;
}

.section-title{
  position:relative;
}

.section-title:after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-10px;
  width:120px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  filter:blur(.2px);
}

button,.button,input[type=submit]{
  position:relative;
  overflow:hidden;
  animation:goldPulse 4s infinite;
}

button:before,.button:before,input[type=submit]:before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60px;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:shine 4.5s infinite;
}

.vote-item, .vote-box, .top-box, .ranking-box {
  transition:all .25s ease;
}

.vote-item:hover, .vote-box:hover, .top-box:hover, .ranking-box:hover {
  transform:translateY(-4px) scale(1.01);
  box-shadow:0 18px 34px rgba(0,0,0,.35),0 0 26px rgba(40,183,255,.18);
}

img{
  max-width:100%;
}

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#09111c;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #f3c866, #7a5218);
  border-radius:20px;
}

.footer-premium{
  margin-top:28px;
  text-align:center;
  color:rgba(255,255,255,.55);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

@media(max-width:768px){

  .corpo-topo{
    padding:14px 10px 28px;
  }

  #logo{
    height:95px;
    margin-top:12px;
  }

  .section-title{
    font-size:26px;
    letter-spacing:.08em;
  }

  #login-box{
    width:100%;
    margin-top:18px;
  }

  .center-login{
    padding:18px 14px 20px;
  }

  table,tbody,tr,td{
    display:block;
    width:100%;
    text-align:center;
  }

  td{
    padding-bottom:8px;
  }

  input[type=text],input[type=password],select{
    width:100%;
  }

  button,.button,input[type=submit]{
    width:100%;
    min-width:unset;
  }

  .aviso-offline{
    font-size:13px;
    padding:14px;
  }
}