body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #050505;
  color: white;
  overflow: hidden;
}
.dashboard {
  display: flex;
  height: 100vh;
} /* SIDEBAR */
.sidebar {
  width: 220px;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(217, 255, 0, 0.15);
  padding: 25px;
  box-sizing: border-box;
}
.logo {
  animation:logoGlow 2s infinite alternate;
  font-size: 24px;
  font-weight: bold;
  color: #d9ff00;
  margin-bottom: 40px;
  text-shadow: 0 0 12px rgba(217, 255, 0, 0.45);
} /* MENU */
.menu-item {
  display:flex;
align-items:center;
gap:12px;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: 0.3s;
}
.menu-item:hover {
  background: rgba(217, 255, 0, 0.12);
  transform: translateX(6px);
  box-shadow: 0 0 18px rgba(217, 255, 0, 0.12);
}
.active {
  background: rgba(217, 255, 0, 0.14);
  border: 1px solid rgba(217, 255, 0, 0.25);
} /* CONTENT */
.content {
  flex: 1;
  padding: 30px;
  box-sizing: border-box;
  overflow: visible;
} /* TOPBAR */
.topbar {
  margin-bottom: 30px;
}
.topbar input {
  box-shadow:
0 0 20px rgba(217,255,0,.04);
  transition:.3s;
  width: 100%;
  padding: 16px;
  border: none;
  outline: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  color: white;
  font-size: 16px;
  border: 1px solid rgba(217, 255, 0, 0.12);
} /* CARDS */
.cards {
  align-items:stretch;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.card {
  flex:1;
max-width:220px;
  transition:.3s;
cursor:pointer;
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(18px);
  backdrop-filter: blur(12px);
  padding: 30px;
  border-radius: 24px;
  border: 1px solid rgba(217, 255, 0, 0.15);
  box-shadow: 0 0 25px rgba(217, 255, 0, 0.05);
  min-width: 180px;
}
.card:hover{

transform:translateY(-6px);

border:
1px solid rgba(217,255,0,.28);

box-shadow:
0 0 35px rgba(217,255,0,.12);

}
.card h2 {
  margin-top: 0;
  color: #d9ff00;
}
.gb {
  font-size: 32px;
  font-weight: bold;
  margin-top: 20px;
  text-shadow: 0 0 20px rgba(217, 255, 0, 0.25);
} /* BUILDER */
.builder {
  position:relative;
overflow:hidden;
  margin-top: 25px;
  background: rgba(18, 18, 18, 0.55);
  backdrop-filter: blur(18px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 255, 0, 0.15);
  border-radius: 24px;
  padding: 25px;
  max-width: 100%;
  box-shadow: 0 0 25px rgba(217, 255, 0, 0.05);
}
.builder h2 {
  color: #d9ff00;
  margin-top: 0;
}
.builder label {
  display: block;
  margin-top: 15px;
  margin-bottom: 8px;
  color: #ccc;
}
.builder select {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: #0d0d0d;
  color: white;
  border: 1px solid rgba(217, 255, 0, 0.18);
  outline: none;
}
.proxy-box {
  margin-top: 20px;
  background: #050505;
  border: 1px solid rgba(217, 255, 0, 0.25);
  border-radius: 14px;
  padding: 16px;
  color: #d9ff00;
  font-family: monospace;
  word-break: break-all;
}
.builder button {
  margin-top: 18px;
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(45deg, #d9ff00, #a6ff00);
  color: #000;
  font-weight: bold;
  cursor: pointer;
}
.proxy-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}
.field {
  display: flex;
  flex-direction: column;
}
.field label {
  margin-bottom: 8px;
  color: #d9ff00;
  font-size: 14px;
}
.field input {
  background: #0b0b0b;
  border: 1px solid rgba(217, 255, 0, 0.15);
  border-radius: 14px;
  padding: 14px;
  color: white;
  outline: none;
  font-size: 14px;
  box-shadow: 0 0 12px rgba(217, 255, 0, 0.03);
}
.builder button:hover{

transform:translateY(-2px);

box-shadow:
0 0 25px rgba(217,255,0,.35);

}

.builder button.copied{

background:
linear-gradient(45deg,#00ff88,#00cc66);

box-shadow:
0 0 30px rgba(0,255,136,.45);

transform:scale(1.02);

}
.status{

margin-top:16px;

padding:14px;

border-radius:14px;

font-weight:bold;

display:flex;
align-items:center;
gap:10px;

width:fit-content;

}

.online{

background:
rgba(0,255,136,.08);

border:
1px solid rgba(0,255,136,.25);

color:#00ff88;

box-shadow:
0 0 18px rgba(0,255,136,.12);

}
@keyframes logoGlow{

0%{
text-shadow:
0 0 12px rgba(217,255,0,.35);
}

100%{
text-shadow:
0 0 25px rgba(217,255,0,.75);
}

}
body::before{

content:'';

position:fixed;

width:500px;
height:500px;

background:
rgba(217,255,0,.08);

filter:blur(140px);

top:-120px;
right:-120px;

z-index:0;
pointer-events:none;

animation:
floatGlow 6s infinite alternate;

}

@keyframes floatGlow{

0%{
transform:translateY(0px);
}

100%{
transform:translateY(40px);
}

}
.dashboard{
position:relative;
z-index:1;
}
.field input:focus,
.builder select:focus,
.topbar input:focus{

border:
1px solid rgba(217,255,0,.45);

box-shadow:
0 0 20px rgba(217,255,0,.18);

transition:.3s;

}
.builder::before{

content:'';

position:absolute;

width:200px;
height:200px;

background:
rgba(217,255,0,.08);

border-radius:50%;

top:-80px;
right:-80px;

filter:blur(40px);

animation:
builderGlow 5s infinite alternate;

}

@keyframes builderGlow{

0%{
transform:scale(1);
}

100%{
transform:scale(1.3);
}

}
.field input:hover,
.builder select:hover{

border:
1px solid rgba(217,255,0,.35);

box-shadow:
0 0 18px rgba(217,255,0,.12);

transition:.3s;

}
.builder input{

width:100%;

padding:14px;

border-radius:14px;

background:#0d0d0d;

color:white;

border:1px solid rgba(217,255,0,.18);

outline:none;

box-sizing:border-box;

}
.fixed-area{
display:none;
}

.proxy-list{
display:none;
margin-top:16px;
max-height:180px;
overflow-y:auto;
background:#050505;
border:1px solid rgba(217,255,0,.25);
border-radius:14px;
padding:12px;
font-family:monospace;
color:#d9ff00;
}

.proxy-item{
padding:8px;
border-bottom:1px solid rgba(217,255,0,.08);
}

.proxy-item:last-child{
border-bottom:none;
}
.next-port{

margin-top:14px;

color:#d9ff00;

font-size:14px;

opacity:.75;

font-family:monospace;

}
.proxy-list{

display:flex;
flex-direction:column;

gap:10px;

}

.proxy-item{

background:
rgba(255,255,255,.02);

padding:14px;

border-radius:12px;

border:
1px solid rgba(217,255,0,.08);

transition:.3s;

word-break:break-all;

}

.proxy-item:hover{

transform:translateX(4px);

border:
1px solid rgba(217,255,0,.22);

background:
rgba(217,255,0,.04);

box-shadow:
0 0 18px rgba(217,255,0,.08);

}
.config-grid{
display:grid;
grid-template-columns:
1fr 1fr 1fr 1.4fr;
gap:16px;
align-items:flex-start;
}

@media(max-width:768px){
.config-grid{
grid-template-columns:1fr;
}
}
select{

font-size:15px;

font-family:
'Segoe UI Emoji',
'Apple Color Emoji',
sans-serif;

}
.country-select-wrap{

position:relative;

}

#countryFlag{

position:absolute;

left:14px;
top:50%;

transform:translateY(-50%);

font-size:18px;

z-index:999;

pointer-events:none;

}

#country{

padding-left:42px;

}
.config-grid input{

height:49px;

}
.input-copy{

position:relative;

width:100%;

}

.input-copy input{

width:100%;

padding-right:40px !important;

box-sizing:border-box;

}

.mini-copy{

all:unset;

position:absolute;

right:12px;
top:50%;

transform:translateY(-50%);

cursor:pointer;

font-size:15px;

color:#d9ff00;

display:flex;
align-items:center;
justify-content:center;

z-index:10;

}
.mini-copy{

all:unset;

position:absolute;

right:10px;
top:50%;

transform:translateY(-50%);

width:24px;
height:24px;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

font-size:14px;

color:#d9ff00;

z-index:5;

}
.input-copy{
  position:relative;
  width:100%;
}

.input-copy input{
  width:100%;
  padding-right:42px !important;
  box-sizing:border-box;
}

.builder button.mini-copy{
  all:unset !important;
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  width:24px !important;
  height:24px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  cursor:pointer !important;
  font-size:15px !important;
  color:#d9ff00 !important;

  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
  padding:0 !important;
  margin:0 !important;
}
.buy-gb-btn{
  margin-top:14px;
  padding:10px 14px;
  border:none;
  border-radius:12px;
  background:rgba(217,255,0,.12);
  color:#d9ff00;
  font-weight:bold;
  font-size:13px;
  cursor:pointer;
  width:auto;
  box-shadow:none;
}

