@layer components{.nav-rail{gap:var(--spacing-4);padding:var(--spacing-4) var(--spacing-6) var(--spacing-4) var(--spacing-3);flex-direction:column;display:flex}.nav-rail__section{flex-direction:column;gap:2px;display:flex}.nav-rail__section:not(:first-child){padding-top:var(--spacing-4);border-top:1px solid var(--border-subtle)}.nav-rail__section-label{padding:var(--spacing-2) var(--spacing-3) var(--spacing-1);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}.nav-rail__list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.nav-rail__link{align-items:center;gap:var(--spacing-3);min-width:0;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);font-family:var(--font-family-base);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--text-secondary);transition:background var(--transition-fast), color var(--transition-fast);flex:1;text-decoration:none;display:flex}.nav-rail__link:hover{background:color-mix(in srgb, var(--text-primary) 6%, transparent);color:var(--text-primary)}.nav-rail__link--active{background:color-mix(in srgb, var(--brand-gold) 14%, transparent);color:var(--text-primary);font-weight:var(--font-weight-semibold)}.nav-rail__icon{text-align:center;flex-shrink:0;width:18px;font-size:16px}.nav-rail__label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-drawer{z-index:var(--z-modal-backdrop,1000);position:fixed;inset:0}.nav-drawer__scrim{background:#00000073;position:absolute;inset:0}.nav-drawer__panel{width:min(82vw,320px);padding-top:var(--spacing-2);background:var(--page-bg);border-right:1px solid var(--chrome-border);animation:nav-drawer-in var(--transition-fast) ease-out;position:absolute;inset:0 auto 0 0;overflow-y:auto;box-shadow:0 0 24px #0003}.nav-drawer__head{padding:var(--spacing-2) var(--spacing-2) 0;justify-content:flex-end;display:flex}.nav-drawer__close{width:var(--tap-target-min);height:var(--tap-target-min);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.1rem;display:inline-flex}.nav-drawer__close:hover{background:color-mix(in srgb, var(--text-primary) 8%, var(--page-bg));color:var(--text-primary)}.nav-drawer .nav-rail__link{min-height:var(--tap-target-min)}@keyframes nav-drawer-in{0%{transform:translate(-100%)}to{transform:translate(0)}}}
@layer layout{.app-shell{background:var(--page-bg);min-height:100dvh}.app-shell__topbar{z-index:var(--z-navbar);position:sticky;top:0}.app-shell__body{align-items:flex-start;display:flex}.app-shell__rail{top:var(--navbar-height);z-index:var(--z-fixed);height:calc(100dvh - var(--navbar-height));border-right:1px solid var(--border-default);transition:flex-basis var(--transition-fast);flex:0 0 240px;align-self:flex-start;position:sticky}.app-shell__rail--collapsed{flex-basis:var(--spacing-9)}.app-shell__rail-inner{height:100%;overflow:hidden auto}.app-shell__rail--collapsed .app-shell__rail-inner{display:none}.app-shell__rail-toggle{top:var(--spacing-4);z-index:2;border:1px solid var(--text-secondary);border-radius:var(--radius-full);background:var(--page-bg);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;transition:background var(--transition-fast), color var(--transition-fast);justify-content:center;align-items:center;padding:0;font-size:.95rem;display:inline-flex;position:absolute;right:0;transform:translate(50%)}.app-shell__rail-toggle:hover{background:color-mix(in srgb, var(--text-primary) 8%, var(--page-bg));color:var(--text-primary)}.app-shell__page{min-width:0;padding:var(--spacing-8) var(--spacing-6) var(--spacing-12);flex:auto}.app-shell__page--dashboard{padding:0}.app-shell__page--fullscreen{min-height:calc(100dvh - var(--navbar-height));padding:0}.app-shell__container{margin:0 auto}.container--default{max-width:1200px}.container--dashboard{box-sizing:border-box;width:100%;max-width:none;padding:0 var(--spacing-6);background:var(--page-bg)}.container--fullscreen{max-width:none;padding:0}@media (max-width:768px){.app-shell__topbar{display:none}.app-shell__page{padding:var(--spacing-4) var(--spacing-3) calc(56px + env(safe-area-inset-bottom,0px) + var(--spacing-6))}.app-shell__page--dashboard,.app-shell__page--fullscreen{padding:0}.app-shell__page--fullscreen{min-height:100svh}.app-shell__page--dashboard{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}.container--dashboard{padding-left:0;padding-right:0}}.container--dashboard .profile,.container--dashboard .role-page,.container--dashboard .explore-page,.container--dashboard .explore-page__navigator{background:0 0}.profile-grid{grid-template-columns:minmax(560px,1.35fr) minmax(480px,1fr);align-items:start;gap:24px;display:grid}@media (max-width:1100px){.profile-grid{grid-template-columns:1fr}}.role-grid{grid-template-columns:360px minmax(0,1fr);gap:24px;display:grid}@media (max-width:1100px){.role-grid{grid-template-columns:1fr}}}