.site-header-shell{
  --header-bg:#ffffff;
  --header-text:#1e293b;
  --header-button-bg:#4f3aff;
  --header-button-text:#ffffff;
  --header-mobile-bg:var(--header-bg);
  --header-mobile-text:var(--header-text);
  --header-mobile-icon:var(--header-mobile-text);
  --header-mobile-surface:color-mix(in srgb,var(--header-mobile-bg) 90%,var(--header-mobile-text) 10%);
  --header-mobile-surface-strong:color-mix(in srgb,var(--header-mobile-bg) 84%,var(--header-mobile-text) 16%);
  --header-mobile-border:color-mix(in srgb,var(--header-mobile-text) 18%,transparent);
  --header-mobile-muted:color-mix(in srgb,var(--header-mobile-text) 58%,var(--header-mobile-bg) 42%);
  --header-mobile-soft-text:color-mix(in srgb,var(--header-mobile-text) 76%,var(--header-mobile-bg) 24%);
  --header-mobile-icon-surface:color-mix(in srgb,var(--header-mobile-icon) 12%,var(--header-mobile-bg) 88%);
}

.site-header{
  position:relative;
  z-index:120;
  border-bottom:1px solid rgba(148,163,184,.2);
  background:var(--header-bg,#fff);
  color:var(--header-text,var(--text));
  transition:background-color var(--dur,.22s) var(--ease,ease),box-shadow var(--dur,.22s) var(--ease,ease),border-color var(--dur,.22s) var(--ease,ease),backdrop-filter var(--dur,.22s) var(--ease,ease),transform .2s var(--ease,ease);
}

.site-header--sticky{
  position:sticky;
  top:var(--header-sticky-top,0px);
}

.site-header--sticky-on-scroll{
  position:relative;
}

.site-header--sticky-on-scroll.is-sticky-visible{
  position:sticky;
  top:var(--header-sticky-top,0px);
}

.site-header--transparent{
  background:transparent !important;
  border-bottom-color:transparent;
}

.has-transparent-header .site-header--transparent{
  position:absolute;
  left:0;
  right:0;
  top:var(--header-sticky-top,0px);
}

.has-transparent-header .site-header--transparent.scrolled,
.has-transparent-header .site-header--transparent.is-sticky-visible{
  position:sticky;
  top:var(--header-sticky-top,0px);
}

.site-header.scrolled{
  box-shadow:0 10px 28px rgba(2,6,23,.1);
}

.site-header--transparent.scrolled,
.site-header--sticky-on-scroll.scrolled,
.site-header--sticky-always.scrolled{
  background:var(--header-bg,#fff) !important;
  backdrop-filter:blur(16px);
  border-bottom-color:rgba(148,163,184,.24);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:74px;
}

.site-header--layout-split .header-inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.site-header--layout-split .header-logo{grid-column:1}
.site-header--layout-split .header-nav{grid-column:2;justify-self:center}
.site-header--layout-split .header-actions{grid-column:3;justify-self:end}

.site-header--layout-centered .header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    "left logo actions"
    "nav nav nav";
  align-items:center;
  row-gap:8px;
  min-height:88px;
  padding-block:8px 10px;
}

.site-header--layout-centered .header-logo{grid-area:logo;justify-self:center}
.site-header--layout-centered .header-actions{grid-area:actions;justify-self:end}
.site-header--layout-centered .header-nav{grid-area:nav;justify-content:center}

.header-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:22px;
  letter-spacing:-.03em;
  color:inherit;
  text-decoration:none;
}

.header-logo-img{
  width:var(--header-logo-width,136px);
  max-width:min(45vw,260px);
  height:auto;
}

.header-logo-icon{
  width:40px;
  height:40px;
  border-radius:var(--r-sm);
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--header-button-bg) 86%,#ffffff),
    var(--header-button-bg)
  );
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--header-button-text);
  font-size:16px;
  font-weight:800;
}

.header-nav{
  display:flex;
  align-items:center;
  gap:6px;
}

.site-header--nav-left .header-nav{justify-content:flex-start}
.site-header--nav-center .header-nav{justify-content:center}
.site-header--nav-right .header-nav{justify-content:flex-end}