.buy-gb-btn:hover{
  background:rgba(217,255,0,.22);
  box-shadow:0 0 18px rgba(217,255,0,.18);
}
@media(max-width:768px){

  body{
    overflow:auto;
  }

  .dashboard{
    flex-direction:column;
    height:auto;
  }

  .sidebar{
    width:100%;
    padding:14px;
    display:flex;
    align-items:center;
    gap:10px;
    overflow-x:auto;
  }

  .logo{
    margin-bottom:0;
    min-width:max-content;
    font-size:18px;
  }

  .menu-item{
    margin-bottom:0;
    min-width:max-content;
    padding:12px 14px;
    font-size:13px;
  }

  .content{
    padding:14px;
  }

  .cards{
    flex-direction:column;
  }

  .card{
    max-width:100%;
    min-width:100%;
    box-sizing:border-box;
  }

  .config-grid{
    grid-template-columns:1fr;
  }

  .proxy-fields{
    grid-template-columns:1fr;
  }

  .builder{
    padding:18px;
  }

  .gb{
    font-size:26px;
  }

  .proxy-box{
    font-size:12px;
  }

}
.sidebar{
  display:none;
}

.content{
  width:100%;
}
.topbar{

display:flex;

align-items:center;
justify-content:space-between;

margin-bottom:30px;

gap:16px;

}

.top-logo{

font-size:24px;

font-weight:bold;

color:#d9ff00;

text-shadow:
0 0 18px rgba(217,255,0,.35);

}

.back-store-btn{

all:unset;

padding:12px 18px;

border-radius:14px;

background:
rgba(217,255,0,.10);

border:
1px solid rgba(217,255,0,.18);

color:#d9ff00;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.back-store-btn:hover{

background:
rgba(217,255,0,.18);

transform:translateY(-2px);

box-shadow:
0 0 20px rgba(217,255,0,.14);

}
#loginScreen{

position:fixed;

inset:0;

background:#050505;

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

}

.login-box{

width:100%;
max-width:420px;

background:
rgba(18,18,18,.55);

border:
1px solid rgba(217,255,0,.15);

backdrop-filter:blur(18px);

padding:30px;

border-radius:24px;

box-shadow:
0 0 30px rgba(217,255,0,.06);

display:flex;
flex-direction:column;

gap:18px;

}

.login-logo{

font-size:28px;

font-weight:bold;

color:#d9ff00;

text-align:center;

text-shadow:
0 0 18px rgba(217,255,0,.35);

}

.login-box h2{

margin:0;

text-align:center;

font-size:22px;

}

.login-box input{

padding:16px;

border-radius:14px;

border:
1px solid rgba(217,255,0,.18);

background:#0d0d0d;

color:white;

outline:none;

font-size:14px;

}

#loginBtn{

all:unset;

padding:16px;

border-radius:14px;

background:
linear-gradient(45deg,#d9ff00,#a6ff00);

color:#000;

font-weight:bold;

text-align:center;

cursor:pointer;

}
#dashboardScreen{
  display:none;
}
.login-subtitle{
  margin:0;
  text-align:center;
  color:#aaa;
  font-size:14px;
  line-height:1.5;
}
.login-box{
  animation:loginFade .4s ease;
}

@keyframes loginFade{

  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}
#dashboardScreen{
  animation:dashboardFade .4s ease;
}

@keyframes dashboardFade{

  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}
.logout-btn{

all:unset;

padding:12px 18px;

border-radius:14px;

background:
rgba(255,80,80,.10);

border:
1px solid rgba(255,80,80,.18);

color:#ff6b6b;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.logout-btn:hover{

background:
rgba(255,80,80,.18);

transform:translateY(-2px);

box-shadow:
0 0 20px rgba(255,80,80,.12);

}
.top-actions{

display:flex;

align-items:center;

gap:12px;

}
.threads-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
  width:100%;
}

.threads-row input{
  flex:1;
  min-width:80px;
}

.threads-row input{
  flex:1;
}

.save-threads-btn{
  height:42px;
  all:unset;
  padding:0 12px;
  border-radius:12px;
  background:rgba(217,255,0,.12);
  border:1px solid rgba(217,255,0,.2);
  color:#d9ff00;
  font-size:12px;
  font-weight:bold;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.save-threads-btn:hover{
  background:rgba(217,255,0,.22);
}
.threads-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
}

.threads-row input{
  flex:1 !important;
  min-width:80px !important;
  height:49px !important;
  box-sizing:border-box !important;
}

.save-threads-btn{
  all:unset !important;
  height:49px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  background:rgba(217,255,0,.12) !important;
  border:1px solid rgba(217,255,0,.2) !important;
  color:#d9ff00 !important;
  font-size:12px !important;
  font-weight:bold !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  margin:0 !important;
}
.custom-country{
  position:relative;
}

.selected-country{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
  z-index:5;
}

.selected-country img{
  width:20px;
  height:14px;
  border-radius:2px;
  object-fit:cover;
}

.selected-country span{
  color:white;
  font-size:14px;
}

#country{
  padding-left:90px;
}
#selectedCountryName{
  display:none;
}

#country{
  padding-left:48px !important;
}
#testProxyBtn{

  margin-top:12px;

  width:100%;

  padding:15px;

  border:none;

  border-radius:14px;

  background:
  rgba(0,140,255,.12);

  border:
  1px solid rgba(0,140,255,.22);

  color:#4db8ff;

  font-weight:bold;

  cursor:pointer;

  transition:.3s;

}

#testProxyBtn:hover{

  background:
  rgba(0,140,255,.20);

  box-shadow:
  0 0 20px rgba(0,140,255,.18);

}

.proxy-test-result{

  margin-top:14px;

  padding:14px;

  border-radius:14px;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid rgba(255,255,255,.06);

  color:#ccc;

  line-height:1.6;

  font-size:14px;

  display:none;

}
.usage-chart{

  margin-bottom:24px;

  background:
  rgba(18,18,18,.55);

  backdrop-filter:blur(18px);

  border:
  1px solid rgba(217,255,0,.15);

  border-radius:24px;

  padding:24px;

  box-shadow:
  0 0 25px rgba(217,255,0,.05);

}

.chart-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:18px;

}

.chart-header h2{

  margin:0;

  color:#d9ff00;

}

#usagePercent{

  color:#d9ff00;

  font-weight:bold;

}

.chart-bar{

  width:100%;

  height:18px;

  background:
  rgba(255,255,255,.05);

  border-radius:999px;

  overflow:hidden;

  margin-bottom:20px;

}

.chart-fill{

  width:0%;

  height:100%;

  border-radius:999px;

  background:
  linear-gradient(
    90deg,
    #d9ff00,
    #a6ff00
  );

  box-shadow:
  0 0 25px rgba(217,255,0,.35);

  transition:
width 1.2s cubic-bezier(.22,1,.36,1),
background .3s;

}

.chart-info{

  display:flex;

  justify-content:space-between;

  gap:20px;

}

.chart-info span{

  display:block;

  color:#888;

  margin-bottom:6px;

}

.chart-info strong{

  color:white;

  font-size:18px;

}
.usage-chart{
  height:460px;
}

#usageChart{
  margin-top:20px;
  height:220px !important;
  max-height:220px !important;
}
#usageChart{
  margin-top:12px;
}
#usageChart{
  padding-bottom:10px;
}
.usage-stats{

  display:flex;

  gap:18px;

  margin-top:20px;

}

.usage-stat{

  flex:1;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid rgba(217,255,0,.08);

  border-radius:16px;

  padding:18px;

}

.usage-stat span{

  display:block;

  color:#777;

  margin-bottom:8px;

  font-size:13px;

}

.usage-stat strong{

  color:#d9ff00;

  font-size:24px;

}
.usage-loading{
  display:none;
  color:#888;
  font-size:12px;
  animation:pulseLoading 1s infinite alternate;
}

@keyframes pulseLoading{
  from{
    opacity:.35;
  }

  to{
    opacity:1;
  }
}
.chart-filters{

  display:flex;

  gap:10px;

}

.chart-filter{

  all:unset;

  padding:8px 14px;

  border-radius:12px;

  background:
  rgba(255,255,255,.03);

  border:
  1px solid rgba(217,255,0,.08);

  color:#888;

  font-size:13px;

  cursor:pointer;

  transition:.3s;

}

.chart-filter:hover{

  border:
  1px solid rgba(217,255,0,.25);

  color:#d9ff00;

}

.chart-filter.active{

  background:
  rgba(217,255,0,.12);

  border:
  1px solid rgba(217,255,0,.22);

  color:#d9ff00;

  box-shadow:
  0 0 18px rgba(217,255,0,.08);

}
/* ===== AJUSTES FINAIS PREMIUM ===== */

.card{
  opacity:0;
  transform:translateY(20px);
  animation:cardFade .6s ease forwards;
}

.card:nth-child(2){
  animation-delay:.1s;
}

.card:nth-child(3){
  animation-delay:.2s;
}

.card:nth-child(4){
  animation-delay:.3s;
}

