:root{
  --border:#e5e7eb; --bg:#fff; --muted:#6b7280; --ink:#111;
  --pill:#f5f5f7; --pillActive:#111; --pillActiveInk:#fff;
  --page:#fafafa; --accent:#111; --guestBg:#fff7ed; --guestBorder:#fed7aa;
  --guestTitle:#9a3412; --guestSub:#b45309; --guestCta:#ea580c;
  --chip-bg:#fff; --chip-border:#ddd; --chip-ink:#111;
  --chip-selected-bg:#111; --chip-selected-ink:#fff;
  --chip-active-verse:#fde68a; --chip-active-word:#93c5fd; --chip-active-word-bg:#eff6ff;
  --chip-plan-server:#10b981; --chip-plan-server-bg:#ecfdf5;
  --chip-plan-client:#f59e0b; --chip-plan-client-bg:#fffbeb;
}
*{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:var(--page);
  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); }

/* Button styling shared by links and buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border-radius:999px; background:var(--pill);
  color:var(--ink); text-decoration:none; border:1px solid var(--border);
  font-weight:600; font-size:.95rem; cursor:pointer;
}
.btn:hover{ filter:brightness(.98); }
.btn.primary{
  background:var(--pillActive); color:var(--pillActiveInk); border-color:var(--pillActive);
}
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--border);
}

/* 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:var(--bg); 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:var(--ink); padding:.5rem .6rem; border-radius:8px; display:flex; justify-content:space-between;
}
.menu a:hover{ background:var(--pill); }

@media (max-width: 860px){
  .links{ display:none; }
  .links-mobile{ display:block; }
  .topnav{
    align-items:center;
    flex-wrap:wrap;
  }
  .topnav .brand{
    order:1;
    margin-right:auto;
  }
  .topnav .links-mobile{
    order:1;
    margin-left:auto;
  }
  .topnav .right{
    order:2;
    flex-basis:100%;
    width:100%;
    justify-content:flex-start;
    margin-top:.5rem;
  }
  details.dropdown.links-mobile{ width:auto; }
  details.dropdown.links-mobile .menu{
    position:static;
    min-width:0;
    width:100%;
    margin-top:.5rem;
  }
}

/* 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:var(--accent); color:var(--pillActiveInk); font-size:.75rem; font-weight:700;
}
.account-name{
  color:var(--ink);
  font-weight:700;
}

.guest-pill{
  background:var(--guestBg);
  border:1px solid var(--guestBorder);
}
.guest-title{ color:var(--guestTitle); }
.guest-sub{ color:var(--guestSub); }
.guest-cta{ background:var(--guestCta); color:#fff; }

/* Theme overrides */
body.theme-color{
  --border:#d6deea; --bg:#ffffff; --muted:#5a6b86; --ink:#072243;
  --pill:#eef3ff; --pillActive:#072243; --pillActiveInk:#ffffff;
  --page:#f5f8ff; --accent:#072243; --guestBg:#f9f1d3; --guestBorder:#d2a63d;
  --guestTitle:#3a2f06; --guestSub:#6b5a1a; --guestCta:#d2a63d;
  --chip-bg:#ffffff; --chip-border:#d6deea; --chip-ink:#072243;
  --chip-selected-bg:#072243; --chip-selected-ink:#ffffff;
  --chip-active-verse:#d2a63d; --chip-active-word:#072243; --chip-active-word-bg:#eef3ff;
  --chip-plan-server:#072243; --chip-plan-server-bg:#eef3ff;
  --chip-plan-client:#d2a63d; --chip-plan-client-bg:#f9f1d3;
}
body.theme-grayscale{
  --border:#d1d5db; --bg:#fff; --muted:#6b7280; --ink:#111;
  --pill:#f3f4f6; --pillActive:#111; --pillActiveInk:#fff;
  --page:#f5f5f5; --accent:#111; --guestBg:#f3f4f6; --guestBorder:#d1d5db;
  --guestTitle:#111827; --guestSub:#6b7280; --guestCta:#111827;
  --chip-bg:#ffffff; --chip-border:#d1d5db; --chip-ink:#111;
  --chip-selected-bg:#111; --chip-selected-ink:#fff;
  --chip-active-verse:#9ca3af; --chip-active-word:#94a3b8; --chip-active-word-bg:#f1f5f9;
  --chip-plan-server:#6b7280; --chip-plan-server-bg:#e5e7eb;
  --chip-plan-client:#374151; --chip-plan-client-bg:#f3f4f6;
}
body.theme-night{
  --border:#1f2937; --bg:#0b0e11; --muted:#9ca3af; --ink:#e5e7eb;
  --pill:#0f172a; --pillActive:#e5e7eb; --pillActiveInk:#111;
  --page:#0b0e11; --accent:#e5e7eb; --guestBg:#111827; --guestBorder:#1f2937;
  --guestTitle:#f9fafb; --guestSub:#cbd5f5; --guestCta:#e5e7eb;
  --chip-bg:#0f172a; --chip-border:#1f2937; --chip-ink:#e5e7eb;
  --chip-selected-bg:#e5e7eb; --chip-selected-ink:#0b0e11;
  --chip-active-verse:#fbbf24; --chip-active-word:#60a5fa; --chip-active-word-bg:#0b1220;
  --chip-plan-server:#34d399; --chip-plan-server-bg:#06251c;
  --chip-plan-client:#fbbf24; --chip-plan-client-bg:#2b1e05;
}
body.theme-night .topnav{ background:var(--bg); }
body.theme-night .menu{ background:#0f172a; }
body.theme-night .menu a{ color:#e5e7eb; }
body.theme-night .menu a:hover{ background:#111827; }
body.theme-night .card{ background:var(--bg) !important; border-color:var(--border) !important; }
body.theme-night .pill{ border-color:var(--border); }
/* 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;}
.footer-note{color:var(--muted);}
.footer-note a{color:var(--ink); text-decoration: underline; text-underline-offset:2px;}