:root {
  --ink: #141414;
  --muted: #6b6b66;
  --line: #e6e5e0;
  --paper: #f7f7f5;
  --card: #ffffff;
  --navy: #14213d;
  --navy-ink: #ffffff;
  --blue: #0a84ff;
  --green: #1f9d55;
  --amber: #b7791f;
  --red: #c53030;
  --radius: 16px;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(40px, 7vw, 72px); }
h2 { font-size: clamp(28px, 4vw, 40px); }
h3 { font-size: 24px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 640px; margin: 0 auto; padding: 0 20px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; max-width: 1040px; margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 18px; }
.logo img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a { text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.nav-links a:hover { background: #ecebe6; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #dcdad3; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; color: #444; overflow: hidden; flex: none; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font: 600 16px var(--sans);
  text-decoration: none; cursor: pointer; background: var(--navy); color: var(--navy-ink); transition: transform .08s ease, opacity .15s; }
.btn:hover { opacity: .92; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.imsg { background: #0a84ff; color: #fff; }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; }

/* cards + forms */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.stack > * + * { margin-top: 14px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=datetime-local], input[type=password], textarea, select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: 16px var(--sans); background: #fff; color: var(--ink); }
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid #c7d7ff; border-color: #9db5f5; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.toggle:first-child { border-top: 0; }
.toggle label { margin: 0; font-weight: 500; }
.toggle input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--navy); }
.err { background: #fdecec; color: var(--red); padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.ok { background: #e8f6ee; color: var(--green); padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: #ecebe6; color: #444; }
.pill.going { background: #e3f4ea; color: var(--green); }
.pill.pending { background: #fdf3e1; color: var(--amber); }
.pill.waitlist { background: #e8eefb; color: #2b5cc8; }
.pill.declined, .pill.cancelled { background: #fdecec; color: var(--red); }
.divider { height: 1px; background: var(--line); margin: 20px 0; }

/* landing */
.hero { padding: 48px 0 24px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 em { font-style: italic; }
.hero p.lead { font-size: 19px; color: #3d3d39; margin: 18px 0 26px; max-width: 520px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.phone { width: 300px; max-width: 100%; margin: 0 auto; background: #fff; border-radius: 44px; border: 10px solid #111; padding: 18px 14px 22px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.35); }
.phone .bar { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.bubble { max-width: 82%; padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.35; margin: 6px 0; width: fit-content; }
.bubble.me { margin-left: auto; background: #0a84ff; color: #fff; border-bottom-right-radius: 6px; }
.bubble.them { background: #e9e9eb; color: #111; border-bottom-left-radius: 6px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 48px 0; }
.three .card h3 { margin-bottom: 6px; }
.three .card a { font-weight: 600; font-size: 15px; display: inline-block; margin-top: 12px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 40px 0 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ecard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; display: block; transition: transform .12s; }
.ecard:hover { transform: translateY(-2px); }
.ecard .img { aspect-ratio: 1 / 1; background: #e8e6df center/cover no-repeat; }
.ecard .body { padding: 12px 14px 14px; }
.ecard .t { font-weight: 600; line-height: 1.3; }
.footer { padding: 40px 20px 60px; text-align: center; color: var(--muted); font-size: 14px; }

/* event page */
.event { display: grid; grid-template-columns: 330px 1fr; gap: 36px; padding: 16px 0 60px; align-items: start; }
.cover { aspect-ratio: 1 / 1; border-radius: var(--radius); background: #e8e6df center/cover no-repeat; border: 1px solid var(--line); }
.cover.empty { display: grid; place-items: center; font-family: var(--serif); font-size: 40px; color: #b3b0a6; }
.hosts { margin-top: 18px; }
.hosts .h { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 500; }
.meta { display: flex; gap: 14px; align-items: center; margin-top: 16px; }
.meta .ico { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; flex: none; text-align: center; line-height: 1; }
.meta .ico b { display: block; font-size: 16px; }
.meta .ico span { font-size: 10px; text-transform: uppercase; color: var(--muted); }
.meta .t { font-weight: 600; }
.reg { margin-top: 24px; }
.reg .head { font-size: 14px; color: var(--muted); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.about { margin-top: 28px; white-space: pre-wrap; }
.about h4, .attendees h4 { font-size: 13px; font-weight: 600; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
.faces { display: flex; }
.faces .avatar { border: 2px solid var(--paper); margin-left: -8px; }
.faces .avatar:first-child { margin-left: 0; }

/* dashboard */
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 18px; flex-wrap: wrap; }
.list { display: flex; flex-direction: column; gap: 10px; }
.erow { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; text-decoration: none; }
.erow .thumb { width: 64px; height: 64px; border-radius: 10px; background: #e8e6df center/cover no-repeat; flex: none; }
.erow .grow { flex: 1; min-width: 0; }
.erow .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.guests { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table.guests td, table.guests th { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; vertical-align: middle; }
table.guests th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fbfbf9; }
table.guests tr:last-child td { border-bottom: 0; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.stats .card { padding: 14px; }
.stats b { font-size: 26px; font-family: var(--serif); font-weight: 400; display: block; }

/* login */
.login { max-width: 420px; margin: 0 auto; padding: 0 20px; text-align: center; min-height: calc(100vh - 230px); display: flex; flex-direction: column; justify-content: center; }
.login .err { margin-bottom: 14px; }
.code { font: 600 30px/1 ui-monospace, Menlo, monospace; letter-spacing: 4px; padding: 14px; background: #fff; border: 1px dashed #c9c7bf; border-radius: 12px; }
#qr { display: grid; place-items: center; margin: 14px auto; }
#qr img, #qr canvas { width: 180px; height: 180px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* create */
.cover-pick { aspect-ratio: 1/1; border-radius: var(--radius); border: 1px dashed #c9c7bf; background: #efeee9 center/cover no-repeat; display: grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 14px; text-align: center; }
.create { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 16px 0 60px; align-items: start; }
.title-input { font: 400 38px/1.1 var(--serif) !important; border: 0 !important; background: transparent !important; padding: 4px 0 !important; outline: none !important; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 20px; }
  .three { grid-template-columns: 1fr; }
  .event, .create { grid-template-columns: 1fr; gap: 20px; }
  .cover { max-width: 420px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hide-sm { display: none; }
  table.guests .hide-sm { display: none; }
}

/* ---------- v3: Luma-style event, manage, home, profiles ---------- */
.avatar.xl { width: 84px; height: 84px; font-size: 30px; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-sec { margin-top: 22px; }
.side-sec h4 { font-size: 13px; font-weight: 600; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin: 0 0 10px; }
.side-sec .h { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-weight: 500; text-decoration: none; }
.map { width: 100%; height: 240px; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 4px; }
.meta .grow { flex: 1; min-width: 0; }

/* create = event page in edit mode */
.editing .inl { border: 1px solid transparent; background: transparent; border-radius: 10px; padding: 8px 10px; margin-left: -10px; width: calc(100% + 10px); transition: background .12s, border-color .12s; }
.editing .inl:hover { background: #efeee9; }
.editing .inl:focus { background: #fff; border-color: #9db5f5; outline: 2px solid #c7d7ff; }
.editing textarea.inl { min-height: 0; resize: none; }
.editing .about textarea.inl { min-height: 140px; resize: vertical; white-space: pre-wrap; }
.editing .title-input { overflow: hidden; margin: 8px 0 4px -10px !important; padding: 4px 10px !important; }
.editing .title-input:hover { background: #efeee9 !important; }
.editing .about { white-space: normal; }
.pillsel { width: auto !important; margin: 0 !important; border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 6px 14px !important; font-size: 14px !important; background: #fff !important; }
.dt-row { display: flex; align-items: center; gap: 8px; }
.dt-row > span { width: 38px; flex: none; }
.dt-row .inl { padding: 4px 8px; margin-left: 0; width: auto; max-width: 260px; }
.cover-pick { position: relative; overflow: hidden; border-style: solid; }
.cover-btn { position: absolute; right: 10px; bottom: 10px; background: rgba(20,20,20,.75); color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; }

/* manage */
.manage { padding-bottom: 60px; }
.mhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 12px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-color: var(--ink); }
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.qa { display: flex; flex-direction: column; gap: 2px; text-decoration: none; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 14px 16px; }
.qa:hover { border-color: #cfcdc5; }
.ov { display: flex; gap: 20px; margin-top: 16px; align-items: flex-start; }
.ov-prev { width: 180px; aspect-ratio: 1/1; border-radius: 12px; background: #e8e6df center/cover no-repeat; flex: none; }
.ov .grow { flex: 1; min-width: 0; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin: 28px 0 10px; }
.sec-head h3 { font-size: 22px; }
.bar { height: 8px; border-radius: 999px; background: #e6e5e0; overflow: hidden; }
.bar > div { height: 100%; background: var(--green); border-radius: 999px; }
.list-card { padding: 6px 16px; }
.grow-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.list-card > .grow-row:first-child, .list-card > .gwrap:first-child .grow-row, .list-card > p:first-child { border-top: 0; }
.list-card > p { padding: 10px 0; }
.gwrap + .gwrap .grow-row { border-top: 1px solid var(--line); }
.gdetail summary { cursor: pointer; padding-left: 42px; margin-top: -4px; padding-bottom: 6px; }
.invite-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.inv { display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 8px 0; margin: 0; border-top: 1px solid var(--line); }
.inv:first-child { border-top: 0; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.bars > div { flex: 1; height: 100%; display: flex; align-items: flex-end; background: #f3f2ee; border-radius: 6px; overflow: hidden; }
.bars span { display: block; width: 100%; background: var(--navy); min-height: 2px; border-radius: 6px 6px 0 0; }
.stats .card span { display: block; }

/* home timeline */
.seg { display: inline-flex; background: #ecebe6; border-radius: 999px; padding: 3px; }
.seg a { padding: 6px 14px; border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--muted); }
.seg a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tl { display: flex; flex-direction: column; gap: 14px; }
.tl-row { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; }
.tl-date { display: flex; flex-direction: column; padding-top: 12px; }
.tl-card { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-decoration: none; min-width: 0; }
.tl-card:hover { border-color: #cfcdc5; }
.tl-card .grow { flex: 1; min-width: 0; }
.tl-card .t { font-weight: 600; font-size: 17px; }
.tl-card .thumb { width: 84px; height: 84px; border-radius: 10px; background: #e8e6df center/cover no-repeat; flex: none; }
.tl-act { grid-column: 2; margin-top: -4px; }

/* discover + profiles */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.chips a { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); text-decoration: none; font-size: 14px; font-weight: 500; }
.chips a.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.chips a.on .muted { color: #c9d0e0; }
.prof { display: flex; gap: 20px; align-items: flex-start; margin: 28px 0 10px; }
.sec-h { font-size: 13px; font-weight: 600; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin: 32px 0 14px; }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }

@media (max-width: 820px) {
  .quick { grid-template-columns: 1fr; }
  .ov { flex-direction: column; }
  .ov-prev { width: 100%; max-width: 280px; }
  .tl-row { grid-template-columns: 1fr; }
  .tl-date { flex-direction: row; gap: 8px; padding-top: 0; }
  .tl-act { grid-column: 1; }
  .plans { grid-template-columns: 1fr; }
  .prof { flex-direction: column; gap: 12px; }
}
a.pill { text-decoration: none; }
.reg .head + .toggle { border-top: 0; }

/* ---------- v6: drafts, AI write, sponsors, small screens ---------- */
.note { background: #fff7e6; color: #7a5200; border: 1px solid #f3dfb3; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.ai-write { margin: 8px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.ai-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ai-row { display: flex; gap: 10px; align-items: stretch; }
.ai-row textarea { min-height: 52px; flex: 1; resize: vertical; }
.ai-row .btn { flex: none; }
.qline { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 0; }
.sp-ev { display: flex; gap: 14px; align-items: flex-start; }
.sp-ev .thumb { width: 88px; height: 88px; border-radius: 10px; background: #e8e6df center/cover no-repeat; flex: none; }
.sp-ev .grow { flex: 1; min-width: 0; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.toggle label .small { margin-top: 2px; }

/* Laptops: tighter layout so nothing needs zooming out */
@media (min-width: 821px) and (max-width: 1100px) {
  .event { grid-template-columns: 280px 1fr; gap: 28px; }
}
@media (max-height: 820px) and (min-width: 821px) {
  .nav { padding-top: 12px; padding-bottom: 12px; }
  h1 { font-size: clamp(36px, 5.5vw, 60px); }
}
/* Phones */
@media (max-width: 820px) {
  .nav { padding: 12px 16px; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 8px 9px; font-size: 14px; }
  .nav-links .btn.sm { padding: 7px 12px; }
  .wrap, .narrow { padding: 0 16px; }
  .event .cover, .event .cover-pick { max-width: 360px; width: 100%; }
  .event > div { min-width: 0; }
  .ai-row { flex-direction: column; }
  .row { flex-wrap: wrap; }
  .row > * { min-width: 160px; }
  .dt-row .inl { max-width: none; flex: 1; }
  .meta { align-items: flex-start; }
  .tabs a { padding: 10px 9px; font-size: 14px; }
  .mhead h2 { font-size: 30px; }
  .card { padding: 16px; }
  .list-card { padding: 4px 14px; }
  .grow-row .actions { width: 100%; }
  .sp-ev .thumb { width: 64px; height: 64px; }
  .prof .avatar.xl { width: 64px; height: 64px; }
  h2 { font-size: 30px; }
}
@media (max-width: 420px) {
  .logo span, .logo { font-size: 16px; }
  .nav-links a[href="/home"] { padding: 8px 6px; }
}
input[type=search] { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: 16px var(--sans); background: #fff; color: var(--ink); -webkit-appearance: none; appearance: none; }
@media (max-width: 820px) {
  /* Phone: cover, then title and signup, then hosts and guests (like Luma) */
  .event > div:first-child { display: contents; }
  .event > div:first-child > * { order: 3; }
  .event > div:first-child > .cover, .event > div:first-child > .cover-pick { order: 0; }
  .event > div:last-child { order: 1; }
  .event > div:first-child > .side-sec:first-of-type { margin-top: 0; }
}

/* ---------- v7: settings sidebar, admin button ---------- */
.settings { display: grid; grid-template-columns: 210px 1fr; gap: 28px; align-items: start; padding-bottom: 60px; }
.side-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.side-nav a { padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 500; font-size: 15px; }
.side-nav a:hover { background: #ecebe6; color: var(--ink); }
.side-nav a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); border: 1px solid var(--line); }
.panes { min-width: 0; }
.panes .pane { max-width: 720px; }
.admin-fab { position: fixed; left: 18px; bottom: 18px; z-index: 50; background: var(--ink); color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: .85; }
.admin-fab:hover { opacity: 1; }
@media (max-width: 820px) {
  .settings { grid-template-columns: 1fr; gap: 14px; }
  .side-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  .side-nav a { white-space: nowrap; padding: 8px 12px; font-size: 14px; }
}
.tl-row { grid-template-columns: 170px 1fr; }
@media (max-width: 820px) { .tl-row { grid-template-columns: 1fr; } }

/* v8: visible text boxes on the create page, question edit rows */
.editing .about textarea.inl, .about textarea.inl { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 12px 14px; min-height: 140px; margin: 0; width: 100%; box-sizing: border-box; }
.editing .about textarea.inl:focus, .about textarea.inl:focus { border-color: var(--ink, #111); outline: none; }
.q-item + .q-item { border-top: 1px solid var(--line); }
.q-item .grow-row { align-items: center; }
.su input[type=text], .su input[type=email] { background: #efeeea; }
.su-wait { text-align: center; align-items: stretch; }
.su-step { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.su-qr { display: flex; justify-content: center; padding: 6px 0; }
.su-qr img, .su-qr canvas { border-radius: 10px; }
.su-status { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--muted, #666); margin: 0; }
.su-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: supulse 1.2s ease-in-out infinite; }
@keyframes supulse { 50% { opacity: .25; } }
.screen-card { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; }
.pill.fit.hi { background: #e3f4ea; color: var(--green); }
.pill.fit.mid { background: #fdf3e1; color: var(--amber); }
.pill.fit.lo { background: #f3f3f1; color: #777; }
/* v10: bigger event photos on the Events page */
.tl-card .thumb { width: 136px; height: 136px; border-radius: 12px; }
@media (max-width: 820px) { .tl-card .thumb { width: 96px; height: 96px; } }
/* v11: newsletter */
.nl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.nl-stats .card { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.nl-stats b { font-size: 24px; }
.nl-compose { padding: 18px 20px; }
.nl-top { display: flex; gap: 14px; align-items: flex-start; }
.nl-top .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.nl-top textarea, .nl-top .nl-subject { border: 0; background: transparent; padding: 6px 0; font-size: 18px; box-shadow: none; resize: vertical; width: 100%; }
.nl-top .nl-subject { font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; }
.nl-top textarea:focus, .nl-top .nl-subject:focus { outline: none; }
.nl-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-left: 50px; }
.nl-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; margin: 0; cursor: pointer; background: #fff; }
.nl-chip.off { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { .nl-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .nl-stats b { font-size: 20px; } .nl-bar { padding-left: 0; } }
/* v12: register popup, Luma style */
.reg-modal { position: fixed; inset: 0; z-index: 100; background: rgba(247, 247, 245, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-y: auto; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 40px; }
.reg-modal[hidden] { display: none; }
.reg-sheet { position: relative; width: 100%; max-width: 440px; }
.reg-x { position: absolute; top: -6px; right: 0; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #888; cursor: pointer; padding: 4px 8px; }
.reg-title { font-family: Inter, system-ui, sans-serif; font-size: 26px; font-weight: 600; margin: 0 0 4px; }
.reg-who { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.reg-who .avatar { width: 44px; height: 44px; font-size: 15px; }
.reg-sheet label { color: #555; font-weight: 500; }
.reg-sheet input[type=text], .reg-sheet input[type=email], .reg-sheet select { background: #ecebe8; border: 0; border-radius: 10px; padding: 13px 14px; }
.reg-sheet input:focus, .reg-sheet select:focus { outline: 2px solid #cfcdc5; }
.reg-sheet .btn.block { margin-top: 6px; }
.reg-sheet .su { gap: 16px; }
/* v13: footer always at the bottom of the screen on short pages */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > .footer { margin-top: auto; }
body > main, body > .wrap, body > .nav { width: 100%; box-sizing: border-box; }
/* v13: location picker */
.loc-pick { position: relative; }
.loc-drop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.08); padding: 6px; max-height: 360px; overflow-y: auto; }
.loc-head { font-size: 13px; color: var(--muted); padding: 8px 10px 4px; }
.loc-item { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.loc-item svg { flex: none; color: #999; }
.loc-item span { display: flex; flex-direction: column; min-width: 0; }
.loc-item b { font-weight: 500; }
.loc-item small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-item.on, .loc-item:hover { background: #f1f0ed; }
/* v14: Spot side panel */
.sp-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 28px rgba(20, 33, 61, .28); transition: transform .15s; }
.sp-fab:hover { transform: scale(1.06); }
.sp-fab[hidden] { display: none; }
.sp-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; z-index: 70; background: #fbfbf9; border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0,0,0,.04); }
.sp-panel[hidden] { display: none; }
body.sp-open { padding-right: 400px; }
.sp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sp-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sp-title img { width: 20px; height: 20px; }
.sp-tools { display: flex; gap: 4px; }
.sp-tools button { border: 0; background: transparent; color: #666; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.sp-tools button:hover { background: #efeeea; color: var(--ink); }
.sp-body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; }
.sp-empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 8px; }
.sp-empty[hidden] { display: none; }
.sp-logo { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.sp-logo img { width: 26px; height: 26px; filter: invert(1); }
.sp-empty h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 4px 0 0; }
.sp-sugs { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 10px; }
.sp-sugs button { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; text-align: left; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.sp-sugs button:hover { border-color: #cfcdc5; }
.sp-msgs { display: flex; flex-direction: column; gap: 10px; }
.sp-msg { max-width: 88%; padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; word-wrap: break-word; }
.sp-msg.user { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 6px; }
.sp-msg.spot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.sp-msg a { color: inherit; text-decoration: underline; word-break: break-all; }
.sp-msg.typing { display: flex; gap: 4px; padding: 14px; }
.sp-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: #bbb; animation: spdot 1s infinite; }
.sp-msg.typing span:nth-child(2) { animation-delay: .15s; } .sp-msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes spdot { 50% { opacity: .3; transform: translateY(-2px); } }
.sp-compose { margin: 0 12px 12px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 10px 14px; display: flex; gap: 8px; align-items: flex-end; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.sp-compose textarea { flex: 1; border: 0; background: transparent; resize: none; font: inherit; font-size: 15px; padding: 6px 0; min-height: 24px; max-height: 160px; box-shadow: none; }
.sp-compose textarea:focus { outline: none; }
.sp-compose button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.sp-filled { box-shadow: 0 0 0 3px rgba(46, 139, 87, .35) !important; transition: box-shadow .3s; }
@media (max-width: 900px) { body.sp-open { padding-right: 0; overflow: hidden; } .sp-panel { width: 100%; } .sp-fab { right: 16px; bottom: 16px; } }
/* v14: create page, Luma style */
.editing .title-input { background: #efeeea; border-radius: 14px; padding: 10px 16px; margin: 6px 0 16px; }
.editing .title-input:hover, .editing .title-input:focus { background: #e9e8e3; }
.lm-top { display: flex; justify-content: flex-end; }
.lm-pill { width: auto; background: #efeeea; border: 0; border-radius: 10px; padding: 8px 32px 8px 14px; font-weight: 500; font-size: 15px; }
.lm-card { background: #efeeea; border-radius: 14px; }
.lm-dates { display: grid; grid-template-columns: 1fr 150px; gap: 10px; margin-bottom: 12px; }
.lm-dt { padding: 8px 8px 8px 16px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.lm-dtrow { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 8px; align-items: center; }
.lm-dot { width: 9px; height: 9px; border-radius: 50%; background: #9a9a96; }
.lm-dot.o { background: transparent; border: 1.5px solid #9a9a96; }
.lm-lbl { color: #555; }
.lm-dt input[type=date], .lm-dt input[type=time] { background: #e3e2dd; border: 0; border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 15px; width: auto; color: var(--ink); }
.lm-dt input[type=date] { min-width: 150px; }
.lm-tz { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: #555; }
.lm-tz b { color: var(--ink); font-weight: 500; margin-top: 4px; }
.lm-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; margin-bottom: 12px; }
.lm-ico { color: #777; flex: none; display: grid; place-items: center; width: 20px; height: 24px; }
.lm-row input[type=text], .lm-row textarea { background: transparent; border: 0; padding: 0; font: inherit; font-size: 16px; width: 100%; box-shadow: none; resize: none; min-height: 24px; line-height: 1.5; }
.lm-row input:focus, .lm-row textarea:focus { outline: none; }
.lm-row:focus-within { background: #e9e8e3; }
.lm-sub { margin-top: 2px; }
.lm-loc .loc-drop { top: calc(100% + 18px); left: -48px; right: -16px; }
.lm-sec { font-weight: 500; color: #555; margin: 22px 0 8px 2px; font-size: 15px; }
.lm-opts { padding: 2px 16px; }
.lm-opt { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #e2e1dc; margin: 0; font-weight: 400; cursor: default; }
.lm-opts > :last-child { border-bottom: 0; }
label.lm-opt { cursor: pointer; }
.lm-name { flex: 1; font-size: 16px; color: var(--ink); display: flex; flex-direction: column; }
.lm-name small { color: var(--muted); font-size: 13px; line-height: 1.4; margin-top: 3px; max-width: 460px; }
.lm-ctl { display: flex; gap: 6px; align-items: center; }
.lm-ctl select, .lm-ctl input, .lm-num { background: #e3e2dd; border: 0; border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 15px; width: auto; }
.lm-ctl input { width: 90px; } .lm-num { width: 120px; text-align: right; }
.lm-help { margin: -6px 0 10px 32px; }
.lm-switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #d6d5d0; position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
.lm-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.lm-switch:checked { background: var(--ink); }
.lm-switch:checked::after { transform: translateX(18px); }
.editing #save { margin-top: 22px; padding: 15px; font-size: 17px; border-radius: 14px; }
.lm-ai { display: flex; gap: 12px; align-items: center; width: 100%; margin-top: 14px; background: #efeeea; border: 0; border-radius: 14px; padding: 13px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.lm-ai:hover { background: #e9e8e3; }
.lm-ai > span { font-size: 20px; }
.lm-ai div { display: flex; flex-direction: column; }
.lm-ai small { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .lm-dates { grid-template-columns: 1fr; } .lm-dtrow { grid-template-columns: 14px auto 1fr auto; } .lm-dt input[type=date] { min-width: 0; } }
/* v14: our own dropdowns, date and time pickers; softer focus */
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20, 33, 61, .14); outline-offset: 0; border-color: #cfcdc5; }
button:focus { outline: none; } button:focus-visible { outline: 2px solid rgba(20, 33, 61, .25); outline-offset: 2px; }
.dd-hidden { display: none !important; }
.dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; font: 16px var(--sans); color: var(--ink); cursor: pointer; text-align: left; line-height: 1.3; }
.dd-btn[hidden] { display: none; }
.dd-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-btn em { font-style: normal; color: var(--muted); }
.dd-btn .dd-chev { flex: none; color: #888; transition: transform .15s; }
.dd-btn.open .dd-chev { transform: rotate(180deg); }
.dd-btn:hover { border-color: #cfcdc5; }
.dd-pop { position: fixed; z-index: 200; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.12); padding: 5px; animation: ddin .12s ease-out; }
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } }
.dd-menu { max-height: 300px; overflow-y: auto; }
.dd-opt { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; border: 0; background: transparent; border-radius: 9px; padding: 9px 12px; font: 15px var(--sans); color: var(--ink); cursor: pointer; text-align: left; white-space: nowrap; }
.dd-opt:hover { background: #f1f0ed; }
.dd-opt.on { font-weight: 600; }
.dd-opt svg { color: var(--ink); }
.tp { width: 140px; max-height: 260px; }
.dp { width: 290px; padding: 12px; }
.dp-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 10px; }
.dp-nav { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); }
.dp-nav:hover { background: #f1f0ed; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dp-grid i { font-style: normal; font-size: 12px; color: var(--muted); padding: 4px 0; }
.dp-day { border: 0; background: transparent; height: 36px; border-radius: 50%; font: 14px var(--sans); color: var(--ink); cursor: pointer; }
.dp-day:hover { background: #f1f0ed; }
.dp-day.out, .dp-day.past { color: #bbb; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px #cfcdc5; }
.dp-day.on { background: var(--ink); color: #fff; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding: 0 4px; }
.dp-foot button { border: 0; background: transparent; font: 500 14px var(--sans); color: var(--muted); cursor: pointer; padding: 6px; }
.dp-foot button:hover { color: var(--ink); }
/* create page bits on top of the base styles */
.event.editing textarea.title-input { background: #efeeea !important; border-radius: 14px; padding: 8px 16px !important; margin: 10px 0 16px !important; width: 100%; box-sizing: border-box; }
.event.editing textarea.title-input:hover, .event.editing textarea.title-input:focus { background: #e9e8e3 !important; }
.lm-opts input.lm-num, .lm-ctl input[type=number] { background: #e3e2dd; border: 0; border-radius: 9px; padding: 8px 12px; width: 120px; flex: none; }
.lm-ctl input[type=number] { width: 90px; }
.lm-pill + .dd-btn, .dd-btn.lm-pill { width: auto; background: #efeeea; border: 0; border-radius: 10px; padding: 8px 12px 8px 14px; font-weight: 500; font-size: 15px; }
.lm-ctl .dd-btn { width: auto; background: #e3e2dd; border: 0; border-radius: 9px; padding: 8px 12px; font-size: 15px; }
.lm-dt .dd-btn { width: auto; background: #e3e2dd; border: 0; border-radius: 9px; padding: 9px 14px; font-size: 15px; justify-content: center; }
.lm-dt .dd-date { min-width: 130px; } .lm-dt .dd-time { min-width: 96px; }
.lm-dt .dd-btn:hover, .lm-ctl .dd-btn:hover, .dd-btn.lm-pill:hover { background: #dcdbd5; }
/* v16: one field style everywhere: soft gray fill, no hard border, white when typing */
input[type=text], input[type=email], input[type=url], input[type=number], input[type=search], input[type=tel], input[type=password], input[type=datetime-local], textarea, select, .dd-btn {
  background: #efeeea; border: 1px solid transparent; border-radius: 12px; transition: background .12s, border-color .12s, box-shadow .12s; }
input[type=text]:hover, input[type=email]:hover, input[type=url]:hover, input[type=number]:hover, input[type=search]:hover, input[type=tel]:hover, input[type=password]:hover, textarea:hover, .dd-btn:hover { background: #e9e8e3; border-color: transparent; }
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=password]:focus, input[type=datetime-local]:focus, textarea:focus, select:focus {
  background: #fff; border-color: #d9d7d0; outline: none; box-shadow: 0 0 0 3px rgba(20, 33, 61, .06); }
input::placeholder, textarea::placeholder { color: #9a9892; }
/* inline edit fields on the create page keep their own look */
.lm-row input[type=text], .lm-row textarea, .lm-row input:focus, .lm-row textarea:focus, .sp-compose textarea, .sp-compose textarea:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; }
input[type=checkbox]:not(.lm-switch) { accent-color: var(--ink); width: 18px; height: 18px; }
/* v18: newsletter composer, Luma style */
.nl-top .nl-subject, .nl-top textarea { background: #efeeea !important; border: 1px solid transparent !important; border-radius: 12px !important; padding: 12px 14px !important; font-size: 16px; }
.nl-top .nl-subject { font-weight: 600; font-size: 17px; }
.nl-top textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.nl-top .nl-subject:hover, .nl-top textarea:hover { background: #e9e8e3 !important; }
.nl-top .nl-subject:focus, .nl-top textarea:focus { background: #fff !important; border-color: #d9d7d0 !important; box-shadow: 0 0 0 3px rgba(20, 33, 61, .06) !important; }
.nl-top .grow { gap: 10px; }
.nl-top .avatar { margin-top: 4px; }
.nl-bar { padding-left: 54px; margin-top: 14px; }
.nl-chip { position: relative; padding: 8px 14px 8px 12px; gap: 8px; border: 1px solid var(--line); background: #fff; user-select: none; }
.nl-chip input { position: absolute; opacity: 0; pointer-events: none; }
.nl-chip::before { content: ''; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #c9c7c0; background: #fff center/12px no-repeat; flex: none; }
.nl-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }
.nl-chip:has(input:checked) .muted { color: rgba(255,255,255,.7); }
.nl-chip:has(input:checked)::before { border-color: #fff; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.nl-chip.off { opacity: .45; }
/* our own "please fill this in" message instead of the browser bubble */
.field-err { box-shadow: 0 0 0 2px rgba(200, 50, 50, .35) !important; background: #fff6f5 !important; }
.field-msg { color: var(--red, #c0392b); font-size: 13px; margin-top: 6px; }
@media (max-width: 640px) { .lm-tz { flex-direction: row; align-items: center; gap: 8px; padding: 10px 14px; } .lm-tz b { margin: 0; } .nl-bar { padding-left: 0; } }
.editing .dd-btn.inl { background: #efeeea; margin-left: 0; width: 100%; padding: 11px 14px; border-radius: 12px; }
/* v18: Events list cards */
.tl-card { position: relative; align-items: stretch; padding: 16px; }
.tl-card .grow { display: flex; flex-direction: column; gap: 3px; }
.tl-link { text-decoration: none; color: var(--ink); }
.tl-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.tl-card .tl-act { margin-top: auto; padding-top: 12px; position: relative; z-index: 1; grid-column: auto; }
.tl-card .thumb { width: 116px; height: 116px; }
.tl-card .thumb.empty { display: grid; place-items: center; font: 400 44px var(--serif); color: #b5b2a8; background: linear-gradient(135deg, #efeeea, #e4e2dc); }
.tl-row > .tl-act { display: none; }
@media (max-width: 820px) { .tl-card .thumb { width: 84px; height: 84px; } .tl-card .thumb.empty { font-size: 32px; } }
/* v19: event page polish */
.faces .avatar { width: 30px; height: 30px; font-size: 10px; letter-spacing: -.02em; }
.about .map { display: block; margin-top: 12px; }
.about:has(.map) { white-space: normal; }
/* v21: settings account + plan */
.pane .lm-opts { margin-top: 4px; }
.set-val { font-weight: 500; color: var(--ink); text-align: right; white-space: nowrap; }
.set-out { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--muted); font: 500 15px var(--sans); padding: 8px 4px; cursor: pointer; border-radius: 10px; }
.set-out:hover { color: var(--red, #c0392b); }
.plan-card { background: #efeeea; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.plan-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: #fff; border-radius: 999px; padding: 4px 10px; }
.plan-card.on .plan-tag { background: var(--ink); color: #fff; }
.plan-price { font: 400 30px/1.2 var(--serif); margin-top: 10px; }
.plan-price b { font-weight: 400; }
.plan-price span { font: 15px var(--sans); color: var(--muted); margin-left: 4px; }
.plan-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-list li { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.plan-list svg { color: var(--green, #2e8b57); flex: none; }
.panes .pane { max-width: none; }
.drop { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; background: #efeeea; border: 1.5px dashed #d3d1ca; border-radius: 12px; padding: 13px 16px; color: var(--muted); cursor: pointer; font-weight: 400; margin: 0; transition: background .12s, border-color .12s; }
.drop:hover, .drop.over { background: #e9e8e3; border-color: #b9b6ad; }
.drop.has { color: var(--ink); border-style: solid; border-color: transparent; }
/* v23: sponsors */
.sp-hero { margin: 24px 0 18px; } .sp-hero h2 { margin: 0; } .sp-hero p { margin: 6px 0 0; }
.sp-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.sp-path { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 14px; background: #efeeea; text-decoration: none; color: var(--ink); border: 1.5px solid transparent; transition: background .12s; }
.sp-path:hover { background: #e9e8e3; }
.sp-path span { font-size: 14px; color: var(--muted); }
.sp-path.on { background: #fff; border-color: var(--ink); }
.sp-search { display: flex; align-items: center; gap: 10px; background: #efeeea; border-radius: 12px; padding: 0 14px; margin-bottom: 16px; color: #888; }
.sp-search input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 12px 0 !important; }
.sp-search:focus-within { background: #fff; box-shadow: 0 0 0 1px #d9d7d0, 0 0 0 4px rgba(20,33,61,.05); }
.sp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sp-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sp-top { display: flex; gap: 12px; align-items: center; }
.sp-top .grow { display: flex; flex-direction: column; min-width: 0; }
.sp-logo-i { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 400 22px var(--serif); flex: none; }
.sp-name { font-size: 17px; }
.sp-budget { text-align: right; display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.sp-budget b { color: var(--ink); font-size: 15px; }
.sp-bio { margin: 0; font-size: 15px; }
.sp-offer { font-size: 14px; } .sp-offer span { color: var(--muted); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { background: #efeeea; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 500; }
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.sp-empty { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 20px; text-align: center; }
.sp-empty p { margin: 6px 0 0; }
.sp-note { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.sp-note div { display: flex; flex-direction: column; } .sp-note span { font-size: 14px; }
.sp-ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sp-ev-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.sp-cover { aspect-ratio: 1; background: #efeeea center/cover no-repeat; display: block; }
.sp-cover.empty { display: grid; place-items: center; font: 400 56px var(--serif); color: #b5b2a8; text-decoration: none; }
.sp-ev-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.sp-ev-title { font-weight: 600; font-size: 16px; color: var(--ink); text-decoration: none; line-height: 1.3; }
.sp-stats { display: flex; gap: 12px; font-size: 14px; color: var(--muted); margin: 8px 0 12px; } .sp-stats b { color: var(--ink); }
.sp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
.sp-steps > div { background: #efeeea; border-radius: 14px; padding: 16px; }
.sp-steps span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.sp-steps p { margin: 4px 0 0; }
@media (max-width: 820px) { .sp-paths, .sp-steps { grid-template-columns: 1fr; } .sp-grid { grid-template-columns: 1fr; } .sp-ev-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .sp-ev-grid { grid-template-columns: 1fr; } .sp-note { flex-direction: column; align-items: flex-start; } }
.sp-top .grow { flex: 1; }
.sp-steps span { display: grid; }
.sp-steps b { display: block; }
.sp-cover { aspect-ratio: 16 / 10; }
/* v25: nav fixes */
.nav-links a.btn:hover { background: #24345a; color: #fff; opacity: 1; }
.nav-links a[href="/settings"] { display: inline-flex; align-items: center; padding: 0; margin-left: 4px; border-radius: 50%; }
.nav-links a[href="/settings"]:hover { background: transparent; box-shadow: 0 0 0 3px #ecebe6; }
.nav-links .avatar { display: block; width: 34px; height: 34px; }
.nav-links span.avatar { display: grid; }
/* v26: nav "More" menu */
.nav-more { position: relative; }
.nav-more summary { list-style: none; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; padding: 8px 12px; border-radius: 999px; cursor: pointer; user-select: none; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more summary:hover, .nav-more[open] summary { background: #ecebe6; }
.nav-more[open] summary svg { transform: rotate(180deg); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 170px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.12); padding: 5px; display: flex; flex-direction: column; animation: ddin .12s ease-out; }
.nav-menu a { padding: 9px 12px !important; border-radius: 9px !important; font-size: 15px; }
.nav-menu a:hover { background: #f1f0ed !important; }
.show-sm { display: none; }
@media (max-width: 640px) { .nav-menu .show-sm { display: block; } .nav-more summary { padding: 8px 9px; font-size: 14px; } }
.nav-links a, .nav-more summary { white-space: nowrap; }
@media (max-width: 480px) { .nav .logo { font-size: 0; gap: 0; } .nav-links { gap: 0; } .nav-links .btn.sm { padding: 7px 11px; font-size: 13px; } }
/* v27: plans */
.plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan-now { font-size: 14px; color: var(--muted); } .plan-now b { color: var(--ink); }
.plans3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.plans3 .plan-card { padding: 18px; gap: 12px; border: 1.5px solid transparent; }
.plans3 .plan-card.cur { background: #fff; border-color: var(--ink); }
.plan-name { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.plan-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 8px; }
.plans3 .plan-price { font: 400 15px var(--sans); color: var(--muted); margin: 0; }
.plans3 .plan-price b { font: 400 34px var(--serif); color: var(--ink); margin-right: 2px; }
.plans3 .plan-list { gap: 8px; flex: 1; }
.plans3 .plan-list li { font-size: 14px; align-items: flex-start; }
.plans3 .plan-list svg { margin-top: 2px; }
.plan-inc { margin: 0; text-align: center; padding: 12px 0; }
.plan-org { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 14px; }
.plans3 .plan-card.cur .plan-org { background: #f3f2ee; }
.plan-org span { flex: 1; font-weight: 500; } .plan-org small { color: var(--muted); }
.plan-org .avatar { width: 24px; height: 24px; font-size: 10px; }
@media (max-width: 900px) { .plans3 { grid-template-columns: 1fr; } }

/* v28: cover placeholder tiles */
.ecard .img.ph { display: flex; align-items: flex-end; padding: 18px; background: linear-gradient(150deg, hsl(var(--h) 45% 90%), hsl(calc(var(--h) + 40) 40% 80%)); }
.ecard .img.ph span { font-family: var(--serif, Georgia, serif); font-size: 26px; line-height: 1.05; color: hsl(var(--h) 35% 28%); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl-card .thumb.empty { background: linear-gradient(150deg, hsl(var(--h, 40) 45% 90%), hsl(calc(var(--h, 40) + 40) 40% 80%)); color: hsl(var(--h, 40) 35% 30%); }
.cover.ph, .ov-prev.ph { background: linear-gradient(150deg, hsl(var(--h) 45% 90%), hsl(calc(var(--h) + 40) 40% 80%)); }
.cover.ph { display: flex; align-items: flex-end; place-items: initial; padding: 26px; }
.cover.ph span { font-family: var(--serif); font-size: 40px; line-height: 1.02; color: hsl(var(--h) 35% 28%); }
.sp-cover.empty { background: linear-gradient(150deg, hsl(var(--h, 40) 45% 90%), hsl(calc(var(--h, 40) + 40) 40% 80%)); color: hsl(var(--h, 40) 35% 30%); }
@media (max-width: 640px) { .ov-prev.ph { display: none; } .cover.ph { aspect-ratio: 16 / 9; } }

/* v29: toasts */
#toasts { position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: #14213d; color: #fff; border-radius: 14px; padding: 11px 12px 11px 14px; font-size: 14px; line-height: 1.35; box-shadow: 0 10px 30px rgba(20, 33, 61, .25); animation: toastIn .22s ease-out; }
.toast.err { background: #b3261e; }
.toast i { font-style: normal; width: 20px; height: 20px; flex: none; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.toast span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast a { color: #fff; text-decoration: underline; }
.toast-x, .toast-copy { background: none; border: 0; color: rgba(255,255,255,.75); cursor: pointer; font: inherit; padding: 2px 4px; }
.toast-x { font-size: 18px; line-height: 1; }
.toast-copy { font-weight: 600; color: #fff; }
.toast.out { opacity: 0; transform: translateY(6px); transition: .2s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@media (max-width: 560px) { #toasts { left: 12px; right: 12px; max-width: none; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* v30: sponsor cards closer to the event cards */
.sp-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sp-card { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; padding: 18px; gap: 10px; transition: border-color .15s; }
.sp-card:hover { border-color: #cfccc4; }
.sp-top { display: flex; align-items: center; gap: 12px; }
.sp-logo-i { width: 48px; height: 48px; border-radius: 14px; background: #f1f0ec; color: var(--ink); border: 1px solid var(--line); font: 400 22px var(--serif); display: grid; place-items: center; flex: none; overflow: hidden; }
.sp-logo-i.has-img { background: #fff; }
.sp-logo-i img { width: 30px; height: 30px; object-fit: contain; }
.sp-name { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.sp-top a.small { text-decoration: none; font-size: 13px; }
.sp-top a.small:hover { text-decoration: underline; }
.sp-bio { font-size: 14px; color: var(--muted); line-height: 1.45; }
.sp-chips { gap: 6px; }
.sp-chip { background: #f1f0ec; color: var(--ink); font-size: 12px; font-weight: 500; padding: 3px 9px; }
.sp-where { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); }
.sp-foot { padding-top: 4px; }
.sp-foot .btn.ghost { padding: 7px 14px; }
@media (max-width: 980px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sp-grid { grid-template-columns: 1fr; } }
/* v32: join by text */
.reg-or { display: flex; align-items: center; gap: 10px; margin: 12px 0; color: var(--muted); font-size: 12px; }
.reg-or::before, .reg-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.join-text { display: flex; align-items: center; justify-content: center; gap: 8px; }
.join-text svg { width: 17px; height: 17px; color: #0a84ff; }
/* v33: Claude connector pane */
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.steps-mini { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
/* v33: AI write button, only on hover */
.ai-wrap, .lm-desc { position: relative; }
.ai-spot { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0; transform: scale(.92); transition: opacity .15s, transform .15s; box-shadow: 0 2px 8px rgba(20,33,61,.08); }
.ai-spot img { width: 16px; height: 16px; }
.ai-wrap:hover .ai-spot, .lm-desc:hover .ai-spot, .ai-wrap:focus-within .ai-spot, .lm-desc:focus-within .ai-spot, .ai-spot.busy { opacity: 1; transform: none; }
.ai-spot:hover { border-color: var(--ink); }
.ai-spot.busy img { animation: spotSpin 1s linear infinite; }
@keyframes spotSpin { to { transform: rotate(360deg); } }
@media (hover: none) { .ai-spot { opacity: .8; transform: none; } }
.ai-wrap .title-input { padding-right: 44px; }
/* v33: event tips card */
.tips { display: flex; align-items: center; gap: 14px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.tips .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tips-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #e8f2ff; display: grid; place-items: center; }
.tips-ico svg { width: 18px; height: 18px; color: #0a84ff; }
.tips .grow { flex: 1; }
/* v34: AI write button sits on the first line and breathes while writing */
.lm-desc .ai-spot { top: 10px; right: 10px; }
.ai-wrap .ai-spot { top: 22px; }
.lm-desc textarea { overflow: hidden; padding-right: 36px !important; }
.ai-wrap .title-input { padding-right: 44px !important; }
.ai-spot.busy img { animation: spotBreathe 1.6s ease-in-out infinite; }
@keyframes spotBreathe { 0%, 100% { transform: scale(.88); } 50% { transform: scale(1.08); } }
/* v35: in-app browser bar, plain link buttons, share row, marketplace */
.inapp { position: sticky; top: 0; z-index: 60; display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--navy); color: #fff; font-size: 14px; line-height: 1.35; }
.inapp span { flex: 1; }
.inapp button { flex: none; background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 999px; padding: 6px 12px; font: 600 13px var(--sans); cursor: pointer; }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.sp-kinds { display: inline-flex; gap: 4px; background: #ecebe6; padding: 4px; border-radius: 999px; margin-top: 14px; }
.sp-kinds a { text-decoration: none; padding: 7px 14px; border-radius: 999px; font-size: 14px; color: var(--muted); }
.sp-kinds a.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.kpis-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpis-mini div { background: var(--paper); border-radius: 12px; padding: 12px 14px; }
.kpis-mini b { display: block; font: 400 26px/1.1 var(--serif); }
.kpis-mini span { font-size: 12px; color: var(--muted); }
/* v36: Partner Network polish */
.pn-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pn-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.sp-hero .pn-actions { margin-top: 4px; }
.pn-empty { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 48px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pn-empty b { font-size: 18px; font-weight: 600; margin-top: 6px; }
.pn-empty p { margin: 0 0 10px; }
.pn-empty-ic { width: 56px; height: 56px; border-radius: 16px; background: #f1f0ec; display: grid; place-items: center; color: var(--ink); }
.sp-path { padding: 12px 16px; }
.sp-path b { font-size: 15px; }
@media (max-width: 820px) { .sp-paths { grid-template-columns: repeat(3, 1fr); gap: 8px; } .sp-path { padding: 10px; text-align: center; } .sp-path b { font-size: 13px; } .sp-path span { display: none; } }
/* v37: calmer manage pages with icons */
.ic { flex: none; vertical-align: -3px; }
.quick { gap: 12px; }
.quick.q4 { grid-template-columns: repeat(4, 1fr); }
.qa { flex-direction: row !important; align-items: center; gap: 12px !important; padding: 14px !important; border-radius: 16px; transition: border-color .12s, transform .12s; }
.qa:hover { transform: translateY(-1px); }
.qa.col { flex-direction: column !important; align-items: flex-start; gap: 4px !important; }
.qa-ic { width: 40px; height: 40px; border-radius: 12px; background: #f1f0ec; display: grid; place-items: center; color: var(--ink); flex: none; }
.qa.col .qa-ic { margin-bottom: 6px; }
.qa-t { display: flex; flex-direction: column; min-width: 0; }
.qa-t b { font-size: 15px; font-weight: 600; }
.ov-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.ov-stat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: inherit; }
.ov-stat b { display: block; font: 400 32px/1.1 var(--serif); }
.ov-stat span { font-size: 13px; color: var(--muted); }
.ov-stat.hot { border-color: #e9c46a; background: #fffaf0; }
.ov-line { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ov-line .ic { margin-top: 2px; color: var(--muted); }
.ov-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ov-btns form { display: inline; }
.ov-btns .btn, .btn.with-ic { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .quick.q4 { grid-template-columns: 1fr 1fr; } .qa { padding: 12px !important; } .qa-ic { width: 36px; height: 36px; } }
/* registered card on the event page */
.you-in { display: flex; gap: 12px; align-items: center; }
.you-in .tick { width: 40px; height: 40px; border-radius: 50%; background: #e6f4ea; color: var(--green); display: grid; place-items: center; flex: none; }
.you-in.pending .tick { background: #fff4dc; color: var(--amber); }
.you-in b { display: block; font-size: 17px; }
.you-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.you-acts a, .you-acts button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; background: #f4f3ef; color: var(--ink); text-decoration: none; font: 600 13px var(--sans); border: 0; cursor: pointer; }
.you-acts a:hover, .you-acts button:hover { background: #ecebe6; }
.you-cancel { background: none; border: 0; padding: 0; margin-top: 14px; color: var(--muted); font: 13px var(--sans); text-decoration: underline; cursor: pointer; }
.add-host { margin-top: 12px; }
.add-host > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.add-host > summary::-webkit-details-marker { display: none; }
.add-host[open] > summary { display: none; }
.dates-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.date-chip { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: inherit; font-size: 14px; }
.date-chip span { font-size: 12px; color: var(--muted); }
.date-chip:hover { border-color: var(--ink); }
.pay-rows { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.pay-row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.pay-row + .pay-row { border-top: 1px solid var(--line); }
.pay-amt { font: 400 24px/1 var(--serif); }

/* v40 settings: one row component everywhere */
.set-list { border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0; }
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-ic { width: 40px; height: 40px; border-radius: 12px; background: #f4f3ef; display: grid; place-items: center; flex: none; color: var(--ink); }
.set-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-txt b { font-weight: 600; font-size: 15px; }
.set-txt small { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-right { display: flex; gap: 8px; align-items: center; flex: none; }
.set-right form { margin: 0; }
.set-amt { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.set-h { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 -4px; }
.side-h { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 14px 12px 4px; }
.side-h:first-child { padding-top: 0; }
.sub-sec { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.sub-sec h4 { margin: 0; font-size: 16px; }
@media (max-width: 760px) {
  .side-h { display: none; }
  .set-row { flex-wrap: wrap; }
  .set-right { margin-left: 54px; }
}

/* v41: no colored labels, one button system, inline edits */
.pill, .pill.going, .pill.pending, .pill.waitlist, .pill.declined, .pill.cancelled, .pill.fit.hi, .pill.fit.mid, .pill.fit.lo {
  background: #f1f0ec; color: var(--ink); font-weight: 500; font-size: 12px; padding: 4px 10px; border: 0; }
.ok { background: #f1f0ec; color: var(--ink); }
.err { background: #f1f0ec; color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.ov-stat.hot { border-color: var(--ink); background: #fff; }
.you-in .tick, .you-in.pending .tick { background: #f1f0ec; color: var(--ink); }
.bar > div { background: var(--ink); }
.su-step { color: var(--muted); }
.su-status .dot { background: var(--ink); }
.plan-list svg { color: var(--ink); }

/* Buttons: two sizes, same shape everywhere */
.btn { height: 44px; padding: 0 20px; font: 600 15px/1 var(--sans); border-radius: 999px; white-space: nowrap; box-sizing: border-box; }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.btn.ghost:hover { border-color: #cfcdc5; opacity: 1; }
.btn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-row > input, .btn-row > select { margin: 0; }
.card.stack > .btn, .card.stack > form > .btn { margin-top: 4px; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; margin: 0; cursor: pointer; }
.chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }

/* Registration tiles: edit in place */
.qa.col input[type=number] { margin: 6px 0 4px; }
.qa.col .btn { margin-top: 6px; }
.qa.col:hover { transform: none; }
.qa-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.money-in { display: flex; align-items: center; width: 100%; margin: 6px 0 4px; background: #efeee9; border-radius: 12px; }
.money-in span { padding-left: 14px; font-size: 14px; color: var(--muted); font-weight: 600; }
.money-in input { background: transparent !important; border: 0 !important; margin: 0 !important; }
.switch { position: relative; width: 42px; height: 24px; flex: none; margin: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: #d9d7d0; border-radius: 999px; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { transform: translateX(18px); }
.q-add { padding: 4px 0 10px; gap: 12px; }
.q-add.has { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
.list-card > .q-add:first-child { padding-top: 12px; }

/* Blasts: reminder steps */
.steps-v { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.steps-v i { width: 14px; height: 1px; background: var(--line); }
.step-v { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.step-v .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #cfcdc5; display: grid; place-items: center; }
.step-v.done { color: var(--ink); font-weight: 500; }
.step-v.done .dot { background: var(--ink); color: #fff; box-shadow: none; }

/* Expandable rows */
.set-row-d + .set-row-d, .set-row + .set-row-d, .set-row-d + .set-row { border-top: 1px solid var(--line); }
.set-row-d summary { list-style: none; cursor: pointer; }
.set-row-d summary::-webkit-details-marker { display: none; }
.set-chev { color: var(--muted); transition: transform .15s; display: grid; }
.set-row-d[open] .set-chev { transform: rotate(90deg); }
.set-body { padding: 0 16px 16px 70px; }
.set-list .set-row form { margin: 0; }
@media (max-width: 760px) { .set-body { padding: 0 14px 14px; } }
[hidden] { display: none !important; }
.list-card > .q-item:first-child > .grow-row { border-top: 0; }
.btn + p.small { margin-top: 10px !important; }
/* v42: breathing room for forms and buttons inside lists and cards */
.list-card { padding: 4px 16px; }
.list-card > form:last-child, .list-card > .add-row, .list-card > .q-add { padding-top: 16px; padding-bottom: 16px; }
.add-row { border-top: 1px solid var(--line); margin: 0; }
.list-card > .add-row:first-child { border-top: 0; }
.btn-row input, .btn-row select { height: 44px; }
.btn-row .btn.sm { height: 44px; padding: 0 18px; }
.card > .btn:last-child, .card > form:last-child > .btn:last-child { margin-bottom: 0; }
.card.stack { gap: 14px; }
.grow-row { padding: 12px 0; }
@media (max-width: 760px) { .add-row input, .add-row select { max-width: none !important; flex: 1 1 100%; } }
/* v43: more room between settings groups */
.side-h { padding-top: 26px; }
.side-nav { gap: 4px; }
.panes > .pane { gap: 18px; }
.dash-head .btn-row form { margin: 0; }
.plan-sec { margin: 18px 0 -4px; font-size: 15px; font-weight: 600; color: var(--muted); }
.plan-sec.first { margin-top: 0; }
.plans3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .plans3 { grid-template-columns: 1fr; } }