.app-header{position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--color-border);background:color-mix(in oklab,var(--color-bg-elevated) 92%,transparent);backdrop-filter:blur(6px)}.app-header__offline-banner{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-accent-subtle);color:var(--color-text-primary);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}.app-header__desktop,.app-header__mobile{display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0 var(--space-4)}.app-header__date,.app-header__streak{color:var(--color-text-secondary);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}.app-header__sync{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-small)}.app-header__sync--syncing{color:var(--color-warning)}.app-header__sync--synced{color:var(--color-success)}.app-header__sync--error{color:var(--color-error)}.app-header__sync--offline{color:var(--color-text-muted)}.app-header__sync-icon--spin{animation:app-header-spin 1s linear infinite}.app-header__settings-link,.app-header__menu-button,.app-header__logo{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--radius-md);background:var(--color-bg-secondary);color:var(--color-text-primary)}.app-header__logo{background:var(--color-accent);color:#071333;font-weight:var(--font-weight-semibold)}.app-header__menu-button{cursor:pointer}.app-header__desktop{display:none}@media(min-width:1024px){.app-header__mobile{display:none}.app-header__desktop{display:flex}}@keyframes app-header-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mobile-nav{position:fixed;right:0;bottom:0;left:0;z-index:1200;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--color-border);background:var(--color-bg-elevated);box-shadow:var(--shadow-lg)}.mobile-nav__item{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;color:var(--color-text-muted)}.mobile-nav__item--active{color:var(--color-accent)}.mobile-nav__icon-wrap{position:relative;display:inline-flex}.mobile-nav__badge{position:absolute;top:-5px;right:-10px;min-width:16px;padding:0 4px;border-radius:var(--radius-full);background:var(--color-accent);color:#071333;font-size:.625rem;text-align:center}.mobile-nav__label{font-size:.6875rem;font-weight:var(--font-weight-semibold)}@media(min-width:1024px){.mobile-nav{display:none}}.sidebar{display:flex;flex-direction:column;width:240px;min-width:240px;height:100vh;padding:var(--space-4);background:#071333;color:#f5f5f5;border-right:1px solid rgba(245,245,245,.08);transition:width var(--transition-base),min-width var(--transition-base)}.sidebar--collapsed{width:64px;min-width:64px}.sidebar__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-8)}.sidebar__logo{display:flex;align-items:center;gap:var(--space-2);overflow:hidden}.sidebar__logo-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-md);background:var(--color-accent);color:#071333;font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}.sidebar__logo-text{font-family:var(--font-display);font-size:1.25rem;color:#f5f5f5;white-space:nowrap}.sidebar__collapse-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:var(--radius-md);background:#f5f5f51a;color:#f5f5f5;cursor:pointer}.sidebar__nav{display:flex;flex-direction:column;gap:var(--space-2)}.sidebar__nav-item{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:#dce0f2;transition:background var(--transition-fast),color var(--transition-fast)}.sidebar__logout-button{width:100%;border:0;background:transparent;text-align:left;cursor:pointer;font:inherit}.sidebar__nav-item:hover{background:#dbb1711f;color:#fff}.sidebar__nav-item--active{background:#dbb17133;color:var(--color-accent);box-shadow:inset 2px 0 0 var(--color-accent)}.sidebar__icon-wrap{display:inline-flex;align-items:center;justify-content:center}.sidebar__label{flex:1;font-weight:var(--font-weight-semibold);white-space:nowrap}.sidebar__badge{min-width:20px;padding:0 6px;border-radius:var(--radius-full);background:var(--color-accent);color:#071333;font-size:.75rem;text-align:center}.sidebar__footer{margin-top:auto;padding-top:var(--space-4);border-top:1px solid rgba(245,245,245,.12);display:grid;gap:var(--space-2)}.sidebar--collapsed .sidebar__logo-text,.sidebar--collapsed .sidebar__label,.sidebar--collapsed .sidebar__badge{display:none}.sidebar--collapsed .sidebar__top{flex-direction:column}.app-shell{display:flex;min-height:100vh;background:var(--color-bg-primary)}.app-shell__sidebar{display:none}.app-shell__main-column{display:flex;flex:1;flex-direction:column;min-width:0}.app-shell__main-content{width:min(100%,920px);margin:0 auto;padding:var(--space-6) var(--space-4) calc(var(--space-20) + var(--space-4))}@media(min-width:1024px){.app-shell__sidebar{display:block}.app-shell__main-content{padding:var(--space-8) var(--space-8) var(--space-8)}}