* { box-sizing:border-box; margin:0; padding:0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background:#0f0f13; color:#e8e8f0; }

/* Логин */
#login-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-box { background:#1a1a2e; padding:2rem; border-radius:12px; width:340px; text-align:center; }
.login-box h1 { font-size:1.8rem; margin-bottom:1.5rem; }
.login-box input { display:block; width:100%; margin:0.5rem 0; padding:0.7rem 1rem;
  background:#0f0f1a; border:1px solid #333; border-radius:8px; color:#fff; font-size:1rem; }
.login-box button { width:100%; margin-top:1rem; padding:0.8rem;
  background:#6c63ff; border:none; border-radius:8px; color:#fff; font-size:1rem; cursor:pointer; }
.error { color:#ff6b6b; margin-top:0.5rem; font-size:0.9rem; }

/* Nav */
nav { display:flex; align-items:center; background:#1a1a2e; padding:0 1.5rem; height:56px;
  border-bottom:1px solid #2a2a4a; position:sticky; top:0; z-index:100; }
.nav-brand { font-size:1.2rem; font-weight:700; margin-right:2rem; }
.nav-links a { color:#aaa; text-decoration:none; margin:0 0.8rem; cursor:pointer; font-size:0.95rem; padding:4px 0; }
.nav-links a.active, .nav-links a:hover { color:#fff; border-bottom:2px solid #6c63ff; }
.btn-logout { margin-left:auto; background:transparent; border:1px solid #555; color:#aaa;
  padding:0.4rem 1rem; border-radius:6px; cursor:pointer; }

/* Метрики */
.metrics-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; padding:1.5rem; }
.metric-card { background:#1a1a2e; border-radius:12px; padding:1.2rem; text-align:center; border:1px solid #2a2a4a; }
.m-label { color:#888; font-size:0.85rem; margin-bottom:0.4rem; }
.m-value { font-size:1.8rem; font-weight:700; color:#6c63ff; }

/* Графики */
.charts-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding:0 1.5rem 1.5rem; }
.chart-box { background:#1a1a2e; border-radius:12px; padding:1rem; border:1px solid #2a2a4a; height:200px; }

/* Таблицы */
.toolbar { display:flex; justify-content:space-between; align-items:center; padding:1.5rem; }
table { width:calc(100% - 3rem); margin:0 1.5rem; border-collapse:collapse; }
th, td { padding:0.8rem 1rem; text-align:left; border-bottom:1px solid #2a2a4a; font-size:0.9rem; }
th { color:#888; font-weight:600; }
.badge { display:inline-block; padding:2px 10px; border-radius:20px; font-size:0.8rem; }
.badge.on  { background:#1a3a2a; color:#4ade80; }
.badge.off { background:#2a1a1a; color:#f87171; }

/* Кнопки */
.btn-primary { background:#6c63ff; border:none; color:#fff; padding:0.5rem 1.2rem;
  border-radius:8px; cursor:pointer; font-size:0.9rem; }
.btn-sm { padding:0.3rem 0.8rem; border-radius:6px; cursor:pointer; border:1px solid #444;
  background:transparent; color:#ccc; font-size:0.8rem; margin:0 2px; }
.btn-sm.danger { border-color:#f87171; color:#f87171; }
.btn-sm.success { border-color:#4ade80; color:#4ade80; }

/* Модалки */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex;
  align-items:center; justify-content:center; z-index:200; }
.modal-box { background:#1a1a2e; border-radius:12px; padding:2rem; min-width:400px; }
.modal-box h3 { margin-bottom:1.2rem; }
.modal-box input, .modal-box select { display:block; width:100%; margin:0.5rem 0;
  padding:0.7rem 1rem; background:#0f0f1a; border:1px solid #333;
  border-radius:8px; color:#fff; font-size:0.95rem; }
.modal-box label { display:flex; align-items:center; gap:8px; margin:0.5rem 0; color:#ccc; }
.modal-btns { display:flex; gap:0.8rem; margin-top:1.2rem; }

/* Активные потоки */
#active-streams-list { padding:0 1.5rem 1.5rem; }
#active-streams-list h3 { margin-bottom:1rem; }
.stream-item { background:#1a1a2e; border-radius:10px; padding:1rem 1.2rem;
  margin-bottom:0.6rem; border:1px solid #2a2a4a; display:flex; align-items:center; gap:1rem; }
.stream-dot { width:10px; height:10px; border-radius:50%; background:#4ade80;
  animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.tab-content { animation: fadein .2s; }
@keyframes fadein { from{opacity:0} to{opacity:1} }