/* Shared module UI primitives */
:root {
  --hub-radius-lg: 18px;
  --hub-radius-md: 12px;
}

.hub-page {
  padding: 16px;
}

.hub-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--hub-shadow);
  margin: 18px 18px 0 18px;
}

.hub-topbar__left h1 { margin: 0 0 4px; font-size: 20px; }
.hub-sub { font-size: 12px; color: var(--hub-muted); }

.hub-btn {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--hub-text);
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.hub-btn--ghost { background: transparent; }
.hub-btn--good { border-color: rgba(40,209,124,0.35); background: rgba(40,209,124,0.12); color: #a9f1cd; }
.hub-btn--danger { border-color: rgba(255,92,92,0.35); background: rgba(255,92,92,0.12); color: #ffb0b0; }

.hub-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--hub-radius-md);
  border: 1px solid var(--hub-border);
  background: rgba(0,0,0,0.3);
  color: var(--hub-text);
}

/* Compatibility bridge for legacy pages during migration. */
.hub-page .btn {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--hub-text);
  border-radius: 999px;
}

.hub-page .btn.btn-ghost,
.hub-page .btn-ghost {
  background: transparent;
}

.hub-page .btn.btn-primary,
.hub-page .btn-primary {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.10);
  color: var(--hub-text);
}

.hub-page .btn.btn-danger,
.hub-page .btn-danger {
  border-color: rgba(255,92,92,0.35);
  background: rgba(255,92,92,0.12);
  color: #ffb0b0;
}

.hub-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.hub-page select,
.hub-page textarea,
.hub-page .select {
  border: 1px solid var(--hub-border);
  background: rgba(0,0,0,0.3);
  color: var(--hub-text);
  border-radius: var(--hub-radius-md);
}

.hub-card {
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: var(--hub-shadow);
}

.hub-muted { color: var(--hub-muted); }

/* Header control normalization across migrated pages. */
.hub-page .header .link,
.hub-page .topbar .link,
.hub-page .sc-user .link,
.hub-page .inline .link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--hub-text);
  border-radius: 999px;
  padding: 8px 12px;
  text-decoration: none;
}

.hub-page .header .link:hover,
.hub-page .topbar .link:hover,
.hub-page .sc-user .link:hover,
.hub-page .inline .link:hover {
  text-decoration: none;
}

.hub-page .header .pill,
.hub-page .topbar .pill,
.hub-page .sc-user .pill,
.hub-page .inline .pill,
.hub-page .app-header .app-user-pill,
.hub-page .sig-topbar .sig-pill,
.hub-page .app-header #userPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  min-height: 36px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: var(--hub-muted);
}