/* RankPJ final brand and UX hardening */
:root {
  --brand: #155eef;
  --brand-2: #2ea0ff;
  --brand-dark: #081225;
  --brand-navy: #0b1224;
  --ink: #0b1220;
  --muted: #5b677f;
  --line: #dfe7f2;
  --surface: #ffffff;
  --surface-2: #f8fbff;
  --focus-ring: rgba(21, 94, 239, .18);
  --shadow: 0 24px 70px rgba(8, 18, 37, .09);
  --shadow-small: 0 14px 32px rgba(8, 18, 37, .07);
}
html { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body { color: var(--ink); }
::selection { background: rgba(46, 160, 255, .22); }
a, button, .button, .btn, .rpj-btn, .tool-launch-card, .workspace-tool-link, .client-row { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.app-topbar, .topbar.app-topbar {
  background: rgba(255,255,255,.92);
  border-bottom-color: rgba(223,231,242,.92);
  box-shadow: 0 12px 30px rgba(8,18,37,.045);
}
.topbar-brand-row { min-height: 48px; }
.brand-logo-link { padding: 0; border-radius: 12px; }
.brand-logo-link:hover { transform: translateY(-1px); }
.brand-logo-img { filter: drop-shadow(0 8px 14px rgba(8,18,37,.06)); }
.topbar-subtitle { color: #607089; letter-spacing: .1em; }
.nav-main-links, .nav-utility-links {
  border-color: rgba(223,231,242,.92);
  background: rgba(248,251,255,.9);
}
.nav a, .link-button { color: #53627d; }
.nav a:hover, .nav a.active, .link-button:hover {
  color: #081225;
  background: linear-gradient(180deg, #eef6ff, #eaf1ff);
}
.hero-card, .project-hero, .page-head, .report-header, .panel, .login-card, .stat, .mini-card, .feature-card, .tool-launch-card {
  border-color: rgba(223,231,242,.92);
}
.hero-dark {
  background: radial-gradient(circle at top right, rgba(46,160,255,.22), transparent 32%), linear-gradient(135deg, #081225, #0f1a33 58%, #155eef);
}
.button, .btn, .rpj-btn, button.button, button.btn {
  border-radius: 999px;
  font-weight: 900;
}
.button:not(.secondary):not(.danger):not(.bright), .btn.primary, .rpj-btn:not(.secondary):not(.soft):not(.good):not(.warn):not(.bad) {
  background: #081225;
  color: #ffffff;
}
.button.bright, .btn.brand, .rpj-btn.brand {
  background: linear-gradient(135deg, #155eef, #2ea0ff) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px rgba(21,94,239,.22);
}
.button.secondary, .btn.secondary, .rpj-btn.secondary {
  background: #edf4ff !important;
  color: #0b1224 !important;
}
.button:hover, .btn:hover, .rpj-btn:hover, .tool-launch-card:hover, .workspace-tool-link:hover, .client-row:hover {
  transform: translateY(-1px);
}
input, textarea, select, .rpj-input, .rpj-select, .rpj-textarea {
  border-color: #cbd7e7;
}
input:focus, textarea:focus, select:focus, .rpj-input:focus, .rpj-select:focus, .rpj-textarea:focus {
  border-color: #155eef !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}
.stat, .tool-launch-card, .workspace-tool-link, .access-level-card, .panel {
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}
.tool-launch-card {
  min-height: 104px;
  align-items: flex-start;
}
.tool-launch-card span { color: #155eef; }
.workspace-tool-link strong, .tool-launch-card strong { letter-spacing: -.015em; }
.chip, .status-pill, .rpj-chip, .pill, .badge {
  border: 1px solid rgba(21,94,239,.1);
}
.empty {
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border-color: #cbd7e7;
}
.footer {
  color: #6a7890;
  border-top: 1px solid rgba(223,231,242,.9);
  padding-top: 18px;
}
/* Native workflow pages that use their own sidebars */
.side, .rpj-side, .rpj-sidebar {
  background: radial-gradient(circle at top left, rgba(46,160,255,.18), transparent 28%), #081225 !important;
}
.logo, .rpj-mark, .brand-mark {
  background: linear-gradient(135deg, #155eef, #2ea0ff) !important;
}
.rpj-kicker, .eyebrow { color: #155eef !important; }
.rpj-title, .hero h1, h1, h2, h3 { color: var(--ink); }
.hero-dark h1, .hero-dark h2, .hero-dark h3 { color: #fff; }
.table-wrap, .rpj-table-wrap { border-color: rgba(223,231,242,.95); }
th, .rpj-table th { color: #607089; }
@media (max-width: 760px) {
  .topbar.app-topbar { padding: 14px 16px; }
  .topbar-brand-row { width: 100%; }
  .nav-main-links, .nav-utility-links { gap: 4px; }
  .nav a, .link-button { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}