/* ── Base / Dark (default) ─────────────────────────────── */
:root{
  --bg:#080b10;
  --panel:#12161c;
  --panel-2:#171d25;
  --card-bg:#12161c;
  --text:#e8edf4;
  --muted:#97a4b6;
  --accent:#5f7cff;
  --accent-2:#7aa6ff;
  --accent-glow:#7aa6ff;
  --online:#46e37f;
  --offline:#ff6f7f;
  --border:rgba(151,164,182,0.2);
  --grad-a:rgba(95,124,255,0.2);
  --grad-b:rgba(122,166,255,0.11);
}

/* ── Midnight ───────────────────────────────────────────── */
[data-theme="midnight"]{
  --bg:#03071e;
  --panel:#0a1628;
  --panel-2:#0d1e35;
  --card-bg:#0a1628;
  --text:#cce0ff;
  --muted:#6e9fd4;
  --accent:#4d9fff;
  --accent-2:#80c4ff;
  --accent-glow:#80c4ff;
  --online:#38d9a9;
  --offline:#ff6b6b;
  --border:rgba(77,159,255,0.22);
  --grad-a:rgba(77,159,255,0.22);
  --grad-b:rgba(128,196,255,0.10);
}

/* ── Sunset ─────────────────────────────────────────────── */
[data-theme="sunset"]{
  --bg:#0f0705;
  --panel:#1c1008;
  --panel-2:#24160a;
  --card-bg:#1c1008;
  --text:#ffe8d0;
  --muted:#c48a5a;
  --accent:#ff8c42;
  --accent-2:#ffb380;
  --accent-glow:#ffb380;
  --online:#ffd60a;
  --offline:#ff4d6d;
  --border:rgba(255,140,66,0.22);
  --grad-a:rgba(255,140,66,0.22);
  --grad-b:rgba(255,179,128,0.10);
}

/* ── Nord ───────────────────────────────────────────────── */
[data-theme="nord"]{
  --bg:#242933;
  --panel:#2e3440;
  --panel-2:#3b4252;
  --card-bg:#2e3440;
  --text:#eceff4;
  --muted:#9aa3b4;
  --accent:#88c0d0;
  --accent-2:#81a1c1;
  --accent-glow:#81a1c1;
  --online:#a3be8c;
  --offline:#bf616a;
  --border:rgba(136,192,208,0.25);
  --grad-a:rgba(136,192,208,0.18);
  --grad-b:rgba(129,161,193,0.10);
}

/* ── Latte ──────────────────────────────────────────────── */
[data-theme="latte"]{
  --bg:#f7f3ee;
  --panel:#fffdf9;
  --panel-2:#f0ebe2;
  --card-bg:#fffdf9;
  --text:#2c1f0f;
  --muted:#8a6e52;
  --accent:#b5651d;
  --accent-2:#d4845a;
  --accent-glow:#d4845a;
  --online:#2e7d32;
  --offline:#c62828;
  --border:rgba(101,58,12,0.15);
  --grad-a:rgba(181,101,29,0.12);
  --grad-b:rgba(212,132,90,0.07);
}

/* ── Matrix ─────────────────────────────────────────────── */
[data-theme="matrix"]{
  --bg:#000000;
  --panel:#050e05;
  --panel-2:#0a1a0a;
  --card-bg:#050e05;
  --text:#00ff41;
  --muted:#00cc33;
  --accent:#00ff41;
  --accent-2:#33ff66;
  --accent-glow:#00ff41;
  --online:#00ff41;
  --offline:#ff3333;
  --border:rgba(0,255,65,0.2);
  --grad-a:rgba(0,255,65,0.1);
  --grad-b:rgba(0,204,51,0.06);
}

