/* CX1.UK-inspired palette: deep teal background, white type, blue accents */
:root {
  --cx1-bg: #193f56;
  --cx1-bg-deep: #142f40;
  --cx1-surface: rgba(255, 255, 255, 0.08);
  --cx1-surface-border: rgba(255, 255, 255, 0.18);
  --cx1-text: #ffffff;
  --cx1-muted: rgba(255, 255, 255, 0.75);
  --cx1-accent: #007bff;
  --cx1-accent-hover: #3395ff;
  --cx1-danger: #ff6b6b;
}

body.hub-body {
  min-height: 100vh;
  font-family: "Exo 2", system-ui, -apple-system, sans-serif;
  background: linear-gradient(160deg, var(--cx1-bg-deep) 0%, var(--cx1-bg) 45%, #1a4a63 100%);
  color: var(--cx1-text);
}

.hub-navbar {
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--cx1-surface-border);
  backdrop-filter: blur(8px);
}

.hub-navbar .navbar-brand,
.hub-navbar .nav-link {
  color: var(--cx1-text) !important;
}

.hub-navbar .nav-link:hover {
  color: var(--cx1-accent-hover) !important;
}

.hub-card {
  background: var(--cx1-surface);
  border: 1px solid var(--cx1-surface-border);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.hub-card .card-title {
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.02em;
}

.hub-logo {
  max-width: 220px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.hub-form .form-control,
.hub-form .form-select {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.hub-form .form-control:focus {
  border-color: var(--cx1-accent);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.hub-form .form-label {
  color: var(--cx1-muted);
  font-size: 0.9rem;
}

.btn-hub-primary {
  background: var(--cx1-accent);
  border-color: var(--cx1-accent);
  font-weight: 600;
}

.btn-hub-primary:hover {
  background: var(--cx1-accent-hover);
  border-color: var(--cx1-accent-hover);
}

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

.hub-alert-error {
  background: rgba(255, 107, 107, 0.15);
  border: 1px solid rgba(255, 107, 107, 0.45);
  color: #fff;
}

.hub-alert-success {
  background: rgba(40, 167, 69, 0.2);
  border: 1px solid rgba(40, 167, 69, 0.5);
  color: #fff;
}