/* Host experience: create wizard, My Tabs dashboard, event dashboard.
   Builds on tokens in styles.css and form/modal pieces in app.css. */

body.host { background: var(--bg); min-height: 100vh; }
body.no-scroll { overflow: hidden; }
.ic { width: 18px; height: 18px; stroke-width: 2; flex-shrink: 0; }

/* ---------- App header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 15;
  background: rgba(252, 248, 242, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.app-header .inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; }
.app-header .logo { font-size: 28px; }
.app-header nav { display: flex; gap: 26px; margin-left: auto; font-weight: 500; font-size: 15px; }
.app-header nav a { color: var(--muted); }
.app-header nav a:hover, .app-header nav a.active { color: var(--text); }
.app-header nav a.active { box-shadow: inset 0 -2px 0 var(--gold); padding-bottom: 4px; }
.app-header .btn-sm { padding: 10px 18px; font-size: 15px; }
.icon-btn.menu-btn { display: none; }

.demo-banner {
  background: var(--ink-800); color: #dfe4ee; font-size: 13px; text-align: center; padding: 8px 16px;
}
.demo-banner b { color: var(--gold-2); }
.demo-banner button { background: none; border: none; color: #fff; text-decoration: underline; font: inherit; cursor: pointer; margin-left: 6px; }

/* ---------- Layout ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: 36px 24px 96px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-title { font-size: clamp(32px, 4.4vw, 52px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.02; }
.page-sub { color: var(--muted); font-size: 17px; margin-top: 10px; }
.section-head { display: flex; align-items: center; gap: 10px; margin: 44px 0 16px; }
.section-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.count-pill { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; padding: 2px 10px; color: var(--muted); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 6px 24px rgba(16, 28, 52, 0.05); padding: 24px; }
.panel h3 { font-size: 17px; letter-spacing: -0.01em; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.helper { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---------- Buttons (additions) ---------- */
.btn-md { padding: 13px 22px; font-size: 15px; }
.btn-danger { background: #c8372b; color: #fff; }
.btn-danger:hover { background: #b02e23; }
.btn-ghost { background: transparent; color: var(--text); padding: 10px 14px; font-size: 14px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.btn-ghost:hover { background: rgba(16, 28, 52, 0.06); }
.btn-dark { background: var(--ink-800); color: #fff; }
.btn-dark:hover { background: var(--ink-700); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: none; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text); }
.icon-btn:hover { background: rgba(16, 28, 52, 0.07); }
button.btn { gap: 8px; }
.btn .ic { width: 17px; height: 17px; }

/* ---------- Status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.01em; }
.tone-gray { background: #eceae5; color: #4f5664; }
.tone-blue { background: #e3edfc; color: #1f5fbf; }
.tone-amber { background: #fff1d6; color: #9a5b00; }
.tone-green { background: #dff5e9; color: #1d7a4c; }
.tone-red { background: #fbe3e1; color: #b0322a; }
.tone-live { background: #101c34; color: #fff; }
.tone-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #3fd28a; box-shadow: 0 0 0 3px rgba(63, 210, 138, 0.25); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(63, 210, 138, 0); } }
@media (prefers-reduced-motion: reduce) { .tone-live .dot { animation: none; } }

/* ---------- Event cards (My Tabs) ---------- */
.ecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.ecard {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; box-shadow: 0 6px 24px rgba(16, 28, 52, 0.05); transition: transform 0.15s, box-shadow 0.15s;
}
.ecard:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(16, 28, 52, 0.1); }
.ecard-img { height: 120px; position: relative; background: var(--ink-800) center / cover no-repeat; }
.ecard-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 40, 0.05), rgba(10, 20, 40, 0.55)); }
.ecard-img .badge { position: absolute; top: 12px; left: 12px; z-index: 1; }
.ecard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ecard h3 { font-size: 19px; letter-spacing: -0.02em; }
.ecard .meta { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 6px; }
.ecard .meta .ic { width: 15px; height: 15px; }
.ecard-money { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; }
.ecard-money b { font-size: 24px; letter-spacing: -0.03em; }
.ecard-money small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.ecard .budget-bar { margin-top: 10px; }
.ecard-foot { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: 12px; }

