/* Fully scoped: nothing outside #sr-app is affected */
#sr-app {
  display: flex;
  min-height: 100vh; /* FIX: use viewport height (100% needs html,body height) */
  color: #333;
  background: #f5f7fb;
  font-family: Arial, sans-serif;
}

/* Scoped reset */
#sr-app *, #sr-app *::before, #sr-app *::after { box-sizing: border-box; }

/* Sidebar */
#sr-app .sr-sidebar {
  width: 280px;
  background-color: #0174C4;
  color: #fff;
  padding: 20px;
  overflow-y: auto;
  flex: 0 0 280px;
}
#sr-app .sr-sidebar a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  line-height: 1.3;
}
#sr-app .sr-sidebar a:hover { background-color: #F26724; }
#sr-app .sr-sidebar a.active { background-color: #F26724; }
#sr-app .sr-sidebar a[aria-selected="true"] { background-color: #F26724; } /* FIX: keyboard/ARIA state parity */
#sr-app .sr-sidebar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Content */
#sr-app .sr-content {
  flex: 1 1 auto;
  padding: 28px;
  overflow-y: auto;
  background-color: #f5f7fb;
}
#sr-app h1, #sr-app h2, #sr-app h3 { color: #0174C4; margin-top: 0; }

/* Panels */
#sr-app .sr-panel { display: none; }
#sr-app .sr-panel.active { display: block; }

/* ARIA redundancy for robustness */
#sr-app .sr-panel[aria-hidden="true"] { display: none; }
#sr-app .sr-panel[aria-hidden="false"] { display: block; }

/* Mobile */
@media (max-width: 768px) {
  #sr-app { flex-direction: column; }
  #sr-app .sr-sidebar { width: 100%; flex-basis: auto; }
}