@keyframes cardFade{
  from{
    opacity:0;
    transform:translateY(20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

.usage-chart{
  animation:sectionFade .7s ease forwards;
}

.builder{
  animation:sectionFade .8s ease forwards;
}

@keyframes sectionFade{
  from{
    opacity:0;
    transform:translateY(18px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

button,
.chart-filter,
.card,
.proxy-item{
  transition:
  transform .25s ease,
  box-shadow .25s ease,
  border .25s ease,
  background .25s ease;
}

.card:hover,
.builder:hover,
.usage-chart:hover{
  border-color:rgba(217,255,0,.22);
}

.chart-fill{
  transition:
  width 1.2s cubic-bezier(.22,1,.36,1),
  background .3s;
}

.usage-stat{
  transition:.3s;
}

.usage-stat:hover{
  transform:translateY(-3px);
  border-color:rgba(217,255,0,.22);
  box-shadow:0 0 20px rgba(217,255,0,.08);
}

#testProxyBtn,
.back-store-btn,
.logout-btn,
.buy-gb-btn,
.save-threads-btn{
  transition:.3s;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(217,255,0,.10), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(0,140,255,.08), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(166,255,0,.08), transparent 32%);
  filter:blur(35px);
  animation:meshMove 10s ease-in-out infinite alternate;
}

@keyframes meshMove{
  from{
    transform:scale(1) translate(0,0);
  }

  to{
    transform:scale(1.15) translate(-25px,20px);
  }
}
.particles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.particles span{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#d9ff00;
  box-shadow:0 0 18px rgba(217,255,0,.8);
  opacity:.45;
  animation:particleFloat 12s infinite linear;
}

.particles span:nth-child(1){ left:12%; top:80%; animation-delay:0s; }
.particles span:nth-child(2){ left:28%; top:70%; animation-delay:2s; }
.particles span:nth-child(3){ left:46%; top:85%; animation-delay:4s; }
.particles span:nth-child(4){ left:65%; top:75%; animation-delay:1s; }
.particles span:nth-child(5){ left:78%; top:88%; animation-delay:3s; }
.particles span:nth-child(6){ left:90%; top:72%; animation-delay:5s; }

@keyframes particleFloat{
  0%{
    transform:translateY(0) scale(1);
    opacity:.15;
  }

  50%{
    opacity:.65;
  }

  100%{
    transform:translateY(-100vh) scale(1.8);
    opacity:0;
  }
}
.builder,
.usage-chart,
.card,
.login-box{

  background:
  rgba(18,18,18,.42) !important;

  backdrop-filter:
  blur(24px) saturate(180%) !important;

  -webkit-backdrop-filter:
  blur(24px) saturate(180%) !important;

  border:
  1px solid rgba(255,255,255,.06) !important;

  box-shadow:
  0 8px 40px rgba(0,0,0,.35),
  0 0 30px rgba(217,255,0,.04) !important;

}
.card:hover,
.builder:hover,
.usage-chart:hover{

  transform:translateY(-6px) !important;

  border:
  1px solid rgba(217,255,0,.22) !important;

  box-shadow:
  0 0 35px rgba(217,255,0,.12),
  0 8px 40px rgba(0,0,0,.35) !important;

}
.mouse-glow{
  position:fixed;
  width:280px;
  height:280px;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  background:
  radial-gradient(
    circle,
    rgba(217,255,0,.10) 0%,
    rgba(217,255,0,.04) 35%,
    transparent 70%
  );

  transform:
  translate(-50%,-50%);

  filter:blur(18px);

  transition:
  left .08s linear,
  top .08s linear;
}
.login-box{

  animation:
  loginFloat 4s ease-in-out infinite,
  loginFade .5s ease;

}

@keyframes loginFloat{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-6px);
  }

  100%{
    transform:translateY(0px);
  }

}

.login-logo{

  animation:
  logoPulse 2.5s infinite alternate;

}

@keyframes logoPulse{

  from{
    text-shadow:
    0 0 12px rgba(217,255,0,.35);
  }

  to{
    text-shadow:
    0 0 28px rgba(217,255,0,.85);
  }

}
@media(max-width:768px){

  .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
    z-index:20;
    padding:12px;
    margin:-14px -14px 20px -14px;
    background:rgba(5,5,5,.72);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(217,255,0,.10);
  }

  .top-logo{
    font-size:18px;
  }

  .top-actions{
    gap:8px;
  }

  .back-store-btn,
  .logout-btn{
    padding:10px 12px;
    font-size:12px;
    border-radius:12px;
  }

  .cards{
    gap:14px;
  }

  .usage-chart{
    height:auto !important;
    min-height:460px;
  }

  .chart-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .chart-filters{
    width:100%;
    overflow-x:auto;
    padding-bottom:4px;
  }

  .chart-filter{
    min-width:max-content;
  }

  .usage-stats{
    flex-direction:column;
  }

  .builder{
    margin-top:18px;
  }
}
.content{
  overflow:auto;
}
.skeleton-active .card,
.skeleton-active .usage-chart,
.skeleton-active .builder{
  position:relative;
  overflow:hidden;
}

.skeleton-active .card::after,
.skeleton-active .usage-chart::after,
.skeleton-active .builder::after{
  content:"";
  position:absolute;
  inset:0;
  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );
  animation:skeletonMove 1.2s infinite;
  pointer-events:none;
}

@keyframes skeletonMove{
  from{
    transform:translateX(-100%);
  }

  to{
    transform:translateX(100%);
  }
}
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);
  display:none;

.payment-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.payment-box{
  width:420px;
  background:rgba(15,15,15,.95);
  border:1px solid rgba(217,255,0,.15);
  border-radius:24px;
  padding:30px;
  box-shadow:
  0 0 40px rgba(217,255,0,.08);
}

.payment-box h2{
  color:#d9ff00;
  margin-bottom:20px;
  text-align:center;
}

.gb-options{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.gb-option{
  background:#151515;
  border:1px solid rgba(217,255,0,.12);
  color:#fff;
  padding:14px;
  border-radius:14px;
  cursor:pointer;
  transition:.2s;
}

.gb-option:hover{
  border-color:#d9ff00;
  transform:translateY(-2px);
}

#pixArea{
  margin-top:25px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

#pixQr{
  border-radius:14px;
  background:#fff;
  padding:10px;
}

#pixCode{
  width:100%;
  height:100px;
  background:#101010;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  padding:10px;
  resize:none;
}

#copyPixBtn{
  width:100%;
  background:#d9ff00;
  color:#000;
  border:none;
  border-radius:12px;
  padding:14px;
  font-weight:700;
  cursor:pointer;
}
.payment-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:99999;
}

.payment-box{
  width:650px;
  max-width:92%;

  background:#050505;
  border:1px solid rgba(217,255,0,.25);

  border-radius:24px;

  padding:35px;

  position:relative;

  box-shadow:
  0 0 40px rgba(217,255,0,.08);
}

.payment-box h2{
  color:#d9ff00;
  text-align:center;
  font-size:38px;
  margin-bottom:10px;
}

.payment-subtitle{
  text-align:center;
  color:#999;
  margin-bottom:35px;
}

.gb-options{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.gb-option{
  background:#0a0a0a;
  border:1px solid rgba(217,255,0,.15);

  border-radius:18px;

  padding:30px 15px;

  cursor:pointer;

  transition:.25s;
}

.gb-option:hover{
  transform:translateY(-4px);
  border-color:#d9ff00;
  box-shadow:0 0 25px rgba(217,255,0,.15);
}

.gb-option strong{
  display:block;
  color:#d9ff00;
  font-size:32px;
  margin-bottom:10px;
}

.gb-option span{
  color:#fff;
  font-size:28px;
  font-weight:700;
}

.payment-close{
  position:absolute;
  top:18px;
  right:18px;

  width:42px;
  height:42px;

  border-radius:50%;
  border:1px solid rgba(217,255,0,.3);

  background:transparent;
  color:#d9ff00;
z-index: 99999;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;

  font-size:28px;
  cursor:pointer;
}

#pixArea{
  margin-top:35px;
  text-align:center;
}

#pixQr{
  border-radius:16px;
  margin-bottom:20px;
}

#pixCode{
  width:100%;
  height:110px;

  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.08);

  border-radius:14px;

  color:#fff;

  padding:15px;
  resize:none;
}

#copyPixBtn{
  margin-top:15px;

  width:100%;
  height:55px;

  border:none;
  border-radius:14px;

  background:#d9ff00;
  color:#000;

  font-size:18px;
  font-weight:700;

  cursor:pointer;
}
.gb-option.premium{
  border-color:#d9ff00;
  box-shadow:0 0 25px rgba(217,255,0,.12);
}

.gb-option small{
  display:block;
  color:#d9ff00;
  font-size:12px;
  margin-bottom:10px;
}
.gb-option.disabled{
  opacity:.35;
  filter:grayscale(1);
  cursor:not-allowed !important;
  pointer-events:none;
  border-color:#444 !important;
  box-shadow:none !important;
}

.gb-option.disabled:hover{
  transform:none !important;
  border-color:#444 !important;
  box-shadow:none !important;
}
.payment-modal{
  display:none !important;
}

.payment-modal.open{
  display:flex !important;
}

/* ===== VISUAL 01 - ESCALA GERAL DO PAINEL ===== */

.dashboard{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px 28px 56px !important;
}

.stats-grid,
.cards-grid,
.dashboard-cards{
  gap: 16px !important;
}

.card,
.stat-card,
.proxy-card,
.usage-card,
.generator-card{
  border-radius: 18px !important;
}

.stat-card{
  min-height: 118px !important;
  padding: 22px !important;
}

.stat-card h3,
.stat-card .card-title{
  font-size: 14px !important;
}

.stat-card strong,
.stat-card .card-value{
  font-size: 24px !important;
}

.section,
.generator-section,
.usage-section{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body{
  overflow-x: hidden;
}

/* ===== VISUAL 01 - PAINEL CENTRALIZADO REAL ===== */

.content{
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 24px 28px 60px !important;
}

.cards,
.usage-chart,
.builder{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.cards{
  gap: 16px !important;
}

.card{
  min-height: 118px !important;
  padding: 22px !important;
}

.card .gb{
  font-size: 24px !important;
}
html,
body{
  overflow-x: hidden;
  overflow-y: auto;
}

.content{
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
}

/* FORÇA SCROLL NO BODY, NÃO NO PAINEL */
html,
body{
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.dashboard,
.content{
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
/* ===== COMPACTAÇÃO PREMIUM ===== */

.content{
  max-width: 1020px !important;
}

.cards{
  gap: 14px !important;
}

.card{
  min-height: 95px !important;
  padding: 18px !important;
  border-radius: 18px !important;
}

.card h2{
  font-size: 15px !important;
  margin-bottom: 6px !important;
}

.gb{
  font-size: 18px !important;
  margin-top: 8px !important;
}

.buy-gb-btn{
  margin-top: 10px !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
}

.usage-chart{
  padding: 18px !important;
}

.builder{
  padding: 18px !important;
}

.topbar{
  margin-bottom: 18px !important;
}

.chart-header{
  margin-bottom: 12px !important;
}
/* ===== COMPACTAÇÃO REAL PELO HTML ATUAL ===== */

#dashboardScreen .content{
  max-width: 980px !important;
  padding: 18px 22px 44px !important;
}

#dashboardScreen .cards{
  gap: 12px !important;
  margin-bottom: 14px !important;
}

#dashboardScreen .card{
  min-height: 82px !important;
  padding: 14px 16px !important;
}

#dashboardScreen .card h2{
  font-size: 13px !important;
  margin: 0 0 6px !important;
}

