:root{
  --border:#e5e7eb; --bg:#fff; --muted:#6b7280; --ink:#111;
  --pill:#f5f5f7; --pillActive:#111; --pillActiveInk:#fff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: clamp(1rem, 2vw, 2rem);
  line-height: 1.5;
  background:#fafafa;
  color:var(--ink);
}
label{font-weight:600}
input{padding:.5rem;width:100%;max-width:32rem}
button{padding:.6rem 1rem}

/* --- Top nav --- */
.topnav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:.75rem; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; padding:.5rem .75rem; position:sticky; top:8px; z-index:10;
}
.brand a{ text-decoration:none; color:var(--ink); font-weight:800; }

/* Desktop link row */
.links{ display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; }

/* Mobile "Menu" dropdown trigger (hidden by default) */
.links-mobile{ display:none; }

/* Common pill styling */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem; border-radius:999px; background:var(--pill);
  color:var(--ink); text-decoration:none; border:1px solid var(--border);
  font-size:.92rem;
}
.pill:hover{ filter:brightness(.98); }
.pill.active{ background:var(--pillActive); color:var(--pillActiveInk); border-color:var(--pillActive); }

/* Dropdown (CSS-only via <details>) */
details.dropdown{ position:relative; }
details.dropdown > summary{
  list-style:none; cursor:pointer; outline:none; border:none; background:none; padding:0;
  display:inline-flex; align-items:center; gap:.4rem;
}
details.dropdown > summary::-webkit-details-marker{ display:none; }
.chev{ font-size:.9em; opacity:.7; }
.menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:220px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:0 10px 22px rgba(0,0,0,.06); padding:.35rem; display:grid; gap:.25rem;
}
.menu a{
  text-decoration:none; color:#111; padding:.5rem .6rem; border-radius:8px; display:flex; justify-content:space-between;
}
.menu a:hover{ background:#f8fafc; }

/* Right side (account) */
.right{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.muted{ color:var(--muted); }
.avatar{
  width:28px; height:28px; border-radius:999px; display:inline-grid; place-items:center;
  background:#111; color:#fff; font-size:.75rem; font-weight:700;
}
/* Make the account dropdown align to the right edge */
.right .dropdown .menu{ right:0; left:auto; }

/* Small screens */
@media (max-width: 720px){
  /* Hide the long inline link row; show compact dropdown instead */
  .links{ display:none; }
  .links-mobile{ display:inline-block; margin-left:.25rem; }
  /* Keep the bar short; don't print long emails inline */
  .right .email-inline{ display:none; }
  .topnav{ padding:.5rem; gap:.5rem; }
  .brand{ flex:0 0 auto; }
}

/* Optional: nice flash message box spacing */
.flash-wrap{max-width:980px;margin:12px auto;display:grid;gap:8px;}