/* Shared top bar for the tool pages, same look as the web app header.
   Rename the file (v2, v3...) on every change: /css/*.css is cached for a year. */
.rp-site-header { position: sticky; top: 0; z-index: 1000; background: #F5F5F7; border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 4px -4px rgba(0,0,0,0.15); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.rp-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; box-sizing: border-box; }
.rp-site-title { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; text-decoration: none; white-space: nowrap; background: linear-gradient(90deg, #111827 60%, #6366F1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.rp-site-nav { display: flex; align-items: center; gap: 18px; margin-left: 28px; margin-right: auto; }
.rp-site-nav a { font-size: 14px; font-weight: 500; color: #374151; padding: 6px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.rp-site-nav a:hover { background: rgba(0,0,0,0.05); color: #111827; }
.rp-site-nav a.active { color: #6366F1; background: rgba(99,102,241,0.08); font-weight: 700; }
.rp-site-header .header-actions { display: flex; align-items: center; gap: 10px; }
.rp-site-header .login-header-btn { background: #1A1A3A; color: #fff; border: none; margin: 0; padding: 0 12px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; }
.rp-site-header .login-header-btn:hover { background: #2A2A5A; }
.rp-site-header .login-header-btn svg { width: 14px; height: 14px; }
/* Same look as the web app "Get PRO" button */
.rp-site-header .rp-get-pro { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border: none; border-radius: 8px; background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.4px; white-space: nowrap; cursor: pointer; font-family: inherit; box-shadow: 0 2px 10px rgba(245,158,11,0.45); }
.rp-site-header .rp-get-pro:hover { filter: brightness(1.06); }
.rp-site-header .rp-get-pro[hidden] { display: none; }
@media (max-width: 720px) {
    .rp-site-header-inner { flex-wrap: wrap; row-gap: 0; padding: 12px 16px; }
    .rp-site-nav { order: 3; flex-basis: 100%; margin: 8px 0 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .rp-site-nav::-webkit-scrollbar { display: none; }
    .rp-site-nav a { font-size: 13px; background: rgba(0,0,0,0.04); }
}