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

.sidebar{position:sticky;top:0;height:100vh;background:var(--slate-900);color:var(--slate-100);display:flex;flex-direction:column;overflow-y:auto;z-index:var(--z-sidebar)}
.sidebar-header{padding:var(--sp-6) var(--sp-5);border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-logo{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-extrabold);font-size:var(--fs-lg);color:#fff}
.sidebar-logo-mark{width:36px;height:36px;border-radius:var(--r-md);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);box-shadow:0 4px 12px rgba(99,102,241,.4)}
.sidebar-logo-sub{font-size:var(--fs-xs);color:var(--slate-400);font-weight:var(--fw-medium);margin-top:2px}

.sidebar-section{padding:var(--sp-5) var(--sp-3);border-bottom:1px solid rgba(255,255,255,.05)}
.sidebar-section:last-child{border-bottom:none}
.sidebar-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--slate-500);padding:0 var(--sp-3) var(--sp-2)}

.nav-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);color:var(--slate-300);font-size:var(--fs-sm);font-weight:var(--fw-medium);cursor:pointer;transition:all var(--t-fast) var(--ease);margin-bottom:2px;width:100%;text-align:left;line-height:1.4}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--gradient-primary);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.3)}
.nav-item.locked{color:var(--slate-600);cursor:not-allowed;opacity:.6}
.nav-item.locked:hover{background:none;color:var(--slate-600)}
.nav-item-icon{flex-shrink:0;width:20px;text-align:center}
.nav-item-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item-badge{font-size:var(--fs-xs);padding:2px 6px;border-radius:var(--r-full);background:rgba(255,255,255,.1);color:var(--slate-300)}
.nav-item.active .nav-item-badge{background:rgba(255,255,255,.2);color:#fff}

.sidebar-footer{margin-top:auto;padding:var(--sp-4);border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.2)}
.user-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--r-md)}
.avatar{width:40px;height:40px;border-radius:var(--r-full);background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:var(--fw-bold);font-size:var(--fs-sm);flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-level{font-size:var(--fs-xs);color:var(--slate-400)}

.main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}

.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 var(--sp-8);gap:var(--sp-6);position:sticky;top:0;z-index:var(--z-topbar);backdrop-filter:blur(8px);background:rgba(255,255,255,.85)}
.topbar-title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.stat-chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--surface-alt);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-semibold);border:1px solid var(--border);white-space:nowrap}
.stat-chip-icon{font-size:var(--fs-base)}
.stat-chip.streak{background:linear-gradient(135deg,#fff7ed,#ffedd5);border-color:#fdba74;color:#9a3412}
.stat-chip.xp{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-color:#a5b4fc;color:var(--indigo-700)}
.stat-chip.level{background:var(--gradient-primary);color:#fff;border-color:transparent}

.content{padding:var(--sp-8);max-width:var(--max-content);margin:0 auto;width:100%}
.content.narrow{max-width:860px}

.page-header{margin-bottom:var(--sp-8)}
.page-title{font-size:var(--fs-3xl);margin-bottom:var(--sp-2)}
.page-subtitle{color:var(--text-muted);font-size:var(--fs-lg)}

.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.mobile-menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--text);cursor:pointer;font-size:var(--fs-xl)}

@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:280px;transform:translateX(-100%);transition:transform var(--t-base) var(--ease);box-shadow:var(--shadow-2xl)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:calc(var(--z-sidebar) - 1)}
  .sidebar-backdrop.show{display:block}
  .mobile-menu-btn{display:flex}
  .content{padding:var(--sp-5)}
  .topbar{padding:0 var(--sp-5);gap:var(--sp-3)}
  .topbar-title{font-size:var(--fs-base)}
  .stat-chip span.stat-chip-label{display:none}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
}