.app-shell {
  display:flex;
  min-height:100vh;
}
.sidebar {
  background:linear-gradient(180deg, #0f0f10 0%, #151515 100%);
  color:var(--sidebar-text);
  width:290px;
  flex:0 0 290px;
  min-height:100vh;
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  padding:28px 18px 18px;
  z-index:40;
  border-right:1px solid rgba(255,255,255,.04);
}
.brand {
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0 12px 28px;
  color:#fff;
}
.brand-logo {
  width:100%;
  max-width:180px;
  border-radius:18px;
  display:block;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.brand-text {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.brand-text strong {
  font:800 14px Manrope;
  letter-spacing:.14em;
  color:#f7f2eb;
}
.brand-text small {
  font:700 10px 'DM Sans';
  color:var(--sidebar-muted);
  letter-spacing:.22em;
}
.sidebar-section {
  font-size:10px;
  letter-spacing:.18em;
  font-weight:800;
  color:#8f867b;
  padding:0 16px;
  margin:15px 0 10px;
}
.nav {
  display:grid;
  gap:6px;
  margin-bottom:16px;
}
.nav-link {
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 14px;
  border-radius:14px;
  color:#cbbfb1;
  font-weight:600;
  transition:background .18s, color .18s, transform .18s;
}
.nav-link svg { width:18px; height:18px }
.nav-link:hover {
  background:rgba(255,255,255,.06);
  color:#fff;
  transform:translateX(2px);
}
.nav-link.active {
  background:linear-gradient(180deg, rgba(206,180,159,.2), rgba(149,115,89,.12));
  color:#fff;
  border:1px solid rgba(206,180,159,.16);
  position:relative;
}
.nav-link.active:before {
  content:'';
  position:absolute;
  left:0;
  top:11px;
  bottom:11px;
  width:3px;
  background:var(--accent-soft);
  border-radius:3px;
}
.sidebar-bottom {
  margin-top:auto;
  padding:16px 10px 4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.connection {
  font-size:11px;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:#d4c6b7;
}
.connection-dot, .env-dot {
  height:8px;
  width:8px;
  border-radius:50%;
  background:var(--success);
  display:inline-block;
  box-shadow:0 0 0 4px rgba(85,119,100,.15);
}
.sidebar-user {
  display:flex;
  gap:10px;
  align-items:center;
}
.avatar, .top-avatar, .small-avatar {
  display:grid;
  place-items:center;
  border-radius:14px;
  flex-shrink:0;
  font-weight:800;
}
.avatar {
  width:40px;
  height:40px;
  background:linear-gradient(180deg, #2f2925, #1f1b18);
  color:#fff4e9;
  border:1px solid rgba(255,255,255,.08);
}
.sidebar-user-details {
  min-width:0;
  display:flex;
  flex-direction:column;
}
.sidebar-user-details strong {
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  color:#fff;
}
.sidebar-user-details span {
  font-size:11px;
  color:#9e9488;
}
.main {
  flex:1;
  min-width:0;
}
.topbar {
  height:86px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(217, 209, 197, .75);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 38px;
  position:sticky;
  top:0;
  z-index:10;
}
.topbar-left, .topbar-right {
  display:flex;
  align-items:center;
  gap:18px;
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  color:#8b837a;
  font-size:12px;
}
.breadcrumb strong {
  color:#2f2a26;
  font-weight:700;
}
.breadcrumb-separator { color:#d0c4b7 }
.env-pill {
  font-size:10px;
  letter-spacing:.14em;
  color:#6b5c4d;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(206,180,159,.22);
  border:1px solid rgba(149,115,89,.14);
}
.top-avatar {
  height:38px;
  width:38px;
  background:linear-gradient(180deg, #f3e6da, #e6d3c2);
  color:#3a2f27;
  border:1px solid rgba(149,115,89,.15);
}
.content {
  max-width:1640px;
  margin:0 auto;
  padding:34px 38px 32px;
}
.footer {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:48px;
  padding:22px 0 6px;
  color:#8e867d;
  font-size:11px;
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:28px;
}
.page-heading p { margin:0; font-size:13px; max-width:720px }
.eyebrow {
  display:block;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  margin-bottom:8px;
}
.heading-actions { display:flex; gap:12px }
.date-pill {
  display:inline-flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:11px 14px;
  font-size:12px;
  background:rgba(255,255,255,.75);
  color:#5d574f;
  box-shadow:var(--shadow-soft);
}
.icon-button {
  appearance:none;
  border:none;
  background:#fff;
  color:#3f3a34;
  width:40px;
  height:40px;
  border-radius:12px;
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-soft);
}
.mobile-menu { display:none }
.sidebar-overlay { display:none }