* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 14px;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}
.app-shell { display: flex; min-height: 100vh; }

aside.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  border-right: 1px solid color-mix(in srgb, hsl(var(--border)) 60%, transparent);
  padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
.sidebar .brand {
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 3);
}
.sidebar .nav-group { margin-bottom: calc(var(--spacing) * 4); }
.sidebar .nav-title {
  font-size: 11px; color: hsl(var(--muted-foreground));
  padding: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 1.5);
}
.sidebar a.nav-item {
  display: flex; align-items: center; gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1.75) calc(var(--spacing) * 2);
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--foreground)); text-decoration: none; font-size: 13px;
  transition: background-color .15s ease-out;
}
.sidebar a.nav-item:hover { background: color-mix(in srgb, hsl(var(--foreground)) 6%, transparent); }
.sidebar a.nav-item.active { background: color-mix(in srgb, hsl(var(--primary)) 10%, transparent); font-weight: 500; }
.sidebar a.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar .spacer { flex: 1; }

main.content {
  flex: 1; min-width: 0;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3.5);
}
@media (min-width: 768px) { main.content { padding: calc(var(--spacing) * 3.5); } }
@media (min-width: 1024px) { main.content { padding: calc(var(--spacing) * 4.5); } }

.page-head { margin-bottom: calc(var(--spacing) * 4); }
.page-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 calc(var(--spacing) * 1); }
.page-head .sub { font-size: 13px; color: hsl(var(--muted-foreground)); margin: 0; }

.sidebar .brand svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.sidebar .side-foot {
  border-top: 1px solid color-mix(in srgb, hsl(var(--border)) 60%, transparent);
  padding-top: calc(var(--spacing) * 2.5);
  display: flex; flex-direction: column; gap: calc(var(--spacing) * 1.5);
}
.sidebar .ext-badge {
  display: flex; align-items: center; gap: calc(var(--spacing) * 1.5);
  font-size: 12px; color: hsl(var(--muted-foreground)); text-decoration: none;
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  border-radius: calc(var(--radius) - 2px);
}
.sidebar .ext-badge svg { width: 13px; height: 13px; }
.sidebar .ext-badge:hover { background: color-mix(in srgb, hsl(var(--foreground)) 6%, transparent); }
.sidebar .ext-badge.ready { color: hsl(var(--success)); }
.sidebar .ext-badge.untrusted { color: hsl(var(--warning)); }
.sidebar .ext-badge.missing { color: hsl(var(--destructive)); }
.sidebar .logout {
  border: 0; background: none; text-align: left; cursor: pointer;
  font-size: 12px; color: hsl(var(--muted-foreground));
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
  border-radius: calc(var(--radius) - 2px);
}
.sidebar .logout:hover { color: hsl(var(--foreground)); background: color-mix(in srgb, hsl(var(--foreground)) 6%, transparent); }