:root{
  --bg:#ffffff;
  --accent:#0f6cff;
  --text:#222;
  --muted:#666;
  --nav-bg: rgba(15,108,255,0.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, Arial, sans-serif;color:var(--text);background:var(--bg)}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 18px;
  border-bottom:1px solid #eee;
  position:relative;
}
.brand{
  display:flex;align-items:center;gap:60px;
}
.logo{
  width:44px;height:44px;display:inline-grid;place-items:center;border-radius:8px;background:var(--nav-bg);
}
.logo svg{width:28px;height:28px}
.brand .title{font-weight:700;font-size:18px}
.brand .subtitle{font-size:12px;color:var(--muted);margin-top:-2px}

/* Desktop nav */
nav.desktop{
  display:flex;align-items:center;gap:18px;
}
nav.desktop ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;align-items:center}
nav.desktop a{display:inline-block;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none}
nav.desktop a:hover{background:#f3f7ff;color:var(--accent)}

/* Hamburger (mobile) */
.hamburger{
  display:none;align-items:center;gap:10px;border:0;background:none;padding:8px;border-radius:8px;cursor:pointer
}
.hamburger .lines{width:26px;height:18px;position:relative}
.hamburger .lines span{position:absolute;height:2px;background:var(--text);left:0;right:0;border-radius:2px}
.hamburger .lines span:nth-child(1){top:0}
.hamburger .lines span:nth-child(2){top:8px}
.hamburger .lines span:nth-child(3){top:16px}

/* Mobile menu panel */
.mobile-panel{display:none;position:absolute;right:14px;top:64px;background:#fff;width:260px;border:1px solid #e6e6e6;border-radius:12px;padding:12px;box-shadow:0 10px 30px rgba(22,27,40,0.08);z-index:200}
.mobile-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mobile-panel a{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;text-decoration:none;color:var(--text)}
.mobile-panel a:hover{background:#f6f8ff;color:var(--accent)}

/* Responsive rules */
@media (max-width:800px){
  nav.desktop{display:none}
  .hamburger{display:flex}
  .mobile-panel{display:none /* toggled by JS */}
  .header{padding:10px}
  .brand .title{font-size:16px}
}

/* small niceties */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}