.site-header--design { height: 90px; background: #272727; overflow: visible; }
.site-header--design .header-inner { width: 1520px; max-width: calc(100% - 64px); height: 90px; gap: 24px; position: relative; }
.site-header--design .brand-logo { width: 125px; height: 36px; max-width: none; object-fit: contain; }
.site-header--design .brand-lockup { margin-right: 20px; }
.site-header--design .header-nav { gap: 16px; flex-shrink: 1; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.site-header--design .header-nav a { padding: 6px 16px; font-size: 16px; line-height: 22px; color: #ddd; flex-shrink: 0; }
.site-header--design .header-nav .nav-link-active, .site-header--design .header-nav a:hover { color: #ff4b02; }
.site-header--design .header-gap { display: none; }
.site-header--design .header-search { flex: 1 1 300px; min-width: 180px; max-width: 400px; height: 40px; padding: 0 16px; gap: 12px; background: #323232; border: 1px solid #3c3c3c; border-radius: 22px; margin-left: auto; }
.site-header--design .search-input { font-size: 14px; color: #eee; order: 0; }
.site-header--design .search-input::placeholder { color: #8c8c8c; }
.header-search-submit, .header-menu-toggle, .drawer-close { border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.header-search-submit { width: 24px; height: 24px; }
.site-header--design .header-app-icon { width: 28px; height: 28px; flex: 0 0 28px; }
.site-header--design .header-app-icon img { width: 28px; height: 28px; object-fit: contain; }
.site-header--design .header-separator { width: 1px; height: 12px; background: #424242; }
.site-header--design .header-account { display: flex; flex-shrink: 0; gap: 8px; min-width: 0; }
.site-header--design .account-avatar, .site-header--design .account-avatar-photo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; }
.site-header--design .account-avatar { background: url('/static/images/header/guest-pc.svg') center/contain no-repeat; }
.site-header--design .account-avatar > * { display: none; }
.site-header--design .account-label { font-size: 16px; line-height: 22px; color: #ddd; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-menu-toggle, .header-mobile-search { display: none; }
.site-header--design :is(a,button,input):focus-visible, .mobile-nav-drawer :is(a,button,summary):focus-visible { outline: 2px solid #ff4b02; outline-offset: 3px; }
.mobile-nav-drawer { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(280px, 85vw); height: 100dvh; max-width: none; max-height: none; box-sizing: border-box; padding: 60px 36px 32px; border: 0; background: #272727; color: #ddd; overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav-drawer::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.mobile-nav-drawer[open] { animation: drawer-enter .22s ease-out; }
@keyframes drawer-enter { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer-close { position: absolute; top: 26px; right: 12px; width: 24px; height: 24px; }
.drawer-brand { display: block; width: 138px; margin: 0 auto 24px; }
.drawer-links { display: flex; flex-direction: column; gap: 11px; }
.drawer-link, .drawer-group summary { display: block; box-sizing: border-box; min-height: 50px; padding: 14px 18px; border: 1px solid #404040; border-radius: 10px; background: #323232; color: #f5f5f5; font-size: 16px; line-height: 20px; font-weight: 500; text-decoration: none; cursor: pointer; }
.drawer-link.is-active { color: #ff4b02; }
.drawer-children { display: flex; flex-direction: column; padding: 8px 16px; gap: 12px; }
.drawer-children a { color: #ddd; text-decoration: none; font-size: 14px; }
.drawer-contact { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; text-align: center; }
.drawer-contact a { color: #aaa; font-size: 14px; line-height: 20px; text-decoration: none; overflow-wrap: anywhere; }
.drawer-social { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 24px; }
.drawer-social span { width: 1px; height: 15px; background: #505050; }
@media (min-width:768px) and (max-width:1200px) {
 .site-header--design .header-inner { gap: 16px; max-width: calc(100% - 32px); }
 .site-header--design .brand-lockup { margin-right: 0; }
 .site-header--design .header-nav { gap: 4px; }
 .site-header--design .header-nav a { padding-inline: 8px; font-size: 14px; }
 .site-header--design .account-label { display: none; }
}
@media (max-width:767px) {
 .site-header--design { height: 48px; padding: 0 16px; }
 .site-header--design .header-inner { width: 100%; max-width: 100%; height: 48px; gap: 6px; }
 .site-header--design .header-menu-toggle { display: grid; width: 24px; height: 24px; margin-right: auto; }
 .site-header--design .brand-lockup { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
 .site-header--design .brand-logo { width: 92px; height: 24px; }
 .site-header--design .header-nav, .site-header--design .header-search, .site-header--design .header-app-icon, .site-header--design .header-separator { display: none; }
 .site-header--design .header-mobile-search { display: block; width: 24px; height: 24px; }
 .site-header--design .header-account { display: flex; width: 24px; height: 24px; }
 .site-header--design .account-label { display: none; }
 .site-header--design .account-avatar, .site-header--design .account-avatar-photo { width: 24px; height: 24px; flex-basis: 24px; }
 .site-header--design .account-avatar { background-image: url('/static/images/header/guest-mobile.svg'); }
}
@media (prefers-reduced-motion:reduce) { .mobile-nav-drawer[open] { animation: none; } }

.site-header--design [hidden] { display: none !important; }

.site-header--design .header-nav .nav-link-active,
.site-header--design .header-nav .nav-link-active:hover { background: #ff4b02; color: #fff; border-radius: 999px; }

.site-header--design .header-wallet { display:flex; align-items:center; gap:8px; flex-shrink:0; color:#ddd; text-decoration:none; font-size:14px; white-space:nowrap; }
.header-wallet img { width:28px; height:28px; }
.header-wallet-separator { width:1px; height:12px; background:#424242; flex-shrink:0; }
@media(max-width:767px) { .site-header--design .header-wallet, .header-wallet-separator { display:none; } }