:root{--bg-blur:blur(16px);--border-color:#ffffff1f;--accent:#2563eb;--topbar-bg:#ffffffbf;--topbar-bg-scrolled:#ffffffe6;--topbar-text:#1a1a1a;--topbar-border:#0000001a;--link-color:#6b7280;--link-hover:#1a1a1a;--mobile-menu-bg:#fff;--mobile-menu-text:#111;--button-hover-bg:#0000000f;--gradient-start:#2563eb;--gradient-end:#0ea5e9;--glow-color:#2563eb66}html.dark{--topbar-bg:#141414bf;--topbar-bg-scrolled:#141414e6;--topbar-text:#e5e5e5;--topbar-border:#ffffff1a;--link-color:#a3a3a3;--link-hover:#fff;--mobile-menu-bg:#1a1a1a;--mobile-menu-text:#fff;--button-hover-bg:#ffffff14;--gradient-start:#3b82f6;--gradient-end:#06b6d4;--glow-color:#3b82f666}@keyframes gradient-shimmer{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes pulse-glow{0%,to{box-shadow:0 2px 8px var(--glow-color),0 0 0 0 var(--glow-color)}50%{box-shadow:0 4px 16px var(--glow-color),0 0 20px var(--glow-color)}}@keyframes skeleton-pulse{0%,to{opacity:.6}50%{opacity:.3}}@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.topbar-wrapper{z-index:1000;pointer-events:none;justify-content:center;padding:12px 16px;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;left:0;right:0}.topbar-wrapper.topbar-hidden{transform:translateY(-120%)}.topbar-inner{pointer-events:all;width:100%;max-width:var(--page-max-width);background-color:var(--topbar-bg);height:48px;color:var(--topbar-text);border:1px solid var(--topbar-border);-webkit-backdrop-filter:var(--bg-blur);will-change:transform,max-width,border-radius;border-radius:16px;justify-content:space-between;align-items:center;padding:0 16px;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.5s cubic-bezier(.4,0,.2,1) slide-down;display:flex;position:relative;box-shadow:0 4px 12px #0000000f,0 2px 4px #0000000a}.topbar-inner.scrolled{background-color:var(--topbar-bg-scrolled);box-shadow:0 8px 24px #0000001f,0 4px 8px #00000014}.topbar-inner:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;opacity:.6;background:linear-gradient(135deg,#fff3,#ffffff0d);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}html.dark .topbar-inner:before{background:linear-gradient(135deg,#ffffff26,#ffffff08)}.topbar-left{z-index:10;flex-shrink:0;align-items:center;display:flex}.topbar-right{z-index:10;flex-shrink:0;align-items:center;gap:12px;display:flex}.nav-desktop{align-items:center;gap:8px;display:flex}.topbar-skeleton{animation:none}.skeleton-logo{background:linear-gradient(90deg,var(--button-hover-bg)25%,#00000008 50%,var(--button-hover-bg)75%);background-size:200% 100%;border-radius:12px;width:50px;height:50px;animation:1.5s ease-in-out infinite skeleton-pulse}html.dark .skeleton-logo{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a 50%,#ffffff0d 75%) 0 0/200% 100%}.skeleton-buttons{gap:8px;display:flex}.skeleton-button{background:linear-gradient(90deg,var(--button-hover-bg)25%,#00000008 50%,var(--button-hover-bg)75%);background-size:200% 100%;border-radius:8px;width:80px;height:32px;animation:1.5s ease-in-out infinite skeleton-pulse}html.dark .skeleton-button{background:linear-gradient(90deg,#ffffff0d 25%,#ffffff1a 50%,#ffffff0d 75%) 0 0/200% 100%}.brand-group{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;margin-left:-6px;padding:6px;text-decoration:none;transition:all .3s;display:flex}.brand-group:hover{background-color:var(--button-hover-bg);transform:scale(1.08)}.brand-logo{filter:drop-shadow(0 2px 8px #2563eb4d);transition:all .3s}.brand-group:hover .brand-logo{filter:drop-shadow(0 4px 16px #2563eb80);transform:rotate(-8deg)scale(1.1)}.branding-authenticated{align-items:center;display:flex}.btn-primary{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;cursor:pointer;height:36px;box-shadow:0 2px 8px var(--glow-color);white-space:nowrap;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:.875rem;font-weight:600;text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex;position:relative;overflow:hidden}.btn-primary:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.btn-primary:hover:before{left:100%}.btn-primary:hover{box-shadow:0 6px 20px var(--glow-color),0 0 30px var(--glow-color);transform:translateY(-2px)scale(1.02)}.btn-primary:active{box-shadow:0 2px 8px var(--glow-color);transform:translateY(0)scale(.98)}.active-indicator{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;white-space:nowrap;height:36px;box-shadow:0 0 0 2px var(--topbar-bg),0 0 20px var(--glow-color);border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-size:.875rem;font-weight:600;animation:2s ease-in-out infinite pulse-glow;display:inline-flex;position:relative}.active-indicator:after{content:"";background:linear-gradient(90deg,#0000,currentColor,#0000);border-radius:2px;width:70%;height:2px;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.btn-secondary{height:36px;color:var(--topbar-text);border:1.5px solid var(--topbar-border);cursor:pointer;white-space:nowrap;background:0 0;border-radius:10px;justify-content:center;align-items:center;padding:0 18px;font-size:.875rem;font-weight:600;text-decoration:none;transition:all .2s;display:inline-flex}.btn-secondary:hover{background-color:var(--button-hover-bg);border-color:var(--topbar-text);transform:translateY(-1px)}.theme-toggle{border:1.5px solid var(--topbar-border);background:var(--button-hover-bg);height:36px;color:var(--topbar-text);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:6px;padding:0 14px;font-size:.875rem;font-weight:600;transition:all .25s;display:inline-flex}.theme-toggle:hover{background:var(--button-hover-bg);border-color:var(--topbar-text);transform:translateY(-1px)scale(1.02)}.theme-icon{align-items:center;font-size:16px;line-height:1;transition:transform .3s;display:inline-flex}.theme-toggle:hover .theme-icon{transform:rotate(20deg)}.theme-label{color:var(--topbar-text);font-size:.875rem;font-weight:600}.avatar-link{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;transition:transform .25s,box-shadow .25s;display:inline-flex}.avatar-link:hover{box-shadow:0 6px 16px var(--glow-color);transform:translateY(-2px)scale(1.05)}.avatar-circle{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;letter-spacing:0;-webkit-user-select:none;user-select:none;width:38px;height:38px;box-shadow:0 4px 12px #0003,0 0 0 2px var(--topbar-bg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;font-weight:700;transition:all .25s;display:inline-flex}.avatar-color-a,.avatar-color-b{background:linear-gradient(135deg,#e53e3e,#fc8181)!important}.avatar-color-c,.avatar-color-d{background:linear-gradient(135deg,#dd6b20,#f6ad55)!important}.avatar-color-e,.avatar-color-f{color:#1a1a1a!important;background:linear-gradient(135deg,#d69e2e,#faf089)!important}.avatar-color-g,.avatar-color-h{background:linear-gradient(135deg,#38a169,#68d391)!important}.avatar-color-i,.avatar-color-j{background:linear-gradient(135deg,#2b6cb0,#63b3ed)!important}.avatar-color-k,.avatar-color-l{background:linear-gradient(135deg,#553c9a,#9f7aea)!important}.avatar-color-m,.avatar-color-n{background:linear-gradient(135deg,#b83280,#f687b3)!important}.avatar-color-o,.avatar-color-p{background:linear-gradient(135deg,#2c7a7b,#4fd1c5)!important}.avatar-color-q,.avatar-color-r{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important}.avatar-color-s,.avatar-color-t{background:linear-gradient(135deg,#276749,#48bb78)!important}.avatar-color-u,.avatar-color-v{background:linear-gradient(135deg,#744210,#ed8936)!important}.avatar-color-w,.avatar-color-x{background:linear-gradient(135deg,#1a365d,#4299e1)!important}.avatar-color-y,.avatar-color-z{background:linear-gradient(135deg,#702459,#ed64a6)!important}.profile-dropdown-container{z-index:1050;flex-shrink:0;align-items:center;display:inline-flex;position:relative}.avatar-button{cursor:pointer;background:0 0;border:none;border-radius:50%;padding:0;transition:transform .25s,box-shadow .25s;display:inline-flex}.avatar-button:hover{transform:translateY(-2px)scale(1.05)}.avatar-button:hover .avatar-circle{box-shadow:0 6px 16px var(--glow-color),0 0 0 3px var(--topbar-bg)}.profile-dropdown{background:var(--mobile-menu-bg);min-width:260px;box-shadow:0 20px 40px #00000026,0 10px 20px #0000001a,0 0 0 1px var(--topbar-border);opacity:0;pointer-events:none;border:1px solid var(--topbar-border);-webkit-backdrop-filter:var(--bg-blur);z-index:1200;border-radius:16px;flex-direction:column;padding:10px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:calc(100% + 14px);left:0;transform:translateY(-12px)scale(.96)}.profile-dropdown.show{opacity:1;pointer-events:all;transform:translateY(0)scale(1)}.profile-dropdown:before{content:"";background:var(--mobile-menu-bg);border-left:1px solid var(--topbar-border);border-top:1px solid var(--topbar-border);z-index:-1;width:12px;height:12px;position:absolute;top:-6px;left:14px;transform:rotate(45deg)}.profile-dropdown-header{background:var(--button-hover-bg);border-radius:12px;align-items:center;gap:12px;margin-bottom:6px;padding:10px;display:flex}.avatar-circle-small{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));color:#fff;letter-spacing:0;-webkit-user-select:none;user-select:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.2rem;font-weight:700;display:inline-flex;box-shadow:0 4px 12px #0003}.profile-info{flex:1;min-width:0}.profile-name{color:var(--mobile-menu-text);white-space:nowrap;text-overflow:ellipsis;font-size:1.05rem;font-weight:700;overflow:hidden}.profile-dropdown-divider{background:var(--topbar-border);height:1px;margin:6px 0}.profile-dropdown-item{color:var(--mobile-menu-text);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:10px;align-items:center;gap:12px;width:100%;padding:12px 14px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.profile-dropdown-item:hover{background-color:var(--button-hover-bg);transform:translate(4px)}.profile-dropdown-item svg{opacity:.8;flex-shrink:0;width:20px;height:20px;transition:opacity .2s}.profile-dropdown-item:hover svg{opacity:1}.hamburger{cursor:pointer;z-index:1100;background:0 0;border:none;border-radius:10px;flex-direction:column;flex-shrink:0;gap:5px;margin-right:-4px;padding:8px;transition:background-color .2s,transform .2s;display:none}.hamburger:hover{background-color:var(--button-hover-bg);transform:scale(1.05)}.hamburger:active{transform:scale(.95)}.line{background:var(--topbar-text);border-radius:3px;width:22px;height:2.5px;transition:all .3s cubic-bezier(.4,0,.2,1);display:block}.hamburger.active .line:first-child{transform:translateY(7.5px)rotate(45deg)}.hamburger.active .line:nth-child(2){opacity:0;transform:scale(0)}.hamburger.active .line:nth-child(3){transform:translateY(-7.5px)rotate(-45deg)}.mobile-menu{background:var(--mobile-menu-bg);box-shadow:0 20px 40px #00000026,0 10px 20px #0000001a,0 0 0 1px var(--topbar-border);opacity:0;pointer-events:none;border:1px solid var(--topbar-border);-webkit-backdrop-filter:var(--bg-blur);border-radius:16px;flex-direction:column;gap:8px;padding:12px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:calc(100% + 12px);left:0;right:0;transform:translateY(-12px)scale(.96)}.mobile-menu.show{opacity:1;pointer-events:all;transform:translateY(0)scale(1)}.mobile-menu .theme-toggle{border-radius:10px;justify-content:flex-start;width:100%;height:auto;padding:12px 14px}.mobile-link{color:var(--mobile-menu-text);text-align:left;border-radius:10px;padding:12px 14px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s}.mobile-link:hover{background-color:var(--button-hover-bg);transform:translate(4px)}.mobile-btn-primary{background:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));text-align:center;cursor:pointer;box-shadow:0 4px 12px var(--glow-color);border:none;border-radius:10px;justify-content:flex-start;align-items:center;gap:12px;width:100%;padding:12px 14px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .25s;display:flex;position:relative;overflow:hidden;color:#fff!important}.mobile-btn-primary:before{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.mobile-btn-primary:hover:before{left:100%}.mobile-btn-primary:hover{box-shadow:0 6px 20px var(--glow-color);transform:translateY(-2px)}.mobile-btn-secondary{color:var(--mobile-menu-text);text-align:center;border:1.5px solid var(--topbar-border);cursor:pointer;background:0 0;border-radius:10px;justify-content:center;align-items:center;width:100%;padding:12px 16px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.mobile-btn-secondary:hover{background-color:var(--button-hover-bg);border-color:var(--topbar-text);transform:translateY(-1px)}.btn-primary svg,.btn-secondary svg,.mobile-btn-primary svg,.active-indicator svg{flex-shrink:0;width:18px;height:18px}@media (max-width:768px){.topbar-wrapper{padding:10px 12px}.topbar-inner{height:46px;padding:0 12px}.nav-desktop{display:none!important}.hamburger{display:flex}.brand-group img{width:44px;height:44px}.avatar-circle{width:36px;height:36px;font-size:1.15rem}}@media (max-width:480px){.topbar-wrapper{padding:8px 10px}.topbar-inner{height:44px;padding:0 10px}.brand-group img{width:40px;height:40px}.mobile-menu{border-radius:14px;padding:10px}.profile-dropdown{min-width:240px}.avatar-circle{width:34px;height:34px;font-size:1.1rem}}@media (max-width:360px){.brand-group img{width:36px;height:36px}.avatar-circle{width:32px;height:32px;font-size:1rem}}@media (prefers-reduced-motion:reduce){.topbar-wrapper,.topbar-inner,.brand-group,.btn-primary,.avatar-button,.hamburger,.mobile-menu,.profile-dropdown,.line,.gradient-shimmer{transition:none!important;animation:none!important}}
.page-content{background-color:var(--background);width:100%;min-height:calc(100vh - 120px);color:var(--foreground);flex-direction:column;padding-top:120px;transition:background-color .3s,color .3s;display:flex}@media (max-width:768px){.page-content{padding-top:100px}}