.header-nav-link{
  font-size:14px;
  font-weight:600;
  color:inherit;
  opacity:.84;
  padding:10px 14px;
  border-radius:12px;
  transition:background-color var(--dur,.22s) var(--ease,ease),color var(--dur,.22s) var(--ease,ease),opacity var(--dur,.22s) var(--ease,ease),transform .2s var(--ease,ease),border-color var(--dur,.22s) var(--ease,ease),box-shadow var(--dur,.22s) var(--ease,ease);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  background:none;
  border:1px solid transparent;
  font-family:inherit;
}

.header-nav-link:hover,
.header-nav-link.is-active{
  opacity:1;
  background:color-mix(in srgb,var(--header-button-bg) 10%,transparent);
  color:var(--header-button-bg);
  border-color:color-mix(in srgb,var(--header-button-bg) 30%,transparent);
}

.header-nav-link:hover{transform:translateY(-1px)}

.header-dropdown{position:relative}

.header-dropdown-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:#fff;
  border:1px solid rgba(148,163,184,.24);
  border-radius:14px;
  box-shadow:0 18px 42px rgba(2,6,23,.13);
  padding:8px;
  z-index:200;
  margin-top:8px;
}

.header-dropdown:hover .header-dropdown-menu{display:block}

.header-dropdown-item{
  display:block;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--header-text,var(--text));
  border-radius:9px;
  transition:background-color var(--dur-fast,.18s) var(--ease,ease),color var(--dur-fast,.18s) var(--ease,ease),transform var(--dur-fast,.18s) var(--ease,ease);
  text-decoration:none;
}

.header-dropdown-item:hover{
  background:var(--bg-s);
  color:var(--header-button-bg);
  transform:translateX(2px);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.header-cta{min-height:42px;padding-inline:15px;gap:8px}

.header-cta.btn-primary{
  background:var(--header-button-bg) !important;
  border:1px solid var(--header-button-bg) !important;
  color:var(--header-button-text) !important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--header-button-bg) 34%,transparent);
}

.header-cta.btn-primary:hover{
  background:var(--header-button-bg) !important;
  color:var(--header-button-text) !important;
  filter:brightness(.95);
}

.header-cta.btn-outline{
  color:var(--header-button-bg) !important;
  border-color:var(--header-button-bg) !important;
}

.header-cta.btn-outline:hover{
  color:var(--header-button-bg) !important;
  background:color-mix(in srgb,var(--header-button-bg) 10%,transparent) !important;
}

.header-cta.btn-ghost{
  color:var(--header-button-text) !important;
  border-color:color-mix(in srgb,var(--header-button-bg) 40%,transparent) !important;
  background:color-mix(in srgb,var(--header-button-bg) 24%,transparent) !important;
}

.header-cta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
}

.header-cta-icon i,
.header-cta-icon svg{
  width:16px;
  height:16px;
}

.header-icon-btn{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  opacity:.84;
  transition:transform var(--dur-fast,.18s) var(--ease,ease),border-color var(--dur,.22s) var(--ease,ease),color var(--dur,.22s) var(--ease,ease),background-color var(--dur,.22s) var(--ease,ease),opacity var(--dur,.22s) var(--ease,ease);
  border:1px solid rgba(148,163,184,.25);
  background:rgba(255,255,255,.8);
  position:relative;
  cursor:pointer;
}

.site-header--transparent .header-icon-btn{
  background:rgba(15,23,42,.25);
  border-color:rgba(255,255,255,.32);
  color:#fff;
}

.header-icon-btn:hover{
  opacity:1;
  border-color:color-mix(in srgb,var(--header-button-bg) 45%,transparent);
  color:var(--header-button-bg);
  background:#fff;
  transform:translateY(-1px);
}

.desktop-only{display:flex}
.mobile-only{display:none!important}

.mobile-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  backdrop-filter:blur(3px);
  z-index:199;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s var(--ease,ease);
}

.mobile-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.mobile-menu{
  --drawer-padding:20px;
  position:fixed;
  top:0;
  right:0;
  width:min(92vw,388px);
  height:100dvh;
  z-index:200;
  transform:translateX(104%);
  transition:transform .34s cubic-bezier(.22,.8,.2,1);
  pointer-events:none;
}

