/* ============================================================
   Channels / Connections — styles  (token-only · dual-theme)
   ============================================================ */
.chn{ flex:1 1 auto; min-width:0; height:100vh; min-height:0; display:flex; flex-direction:column;
  position:relative; isolation:isolate; overflow:hidden; }

/* command bar */
.ch-bar{ flex:0 0 auto; display:flex; align-items:center; gap:22px; padding:14px 20px;
  background:var(--glass-head); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border-bottom:1px solid var(--line-soft); position:relative; }
.ch-bar::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--acc-line),var(--ai-b),transparent); opacity:.5; }
.ch-id{ flex:0 0 auto; padding-right:22px; border-right:1px solid var(--line-soft); }
.ch-hud{ flex:1; display:flex; align-items:center; gap:18px; min-width:0; }
.ch-hdiv{ width:1px; align-self:stretch; background:var(--line-soft); }
.ch-h{ display:flex; align-items:center; gap:11px; }
.ch-h .hic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--acc-2); background:var(--acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); flex:0 0 34px; }
.ch-h .hic.warn{ color:var(--warn); background:rgba(255,180,84,.14); box-shadow:inset 0 0 0 1px rgba(255,180,84,.3); }
.ch-h .hv{ font-size:var(--fs-stat-1); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); line-height:1; display:flex; align-items:baseline; gap:6px; }
.ch-h .hd{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--good); }
.ch-h .hl{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; margin-top:3px; }

.ch-body{ flex:1; min-height:0; display:flex; align-items:stretch; }
.ch-main{ flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column;
  background:var(--glass-2); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.ch-main-scroll{ flex:1; overflow-y:auto; padding:18px 20px 28px; }
.ch-sec-h{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.ch-count{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); }

.ch-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.ch-card{ display:flex; flex-direction:column; gap:14px; padding:16px; border-radius:18px; cursor:pointer; text-align:left; position:relative;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .26s var(--spring), box-shadow .26s var(--out), border-color .2s var(--out); }
.ch-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.ch-card.on{ border-color:hsl(var(--ch) 70% 55%); box-shadow:0 0 0 1px hsl(var(--ch) 70% 55%), 0 18px 44px -18px hsl(var(--ch) 70% 50% / .4); }
.cc-top{ display:flex; align-items:center; gap:12px; }
.cc-av{ position:relative; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:0 0 46px;
  box-shadow:0 6px 18px -6px hsl(var(--ch) 70% 50% / .6), inset 0 1px 0 rgba(255,255,255,.3); }
.cc-av.lg{ width:56px; height:56px; border-radius:17px; flex:0 0 56px; }
.cc-plat{ position:absolute; bottom:-4px; right:-4px; width:20px; height:20px; border-radius:7px; display:grid; place-items:center; color:#fff;
  background:radial-gradient(120% 120% at 30% 20%, hsl(var(--ch) 80% 60%), hsl(var(--ch) 68% 42%)); border:2px solid var(--bg); box-shadow:0 2px 8px -2px hsl(var(--ch) 80% 50% / .7); }
.cc-who{ flex:1; min-width:0; }
.cc-who .nm{ font-size:var(--fs-lg); font-weight:var(--fw-black); color:var(--ink); display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-who .nm .vf{ color:var(--acc-2); flex:0 0 auto; }
.cc-who .pl{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-3); margin-top:1px; }
.cc-status{ display:flex; align-items:center; gap:6px; font-size:var(--fs-micro); font-weight:var(--fw-black); text-transform:uppercase; letter-spacing:.04em; flex:0 0 auto; }
.cc-status .d{ width:7px; height:7px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.cc-foll{ display:flex; align-items:baseline; gap:8px; }
.cc-foll .fc{ font-size:var(--fs-stat-2); font-weight:var(--fw-black); letter-spacing:-.02em; color:var(--ink); display:flex; align-items:baseline; gap:8px; }
.cc-foll .fc .g{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--good); }
.cc-foll .fl{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); }
.cc-stats{ display:flex; gap:8px; }
.cc-stats .cs{ flex:1; text-align:center; padding:8px 4px; border-radius:10px; background:var(--well); border:1px solid var(--line-soft); }
.cc-stats .cs b{ display:block; font-size:var(--fs-base); font-weight:var(--fw-black); color:var(--ink); }
.cc-stats .cs span{ font-size:9px; font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.cc-health .hh{ display:flex; justify-content:space-between; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); }
.cc-health .hbar{ height:6px; border-radius:4px; background:var(--well-2); margin-top:5px; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-soft); }
.cc-health .hbar i{ display:block; height:100%; border-radius:4px; }
.cc-health .hmeta{ display:flex; justify-content:space-between; margin-top:7px; }
.cc-health .hmeta span{ display:flex; align-items:center; gap:4px; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); }
.cc-fix{ position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:8px;
  font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; background:var(--warn); box-shadow:0 4px 12px -4px rgba(255,180,84,.6); }

/* available integrations */
.ch-add-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:12px; }
.ch-add{ display:flex; align-items:center; gap:12px; padding:13px; border-radius:14px; cursor:pointer; text-align:left;
  background:var(--well); border:1px dashed var(--line-strong); transition:.18s var(--out); }