#dashboardScreen .gb{
  font-size: 17px !important;
  margin-top: 4px !important;
}

#dashboardScreen .usage-chart{
  padding: 16px !important;
  margin-top: 14px !important;
}

#dashboardScreen .builder{
  padding: 16px !important;
  margin-top: 14px !important;
}
/* ===== COMPACTAÇÃO DO GERADOR ===== */

#dashboardScreen .builder{
  max-width: 980px !important;
  padding: 14px 16px !important;
}

#dashboardScreen .builder h2{
  font-size: 16px !important;
  margin-bottom: 14px !important;
}

#dashboardScreen .config-grid{
  gap: 10px !important;
}

#dashboardScreen .builder label{
  font-size: 11px !important;
  margin-bottom: 5px !important;
}

#dashboardScreen select,
#dashboardScreen input,
#dashboardScreen textarea{
  min-height: 34px !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

#dashboardScreen .save-threads-btn,
#dashboardScreen .generate-btn{
  min-height: 34px !important;
  font-size: 11px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
}

#dashboardScreen .proxy-box,
#dashboardScreen .proxy-list{
  font-size: 11px !important;
  border-radius: 12px !important;
}
/* ===== GERADOR - AJUSTE FINO ===== */

#dashboardScreen .threads-row{
  display: grid !important;
  grid-template-columns: 1fr 120px !important;
  gap: 8px !important;
  align-items: end !important;
}

#dashboardScreen #threadsInput,
#dashboardScreen input[type="number"]{
  height: 34px !important;
  min-height: 34px !important;
}

#dashboardScreen .save-threads-btn{
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  font-size: 10px !important;
}

#dashboardScreen .proxy-fields{
  gap: 10px !important;
}

#dashboardScreen .field label{
  font-size: 10px !important;
}

#dashboardScreen .input-copy input{
  height: 32px !important;
  min-height: 32px !important;
  font-size: 11px !important;
}

#dashboardScreen .mini-copy{
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}

#dashboardScreen #copyBtn,
#dashboardScreen #testProxyBtn{
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}
/* ===== GERADOR - REFINO PREMIUM ===== */

#dashboardScreen .builder{
  background: rgba(12, 14, 12, 0.72) !important;
  border: 1px solid rgba(217,255,0,0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 18px 45px rgba(0,0,0,0.28) !important;
}

#dashboardScreen #proxyBox{
  min-height: 42px !important;
  padding: 10px 12px !important;
  font-size: 11px !important;
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(217,255,0,0.18) !important;
}

#dashboardScreen .status.online{
  width: fit-content !important;
  padding: 8px 12px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}

#dashboardScreen #copyBtn{
  background: linear-gradient(135deg, #d9ff00, #9cff00) !important;
  color: #061000 !important;
  font-weight: 800 !important;
}

#dashboardScreen #testProxyBtn{
  background: rgba(0,160,255,0.14) !important;
  border: 1px solid rgba(0,180,255,0.22) !important;
  color: #8fe8ff !important;
}
/* ===== LISTA DE PROXIES FIXAS ===== */

#dashboardScreen .proxy-list{
  max-height: 170px !important;
  min-height: 170px !important;
  padding: 8px !important;
  font-size: 10px !important;
  overflow-y: auto !important;
}

#dashboardScreen .proxy-list div{
  padding: 4px 6px !important;
  margin-bottom: 4px !important;
  border-radius: 8px !important;
}
/* ===== GERADOR COMPACTO ===== */

#dashboardScreen .builder{
  padding: 18px !important;
}

#dashboardScreen .builder label{
  font-size: 10px !important;
  margin-bottom: 4px !important;
}

#dashboardScreen .builder input,
#dashboardScreen .builder select{
  height: 34px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

#dashboardScreen .proxy-fields{
  gap: 10px !important;
}

#dashboardScreen .field{
  margin-bottom: 8px !important;
}

#dashboardScreen .input-copy{
  height: 34px !important;
}

#dashboardScreen #copyBtn,
#dashboardScreen #testProxyBtn{
  height: 36px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

#dashboardScreen .save-threads-btn{
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 10px !important;
}

#dashboardScreen .threads-row input{
  height: 34px !important;
}
/* ===== PROXY ROTATIVA - CAMPO UMA LINHA ===== */

#dashboardScreen #proxyBox{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  font-size: 11px !important;
}
#dashboardScreen #proxyBox{
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 4px 10px !important;
  font-size: 10px !important;
}
/* ===== PROXY FIXA - LISTA AUTO AJUSTÁVEL ===== */

#dashboardScreen #proxyList{
  min-height: 34px !important;
  max-height: 260px !important;
  height: auto !important;
  overflow-y: auto !important;
  padding: 8px !important;
}

#dashboardScreen #proxyList .proxy-item,
#dashboardScreen #proxyList div{
  min-height: 24px !important;
  padding: 5px 8px !important;
  margin-bottom: 4px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}
/* ===== BOTÕES PREMIUM ===== */

#dashboardScreen button{
  transition: all .22s ease !important;
}

#dashboardScreen #copyBtn,
#dashboardScreen #testProxyBtn,
#dashboardScreen .save-threads-btn,
#dashboardScreen #generateBtn,
#dashboardScreen #resetPortsBtn{
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
}

#dashboardScreen #copyBtn,
#dashboardScreen #generateBtn{
  box-shadow: 0 0 12px rgba(217,255,0,.12) !important;
}

#dashboardScreen #copyBtn:hover,
#dashboardScreen #generateBtn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 0 18px rgba(217,255,0,.18) !important;
}

#dashboardScreen #testProxyBtn,
#dashboardScreen #resetPortsBtn{
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}
/* ===== BOTÕES FIXA - TAMANHO CORRETO ===== */

#dashboardScreen #generateBtn,
#dashboardScreen #resetPortBtn{
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  border-radius: 10px !important;
}
#dashboardScreen #generateBtn{
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
}
#dashboardScreen #fixedGenerateBtn{
  height: 34px !important;
  min-height: 34px !important;
  line-height: 34px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  border-radius: 10px !important;
}
#dashboardScreen button#fixedGenerateBtn{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
#dashboardScreen #sessionBtn{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
}
/* ===== GRÁFICO - AJUSTE FINO ===== */

#dashboardScreen .usage-chart{
  padding: 14px 16px !important;
}

#dashboardScreen .chart-header h2,
#dashboardScreen .usage-chart h2{
  font-size: 15px !important;
  margin: 0 !important;
}

#dashboardScreen .chart-filter{
  height: 24px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  border-radius: 999px !important;
}

#dashboardScreen .chart-info,
#dashboardScreen .chart-info span,
#dashboardScreen .chart-info small{
  font-size: 10px !important;
}

#dashboardScreen .chart-bar{
  height: 8px !important;
  border-radius: 999px !important;
}

#dashboardScreen .usage-stats{
  gap: 10px !important;
  margin-top: 12px !important;
}

#dashboardScreen .usage-stat{
  min-height: 54px !important;
  padding: 10px 12px !important;
}

#dashboardScreen .usage-stat span{
  font-size: 10px !important;
}

#dashboardScreen .usage-stat strong{
  font-size: 15px !important;
}
#dashboardScreen .usage-chart{
  padding-bottom: 10px !important;
}

#dashboardScreen .usage-stats{
  margin-bottom: 0 !important;
}

#dashboardScreen .usage-stat{
  min-height: 48px !important;
}
/* ===== GRÁFICO - REMOVER ESPAÇO SOBRANDO EMBAIXO ===== */

#dashboardScreen .usage-stats{
  margin-top: 8px !important;
  margin-bottom: -10px !important;
}

#dashboardScreen .usage-stat{
  min-height: 42px !important;
  height: 42px !important;
  padding: 8px 12px !important;
}

#dashboardScreen .usage-chart{
  padding-bottom: 6px !important;
}
#dashboardScreen .usage-stat{
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 12px !important;
}

#dashboardScreen .usage-chart{
  padding-bottom: 0 !important;
}
#dashboardScreen .usage-chart{
  height: auto !important;
  min-height: 0 !important;
padding: 14px 16px 18px !important;
}

#dashboardScreen #usageChart{
height: 205px !important;
max-height: 205px !important;
}
#dashboardScreen .usage-chart{
  margin-bottom: 12px !important;
}

#dashboardScreen .builder{
  margin-top: 12px !important;
}
/* ===== SIDEBAR - REMOVER TOPBAR ===== */

#dashboardScreen .topbar{
  display: none !important;
}

#dashboardScreen .content{
  padding-top: 18px !important;
}
/* ===== SIDEBAR FOOTER ===== */

.sidebar-footer{
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-link,
.sidebar-logout{
  width: 100%;
  border: none;
  text-decoration: none;
  background: rgba(217,255,0,.08);
  border: 1px solid rgba(217,255,0,.12);
  color: #d9ff00;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: .25s;
  text-align: center;
}

.sidebar-link:hover,
.sidebar-logout:hover{
  background: rgba(217,255,0,.14);
  transform: translateY(-1px);
}
/* ===== FORÇAR SIDEBAR FOOTER VISÍVEL ===== */

#dashboardScreen .sidebar{
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

#dashboardScreen .sidebar-footer{
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px 10px 20px !important;
}