/* ── Rosé Pine ──────────────────────────────────────────── */
[data-theme="rose"]{
  --bg:#191724;
  --panel:#1f1d2e;
  --panel-2:#26233a;
  --card-bg:#1f1d2e;
  --text:#e0def4;
  --muted:#908caa;
  --accent:#eb6f92;
  --accent-2:#f084aa;
  --accent-glow:#f084aa;
  --online:#31748f;
  --offline:#eb6f92;
  --border:rgba(235,111,146,0.22);
  --grad-a:rgba(235,111,146,0.15);
  --grad-b:rgba(240,132,170,0.08);
}

/* ── Glassmorphism ──────────────────────────────────────── */
[data-theme="glass"]{
  --bg:#0f172a;
  --panel:rgba(255,255,255,0.07);
  --panel-2:rgba(255,255,255,0.04);
  --card-bg:rgba(255,255,255,0.07);
  --text:#f0f4ff;
  --muted:#94a3b8;
  --accent:#38bdf8;
  --accent-2:#7dd3fc;
  --accent-glow:#7dd3fc;
  --online:#4ade80;
  --offline:#f87171;
  --border:rgba(255,255,255,0.12);
  --grad-a:rgba(56,189,248,0.15);
  --grad-b:rgba(125,211,252,0.08);
}
[data-theme="glass"] .card,
[data-theme="glass"] .topbar,
[data-theme="glass"] .profile-panel {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
[data-theme="glass"] body {
  background:
    radial-gradient(circle at 20% 20%, rgba(56,189,248,0.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(168,85,247,0.2), transparent 50%),
    #0f172a;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% -10%, var(--grad-a), transparent 34%),
    radial-gradient(circle at 85% 0%, var(--grad-b), transparent 32%),
    var(--bg);
}

.app-shell{min-height:100vh}
.topbar{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
}

.topbar-center{ width:100%; max-width:1320px; display:flex; align-items:center; justify-content:center; gap:16px }
.topbar-center .topbar-actions{ margin-left:12px }

/* make stats grid full width */
.stats-grid{ grid-template-columns:1fr; }

/* compress stat card */
.stat-card{ padding:8px }

.brand{display:flex;gap:12px;align-items:center}
.brand-logo{
  width:42px;
  height:42px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:#fff;
}
.brand-title{font-weight:700;letter-spacing:0.2px}
.brand-subtitle{font-size:0.85rem;color:var(--muted)}

.topbar-actions{display:flex;gap:10px;align-items:center}
.theme-toggle,.ghost-btn{
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  color:var(--text);
  padding:8px 12px;
  cursor:pointer;
}
.theme-toggle:hover,.ghost-btn:hover{border-color:var(--accent)}

/* Theme Picker Popup */
.theme-picker-wrap{ position:relative; }
.theme-picker-popup{
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  z-index:200;
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  min-width:200px;
}
.theme-picker-popup.open{ display:block; }
.theme-picker-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.5;
  margin-bottom:8px;
}
.theme-swatches{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.theme-swatch{
  width:100%;
  aspect-ratio:1;
  border-radius:9px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s, border-color .15s;
  position:relative;
}
.theme-swatch:hover{ transform:scale(1.1); }
.theme-swatch.active{ border-color:var(--text) !important; }
.theme-swatch-label{
  font-size:0.65rem;
  text-align:center;
  margin-top:3px;
  opacity:.6;
  white-space:nowrap;
}
.swatch-wrap{ display:flex; flex-direction:column; align-items:center; }

.chip{
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:999px;
  padding:5px 10px;
  font-size:0.8rem;
}
.chip-warning{
  color:#ffcc66;
  border-color:rgba(255,204,102,0.35);
}
.refresh-chip strong{color:var(--accent)}

.container{
  max-width:1320px;
  margin:20px auto;
  padding:0 20px 22px;
}

.stats-grid{
  display:grid;
  gap:8px;
  grid-template-columns:260px;
  margin-bottom:10px;
}

.stat-card{
  background:linear-gradient(165deg,color-mix(in srgb, var(--panel) 80%, var(--accent) 20%),var(--panel));
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
}
.stat-value{font-size:1.2rem;font-weight:700;margin-top:2px}
.stat-sub{margin-top:4px;color:var(--muted);font-size:0.72rem}

.stat-card{
  background:linear-gradient(165deg,color-mix(in srgb, var(--panel) 80%, var(--accent) 20%),var(--panel));
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}
.stat-label{font-size:0.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px}
.stat-value{font-size:1.5rem;font-weight:700;margin-top:2px}
.stat-sub{margin-top:6px;color:var(--muted);font-size:0.82rem}

.layout-grid{
  display:grid;
  gap:14px;
  grid-template-columns:1.7fr 1fr 1fr;
}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  min-height:240px;
  box-shadow:0 14px 40px rgba(4,10,19,0.22);
}

.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.card-head h3{margin:0;font-size:1.03rem}

/* Next-Join Prediction Box — removed */

.channels-list,.logs,.history-list{
  max-height:67vh;
  overflow:auto;
  padding-right:2px;
}

.channel{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 10px 8px;
  margin-bottom:10px;
  background:color-mix(in srgb, var(--panel-2) 90%, var(--accent) 10%);
}

.channel-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
}
.channel-toggle{
  border:1px solid var(--border);
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  width:24px;
  height:24px;
  cursor:pointer;
  line-height:1;
}
.channel-toggle:hover{border-color:var(--accent);color:var(--accent)}
.channel-name{font-weight:600}
.channel-count{
  min-width:30px;
  text-align:center;
  background:color-mix(in srgb, var(--accent) 34%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 50%, var(--border));
  color:#fff;
  border-radius:999px;
  font-size:0.8rem;
  padding:2px 8px;
}

