/**
 * Hub PM (/project/pm) — mismo shell claro que operations_cost_dashboard.
 */
body.rum-pm-hub .page {
  display: grid;
  gap: 10px;
  max-width: 1240px;
}

body.rum-pm-hub h1,
body.rum-pm-hub h2,
body.rum-pm-hub h3 {
  margin: 0;
  font-family: var(--rum-font);
  color: var(--text);
  line-height: 1.08;
}

body.rum-pm-hub p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

body.rum-pm-hub .section-label {
  display: block;
  font-family: var(--rum-font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}

body.rum-pm-hub .pm-hero-shell {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

body.rum-pm-hub .pm-hero-shell p {
  max-width: 900px;
  font-size: 0.98rem;
}

body.rum-pm-hub .pm-hero-note {
  font-size: 0.88rem;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}

body.rum-pm-hub .pm-pivot-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border: 1px solid rgba(42, 109, 176, 0.2);
  border-left: 4px solid var(--rum);
  border-radius: var(--r-panel);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}

body.rum-pm-hub .pm-pivot-banner strong {
  display: block;
  font-size: 0.98rem;
  color: var(--text);
  margin-bottom: 4px;
}

body.rum-pm-hub .pm-pivot-banner p {
  font-size: 0.88rem;
  max-width: 640px;
}

body.rum-pm-hub .pm-pivot-banner .btn-shell {
  flex-shrink: 0;
}

body.rum-pm-hub .pm-hub-section {
  display: grid;
  gap: 8px;
}

body.rum-pm-hub .pm-hub-section-head {
  display: grid;
  gap: 4px;
}

body.rum-pm-hub .pm-hub-section-head h2 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 800;
}

body.rum-pm-hub .pm-hub-section-note {
  font-size: 0.92rem;
  max-width: 760px;
}

body.rum-pm-hub .pm-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

body.rum-pm-hub .pm-tool-card {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 148px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

body.rum-pm-hub .pm-tool-card:hover {
  border-color: rgba(42, 109, 176, 0.35);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

body.rum-pm-hub .pm-tool-card:focus-visible {
  outline: 2px solid var(--rum);
  outline-offset: 2px;
}

body.rum-pm-hub .pm-tool-code {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rum);
  font-weight: 800;
}

body.rum-pm-hub .pm-tool-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

body.rum-pm-hub .pm-tool-card p {
  font-size: 0.88rem;
}

body.rum-pm-hub .pm-empty {
  padding: 16px;
  border-radius: var(--r-panel);
  border: 1px dashed var(--border);
  background: var(--card-soft);
  color: var(--muted);
  max-width: 640px;
}

body.rum-pm-hub .pm-empty a {
  color: var(--rum);
  font-weight: 700;
}