/* Cockpit — Rahmen: Seitenleiste, Hauptbereich, Umbruchpunkte. */

.app{display:flex;min-height:100vh}
.sidebar{
  width:236px;flex:0 0 236px;background:var(--color-surface);
  border-right:1px solid var(--border);padding:20px 13px;
  display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px}
.brand-mark{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(140deg,var(--color-accent-hover),var(--color-accent-deep));
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,0.28);
}
.brand-name{font-size:16px;font-weight:700;letter-spacing:.03em;line-height:1}
.brand-sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted);margin-top:3px}

.nav-group{margin-top:12px}
.nav-group-label{font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.16em;font-size:9px;color:var(--color-text-muted);padding:0 10px 7px;font-weight:600}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  color:var(--color-text-2);font-size:13.5px;font-weight:500;margin-bottom:2px;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:rgba(240,246,252,0.04);color:var(--color-text)}
.nav-item.active{background:var(--color-accent-soft);color:var(--color-text)}

.main{flex:1;min-width:0;padding:26px 30px 60px}
.page-head{margin-bottom:20px}
.page-title{font-size:23px;font-weight:600;letter-spacing:-.01em}
.page-sub{color:var(--color-text-2);font-size:13.5px;margin-top:4px}

@media (max-width:900px){
  .sidebar{width:194px;flex:0 0 194px}
  .main{padding:22px 18px 50px}
}
@media (max-width:640px){
  .app{flex-direction:column}
  .sidebar{
    width:100%;flex:0 0 auto;flex-direction:row;align-items:center;gap:5px;
    border-right:none;border-bottom:1px solid var(--border);
    padding:10px 12px;overflow-x:auto;white-space:nowrap;
    position:sticky;top:0;z-index:40;
  }
  .brand{padding:0 10px 0 2px;border-right:1px solid var(--border);margin-right:5px;flex:0 0 auto}
  .brand-sub{display:none}
  .nav-group{margin-top:0;display:flex;align-items:center;gap:5px;flex:0 0 auto}
  .nav-group-label{display:none}
  .nav-item{margin-bottom:0;flex:0 0 auto;border:1px solid var(--border)}
  .main{padding:18px 14px 48px}
  .page-title{font-size:20px}
}