:root {
  --kaian-header-height: 78px;
  --kaian-header-mobile-height: 68px;
  --header-height: var(--kaian-header-height);
  --kaian-header-container: 1180px;
  --kaian-brand-blue: #1677ff;
  --kaian-header-line: #dceafa;
  --kaian-header-shadow: 0 24px 70px rgba(45, 111, 170, 0.16);
}

.kaian-global-header {
  position: sticky;
  top: 0;
  z-index: 80;
  width: 100%;
  height: var(--kaian-header-height);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--kaian-header-line);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

.kaian-global-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(var(--kaian-header-container), calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
}

.kaian-global-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  color: #10233f;
  text-decoration: none;
}

.kaian-global-brand-logo { display: grid; place-items: center; width: 112px; height: 42px; }
.kaian-global-brand-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kaian-global-brand-copy { display: grid; gap: 1px; line-height: 1.1; }
.kaian-global-brand-copy strong { color: #10233f; font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.kaian-global-brand-copy small { color: #7390ae; font-size: 9px; letter-spacing: .18em; }

.kaian-global-nav { display: flex; align-items: center; justify-content: center; gap: 32px; flex: 1; height: 100%; }
.kaian-global-nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.kaian-global-nav-link,
.kaian-global-nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4f657c;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s ease;
}
.kaian-global-nav-link::after,
.kaian-global-nav-trigger::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: 14px;
  height: 2px;
  background: var(--kaian-brand-blue);
  transition: all .25s ease;
}
.kaian-global-nav-link:hover,
.kaian-global-nav-trigger:hover,
.kaian-global-nav-item.is-open > .kaian-global-nav-trigger,
.kaian-global-nav-item.is-active > .kaian-global-nav-trigger { color: var(--kaian-brand-blue); }
.kaian-global-nav-item.is-open > .kaian-global-nav-trigger::after,
.kaian-global-nav-item.is-active > .kaian-global-nav-trigger::after { left: 0; right: 0; }
.kaian-global-nav-label { display: block; }
.kaian-global-nav-chevron { display: block; width: 12px; height: 12px; flex: 0 0 auto; transform: rotate(0deg); transform-origin: center; transition: transform .25s ease; }
.kaian-global-nav-item.is-open > .kaian-global-nav-trigger .kaian-global-nav-chevron { transform: rotate(180deg); }

.kaian-global-dropdown {
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  z-index: 90;
  width: 288px;
  max-width: calc(100vw - 28px);
  padding: 10px;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid var(--kaian-header-line);
  border-radius: 16px;
  box-shadow: var(--kaian-header-shadow);
}
.kaian-global-dropdown a { display: flex; align-items: center; min-height: 42px; padding: 10px 12px; border-radius: 10px; color: #3d536e; font-size: 14px; font-weight: 650; text-decoration: none; }
.kaian-global-dropdown a:hover { color: var(--kaian-brand-blue); background: #f5faff; }
.kaian-global-separator { display: block; height: 1px; margin: 7px 8px; background: var(--kaian-header-line); }

.kaian-global-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.kaian-global-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 12px; background: linear-gradient(135deg, #1677ff, #32adff); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; box-shadow: 0 15px 34px rgba(22,119,255,.24); }
.kaian-global-menu-button { display: none; width: 42px; height: 42px; padding: 9px; border: 0; background: transparent; }
.kaian-global-menu-button span { display: block; height: 2px; margin: 5px; border-radius: 2px; background: #21405e; }

.kaian-global-nav a:focus-visible,
.kaian-global-nav-trigger:focus-visible,
.kaian-global-menu-button:focus-visible,
.kaian-global-cta:focus-visible { outline: 3px solid rgba(22,119,255,.24); outline-offset: 2px; }

.tool-product-identity { display: inline-grid; gap: 3px; margin-bottom: 16px; color: var(--blue); }
.tool-product-identity span { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.tool-product-identity small { color: var(--subtle); font-size: 9px; letter-spacing: .18em; }
.filter-tools .favorite-button, .filter-tools .primary-button { min-height: 42px; }

@media (max-width: 1020px) and (min-width: 781px) {
  .kaian-global-nav { gap: 16px; }
  .kaian-global-nav-link, .kaian-global-nav-trigger { font-size: 14px; }
  .kaian-global-brand-logo { width: 96px; }
  .kaian-global-brand-copy { display: none; }
}

@media (max-width: 780px) {
  :root { --header-height: var(--kaian-header-mobile-height); }
  .kaian-global-header { height: var(--kaian-header-mobile-height); }
  .kaian-global-header-inner { width: min(100% - 28px, var(--kaian-header-container)); }
  .kaian-global-brand-logo { width: 96px; height: 36px; }
  .kaian-global-brand-copy strong { font-size: 15px; }
  .kaian-global-brand-copy small { font-size: 8px; letter-spacing: .14em; }
  .kaian-global-menu-button { display: block; }
  .kaian-global-cta { display: none; }
  .kaian-global-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 14px; right: 14px;
    display: none;
    height: auto;
    max-height: calc(100vh - 88px);
    max-height: calc(100dvh - 88px);
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--kaian-header-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--kaian-header-shadow);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .kaian-global-header.is-menu-open .kaian-global-nav { display: flex; }
  .kaian-global-nav-item { display: block; width: 100%; height: auto; }
  .kaian-global-nav-link, .kaian-global-nav-trigger { width: 100%; min-height: 48px; height: auto; padding: 13px 14px; justify-content: space-between; border-radius: 10px; }
  .kaian-global-nav-link::after, .kaian-global-nav-trigger::after { display: none; }
  .kaian-global-nav-item.is-active > .kaian-global-nav-trigger { color: var(--kaian-brand-blue); background: #f5faff; }
  .kaian-global-dropdown { position: static; width: 100%; max-width: none; padding: 4px 8px 8px; transform: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  .kaian-global-dropdown a { padding-left: 24px; }
  .filter-tools { flex-wrap: wrap; }
}

@media (max-width: 430px) {
  .kaian-global-brand-copy { display: none; }
  .filter-tools .favorite-button, .filter-tools .primary-button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kaian-global-header * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.footer-site-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid rgba(220,228,240,.85); }
.footer-site-nav a { color: #344054; font-size: 12px; font-weight: 600; text-decoration: none; }
.footer-site-nav a:hover, .footer-site-nav a[aria-current="page"] { color: var(--kaian-brand-blue); }
