.hub-surface,
.hub-panel {
  background: var(--hub-surface);
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-lg);
  box-shadow: var(--hub-shadow-panel);
}

.hub-btn-primary,
.hub-btn-secondary,
.hub-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: var(--hub-radius-pill);
  font: 700 13px/1 var(--hub-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--hub-transition), border-color var(--hub-transition), background var(--hub-transition), box-shadow var(--hub-transition);
}

.hub-btn-primary {
  border: 1px solid var(--hub-border-strong);
  color: #021018;
  background: linear-gradient(135deg, var(--hub-accent-cyan), var(--hub-accent-blue));
  box-shadow: var(--hub-shadow-glow);
}

.hub-btn-secondary {
  border: 1px solid var(--hub-border);
  color: var(--hub-text);
  background: rgba(15, 23, 42, 0.72);
}

.hub-btn-danger {
  border: 1px solid rgba(248, 113, 113, 0.36);
  color: #fecaca;
  background: rgba(127, 29, 29, 0.22);
}

.hub-btn-primary:hover,
.hub-btn-secondary:hover,
.hub-btn-danger:hover {
  transform: translateY(-1px);
}

.hub-input,
.hub-textarea,
.hub-select {
  width: 100%;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-md);
  background: rgba(15, 23, 42, 0.72);
  color: var(--hub-text);
  padding: 11px 12px;
  font: 500 14px/1.35 var(--hub-font-body);
  outline: none;
  transition: border-color var(--hub-transition), box-shadow var(--hub-transition), background var(--hub-transition);
}

.hub-textarea {
  min-height: 120px;
  resize: vertical;
}

.hub-input:focus,
.hub-textarea:focus,
.hub-select:focus,
.hub-input:focus-visible,
.hub-textarea:focus-visible,
.hub-select:focus-visible {
  border-color: var(--hub-border-strong);
  box-shadow: 0 0 0 3px var(--hub-accent-cyan-soft);
}

.hub-section-title {
  margin: 0 0 12px;
  color: var(--hub-text);
  font: 800 16px/1.2 var(--hub-font-body);
}

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

.hub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hub-border);
  border-radius: var(--hub-radius-pill);
  padding: 6px 10px;
  color: var(--hub-text-muted);
  background: rgba(15, 23, 42, 0.58);
  font: 700 11px/1 var(--hub-font-body);
}