:root{
  --bg:#090e18;
  --bg-soft:#0d1322;
  --panel:#111a2e;
  --panel-2:#0f172a;
  --line:#243248;
  --line-soft:#1d2a3f;
  --text:#edf2ff;
  --muted:#9fb0cc;
  --primary:#6d5cff;
  --primary-2:#4f46e5;
  --success:#10b981;
  --danger:#ef4444;
  --shadow-xl:0 24px 55px rgba(5,10,20,.45);
}

body{
  color:var(--text);
}

.wrap{
  max-width:1180px;
  padding-top:30px;
}

.topbar,.top{
  position:sticky;
  top:10px;
  z-index:20;
  border:1px solid rgba(85,105,140,.22);
  background:linear-gradient(180deg, rgba(16,24,39,.88), rgba(10,16,30,.84));
  backdrop-filter: blur(10px);
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow-xl);
}

.brand span{
  letter-spacing:.2px;
}

.brandText{
  display:grid;
  gap:3px;
}

.brandTitle{
  font-size:17px;
  font-weight:900;
}

.brandSub{
  font-size:11px;
  color:var(--muted);
  letter-spacing:.35px;
}

.pill{
  border-color:rgba(88,111,147,.3);
  background:rgba(14,22,38,.7);
  color:var(--muted);
  transition:all .18s ease;
}

.pill:hover{
  transform:translateY(-1px);
  border-color:rgba(109,92,255,.6);
}

.hero,.box,.card{
  border-color:rgba(88,111,147,.22)!important;
  background:linear-gradient(180deg, rgba(17,26,46,.82), rgba(12,20,35,.86))!important;
  box-shadow: var(--shadow-xl)!important;
}

.hero h1{
  font-size:30px;
}

.hero p{
  max-width:760px;
}

.card{
  transition:transform .2s ease,border-color .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform:translateY(-2px);
  border-color:rgba(109,92,255,.6)!important;
}

.card h3{
  font-size:17px;
}

.btn{
  border-color:rgba(95,121,163,.34);
  background:rgba(16,25,44,.78);
  transition:all .18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(109,92,255,.6);
}

.btnPrimary{
  border:1px solid transparent!important;
  background:linear-gradient(135deg, var(--primary), var(--primary-2))!important;
}

.btnDanger{
  border:1px solid rgba(239,68,68,.35)!important;
  background:linear-gradient(135deg, rgba(220,38,38,.92), rgba(185,28,28,.92))!important;
  color:#fff;
}

table{
  border-collapse:separate;
  border-spacing:0;
}

th,td{
  border-bottom-color:rgba(88,111,147,.22)!important;
}

th{
  background:rgba(9,15,28,.55);
  position:sticky;
  top:0;
}

input,select,textarea{
  border-color:rgba(95,121,163,.3)!important;
  background:rgba(8,14,26,.66)!important;
  color:var(--text)!important;
}

input:focus,select:focus,textarea:focus{
  border-color:rgba(109,92,255,.8)!important;
  box-shadow:0 0 0 3px rgba(109,92,255,.2);
}

.flash{
  border-color:rgba(88,111,147,.25)!important;
}

.flash.success{
  border-color:rgba(16,185,129,.45)!important;
  background:rgba(6,31,28,.68)!important;
}

.flash.error{
  border-color:rgba(239,68,68,.45)!important;
  background:rgba(40,15,20,.68)!important;
}

.bg-anim{
  opacity:.7;
}

.footer{
  border-color:rgba(85,105,140,.22)!important;
  background:linear-gradient(180deg, rgba(16,24,39,.88), rgba(10,16,30,.84))!important;
  box-shadow: var(--shadow-xl);
}

/* Modal de confirmação customizado */
.confirm-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.confirm-modal.is-open{
  display:flex;
}

.confirm-modal__overlay{
  position:absolute;
  inset:0;
  background:rgba(2,6,16,.75);
  backdrop-filter:blur(4px);
}

.confirm-modal__panel{
  position:relative;
  width:min(92vw, 460px);
  border:1px solid rgba(101,124,160,.3);
  border-radius:18px;
  padding:18px;
  background:linear-gradient(180deg, rgba(17,26,46,.98), rgba(11,18,33,.98));
  box-shadow:0 22px 55px rgba(0,0,0,.55);
}

.confirm-modal__title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:900;
}

.confirm-modal__message{
  margin:0;
  color:var(--muted);
  line-height:1.4;
}

.confirm-modal__actions{
  margin-top:16px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

@media (max-width:900px){
  .topbar,.top{
    position:static;
  }
}