/* ---------- Budget bar ---------- */
.budget-bar { height: 10px; border-radius: 999px; background: #efe9df; overflow: hidden; }
.budget-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-2), var(--gold)); transition: width 0.4s ease; }
.budget-bar.warn span { background: linear-gradient(90deg, #ffb347, #f28b1b); }
.budget-bar.danger span { background: linear-gradient(90deg, #f07a5f, #d0412f); }
.budget-bar.lg { height: 16px; }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 40px 24px; border: 1.5px dashed rgba(16, 28, 52, 0.15); border-radius: 20px; background: rgba(255, 255, 255, 0.5); }
.empty-state .empty-ic { width: 34px; height: 34px; color: var(--gold); margin-bottom: 10px; }
.empty-state h3 { font-size: 18px; }
.empty-state p { color: var(--muted); margin: 6px auto 16px; max-width: 380px; line-height: 1.5; }

/* ---------- Event dashboard ---------- */
.ev-hero {
  border-radius: 26px; overflow: hidden; position: relative; color: #fff;
  background: linear-gradient(110deg, rgba(10, 20, 40, 0.96) 0%, rgba(10, 20, 40, 0.86) 45%, rgba(10, 20, 40, 0.55) 100%), var(--img) center / cover;
  padding: 28px 30px;
}
.ev-hero .crumbs { font-size: 14px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
.ev-hero .crumbs:hover { color: #fff; }
.ev-hero h1 { color: #fff; font-size: clamp(30px, 4vw, 46px); margin-top: 14px; }
.ev-hero .ev-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; color: #d7dceb; font-size: 15px; }
.ev-hero .ev-meta span { display: inline-flex; align-items: center; gap: 7px; }
.ev-hero .ev-meta .ic { width: 16px; height: 16px; color: var(--gold-2); }
.ev-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ev-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.ev-actions .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.ev-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.08); }

.notice { display: flex; gap: 14px; align-items: flex-start; border-radius: 16px; padding: 16px 18px; margin-top: 18px; font-size: 15px; line-height: 1.5; }
.notice .ic { width: 20px; height: 20px; margin-top: 2px; }
.notice b { display: block; }
.notice.info { background: #e9f1fd; color: #1b4c98; }
.notice.warn { background: #fff3dc; color: #7c4a00; }
.notice.ok { background: #e3f6ec; color: #1a6b43; }
.notice.muted { background: #efece6; color: #4f5664; }
.notice .notice-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

.tabbar { display: flex; gap: 4px; margin: 26px 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  background: none; border: none; font: inherit; font-weight: 600; font-size: 15px; color: var(--muted);
  padding: 12px 14px; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.tabbar button .ic { width: 16px; height: 16px; }
.tabbar button:hover { color: var(--text); }
.tabbar button.on { color: var(--text); border-bottom-color: var(--gold); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.stat-tile small { color: var(--muted); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.stat-tile small .ic { width: 15px; height: 15px; }
.stat-tile b { display: block; font-size: 30px; letter-spacing: -0.035em; margin-top: 6px; }
.stat-tile span { color: var(--muted); font-size: 13px; }

.budget-panel { margin-top: 14px; }
.budget-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.budget-top .big { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.budget-top .of { color: var(--muted); font-size: 16px; }
.budget-legend { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; margin-top: 10px; flex-wrap: wrap; gap: 6px; }

.two-col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; }

/* transaction feed */
.txns { list-style: none; }
.txns li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.txns li:last-child { border-bottom: none; }
.txns .av { width: 36px; height: 36px; font-size: 13px; margin: 0; border: none; }
.txns b { font-weight: 600; display: block; font-size: 15px; }
.txns small { color: var(--muted); font-size: 13px; }
.txns .amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.txns .amt small { display: block; font-weight: 500; }
.txns .txn-declined .amt b { text-decoration: line-through; color: var(--muted); }
.st { font-size: 12px; font-weight: 600; }
.st-settled { color: #1d7a4c; }
.st-pending { color: #9a5b00; }
.st-declined { color: #b0322a; }

.activity { list-style: none; }
.activity li { display: flex; gap: 12px; padding: 10px 0; font-size: 14px; }
.activity li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 6px; flex-shrink: 0; }
.activity small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* filters / toolbars */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .input { width: auto; padding: 11px 14px; font-size: 15px; background: var(--surface); }
.toolbar .search { flex: 1; min-width: 200px; position: relative; }
.toolbar .search .input { width: 100%; padding-left: 40px; }
.toolbar .search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.toolbar .spacer { flex: 1; }

/* guest table */
.gtable { width: 100%; border-collapse: collapse; font-size: 15px; }
.gtable th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.gtable td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.gtable tr:last-child td { border-bottom: none; }
.gtable .who { display: flex; align-items: center; gap: 12px; }
.gtable .who .av { width: 36px; height: 36px; font-size: 13px; margin: 0; border: none; }
.gtable .who small { display: block; color: var(--muted); font-size: 13px; }
.gtable .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.row-actions { display: flex; gap: 2px; justify-content: flex-end; }
.row-actions .icon-btn { width: 34px; height: 34px; }

/* controls */
.setting { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.setting:last-child { border-bottom: none; }
.setting h4 { font-size: 16px; }
.setting p { color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.5; max-width: 560px; }
.setting .control { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.money-input { position: relative; width: 140px; }
.money-input::before { content: "$"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.money-input .input { padding-left: 28px; background: var(--surface); }

.switch { position: relative; width: 50px; height: 30px; flex-shrink: 0; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: #d9d4cb; border-radius: 999px; transition: background 0.15s; }
.switch span::after { content: ""; position: absolute; width: 24px; height: 24px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.15s; }
.switch input:checked + span { background: var(--gold); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + span { opacity: 0.5; }

/* details */
.dl { display: grid; grid-template-columns: 180px 1fr; gap: 0; }
.dl dt, .dl dd { padding: 14px 0; border-bottom: 1px solid var(--line); }
.dl dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.dl dd { font-size: 15px; }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: none; }

/* ---------- Modals (extend app.css .sheet) ---------- */
.sheet.wide { max-width: 560px; }
.sheet-head { align-items: flex-start; }
.sheet-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.confirm-body { color: var(--muted); line-height: 1.6; font-size: 15px; }
.confirm-body b { color: var(--text); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; flex-wrap: wrap; }
.modal-actions .btn { padding: 13px 22px; font-size: 15px; }
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amount-btn { padding: 14px 6px; border-radius: 12px; border: 1.5px solid rgba(16, 28, 52, 0.14); background: var(--bg); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; color: var(--text); }
.amount-btn.on { border-color: var(--gold); background: #fff8ea; box-shadow: 0 0 0 3px rgba(247, 168, 27, 0.18); }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin-top: 18px; line-height: 1.5; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.sim-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #9a5b00; background: #fff1d6; border-radius: 6px; padding: 3px 8px; }

/* ---------- Create wizard ---------- */
.wizard { max-width: 760px; margin: 0 auto; padding: 28px 20px 140px; }
.wiz-progress { display: flex; gap: 6px; margin-bottom: 10px; }
.wiz-progress span { flex: 1; height: 5px; border-radius: 99px; background: #e8e2d8; transition: background 0.2s; }
.wiz-progress span.done { background: var(--gold); }
.wiz-step-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.wizard h1 { font-size: clamp(32px, 5vw, 48px); margin-top: 26px; }
.wizard .page-sub { margin-bottom: 26px; }

.opt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opt-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border-radius: 18px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; font: inherit; color: var(--text); font-weight: 600; font-size: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.opt-card .ic { width: 26px; height: 26px; color: var(--gold); }
.opt-card:hover { border-color: rgba(16, 28, 52, 0.3); }
.opt-card.on { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(247, 168, 27, 0.18); background: #fffaf0; }

.venue-list { display: grid; gap: 12px; margin-top: 14px; }
.venue-opt {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 12px; border-radius: 18px;
  background: var(--surface); border: 1.5px solid var(--line); cursor: pointer; text-align: left; font: inherit; color: var(--text);
}
.venue-opt img { width: 96px; height: 76px; object-fit: cover; border-radius: 12px; }
.venue-opt h4 { font-size: 17px; }
.venue-opt p { color: var(--muted); font-size: 14px; margin-top: 3px; }
.venue-opt .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.venue-opt.on { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(247, 168, 27, 0.18); background: #fffaf0; }
.tag-s { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: #f1ede6; color: #4f5664; }
.tag-s.ok { background: #dff5e9; color: #1d7a4c; }
.tag-s.req { background: #fff1d6; color: #9a5b00; }
.radio-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(16, 28, 52, 0.25); margin-right: 6px; }
.on .radio-dot { border: 7px solid var(--gold); }
.unlisted { margin-top: 18px; }
.unlisted-toggle { background: none; border: none; font: inherit; color: var(--gold-ink); font-weight: 700; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 6px 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field .hint { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; font-weight: 400; }
.field.invalid .input { border-color: #d0412f; }
.field .err { display: block; color: #c0392b; font-size: 13px; margin-top: 6px; font-weight: 500; }

.fee-box { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin-top: 22px; }
.fee-box div { display: flex; justify-content: space-between; padding: 7px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.fee-box .grand { color: var(--text); font-weight: 800; font-size: 19px; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }

details.advanced { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 0 20px; }
details.advanced summary { list-style: none; cursor: pointer; padding: 18px 0; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced[open] summary .ic { transform: rotate(180deg); }
details.advanced .adv-body { padding-bottom: 8px; }

.review { list-style: none; }
.review li { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.review li:last-child { border-bottom: none; }
.review span { color: var(--muted); }
.review b { text-align: right; }
.review .edit { background: none; border: none; color: var(--gold-ink); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; margin-left: 8px; }

.wiz-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: rgba(252, 248, 242, 0.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}
.wiz-nav .inner { max-width: 760px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.wiz-nav .spacer { flex: 1; }
.wiz-nav .btn { padding: 15px 28px; font-size: 16px; }

/* success */
.success-card { text-align: center; padding: 40px 28px; }
.success-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--text); }
.success-ic .ic { width: 34px; height: 34px; stroke-width: 2.5; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .opt-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .app-header .inner { padding: 12px 16px; gap: 12px; }
  .app-header .logo { font-size: 24px; }
  .icon-btn.menu-btn { display: grid; }
  .app-header .btn-sm { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .app-header .logo + nav + .menu-btn { margin-left: auto; }
  .app-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 16px;
  }
  .app-header nav a { padding: 12px 0; font-size: 17px; }
  .app-header nav a.active { box-shadow: none; color: var(--gold-ink); }
  .app-header.menu-open nav { display: flex; }
  .page { padding: 24px 16px 96px; }
  .ev-hero { padding: 22px 20px; border-radius: 22px; }
  .ev-actions .btn { flex: 1 1 calc(50% - 10px); padding: 13px 10px; }
  .panel { padding: 18px; border-radius: 18px; }
  .stat-tile b { font-size: 24px; }
  .budget-top .big { font-size: 32px; }
  .setting { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dl { grid-template-columns: 1fr; }
  .dl dt { border-bottom: none; padding-bottom: 2px; }
  .dl dd { padding-top: 0; }
  .amount-grid { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .venue-opt { grid-template-columns: 72px 1fr; }
  .venue-opt img { width: 72px; height: 64px; }
  .venue-opt .radio-dot { display: none; }
  .wiz-nav .btn { padding: 14px 20px; flex: 1; }

  /* guest table → stacked cards */
  .gtable thead { display: none; }
  .gtable, .gtable tbody, .gtable tr, .gtable td { display: block; width: 100%; }
  .gtable tr { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
  .gtable tr:last-child { border-bottom: none; }
  .gtable td { padding: 0; border: none; }
  .gtable td[data-label] { font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
  .gtable td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; }
  .gtable td.who-cell { grid-column: 1; }
  .gtable td.act-cell { grid-column: 2; grid-row: 1; }
}

@media (max-width: 480px) {
  .opt-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .opt-card { padding: 14px; font-size: 14px; }
  .stats-grid { gap: 10px; }
  .stat-tile { padding: 14px; }
}

.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.join-code { color: var(--text); letter-spacing: 0.12em; font-size: 13px; }

/* ---------- Create wizard: step 1 photo picker ---------- */
.acct-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--text); display: grid; place-items: center; color: var(--text); flex-shrink: 0; }
.acct-btn .ic { width: 20px; height: 20px; }
.acct-btn:hover { background: rgba(16, 28, 52, 0.06); }
body.wiz-first .wiz-nav { display: none; }

.wizard.wiz-occasion { max-width: 822px; padding-top: 34px; }
.wiz-occasion .wiz-step-label span:first-child { text-transform: none; letter-spacing: 0; }
.wiz-occasion h1 { font-size: clamp(36px, 5.2vw, 62px); letter-spacing: -0.05em; margin-top: 38px; }
.wiz-occasion .page-sub { font-size: 19px; margin-top: 12px; margin-bottom: 34px; }

/* the photo grid and form run wider than the heading column, centered on the page */
.occ-grid, .occ-below { position: relative; left: 50%; transform: translateX(-50%); }
.occ-grid { width: min(940px, calc(100vw - 40px)); display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px 23px; }
.occ-below { width: min(880px, calc(100vw - 40px)); margin-top: 40px; }
.occ-below .field { margin-top: 0; }
.occ-below .field > span { font-size: 16px; }
.occ-below .input { padding: 18px 22px; font-size: 17px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); }
.occ-next { display: flex; justify-content: flex-end; margin-top: 60px; }
.occ-next .btn { padding: 17px 36px; font-size: 18px; }

.occ-card {
  position: relative; display: block; aspect-ratio: 300 / 166; padding: 0; border: none; border-radius: 16px; overflow: hidden;
  cursor: pointer; background: var(--ink-800); font: inherit; text-align: left; color: #fff;
  box-shadow: 0 10px 26px rgba(16, 28, 52, 0.14); transition: transform 0.15s, box-shadow 0.15s;
}
.occ-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.occ-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 40, 0) 35%, rgba(10, 14, 24, 0.78) 100%); }
.occ-card:hover img { transform: scale(1.04); }
.occ-card:hover { box-shadow: 0 14px 32px rgba(16, 28, 52, 0.2); }
.occ-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.occ-label { position: absolute; left: 20px; right: 16px; bottom: 18px; z-index: 1; display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.occ-label .ic { width: 30px; height: 30px; stroke-width: 1.7; color: #fff; }
.occ-check { position: absolute; top: 15px; right: 14px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); display: none; place-items: center; color: var(--text); }
.occ-check .ic { width: 16px; height: 16px; stroke-width: 3; }
.occ-card.on { box-shadow: 0 0 0 4px var(--gold), 0 0 0 9px rgba(247, 168, 27, 0.22), 0 14px 32px rgba(247, 168, 27, 0.25); }
.occ-card.on .occ-check { display: grid; }

@media (max-width: 900px) {
  .occ-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 700px) {
  .acct-btn { display: none; }
}
@media (max-width: 520px) {
  .occ-grid, .occ-below { width: calc(100vw - 32px); }
  .occ-grid { gap: 12px; }
  .occ-label { left: 12px; bottom: 11px; gap: 8px; font-size: 14px; }
  .occ-label .ic { width: 20px; height: 20px; }
  .occ-check { top: 9px; right: 9px; width: 24px; height: 24px; }
  .occ-next .btn { width: 100%; justify-content: center; }
  .occ-next { margin-top: 32px; }
}
body.wiz-first {
  background: radial-gradient(ellipse 55% 60% at 100% 0%, rgba(247, 168, 27, 0.13), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(247, 168, 27, 0.07), transparent 70%), var(--bg);
}
body.wiz-first .demo-banner { display: none; }
body.wiz-first .app-header { position: static; background: transparent; border-bottom: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.wiz-first .app-header .inner { padding-top: 22px; padding-bottom: 6px; max-width: 1372px; }
body.wiz-first .app-header .logo { font-size: 40px; }
body.wiz-first .app-header nav { gap: 40px; font-size: 16px; }
body.wiz-first .app-header nav a { color: #4a5263; }
.occ-below .field > span .hint { font-size: inherit; font-weight: 500; color: var(--muted); }
@media (max-width: 700px) {
  body.wiz-first .app-header .logo { font-size: 28px; }
}
@media (max-width: 700px) {
  .app-header .acct-btn + .menu-btn { margin-left: auto; }
}

/* ---------- Create wizard: step 2 venue map ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.wiz-venue .demo-banner, body.wiz-when .demo-banner { display: none; }
body.wiz-venue .wiz-nav .inner { max-width: 1355px; }
body.wiz-when .wiz-nav .inner, body.wiz-budget .wiz-nav .inner, body.wiz-details .wiz-nav .inner, body.wiz-review .wiz-nav .inner { max-width: 1055px; }
body.wiz-wide .wiz-nav .btn { padding: 14px 30px; }
.wizard:has(.vx) { max-width: 846px; }
.wizard:has(.vx) h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.05em; margin-top: 28px; }
.wizard:has(.vx) .page-sub { font-size: 19px; margin-top: 6px; margin-bottom: 22px; }

/* full-width breakout, centered on the page */
.vx { position: relative; left: 50%; transform: translateX(-50%); width: min(1355px, calc(100vw - 40px)); }
.vx-bar { display: grid; grid-template-columns: 1fr 340px; gap: 19px; }
.vx-search, .vx-city { position: relative; display: block; }
.vx-search .ic, .vx-city .ic { position: absolute; top: 50%; transform: translateY(-50%); color: var(--text); pointer-events: none; }
.vx-search .ic { left: 17px; width: 21px; height: 21px; color: #4a5263; }
.vx-search .input { padding: 14px 18px 14px 52px; font-size: 16px; background: var(--surface); border-radius: 12px; border: 1.5px solid rgba(16, 28, 52, 0.13); }
.vx-city .ic:first-of-type { left: 16px; width: 20px; height: 20px; }
.vx-city .ic:last-of-type { right: 16px; left: auto; width: 20px; height: 20px; }
.vx-city select { width: 100%; appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--text); background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.55); border-radius: 12px; padding: 13px 44px 13px 48px; cursor: pointer; }
.vx-city select:focus, .vx-search .input:focus { outline: none; border-color: var(--gold); }

.vx-body { position: relative; display: grid; grid-template-columns: minmax(0, 751fr) minmax(0, 582fr); gap: 21px; margin-top: 18px; }
.vx-map-wrap { position: relative; height: 622px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(16, 28, 52, 0.08); background: #ece6dc; }
#vx-map { position: absolute; inset: 0; font-family: inherit; background: #ece6dc; }
#vx-map .leaflet-tile-pane { filter: saturate(0.42) sepia(0.2) brightness(1.06) contrast(0.88); }
#vx-map .leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, 0.75); }

.vx-seg { position: absolute; top: 14px; left: 14px; z-index: 500; display: inline-flex; padding: 4px; gap: 2px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(6px); border-radius: 999px; box-shadow: 0 4px 14px rgba(16, 28, 52, 0.12); }
.vx-seg button { border: none; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); padding: 8px 30px; border-radius: 999px; cursor: pointer; }
.vx-seg button.on { background: var(--surface); box-shadow: 0 2px 8px rgba(16, 28, 52, 0.14); }

.vx-zoom { position: absolute; right: 14px; bottom: 16px; z-index: 500; display: flex; flex-direction: column; gap: 8px; }
.vx-zoom button { width: 42px; height: 40px; border: none; border-radius: 8px; background: var(--surface); box-shadow: 0 3px 10px rgba(16, 28, 52, 0.16); display: grid; place-items: center; cursor: pointer; color: var(--text); }
.vx-zoom button:hover { background: #f6f2ec; }
.vx-zoom button[data-mapact="out"] { margin-top: -8px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.vx-zoom button[data-mapact="in"] { border-radius: 8px 8px 0 0; }
.vx-zoom button[data-mapact="locate"] .ic { transform: rotate(0deg); fill: var(--text); }

/* pins: gold drop with a glass icon, white name label to the right */
.vx-pin-wrap { background: none; border: none; }
.vx-pin { position: relative; width: 38px; height: 46px; cursor: pointer; }
.vx-drop { position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); box-shadow: 0 4px 10px rgba(16, 28, 52, 0.3); display: grid; place-items: center; border: 2px solid #fff; transition: background 0.15s; }
.vx-drop svg { width: 19px; height: 19px; color: #fff; transform: rotate(45deg); }
.vx-name { position: absolute; left: 44px; top: 5px; white-space: nowrap; background: rgba(255, 255, 255, 0.95); color: var(--text); font-weight: 600; font-size: 15px; padding: 4px 10px; border-radius: 6px; box-shadow: 0 2px 8px rgba(16, 28, 52, 0.14); letter-spacing: -0.01em; }
.vx-pin:hover .vx-drop { background: #e8960c; }
.vx-pin.on .vx-drop { background: var(--ink-800); }
.vx-pin.on .vx-drop svg { color: var(--gold-2); }
.vx-pin.on .vx-name { background: var(--ink-800); color: #fff; }

.vx-list { height: 622px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 2px 2px; scrollbar-width: thin; }
.vx-card { display: grid; grid-template-columns: 121px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 8px 14px 8px 12px; background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.09); border-radius: 12px; text-align: left; font: inherit; color: var(--text); cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.vx-card:hover { border-color: rgba(16, 28, 52, 0.25); }
.vx-card.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(247, 168, 27, 0.2); }
.vx-card img { width: 121px; height: 78px; object-fit: cover; border-radius: 6px; }
.vx-info h4 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.vx-info p { color: var(--muted); font-size: 15px; margin-top: 1px; }
.vx-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.vx-tags span { font-size: 12.5px; font-weight: 500; padding: 3px 8px; white-space: nowrap; border-radius: 5px; background: #efebe5; color: #3f4656; }
.vx-tags span.ok { background: #e2f5ea; color: #1a7a47; }
.vx-tags span.req { background: #fdf0d7; color: #9a5b00; }
.vx-card .radio-dot { width: 28px; height: 28px; border-width: 1.5px; margin-right: 0; }
.vx-card.on .radio-dot { border: 8px solid var(--gold); }
.vx-empty { text-align: center; padding: 48px 20px; color: var(--muted); background: var(--surface); border: 1.5px dashed rgba(16, 28, 52, 0.14); border-radius: 12px; }
.vx-empty h3 { color: var(--text); font-size: 18px; margin-top: 10px; }
.vx-empty p { margin: 6px 0 16px; }
.vx-note { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 0 4px; }
.vx .unlisted { margin-top: 16px; }
.vx > .error { margin-top: 12px; }

/* list view: no map, list fills the width */
.vx-body.list-only { grid-template-columns: 1fr; }
.vx-body.list-only .vx-map-wrap { display: none; }
.vx-body.list-only .vx-seg { position: static; justify-self: start; }
.vx-body.list-only .vx-list { height: auto; max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-body.list-only .vx-note, .vx-body.list-only .vx-empty { grid-column: 1 / -1; }

@media (max-width: 1000px) {
  .vx-bar { grid-template-columns: 1fr; gap: 10px; }
  .vx-body { grid-template-columns: 1fr; }
  .vx-map-wrap { height: 380px; }
  .vx-list { height: auto; }
  .vx-body.list-only .vx-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .vx { width: calc(100vw - 32px); }
  .vx-map-wrap { height: 320px; }
  .vx-card { grid-template-columns: 84px 1fr; gap: 12px; padding: 8px; }
  .vx-card img { width: 84px; height: 84px; }
  .vx-card .radio-dot { display: none; }
  .vx-info h4 { font-size: 16px; }
  .vx-info p { font-size: 14px; }
  .vx-tags span { font-size: 12px; padding: 2px 7px; }
  .vx-name { font-size: 13px; left: 40px; }
  .vx-seg button { padding: 7px 22px; font-size: 15px; }
}

/* larger header on the redesigned wizard steps */
body.wiz-wide .app-header .inner { max-width: 1372px; padding-top: 14px; padding-bottom: 14px; }
body.wiz-wide .app-header .logo { font-size: 38px; }
body.wiz-wide .app-header nav { gap: 46px; font-size: 17px; }
body.wiz-wide .app-header nav a { color: #4a5263; }
body.wiz-wide .acct-btn { width: 46px; height: 46px; margin-left: 40px; }
@media (max-width: 700px) {
  body.wiz-wide .app-header .logo { font-size: 28px; }
}

/* ---------- Create wizard: step 3 date & guests ---------- */
/* same width as the cards (992px + 20px gutters) so the heading lines up with them */
.wizard:has(.wg) { max-width: 1032px; }
.wizard:has(.wg) h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.05em; margin-top: 40px; }
.wizard:has(.wg) .page-sub { font-size: 21px; margin-top: 8px; margin-bottom: 40px; }
.wg { position: relative; left: 50%; transform: translateX(-50%); width: min(992px, calc(100vw - 40px)); display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wg-card { position: relative; background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.08); border-radius: 14px; padding: 22px 22px 24px; box-shadow: 0 4px 18px rgba(16, 28, 52, 0.04); }
.wg-card.invalid { border-color: #e3a49b; }
.wg-card .err { display: block; color: #c0392b; font-size: 13px; margin-top: 8px; }
.wg-head { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 600; margin: 2px 0 18px 4px; color: var(--text); }
.wg-head .ic { width: 23px; height: 23px; stroke-width: 1.8; }
.wg-head-l { display: flex; align-items: center; gap: 14px; cursor: pointer; }

.wg-date, .wg-select, .wg-num { position: relative; }
.wg-date { display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 18px; border: 1.5px solid rgba(16, 28, 52, 0.14); border-radius: 10px; background: #faf8f5; font-size: 19px; }
.wg-date:focus-within { border-color: var(--gold); }
.wg-date-text.ph { color: #9aa0ab; }
.wg-date .ic { width: 22px; height: 22px; }
.wg-date input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; }
.wg-date input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

.wg-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wg-pill { height: 54px; border-radius: 999px; border: 1.5px solid rgba(16, 28, 52, 0.12); background: var(--surface); font: inherit; font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.wg-pill:hover { border-color: rgba(16, 28, 52, 0.3); }
.wg-pill.on { background: linear-gradient(180deg, var(--gold-2), var(--gold)); border-color: var(--gold); font-weight: 700; box-shadow: 0 6px 16px rgba(247, 168, 27, 0.32); }
.wg-link { background: none; border: none; padding: 0; margin-top: 12px; font: inherit; font-size: 14px; font-weight: 600; color: var(--gold-ink); cursor: pointer; }
.wg-link:hover { text-decoration: underline; }
.wg-link.inline { margin: 0 0 0 4px; font-size: inherit; }
.wg-custom { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.wg-custom .input { width: auto; padding: 10px 14px; }
.wg-custom .wg-link { margin-top: 0; }

.wg-select select, .wg-num input { height: 58px; padding: 0 20px; font-size: 19px; border-radius: 10px; background: #faf8f5; border: 1.5px solid rgba(16, 28, 52, 0.14); }
.wg-select select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: none; }
.wg-select .ic { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 20px; height: 20px; }
.wg-num input { -moz-appearance: textfield; padding-right: 56px; }
.wg-num input::-webkit-inner-spin-button, .wg-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.wg-step { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; }
.wg-step button { width: 32px; height: 22px; border: none; background: none; display: grid; place-items: center; cursor: pointer; color: var(--text); border-radius: 6px; }
.wg-step button:hover { background: rgba(16, 28, 52, 0.07); }
.wg-step .ic { width: 17px; height: 17px; stroke-width: 2.2; }
.wg-hint { color: var(--muted); font-size: 15px; margin-top: 16px; }

/* the (i) button + popover explaining how guests are added and removed */
.wg-info { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.wg-info:hover, .wg-info.on { background: var(--peach); color: var(--gold-ink); }
.wg-info .ic { width: 20px; height: 20px; }
.wg-pop { position: absolute; z-index: 20; top: 58px; right: 12px; width: min(400px, calc(100vw - 48px)); background: var(--ink-800); color: #dfe4ee; border-radius: 16px; padding: 20px 22px; box-shadow: 0 20px 50px rgba(10, 20, 40, 0.35); font-size: 14px; font-weight: 400; line-height: 1.5; cursor: auto; }
.wg-pop::before { content: ""; position: absolute; top: -7px; right: 20px; width: 14px; height: 14px; background: var(--ink-800); transform: rotate(45deg); border-radius: 2px; }
.wg-pop h4 { color: #fff; font-size: 16px; margin-bottom: 10px; }
.wg-pop ol { list-style: none; counter-reset: g; display: grid; gap: 10px; }
.wg-pop li { counter-increment: g; display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; }
.wg-pop li::before { content: counter(g); grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--text); font-size: 12px; font-weight: 800; display: grid; place-items: center; margin-top: 1px; }
.wg-pop li b { color: #fff; font-weight: 600; display: block; }
.wg-pop p { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ink-line); color: var(--ink-muted); font-size: 13px; }

.wg-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; background: #f5ece5; border-radius: 14px; padding: 22px 24px; margin-top: 18px; font-size: 16px; color: var(--muted); line-height: 1.45; }
.wg-note b { display: block; color: var(--text); font-size: 17px; }
.wg-note-ic { flex-shrink: 0; width: 70px; height: 70px; border-radius: 50%; background: #fbf0dc; display: grid; place-items: center; color: var(--gold); }
.wg-note-ic .ic { width: 34px; height: 34px; stroke-width: 1.8; }

@media (max-width: 860px) {
  .wg { grid-template-columns: 1fr; gap: 14px; }
  .wg-note { margin-top: 4px; }
}
@media (max-width: 520px) {
  .wg { width: calc(100vw - 32px); }
  .wg-times { grid-template-columns: repeat(2, 1fr); }
  .wg-note { gap: 14px; padding: 18px; font-size: 14px; }
  .wg-note-ic { width: 48px; height: 48px; }
  .wg-note-ic .ic { width: 24px; height: 24px; }
  .wg-pop { right: -8px; }
}
body.wiz-when .wiz-nav, body.wiz-budget .wiz-nav, body.wiz-details .wiz-nav, body.wiz-review .wiz-nav { padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
body.wiz-when .wiz-nav .btn, body.wiz-budget .wiz-nav .btn, body.wiz-details .wiz-nav .btn, body.wiz-review .wiz-nav .btn { padding: 16px 30px; font-size: 18px; }
body.wiz-when .wiz-nav .btn-ghost { color: var(--muted); font-weight: 500; font-size: 16px; margin-left: 24px; }
body.wiz-budget .wiz-nav .btn-ghost, body.wiz-details .wiz-nav .btn-ghost { font-size: 17px; margin-left: 24px; }
@media (max-width: 700px) {
  body.wiz-when .wiz-nav .btn { padding: 14px 20px; font-size: 16px; }
  body.wiz-when .wiz-nav .btn-ghost { margin-left: 0; }
}
/* open upward so the fixed bottom bar never covers it */
.wg-pop { top: auto; bottom: calc(100% - 14px); right: 10px; }
.wg-pop::before { top: auto; bottom: -7px; }

/* ---------- Create wizard: step 4 budget ---------- */
.wizard:has(.bx) { max-width: 910px; }
.wizard:has(.bx) h1 { font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -0.045em; margin-top: 34px; }
.wizard:has(.bx) .page-sub { font-size: 17px; margin-top: 8px; margin-bottom: 26px; }
.bx { position: relative; left: 50%; transform: translateX(-50%); width: min(1300px, calc(100vw - 40px)); display: grid; grid-template-columns: minmax(0, 1fr) 428px; gap: 18px; align-items: start; }
.bx-sec { display: grid; grid-template-columns: 38px 1fr; gap: 18px; padding-left: 16px; }
.bx-sec + .bx-sec { margin-top: 40px; }
.bx-num { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--text); font-weight: 800; font-size: 18px; display: grid; place-items: center; margin-top: 2px; }
.bx-sec h2 { font-size: 23px; letter-spacing: -0.025em; }
.bx-opt { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.bx-sec h2 .bx-opt { font-size: 16px; }
.bx-sub { color: var(--muted); font-size: 16px; margin-top: 6px; line-height: 1.45; max-width: 700px; }
.bx-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; max-width: 730px; }
.bx-amt { height: 56px; border-radius: 10px; border: 1.5px solid rgba(16, 28, 52, 0.13); background: var(--surface); font: inherit; font-size: 18px; font-weight: 700; color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.bx-amt:hover { border-color: rgba(16, 28, 52, 0.3); }
.bx-amt.on { background: #fff2d9; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(247, 168, 27, 0.15); }
.bx-custom-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.bx-chip { height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgba(16, 28, 52, 0.13); background: var(--surface); font: inherit; font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer; }
.bx-chip.on { border-color: var(--gold); background: #fff2d9; font-weight: 600; }
.bx-custom { position: relative; width: 170px; }
.bx-custom span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--muted); }
.bx-custom .input { height: 42px; padding: 0 12px 0 28px; background: var(--surface); }
.bx-custom.invalid .input { border-color: #d0412f; }
.bx-sec .notice { max-width: 730px; }

.bx-est { margin-top: 20px; background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.08); border-radius: 16px; padding: 22px 22px 26px; box-shadow: 0 4px 18px rgba(16, 28, 52, 0.04); }
.bx-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.bx-field { display: block; }
.bx-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; margin: 0 0 10px 2px; color: var(--text); }
.bx-label .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.bx-fixed { height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-radius: 10px; background: #f5f2ee; border: 1.5px dashed rgba(16, 28, 52, 0.14); }
.bx-fixed b { font-size: 18px; font-weight: 500; }
.bx-fixed .wg-link { margin: 0; font-size: 14px; }
.bx-price input { height: 52px; font-size: 18px; padding-left: 30px; background: var(--surface); }
.bx-dollar { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; z-index: 1; pointer-events: none; }
.bx-from { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; margin-top: 12px; }
.bx-from .ic { width: 14px; height: 14px; }

.bx-rec { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 22px; margin-top: 18px; background: #fff6e6; border-radius: 12px; padding: 18px 12px 18px 18px; }
.bx-rec > .bx-sub { grid-column: 1 / -1; margin: 0; }
.bx-rec-ic .ic { width: 34px; height: 34px; color: var(--gold); stroke-width: 2.4; }
.bx-rec-amt span { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.bx-rec-amt b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; white-space: nowrap; }
.bx-rec-why { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.bx-use { padding: 11px 20px; font-size: 15px; white-space: nowrap; }
.bx-tip { position: relative; display: inline-grid; place-items: center; cursor: help; color: var(--muted); }
.bx-tip .ic { width: 16px; height: 16px; }
.bx-tip::after { content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px; background: var(--ink-800); color: #e6eaf2; font-size: 12.5px; font-weight: 400; line-height: 1.45; padding: 10px 12px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5; }
.bx-tip:hover::after, .bx-tip:focus::after { opacity: 1; }

.bx-side { display: grid; gap: 18px; }
.bx-card { background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.08); border-radius: 16px; padding: 20px 20px 22px; box-shadow: 0 4px 18px rgba(16, 28, 52, 0.04); }
.bx-card h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; margin-bottom: 16px; }
.bx-card h3 .ic { width: 24px; height: 24px; }
.bx-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: 17px; color: #4a5263; }
.bx-row span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.bx-row.grand { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; font-size: 20px; font-weight: 800; color: var(--text); }
.bx-tag { font-style: normal; font-size: 12.5px; font-weight: 600; background: #fdf0d7; color: #9a5b00; padding: 3px 8px; border-radius: 5px; margin-left: 8px; }

.bx-controls summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 18px; }
.bx-controls summary::-webkit-details-marker { display: none; }
.bx-controls summary > .ic:first-child { width: 24px; height: 24px; }
.bx-controls summary > .ic:last-child { margin-left: auto; width: 20px; height: 20px; transition: transform 0.2s; }
.bx-controls:not([open]) summary > .ic:last-child { transform: rotate(180deg); }
.bx-controls[open] summary { margin-bottom: 8px; }
.bx-controls .field { margin-top: 14px; }
.bx-controls .field > span:first-child { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.bx-controls .money-input { width: 100% !important; }
.bx-controls .money-input .input { height: 40px; padding: 0 12px 0 28px; font-size: 16px; }
.bx-controls .hint { font-size: 12.5px; margin-top: 5px; }
.bx-check { display: grid; grid-template-columns: 18px 1fr; gap: 10px; margin-top: 18px; align-items: start; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.bx-check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--gold); }
.bx-check b { display: block; color: var(--text); font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }

@media (max-width: 1100px) {
  .bx { grid-template-columns: 1fr; max-width: 860px; }
  .bx-rec { grid-template-columns: auto 1fr; }
  .bx-rec-why { grid-column: 1 / -1; }
  .bx-use { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .bx { width: calc(100vw - 32px); }
  .bx-sec { grid-template-columns: 30px 1fr; gap: 12px; padding-left: 0; }
  .bx-num { width: 30px; height: 30px; font-size: 15px; }
  .bx-amounts { grid-template-columns: repeat(2, 1fr); }
  .bx-fields { grid-template-columns: 1fr; gap: 14px; }
  .bx-use { width: 100%; justify-self: stretch; }
}
body.wiz-budget .app-header .inner { padding-top: 10px; padding-bottom: 10px; }
body.wiz-budget .app-header .logo { font-size: 32px; }
.wizard:has(.bx) { padding-top: 26px; }
.wizard:has(.bx) h1 { font-size: clamp(30px, 4vw, 46px); margin-top: 26px; }
.wizard:has(.bx) .page-sub { margin-bottom: 20px; }
.bx-sec + .bx-sec { margin-top: 32px; }
.bx-controls .field { margin-top: 10px; }
.bx-controls .money-input .input { height: 38px; }
.bx-check { margin-top: 14px; }
.bx-rec-ic svg { display: block; width: 32px; height: 32px; fill: var(--gold); }
.bx-sec > div { min-width: 0; }
.wiz-nav .btn-ghost { white-space: nowrap; }
@media (max-width: 700px) {
  body.wiz-budget .wiz-nav .btn { padding: 14px 18px; font-size: 16px; }
  body.wiz-budget .wiz-nav .btn-ghost { margin-left: 0; font-size: 15px; }
}

/* ---------- Create wizard: step 5 host details + invites ---------- */
body.wiz-details .app-header .inner { padding-top: 10px; padding-bottom: 10px; }
body.wiz-details .app-header .logo { font-size: 32px; }
.wizard:has(.hx) { max-width: 904px; padding-top: 22px; }
.wizard:has(.hx) h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.045em; margin-top: 24px; }
.wizard:has(.hx) .page-sub { font-size: 18px; margin-top: 6px; margin-bottom: 22px; }
.hx { position: relative; left: 50%; transform: translateX(-50%); width: min(1150px, calc(100vw - 40px)); display: grid; grid-template-columns: minmax(0, 644fr) minmax(0, 486fr); gap: 20px; align-items: start; }
.hx-main { display: grid; gap: 18px; min-width: 0; }
.hx-card { background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.08); border-radius: 16px; padding: 20px 24px 22px; box-shadow: 0 4px 18px rgba(16, 28, 52, 0.04); }
.hx-card h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; letter-spacing: -0.02em; }
.hx-card h2 .ic { width: 24px; height: 24px; stroke-width: 1.9; }
.hx-sub { color: var(--muted); font-size: 15px; margin-top: 6px; }
.hx-card .field { margin-top: 14px; }
.hx-card .field > span:first-child { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.hx-card .field { position: relative; }
.hx-in { position: absolute; left: 14px; top: 37px; color: var(--text); pointer-events: none; }
.hx-in .ic { width: 19px; height: 19px; stroke-width: 1.8; }
.hx-card .field .input { height: 42px; padding: 0 14px 0 46px; font-size: 15.5px; background: var(--surface); border-radius: 8px; }
.hx-card .grid-2 { gap: 16px; }
.hx-check { display: grid; grid-template-columns: 22px 1fr; gap: 14px; margin-top: 16px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.hx-check input { width: 22px; height: 22px; margin: 0; accent-color: var(--gold); }
.hx-check b { display: block; color: var(--text); font-size: 15px; font-weight: 500; margin-bottom: 2px; }

.hx-seg { display: grid; grid-template-columns: repeat(3, 1fr); background: #f3f0eb; border-radius: 10px; padding: 0; margin-top: 16px; }
.hx-seg button { height: 40px; border: 1.5px solid transparent; background: none; border-radius: 9px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.hx-seg button.on { background: #fff2d9; border-color: var(--gold); font-weight: 600; }
.hx-pane { margin-top: 14px; }
.hx-add { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; }
.hx-add .input { height: 42px; font-size: 15px; background: var(--surface); border-radius: 8px; padding: 0 14px; }
.hx-add-c { position: relative; display: block; }
.hx-add-c .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--text); pointer-events: none; }
.hx-add-c .input { width: 100%; padding-left: 44px; }
.hx-add .btn { height: 42px; padding: 0 26px; font-size: 15.5px; border-radius: 10px; }
.hx-pane .error { margin-top: 6px; min-height: 0; }
.hx-linkbox .link-row .input { height: 42px; color: var(--muted); }
.hx-linkbox .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hx-note { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 13.5px; line-height: 1.5; margin-top: 10px; }
.hx-note .ic { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.hx-empty { color: var(--muted); font-size: 13.5px; margin-top: 14px; }
.hx-list-h { font-size: 14.5px; font-weight: 600; margin-top: 16px; }
.hx-list { list-style: none; margin-top: 6px; }
.hx-list li { display: grid; grid-template-columns: 40px minmax(90px, 140px) 1fr auto 28px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.hx-list .av { width: 40px; height: 40px; margin: 0; border: none; font-size: 15px; }
.hx-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-contact { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-pill { display: inline-flex; align-items: center; gap: 7px; background: #efebe5; color: #3f4656; font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.hx-pill .ic { width: 15px; height: 15px; }
.hx-x { width: 28px; height: 28px; border: none; background: none; border-radius: 6px; display: grid; place-items: center; color: var(--muted); cursor: pointer; }
.hx-x:hover { background: rgba(16, 28, 52, 0.07); color: var(--text); }
.hx-x .ic { width: 16px; height: 16px; }

/* right: peach panel with a live invite preview */
.hx-side { background: radial-gradient(ellipse 80% 60% at 100% 100%, rgba(247, 168, 27, 0.16), transparent 70%), linear-gradient(180deg, #fdf3e6, #fcefdc); border: 1.5px solid rgba(247, 168, 27, 0.14); border-radius: 18px; padding: 24px 22px 24px 26px; min-width: 0; }
.hx-side-head { display: grid; grid-template-columns: 50px 1fr; gap: 22px; }
.hx-side-ic .ic { width: 46px; height: 46px; color: var(--gold); stroke-width: 1.8; }
.hx-side-head h3 { font-size: 19px; letter-spacing: -0.02em; }
.hx-side-head p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-top: 6px; }
.hx-side-body { display: grid; grid-template-columns: 240px 1fr; gap: 22px; margin-top: 20px; align-items: start; }
.hx-phone { width: 240px; background: #1a1a1c; border-radius: 34px; padding: 7px; box-shadow: 0 16px 40px rgba(10, 20, 40, 0.28); }
.hx-screen { background: #fff; border-radius: 28px; overflow: hidden; height: 476px; display: flex; flex-direction: column; font-size: 11.5px; color: #111; }
.hx-status { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px 4px; font-weight: 600; font-size: 11px; background: #f6f6f7; }
.hx-notch { width: 78px; height: 18px; background: #1a1a1c; border-radius: 999px; }
.hx-thread-head { display: grid; justify-items: center; gap: 3px; padding: 4px 0 8px; background: #f6f6f7; border-bottom: 1px solid #e6e6ea; position: relative; }
.hx-back { position: absolute; left: 14px; top: 8px; font-size: 26px; color: #2a7ef6; line-height: 1; }
.hx-av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-800); display: grid; place-items: center; }
.hx-av .logo-o { width: 15px; height: 18px; color: #fff; }
.hx-thread-head small { font-size: 9.5px; color: #333; }
.hx-time { text-align: center; color: #8a8a8f; font-size: 9px; margin: 8px 0 6px; }
.hx-bubble { background: #e9e9eb; border-radius: 14px; padding: 9px 11px; margin: 0 40px 6px 10px; line-height: 1.35; }
.hx-bubble u { color: #2a7ef6; }
.hx-link-card { margin: 0 40px 0 10px; border-radius: 14px; overflow: hidden; background: #e9e9eb; }
.hx-link-card img { display: block; width: 100%; height: 76px; object-fit: cover; }
.hx-link-card div { padding: 7px 10px 2px; }
.hx-link-card b { display: block; font-size: 11px; }
.hx-link-card small { color: #6b6b70; font-size: 9.5px; }
.hx-link-card span { display: block; margin: 7px 10px 9px; background: var(--ink-800); color: #fff; text-align: center; border-radius: 999px; padding: 6px; font-weight: 600; font-size: 11px; }
.hx-compose { margin: auto 10px 12px; display: flex; align-items: center; gap: 8px; }
.hx-compose span { width: 22px; height: 22px; border-radius: 50%; background: #e9e9eb; display: grid; place-items: center; color: #777; font-size: 14px; }
.hx-compose i { flex: 1; border: 1px solid #d8d8dc; border-radius: 999px; padding: 4px 10px; color: #aaa; font-style: normal; font-size: 10px; }
.hx-feats { list-style: none; display: grid; gap: 22px; padding-top: 18px; }
.hx-feats li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.hx-feats li > span { width: 46px; height: 46px; border-radius: 50%; background: #fff8ec; display: grid; place-items: center; color: var(--gold); }
.hx-feats li > span .ic { width: 24px; height: 24px; stroke-width: 1.9; }
.hx-feats b { display: block; color: var(--text); font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }

@media (max-width: 1100px) {
  .hx { grid-template-columns: 1fr; max-width: 700px; }
}
@media (max-width: 620px) {
  .hx { width: calc(100vw - 32px); }
  .hx-card { padding: 18px 16px; }
  .hx-add { grid-template-columns: 1fr auto; }
  .hx-add > .input { grid-column: 1 / -1; }
  .hx-seg button { font-size: 12.5px; }
  .hx-list li { grid-template-columns: 36px 1fr auto 28px; }
  .hx-list .av { width: 36px; height: 36px; }
  .hx-contact { display: none; }
  .hx-side-body { grid-template-columns: 1fr; justify-items: center; }
  .hx-feats { justify-self: stretch; }
}
body.wiz-details .app-header nav, body.wiz-budget .app-header nav, body.wiz-review .app-header nav { gap: 30px; font-size: 15.5px; }
body.wiz-details .acct-btn, body.wiz-budget .acct-btn, body.wiz-review .acct-btn { width: 42px; height: 42px; margin-left: 28px; }
.wizard:has(.hx) h1 { margin-top: 18px; }
.wizard:has(.hx) .page-sub { font-size: 17px; margin-bottom: 18px; }
.hx-card { padding: 18px 24px 18px; }
.hx-card .field { margin-top: 10px; }
.hx-check { margin-top: 14px; }
.hx-seg { margin-top: 14px; }
.hx-list-h { margin-top: 12px; }
.hx-list li { padding: 4px 0; }
.hx-list .av { width: 36px; height: 36px; }
.hx-list li { grid-template-columns: 36px minmax(90px, 140px) 1fr auto 28px; }
.hx-side { padding: 22px 20px 22px 24px; }
.hx-side-body { grid-template-columns: 228px 1fr; gap: 18px; margin-top: 16px; }
.hx-phone { width: 228px; }
.hx-screen { height: 452px; }
.hx-feats { gap: 18px; padding-top: 14px; }
.hx-feats li { grid-template-columns: 40px 1fr; gap: 10px; }
.hx-feats li > span { width: 40px; height: 40px; }
.hx-feats li > span .ic { width: 21px; height: 21px; }

/* ---------- Create wizard: step 6 review + Stripe checkout ---------- */
body.wiz-review .demo-banner { display: none; }
body.wiz-review .app-header .inner { padding-top: 10px; padding-bottom: 10px; }
body.wiz-review .app-header .logo { font-size: 32px; }
body.wiz-review .wiz-nav .btn .ic { width: 18px; height: 18px; }
.wizard:has(.cx) { max-width: 904px; padding-top: 22px; }
.wizard:has(.cx) h1 { font-size: clamp(34px, 4.6vw, 54px); letter-spacing: -0.045em; margin-top: 18px; }
.wizard:has(.cx) .page-sub { font-size: 17px; margin-top: 6px; margin-bottom: 20px; }
.cx-notice { position: relative; left: 50%; transform: translateX(-50%); width: min(1150px, calc(100vw - 40px)); margin: 0 0 16px; }
.cx { position: relative; left: 50%; transform: translateX(-50%); width: min(1150px, calc(100vw - 40px)); display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 20px; align-items: start; }
.cx-main .review { margin-top: 6px; }
.cx-main .review li { padding: 12px 0; font-size: 15.5px; }

.cx-sum { position: sticky; top: 88px; background: var(--surface); border: 1.5px solid rgba(16, 28, 52, 0.08); border-radius: 16px; padding: 20px 22px 22px; box-shadow: 0 10px 30px rgba(16, 28, 52, 0.08); }
.cx-head { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.cx-head img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.cx-head b { display: block; font-size: 17px; letter-spacing: -0.01em; }
.cx-head small { color: var(--muted); font-size: 14px; }
.cx-lines { display: grid; gap: 8px; padding: 16px 0; font-size: 15.5px; color: #4a5263; }
.cx-lines div { display: flex; justify-content: space-between; }
.cx-lines span:last-child { color: var(--text); font-variant-numeric: tabular-nums; }
.cx-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); }
.cx-total span { font-weight: 600; font-size: 16px; }
.cx-total b { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cx-pay { width: 100%; margin-top: 18px; padding: 17px; font-size: 18px; justify-content: center; }
.cx-pay .ic { width: 19px; height: 19px; }
.cx-pay:disabled { opacity: 0.7; cursor: progress; }
.cx-secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.cx-secure .ic { width: 16px; height: 16px; color: #1d7a4c; }
.cx-secure b { color: #635bff; font-weight: 700; }
.cx-methods { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.cx-methods span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #3f4656; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; background: #faf8f5; }
.cx-methods .ic { width: 14px; height: 14px; }
.cx-fine { color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; margin-top: 12px; }
.cx-mode { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #f1efff; color: #4b44c9; font-size: 12.5px; line-height: 1.45; }
.cx-mode .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.cx-wait { text-align: center; padding: 80px 0; }
.cx-wait .ic { width: 44px; height: 44px; color: var(--gold); }
.cx-wait h1 { margin-top: 14px; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 960px) {
  .cx { grid-template-columns: 1fr; max-width: 700px; }
  .cx-sum { position: static; }
}
@media (max-width: 620px) {
  .cx, .cx-notice { width: calc(100vw - 32px); }
  .cx-main .review li { font-size: 14px; }
}

.hx-check a { color: var(--gold-ink); text-decoration: underline; }

/* venue step: what the list is filtered to, and bars that can't take the group */
.vx-when { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff6e6; border: 1px solid #f6dfb0; border-radius: 12px; padding: 11px 16px; margin-bottom: 14px; font-size: 15px; color: #4a5263; }
.vx-when .ic { width: 19px; height: 19px; color: var(--gold-ink); }
.vx-when b { color: var(--text); }
.vx-when .wg-link { margin: 0 0 0 auto; }
.vx-card.off { opacity: 0.62; cursor: not-allowed; }
.vx-card.off:hover { border-color: rgba(16, 28, 52, 0.09); }
.vx-card.off .radio-dot { visibility: hidden; }
.vx-tags span.no { background: #fde8e4; color: #b0322a; }
.vx-hidden { text-align: center; color: var(--muted); font-size: 14px; padding: 6px 0 0; }

/* date step: browse-bars-first entry, and the bar already picked when browsing first */
.wg-browse { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1.5px dashed rgba(16, 28, 52, 0.18); border-radius: 14px; padding: 16px 20px; cursor: pointer; font: inherit; color: var(--text); text-align: left; width: 100%; transition: border-color 0.15s, background 0.15s; }
.wg-browse:hover { border-color: var(--gold); background: #fffaf0; }
.wg-browse > .ic { width: 26px; height: 26px; color: var(--gold-ink); flex-shrink: 0; }
.wg-browse b { display: block; font-size: 16px; }
.wg-browse span { color: var(--muted); font-size: 14.5px; }
.wg-browse .go { margin-left: auto; width: 20px; height: 20px; color: var(--muted); }
.wg-picked { grid-column: 1 / -1; display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; background: #fff6e6; border: 1px solid #f6dfb0; border-radius: 14px; padding: 12px 18px 12px 12px; }
.wg-picked img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.wg-picked b { display: block; font-size: 17px; }
.wg-picked span { color: #4a5263; font-size: 14.5px; }
.wg-picked.bad { background: #fde8e4; border-color: #f1b8ae; }
.wg-picked.bad span { color: #8c2a20; }