:root{--bg:#f5f7fb;--card:#fff;--accent:#2b7;--muted:#666}
*{box-sizing:border-box}
body{font-family:Segoe UI,Roboto,Arial; background:var(--bg); margin:0; padding:24px}
.container{max-width:560px;margin:0 auto}
.card{background:var(--card);padding:16px;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:16px}
.hidden{display:none}
.row{display:flex;gap:8px;align-items:center;margin-top:8px}
input[type="text"],input[type="number"]{flex:1;padding:8px;border:1px solid #ddd;border-radius:4px}
button{padding:8px 12px;border:none;border-radius:6px;background:#2563eb;color:#fff;cursor:pointer}
button.secondary{background:#6b7280}
.feedback{margin-top:12px;padding:10px;border-radius:6px;background:#fff9db;color:#664d00;border:1px solid #ffeab1}
.muted{color:var(--muted);margin-top:8px}
.actions{margin-top:12px;display:flex;gap:8px}
ol{padding-left:18px;margin:0}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  max-width:560px;
  margin:0 auto 16px;
  padding:8px 0;
}
.topbar .brand{ font-weight:700; font-size:1.05rem; color:#111; }
.menu-wrapper{ position:relative; }
.menu-btn{
  background:#2563eb; color:#fff; border:none; padding:8px 10px; border-radius:6px; cursor:pointer;
}
.dropdown-menu{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid #e6e6e6;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border-radius:6px;
  min-width:160px;
  z-index:60;
  display:flex;
  flex-direction:column;
  padding:6px 0;
}
.dropdown-menu a{
  display:block;
  padding:8px 12px;
  color:#111;
  text-decoration:none;
  font-size:0.95rem;
}
.dropdown-menu a:hover{ background:#f2f6ff; }
.hidden{ display:none !important; }