* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  color: #1f2937;
  background: #f6f7fb;
}
a { color: inherit; text-decoration: none; }

.header{
  position: sticky; top: 0; z-index: 100;
  background: #0f172a;
  color: #e5e7eb;
  border-bottom: 1px solid #0b1225;
  padding: 10px 14px;
}
.logo{ margin: 0 0 6px; font-size: 18px; }
.nav{ display: flex; flex-wrap: wrap; gap: 8px; }
.nav a{
  padding: 6px 10px; border-radius: 8px;
  color: #e5e7eb; background: #111a32;
}
.nav a:hover{ background: #162046; }
.nav a:first-child{ background: #0ea5e9; color: #07263a; font-weight: 700; }

.wrap{ max-width: 1100px; margin: 16px auto; padding: 0 12px; }

.cards{
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
}
.card{
  background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: 14px;
}
.card h3{ margin: 0 0 6px; }
.card p{ margin: 6px 0; color: #4b5563; }
.btn{
  display: inline-block; padding: 8px 10px; border-radius: 8px;
  background: #0ea5e9; color: #07263a; font-weight: 700;
}

.panel{
  margin-top: 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
}
.panel-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid #e5e7eb;
}
.panel-head h2{ margin: 0; font-size: 18px; }
.search{ display: flex; gap: 6px; }
.search input{
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; min-width: 220px;
}

.table{ width: 100%; }
.row{ display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 0.8fr 1.2fr; gap: 8px; padding: 10px 12px; }
.row:nth-child(odd){ background: #fafafa; }
.header{ background: #f1f5f9; font-weight: 700; }
.badge{
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px;
}
.badge.ok{ background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge.off{ background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.link{ color: #0ea5e9; }
.link:hover{ text-decoration: underline; }

.footer{ text-align: center; color: #6b7280; padding: 16px; }

@media (max-width: 1000px){
  .cards{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .cards{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr 1fr; }
  .header{ display: none; } 
}