.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.shell.with-panel { grid-template-columns: var(--sidebar-w) 1fr var(--panel-w); }

.sidebar {
  background: var(--white); border-right: 1px solid var(--border);
  padding: var(--s-6) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2);
  position: sticky; top: 0; height: 100vh;
}
.sidebar .logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 24px; font-weight: 700; letter-spacing: -.02em;
  margin-bottom: var(--s-4); padding-left: var(--s-2);
}
.sidebar .logo img { width: 32px; height: 32px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--slate); font-weight: 500; font-size: 15px; text-decoration: none;
}
.sidebar nav a:hover { background: var(--soft-gray); }
.sidebar nav a.active { background: var(--seafoam-light); color: var(--teal-dark); font-weight: 600; }
.sidebar .nav-badge { margin-left: auto; background: var(--coral); color: white; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.sidebar .user-footer { border-top: 1px solid var(--border); padding-top: var(--s-4); }

.main { padding: var(--s-8); max-width: 860px; width: 100%; margin: 0 auto; }
.main.full { max-width: none; }

.right-panel {
  background: var(--white); border-left: 1px solid var(--border);
  padding: var(--s-6) var(--s-4); position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.bottom-nav { display: none; }

@media (max-width: 1023px) {
  .shell, .shell.with-panel { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .right-panel { position: static; height: auto; border-left: 0; border-top: 1px solid var(--border); }
  .main { padding: var(--s-4); padding-bottom: 84px; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: var(--white); border-top: 1px solid var(--border);
  }
  .bottom-nav a {
    flex: 1; text-align: center; padding: 10px 0 14px; font-size: 11px;
    color: var(--muted); text-decoration: none; display: flex; flex-direction: column; gap: 2px;
  }
  .bottom-nav a.active { color: var(--teal); font-weight: 600; }
  .bottom-nav .icon { font-size: 20px; }
}