#dashboardScreen .sidebar-link,
#dashboardScreen .sidebar-logout{
  display: block !important;
}
/* ===== SIDEBAR PREMIUM COMPACTA ===== */

#dashboardScreen .sidebar{
  width: 150px !important;
  min-width: 150px !important;
  padding: 18px 12px !important;
  background: rgba(3,6,5,.62) !important;
  border-right: 1px solid rgba(217,255,0,.08) !important;
}

#dashboardScreen .sidebar .logo{
  font-size: 14px !important;
  line-height: 1.15 !important;
  margin-bottom: 22px !important;
}

#dashboardScreen .menu-item{
  font-size: 11px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}

#dashboardScreen .sidebar-footer{
  margin-top: auto !important;
  padding: 14px 0 0 !important;
}

#dashboardScreen .sidebar-link,
#dashboardScreen .sidebar-logout{
  font-size: 11px !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
}
/* ===== SIDEBAR BALÃO FIXA ===== */

#dashboardScreen .sidebar{
  position: fixed !important;
  top: 22px !important;
  left: 22px !important;
  bottom: 22px !important;
  width: 190px !important;
  min-width: 190px !important;
  padding: 24px 18px !important;
  border-radius: 28px !important;
  background: rgba(7, 10, 7, .78) !important;
  border: 1px solid rgba(217,255,0,.28) !important;
  box-shadow: 0 0 35px rgba(217,255,0,.08) !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 50 !important;
}

#dashboardScreen .content{
  margin-left: 250px !important;
}

.sidebar-brand{
  text-align: center !important;
  margin-bottom: 34px !important;
}

.sidebar-logo{
  font-size: 42px !important;
  margin-bottom: 12px !important;
}

.sidebar-name{
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #d9ff00 !important;
}

.sidebar-menu{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.sidebar-footer{
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-top: 22px !important;
  border-top: 1px solid rgba(217,255,0,.1) !important;
}

.sidebar-item{
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.sidebar-item:hover{
  background: rgba(217,255,0,.08) !important;
  color: #d9ff00 !important;
}
/* ===== AJUSTE SIDEBAR BALÃO MENOR ===== */

#dashboardScreen .sidebar{
  top: 70px !important;
  left: calc(50% - 610px) !important;
  bottom: auto !important;
  width: 135px !important;
  min-width: 135px !important;
  height: 520px !important;
  padding: 18px 14px !important;
  border-radius: 24px !important;
}

#dashboardScreen .content{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 980px !important;
  padding-top: 22px !important;
}

.sidebar-logo{
  font-size: 30px !important;
  margin-bottom: 8px !important;
}

.sidebar-name{
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.sidebar-brand{
  margin-bottom: 24px !important;
}

.sidebar-item{
  font-size: 10px !important;
  padding: 9px 8px !important;
}

.sidebar-footer{
  padding-top: 18px !important;
}
/* ===== SIDEBAR BALÃO - ALTURA DO GRÁFICO ===== */

#dashboardScreen .sidebar{
  top: 96px !important;
  left: calc(50% - 610px) !important;
  width: 128px !important;
  min-width: 128px !important;
  height: 360px !important;
  bottom: auto !important;
  padding: 16px 12px !important;
  border-radius: 22px !important;
}

.sidebar-brand{
  margin-bottom: 20px !important;
}

.sidebar-logo{
  font-size: 26px !important;
  margin-bottom: 6px !important;
}

.sidebar-name{
  font-size: 10px !important;
}

.sidebar-menu{
  gap: 8px !important;
}

.sidebar-item{
  font-size: 9px !important;
  padding: 8px 7px !important;
}

.sidebar-footer{
  margin-top: auto !important;
  gap: 8px !important;
  padding-top: 12px !important;
}
/* ===== RESET SIDEBAR ===== */

#dashboardScreen{
  display: flex !important;
  justify-content: center !important;
}

#dashboardScreen .content{
  width: 980px !important;
  margin-left: 180px !important;
  padding-top: 40px !important;
}

/* ===== SIDEBAR GM STYLE ===== */

#dashboardScreen .sidebar{
  position: fixed !important;
  left: calc(50% - 650px) !important;
  top: 118px !important;

  width: 118px !important;
  height: 300px !important;

  padding: 14px 10px !important;

  background: rgba(5,8,7,.88) !important;

  border: 1px solid rgba(217,255,0,.14) !important;
  border-radius: 18px !important;

  display: flex !important;
  flex-direction: column !important;

  box-shadow: 0 0 20px rgba(217,255,0,.05) !important;

  z-index: 1000 !important;
}

/* ===== LOGO ===== */

.sidebar-brand{
  text-align: center !important;
  margin-bottom: 18px !important;
}

.sidebar-logo{
  font-size: 22px !important;
  margin-bottom: 4px !important;
}

.sidebar-name{
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #d9ff00 !important;
  line-height: 1.2 !important;
}

/* ===== MENU ===== */

.sidebar-menu{
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.sidebar-footer{
  margin-top: auto !important;

  display: flex !important;
  flex-direction: column !important;

  gap: 6px !important;

  padding-top: 12px !important;

  border-top: 1px solid rgba(217,255,0,.08) !important;
}

.sidebar-item{
  width: 100% !important;

  background: transparent !important;
  border: none !important;

  color: #fff !important;

  text-decoration: none !important;

  padding: 8px 8px !important;

  border-radius: 10px !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  text-align: left !important;

  cursor: pointer !important;

  transition: .2s !important;
}

.sidebar-item:hover{
  background: rgba(217,255,0,.08) !important;
  color: #d9ff00 !important;
}
/* FUNDO PREMIUM - LOJA DO CABRA */
body {
  background:
    radial-gradient(circle at 18% 28%, rgba(160, 255, 0, 0.14), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(0, 255, 170, 0.08), transparent 30%),
    linear-gradient(135deg, #050705 0%, #080b09 45%, #020303 100%) !important;
}
/* CARDS PREMIUM */

.card,
.stats-card,
.graph-card,
.proxy-generator,
.dashboard-card {
  background: rgba(8, 12, 10, 0.72) !important;

  border: 1px solid rgba(180, 255, 0, 0.10) !important;

  backdrop-filter: blur(18px) !important;

  box-shadow:
    0 0 0 1px rgba(180,255,0,0.03),
    0 10px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;

  border-radius: 22px !important;
}
/* ===== PREMIUM FINAL CARDS ===== */

#dashboardScreen .card{
  background: rgba(7, 10, 8, 0.82) !important;

  border: 1px solid rgba(183,255,0,0.14) !important;

  border-radius: 24px !important;

  backdrop-filter: blur(16px) !important;

  box-shadow:
    0 0 0 1px rgba(183,255,0,0.03),
    0 15px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;

  transition: all .25s ease !important;
}

#dashboardScreen .card:hover{
  transform: translateY(-2px) !important;

  border-color: rgba(183,255,0,0.28) !important;

  box-shadow:
    0 0 25px rgba(183,255,0,0.08),
    0 20px 45px rgba(0,0,0,0.55) !important;
}
/* AJUSTE PREMIUM DE FONTE - SEM ALTERAR TAMANHO DOS CARDS */

#dashboardScreen {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

#dashboardScreen h1,
#dashboardScreen h2,
#dashboardScreen h3,
#dashboardScreen label,
#dashboardScreen button,
#dashboardScreen select,
#dashboardScreen input {
  font-family: Inter, Arial, Helvetica, sans-serif !important;
}

#dashboardScreen .card h2 {
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  color: #caff00 !important;
  text-transform: none !important;
}

#dashboardScreen .gb,
#dashboardScreen strong {
  font-weight: 800 !important;
  letter-spacing: .2px !important;
}

#dashboardScreen small,
#dashboardScreen label {
  color: rgba(255,255,255,.62) !important;
}
/* CAMPOS E BOTÕES PREMIUM */

#dashboardScreen input,
#dashboardScreen select {
  background: rgba(5, 8, 7, 0.78) !important;
  border: 1px solid rgba(180,255,0,.18) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

#dashboardScreen input:focus,
#dashboardScreen select:focus {
  outline: none !important;
  border-color: rgba(190,255,0,.65) !important;
  box-shadow: 0 0 0 3px rgba(180,255,0,.08) !important;
}

#dashboardScreen button {
  transition: all .22s ease !important;
}

#dashboardScreen button:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

#dashboardScreen .generate-btn,
#dashboardScreen button[type="submit"] {
  background: linear-gradient(90deg, #b7ff00, #8cff00) !important;
  box-shadow: 0 0 24px rgba(180,255,0,.18) !important;
  border-radius: 14px !important;
}
/* CARDS MAIS PREMIUM */

#dashboardScreen .card,
#dashboardScreen .chart-container,
#dashboardScreen .proxy-generator,
#dashboardScreen .stats-box {
  background:
    linear-gradient(
      180deg,
      rgba(10,14,12,.92),
      rgba(4,7,6,.96)
    ) !important;

  border: 1px solid rgba(180,255,0,.10) !important;

  box-shadow:
    0 10px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03),
    0 0 30px rgba(180,255,0,.04) !important;

  backdrop-filter: blur(10px) !important;
}

/* TÍTULOS */

#dashboardScreen h1,
#dashboardScreen h2,
#dashboardScreen h3 {
  color: #d9ff57 !important;
  letter-spacing: .4px !important;
}

/* TEXTOS */

#dashboardScreen small,
#dashboardScreen span,
#dashboardScreen label {
  color: rgba(255,255,255,.72) !important;
}

/* HOVER NOS CARDS */

#dashboardScreen .card:hover {
  transform: translateY(-2px) !important;

  border-color: rgba(190,255,0,.22) !important;

  box-shadow:
    0 14px 45px rgba(0,0,0,.55),
    0 0 35px rgba(180,255,0,.08) !important;

  transition: .25s ease !important;
}
/* VISUAL PREMIUM REAL - CONTAINERS DO PAINEL */

