:root {
  --bg: #0f1115; --panel: #181b22; --panel2: #1f232c; --line: #2a2f3a;
  --txt: #e7e9ee; --muted: #9aa3b2; --accent: #3b82f6; --accent2: #2563eb;
  --warn: #f59e0b; --ok: #22c55e;
  --lac-1: #7cc24b; --lac-2: #38c5a8;
}
* { box-sizing: border-box; }
body.hub-body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 15px/1.5 -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }

/* ---- top bar ---- */
.hub-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.hub-top-logos { display: flex; align-items: center; gap: 28px; }
.hub-top-logos img { height: 42px; width: auto; display: block; }
.hub-logo-lac { max-width: 220px; }
.hub-logo-ss  { max-width: 180px; }
.hub-logout { color: var(--muted); font-size: 13px; }
.hub-logout:hover { color: var(--accent); }

/* ---- hub home ---- */
.hub-wrap { max-width: 980px; margin: 60px auto; padding: 0 24px; }
.hub-wrap h1 { font-size: 28px; margin: 0 0 6px; }
.hub-sub { color: var(--muted); margin: 0 0 32px; }

.hub-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.hub-card {
  display: block; padding: 32px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hub-card:hover {
  transform: translateY(-2px);
  border-color: var(--lac-1);
  box-shadow: 0 12px 32px rgba(124, 194, 75, .12);
}
.hub-card-icon { font-size: 38px; margin-bottom: 12px; }
.hub-card h2 { font-size: 22px; margin: 0 0 10px; }
.hub-card p { color: var(--muted); margin: 0 0 18px; line-height: 1.55; }
.hub-card-cta {
  display: inline-block; color: var(--lac-1); font-weight: 600;
  border-bottom: 2px solid transparent; transition: border-color .15s;
}
.hub-card:hover .hub-card-cta { border-color: var(--lac-1); }

/* ---- login ---- */
.hub-login {
  max-width: 440px; margin: 0 auto; padding: 80px 28px 40px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hub-login-logos { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; }
.hub-login-logos img { height: 50px; width: auto; }
.hub-login h1 { font-size: 26px; margin: 0 0 4px; }
.hub-login .sub { color: var(--muted); margin: 0 0 24px; }
.hub-login-card {
  width: 100%; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; display: grid; gap: 14px;
}
.hub-login-card input[type=password] {
  background: var(--panel2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 8px; padding: 12px 14px; font: inherit;
}
.hub-btn {
  background: linear-gradient(135deg, var(--lac-1), var(--lac-2));
  color: #0f1115; border: 0; border-radius: 8px;
  padding: 12px 20px; font-weight: 700; font: inherit; cursor: pointer;
  transition: filter .15s;
}
.hub-btn:hover { filter: brightness(1.05); }
.hub-error { color: var(--warn); margin: 0; font-size: 13px; }

@media (max-width: 520px) {
  .hub-top { padding: 12px 16px; }
  .hub-top-logos { gap: 14px; }
  .hub-top-logos img { height: 32px; }
  .hub-wrap { margin: 32px auto; }
  .hub-card { padding: 24px; }
}