/* Keep appearance/language in the top utility strip and give the brand room. */
html:root[data-design] .topbar{position:relative;z-index:80}
html:root[data-design] .topbar .topbar-inner{height:46px;min-height:46px;gap:18px}
html:root[data-design] .topbar .topbar-right{display:flex;align-items:center;gap:18px;height:auto;margin-inline-start:auto;min-width:0}
html:root[data-design] .topbar .topbar-controls{display:flex;align-items:center;gap:9px;height:auto}
html:root[data-design] .topbar-controls .appearance-mode-toggle,html:root[data-design] .topbar-controls .language-selector>summary{min-height:31px;height:31px;padding:6px 9px;font-size:11px;border-radius:5px;background:var(--surface)}
html:root[data-design] .topbar-controls .language-selector>summary{gap:6px}
html:root[data-design] .topbar-controls .language-options{top:calc(100% + 6px);z-index:160}
html:root[data-design] .site-header .header-inner{min-height:98px;height:98px;gap:24px}
html:root[data-design] .site-header .brand{flex:0 1 330px;min-width:180px;max-width:390px;font-size:34px;gap:12px;letter-spacing:-1.1px}
html:root[data-design] .site-header .brand-symbol{width:42px;height:48px;flex:none}
html:root[data-design] .site-header .brand-symbol .icon{width:40px;height:45px}
html:root[data-design] .site-header .brand>.brand-name{max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
html:root[data-design] .site-header .header-actions{flex:none;gap:14px;margin:0}
@media(min-width:1101px){
html:root[data-design] .site-header .main-nav{flex:none;gap:25px;margin:0 auto;align-items:center}
html:root[data-design] .site-header .main-nav>a,html:root[data-design] .site-header .main-nav>details>summary{white-space:nowrap;flex:none;min-height:44px}
html:root[data-design] .site-header .header-actions>.login-link{white-space:nowrap}
}
@media(min-width:1101px) and (max-width:1350px){
html:root[data-design] .site-header .brand{flex-basis:270px;max-width:300px;font-size:31px;gap:9px}
html:root[data-design] .site-header .main-nav{gap:20px}
html:root[data-design] .site-header .header-inner{gap:17px}
}
@media(max-width:1100px){
html:root[data-design] .site-header .header-inner{height:88px;min-height:88px;gap:16px}
html:root[data-design] .site-header .brand{flex:1 1 auto;max-width:460px;min-width:0;font-size:33px}
html:root[data-design] .site-header .header-actions{margin-inline-start:auto}
}
@media(max-width:760px){
html:root[data-design] .topbar .topbar-inner{height:40px;min-height:40px}
html:root[data-design] .topbar .topbar-message{display:none}
html:root[data-design] .topbar .topbar-right{width:100%;justify-content:flex-end;gap:14px}
html:root[data-design] .topbar-controls .appearance-mode-toggle,html:root[data-design] .topbar-controls .language-selector>summary{height:29px;min-height:29px;padding:5px 8px;min-width:30px}
html:root[data-design] .topbar-controls .appearance-mode-toggle .appearance-mode-caption{display:inline-flex}
html:root[data-design] .site-header .header-inner{height:82px;min-height:82px;gap:12px}
html:root[data-design] .site-header .brand{max-width:calc(100% - 54px);font-size:29px;gap:9px}
html:root[data-design] .site-header .brand-symbol{width:35px;height:40px}
html:root[data-design] .site-header .brand-symbol .icon{width:33px;height:38px}
html:root[data-design] .site-header .header-actions{gap:0}
html:root[data-design] .topbar .topbar-business-link{display:none}
}