*{box-sizing:border-box}

body{
  margin:0;
  background:#071018;
  color:#e8eef2;
  font-family:Inter,Arial,sans-serif;
}

.topbar{
  padding:22px 30px;
  background:#09151e;
  border-bottom:1px solid #1f3440;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.eyebrow{
  font-size:10px;
  letter-spacing:2px;
  color:#6eb6d8;
  font-weight:700;
}

h1{
  margin:5px 0 0;
  font-size:21px;
}

.actions{
  display:flex;
  gap:9px;
}

button,.actions a{
  background:#0e5874;
  color:white;
  border:1px solid #337b97;
  border-radius:6px;
  padding:9px 15px;
  text-decoration:none;
  cursor:pointer;
}

main{
  max-width:1700px;
  margin:auto;
  padding:26px;
}

.tabs{
  display:flex;
  gap:7px;
  margin-bottom:18px;
}

.tab{
  background:#0d1a23;
  border-color:#263e4b;
}

.tab.active{
  background:#0f607f;
}

.panel{
  display:none;
  background:#0b161e;
  border:1px solid #213642;
  border-radius:9px;
  overflow:auto;
}

.panel.active-panel{
  display:block;
}

.section-head{
  padding:18px 20px;
  border-bottom:1px solid #223642;
}

.section-head h2{
  margin:0;
  font-size:17px;
}

.section-head p{
  margin:5px 0 0;
  color:#8195a1;
  font-size:12px;
}

table{
  width:100%;
  border-collapse:collapse;
}

th{
  padding:11px;
  text-align:left;
  color:#7e95a3;
  font-size:10px;
  border-bottom:1px solid #263b47;
}

td{
  padding:12px 11px;
  border-bottom:1px solid #182a34;
  font-size:12px;
}

.mono{
  font-family:monospace;
  font-size:11px;
}

.status{
  display:inline-block;
  padding:4px 8px;
  border-radius:16px;
  background:#173b4a;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#253944;
}

.cards article{
  background:#0b171f;
  padding:22px;
}

.cards label{
  display:block;
  color:#78909d;
  font-size:10px;
  margin-bottom:8px;
  text-transform:uppercase;
}

.cards strong{
  font-size:14px;
}

#toast{
  position:fixed;
  right:20px;
  bottom:20px;
  padding:11px 16px;
  background:#184a39;
  border-radius:6px;
  opacity:0;
}

#toast.show{opacity:1}
#toast.error{background:#653131}

@media(max-width:900px){
  .cards{grid-template-columns:1fr}
  .tabs{flex-wrap:wrap}
}