/* layout */
.hub-layout { display: flex; gap: 20px; align-items: flex-start; }
.hub-sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 24px; }
.hub-content { flex: 1; min-width: 0; }

/* sidebar section label */
.hub-group-label {
  font: 600 9px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-5);
  padding: 0 4px;
  margin: 12px 0 4px;
}
.hub-group-label:first-child { margin-top: 0; }

/* compact sidebar item */
.hub-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  border-radius: var(--r-6);
  border: var(--bw) solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  transition: all var(--tr);
}
.hub-item:hover { border-color: var(--accent); background: var(--accent-tint); }
.hub-item.is-active { border-color: var(--accent); background: var(--accent-tint); }
.hub-item-icon { width: 22px; height: 22px; display: grid; place-items: center; flex-shrink: 0; font-size: 15px; line-height: 1; }
.hub-item-icon img { width: 18px; height: 18px; object-fit: contain; display: block; }
.hub-item-name { font: 600 12px/1 var(--font-body); color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Snowflake accordion group ── */
.hub-accordion {
  background: var(--bg-card);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-6);
  overflow: hidden;
}
.hub-accordion + .hub-accordion { margin-top: 10px; }

.hub-acc-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background var(--tr);
  user-select: none;
}
.hub-acc-hdr:hover { background: var(--bg-soft); }

.hub-acc-icon { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; font-size: 18px; line-height: 1; }
.hub-acc-icon img { width: 22px; height: 22px; object-fit: contain; display: block; }
.hub-acc-meta { flex: 1; min-width: 0; }
.hub-acc-name { font: 600 13px/1 var(--font-body); color: var(--fg-1); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
.hub-acc-tag { font: 600 9px/1 var(--font-mono); color: var(--fg-5); background: var(--bg-strip); border: var(--bw) solid var(--border); border-radius: var(--r-2); padding: 2px 5px; letter-spacing: .04em; }
.hub-acc-desc { font: 400 11px/1.5 var(--font-body); color: var(--fg-4); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-acc-chevron { font-size: 11px; color: var(--fg-4); transition: transform var(--tr); flex-shrink: 0; }
.hub-acc-hdr.open .hub-acc-chevron { transform: rotate(180deg); }

.hub-acc-body { display: none; border-top: 1px solid var(--border-soft); }
.hub-acc-body.open { display: block; }
.hub-acc-pages { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.hub-acc-page {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-4);
  border: var(--bw) solid var(--border);
  background: var(--bg-soft);
  text-decoration: none;
  transition: all var(--tr);
}
.hub-acc-page:hover { border-color: var(--accent); background: var(--accent-tint); }
.hub-acc-page-label { flex: 1; font: 400 11.5px/1 var(--font-body); color: var(--fg-2); }
.hub-acc-page-arr { font: 500 10px/1 var(--font-mono); color: var(--accent); }