/* Hub v55: clean operations visual system. No access, routing or data behavior changes. */
:root {
  --ops-navy: #10233f;
  --ops-blue: #1769c2;
  --ops-teal: #0d8c82;
  --ops-bg: #f2f6fa;
  --ops-line: #d9e3ee;
  --ops-muted: #607189;
  font-family: "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}

.page-hub {
  background:
    radial-gradient(circle at 86% 0, rgba(34, 135, 178, .10), transparent 28rem),
    var(--ops-bg);
  font-family: "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}
.page-hub .shell { width: min(1320px, calc(100% - 28px)); }
.page-hub .topbar {
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 7px 22px rgba(20,49,82,.06);
  backdrop-filter: blur(12px);
}
.page-hub .brand strong { color: var(--ops-navy); font-size: 17px; }
.page-hub .brand small { color: var(--ops-muted); font-size: 11px; }
.page-hub .ghost { min-height: 43px; border-radius: 11px; font-size: 14px; font-weight: 800; }

.page-hub .hero {
  margin: 12px 0 10px;
  padding: 28px 30px;
  border-radius: 22px;
  background: linear-gradient(115deg, #0d2949 0%, #0b6176 62%, #139b8e 100%);
  box-shadow: 0 15px 34px rgba(13,73,98,.16);
}
.page-hub .hero h1 { font-size: clamp(34px, 5vw, 58px); }
.page-hub .hero > p:last-child { color: #d8eeef; font-size: 16px; }

.hub-status-assistant { box-shadow: 0 14px 32px rgba(10,39,69,.17); }
.assistant-action { border-color: rgba(198,220,242,.32); background: rgba(255,255,255,.10); }
.assistant-action span { color: #d6e2f0; }

.page-hub .section-heading { margin: 23px 2px 14px; }
.page-hub .section-heading h2 { color: var(--ops-navy); font-size: 25px; font-weight: 900; }
.page-hub .section-heading > span { color: var(--ops-muted); font-size: 13px; }
.page-hub .primary-grid { gap: 13px; }
.page-hub .primary-card {
  min-height: 228px;
  padding: 18px;
  border: 1px solid var(--ops-line);
  border-top: 4px solid var(--primary-accent, var(--ops-blue));
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20,49,82,.07);
}
.page-hub .primary-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20,49,82,.11); }
.page-hub .primary-card .primary-icon { width: 45px; height: 45px; border-radius: 13px; font-size: 13px; }
.page-hub .primary-card small { margin-top: 15px; font-size: 10px; }
.page-hub .primary-card h3 { margin: 6px 0 8px; color: var(--ops-navy); font-size: 21px; line-height: 1.25; }
.page-hub .primary-card p { color: var(--ops-muted); font-size: 14px; line-height: 1.55; }
.page-hub .primary-card b { font-size: 13px; }
.page-hub .operation-links { gap: 8px; }
.page-hub .operation-links a { min-height: 66px; border-color: #d8e3ed; border-radius: 11px; background: #f7fafc; }

.page-hub .secondary-grid { gap: 10px; }
.page-hub .secondary-grid > a {
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--ops-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(20,49,82,.05);
}
.page-hub .secondary-grid > a:hover { border-color: #a9c9e7; background: #f5faff; }
.page-hub .secondary-grid > a span { background: #eaf3ff; color: var(--ops-blue); }
.page-hub .secondary-grid > a strong { color: #263c55; font-size: 14px; }

.page-hub footer { margin-top: 26px; }

html[data-dark="true"] .page-hub { --ops-bg: #071124; --ops-line: #263757; --ops-muted: #a8b5c8; }
html[data-dark="true"] .page-hub .topbar,
html[data-dark="true"] .page-hub .primary-card,
html[data-dark="true"] .page-hub .secondary-grid > a { background: #101d38; }
html[data-dark="true"] .page-hub .primary-card h3,
html[data-dark="true"] .page-hub .section-heading h2,
html[data-dark="true"] .page-hub .secondary-grid > a strong,
html[data-dark="true"] .page-hub .brand strong { color: #eef5ff; }

@media (max-width: 760px) {
  .page-hub .shell { width: min(100% - 16px, 1320px); }
  .page-hub .topbar { min-height: 62px; padding: 8px 10px; }
  .page-hub .hero { padding: 22px 19px; }
  .page-hub .hero h1 { font-size: 34px; }
  .page-hub .primary-card { min-height: 200px; }
  .page-hub .section-heading h2 { font-size: 22px; }
}