:root {
  --series-1: #3987e5;   /* blue  (dark-mode categorical slot 1) */
  --series-2: #d95926;   /* orange (dark-mode categorical slot 2) */
  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-serious: #ec835a;
  --status-critical: #d03b3b;
  --grid: rgba(255, 255, 255, 0.08);
  --axis-text: #8b8f96;
  --bs-body-bg: #15171a;
  --bs-tertiary-bg: #1b1e22;
}

body { background: var(--bs-body-bg); }
.card { background: #1d2024; border-color: rgba(255, 255, 255, 0.07); }
.card-header { background: transparent; font-weight: 600; font-size: 0.92rem; border-bottom-color: rgba(255, 255, 255, 0.07); }
.card-header .bi { color: var(--axis-text); margin-right: 0.25rem; }
.table { --bs-table-bg: transparent; font-size: 0.86rem; }
.table th { color: var(--axis-text); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.table td, .table th { padding-left: 0.9rem; padding-right: 0.9rem; }
.table thead.sticky-top th { background: #1d2024; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
.w-40 { width: 40%; }

/* tiles */
.tile-label { color: var(--axis-text); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tile-label .bi { margin-right: 0.2rem; }
.tile-value { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.tile-sub { color: var(--axis-text); font-size: 0.8rem; min-height: 1.2em; }

/* meters (status coloured, always paired with a text label) */
.meter { height: 6px; background: rgba(255, 255, 255, 0.07); border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; width: 0; border-radius: 3px; background: var(--status-good); transition: width 0.4s ease; }
.meter-fill.warning { background: var(--status-warning); }
.meter-fill.critical { background: var(--status-critical); }
.status-text-good { color: var(--status-good); }
.status-text-warning { color: var(--status-warning); }
.status-text-critical { color: var(--status-critical); }

/* live indicator */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status-good); display: inline-block; }
.live-dot.stale { background: var(--status-critical); }

/* charts */
.chart { position: relative; height: 170px; }
.chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis text { fill: var(--axis-text); font-size: 10px; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .series-area { opacity: 0.14; }
.chart .crosshair { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.chart .hover-dot { stroke: #1d2024; stroke-width: 2; }
.chart .direct-label { font-size: 11px; fill: #c8ccd2; }
.chart-legend { display: flex; gap: 1rem; font-size: 0.8rem; color: #c8ccd2; margin-bottom: 0.4rem; }
.chart-legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 0.35rem; vertical-align: -1px; }
.chart-tip {
  position: fixed; pointer-events: none; z-index: 2000; display: none;
  background: #0f1113; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px;
  padding: 0.4rem 0.6rem; font-size: 0.8rem; color: #e9ecef; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.chart-tip .tip-time { color: var(--axis-text); font-size: 0.75rem; margin-bottom: 0.15rem; }
.chart-tip .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 0.35rem; }

/* per-core bars */
.cores { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 0.4rem 0.8rem; font-size: 0.75rem; color: var(--axis-text); }
.cores .meter { height: 4px; margin-top: 2px; }

/* misc */
.scroll-y { max-height: 420px; overflow-y: auto; }
.scroll-y-sm { max-height: 340px; overflow-y: auto; }
.ip-chip { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; background: rgba(208, 59, 59, 0.15); color: #f1a3a3; border: 1px solid rgba(208, 59, 59, 0.35); border-radius: 4px; padding: 0.1rem 0.4rem; }
.badge-state { font-weight: 500; }
.mail-stat { background: rgba(255, 255, 255, 0.03); border-radius: 6px; padding: 0.6rem 0.25rem; }
.mail-stat .num { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mail-stat .lbl { font-size: 0.72rem; color: var(--axis-text); text-transform: uppercase; letter-spacing: 0.04em; }

.proc { max-width: 0; width: 55%; }

/* login */
.avatar { width: 24px; height: 24px; border-radius: 50%; }
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; }
.login-icon { font-size: 2.5rem; color: var(--series-1); }
.btn-discord { background: #5865f2; border-color: #5865f2; color: #fff; font-weight: 600; padding: 0.6rem 1rem; }
.btn-discord:hover, .btn-discord:focus { background: #4752c4; border-color: #4752c4; color: #fff; }
.btn-discord .bi { margin-right: 0.4rem; }

/* country flags */
.flag { margin-right: 0.45rem; border-radius: 2px; vertical-align: -1px; }
.fi.flag { width: 1.15em; line-height: 0.86em; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.flag-unknown { color: var(--axis-text); font-size: 0.85em; }

/* CPU model next to the CPU tile label */
.cpu-model { text-transform: none; letter-spacing: normal; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }