.topbar{background:var(--background-color);box-shadow:0 1px 10px #dddddd90;height:var(--header-height);left:0;position:fixed;right:0;top:0;z-index:1000}.topbar-content{height:100%;justify-content:space-between}.logo,.topbar-content{align-items:center;display:flex}.logo{color:var(--primary-color);font-size:var(--text-lg);font-weight:700;gap:var(--spacing-xs)}.logo-image{height:20px}.logo-arrow{color:var(--secondary-color)}.main-nav{flex:1;margin:0 var(--spacing-2xl)}.nav-list{display:flex;gap:var(--spacing-lg);justify-content:right;list-style:none}.nav-item{font-weight:500;padding:var(--spacing-md) 0;position:relative}.nav-item a,.nav-item span{color:var(--text-color);cursor:pointer;font-size:var(--text-sm)}.nav-item:hover>a,.nav-item:hover>span{color:var(--primary-color)}.dropdown{background:var(--background-color);border-radius:3px;box-shadow:var(--shadow-md-down);display:none;left:0;list-style:none;min-width:120px;padding:5px var(--spacing-sm) var(--spacing-sm);position:absolute;top:100%;transform:translate(-14px)}.has-dropdown:hover .dropdown{display:block}.dropdown li{padding:var(--spacing-sm) var(--spacing-sm)}.dropdown a{display:block;white-space:nowrap}.lang-switch{display:flex;gap:var(--spacing-xs)}.lang-link{color:var(--text-color-2);font-size:var(--text-sm);padding:var(--spacing-xs)}.lang-link.active{color:var(--primary-color);font-weight:700}.mobile-menu-btn{background:none;border:none;cursor:pointer;display:none;padding:var(--spacing-sm)}.hamburger{display:flex;flex-direction:column;height:20px;justify-content:space-between;position:relative;width:24px}.hamburger span{background-color:var(--primary-color);display:block;height:2px;transition:all .3s ease;width:100%}.hamburger.is-active span:first-child{transform:translateY(9px) rotate(45deg)}.hamburger.is-active span:nth-child(2){opacity:0}.hamburger.is-active span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}.mobile-nav{background:var(--background-color);display:none;height:calc(100vh - var(--header-height));overflow-y:auto;position:fixed;right:-100%;top:var(--header-height);transition:right .3s ease;width:100%;z-index:999}.mobile-nav.is-open{right:0}.mobile-nav-content{border-top:1px solid var(--background-light);padding:var(--spacing-md) var(--spacing-lg)}.mobile-nav-list{list-style:none}.mobile-nav-item{padding-bottom:var(--spacing-xs)}.mobile-nav-item:last-child{border-bottom:none}.mobile-nav-header{align-items:center;cursor:pointer;display:flex;justify-content:space-between;padding:var(--spacing-xs) 0}.mobile-nav-header span{color:var(--primary-color);font-size:var(--text-lg);font-weight:700}.arrow{font-size:var(--text-md);transition:transform .3s ease}.arrow,.mobile-nav-item>a{color:var(--primary-color)}.mobile-nav-item>a{display:block;font-size:var(--text-lg);font-weight:700;padding:var(--spacing-sm) 0;text-decoration:none}.mobile-dropdown{display:block;margin-top:var(--spacing-xs);padding:0 0 0 var(--spacing-xl)}.mobile-dropdown li{margin-bottom:0}.mobile-dropdown a{color:var(--text-color);display:block;font-size:var(--text-md);padding:var(--spacing-sm) 0;text-decoration:none}.mobile-lang-switch{border-top:1px solid rgba(0,0,0,.1);display:flex;gap:var(--spacing-xs);justify-content:right;margin-top:var(--spacing-lg);padding:var(--spacing-sm) 0}.mobile-lang-switch .lang-link{font-size:var(--text-lg);padding:var(--spacing-sm) var(--spacing-lg)}@media (max-width:840px){.desktop-nav,.lang-switch{display:none}.mobile-menu-btn,.mobile-nav{display:block}}@media (max-width:768px){.topbar-content{padding:0 var(--spacing-lg)}.logo-image{height:24px}}.footer{background:var(--background-medium);border-top:1px solid rgba(0,0,0,.1);height:var(--footer-height)}.footer-item{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.footer-content{color:var(--text-color-2);font-size:var(--text-sm);height:100%}.footer-content,.footer-links{align-items:center;display:flex;justify-content:center}.footer-links{color:var(--primary-color);font-weight:500;gap:var(--spacing-sm);width:100%}.separator{color:var(--text-color-2);margin:0 var(--spacing-sm)}.footer a{text-align:center}.footer a,.footer a:hover{color:var(--primary-color)}@media (max-width:500px){.footer-item{max-width:24%}}@media (max-width:750px){.footer-item{max-width:30%}.separator{margin:0 var(--spacing-xs)}.footer-links{gap:var(--spacing-xs)}}