.app { display: flex; min-height: 100vh; min-height: 100dvh; }

/* Sidebar */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 100;
  display: flex; flex-direction: column; background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border)); transition: transform 260ms var(--ease), width 200ms var(--ease);
}
.sidebar-brand { display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid hsl(var(--border)); }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; letter-spacing: -0.02em; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: hsl(var(--muted-foreground)); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.nav-group { padding: 12px 8px 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); transition: background var(--dur), color var(--dur);
  position: relative; white-space: nowrap;
}
.nav-item:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.nav-item.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.nav-item.active:hover { background: hsl(var(--primary) / 0.9); }
.nav-icon svg { width: 16px; height: 16px; }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-trail { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-weight: 600; }
.nav-item.active .nav-trail { background: hsl(var(--primary-foreground) / 0.2); color: hsl(var(--primary-foreground)); }
.nav-trail[data-icon] { background: transparent; padding: 0; }
.nav-trail[data-icon] svg { width: 12px; height: 12px; }
.sidebar-footer { padding: 10px; border-top: 1px solid hsl(var(--border)); display: flex; flex-direction: column; gap: 6px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 8px; border-radius: var(--radius); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; }
.user-role { font-size: 11px; color: hsl(var(--muted-foreground)); }
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: hsl(240 10% 3.9% / 0.5); z-index: 99; animation: fade-in 200ms; }

#theme-toggle .icon-moon { display: none; }
.dark #theme-toggle .icon-sun { display: none; }
.dark #theme-toggle .icon-moon { display: inline-flex; }

/* Main */
.main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; transition: margin var(--dur) var(--ease); }
.topbar {
  position: sticky; top: 0; z-index: 90; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 20px;
  background: hsl(var(--background) / 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid hsl(var(--border));
}
.topbar-menu { display: none; }
.topbar-title { display: flex; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
.crumb-root { color: hsl(var(--muted-foreground)); }
.crumb-sep { color: hsl(var(--muted-foreground)); }
.crumb-sep svg { width: 14px; height: 14px; }
.crumb-current { font-weight: 600; white-space: nowrap; }
.topbar-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px; width: min(380px, 100%); height: 36px; padding: 0 10px 0 12px;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); cursor: text;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.topbar-search:focus-within { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.12); }
.topbar-search input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13px; color: hsl(var(--foreground)); min-width: 0; }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.topbar-clock { font-size: 12px; color: hsl(var(--muted-foreground)); padding: 0 8px; }
.notif-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: hsl(var(--destructive)); border: 2px solid hsl(var(--background)); display: none; }
.notif-dot.show { display: block; }

.content { flex: 1; padding: 24px; max-width: 1480px; width: 100%; margin: 0 auto; }
.content.full { max-width: none; }

.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header h1 { font-size: 22px; }
.page-header .page-desc { font-size: 13px; color: hsl(var(--muted-foreground)); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bottom nav (mobile) */
.bottomnav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: hsl(var(--card) / 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid hsl(var(--border)); grid-template-columns: repeat(5, 1fr);
}
.bottomnav a, .bottomnav button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-weight: 500;
  color: hsl(var(--muted-foreground)); transition: color var(--dur); -webkit-tap-highlight-color: transparent; position: relative;
}
.bottomnav a svg, .bottomnav button svg { width: 20px; height: 20px; }
.bottomnav .active { color: hsl(var(--foreground)); }
.bottomnav .active::before { content: ""; position: absolute; top: 0; width: 24px; height: 2px; background: hsl(var(--primary)); border-radius: 0 0 2px 2px; }

/* Responsive */
@media (max-width: 1024px) {
  .topbar-search { width: 280px; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .sidebar-backdrop.show { display: block; }
  .main { margin-left: 0; }
  .topbar { padding: 0 14px; gap: 8px; }
  .topbar-menu { display: inline-flex; }
  .topbar-search { width: 40px; padding: 0; justify-content: center; }
  .topbar-search input, .topbar-search kbd { display: none; }
  .topbar-clock { display: none; }
  .crumb-root, .crumb-sep { display: none; }
  .content { padding: 16px 14px calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom)); }
  .bottomnav { display: grid; }
  .page-header h1 { font-size: 20px; }
}