/* ═══════════════════════════════════════════
   HEADER
   light → darker brand blue
   dark  → brighter brand blue
═══════════════════════════════════════════ */
header {
  position: relative;
  z-index: 200;
  padding: 10px 22px;
  width: 100%;
  background: transparent;
}
.hdr {
  max-width: 1160px; margin: 0 auto;
  /* Light mode: vivid mid-blue header — clearly distinct from page bg */
  background: rgba(8,72,180,0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.2px solid #00aaee;
  border-radius: 24px;
  padding: 0 20px 0 16px; height: 60px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow: 0 2px 20px rgba(0,90,200,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background var(--t), border-color var(--t);
  /* Z-index above background gradients */
  position: relative;
  z-index: 250;
}
[data-theme="dark"] .hdr {
  /* Dark mode: lighter, more brand-vivid blue */
  background: rgba(0,110,230,0.32);
  border-color: #00aaee;
  box-shadow: 0 2px 20px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Logo */
.logo-btn { display:flex; align-items:center; cursor:pointer; background:none; border:none; padding:0 0 0 4px; margin-left:10px; flex-shrink:0; height:100%; }
.logo-img  { height:32px; width:auto; display:block; transform: translateY(1px); }
/* Logo: blend mode causes header gradient bug — use brightness instead */
.logo-img { mix-blend-mode:screen; }
/* Nav */
nav { display:flex; align-items:center; gap:0; margin-left:auto; }
nav a, nav button { font-size:13.5px; font-weight:500; color:rgba(200,222,255,0.90); background:none; border:none; cursor:pointer; padding:6px 12px; border-radius:var(--rp); transition:color var(--t),background var(--t); white-space:nowrap; font-family:'Inter',sans-serif; text-decoration:none; }
nav a:hover, nav button:hover { color:#fff; background:rgba(255,255,255,0.10); }
nav a.act, nav button.act { color:#fff; }

/* Dark mode header is brighter blue — nav text needs more contrast */
[data-theme="dark"] nav a, [data-theme="dark"] nav button { color: rgba(220,235,255,0.92); }
[data-theme="dark"] nav a:hover, [data-theme="dark"] nav button:hover { color: #fff; background: rgba(255,255,255,0.16); }
[data-theme="dark"] .mob-nav a, [data-theme="dark"] .mob-nav button { color: rgba(220,235,255,0.92); }
[data-theme="dark"] .mob-nav a:hover, [data-theme="dark"] .mob-nav button:hover { color: #fff; background: rgba(255,255,255,0.14); }

/* Toggle */
.hdr-r { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.tgl   { width:50px; height:26px; background:rgba(255,255,255,0.12); border:1.5px solid rgba(255,255,255,0.24); border-radius:var(--rp); cursor:pointer; position:relative; flex-shrink:0; display:flex; align-items:center; padding:0 3px; justify-content:space-between; transition:all var(--t); }
.tgl-k {
  position:absolute; width:20px; height:20px; border-radius:50%;
  background: linear-gradient(110deg, #0a52cc 0%, #0a7ed8 50%, #00aaee 100%);
  background-size: 130% auto;
  animation: gaPulse 1.17s ease-in-out infinite;
  animation-delay: 0s;
  top:2px; left:2px;
  transition: transform var(--t);
  box-shadow: 0 2px 8px rgba(10,82,204,0.40);
  z-index:1;
}
[data-theme="dark"] .tgl-k { transform:translateX(24px); }
.tgl-ic { width:13px; height:13px; display:flex; align-items:center; justify-content:center; z-index:0; flex-shrink:0; }
/* Header bg is dark-blue in light mode → icons LIGHT for contrast */
[data-theme="light"] .ic-sun svg circle,
[data-theme="light"] .ic-sun svg path { stroke:#9ed4ff; }
[data-theme="light"] .ic-moon svg path { stroke:#ffffff; }
/* Header bg is light-blue in dark mode → icons DARK for contrast */
[data-theme="dark"] .ic-sun svg circle,
[data-theme="dark"] .ic-sun svg path { stroke:#0a3a90; }
[data-theme="dark"] .ic-moon svg path { stroke:#0a52cc; }
/* Hamburger */
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:5px; }
.burger span { display:block; width:20px; height:2px; border-radius:2px; background:#9ed4ff; }
.mob-nav { display:none; flex-direction:column; background:rgba(8,46,130,0.96); backdrop-filter:blur(12px); border:1px solid rgba(0,170,238,0.20); border-radius:var(--r); padding:12px 14px; gap:2px; margin:6px 22px 0; max-width:1160px; margin-left:auto; margin-right:auto; }
[data-theme="dark"] .mob-nav { background:rgba(0,40,110,0.97); }
.mob-nav.open { display:flex; }
.mob-nav a, .mob-nav button { font-size:15px; font-weight:500; color:rgba(200,222,255,0.90); text-align:left; background:none; border:none; cursor:pointer; padding:9px 12px; border-radius:var(--rs); transition:all var(--t); font-family:'Inter',sans-serif; text-decoration:none; }
.mob-nav a:hover, .mob-nav button:hover { color:#fff; background:rgba(255,255,255,0.10); }