/* Shared layout: sidebar + content. Loaded by every page after any per-product stylesheet. */
:root { color-scheme: dark; }
body { max-width: none; margin: 0; padding: 0; background: #111; color: #e8e8e8; font: 16px/1.6 system-ui, sans-serif; }
a { color: #6da2ff; }
.shell { display: flex; min-height: 100vh; }
.side { flex: 0 0 210px; box-sizing: border-box; padding: 24px 16px; border-right: 1px solid #262626; background: #151515; }
.side .brand { display: block; font-size: 1.25rem; font-weight: 700; color: #e8e8e8; text-decoration: none; margin-bottom: 20px; }
.side a.item { display: block; padding: 8px 12px; border-radius: 6px; color: #cfcfcf; text-decoration: none; }
.side a.item:hover, .side a.item.on { background: #222; color: #fff; }
.side .soon { display: block; padding: 8px 12px; color: #6f6f6f; font-size: .9rem; }
main { flex: 1; min-width: 0; max-width: 720px; box-sizing: border-box; padding: 32px 24px 64px; }
@media (max-width: 640px) {
  .shell { flex-direction: column; }
  .side { flex: none; border-right: 0; border-bottom: 1px solid #262626; padding: 12px 16px; }
  .side .brand { margin-bottom: 8px; }
  main { padding: 20px 16px 48px; }
}