:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #0b1422;
  --panel: #111e30;
  --line: #243448;
  --text: #eaf2fa;
  --muted: #99aabe;
  --accent: #58d7c3;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, a { font: inherit; }
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { width: 235px; flex-shrink: 0; padding: 27px 16px; border-right: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 850; font-size: 20px; letter-spacing: .14em; color: var(--accent); padding: 0 13px 34px; }
.nav-label { font-size: 10px; font-weight: 750; color: var(--muted); letter-spacing: .14em; padding: 22px 13px 9px; }
.nav-link { display: block; color: var(--muted); text-decoration: none; padding: 13px 14px; border-radius: 10px; font-size: 14px; }
.nav-link:hover, .nav-link.active { color: var(--text); background: #203247; }
.nav-link.active { box-shadow: inset 3px 0 0 var(--accent); }
.app-main { min-width: 0; flex: 1; }
.app-header { min-height: 75px; padding: 18px 28px; display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); }
.header-title { flex: 1; font-size: 19px; margin: 0; }
.env-label { font-size: 11px; border: 1px solid var(--line); color: var(--muted); border-radius: 20px; padding: 7px 13px; }
.menu-toggle { display: none; background: transparent; border: 0; color: var(--text); font-size: 20px; cursor: pointer; }
.app-page-content { max-width: 1260px; margin: auto; padding: 34px 30px; }
.page { width: 100%; }
.page h2 { font-size: clamp(26px, 3vw, 34px); margin: 10px 0; }
.eyebrow { font-size: 11px; color: var(--accent); letter-spacing: .16em; font-weight: 750; }
.muted { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 640px; }
.status-panel { margin-top: 28px; border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 22px; color: var(--muted); font-size: 14px; }
.skeleton-block { background: linear-gradient(90deg, var(--panel), #203247, var(--panel)); background-size: 200% 100%; animation: shimmer 1.8s infinite; border-radius: 12px; height: 82px; margin: 16px 0; }
.skeleton-block:first-child { height: 42px; width: 48%; }
.bootloader { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.sidebar-mobile-backdrop { display: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 800px) {
  .app-sidebar { position: fixed; z-index: 20; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s ease; }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-mobile-backdrop.open { display: block; position: fixed; inset: 0; background: #0009; z-index: 19; }
  .menu-toggle { display: block; }
  .app-header { padding: 16px 20px; }
  .app-page-content { padding: 28px 20px; }
}
@media (prefers-reduced-motion: reduce) { .skeleton-block { animation: none; } }