:root{--menubar-height:70px;--menubar-bg-light:rgba(255, 255, 255, 0.85);--menubar-bg-dark:rgba(15, 23, 42, 0.85);--menubar-shadow:0 4px 20px rgba(0, 0, 0, 0.08);--menubar-border-light:rgba(226, 232, 240, 0.8);--menubar-border-dark:rgba(51, 65, 85, 0.8)}.title-bar{position:fixed;top:0;left:0;right:0;width:100%;height:var(--menubar-height);display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,5vw,60px);background:var(--menubar-bg-light);backdrop-filter:blur(12px) saturate(180%);-webkit-backdrop-filter:blur(12px) saturate(180%);box-shadow:var(--menubar-shadow);border-bottom:1px solid var(--menubar-border-light);z-index:1000;transition:transform .3s cubic-bezier(.4, 0, .2, 1),background-color .3s ease,box-shadow .3s ease;will-change:transform;box-sizing:border-box}[data-theme=dark] .title-bar{background:var(--menubar-bg-dark);border-bottom:1px solid var(--menubar-border-dark);box-shadow:0 4px 20px rgba(0,0,0,.3)}.title-bar.hidden{transform:translateY(-100%)}.title-bar.scrolled{background:var(--menubar-bg-light);box-shadow:0 8px 30px rgba(0,0,0,.12)}[data-theme=dark] .title-bar.scrolled{background:var(--menubar-bg-dark);box-shadow:0 8px 30px rgba(0,0,0,.5)}.title-bar h1{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(1.2rem, 2vw, 1.5rem);font-weight:700;margin:0;color:var(--color-text,#111827);cursor:pointer;transition:color .3s ease,transform .2s ease;letter-spacing:-.02em}.title-bar h1:hover{transform:translateX(2px);color:var(--color-primary,#6366f1)}[data-theme=dark] .title-bar h1{color:var(--color-text,#f1f5f9)}.google-login{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#4285f4 0,#357ae8 100%);color:#fff;border:none;border-radius:12px;padding:12px 24px;cursor:pointer;font-size:15px;font-weight:600;transition:all .3s cubic-bezier(.4, 0, .2, 1);box-shadow:0 4px 12px rgba(66,133,244,.3);position:relative;overflow:hidden}.google-login::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,.2) 0,rgba(255,255,255,0) 100%);transform:translateX(-100%);transition:transform .5s ease}.google-login:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(66,133,244,.4)}.google-login:hover::before{transform:translateX(100%)}.google-login:active{transform:translateY(0);box-shadow:0 2px 8px rgba(66,133,244,.3)}.google-icon{font-size:18px;transition:transform .3s ease}.google-login:hover .google-icon{transform:rotate(360deg)}.user-icon{width:45px;height:45px;border-radius:50%;cursor:pointer;transition:all .3s cubic-bezier(.4, 0, .2, 1);border:2px solid transparent;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-primary,#6366f1),var(--color-accent,#14b8a6));padding:2px}.user-icon::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--color-primary,#6366f1),var(--color-accent,#14b8a6));opacity:0;transition:opacity .3s ease;z-index:-1}.user-icon:hover{transform:scale(1.08) rotate(5deg);box-shadow:0 8px 20px rgba(99,102,241,.3)}.user-icon:hover::after{opacity:1}.user-icon i,.user-icon img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#fff}.user-icon i{display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--color-primary,#6366f1)}[data-theme=dark] .user-icon i{color:var(--color-accent,#14b8a6);background:var(--color-bg-secondary,#1e293b)}.user-menu{position:absolute;top:calc(var(--menubar-height) + 10px);right:clamp(20px,5vw,60px);background:var(--card-bg-color,#fff);border:1px solid var(--color-border,#e5e7eb);border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.15);display:none;min-width:200px;overflow:hidden;z-index:1001;animation:slideDown .3s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}[data-theme=dark] .user-menu{background:var(--color-bg-secondary,#1e293b);border-color:var(--color-border,#334155);box-shadow:0 20px 40px rgba(0,0,0,.5)}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-menu.active{display:block}.user-menu a{display:flex;align-items:center;gap:12px;padding:14px 20px;text-decoration:none;color:var(--color-text,#111827);font-size:15px;font-weight:500;transition:all .2s ease;position:relative}.user-menu a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--color-primary,#6366f1),var(--color-accent,#14b8a6));transform:scaleY(0);transition:transform .2s ease}.user-menu a:hover{background:var(--color-bg-secondary,#f9fafb);color:var(--color-primary,#6366f1);padding-left:24px}.user-menu a:hover::before{transform:scaleY(1)}[data-theme=dark] .user-menu a{color:var(--color-text,#f1f5f9)}[data-theme=dark] .user-menu a:hover{background:var(--color-bg-tertiary,#334155);color:var(--color-accent,#14b8a6)}body{padding-top:var(--menubar-height)}@media (max-width:768px){:root{--menubar-height:60px}.title-bar{padding:0 15px;height:var(--menubar-height)}.title-bar h1{font-size:clamp(1rem, 4vw, 1.2rem)}.google-login{padding:10px 18px;font-size:14px;gap:8px}.google-login span{display:none}.google-icon{font-size:20px}.user-icon{width:40px;height:40px}.user-menu{right:15px;min-width:160px}.user-menu a{padding:12px 16px;font-size:14px}}@media (max-width:480px){:root{--menubar-height:56px}.title-bar{padding:0 12px;height:var(--menubar-height)}.title-bar h1{font-size:clamp(.9rem, 4.5vw, 1.1rem);max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-icon{width:36px;height:36px}.user-icon i{font-size:1.5rem}.google-login{padding:8px 12px;font-size:16px;border-radius:10px}.google-icon{font-size:18px}.user-menu{right:12px;min-width:150px;border-radius:12px}.user-menu a{padding:10px 14px;font-size:13px}}@media (max-width:360px){:root{--menubar-height:52px}.title-bar{padding:0 10px;height:var(--menubar-height)}.title-bar h1{font-size:clamp(.8rem, 4vw, .9rem);max-width:55vw}.user-icon{width:32px;height:32px}.user-icon i{font-size:1.3rem}.google-login{padding:7px 10px;font-size:14px}.google-icon{font-size:16px}}html{scroll-behavior:smooth}.google-login:focus,.title-bar h1:focus,.user-icon:focus,.user-menu a:focus{outline:2px solid var(--color-primary,#6366f1);outline-offset:2px}@media (prefers-reduced-motion:reduce){.google-login,.title-bar,.user-icon,.user-menu a{transition:none}.user-menu{animation:none}.google-login::before{display:none}}