:root{--shell-sidebar-width:240px;--shell-header-height:56px;--shell-bottom-bar-height:64px;--color-primary-500:#3b82f6;--color-primary-600:#2563eb;--color-primary-50:#eff6ff;--color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;--color-neutral-400:#a3a3a3;--color-neutral-700:#404040;--color-neutral-800:#262626;--color-neutral-900:#171717;--color-text-primary:#111827;--color-text-secondary:#4b5563;--color-background:#fff;--color-surface:#f9fafb}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:var(--color-text-primary);background:var(--color-surface);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}.shell-layout{grid-template-areas:"header header""sidebar main";grid-template-columns:var(--shell-sidebar-width) 1fr;grid-template-rows:var(--shell-header-height) 1fr;min-height:100vh;display:grid}.header-bar{view-transition-name:header-bar;background:var(--color-background);border-bottom:1px solid var(--color-neutral-200);height:var(--shell-header-height);z-index:100;grid-area:header;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.header-bar__title{color:var(--color-neutral-900);font-size:1.25rem;font-weight:600}.header-bar__avatar{background:var(--color-primary-500);color:#fff;user-select:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.875rem;font-weight:600;display:flex}.nav-sidebar{view-transition-name:nav-sidebar;background:var(--color-background);border-right:1px solid var(--color-neutral-200);height:calc(100vh - var(--shell-header-height));top:var(--shell-header-height);flex-direction:column;grid-area:sidebar;padding:16px 0;display:flex;position:sticky;overflow-y:auto}.nav-sidebar__list{flex-direction:column;gap:4px;padding:0 8px;list-style:none;display:flex}.nav-sidebar__link{color:var(--color-text-secondary);border-left:3px solid #0000;border-radius:8px;align-items:center;gap:12px;padding:10px 16px;font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s;display:flex}.nav-sidebar__link:hover{background:var(--color-neutral-100);color:var(--color-text-primary)}.nav-sidebar__link--active{background:var(--color-primary-50);color:var(--color-primary-600);border-left-color:var(--color-primary-600);font-weight:700}.nav-sidebar__icon{flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.shell-main{grid-area:main;padding:24px;overflow-y:auto}.nav-bottom-bar{height:var(--shell-bottom-bar-height);background:var(--color-background);border-top:1px solid var(--color-neutral-200);z-index:100;display:none;position:fixed;bottom:0;left:0;right:0}.nav-bottom-bar__list{justify-content:space-around;align-items:center;height:100%;padding:0;list-style:none;display:flex}.nav-bottom-bar__link{color:var(--color-text-secondary);border-radius:8px;flex-direction:column;align-items:center;gap:4px;padding:4px 12px;font-size:.625rem;font-weight:500;text-decoration:none;transition:color .15s;display:flex}.nav-bottom-bar__link--active{color:var(--color-primary-600);font-weight:700}.nav-bottom-bar__icon{justify-content:center;align-items:center;width:24px;height:24px;display:flex}.nav-bottom-bar__label{line-height:1}@media (width<=767px){.shell-layout{grid-template-columns:1fr;grid-template-areas:"header""main";grid-template-rows:var(--shell-header-height) 1fr}.nav-sidebar{display:none}.nav-bottom-bar{display:block}.shell-main{padding:16px;padding-bottom:calc(var(--shell-bottom-bar-height) + 16px)}}::view-transition-old(root){animation:.2s ease-out fade-out}::view-transition-new(root){animation:.2s ease-in fade-in}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}::view-transition-old(nav-sidebar),::view-transition-new(nav-sidebar),::view-transition-old(header-bar),::view-transition-new(header-bar){animation:none}