.ch-add:hover{ border-style:solid; border-color:hsl(var(--ch) 60% 55%); background:var(--hover); transform:translateY(-2px); }
.ch-add-ic{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:0 0 40px; color:#fff; font-weight:var(--fw-black); font-size:var(--fs-lg);
  background:radial-gradient(120% 120% at 30% 20%, hsl(var(--ch) 70% 56%), hsl(var(--ch) 60% 40%)); box-shadow:0 6px 16px -6px hsl(var(--ch) 70% 50% / .6); }
.ch-add-meta{ flex:1; min-width:0; }
.ch-add-meta .n{ font-size:var(--fs-base); font-weight:var(--fw-black); color:var(--ink); }
.ch-add-meta .d{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-add-btn{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--ink-2); background:var(--well-2); flex:0 0 30px; transition:.16s var(--out); }
.ch-add:hover .ch-add-btn{ color:#fff; background:hsl(var(--ch) 65% 52%); }

/* detail panel */
.ch-detail{ flex:0 0 auto; min-height:0; display:flex; flex-direction:column;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); border-left:1px solid var(--line-soft); }
.ch-det-scroll{ flex:1; overflow-y:auto; padding:18px; min-height:0; }
.cd-head{ display:flex; align-items:center; gap:13px; }
.cd-who .nm{ font-size:var(--fs-xl); font-weight:var(--fw-black); color:var(--ink); display:flex; align-items:center; gap:6px; }
.cd-who .nm .vf{ color:var(--acc-2); }
.cd-who .pl{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-3); margin-top:2px; }
.cd-banner{ display:flex; align-items:center; gap:11px; padding:12px 13px; border-radius:13px; margin-top:16px; background:var(--well); border:1px solid var(--line-soft); }
.cd-banner.reauth{ background:rgba(255,180,84,.1); border-color:rgba(255,180,84,.34); }
.cd-banner.error{ background:rgba(255,107,125,.1); border-color:rgba(255,107,125,.34); }
.cd-banner .bi{ flex:0 0 auto; }
.cd-banner .bt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cd-banner .bt b{ font-size:var(--fs-sub); font-weight:var(--fw-black); }
.cd-banner .bt span{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); line-height:1.4; }
.cd-reconnect{ display:flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:9px; flex:0 0 auto;
  font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; background:var(--warn); box-shadow:0 4px 12px -4px rgba(255,180,84,.6); }

.cd-block{ margin-top:20px; }
.cd-bh{ display:flex; align-items:center; gap:7px; font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.cd-bh svg{ color:var(--acc-2); }
.cd-row,.cd-def,.cd-scope{ display:flex; align-items:center; gap:11px; }
.cd-row{ padding:12px 13px; border-radius:13px; background:var(--well); border:1px solid var(--line-soft); }
.cd-row-l{ flex:1; display:flex; align-items:center; gap:11px; color:var(--acc-2); }
.cd-row-l .rt{ font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--ink); }
.cd-row-l .rs{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; }
.cd-scopes{ display:flex; flex-direction:column; gap:7px; }
.cd-scope{ padding:9px 11px; border-radius:11px; background:var(--well); border:1px solid var(--line-soft); }
.cd-scope .sc-ic{ width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:0 0 22px; color:var(--ink-4); background:var(--well-2); }
.cd-scope .sc-ic.on{ color:var(--good); background:rgba(70,217,160,.14); }
.cd-scope .sc-n{ flex:1; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink); }
.cd-defaults{ display:flex; flex-direction:column; gap:7px; }
.cd-def{ padding:10px 12px; border-radius:11px; background:var(--well); border:1px solid var(--line-soft); }
.cd-def .dl{ flex:1; display:flex; align-items:center; gap:8px; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.cd-def .dl svg{ color:var(--ink-3); }
.cd-def .dv{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--ink); }
.cd-sig{ padding:11px 12px; border-radius:11px; background:var(--well); border:1px solid var(--line-soft); }
.cd-sig .dl{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.cd-sig .dl svg{ color:var(--ink-3); }
.cd-sig .sig{ margin-top:8px; padding:9px 11px; border-radius:9px; background:var(--well-2); border:1px solid var(--line-soft); font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink); }
.cd-log{ display:flex; flex-direction:column; gap:2px; }
.cd-le{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line-soft); }
.cd-le:last-child{ border-bottom:0; }
.cd-le .lic{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:var(--ink-3); background:var(--well); flex:0 0 26px; }
.cd-le .le-e{ flex:1; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-2); }
.cd-le .le-t{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); }

.ch-det-foot{ flex:0 0 auto; display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--line-soft); background:var(--glass-head); }
.cd-foot-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; height:40px; border-radius:11px; font-size:var(--fs-base); font-weight:var(--fw-black);
  color:var(--ink); background:var(--well); border:1px solid var(--line); transition:.16s var(--out); }
.cd-foot-btn:hover{ border-color:var(--acc-line); color:var(--acc-2); }
.cd-foot-btn.danger:hover{ border-color:rgba(255,107,125,.4); color:var(--bad); background:rgba(255,107,125,.08); }

@media (max-width:1240px){ .ch-hud .ch-h:nth-child(n+5){ display:none; } }