.app-container{display:flex;min-height:100vh;background-color:var(--background);transition:background-color .3s ease}.sidebar{width:var(--sidebar-width);height:100vh;position:sticky;top:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);z-index:50;transition:width .3s cubic-bezier(.4,0,.2,1)}.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width)}.sidebar-header{padding:24px 12px;display:flex;align-items:center;justify-content:space-between;min-height:80px}.sidebar-collapsed .sidebar-header{flex-direction:column;gap:16px;padding:20px 0;justify-content:flex-start}.logo{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 4px;border-radius:var(--radius-md);transition:var(--transition);flex:1 1}.logo:hover{background:var(--surface-hover)}.sidebar-collapsed .logo{justify-content:center;flex:none}.logo-text{font-size:1.2rem;font-weight:800;white-space:nowrap;letter-spacing:-.03em;color:var(--text)}.collapse-toggle{background:var(--surface-hover);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;padding:8px;border-radius:var(--radius-sm);transition:var(--transition);display:flex;align-items:center;justify-content:center;margin-left:8px;transition:transform .3s cubic-bezier(.4,0,.2,1),var(--transition)}.collapse-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}.collapse-toggle.is-collapsed svg{transform:rotate(180deg)}.collapse-toggle:hover{background:var(--primary-glow);color:var(--primary);border-color:var(--primary)}.collapse-toggle.is-collapsed{margin:0;width:40px;height:40px}.sidebar-nav{padding:12px;flex:1 1;display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-md);text-decoration:none;color:var(--text-muted);font-weight:500;transition:var(--transition)}.nav-item:hover{background:var(--surface-hover);color:var(--text)}.nav-item.active{background:var(--primary-glow);color:var(--primary);border:1px solid var(--primary)}.nav-item.collapsed{justify-content:center;padding:12px}.nav-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.sidebar-footer{padding:16px;border-top:1px solid var(--border)}.user-profile{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface-hover);border-radius:var(--radius-lg);overflow:hidden}.user-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--primary)}.user-name{font-weight:600;font-size:.9rem;white-space:nowrap}.sidebar-collapsed .user-profile{justify-content:center;padding:8px;background:none}.main-content{flex:1 1;padding:40px;width:100%;box-sizing:border-box}.mobile-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;background:transparent;position:sticky;top:0;z-index:40}body.modal-open .mobile-header{display:none}.mobile-logo-group{display:flex;align-items:center;gap:10px}.user-avatar-small{width:32px;height:32px;border-radius:50%;border:1px solid var(--primary)}.login-btn-sidebar{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--primary);color:white;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:500;transition:all .2s;justify-content:center}.login-btn-sidebar:hover{filter:brightness(1.1);transform:translateY(-1px)}.login-btn-sidebar.collapsed{padding:var(--spacing-sm);width:40px;height:40px;border-radius:50%}.user-profile.authenticated{cursor:pointer;transition:transform .2s;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);background:var(--card-bg);border:1px solid var(--border-color);width:100%}.user-profile.authenticated:hover{transform:scale(1.02);border-color:var(--primary)}.user-info{display:flex;flex-direction:column;overflow:hidden}.user-action-hint{font-size:.75rem;color:var(--primary);font-weight:500;opacity:.8}.avatar-skeleton{width:40px;height:40px;border-radius:50%;background:var(--border-color);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:.3}to{opacity:.6}}.mobile-header img.user-avatar-small{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--primary);background:var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.2)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--mobile-nav-height);background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border);justify-content:space-around;padding:0 10px;z-index:100}.bottom-nav,.mobile-nav-item{display:flex;align-items:center}.mobile-nav-item{flex-direction:column;gap:4px;text-decoration:none;color:var(--text-muted);font-size:10px;flex:1 1}.mobile-nav-item.active{color:var(--primary)}.mobile-fab-container{position:relative;width:60px;height:60px}.mobile-fab{position:absolute;top:-30px;left:0;width:60px;height:60px;background:var(--primary);border:4px solid var(--background);border-radius:50%;box-shadow:0 8px 16px rgba(16,185,129,.3);align-items:center;justify-content:center}.desktop-only,.mobile-fab{display:flex}.mobile-only{display:none}@media (max-width:1024px){.desktop-only{display:none}.mobile-only{display:flex}.main-content{padding:16px;padding-bottom:calc(var(--mobile-nav-height) + 30px)}.mobile-header{padding:20px 20px 10px;background:linear-gradient(to bottom,var(--background) 0,transparent 100%)}.mobile-logo-group .logo-text{font-size:1rem}.bottom-nav{height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));padding-bottom:env(safe-area-inset-bottom,0);background:var(--surface);box-shadow:0 -4px 20px rgba(0,0,0,.15)}.mobile-fab-container{position:relative;width:56px;height:56px}.mobile-fab{position:absolute;top:-28px;left:50%;transform:translateX(-50%);width:56px;height:56px;background:linear-gradient(135deg,var(--primary) 0,#059669 100%);border:3px solid var(--background);border-radius:50%;box-shadow:0 6px 20px rgba(16,185,129,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.mobile-fab:hover{transform:translateX(-50%) scale(1.05);box-shadow:0 8px 25px rgba(16,185,129,.5)}.mobile-fab:active{transform:translateX(-50%) scale(.95)}.mobile-nav-item{padding:8px 0}.mobile-nav-label{font-size:10px;font-weight:600}}