#header { position: sticky; top: 0; z-index: 1000; }
.site-banner {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  height: 70px; display: flex; align-items: center; padding: 0 20px;
  position: relative; overflow: hidden;
}
.site-banner::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.site-banner .logo {
  color: #fff; font-size: 1.8rem; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; z-index: 1; transition: opacity 0.2s;
}
.site-banner .logo:hover { opacity: 0.85; text-decoration: none; }
.site-banner .logo svg { width: 36px; height: 36px; }
.navbar {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.3);
  height: 50px; display: flex; align-items: center;
  padding: 0 16px; gap: 4px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08); position: relative;
}
body.dark-mode .navbar, body.cyberpunk .navbar {
  background: rgba(15,15,26,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-left { display: flex; align-items: center; gap: 4px; flex: 1; }
.nav-right { display: flex; align-items: center; gap: 8px; }
.hamburger-btn, .icon-btn {
  background: none; border: none; cursor: pointer;
  padding: 8px; border-radius: 6px; color: var(--text-color);
  font-size: 1.1rem; transition: background var(--transition), transform 0.2s;
  display: flex; align-items: center;
}
.hamburger-btn:hover, .icon-btn:hover { background: var(--hover-color); transform: scale(1.1); }
.nav-menu { display: flex; gap: 2px; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 6px;
  color: var(--text-color); font-size: 0.88rem; font-weight: 500;
  cursor: pointer; transition: background var(--transition);
  white-space: nowrap; user-select: none; position: relative;
}
.nav-link:hover { background: var(--hover-color); }
.nav-item.active .nav-link { color: var(--primary-color); }
.nav-item.active .nav-link::after {
  content: ''; position: absolute; bottom: -2px; left: 12px; right: 12px;
  height: 2px; background: var(--primary-color); border-radius: 2px;
}
.nav-arrow { display: inline-block; font-size: 0.7rem; transition: transform var(--transition); }
.nav-item:hover .nav-arrow { transform: translateY(3px); }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 10px; min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 999; overflow: hidden;
}
.nav-item:hover .dropdown { display: block; animation: dropIn 0.2s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dropdown a {
  display: block; padding: 10px 16px; font-size: 0.85rem;
  color: var(--text-color); transition: background var(--transition), padding-left var(--transition);
}
.dropdown a:hover { background: var(--hover-color); padding-left: 22px; text-decoration: none; }
#header.shrunk .site-banner { height: 0; overflow: hidden; transition: height 0.3s ease; }
#header.shrunk .navbar { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.breadcrumb {
  padding: 6px 20px; font-size: 0.78rem; color: #888;
  background: var(--bg-color); border-bottom: 1px solid var(--border-color);
  display: flex; align-items: center; gap: 6px;
}
.breadcrumb a { color: var(--secondary-color); }
.breadcrumb span { color: #bbb; }
.mobile-nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--card-bg); border-bottom: 1px solid var(--border-color);
  box-shadow: var(--card-shadow); z-index: 998; padding: 8px 0;
  max-height: 60vh; overflow-y: auto;
}
.mobile-nav-dropdown.open { display: block; }
.mobile-nav-dropdown .mob-item { padding: 10px 20px; font-size: 0.9rem; font-weight: 600; color: var(--text-color); border-bottom: 1px solid var(--border-color); }
.mobile-nav-dropdown .mob-sub { display: block; padding: 8px 32px; font-size: 0.85rem; color: #888; }
.mobile-nav-dropdown .mob-sub:hover { background: var(--hover-color); color: var(--text-color); text-decoration: none; }
.search-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 2000;
  align-items: flex-start; justify-content: center; padding-top: 100px;
}
.search-overlay.open { display: flex; }
.search-modal {
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  width: 100%; max-width: 520px; overflow: hidden;
}
.search-modal-input-row {
  display: flex; align-items: center; padding: 14px 16px;
  gap: 10px; border-bottom: 1px solid var(--border-color);
}
.search-modal-input-row span { font-size: 1.1rem; color: #888; }
.search-modal-input-row input { flex: 1; border: none; outline: none; background: transparent; color: var(--text-color); font-size: 1rem; }
.search-modal-input-row button { background: none; border: none; cursor: pointer; color: #888; font-size: 0.9rem; padding: 4px 10px; border-radius: 4px; transition: background var(--transition); }
.search-modal-input-row button:hover { background: var(--hover-color); color: var(--text-color); }
.search-results { max-height: 320px; overflow-y: auto; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 12px 18px; font-size: 0.9rem; color: var(--text-color); text-decoration: none; transition: background var(--transition); }
.search-results a:hover, .search-results a.focused { background: var(--hover-color); }
.search-results .no-results { padding: 16px 18px; font-size: 0.88rem; color: #888; }
.search-results .result-hint { padding: 10px 18px; font-size: 0.78rem; color: #aaa; }
@media (max-width: 768px) { .nav-menu { display: none; } .search-overlay { padding: 60px 12px 0; } }