/* assets/css/header.css */
*{box-sizing:border-box}
body.site-body { background: linear-gradient(135deg, #0a1929 0%, #001a33 50%, #0a1929 100%); color: #e3f2fd; font-family: Inter, "Helvetica Neue", Arial, sans-serif; margin:0; padding-top:70px; }

/* Custom Scrollbar */
::-webkit-scrollbar{ width:8px; background:transparent; }
::-webkit-scrollbar-track{ background:#0a1929; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(25,118,210,0.5), rgba(21,101,192,0.6)); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, rgba(25,118,210,0.7), rgba(21,101,192,0.8)); }
html{ scrollbar-width:thin; scrollbar-color:rgba(25,118,210,0.5) #0a1929; }

.container { width: 1200px; max-width: 95%; margin: 0 auto; }

.site-header { background:rgba(10,25,41,0.98); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:12px 0; border-bottom:1px solid rgba(25,118,210,0.2); position:fixed; top:0; left:0; right:0; z-index:1000; box-shadow:0 2px 20px rgba(0,0,0,0.3); }
.header-inner { display:flex; align-items:center; justify-content:space-between; }

.logo-wrap a { display: flex; align-items: center; gap: 12px; text-decoration: none; }

.logo { height: 42px; width: auto; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(105%) contrast(101%) drop-shadow(0 2px 8px rgba(255,255,255,0.3)); }

.logo-text { 
    font-size: 24px; 
    font-weight: 800; 
    color: #ffffff; 
    letter-spacing: 0.5px; 
    text-transform: lowercase;
    background: linear-gradient(135deg, #90caf9 0%, #64b5f6 50%, #42a5f5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 12px rgba(144,202,249,0.3);
    position: relative;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.main-nav ul { list-style:none; padding:0; margin:0; display:flex; gap:8px; align-items:center; }
.main-nav a { color: #90caf9; font-size:13px; text-decoration:none; font-weight: 600; padding:8px 16px; border-radius:8px; background:rgba(19,47,76,0.5); border:1px solid rgba(25,118,210,0.15); transition:color 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.main-nav a:hover { background:rgba(25,118,210,0.15); color:#e3f2fd; border-color:rgba(25,118,210,0.3); }
.main-nav a.active { background:linear-gradient(135deg,#1976d2,#1565c0); color:#fff; font-weight:700; box-shadow:0 3px 10px rgba(25,118,210,0.4); border-color:transparent; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-icon { background: transparent; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; }
.btn-icon img { width: 24px; height: 24px; filter: brightness(0) invert(1); opacity: 0.8; }

/* Mobile Menu Toggle */
.menu-toggle { display:none; background:transparent; border:none; cursor:pointer; padding:8px; }
.menu-toggle span { display:block; width:24px; height:2px; background:#e3f2fd; margin:5px 0; transition:all 0.3s; }

@media (max-width: 768px) {
    .logo { height: 36px; }
    .logo-text { font-size: 20px; }
    
    .menu-toggle { display:block; }
    .main-nav { position:absolute; top:100%; left:0; right:0; background:rgba(10,25,41,0.98); backdrop-filter:blur(12px); border-bottom:1px solid rgba(25,118,210,0.2); transform:translateY(-100%); opacity:0; visibility:hidden; transition:all 0.3s ease; }
    .main-nav.active { transform:translateY(0); opacity:1; visibility:visible; }
    .main-nav ul { flex-direction:column; gap:0; padding:12px 0; }
    .main-nav a { display:block; width:100%; padding:12px 24px; border-radius:0; }
    .main-nav a.active { background:rgba(25,118,210,0.25); box-shadow:none; border-left:3px solid #1976d2; }
}