.user-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
}
.user-row{
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel) 84%, var(--panel-2) 16%);
  color:var(--text);
  cursor:pointer;
  padding:6px 8px;
  font-size:0.86rem;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
}
.user-row:hover,.user-row.active{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 24%, transparent);
}
.user-led{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--online);
  border:1px solid color-mix(in srgb, var(--online) 80%, #fff 20%);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--online) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--online) 78%, transparent);
  flex-shrink:0;
  animation: led-pulse 2.4s ease-in-out infinite;
}

@keyframes led-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 20%, transparent), 0 0 18px color-mix(in srgb, var(--online) 78%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--online) 10%, transparent), 0 0 24px color-mix(in srgb, var(--online) 50%, transparent); }
}
.user-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-empty{color:var(--muted);font-size:0.85rem}
.channel.collapsed .user-list{display:none}
.channel.collapsed .channel-toggle{transform:rotate(-90deg)}
.online-summary{
  margin-top:8px;
  font-size:0.82rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.2em;
}

.log-search{
  width:150px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:9px;
  padding:7px 10px;
}

.log-line,.history-item{
  border-bottom:1px dashed var(--border);
  padding:7px 2px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.82rem;
}

.connected{color:var(--online)}
.disconnected{color:var(--offline)}
.history-hint{color:var(--muted);font-size:0.88rem;line-height:1.4}
.history-item:last-child,.log-line:last-child{border-bottom:none}
.history-empty{color:var(--muted);font-size:0.88rem}
.history-head{margin-bottom:6px}
.profile-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
  background:color-mix(in srgb, var(--panel-2) 88%, var(--accent) 12%);
}
.profile-name{font-weight:700;font-size:0.96rem}
.profile-meta,.profile-stats,.profile-last{
  display:flex;
  gap:12px;
  margin-top:6px;
  color:var(--muted);
  font-size:0.82rem;
  flex-wrap:wrap;
}
.profile-last{line-height:1.4}
#profileStatus.online{color:var(--online)}
#profileStatus.offline{color:var(--offline)}

.footer{
  margin-top:12px;
  color:var(--muted);
  text-align:center;
  font-size:0.85rem;
}

.rules{
  margin-top:8px;
  color:var(--muted);
  text-align:center;
  font-size:0.78rem;
  text-transform:lowercase;
}
.stats-layout{
  margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;
  gap:14px;
}

