/* ===== HEADER ===== */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-light);
  box-shadow:0 2px 20px rgba(20,20,40,.06);
}
.header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:70px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.22rem;letter-spacing:-.01em;color:var(--text)}
.logo-icon{
  width:36px;height:36px;border-radius:10px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);
  box-shadow:0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
}
.logo-icon svg{display:block;width:19px;height:19px}
.header-right{display:flex;align-items:center;gap:4px}
.nav-link{
  position:relative;
  display:flex;align-items:center;gap:4px;
  font-size:.86rem;font-weight:700;color:var(--text-secondary);
  padding:9px 15px;border-radius:var(--radius-xs);transition:var(--transition);
  background:transparent;border:none;cursor:pointer;font-family:inherit;
}
.nav-link::after{
  content:'';position:absolute;left:15px;right:15px;bottom:2px;height:2px;border-radius:2px;
  background:var(--primary);transform:scaleX(0);transition:transform var(--transition);
}
.nav-link:hover{color:var(--primary);background:var(--primary-bg)}
.nav-link.active{color:var(--primary);background:var(--primary-bg)}
.nav-link.active::after{transform:scaleX(1)}
.nav-home{padding:9px}
.nav-home svg{display:block}
.nav-dropdown{position:relative}
.nav-dropdown-toggle .caret{font-size:.7rem;transition:transform var(--transition)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  min-width:220px;background:var(--bg-card);
  border:1px solid var(--border-light);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);padding:8px;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:all var(--transition);z-index:10;
}
.nav-dropdown-menu a{
  font-size:.85rem;font-weight:500;color:var(--text-secondary);
  padding:8px 12px;border-radius:var(--radius-xs);transition:var(--transition);
}
.nav-dropdown-menu a:hover{color:var(--primary);background:var(--primary-bg)}
.nav-dropdown-menu a.active{color:var(--primary);background:var(--primary-bg)}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown:hover .nav-dropdown-toggle .caret{transform:rotate(180deg)}

/* progress bar */
.progress-bar{position:sticky;top:70px;left:0;height:3px;background:var(--border-light);z-index:99}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--pink));transition:width .1s linear}

/* ===== HAMBURGER (mobile) ===== */
.menu-toggle{display:none}
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:26px;height:20px;cursor:pointer;flex-shrink:0;
}
.hamburger span{height:2px;background:var(--text);border-radius:2px;transition:all var(--transition)}

.menu-toggle:checked ~ .container .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle:checked ~ .container .hamburger span:nth-child(2){opacity:0}
.menu-toggle:checked ~ .container .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== MOBILE NAV DRAWER ===== */
.mobile-nav{
  max-height:0;overflow:hidden;background:var(--bg-card);
  border-top:1px solid transparent;transition:max-height .3s ease;
}
.mobile-nav ul{padding:8px 20px 4px}
.mobile-nav li{border-bottom:1px solid var(--border-light)}
.mobile-nav > ul > li:last-child{border-bottom:none}
.mobile-nav li a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 4px;font-size:.88rem;font-weight:600;color:var(--text);
}
.mobile-nav li a.active{color:var(--primary)}
.mobile-nav .mobile-sub-toggle .caret{font-size:.7rem;transition:transform var(--transition)}
.mobile-nav li.open > .mobile-sub-toggle .caret{transform:rotate(180deg)}
.mobile-nav .mobile-sub{
  max-height:0;overflow:hidden;padding-left:14px;transition:max-height .3s ease;
}
.mobile-nav li.open > .mobile-sub{max-height:600px}
.mobile-nav .mobile-sub a{color:var(--text-secondary);font-size:.83rem;padding:10px 4px}

.menu-toggle:checked ~ .mobile-nav{max-height:700px;border-top:1px solid var(--border-light);overflow-y:auto}

@media (max-width:860px){
  .header-right{display:none}
  .hamburger{display:flex}
}