#dashboardScreen .card,
#dashboardScreen .usage-chart,
#dashboardScreen .builder,
#dashboardScreen .usage-stat {
  background: linear-gradient(180deg, rgba(12,16,14,.94), rgba(5,8,7,.96)) !important;
  border: 1px solid rgba(190,255,0,.16) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 28px rgba(180,255,0,.05) !important;
  backdrop-filter: blur(14px) !important;
}

#dashboardScreen .card,
#dashboardScreen .usage-chart,
#dashboardScreen .builder {
  border-radius: 22px !important;
}

#dashboardScreen .card h2,
#dashboardScreen .usage-chart h2,
#dashboardScreen .builder h2 {
  color: #caff00 !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
}

#dashboardScreen .usage-stat strong,
#dashboardScreen .chart-info strong {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(255,255,255,.14) !important;
}

/* LOGIN PREMIUM FINAL */

#loginScreen{

  background:
  radial-gradient(circle at top,
  rgba(217,255,0,.08),
  transparent 35%),
  #040404 !important;

  overflow:hidden;

}

#loginScreen::before{

  content:"";

  position:absolute;

  width:520px;
  height:520px;

  border-radius:50%;

  background:
  radial-gradient(circle,
  rgba(217,255,0,.12) 0%,
  rgba(217,255,0,.04) 35%,
  transparent 70%);

  top:-180px;
  left:50%;

  transform:translateX(-50%);

  filter:blur(40px);

  pointer-events:none;

}

.login-box{

  position:relative;

  max-width:460px !important;

  padding:38px !important;

  border-radius:28px !important;

  background:
  linear-gradient(
    180deg,
    rgba(20,20,20,.82),
    rgba(8,8,8,.92)
  ) !important;

  border:
  1px solid rgba(217,255,0,.14) !important;

  box-shadow:
  0 0 60px rgba(217,255,0,.08),
  0 25px 80px rgba(0,0,0,.55) !important;

}

.login-logo{

  font-size:34px !important;

  letter-spacing:1px;

  margin-bottom:6px;

}

.login-box h2{

  font-size:28px !important;

  font-weight:800 !important;

  color:#fff;

}

.login-subtitle{

  color:#8e8e8e !important;

  font-size:15px !important;

  line-height:1.7 !important;

  margin-top:-4px;

}

.login-box input{

  height:58px !important;

  padding:0 18px !important;

  border-radius:16px !important;

  background:
  rgba(255,255,255,.03) !important;

  border:
  1px solid rgba(217,255,0,.10) !important;

  font-size:15px !important;

  transition:.25s !important;

}

.login-box input:focus{

  border:
  1px solid rgba(217,255,0,.45) !important;

  box-shadow:
  0 0 20px rgba(217,255,0,.12);

  background:
  rgba(255,255,255,.05) !important;

}

#loginBtn{

  height:58px !important;

  border-radius:16px !important;

  font-size:15px !important;

  letter-spacing:.5px;

  background:
  linear-gradient(
    135deg,
    #d9ff00,
    #b7ff00
  ) !important;

  box-shadow:
  0 0 30px rgba(217,255,0,.18);

  transition:.25s !important;

}

#loginBtn:hover{

  transform:
  translateY(-2px) scale(1.01);

  box-shadow:
  0 0 40px rgba(217,255,0,.28);

}

@media(max-width:768px){

  .login-box{

    width:92% !important;

    padding:26px !important;

    border-radius:24px !important;

  }

  .login-logo{
    font-size:28px !important;
  }

  .login-box h2{
    font-size:24px !important;
  }

}


/* CORRECAO LOGIN PREMIUM */
.login-logo{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:10px !important;
}

.login-logo img{
  width:82px !important;
  height:auto !important;
  filter: drop-shadow(0 0 18px rgba(217,255,0,.55)) !important;
}

.login-logo span{
  color:#d9ff00 !important;
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  text-shadow:0 0 18px rgba(217,255,0,.45) !important;
}

.login-box{
  max-width:500px !important;
  padding:42px !important;
}

.login-box h2{
  margin-top:4px !important;
}


/* BOTAO LOGIN PREMIUM */

#loginBtn{

  position:relative !important;

  overflow:hidden !important;

  font-size:17px !important;

  font-weight:800 !important;

  letter-spacing:1px !important;

  color:#111 !important;

  border:none !important;

  background:
  linear-gradient(
    135deg,
    #d9ff00 0%,
    #c3ff00 45%,
    #e8ff6a 100%
  ) !important;

  box-shadow:
  0 0 25px rgba(217,255,0,.22),
  inset 0 1px 0 rgba(255,255,255,.35) !important;

}

#loginBtn::before{

  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:70%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.28),
    transparent
  );

  transform:skewX(-25deg);

  transition:.7s;

}

#loginBtn:hover::before{
  left:140%;
}

#loginBtn:hover{

  transform:
  translateY(-3px)
  scale(1.01) !important;

  box-shadow:
  0 0 40px rgba(217,255,0,.35),
  0 10px 30px rgba(217,255,0,.15) !important;

}

#loginBtn:active{

  transform:
  scale(.985) !important;

}

/* INPUT MAIS PREMIUM */

.login-box input{

  font-size:14px !important;

  color:#fff !important;

  background:
  rgba(255,255,255,.025) !important;

  box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.02),
  0 0 18px rgba(0,0,0,.45) !important;

}

.login-box input::placeholder{

  color:#666 !important;

}

/* CARD MAIS PREMIUM */

.login-box{

  backdrop-filter:blur(18px) !important;

  border:
  1px solid rgba(217,255,0,.12) !important;

  box-shadow:
  0 0 80px rgba(217,255,0,.06),
  0 35px 120px rgba(0,0,0,.65) !important;

}


/* LOGIN CYBER BACKGROUND ATRAS DO CARD */
#loginScreen{
  position: fixed !important;
}

#loginScreen::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-48%) !important;

  width:920px !important;
  height:520px !important;

  background:
    linear-gradient(90deg, transparent 0 12%, rgba(217,255,0,.22) 12% 12.5%, transparent 12.5% 18%, rgba(217,255,0,.14) 18% 18.5%, transparent 18.5% 100%),
    linear-gradient(90deg, transparent 0 35%, rgba(217,255,0,.16) 35% 35.4%, transparent 35.4% 52%, rgba(217,255,0,.20) 52% 52.4%, transparent 52.4% 100%),
    radial-gradient(circle at 50% 50%, rgba(217,255,0,.13), transparent 58%),
    repeating-linear-gradient(90deg, rgba(217,255,0,.18) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(0deg, rgba(217,255,0,.10) 0 1px, transparent 1px 18px) !important;

  opacity:.42 !important;
  filter: blur(.2px) drop-shadow(0 0 16px rgba(217,255,0,.28)) !important;
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 42%, transparent 76%) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, #000 42%, transparent 76%) !important;

  pointer-events:none !important;
  z-index:1 !important;
}

#loginScreen::before{
  z-index:0 !important;
}

#loginScreen .bg-particles{
  z-index:2 !important;
}

#loginScreen .login-box{
  z-index:5 !important;
}

/* LINHAS CIRCUITO EXTRAS */
.login-box::before{
  content:"" !important;
  position:absolute !important;
  left:-220px !important;
  top:42% !important;
  width:210px !important;
  height:90px !important;

  background:
    linear-gradient(90deg, transparent, rgba(217,255,0,.55), transparent),
    linear-gradient(135deg, transparent 48%, rgba(217,255,0,.45) 49%, rgba(217,255,0,.45) 51%, transparent 52%) !important;

  opacity:.35 !important;
  filter:drop-shadow(0 0 10px rgba(217,255,0,.35)) !important;
  pointer-events:none !important;
}

.login-box::after{
  content:"" !important;
  position:absolute !important;
  right:-220px !important;
  top:44% !important;
  width:210px !important;
  height:90px !important;

  background:
    linear-gradient(90deg, transparent, rgba(217,255,0,.55), transparent),
    linear-gradient(45deg, transparent 48%, rgba(217,255,0,.45) 49%, rgba(217,255,0,.45) 51%, transparent 52%) !important;

  opacity:.35 !important;
  filter:drop-shadow(0 0 10px rgba(217,255,0,.35)) !important;
  pointer-events:none !important;
}


/* =========================
   FOOTER PREMIUM
========================= */

.panel-footer{
  position: relative;
  margin-top: 90px;
  padding: 60px 40px 30px;
  border-top: 1px solid rgba(217,255,0,.12);
  overflow: hidden;
}

.panel-footer::before{
  content:"LOJA DO CABRA";
  position:absolute;
  left:50%;
  bottom:-20px;
  transform:translateX(-50%);
  font-size:140px;
  font-weight:900;
  letter-spacing:8px;
  color:transparent;
  -webkit-text-stroke:1px rgba(217,255,0,.05);
  pointer-events:none;
  white-space:nowrap;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  position:relative;
  z-index:2;
}

.footer-column h3{
  color:#d9ff00;
  font-size:15px;
  margin-bottom:18px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer-column a,
.footer-column p{
  display:block;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  margin-bottom:10px;
  font-size:13px;
  transition:.2s;
}

.footer-column a:hover{
  color:#d9ff00;
  transform:translateX(4px);
}

.footer-copy{
  position:relative;
  z-index:2;
  margin-top:50px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.35);
}

@media(max-width:900px){

  .footer-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  .panel-footer::before{
    font-size:70px;
    bottom:20px;
  }

}


