:root{ --card: rgba(15,23,42,.55); --card2: rgba(2,6,23,.45); --bd: rgba(148,163,184,.15); }
html,body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.navItem{
  display:flex; align-items:center;
  padding:.6rem .75rem; border-radius:.9rem;
  color: rgb(203 213 225); gap:.4rem;
  border:1px solid transparent;
}
.navItem:hover{background:rgba(15,23,42,.55); border-color:var(--bd);}
.navItem.active{background:rgba(2,132,199,.15); border-color:rgba(56,189,248,.35); color:rgb(226 232 240);}
.toolBtn{
  width:100%; text-align:left;
  margin:.25rem 0;
  padding:.6rem .75rem; border-radius:.9rem;
  border:1px solid rgba(148,163,184,.15);
  background:rgba(15,23,42,.35);
  color:rgb(226 232 240);
}
.toolBtn:hover{background:rgba(15,23,42,.6);}
.toolBtnDanger{border-color: rgba(248,113,113,.25); background:rgba(127,29,29,.18);}
.toolBtnDanger:hover{background:rgba(127,29,29,.28);}
.card{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:1.25rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.cardHeader{padding:1.1rem 1.1rem .75rem 1.1rem;}
.cardBody{padding:0 1.1rem 1.1rem 1.1rem;}
.miniCard{
  background:rgba(15,23,42,.45);
  border:1px solid rgba(148,163,184,.15);
  border-radius:1.25rem;
}
.badge{font-size:.72rem; padding:.15rem .55rem; border-radius:999px; border:1px solid rgba(148,163,184,.2);}
.badgeLow{background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:rgb(134,239,172);}
.badgeMed{background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); color:rgb(253,230,138);}
.badgeHigh{background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:rgb(252,165,165);}
.input{
  width:100%;
  background:rgba(2,6,23,.35);
  border:1px solid rgba(148,163,184,.18);
  border-radius:.9rem;
  padding:.6rem .8rem;
  color:rgb(226 232 240);
}
.input:focus{outline:none; border-color:rgba(56,189,248,.55); box-shadow:0 0 0 3px rgba(56,189,248,.18);}
.btn{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:.95rem;
  padding:.55rem .9rem;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.35);
}
.btn:hover{background:rgba(15,23,42,.6);}
.btnPrimary{background:rgba(2,132,199,.95); border-color:rgba(56,189,248,.35);}
.btnPrimary:hover{background:rgba(14,165,233,.95);}
.btnDanger{background:rgba(127,29,29,.25); border-color:rgba(248,113,113,.35);}
.btnDanger:hover{background:rgba(127,29,29,.35);}
.table{width:100%; border-collapse:separate; border-spacing:0 8px;}
.table th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:rgb(148 163 184); text-align:left; padding:.35rem .5rem;}
.table td{padding:.7rem .5rem; background:rgba(2,6,23,.35); border-top:1px solid rgba(148,163,184,.12); border-bottom:1px solid rgba(148,163,184,.12);}
.table tr td:first-child{border-left:1px solid rgba(148,163,184,.12); border-top-left-radius:1rem; border-bottom-left-radius:1rem;}
.table tr td:last-child{border-right:1px solid rgba(148,163,184,.12); border-top-right-radius:1rem; border-bottom-right-radius:1rem;}
.modalBackdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:60;}
.modal{width:min(820px, 92vw); max-height:85vh; overflow:auto; background:rgba(2,6,23,.8); border:1px solid rgba(148,163,184,.18); border-radius:1.25rem;}
.toast{background:rgba(2,6,23,.9); border:1px solid rgba(148,163,184,.2); border-radius:1rem; padding:.8rem 1rem; min-width:280px;}
.fadeIn{animation:fadeIn .18s ease-out;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:translateY(0)}}