/* Panel shell: dark sidebar, content area. */
.pi-shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.pi-side { background: var(--pi-sidebar); color: var(--pi-sidebar-text); padding: var(--pi-space-4) var(--pi-space-3); display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.pi-brand { display: flex; align-items: center; gap: 10px; color: var(--pi-on-dark); font-weight: 700; letter-spacing: -0.03em; font-size: var(--pi-text-m); padding: var(--pi-space-1) var(--pi-space-2) var(--pi-space-4); text-decoration: none; }
.pi-brand__mark { display: grid; place-content: center; width: 26px; height: 26px; border: 1.5px solid var(--pi-accent); color: var(--pi-accent); font-size: 24px; line-height: 1; }
.pi-side__group { font-size: var(--pi-text-xs); letter-spacing: .14em; text-transform: uppercase; opacity: .6; padding: var(--pi-space-4) var(--pi-space-2) var(--pi-space-1); }
.pi-side a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--pi-radius-s); text-decoration: none; font-size: var(--pi-text-s); position: relative; }
.pi-side a.is-active { background: var(--pi-sidebar-active); color: var(--pi-on-dark); font-weight: 600; }
.pi-side a.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pi-module, var(--pi-accent)); }
.pi-side__foot { margin-top: auto; padding: var(--pi-space-4) var(--pi-space-2) 0; font-size: var(--pi-text-xs); }
.pi-side__foot b { display: block; color: var(--pi-on-dark); font-size: var(--pi-text-s); }
.pi-side__foot form { margin-top: var(--pi-space-2); }
.pi-side__foot button { color: var(--pi-sidebar-text); }
.pi-main { padding: var(--pi-space-6) clamp(16px, 4vw, 48px); min-width: 0; }
.pi-content { max-width: 1280px; margin: 0 auto; }
.pi-test-tag { display: inline-block; margin-left: var(--pi-space-2); font-size: 9px; letter-spacing: .12em; padding: 2px 6px; border: 1px solid currentColor; border-radius: var(--pi-radius-s); opacity: .7; }
.pi-center { min-height: 100vh; display: grid; place-items: center; padding: var(--pi-space-5); }
.pi-login { width: min(400px, 100%); }
.pi-login h1 { margin: var(--pi-space-3) 0 var(--pi-space-2); }
@media (max-width: 820px) {
  .pi-shell { grid-template-columns: 1fr; }
  .pi-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .pi-side__group, .pi-side__foot { display: none; }
  .pi-brand { padding-bottom: var(--pi-space-1); width: 100%; }
  .pi-main { padding: var(--pi-space-5) 16px; }
}