/* FOOTER PREMIUM CORRECAO FINAL */
.panel-footer{
  position: relative !important;
  margin-top: 70px !important;
  padding: 44px 34px 28px !important;
  border-top: 1px solid rgba(217,255,0,.16) !important;
  background: linear-gradient(180deg, transparent, rgba(217,255,0,.025)) !important;
  overflow: hidden !important;
}

.footer-bg-text{
  position:absolute !important;
  left:50% !important;
  bottom:-18px !important;
  transform:translateX(-50%) !important;
  font-size:96px !important;
  font-weight:900 !important;
  letter-spacing:7px !important;
  color:transparent !important;
  -webkit-text-stroke:1px rgba(217,255,0,.06) !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}

.panel-footer .footer-grid{
  display:grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:32px !important;
  position:relative !important;
  z-index:2 !important;
}

.panel-footer .footer-column h3{
  color:#d9ff00 !important;
  font-size:12px !important;
  margin:0 0 12px !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  text-shadow:0 0 10px rgba(217,255,0,.35) !important;
}

.panel-footer .footer-column p,
.panel-footer .footer-column a{
  display:block !important;
  margin:0 0 8px !important;
  color:rgba(255,255,255,.55) !important;
  font-size:11px !important;
  text-decoration:none !important;
}

.panel-footer .footer-column a:hover{
  color:#d9ff00 !important;
}

.panel-footer .footer-copy{
  position:relative !important;
  z-index:2 !important;
  margin-top:30px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
  text-align:center !important;
  font-size:10px !important;
  color:rgba(255,255,255,.38) !important;
}

@media(max-width:600px){
  .panel-footer .footer-grid{
    grid-template-columns:1fr !important;
  }
}


/* FOOTER MAIS LARGO */
.panel-footer{
  width: calc(100% + 60px) !important;
  margin-left: -30px !important;
  margin-right: -30px !important;
  padding-left: 55px !important;
  padding-right: 55px !important;
}

.footer-bg-text{
  font-size: 140px !important;
  letter-spacing: 10px !important;
  opacity: .9 !important;
}


/* FOOTER GIGANTE */
.panel-footer{
  width: calc(100% + 140px) !important;
  margin-left: -70px !important;
  margin-right: -70px !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.footer-bg-text{
  font-size: 180px !important;
  letter-spacing: 14px !important;
  bottom: -30px !important;
  opacity: .12 !important;
}


/* CENTRALIZAR TEXTO GIGANTE */
.footer-bg-text{
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  text-align: center !important;
  font-size: 220px !important;
  letter-spacing: 18px !important;
  bottom: -40px !important;
}


/* AJUSTE FINAL TEXTO GIGANTE FOOTER */
.footer-bg-text{
  left: 55% !important;
  transform: translateX(-50%) !important;
  font-size: 245px !important;
  letter-spacing: 20px !important;
  bottom: -46px !important;
}


/* FOOTER TEXTO GIGANTE SEM CORTAR */
.footer-bg-text{
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 205px !important;
  letter-spacing: 12px !important;
  bottom: -38px !important;
}

.panel-footer{
  overflow: hidden !important;
}


/* FOOTER TEXTO FINAL PRECISO */
.panel-footer{
  overflow: hidden !important;
}

.footer-bg-text{
  left: 50% !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: translateX(-50%) scaleX(.72) !important;

  font-size: 190px !important;
  letter-spacing: 10px !important;
  bottom: -42px !important;

  text-align: center !important;
  white-space: nowrap !important;
}


/* DESLIGAR TEXTO ANTIGO DO FOOTER */
.panel-footer::before{
  display: none !important;
  content: none !important;
}

/* TEXTO FINAL DO FOOTER CONTROLADO */
.footer-bg-text{
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -30px !important;
  transform: translateX(-50%) scaleX(.72) !important;

  width: max-content !important;
  max-width: none !important;

  font-size: 185px !important;
  letter-spacing: 10px !important;
  font-weight: 900 !important;

  color: transparent !important;
  -webkit-text-stroke: 1px rgba(217,255,0,.055) !important;

  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.panel-footer .footer-grid,
.panel-footer .footer-copy{
  position: relative !important;
  z-index: 2 !important;
}


/* FOOTER CENTRALIZADO NA TELA INTEIRA */
.panel-footer{
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding-left: 80px !important;
  padding-right: 80px !important;
}

.panel-footer .footer-grid{
  max-width: 720px !important;
  margin: 0 auto !important;
}

.panel-footer .footer-copy{
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.footer-bg-text{
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(.72) !important;
  bottom: -32px !important;
  font-size: 185px !important;
}


/* FOOTER FINAL COM RESPIRO E MARCA D'AGUA */
.panel-footer{
  width: calc(100vw - 90px) !important;
  margin-left: calc(-50vw + 50% + 45px) !important;
  margin-right: 45px !important;
  padding-left: 70px !important;
  padding-right: 70px !important;
}

.footer-bg-text{
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -34px !important;
  transform: translateX(-50%) scaleX(.78) !important;

  font-size: 190px !important;
  letter-spacing: 12px !important;
  font-weight: 900 !important;

  color: transparent !important;
  -webkit-text-stroke: 1px rgba(217,255,0,.045) !important;

  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 1 !important;
}


/* =========================
   FOOTER FIX DEFINITIVO
========================= */

.panel-footer{
  position: relative !important;

  width: calc(100% - 60px) !important;
  margin: 80px auto 0 auto !important;

  padding: 50px 60px 35px 60px !important;

  overflow: hidden !important;

  border-top: 1px solid rgba(217,255,0,.08) !important;
}

/* DESLIGA TODOS OS BEFORE ANTIGOS */
.panel-footer::before{
  display:none !important;
  content:none !important;
}

/* TEXTO GIGANTE */
.footer-bg-text{
  display:block !important;

  position:absolute !important;

  left:50% !important;
  bottom:-48px !important;

  transform:translateX(-50%) !important;

  font-size:170px !important;
  font-weight:900 !important;

  letter-spacing:10px !important;

  white-space:nowrap !important;

  color:transparent !important;

  -webkit-text-stroke:1px rgba(217,255,0,.05) !important;

  pointer-events:none !important;

  z-index:1 !important;
}

/* CONTEÚDO NA FRENTE */
.panel-footer .footer-grid,
.panel-footer .footer-copy{
  position:relative !important;
  z-index:2 !important;
}

/* GRID CENTRAL */
.footer-grid{
  max-width:900px !important;

  margin-left:auto !important;
  margin-right:auto !important;

  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;

  gap:40px !important;
}

/* TEXTO FINAL */
.footer-copy{
  text-align:center !important;

  margin-top:40px !important;

  color:rgba(255,255,255,.45) !important;

  font-size:12px !important;
}


/* FOOTER PRODUCAO FINAL SEM MARCA GIGANTE */
.footer-bg-text,
.panel-footer::before{
  display: none !important;
  content: none !important;
}

.panel-footer{
  width: calc(100% - 20px) !important;
  margin: 80px auto 0 auto !important;
  padding: 42px 60px 28px !important;

  border-top: 1px solid rgba(217,255,0,.14) !important;

  background:
    linear-gradient(180deg, transparent, rgba(217,255,0,.025)) !important;

  box-shadow:
    inset 0 1px 0 rgba(217,255,0,.05) !important;
}

.panel-footer .footer-grid{
  max-width: 950px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 60px !important;
}

.panel-footer .footer-copy{
  margin-top: 34px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  text-align: center !important;
}


/* FOOTER MAIOR E CENTRALIZADO NA TELA */
.panel-footer{
  width: calc(100vw - 120px) !important;
  margin-left: calc(-50vw + 50% + 60px) !important;
  margin-right: 60px !important;

  padding: 55px 80px 34px !important;
}

.panel-footer .footer-grid{
  max-width: 1100px !important;
  gap: 90px !important;
}

.panel-footer .footer-column h3{
  font-size: 13px !important;
}

.panel-footer .footer-column p,
.panel-footer .footer-column a{
  font-size: 12px !important;
}

.panel-footer .footer-copy{
  font-size: 11px !important;
}


/* FOOTER COM RESPIRO IGUAL DOS DOIS LADOS */
.panel-footer{
  width: calc(100% - 90px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 70px !important;
  padding-right: 70px !important;
  box-sizing: border-box !important;
}


/* =========================
   BLOCK HOST MODAL
========================= */

.block-host-modal{
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);

  display: none;
  align-items: center;
  justify-content: center;

  z-index: 99999;
}

.block-host-modal.open{
  display: flex;
}

.block-host-box{
  position: relative;

  width: 520px;
  max-width: calc(100vw - 30px);

  background:
    linear-gradient(
      180deg,
      rgba(18,18,18,.98),
      rgba(10,10,10,.98)
    );

  border: 1px solid rgba(217,255,0,.12);

  border-radius: 24px;

  padding: 28px;

  box-shadow:
    0 0 40px rgba(217,255,0,.08),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.block-host-box h2{
  margin: 0;
  color: #fff;
  font-size: 26px;
}

.block-host-subtitle{
  margin-top: 8px;
  color: rgba(255,255,255,.45);
  font-size: 14px;
}

.block-host-close{
  position: absolute;
  right: 18px;
  top: 18px;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 12px;

  background: rgba(255,255,255,.05);

  color: #fff;
  font-size: 18px;

  cursor: pointer;

  transition: .2s;
}

.block-host-close:hover{
  background: rgba(217,255,0,.15);
  color: #d9ff00;
}

.block-host-input-area{
  display: flex;
  gap: 10px;

  margin-top: 22px;
}

#blockedHostInput{
  flex: 1;

  height: 50px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.06);

  border-radius: 14px;

  padding: 0 16px;

  color: #fff;
  font-size: 14px;

  outline: none;
}

#blockedHostInput:focus{
  border-color: rgba(217,255,0,.35);
  box-shadow: 0 0 18px rgba(217,255,0,.08);
}

#addBlockedHostBtn{
  height: 50px;

  padding: 0 22px;

  border: 0;
  border-radius: 14px;

  background: #d9ff00;

  color: #000;
  font-weight: 700;

  cursor: pointer;

  transition: .2s;
}

#addBlockedHostBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(217,255,0,.28);
}

.blocked-hosts-list{
  margin-top: 24px;

  display: flex;
  flex-direction: column;
  gap: 10px;

  max-height: 260px;
  overflow-y: auto;
}

.empty-blocked-hosts{
  padding: 18px;

  border-radius: 16px;

  background: rgba(255,255,255,.03);

  text-align: center;

  color: rgba(255,255,255,.35);

  font-size: 13px;
}


/* ========= MODAL BLOQUEAR HOST ========= */

#blockHostModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
  padding:20px;
}

#blockHostModal.open{
  display:flex;
}

.block-host-box{
  width:100%;
  max-width:520px;
  background:linear-gradient(180deg,#111,#0b0b0b);
  border:1px solid rgba(217,255,0,.18);
  border-radius:22px;
  padding:26px;
  box-shadow:
  0 0 40px rgba(217,255,0,.08),
  inset 0 0 30px rgba(217,255,0,.03);
}

.block-host-box h2{
  color:#fff;
  font-size:28px;
  margin-bottom:8px;
}

.block-host-desc{
  color:rgba(255,255,255,.58);
  font-size:13px;
  margin-bottom:20px;
}

.block-host-top{
  display:flex;
  gap:12px;
  align-items:center;
}

.block-host-input{
  flex:1;
  height:52px;
  border-radius:14px;
  border:1px solid rgba(217,255,0,.15);
  background:#0f1014;
  color:#fff;
  padding:0 18px;
  font-size:14px;
  outline:none;
}

.block-host-input:focus{
  border-color:#d9ff00;
  box-shadow:0 0 18px rgba(217,255,0,.15);
}

.block-host-add{
  height:52px;
  padding:0 22px;
  border:none;
  border-radius:14px;
  background:#d9ff00;
  color:#000;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.block-host-add:hover{
  transform:translateY(-1px);
  box-shadow:0 0 20px rgba(217,255,0,.35);
}

.blocked-hosts{
  margin-top:18px;
  max-height:260px;
  overflow:auto;
  border-radius:14px;
  background:#0d0f13;
  border:1px solid rgba(255,255,255,.05);
}

.blocked-host-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.04);
  color:#fff;
  font-size:14px;
}

.blocked-host-item:last-child{
  border-bottom:none;
}

.remove-host{
  border:none;
  background:none;
  color:#ff4d4d;
  cursor:pointer;
  font-size:18px;
}

.close-block-host{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#111;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

.empty-blocked{
  padding:30px;
  text-align:center;
  color:rgba(255,255,255,.35);
  font-size:13px;
}


/* BLOCK HOST FIX FINAL - SELECTORS REAIS */
.block-host-close{
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(217,255,0,.35) !important;
  background: rgba(12,18,10,.95) !important;
  color: #d9ff00 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.block-host-subtitle{
  color: rgba(255,255,255,.62) !important;
  font-size: 13px !important;
}

.block-host-input-area{
  display: grid !important;
  grid-template-columns: 1fr 110px !important;
  gap: 10px !important;
}

#blockedHostInput{
  height: 48px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(217,255,0,.18) !important;
  background: rgba(8,10,9,.95) !important;
  color: #fff !important;
}

#addBlockedHostBtn{
  height: 48px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg,#d9ff00,#aaff00) !important;
  color: #071006 !important;
  font-weight: 900 !important;
}

.blocked-hosts-list{
  background: rgba(8,10,9,.82) !important;
  border: 1px solid rgba(217,255,0,.08) !important;
  border-radius: 14px !important;
}

.empty-blocked-hosts{
  color: rgba(255,255,255,.42) !important;
}


/* MOBILE HOTFIX PRODUCAO */
@media(max-width:768px){

  #loginProxy{
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    font-size: 16px !important;
    height: 56px !important;
  }

  #loginScreen,
  .login-box{
    touch-action: auto !important;
  }

  #dashboardScreen{
    flex-direction: column !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  #dashboardScreen .sidebar{
    position: relative !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: auto !important;
    margin: 12px auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
  }

  #dashboardScreen .content{
    width: 100% !important;
    padding: 12px !important;
    margin: 0 !important;
  }

  #dashboardScreen .cards{
    grid-template-columns: 1fr !important;
  }

  #dashboardScreen .config-grid,
  #dashboardScreen .proxy-fields{
    grid-template-columns: 1fr !important;
  }

  #dashboardScreen .topbar{
    display: none !important;
  }

  #dashboardScreen .panel-footer{
    display: none !important;
  }
}


/* MOBILE MENU FINAL */
.mobile-menu-btn,
.mobile-menu-overlay{
  display:none;
}

@media(max-width:768px){

  .mobile-menu-btn{
    display:flex !important;
    position:fixed !important;
    top:14px !important;
    left:14px !important;
    z-index:100000 !important;
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    border:1px solid rgba(217,255,0,.35) !important;
    background:rgba(8,12,8,.92) !important;
    color:#d9ff00 !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:24px !important;
    box-shadow:0 0 18px rgba(217,255,0,.18) !important;
  }

  .mobile-menu-overlay.open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:99997 !important;
    background:rgba(0,0,0,.65) !important;
    backdrop-filter:blur(5px) !important;
  }

  #dashboardScreen .sidebar{
    position:fixed !important;
    left:-290px !important;
    top:0 !important;
    width:260px !important;
    height:100vh !important;
    margin:0 !important;
    z-index:99998 !important;
    transform:none !important;
    transition:.25s ease !important;
  }

  #dashboardScreen .sidebar.mobile-open{
    left:0 !important;
  }

  #dashboardScreen{
    padding-top:70px !important;
  }
}

/* ===== MOBILE FINAL - PAINEL LOJA DO CABRA ===== */
#cabraMobileMenuBtn,
#cabraMobileOverlay{
  display:none;
}

@media(max-width:768px){

  html,body{
    width:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  #cabraMobileMenuBtn{
    display:flex !important;
    position:fixed !important;
    top:14px !important;
    left:14px !important;
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
    border:1px solid rgba(217,255,0,.35) !important;
    background:rgba(5,8,7,.92) !important;
    color:#d9ff00 !important;
    font-size:25px !important;
    align-items:center !important;
    justify-content:center !important;
    z-index:999999 !important;
    box-shadow:0 0 18px rgba(217,255,0,.18) !important;
  }

  #cabraMobileOverlay.open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.68) !important;
    backdrop-filter:blur(5px) !important;
    z-index:999997 !important;
  }

  #dashboardScreen{
    display:block !important;
    width:100% !important;
    min-height:100vh !important;
    padding:0 !important;
    margin:0 !important;
  }

  #dashboardScreen .sidebar{
    position:fixed !important;
    top:12px !important;
    left:-270px !important;
    width:235px !important;
    height:calc(100vh - 24px) !important;
    padding:18px 14px !important;
    border-radius:22px !important;
    z-index:999998 !important;
    transition:left .25s ease !important;
  }

  #dashboardScreen .sidebar.mobile-open{
    left:12px !important;
  }

  #dashboardScreen .content{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:74px 12px 40px !important;
    box-sizing:border-box !important;
  }

  #dashboardScreen .cards{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  #dashboardScreen .card{
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
    padding:14px !important;
    min-height:94px !important;
  }

  #dashboardScreen .card h2{
    font-size:11px !important;
  }

  #dashboardScreen .gb{
    font-size:16px !important;
  }

  #dashboardScreen .usage-chart,
  #dashboardScreen .builder{
    width:100% !important;
    max-width:100% !important;
    margin:12px 0 !important;
    padding:14px !important;
    box-sizing:border-box !important;
  }

  #dashboardScreen #usageChart{
    height:170px !important;
    max-height:170px !important;
  }

  #dashboardScreen .config-grid,
  #dashboardScreen .proxy-fields{
    grid-template-columns:1fr !important;
  }

  #dashboardScreen input,
  #dashboardScreen select,
  #dashboardScreen textarea{
    font-size:16px !important;
  }

  #dashboardScreen button{
    min-height:42px !important;
  }

  .panel-footer{
    width:100% !important;
    margin:28px 0 0 !important;
  }
}


/* ===== MOBILE FORCE FIX SIDEBAR ===== */
@media(max-width:900px){

  #mobileMenuBtn,
  #cabraMobileMenuBtn{
    display:flex !important;
    position:fixed !important;
    top:14px !important;
    left:14px !important;
    z-index:9999999 !important;
    width:48px !important;
    height:48px !important;
    border-radius:14px !important;
    background:#080c08 !important;
    color:#d9ff00 !important;
    border:1px solid rgba(217,255,0,.45) !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:26px !important;
  }

  #dashboardScreen{
    display:block !important;
    width:100vw !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  #dashboardScreen .sidebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:250px !important;
    height:100vh !important;
    transform:translateX(-110%) !important;
    transition:transform .25s ease !important;
    z-index:9999998 !important;
    margin:0 !important;
    border-radius:0 22px 22px 0 !important;
  }

  #dashboardScreen .sidebar.mobile-open{
    transform:translateX(0) !important;
  }

  #dashboardScreen .content{
    width:100vw !important;
    max-width:100vw !important;
    margin:0 !important;
    padding:76px 12px 40px !important;
    box-sizing:border-box !important;
  }

  #dashboardScreen .cards{
    grid-template-columns:1fr 1fr !important;
    display:grid !important;
  }

  #dashboardScreen .usage-chart,
  #dashboardScreen .builder{
    width:100% !important;
    max-width:100% !important;
  }
}