.mobile-menu.open,
.mobile-menu.menu-open{
  transform:translateX(0);
  pointer-events:auto;
}

.mobile-drawer__surface{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:var(--drawer-padding);
  background:var(--header-mobile-bg,#ffffff);
  color:var(--header-mobile-text,var(--header-text));
  backdrop-filter:blur(16px);
  border-left:1px solid var(--header-mobile-border,rgba(148,163,184,.2));
  box-shadow:-20px 0 52px rgba(2,6,23,.2);
  overflow:auto;
}

.mobile-drawer__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.mobile-drawer__brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
  flex:1;
}

.mobile-drawer__brand-logo{
  width:48px;
  height:48px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--header-mobile-border,rgba(148,163,184,.28));
  background:var(--header-mobile-surface-strong,#fff);
  overflow:hidden;
  flex-shrink:0;
}

.mobile-drawer__brand-img{width:100%;height:100%;object-fit:contain}

.mobile-drawer__brand-fallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--header-button-text);
  font-weight:800;
  font-size:15px;
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--header-button-bg) 86%,#ffffff),
    var(--header-button-bg)
  );
}

.mobile-drawer__brand-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.mobile-drawer__brand-name{font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mobile-drawer__close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--header-mobile-border,rgba(148,163,184,.34));
  background:var(--header-mobile-surface-strong,#fff);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--header-mobile-icon,var(--header-mobile-text));
  cursor:pointer;
  transition:background-color var(--dur-fast,.18s) var(--ease,ease),border-color var(--dur-fast,.18s) var(--ease,ease),transform var(--dur-fast,.18s) var(--ease,ease),color var(--dur-fast,.18s) var(--ease,ease);
}

.mobile-drawer__close:hover{
  background:color-mix(in srgb,var(--header-button-bg) 10%,transparent);
  border-color:color-mix(in srgb,var(--header-button-bg) 35%,transparent);
  color:var(--header-button-bg);
  transform:translateY(-1px);
}

.mobile-drawer__user{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--header-mobile-border,rgba(148,163,184,.2));
  background:var(--header-mobile-surface,#ffffff);
  color:inherit;
  text-decoration:none;
  transition:border-color var(--dur-fast,.18s) var(--ease,ease),box-shadow var(--dur-fast,.18s) var(--ease,ease),transform var(--dur-fast,.18s) var(--ease,ease);
}

.mobile-drawer__user:hover{
  border-color:color-mix(in srgb,var(--header-button-bg) 35%,transparent);
  box-shadow:0 10px 22px color-mix(in srgb,var(--header-button-bg) 16%,transparent);
  transform:translateY(-1px);
}

.mobile-drawer__avatar{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--header-button-bg);
  color:#fff;
  font-weight:800;
  font-size:14px;
  flex-shrink:0;
}

