/* Shared chrome for the two pages. Both live under /dashboard/, so the links
   between them are plain relative hrefs and work identically whether Flask is
   serving them or they are hosted as static files. */
:root{
  --bg:#0b1020; --card:#151c33; --card2:#111730; --fg:#e8ecf7; --muted:#8a93b3;
  --line:#232b4a; --rag:#5b8def; --graphrag:#f5a623; --agentic:#38c793;
  --warn:#f5a623; --bad:#f2647a; --good:#38c793;
}
.nav{
  position:sticky; top:0; z-index:50; margin:-28px -16px 22px; padding:0 16px;
  background:rgba(11,16,32,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1180px; margin:0 auto; display:flex; align-items:center;
  gap:18px; height:52px; flex-wrap:wrap;
}
.brand{
  font-weight:700; font-size:13.5px; color:var(--fg); text-decoration:none;
  letter-spacing:.01em; display:flex; align-items:center; gap:8px;
}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--agentic);flex:none}
.nav-links{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav-links a{
  padding:6px 13px; border-radius:8px; font-size:13px; text-decoration:none;
  color:var(--muted); border:1px solid transparent; white-space:nowrap;
}
.nav-links a:hover{color:var(--fg);background:var(--card2)}
.nav-links a[aria-current="page"]{
  color:var(--fg); background:var(--card); border-color:#33406e;
}
.nav-links a.ext{color:var(--muted)}
@media(max-width:620px){
  .nav{margin:-18px -12px 16px;padding:0 12px}
  .nav-in{height:auto;padding:10px 0;gap:10px}
  .nav-links{margin-left:0;width:100%}
  .nav-links a{flex:1;text-align:center}
}