/* Те же токены, что в metrics/public/style.css и admin/tracker — единый
   визуальный язык внутренних инструментов CRYTALK. */
:root {
  --bg: #0f0f0f;
  --card: #1a1a1a;
  --glass-border: rgba(255, 255, 255, 0.1);
  --text: #fdf6e3;
  --text-dim: rgba(253, 246, 227, 0.6);
  --gold: #ffbe3d;
  --green: #37d67a;
  --yellow: #ffbe3d;
  --red: #e5484d;
  --radius: 16px;
  --radius-sm: 10px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}
button { font-family: inherit; cursor: pointer; }
input { font-family: inherit; }

.auth-gate {
  max-width: 420px; margin: 120px auto; text-align: center; padding: 36px 30px;
  background: var(--card); border: 1px solid var(--glass-border); border-radius: 24px;
}
.auth-gate h2 { margin: 0 0 10px; color: var(--gold); }
.auth-gate p { color: var(--text-dim); line-height: 1.5; }
.auth-gate a {
  display: inline-block; margin-top: 16px; padding: 10px 20px; background: var(--gold);
  color: #1a1400; font-weight: 700; border-radius: 12px; text-decoration: none;
}

/* ---------- Каркас ---------- */
.shell { display: flex; height: 100%; }
.sidebar {
  width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 14px; border-right: 1px solid var(--glass-border); background: rgba(0,0,0,0.15);
  overflow-y: auto;
}
.brand { font-weight: 800; font-size: 16px; padding: 0 2px; }
.brand .gold { color: var(--gold); }

.section-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-dim); padding: 0 2px;
}
.source-group { display: flex; flex-direction: column; gap: 2px; }
.source-group-title { font-size: 11.5px; font-weight: 700; color: var(--text-dim); padding: 8px 2px 2px; }
.source-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 12.5px;
  cursor: pointer;
}
.source-row:hover { background: rgba(255,255,255,0.05); }
.source-row input { accent-color: var(--gold); cursor: pointer; }
.source-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.source-dot.live { background: var(--green); box-shadow: 0 0 6px rgba(55,214,122,0.6); }
.source-dot.idle { background: var(--text-dim); opacity: .4; }
.source-unavailable { opacity: .4; }

.level-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.level-chip {
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.04); color: var(--text-dim);
  border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 600;
}
.level-chip.active[data-level="error"] { background: rgba(229,72,77,0.18); border-color: rgba(229,72,77,0.5); color: var(--red); }
.level-chip.active[data-level="warn"] { background: rgba(255,190,61,0.18); border-color: rgba(255,190,61,0.5); color: var(--yellow); }
.level-chip.active[data-level="info"] { background: rgba(255,255,255,0.1); border-color: var(--glass-border); color: var(--text); }

.history-search { display: flex; flex-direction: column; gap: 6px; }
.field {
  width: 100%; background: rgba(255,255,255,0.06); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; font-size: 12.5px; outline: none;
}
.field:focus { border-color: var(--gold); }
.field::placeholder { color: var(--text-dim); }
.checkbox-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dim); }
.checkbox-row input { accent-color: var(--gold); }
.btn { background: var(--gold); color: #1a1400; border: none; border-radius: var(--radius-sm); padding: 8px 12px; font-weight: 700; font-size: 12px; }
.btn:hover { opacity: .9; }
.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; }
.btn-outline:hover { background: rgba(255,255,255,0.05); }

/* ---------- Основная область ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0; flex-wrap: wrap;
}
.filter-input { flex: 1; min-width: 200px; }
.status-pill { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
.status-pill b { color: var(--text); }

.stream {
  flex: 1; overflow-y: auto; padding: 10px 18px; font-family: var(--mono); font-size: 12px; line-height: 1.6;
}
.log-line { display: flex; gap: 8px; padding: 1px 0; white-space: pre-wrap; word-break: break-all; }
.log-line.hidden-by-filter { display: none; }
.log-badge {
  flex-shrink: 0; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 5px;
  text-transform: uppercase; letter-spacing: .03em; height: fit-content; margin-top: 1px;
}
.log-badge.info { background: rgba(255,255,255,0.08); color: var(--text-dim); }
.log-badge.warn { background: rgba(255,190,61,0.15); color: var(--yellow); }
.log-badge.error { background: rgba(229,72,77,0.15); color: var(--red); }
.log-source { flex-shrink: 0; color: var(--gold); opacity: .8; }
.log-text { color: var(--text); }
.log-line.level-error .log-text { color: #ffb3b5; }
.log-line.level-warn .log-text { color: #ffe0a3; }

.empty-stream { color: var(--text-dim); text-align: center; padding: 60px 0; font-family: inherit; }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; max-height: 40vh; border-right: none; border-bottom: 1px solid var(--glass-border); }
}