.mobile-drawer__user-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.mobile-drawer__user-name{font-size:14px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-drawer__user-state{font-size:12px;color:var(--header-mobile-muted,var(--header-mobile-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-drawer__user-chevron{margin-inline-start:auto;color:var(--header-mobile-muted,var(--header-mobile-text));font-size:12px}

.mobile-drawer__divider{
  height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--header-mobile-border,rgba(148,163,184,.4)) 50%,transparent 100%);
}

.mobile-drawer__nav,
.mobile-drawer__bottom{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mobile-drawer__link,
.mobile-drawer__action{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--header-mobile-text,var(--header-text));
  border:1px solid transparent;
  background:transparent;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color var(--dur-fast,.18s) var(--ease,ease),border-color var(--dur-fast,.18s) var(--ease,ease),color var(--dur-fast,.18s) var(--ease,ease),transform var(--dur-fast,.18s) var(--ease,ease),box-shadow var(--dur-fast,.18s) var(--ease,ease);
}

.mobile-drawer__link:hover,
.mobile-drawer__action:hover{
  background:color-mix(in srgb,var(--header-button-bg) 8%,transparent);
  border-color:color-mix(in srgb,var(--header-button-bg) 25%,transparent);
  color:var(--header-button-bg);
  transform:translateY(-1px);
}

.mobile-drawer__link.is-active,
.mobile-drawer__action.is-active{
  background:color-mix(in srgb,var(--header-button-bg) 12%,transparent);
  border-color:color-mix(in srgb,var(--header-button-bg) 32%,transparent);
  color:var(--header-button-bg);
}

.mobile-drawer__link-icon,
.mobile-drawer__action-icon{
  width:32px;
  height:32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--header-mobile-icon-surface,rgba(15,23,42,.06));
  color:inherit;
  flex-shrink:0;
}

.mobile-drawer__link-label,
.mobile-drawer__action-label{
  flex:1;
  text-align:start;
  line-height:1.35;
}

.mobile-drawer__link-caret{
  color:var(--header-mobile-muted,var(--header-mobile-text));
  font-size:12px;
  transition:transform var(--dur-fast,.18s) var(--ease,ease),color var(--dur-fast,.18s) var(--ease,ease);
}

.mobile-drawer__categories.is-open .mobile-drawer__link-caret{
  transform:rotate(180deg);
  color:var(--header-button-bg);
}

.mobile-drawer__subnav{
  display:grid;
  gap:8px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .26s var(--ease,ease),opacity .2s var(--ease,ease),padding .2s var(--ease,ease);
  padding:0 0 0 16px;
}

.mobile-drawer__categories.is-open .mobile-drawer__subnav{
  max-height:320px;
  opacity:1;
  padding-top:8px;
}

.mobile-drawer__sublink{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  color:var(--header-mobile-soft-text,var(--header-mobile-text));
  background:var(--header-mobile-surface,#ffffff);
  border:1px solid var(--header-mobile-border,rgba(148,163,184,.14));
  transition:background-color var(--dur-fast,.18s) var(--ease,ease),border-color var(--dur-fast,.18s) var(--ease,ease),color var(--dur-fast,.18s) var(--ease,ease),transform var(--dur-fast,.18s) var(--ease,ease);
}

.mobile-drawer__sublink:hover,
.mobile-drawer__sublink.is-active{
  color:var(--header-button-bg);
  border-color:color-mix(in srgb,var(--header-button-bg) 30%,transparent);
  background:color-mix(in srgb,var(--header-button-bg) 9%,transparent);
}

.mobile-drawer__sublink:hover{transform:translateX(2px)}

.mobile-drawer__spacer{flex:1;min-height:8px}

@media(max-width:920px){
  .header-cta{display:none}
  .site-header--layout-centered .header-inner{min-height:78px}
}

@media(max-width:768px){
  .desktop-only{display:none!important}
  .mobile-only{display:flex!important}
  .site-header{
    background:var(--header-mobile-bg,var(--header-bg)) !important;
    color:var(--header-mobile-text,var(--header-text));
    border-bottom-color:var(--header-mobile-border,rgba(148,163,184,.2));
  }
  .site-header--transparent{
    background:var(--header-mobile-bg,var(--header-bg)) !important;
    border-bottom-color:var(--header-mobile-border,rgba(148,163,184,.24));
  }
  .has-transparent-header .site-header--transparent{
    position:sticky;
    left:auto;
    right:auto;
  }
  .header-inner{min-height:68px}
  .header-logo{font-size:20px}
  .header-logo{color:var(--header-mobile-text,var(--header-text))}
  .header-icon-btn{
    color:var(--header-mobile-icon,var(--header-mobile-text));
    background:var(--header-mobile-surface,#ffffff);
    border-color:var(--header-mobile-border,rgba(148,163,184,.32));
  }
  .header-icon-btn:hover{
    color:var(--header-button-bg);
    border-color:color-mix(in srgb,var(--header-button-bg) 40%,transparent);
  }
  .site-header--layout-centered .header-inner{
    display:flex;
    min-height:68px;
    padding-block:0;
  }
}

@media(min-width:769px){
  .mobile-overlay,
  .mobile-menu{display:none!important}
}

.has-sticky-announcement{--header-sticky-top:var(--ann-bar-height,42px)}
