/* SAM1337 TOOLS — Unified Glass Header v20 */

.site-header {
  position: sticky !important; top: 0 !important; z-index: 10000 !important;
  width: 100% !important; height: 70px !important;
  display: grid !important;
  grid-template-columns: minmax(200px,1fr) auto minmax(200px,1fr) !important;
  align-items: center !important; gap: 16px !important;
  padding: 0 max(20px,calc((100vw - 1180px)/2)) !important;
  margin: 0 !important; box-sizing: border-box !important;
  background: rgba(4,8,6,.88) !important;
  border-bottom: 1px solid rgba(125,255,170,.1) !important;
  box-shadow: 0 1px 0 rgba(125,255,170,.06), 0 8px 40px rgba(0,0,0,.5) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  animation: headerEntrance .6s cubic-bezier(.4,0,.2,1) both !important;
}
.site-header::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(125,255,170,.35) 30%, rgba(125,255,170,.55) 50%, rgba(125,255,170,.35) 70%, transparent) !important;
  animation: headerLineGlow 4s ease-in-out infinite !important;
}
.site-header::after {
  content: '' !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
  background: linear-gradient(180deg, rgba(125,255,170,.025) 0%, transparent 40%, transparent 60%, rgba(0,0,0,.06) 100%) !important;
}
@keyframes headerEntrance { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes headerLineGlow { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

body:has(.site-header) { margin: 0 !important; padding-top: 0 !important; overflow-x: hidden !important; }

.site-header .brand {
  grid-column: 1 !important; display: flex !important; align-items: center !important; gap: 11px !important;
  min-width: 0 !important; width: max-content !important; max-width: 100% !important;
  color: #ecf2ee !important; text-decoration: none !important;
  font: 700 13px/1 system-ui,sans-serif !important; letter-spacing: .09em !important;
  transition: opacity .2s !important;
}
.site-header .brand:hover { opacity: .85 !important; }
.site-header .brand > span:last-child { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.site-header .brand em { font-style: normal !important; color: #7dffaa !important; }

.site-header .brand-mark {
  display: grid !important; place-items: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border: 1px solid rgba(125,255,170,.22) !important; border-radius: 12px !important;
  background: rgba(125,255,170,.06) !important; overflow: hidden !important; position: relative !important;
  transition: border-color .3s, box-shadow .3s !important;
}
.site-header .brand-mark::after {
  content: '' !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important;
  box-shadow: 0 0 14px rgba(125,255,170,.15) !important; pointer-events: none !important; transition: box-shadow .3s !important;
}
.site-header .brand:hover .brand-mark { border-color: rgba(125,255,170,.42) !important; }
.site-header .brand:hover .brand-mark::after { box-shadow: 0 0 24px rgba(125,255,170,.35) !important; }
.site-header .brand-image img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; }

.site-header nav {
  grid-column: 2 !important; display: flex !important; align-items: center !important; gap: 3px !important;
  width: max-content !important; padding: 5px !important;
  border: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px !important;
  background: rgba(255,255,255,.028) !important;
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.site-header nav a {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: 36px !important; padding: 0 14px !important;
  border: 1px solid transparent !important; border-radius: 10px !important;
  color: #7a8780 !important; text-decoration: none !important;
  font: 600 11px/1 system-ui,sans-serif !important; white-space: nowrap !important;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease !important;
  -webkit-tap-highlight-color: transparent !important; position: relative !important; overflow: hidden !important;
}
.site-header nav a::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) !important;
  transform: translateX(-100%) !important; transition: transform .4s !important;
}
.site-header nav a:hover::before { transform: translateX(100%) !important; }
.site-header nav a:hover { color: #d8f5e0 !important; background: rgba(125,255,170,.07) !important; border-color: rgba(125,255,170,.12) !important; transform: translateY(-1px) !important; }
.site-header nav a.active { color: #e4fcea !important; background: linear-gradient(180deg,rgba(125,255,170,.14),rgba(125,255,170,.06)) !important; border-color: rgba(125,255,170,.18) !important; box-shadow: 0 2px 12px rgba(125,255,170,.12) !important; }
.site-header nav a:active { transform: none !important; }

.site-header .header-actions { grid-column: 3 !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 8px !important; }
.site-header select.language-switch {
  width: 128px !important; height: 38px !important; margin: 0 !important;
  padding: 0 28px 0 12px !important; border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 11px !important; background-color: #080e0b !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236e7a74' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 5px center !important; background-size: 16px !important;
  color: #8e9891 !important; font: 10px/38px ui-monospace,monospace !important; outline: none !important;
  -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important;
  transition: border-color .2s, box-shadow .2s, color .2s !important;
}
.site-header select.language-switch:hover { border-color: rgba(125,255,170,.25) !important; color: #c8f0d6 !important; }
.site-header select.language-switch:focus { border-color: rgba(125,255,170,.42) !important; box-shadow: 0 0 0 3px rgba(125,255,170,.07) !important; color: #c8f0d6 !important; }

.site-header > .nav-toggle, .nav-backdrop { display: none !important; }
body.nav-lock { overflow: hidden !important; }

@media (max-width: 820px) {
  .site-header { height: 64px !important; min-height: 64px !important; grid-template-columns: minmax(0,1fr) auto auto !important; grid-template-rows: 64px !important; gap: 8px !important; padding: 0 14px !important; background: rgba(3,7,5,.97) !important; }
  .site-header .brand { grid-column: 1 !important; font-size: 12px !important; gap: 9px !important; }
  .site-header .brand-mark { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 10px !important; }
  .site-header .header-actions { grid-column: 2 !important; grid-row: 1 !important; }
  .site-header select.language-switch { width: 90px !important; height: 34px !important; padding-left: 9px !important; padding-right: 20px !important; font-size: 8px !important; line-height: 34px !important; }
  .site-header > .nav-toggle {
    grid-column: 3 !important; grid-row: 1 !important; display: grid !important; place-content: center !important; gap: 5px !important;
    width: 38px !important; min-width: 38px !important; max-width: 38px !important;
    height: 38px !important; min-height: 38px !important; max-height: 38px !important;
    padding: 0 !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 11px !important;
    background: rgba(255,255,255,.04) !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important;
    -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important; z-index: 3 !important; overflow: hidden !important;
    transition: border-color .2s, background .2s !important;
  }
  .site-header > .nav-toggle:hover { border-color: rgba(125,255,170,.25) !important; background: rgba(125,255,170,.06) !important; }
  .site-header > .nav-toggle > span {
    position: static !important; display: block !important; flex: none !important;
    width: 17px !important; min-width: 17px !important; max-width: 17px !important;
    height: 2px !important; min-height: 2px !important; max-height: 2px !important;
    margin: 0 !important; border: 0 !important; border-radius: 3px !important; background: #ccdad1 !important;
    transform-origin: center !important; transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s !important;
  }
  .site-header.nav-open > .nav-toggle { border-color: rgba(125,255,170,.3) !important; background: rgba(125,255,170,.08) !important; }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
  .site-header nav {
    position: absolute !important; top: 72px !important; right: 12px !important; left: 12px !important; z-index: 2 !important;
    grid-column: 1/-1 !important; grid-row: 1 !important;
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important;
    margin: 0 !important; padding: 12px !important; border: 1px solid rgba(125,255,170,.14) !important; border-radius: 18px !important;
    background: rgba(4,9,6,.98) !important; box-shadow: 0 28px 80px rgba(0,0,0,.75), 0 0 0 1px rgba(125,255,170,.05) !important;
    opacity: 0 !important; visibility: hidden !important; transform: translateY(-12px) scale(.97) !important;
    transform-origin: top center !important; pointer-events: none !important;
    transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility .22s !important;
  }
  .site-header.nav-open nav { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; }
  .site-header nav a {
    display: flex !important; min-width: 0 !important; max-width: none !important; min-height: 48px !important; width: 100% !important;
    margin: 0 !important; padding: 0 12px !important; box-sizing: border-box !important;
    border-color: rgba(255,255,255,.06) !important; background: rgba(255,255,255,.028) !important;
    font-size: 12px !important; overflow: hidden !important; text-overflow: ellipsis !important; transform: none !important;
  }
  .site-header nav a:hover { transform: none !important; }
  .site-header nav a.active { border-color: rgba(125,255,170,.22) !important; background: rgba(125,255,170,.07) !important; }
  .site-header.nav-open nav a:nth-child(1) { animation: navItemIn .2s .04s both; }
  .site-header.nav-open nav a:nth-child(2) { animation: navItemIn .2s .08s both; }
  .site-header.nav-open nav a:nth-child(3) { animation: navItemIn .2s .12s both; }
  .site-header.nav-open nav a:nth-child(4) { animation: navItemIn .2s .16s both; }
  @keyframes navItemIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .nav-backdrop {
    position: fixed !important; inset: 0 !important; z-index: 9999 !important; display: block !important; border: 0 !important;
    background: rgba(0,0,0,.6) !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .22s, visibility .22s !important;
  }
  body.nav-lock .nav-backdrop { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
}
@media (max-width: 390px) {
  .site-header { padding: 0 10px !important; gap: 6px !important; }
  .site-header .brand { font-size: 11px !important; }
  .site-header .brand-mark { width: 32px !important; height: 32px !important; min-width: 32px !important; }
  .site-header select.language-switch { width: 76px !important; font-size: 7px !important; }
  .site-header > .nav-toggle { width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; max-height: 34px !important; }
  .site-header nav { left: 8px !important; right: 8px !important; padding: 10px !important; gap: 7px !important; border-radius: 16px !important; }
}

/* White theme final header override */
.site-header{background:rgba(255,255,255,.94)!important;border-bottom-color:#e5e7eb!important}
.site-header::before{background:linear-gradient(90deg,transparent,#d1d5db 30%,#9ca3af 50%,#d1d5db 70%,transparent)!important}
.site-header .brand{color:#111827!important}
.site-header .brand em{color:#6b7280!important}
.site-header .brand-mark{border-color:#e5e7eb!important;background:#fff!important;box-shadow:0 3px 12px rgba(15,23,42,.05)!important}
.site-header nav{background:#f8fafc!important;border-color:#e5e7eb!important}
.site-header nav a{color:#6b7280!important}
.site-header nav a:hover{color:#111827!important;background:#fff!important;border-color:#e5e7eb!important}
.site-header nav a.active{color:#111827!important;background:#fff!important;border-color:#dfe3e8!important;box-shadow:0 2px 12px rgba(15,23,42,.06)!important}
.site-header select.language-switch{background-color:#fff!important;color:#4b5563!important;border-color:#e5e7eb!important}
@media(max-width:820px){
 .site-header{background:rgba(255,255,255,.98)!important}
 .site-header>.nav-toggle{background:#fff!important;border-color:#e5e7eb!important}
 .site-header>.nav-toggle>span{background:#111827!important}
 .site-header nav{background:#fff!important;border-color:#e5e7eb!important;box-shadow:0 28px 70px rgba(15,23,42,.12)!important}
 .site-header nav a{background:#f8fafc!important;border-color:#e5e7eb!important;color:#4b5563!important}
 .site-header nav a.active{background:#fff!important;color:#111827!important}
}