.header-main{position:relative}
.desktop-nav{align-items:center;gap:2px;min-width:0}
.desktop-nav summary{list-style:none;cursor:pointer}
.desktop-nav summary::-webkit-details-marker,.mobile-subnav summary::-webkit-details-marker{display:none}
.nav-dropdown{position:relative}
.nav-dropdown>summary,.nav-direct{display:flex;align-items:center;gap:4px;padding:12px 9px;border-radius:10px;font-size:13px;color:oklch(var(--foreground-700));white-space:nowrap;transition:background .15s,color .15s}
.nav-dropdown>summary>i{font-size:16px;transition:transform .2s}
.nav-dropdown[open]>summary>i{transform:rotate(180deg)}
.nav-dropdown[open]>summary,.nav-dropdown>summary:hover,.nav-direct:hover{color:oklch(var(--primary-700));background:oklch(var(--primary-50))}
.nav-panel{z-index:60;background:oklch(var(--background-50));border:1px solid oklch(var(--background-200));border-radius:18px;box-shadow:0 18px 50px #10233f1c;text-align:right}
.nav-dropdown>.nav-panel{position:absolute;top:100%;right:0}
.nav-list{width:240px;padding:8px}
.nav-list>a,.nav-submenu>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px;border-radius:10px;font-size:12px;color:oklch(var(--foreground-700));line-height:1.8}
.nav-list>a:hover,.nav-submenu>summary:hover,.nav-submenu[open]>summary{background:oklch(var(--primary-50));color:oklch(var(--primary-700))}
.nav-submenu{position:relative}
.nav-submenu>.nav-panel{position:absolute;top:-8px;right:100%}
.nav-submenu.flyout-flipped>.nav-panel{right:auto;left:100%}
.nav-submenu.flyout-flipped>summary>i{transform:rotate(180deg)}
.nav-dropdown.nav-mega{position:static}
.nav-mega>.mega-panel{right:24px;left:24px;margin-inline:auto;max-width:1000px;max-height:calc(100dvh - 140px);overflow-y:auto;overscroll-behavior:contain;padding:24px}
.mega-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid oklch(var(--background-200))}
.mega-heading span{font-size:10px;color:oklch(var(--foreground-500))}
.mega-heading h2{font-size:17px;font-weight:800;margin-top:4px}
.mega-heading>a,.mega-help>a{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:oklch(var(--primary-700))}
.mega-grid{display:grid;grid-template-columns:1.2fr 1.1fr .9fr;gap:24px;padding-top:20px}
.mega-column>h3{font-size:11px;font-weight:700;color:oklch(var(--foreground-500));padding:0 10px 10px}
.mega-column>a{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;font-size:13px;font-weight:700}
.mega-column>a:hover{background:oklch(var(--primary-50));color:oklch(var(--primary-700))}
.mega-column>a>i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:oklch(var(--primary-50));color:oklch(var(--primary-600));font-size:20px}
.mega-column small{display:block;margin-top:5px;color:oklch(var(--foreground-500));font-size:10px;font-weight:400}
.mega-help{padding:22px;border-radius:16px;background:oklch(var(--primary-50));border:1px solid oklch(var(--primary-100))}
.mega-help>i{font-size:30px;color:oklch(var(--primary-600))}
.mega-help h3{font-size:15px;font-weight:800;margin-top:10px}
.mega-help p{font-size:12px;line-height:2;margin:10px 0 18px;color:oklch(var(--foreground-600))}
.desktop-nav :focus-visible,.mobile-subnav :focus-visible{outline:3px solid oklch(var(--primary-300));outline-offset:2px}
.mobile-subnav summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:52px;padding:10px;border-radius:12px;font-size:12px;font-weight:700;cursor:pointer}
.mobile-subnav summary>i:first-child:not(:last-child){font-size:20px;color:oklch(var(--primary-600))}
.mobile-subnav summary>i:last-child{margin-inline-start:auto;font-size:18px}
.mobile-subnav[open]>summary{background:oklch(var(--primary-50));color:oklch(var(--primary-700))}
.mobile-subnav[open]>summary>i:last-child{transform:rotate(180deg)}
.mobile-subnav>div{margin:6px 14px 12px 0;padding-right:10px;border-right:1px solid oklch(var(--primary-200))}
.mobile-subnav>div>a{display:block;min-height:44px;padding:12px 10px;border-radius:10px;font-size:12px;color:oklch(var(--foreground-600))}
.mobile-subnav>div>a:hover{background:oklch(var(--primary-50));color:oklch(var(--primary-700))}
@media(min-width:1024px) and (max-width:1279px){.nav-dropdown>summary,.nav-direct{padding-inline:6px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.desktop-nav summary,.desktop-nav summary>i{transition:none}}