.distribution-card{
  grid-column:1 / -1;
}

.ranking-card{
  grid-column:1 / -1;
}

.connect-card{
  grid-column:1 / -1;
}

/* Weekday heatmap card */
.heatmap-card{
  margin-top:14px;
}
.weekday-canvas{
  width:100%;
  display:block;
  border-radius:6px;
  cursor:default;
}
.heatmap-legend{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  font-size:0.75rem;
  opacity:.6;
}
.heatmap-legend-bar{
  flex:1;
  height:6px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--border) 0%, var(--accent) 100%);
}

.ranking-list{
  max-height: 344px; /* show ~7 rows, rest scrolls */
  overflow:auto;
  padding-right:2px;
}

.ranking-row{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto;
  align-items:center;
  gap:10px;
  border-bottom:1px dashed var(--border);
  padding:8px 0;
  transition:background 0.25s ease, transform 0.12s ease;
}
.ranking-row:hover{transform:translateY(-2px)}
.ranking-row.top1{background:linear-gradient(90deg, color-mix(in srgb, #b4f6c1 30%, transparent), transparent);}
.ranking-row.top2{background:linear-gradient(90deg, color-mix(in srgb, #e9f7c4 24%, transparent), transparent);}
.ranking-row.top3{background:linear-gradient(90deg, color-mix(in srgb, #fff4c6 20%, transparent), transparent);}
.ranking-row.top4{background:linear-gradient(90deg, color-mix(in srgb, #fde8a0 14%, transparent), transparent);}
.ranking-row.top5{background:linear-gradient(90deg, color-mix(in srgb, #fad990 10%, transparent), transparent);}
.ranking-row.rank-high{background:linear-gradient(90deg, rgba(255,243,205,0.03), transparent)}
.ranking-row.rank-mid{background:linear-gradient(90deg, rgba(255,230,205,0.02), transparent)}
.ranking-row.rank-low{background:linear-gradient(90deg, rgba(255,220,220,0.018), transparent)}

.ranking-row:last-child{border-bottom:none}
.ranking-user{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ranking-sub{
  margin-top:2px;
  font-size:0.74rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.streak-section{ margin-top:10px; }
.streak-table th, .streak-table td{ padding:8px 10px; }
/* ── Next Joins Strip (kompakt über Channel Tree) ────────── */
.next-joins-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 85%, var(--accent) 15%), var(--panel));
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.82rem;
}
.nj-head {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-right: 2px;
}
.nj-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  white-space: nowrap;
}
.nj-item.top1 { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.nj-item.top2 { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.nj-rank { color: var(--muted); font-size: 0.75rem; }
.nj-user { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.nj-prob { color: var(--accent); font-weight: 700; font-size: 0.85rem; }
.nj-peak { color: var(--muted); font-size: 0.75rem; }
.nj-meta { color: var(--muted); font-size: 0.72rem; margin-left: auto; white-space: nowrap; }

.prediction-section{ margin-top:12px; }
.prediction-table th,
.prediction-table td{ padding:8px 10px; }
.prediction-sparkline{
  height:48px;
  min-width:170px;
  display:grid;
  grid-template-columns:repeat(12, minmax(6px, 1fr));
  align-items:end;
  gap:3px;
  padding:6px 4px 2px 4px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius:8px;
  background:color-mix(in srgb, var(--panel) 88%, transparent);
}
.prediction-slot{
  display:block;
  width:100%;
  min-height:3px;
  border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, #fff 10%), color-mix(in srgb, var(--accent) 66%, transparent));
  opacity:0.92;
}
.prediction-meta{
  margin-top:8px;
  color:var(--muted);
  font-size:0.74rem;
}
.ranking-metrics{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:flex-end;
}

.distribution-card .distribution-content{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-height:200px;
  overflow-x:auto;
  padding-bottom:4px;
}

.distribution-axis{
  width:28px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:116px;
  margin-top:0;
  font-size:0.72rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--muted);
}

.distribution-axis span{
  display:block;
  text-align:right;
}

.distribution-columns{
  display:flex;
  flex:1;
  gap:4px;
  align-items:flex-end;
  height:160px;
  padding-bottom:22px;
  min-width:480px;
  border-bottom:1px solid var(--border);
  border-left:1px solid var(--border);
  position:relative;
}

/* ---- User activity chart modal ---- */
.chart-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(4,10,20,0.72);
  backdrop-filter:blur(4px);
  align-items:center;
  justify-content:center;
}
.chart-modal.open{ display:flex }
.chart-modal-box{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 24px 18px;
  width:min(860px,96vw);
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.chart-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
  font-weight:700;
  font-size:1.05rem;
}
.chart-modal-sub{
  font-size:0.8rem;
  color:var(--muted);
  margin-bottom:14px;
}
.chart-wrap{ width:100%; overflow-x:auto }
.chart-wrap canvas{ display:block; width:100%; height:200px }
.chart-tab{ font-size:0.82rem; padding:5px 12px; border-radius:8px }
.chart-tab.active-tab{ background:var(--accent); border-color:var(--accent); color:#fff }
.ranking-row:focus{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px }
.chart-hint{ font-size:0.85rem; opacity:0.55; margin-left:4px }
.ranking-row:hover .chart-hint{ opacity:1 }


.distribution-column{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.bar-grid{
  position:relative;
  width:100%;
  height:116px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.avg-bar{
  width:70%;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 85%),
    0 6px 16px rgba(5,13,31,0.35);
  transition:height 0.3s ease;
  min-height:2px;
}

.peak-dot{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--accent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent), transparent 50%);
}

.distribution-label{
  color:var(--muted);
  font-size:0.72rem;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  text-transform:uppercase;
  letter-spacing:0.3em;
}
.distribution-info{gap:18px}

.distribution-info{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:0.78rem;
  color:var(--muted);
  margin-top:10px;
  text-transform:uppercase;
  letter-spacing:0.1em;
}

.connect-table{
  max-width:520px;
  max-height:220px;
  overflow-y:scroll;
  scrollbar-gutter:stable;
  padding:0 14px 0 10px;
  margin-left:0;
  border-left:1px dashed var(--border);
}

.connect-row{
  display:grid;
  grid-template-columns:minmax(120px,1fr) 72px 64px;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:1px dashed var(--border);
}

.connect-row:last-child{border-bottom:none}
.connect-user{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.connect-time{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:0.9rem;
  justify-self:end;
}
.connect-count{
  font-size:0.78rem;
  color:var(--muted);
  justify-self:end;
  padding-right:4px;
}

.connect-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
  width:100%;
}

.connect-col{
  overflow:hidden;
}

/* remove the old aside styles — now both columns are peers */
.connect-insights{ display:none }

.connect-insights h4{
  margin:0 0 10px;
  font-size:0.92rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--muted);
}

.connect-rank{font-weight:700;width:40px;text-align:left;color:var(--muted);padding-left:8px}
.dc-table thead th{cursor:default}
.dc-table thead th.sortable{cursor:pointer;color:var(--accent)}

/* disconnect table: red-based ranking colors */
.dc-table tr.dc-top1{background:linear-gradient(90deg, color-mix(in srgb, #ff8080 28%, transparent), transparent);}
.dc-table tr.dc-top2{background:linear-gradient(90deg, color-mix(in srgb, #ffaa88 22%, transparent), transparent);}
.dc-table tr.dc-top3{background:linear-gradient(90deg, color-mix(in srgb, #ffcc99 18%, transparent), transparent);}
.dc-table tr.dc-top4{background:linear-gradient(90deg, color-mix(in srgb, #ffe0b0 13%, transparent), transparent);}
.dc-table tr.dc-top5{background:linear-gradient(90deg, color-mix(in srgb, #ffeecc 9%, transparent), transparent);}
.dc-table tr.dc-rank-high{background:linear-gradient(90deg, rgba(255,180,150,0.03), transparent)}
.dc-table tr.dc-rank-mid{background:linear-gradient(90deg, rgba(255,160,130,0.02), transparent)}
.dc-table tr.dc-rank-low{background:linear-gradient(90deg, rgba(255,140,120,0.015), transparent)}

/* apply ranking row colors for table rows as well */
.connect-table tr.top1{background:linear-gradient(90deg, color-mix(in srgb, #b4f6c1 30%, transparent), transparent);}
.connect-table tr.top2{background:linear-gradient(90deg, color-mix(in srgb, #e9f7c4 24%, transparent), transparent);}
.connect-table tr.top3{background:linear-gradient(90deg, color-mix(in srgb, #fff4c6 20%, transparent), transparent);}
.connect-table tr.top4{background:linear-gradient(90deg, color-mix(in srgb, #fde8a0 14%, transparent), transparent);}
.connect-table tr.top5{background:linear-gradient(90deg, color-mix(in srgb, #fad990 10%, transparent), transparent);}
.connect-table tr.rank-high{background:linear-gradient(90deg, rgba(255,243,205,0.03), transparent)}
.connect-table tr.rank-mid{background:linear-gradient(90deg, rgba(255,230,205,0.02), transparent)}
.connect-table tr.rank-low{background:linear-gradient(90deg, rgba(255,220,220,0.018), transparent)}

.insights-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:0.84rem;
  overflow:hidden;
  border-radius:10px;
  border:1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background:color-mix(in srgb, var(--panel) 86%, transparent);
}

.insights-table th,
.insights-table td{
  padding:10px 12px;
  border-bottom:1px dashed var(--border);
}

.insights-table tr:last-child th,
.insights-table tr:last-child td{
  border-bottom:none;
}

.insights-table th{
  width:50%;
  text-align:left;
  color:var(--muted);
  font-weight:600;
  letter-spacing:0.02em;
}

.insights-table td{
  text-align:right;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
}

@media(max-width:1120px){
  .layout-grid{grid-template-columns:1fr 1fr}
  .side-panel:last-child{grid-column:1 / -1}
  .stats-layout{grid-template-columns:1fr}
  .distribution-card,
  .ranking-card,
  .connect-card{grid-column:1}
  .connect-table{
    max-width:none;
    padding-left:10px;
    border-left:none;
  }
  .connect-layout{grid-template-columns:1fr}
}

@media(max-width:760px){
  .topbar{padding:14px 16px}
  .container{padding:0 12px 16px}
  .stats-grid{grid-template-columns:1fr}
  .layout-grid{grid-template-columns:1fr}
  .log-search{width:120px}
}

/* Feature 1: Badges and trends */
.badge-chip { font-size:1rem; cursor:help; line-height:1; }
.trend-up { color: #4ade80; font-size: 0.75rem; font-weight:600; }
.trend-down { color: #f87171; font-size: 0.75rem; font-weight:600; }
.trend-neutral { opacity: 0.5; font-size: 0.75rem; }

/* Feature 2: Channel Stats (replaces Co-presence) */
.channel-stats-card { grid-column: 1 / -1; }
.channel-bars { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.channel-bar-row { display: flex; align-items: center; gap: 10px; }
.channel-bar-label { min-width: 110px; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-bar-track { flex: 1; height: 10px; background: var(--border); border-radius: 6px; overflow: hidden; }
.channel-bar-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
.channel-bar-value { min-width: 72px; text-align: right; font-size: .8rem; opacity: .75; white-space: nowrap; }

/* Feature 3: Gantt */
.gantt-card { margin-top: 14px; }
.gantt-canvas { width: 100%; display: block; border-radius: 6px; }

/* Feature 4: Records panel */
.records-panel { padding: 8px 4px; }
.records-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.record-item { text-align: center; padding: 12px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.record-icon { font-size: 1.6rem; margin-bottom: 6px; }
.record-val { font-size: 1.1rem; font-weight: 700; }
.record-lbl { font-size: 0.75rem; opacity: 0.65; margin-top: 2px; }
@media(max-width:500px){ .records-grid{ grid-template-columns: repeat(2,1fr); } }

/* ── User Profile Slideover Panel ───────────────────────────── */
.profile-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:200; backdrop-filter:blur(2px);
}
.profile-overlay.open { display:block; }

.profile-panel {
  position:fixed; top:0; right:0; bottom:0; width:min(480px,96vw);
  background:var(--panel-2); border-left:1px solid var(--border);
  box-shadow:-6px 0 28px rgba(0,0,0,.5);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:201; display:flex; flex-direction:column; overflow:hidden;
}
.profile-panel.open { transform:translateX(0); }

.profile-panel-header {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  background:var(--panel); border-bottom:1px solid var(--border); flex-shrink:0;
}
.profile-panel-title { font-weight:700; font-size:1rem; white-space:nowrap; }
.profile-user-list {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 16px 12px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.profile-user-btn {
  background:var(--panel-2);
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 12px;
  font-size:0.85rem;
  color:var(--text);
  cursor:pointer;
  transition:all .2s ease;
}
.profile-user-btn.active {
  border-color:var(--accent);
  background:var(--accent);
  color:var(--panel-2);
}
.profile-close {
  background:none; border:none; color:var(--muted); font-size:1.2rem;
  cursor:pointer; padding:4px 8px; border-radius:6px; line-height:1;
  transition:color .15s;
}
.profile-close:hover { color:var(--text); }

.profile-content {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:16px;
}
.profile-empty { opacity:.5; text-align:center; margin-top:40px; font-size:.95rem; }

/* Profile sections */
.prof-section { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.prof-section-title { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; opacity:.55; margin-bottom:10px; }
.prof-name { font-size:1.5rem; font-weight:800; margin-bottom:6px; }
.prof-badges { display:flex; gap:6px; flex-wrap:wrap; }
.prof-badge { font-size:1.05rem; background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:3px 9px; cursor:help; }

.prof-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.prof-stat { text-align:center; }
.prof-stat-val { font-size:1.15rem; font-weight:700; color:var(--accent); }
.prof-stat-lbl { font-size:.72rem; opacity:.6; margin-top:2px; }

.prof-records-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.prof-record { text-align:center; padding:10px 8px; background:var(--panel); border:1px solid var(--border); border-radius:10px; }
.prof-record-icon { font-size:1.4rem; }
.prof-record-val { font-size:1rem; font-weight:700; }
.prof-record-lbl { font-size:.7rem; opacity:.6; margin-top:2px; }

.prof-trend-up { color:#4ade80; font-weight:700; }
.prof-trend-down { color:#f87171; font-weight:700; }

.prof-copres-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.prof-copres-item { display:flex; justify-content:space-between; align-items:center; }
.prof-copres-bar-wrap { flex:1; margin:0 10px; height:5px; background:var(--border); border-radius:4px; overflow:hidden; }
.prof-copres-bar { height:100%; background:var(--accent); border-radius:4px; }

.prof-channel-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.prof-channel-item { display:flex; align-items:center; gap:0; }
.prof-channel-name { min-width:100px; font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prof-channel-bar { background: color-mix(in srgb, var(--accent) 75%, #a78bfa 25%); }
.prof-channel-time { font-size:.8rem; opacity:.7; min-width:58px; text-align:right; white-space:nowrap; }

/* Chart modal channel list */
.modal-channel-list { list-style:none; padding:8px 4px; margin:0; display:flex; flex-direction:column; gap:10px; }
.modal-channel-item { display:flex; align-items:center; gap:10px; }
.modal-channel-name { min-width:130px; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modal-channel-time { font-size:.82rem; opacity:.7; min-width:68px; text-align:right; white-space:nowrap; }

.prof-schedule { display:flex; align-items:center; gap:10px; }
.prof-schedule-time { font-size:1.6rem; font-weight:800; color:var(--accent); }
.prof-schedule-sub { font-size:.8rem; opacity:.65; }

.prof-hourly-wrap { position:relative; }
.prof-hourly-canvas { width:100%; height:90px; display:block; }

/* ── Favorites (fav-btn) ────────────────────────────────── */
.user-row-wrap { display:flex; align-items:center; gap:4px; }
.user-row-wrap .user-row { flex:1; }
.fav-btn {
  background:transparent;
  border:none;
  color:var(--muted);
  cursor:pointer;
  font-size:1rem;
  padding:2px 4px;
  border-radius:6px;
  opacity:0.4;
  transition:opacity .2s, color .2s;
  flex-shrink:0;
  line-height:1;
}
.fav-btn:hover, .fav-btn.fav-active { opacity:1; color:#ffd700; }

/* ── Ghosting Radar ─────────────────────────────────────── */
.ghosting-card {}
.ghosting-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 0;
  max-height: calc(5 * 38px);   /* show exactly 5 rows, rest scrollable */
  overflow-y: auto;
  padding-right: 4px;
}
.ghosting-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.ghosting-user { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.ghosting-days { color:var(--offline); font-size:0.78rem; white-space:nowrap; flex-shrink:0; }
.ghosting-date { color:var(--muted); font-size:0.75rem; white-space:nowrap; flex-shrink:0; }
.ghosting-row {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 88%, transparent);
  font-size:0.84rem;
  min-width:0;
}
.ghosting-user { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1; }
.ghosting-days { color:var(--offline); font-size:0.78rem; white-space:nowrap; flex-shrink:0; }
.ghosting-date { color:var(--muted); font-size:0.75rem; white-space:nowrap; flex-shrink:0; }

/* ── Server Trend + Ghosting nebeneinander ──────────────── */
.trend-ghost-row {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:14px;
  margin-top:14px;
}
.trend-ghost-row > script { display:none; }
.trend-card {}
.trend-canvas { width:100%; display:block; border-radius:6px; }

/* ── Weekly Recap ───────────────────────────────────────── */
.recap-card {}
.recap-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-top:4px;
}
.recap-stat {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:color-mix(in srgb, var(--panel-2) 88%, transparent);
  min-width:0;
}
.recap-label { color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; }
.recap-value { font-weight:700; font-size:1.3rem; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recap-user, .recap-day { font-size:1rem; }
.recap-sub { color:var(--muted); font-size:0.72rem; }
.recap-delta { font-size:0.74rem; font-weight:600; }
.recap-up { color:var(--online); }
.recap-down { color:var(--offline); }

/* ── Latenight Club ─────────────────────────────────────── */
.latenight-section { margin-top:10px; }

/* ── Contribution Calendar (Year) ───────────────────────── */
.year-calendar-wrap { width:100%; overflow-x:auto; }
.year-calendar-canvas { display:block; }

/* ── Mobile Layout ──────────────────────────────────────── */
@media (max-width: 768px) {
  .layout-grid { grid-template-columns: 1fr !important; }
  .stats-layout { grid-template-columns: 1fr !important; }
  .connect-layout { grid-template-columns: 1fr !important; }
  .trend-ghost-row { grid-template-columns: 1fr !important; }
  .container { padding: 0 10px 16px; }
  .topbar-center { flex-wrap: wrap; gap: 8px; }
  .topbar-actions { flex-wrap: wrap; gap: 6px; }
  .insights-table { font-size: 0.78rem; }
  .insights-table th, .insights-table td { padding: 6px 6px; }
  .chart-modal-box { width: 98vw; max-height: 90vh; }
  .chart-modal-head { flex-wrap: wrap; gap: 6px; }
  .profile-panel { width: 100% !important; }
  .brand-subtitle { display: none; }
  .card { min-height: unset; }
  .channels-list, .logs, .history-list { max-height: 50vh; }
}