:root {
  --bg: #0b0d10;
  --panel: #151922;
  --panel-2: #1b2130;
  --text: #d6dbe3;
  --muted: #9aa4b2;
  --accent: #2f81f7;
  --orange: #ff9d3b;
  --ok: #2fbf71;
  --warn: #eab308;
  --danger: #ef4444;
  --font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 15% 0%, #1a2334 0%, var(--bg) 45%), var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px; border-bottom: 1px solid #242c3d; background: rgba(11,13,16,.92); backdrop-filter: blur(6px);
}
.brand { font-weight: 700; letter-spacing: .6px; }
.nav { display: flex; gap: 14px; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a.active { color: var(--accent); }
.health { font-family: var(--font-mono); font-size: 12px; color: var(--ok); }
.lang-switcher { margin-left: auto; }
.lang-select {
  background: #111826;
  color: var(--text);
  border: 1px solid #2c3a55;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
}
.container { width: min(1200px, 94vw); margin: 0 auto; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: 34px 0; }
.panel {
  background: linear-gradient(160deg, rgba(27,33,48,.85), rgba(21,25,34,.9));
  border: 1px solid #263247;
  border-radius: 14px;
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.28);
}
.h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.06; margin: 0 0 14px; }
.sub { color: var(--muted); line-height: 1.55; max-width: 60ch; }
.btns { display: flex; gap: 10px; margin-top: 20px; }
.btn {
  text-decoration: none; border: 1px solid #2e3a52; color: var(--text); background: #1a2232;
  padding: 10px 14px; border-radius: 9px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
}
.btn.primary { background: var(--accent); color: #fff; border-color: #5c98f6; }
.btn:hover { filter: brightness(1.08); }
.kpi { font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: #cfd8e4; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 16px 0 34px; }
.card { background: var(--panel); border: 1px solid #27324a; border-radius: 12px; padding: 14px; }
.card h3 { margin: 0 0 8px; font-size: 15px; }
.card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.section-title { margin: 8px 0 12px; font-size: 20px; }
.dashboard { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; padding-bottom: 24px; }
.widget { min-height: 180px; }
.table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; }
.table th, .table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #273049; }
.table th { color: var(--muted); font-weight: 500; }
.badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.online { background: rgba(47,191,113,.16); color: #87f7b7; }
.offline { background: rgba(239,68,68,.18); color: #ff9f9f; }
.log {
  background: #0f131b; border: 1px solid #202b3f; border-radius: 10px; padding: 12px;
  color: #9dd6ff; font-family: var(--font-mono); font-size: 12px; max-height: 280px; overflow: auto;
}
.foot { border-top: 1px solid #1e2635; margin-top: 26px; padding: 16px 0 22px; color: var(--muted); font-size: 13px; }
.form { display: grid; gap: 10px; width: min(420px, 100%); }
.input { background: #0e131c; border: 1px solid #2a354c; color: var(--text); border-radius: 8px; padding: 10px; }
.note { color: var(--muted); font-size: 13px; }
.result { margin-top: 12px; font-family: var(--font-mono); font-size: 13px; }
.error-page { min-height: 100vh; display: grid; place-items: center; }
.error-wrap { text-align: center; width: min(600px, 94vw); }
.pulse {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ok); display: inline-block; margin-right: 6px;
  box-shadow: 0 0 0 0 rgba(47,191,113,.7); animation: pulse 1.8s infinite;
}
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(47,191,113,0); } }
.chart {
  height: 120px;
  background: linear-gradient(180deg, rgba(47,129,247,.22), transparent),
  repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
  linear-gradient(120deg, #0f1826, #101723);
  border: 1px solid #2a3855; border-radius: 10px; position: relative; overflow: hidden;
}
.chart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(47,129,247,.3), transparent);
  width: 30%; animation: sweep 4s linear infinite;
}
@keyframes sweep { from { transform: translateX(-160%);} to { transform: translateX(350%);} }
@media (max-width: 900px) {
  .hero, .grid, .dashboard { grid-template-columns: 1fr; }
  .topbar { gap: 10px; align-items: flex-start; flex-direction: column; }
}