:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --accent: #2563eb;
  --text: #0f172a;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: Inter, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
.container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-direction:column;
}
h1{
  background:linear-gradient(90deg,var(--accent),#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:clamp(1.5rem,4vw,3rem);
  margin:0;
}
button{
  padding:0.6rem 1rem;
  border-radius:8px;
  border: none;
  background:var(--accent);
  color:white;
  cursor:pointer;
}
button:active{ transform:translateY(1px) }
button:focus{ outline:3px solid rgba(37,99,235,0.2) }

/* Menu-specific styles */
.menu-btn{
  background:transparent;
  color:#222;
  border-radius:6px;
  border:1px solid transparent;
}
.menu-btn:hover{
  background:#eef2ff;
  border-color:#dbeafe;
}
.menu-btn.active{
  background:#2563eb;
  color:#fff;
  border-color:rgba(37,99,235,0.2);
}