/* The site header and footer for the static pages (home, tour).
   They must look exactly like the app's top bar and footer, so the values here
   mirror frontend/src/workspace.css (.appbar) and styles.css (.footer) in the
   dark theme. Change one, change the other. Classes are prefixed rb- so the
   pages' own .nav/.btn/.brand rules cannot leak in. */
.rb-bar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 56px; background: #0a0c12e6;
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid #1d2230; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; }
.rb-in { height: 100%; display: flex; align-items: center; gap: 22px; padding: 0 24px; max-width: 1480px; margin: 0 auto; box-sizing: border-box; }
.rb-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; color: #e9ecf5; text-decoration: none; flex: none; }
.rb-brand svg { width: 26px; height: 26px; }
.rb-ws { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #e9ecf5; min-width: 0; max-width: 240px; margin-left: -12px; }
.rb-ws > span:first-child { color: #555c70; }
.rb-ws .rb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-plan { font: 500 10.5px 'Geist Mono', ui-monospace, monospace; text-transform: capitalize; padding: 2px 6px; border-radius: 5px; background: #171b27; color: #b3b9c9; flex: none; }
.rb-plan.pro, .rb-plan.team { background: #53e0ff; color: #06070b; }
.rb-nav { display: flex; gap: 2px; height: 100%; }
.rb-nav a { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; color: #7c8397; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rb-nav a svg { width: 15px; height: 15px; }
.rb-nav a:hover { color: #e9ecf5; }
.rb-nav a.on { color: #e9ecf5; border-bottom-color: #53e0ff; }
.rb-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rb-jump { display: flex; align-items: center; gap: 8px; width: 250px; height: 34px; padding: 0 10px; border: 1px solid #1d2230; border-radius: 9px; box-sizing: border-box;
  background: #11141d; color: #7c8397; font: 13px 'Geist', ui-sans-serif, system-ui, sans-serif; text-decoration: none; }
.rb-jump:hover { border-color: #2a3042; color: #b3b9c9; }
.rb-jump svg { width: 14px; height: 14px; }
.rb-jump span { flex: 1; }
.rb-jump kbd { font: 11px 'Geist Mono', ui-monospace, monospace; border: 1px solid #2a3042; border-radius: 5px; padding: 1px 5px; color: #7c8397; }
.rb-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #0f2530; color: #7fe8ff; font-weight: 600; font-size: 13px;
  border: 1px solid #1d2230; text-decoration: none; }
.rb-sign { display: inline-flex; align-items: center; padding: 6px 11px; border-radius: 6px; font: 500 13px/1.2 'Geist', ui-sans-serif, system-ui, sans-serif;
  background: linear-gradient(100deg, #53e0ff 0%, #8fa2ff 50%, #9b7bff 100%); color: #06070b; text-decoration: none; box-shadow: 0 8px 26px -12px #53e0ff88; }
.rb-sign:hover { filter: brightness(1.08); }
.rb-toggle { display: none; width: 34px; height: 34px; place-items: center; border-radius: 8px; background: none; border: 1px solid transparent; color: #7c8397; cursor: pointer; }
.rb-toggle svg { width: 18px; height: 18px; }
@media (max-width: 1180px) { .rb-jump { width: auto; } .rb-jump span, .rb-jump kbd { display: none; } .rb-ws { display: none; } }
@media (max-width: 900px) {
  .rb-toggle { display: inline-grid; }
  .rb-nav { display: none; }
  .rb-nav.open { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 56px; height: auto;
    background: #0c0e15; border-bottom: 1px solid #1d2230; padding: 8px 14px 12px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); }
  .rb-nav.open a { padding: 11px 10px; border-bottom: 0; border-left: 2px solid transparent; }
  .rb-nav.open a.on { border-left-color: #53e0ff; }
  .rb-in { padding: 0 16px; gap: 12px; }
}

.rb-foot { border-top: 1px solid #1d2230; margin-top: 40px; position: relative; z-index: 1; font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; }
.rb-foot-in { max-width: 1200px; margin: 0 auto; padding: 26px 24px; box-sizing: border-box; display: flex; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 13.5px; color: #7c8397; }
.rb-foot-in a { color: #7c8397; text-decoration: none; }
.rb-foot-in a:hover { color: #e9ecf5; text-decoration: underline; text-underline-offset: 2px; }
.rb-foot-in b { color: #e9ecf5; font-weight: 600; }
.rb-foot-in .rb-note { margin-left: auto; }
@media (max-width: 640px) { .rb-foot-in { padding: 26px 16px; } .rb-foot-in .rb-note { margin-left: 0; width: 100%; } }