*{
  box-sizing:border-box
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,
  "Segoe UI",sans-serif;
  background:#f4f7fb;
  color:#132238
}

.center{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px
}

.card{
  background:white;
  border:1px solid #e4e9f0;
  border-radius:16px;
  padding:22px;
  box-shadow:0 5px 20px rgba(18,34,56,.05)
}

.login-card{
  width:min(430px,100%)
}

h1{
  margin:0;
  letter-spacing:.06em
}

h2{
  margin:8px 0
}

label{
  display:block;
  font-size:13px;
  font-weight:600;
  margin-top:18px;
  margin-bottom:6px
}

input,select{
  width:100%;
  border:1px solid #cfd8e5;
  border-radius:10px;
  padding:12px;
  font:inherit;
  background:white
}

button{
  border:0;
  border-radius:10px;
  padding:11px 16px;
  font-weight:700;
  cursor:pointer;
  background:#132238;
  color:white
}

form button{
  width:100%;
  margin-top:20px
}

.secondary{
  background:#eef2f7;
  color:#132238;
  margin-left:12px
}

.muted{
  color:#6c7889
}

.error{
  margin-top:14px;
  background:#fff1f1;
  color:#a32424;
  border-radius:10px;
  padding:10px
}

.hidden{
  display:none!important
}

header{
  min-height:68px;
  background:white;
  border-bottom:1px solid #e4e9f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px
}

.badge{
  margin-left:10px;
  font-size:12px;
  background:#eef2f7;
  border-radius:999px;
  padding:5px 9px
}

main{
  max-width:1250px;
  margin:auto;
  padding:28px
}

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

.metric{
  font-size:26px;
  font-weight:800;
  margin-top:8px
}

.label{
  color:#6c7889;
  font-size:13px
}

.section{
  margin-top:22px
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px
}

.toolbar{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:12px;
  margin:18px 0
}

.table-wrap{
  overflow:auto
}

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

th,td{
  text-align:left;
  border-bottom:1px solid #edf1f6;
  padding:12px 8px;
  font-size:14px
}

th{
  color:#6c7889;
  font-size:12px;
  text-transform:uppercase
}

@media(max-width:850px){
  .grid{
    grid-template-columns:repeat(2,1fr)
  }

  .toolbar{
    grid-template-columns:1fr
  }
}

@media(max-width:520px){
  .grid{
    grid-template-columns:1fr
  }

  header{
    padding:12px;
    flex-direction:column;
    align-items:flex-start;
    gap:10px
  }

  main{
    padding:14px
  }
}