:root {
  --brand: #1F3B33; --accent: #F2D7D3; --highlight: #B9935A; --bg: #FFFDFB; --ink: #1C1A19;
  --brand-2: color-mix(in srgb, var(--brand) 82%, white);
  --accent-2: color-mix(in srgb, var(--accent) 45%, var(--bg));
  --muted: color-mix(in srgb, var(--ink) 62%, var(--bg));
  --line: color-mix(in srgb, var(--ink) 12%, var(--bg));
  --ok: #2F6B4F; --warn: #A2552A; --danger: #A3302A;
  --serif: 'Gloock', Georgia, serif; --sans: 'Figtree', system-ui, sans-serif;
  --r: 10px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); }
a { color: var(--brand); }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.35rem; }
h4 { font: 600 .95rem var(--sans); margin: 0 0 .5em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 680px; }
.pad { padding-top: 40px; padding-bottom: 64px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.hint { display: block; font-size: .85rem; color: var(--muted); font-weight: 400; margin-top: 4px; }
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 1.2em 0; }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--brand);
  background: var(--brand); color: #fff; font: 600 1rem var(--sans); text-decoration: none; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--brand-2); }
.btn[disabled] { opacity: .45; cursor: default; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--accent-2); }
.btn-light { background: var(--bg); color: var(--brand); border-color: var(--bg); }
.btn-light:hover { background: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: .9rem; }
.btn-big { padding: 16px 26px; font-size: 1.08rem; width: 100%; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); text-decoration: underline; cursor: pointer; }
.linkish.danger { color: var(--danger); }
label { display: block; font-weight: 600; font-size: .95rem; }
input, textarea, select { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: 400 1rem var(--sans); color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); }
input:focus, textarea:focus, select:focus { border-color: var(--brand); outline: none; }
.stack { display: grid; gap: 18px; }
.inline { display: flex; gap: 8px; align-items: center; }
.inline input { margin: 0; }
.center-inline { justify-content: center; max-width: 360px; margin: 0 auto; }
.check { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.check input { width: auto; margin: 4px 0 0; }
.check .hint { flex-basis: 100%; margin-left: 28px; }
.check > span:not(.hint) { flex: 1 1 0; min-width: 0; }
.prefix-input { display: flex; align-items: stretch; margin-top: 6px; }
.prefix-input span { padding: 11px 10px; background: var(--accent-2); border: 1.5px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.prefix-input input { margin: 0; border-radius: 0 var(--r) var(--r) 0; }
fieldset { border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px; margin: 0; display: grid; gap: 16px; }
fieldset[disabled] { opacity: .55; }
legend { font-weight: 600; padding: 0 6px; }
.alert { padding: 12px 16px; border-radius: var(--r); background: #FBE7E4; color: #7A2620; }
.alert.ok { background: #E4F0E8; color: var(--ok); }
.note { padding: 12px 16px; border-radius: var(--r); background: var(--accent-2); }
.tag { display: inline-block; font: 600 .78rem var(--sans); padding: 2px 10px; border-radius: 999px; background: var(--line); color: var(--muted); margin-left: 8px; vertical-align: middle; }
.tag-ok { background: #DDEDE3; color: var(--ok); }
.tag-warn { background: #F6E3D4; color: var(--warn); }

/* top bar & footer */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 12px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font: 1.35rem var(--serif); color: var(--brand); text-decoration: none; }
.logo svg { width: 26px; height: 26px; }
.menu { display: flex; gap: 20px; align-items: center; }
.menu a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; }
.menu a:not(.btn):hover { color: var(--brand); text-decoration: underline; }
.menu form { margin: 0; }
@media (max-width: 760px) { .menu .hide-sm { display: none; } .menu { gap: 14px; } }
.foot { margin-top: 64px; border-top: 1px solid var(--line); padding: 40px 0 24px; }
.foot-in { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 32px; margin-bottom: 24px; }
.foot a { color: var(--ink); }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } }

/* hero — the scattered prints are the signature element */
.hero { padding: 56px 0 72px; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); color: var(--brand); max-width: 13ch; }
.lede { font-size: 1.18rem; max-width: 34em; }
.prints { position: relative; height: 470px; }
.print { position: absolute; margin: 0; background: #fff; padding: 10px 10px 0; width: 210px; box-shadow: 0 1px 2px rgba(28,26,25,.12), 0 14px 30px -12px rgba(31,59,51,.35); }
.print .shot { aspect-ratio: 4/5; }
.print figcaption { font: italic 400 .95rem var(--sans); color: var(--muted); padding: 8px 2px 10px; }
.p0 { left: 2%; top: 8%; transform: rotate(-7deg); }
.p1 { left: 36%; top: 0; transform: rotate(4deg); z-index: 2; }
.p2 { right: 0; top: 30%; transform: rotate(-3deg); z-index: 3; width: 230px; }
.p3 { left: 12%; top: 46%; transform: rotate(5deg); z-index: 1; width: 180px; }
.p4 { left: 44%; top: 52%; transform: rotate(-9deg); z-index: 4; width: 190px; }
@media (prefers-reduced-motion: no-preference) {
  .print { animation: drop .7s cubic-bezier(.2,.8,.2,1) backwards; }
  .p1 { animation-delay: .12s; } .p2 { animation-delay: .24s; } .p3 { animation-delay: .36s; } .p4 { animation-delay: .48s; }
  @keyframes drop { from { opacity: 0; translate: 0 -40px; } }
}
@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; }
  .prints { height: 340px; margin: 0 -20px; }
  .print { width: 150px; } .p2 { width: 160px; } .p3 { width: 130px; } .p4 { width: 140px; }
}

.band { background: var(--brand); color: var(--bg); padding: 64px 0; }
.band h2 { color: var(--bg); }
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 1px solid rgba(255,253,251,.3); padding-top: 18px; }
.steps li::before { content: counter(s); font: 2.6rem/1 var(--serif); color: var(--accent); display: block; margin-bottom: 14px; }
.steps h3 { color: var(--bg); }
.steps p { color: #D5DFD9; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

.features { padding-top: 72px; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 56px; margin: 28px 0 0; }
.feature-list dt { font: 1.3rem var(--serif); color: var(--brand); margin-bottom: 4px; }
.feature-list dd { margin: 0; color: var(--muted); max-width: 38em; }
@media (max-width: 760px) { .feature-list { grid-template-columns: 1fr; } }

.partner { background: var(--accent); margin-top: 72px; padding: 48px 0; }
.partner-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.partner-in > div { max-width: 640px; }
.partner h2 { color: var(--brand); }
.partner p { margin: 0; }

.pricing { padding-top: 72px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0 20px; align-items: stretch; }
.plan { border: 1.5px solid var(--line); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; background: #fff; }
.plan.featured { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.plan .flag { font-weight: 600; font-size: .88rem; color: var(--highlight); margin-bottom: 8px; }
.plan .price { font: 2.6rem/1 var(--serif); color: var(--brand); margin: 4px 0 8px; }
.plan ul { padding-left: 1.1em; margin: 12px 0 24px; flex: 1; }
.plan li { margin-bottom: 6px; }
.plan .btn { width: 100%; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

.faq { padding-top: 56px; max-width: 800px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { font-weight: 600; cursor: pointer; font-size: 1.05rem; }
.faq details p { margin: 10px 0 0; color: var(--muted); }
.closing { text-align: center; padding-top: 72px; }

/* auth / dashboards */
.auth { max-width: 520px; padding-top: 48px; padding-bottom: 48px; }
.event-list { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.event-list a { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 20px; align-items: center; padding: 18px 20px; border: 1.5px solid var(--line); border-radius: var(--r); text-decoration: none; color: var(--ink); background: #fff; }
.event-list a:hover { border-color: var(--brand); }
.event-list strong { font: 1.2rem var(--serif); color: var(--brand); }
@media (max-width: 600px) { .event-list a { grid-template-columns: 1fr; } }
.empty { padding: 36px; text-align: center; border: 1.5px dashed var(--line); border-radius: var(--r); color: var(--muted); }
.callout { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 24px; background: var(--accent-2); border-radius: var(--r); margin: 20px 0; }
.callout p { margin: 0; font-weight: 600; }
.panel { border: 1.5px solid var(--line); border-radius: 14px; padding: 24px; background: #fff; margin-top: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-2 .panel { margin-top: 20px; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.qr { width: 200px; height: 200px; margin: 8px 0 16px; }
.qr svg { width: 100%; height: 100%; }
.link-box { display: flex; gap: 8px; }
.link-box input { margin: 0; font-size: .92rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 16px; }
.stats.wide { grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }
@media (max-width: 700px) { .stats.wide { grid-template-columns: 1fr 1fr; } }
.stats dt { font-size: .88rem; color: var(--muted); }
.stats dd { margin: 0; font: 1.9rem var(--serif); color: var(--brand); }
.filters { display: flex; gap: 6px; }
.chip { border: 1.5px solid var(--line); background: #fff; padding: 5px 14px; border-radius: 999px; font: 500 .9rem var(--sans); cursor: pointer; }
.chip.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 16px; }
.mod { margin: 0; position: relative; }
.mod-grid .mod > a { display: block; aspect-ratio: 1; background: var(--accent-2); border-radius: 8px; overflow: hidden; position: relative; }
.mod-grid img, .mod-grid video { width: 100%; height: 100%; object-fit: cover; }
.mod .vid { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem; padding: 2px 8px; border-radius: 99px; }
.mod figcaption { display: flex; justify-content: space-between; font-size: .88rem; padding: 6px 2px 0; }
.mod-actions { display: flex; gap: 10px; font-size: .86rem; margin-top: 4px; }
.mod-actions button, .mod-actions a { background: none; border: 0; padding: 0; font: 600 .86rem var(--sans); color: var(--brand); cursor: pointer; text-decoration: underline; }
.mod-actions .danger { color: var(--danger); }
.mod-actions .go { color: var(--ok); }
.mod.is-pending > a, .msg-list .is-pending blockquote { outline: 3px solid var(--highlight); outline-offset: -3px; }
.mod.is-pending figcaption span:first-child::after { content: ' — waiting'; color: var(--warn); }
.msg-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 18px; }
.msg-list blockquote { margin: 0; padding: 14px 16px; background: var(--accent-2); border-radius: 8px; white-space: pre-wrap; }
.msg-list p { margin: 6px 0 0; }
.themes { display: flex; flex-wrap: wrap; gap: 14px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 500; font-size: .85rem; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; }
.swatch span { width: 58px; height: 42px; border-radius: 8px; background: linear-gradient(135deg, var(--sbg) 55%, var(--sac) 55%); border: 2px solid var(--line); }
.swatch input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.swatch input:focus-visible + span { outline: 3px solid var(--highlight); }
.danger-zone { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 16px; }
.danger-zone summary { color: var(--danger); font-weight: 600; cursor: pointer; }
.danger-zone .stack { margin-top: 12px; max-width: 420px; }
.voucher { max-width: 560px; margin: 16px 0 8px; padding: 18px 20px; background: var(--accent-2); border-radius: var(--r); }
.voucher .inline { margin-top: 8px; }
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 16px 0; }
.inline-form label { flex: 1 1 140px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; margin-top: 12px; }
.tbl th, .tbl td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-weight: 600; color: var(--muted); }
.tbl select { margin: 0; padding: 6px 8px; width: auto; }
.prose h1 { margin-top: 40px; }

/* print cards */
.print-page { background: #eee; }
.print-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: #fff; flex-wrap: wrap; }
.print-bar p { margin: 0; }
.print-page .sheet { width: 210mm; height: 297mm; margin: 20px auto; background: #fff; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.print-page .card { border: 1px dashed #ccc; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10mm; }
.card-names { font: 26pt/1.1 var(--serif); color: var(--brand); margin: 0 0 3mm; }
.card-line { font-size: 12pt; margin: 0 0 6mm; }
.card-qr { width: 52mm; height: 52mm; }
.card-qr svg { width: 100%; height: 100%; }
.card-how { font-size: 9.5pt; color: var(--muted); margin: 5mm 0 0; }
@media print { .print-bar { display: none; } .print-page { background: #fff; } .print-page .sheet { margin: 0; } @page { size: A4; margin: 0; } }

/* ---------- guest gallery (themed per event) ---------- */
body.guest { background: var(--g-bg); color: var(--g-ink); }
.guest a { color: var(--g-accent); }
.guest .btn { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-bg); }
.guest .btn-ghost { background: transparent; color: var(--g-ink); border-color: color-mix(in srgb, var(--g-ink) 35%, transparent); }
.guest .linkish { color: var(--g-accent); }
.guest input, .guest textarea { background: var(--g-card); color: var(--g-ink); border-color: color-mix(in srgb, var(--g-ink) 18%, transparent); }
.guest .empty { color: var(--g-muted); border-color: color-mix(in srgb, var(--g-ink) 18%, transparent); }
.guest-wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 48px; }
.g-head { text-align: center; padding: 44px 0 20px; }
.g-date { color: var(--g-muted); margin: 0 0 6px; }
.g-names { font-size: clamp(2.4rem, 9vw, 4.2rem); color: var(--g-ink); margin: 0 0 .25em; }
.g-welcome { max-width: 34em; margin: 0 auto 1em; color: var(--g-muted); }
.g-actions { display: grid; gap: 10px; max-width: 460px; margin: 0 auto 20px; }
.g-upload { cursor: pointer; }
.queue { max-width: 460px; margin: 0 auto; display: grid; gap: 8px; }
.q-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: .9rem; background: var(--g-card); padding: 10px 12px; border-radius: 8px; }
.q-item .bar { grid-column: 1 / -1; height: 4px; background: color-mix(in srgb, var(--g-ink) 12%, transparent); border-radius: 2px; overflow: hidden; }
.q-item .bar i { display: block; height: 100%; width: 0; background: var(--g-accent); transition: width .2s; }
.q-item.done .bar i { width: 100%; }
.q-item .err { color: #B3362C; grid-column: 1 / -1; }
.q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-tabs { display: flex; justify-content: center; gap: 6px; margin: 28px 0 18px; }
.g-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; font: 600 1rem var(--sans); color: var(--g-muted); cursor: pointer; }
.g-tabs button[aria-selected="true"] { color: var(--g-ink); border-color: var(--g-accent); }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
@media (max-width: 480px) { .g-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; } }
.g-tile { aspect-ratio: 1; padding: 0; border: 0; background: color-mix(in srgb, var(--g-ink) 8%, transparent); position: relative; overflow: hidden; cursor: pointer; border-radius: 4px; }
.g-tile img, .g-tile video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.g-tile .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.8rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.g-msgs { columns: 2 280px; column-gap: 14px; }
.g-msg { break-inside: avoid; background: var(--g-card); padding: 18px 20px; border-radius: 10px; margin: 0 0 14px; }
.g-msg p { white-space: pre-wrap; margin: 0 0 10px; }
.g-msg footer { color: var(--g-muted); font-size: .9rem; }
.g-foot { text-align: center; color: var(--g-muted); margin-top: 40px; }
.dlg { border: 0; border-radius: 16px; padding: 28px; width: min(440px, calc(100vw - 32px)); background: var(--g-card); color: var(--g-ink); }
.dlg::backdrop { background: rgba(0,0,0,.45); }
.dlg h2 { font-size: 1.7rem; }
.dlg textarea { resize: vertical; }
.viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: #0d0d0d; color: #fff; }
.viewer[open] { display: grid; grid-template-rows: 1fr auto; }
.v-stage { display: grid; place-items: center; overflow: hidden; padding: 48px 8px 0; }
.v-stage img, .v-stage video { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; }
.v-bar { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 14px; }
.v-bar a, .v-like { color: #fff; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 16px; font: 600 .95rem var(--sans); cursor: pointer; text-decoration: none; }
.v-like.liked { background: #fff; color: #111; }
.v-close, .v-prev, .v-next { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem; cursor: pointer; z-index: 2; }
.v-close { top: 10px; right: 10px; }
.v-prev { left: 10px; top: 45%; } .v-next { right: 10px; top: 45%; }

/* slideshow */
.showbody { overflow: hidden; background: #000; }
.show { position: fixed; inset: 0; background: #000; color: #fff; }
.show-stage, .slide { position: absolute; inset: 0; }
.slide { display: grid; place-items: center; opacity: 0; transition: opacity 1.2s ease; }
.slide.on { opacity: 1; }
.slide img, .slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.show { height: 100vh; height: 100dvh; overflow: hidden; }
.slide.msg { padding: 8vw; }
.slide.msg blockquote { font: clamp(1.6rem, 4vw, 3.4rem)/1.25 var(--serif); margin: 0; text-align: center; max-width: 22ch; }
.slide.msg cite { display: block; font: 400 1.3rem var(--sans); margin-top: 1em; color: #ccc; font-style: normal; }
.show-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: var(--g-bg); color: var(--g-ink); }
.show-empty[hidden] { display: none; }
.show-qr { position: absolute; right: 24px; bottom: 24px; background: #fff; color: #111; padding: 12px 12px 6px; border-radius: 12px; text-align: center; }
.show-qr #showQr { width: 130px; height: 130px; } .show-qr svg { width: 100%; height: 100%; }
.show-qr p { margin: 4px 0 0; font-weight: 600; font-size: .9rem; }
.show-caption { position: absolute; left: 24px; bottom: 24px; margin: 0; font-size: 1.3rem; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.show-fs { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 999px; padding: 8px 16px; font: 600 .9rem var(--sans); cursor: pointer; opacity: 0; transition: opacity .3s; }
.show:hover .show-fs { opacity: 1; }

/* logo image */
.logo img { height: 36px; width: auto; display: block; }
.logo-preview { max-height: 60px; background: var(--accent-2); padding: 8px; border-radius: 8px; }
.stats dd small { font-size: .5em; color: var(--muted); }
.mod.is-uploading > a { opacity: .6; }
.trash-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.trash-list li { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; }
.greeting { padding: 14px 16px; background: var(--accent-2); border-radius: var(--r); margin: 8px 0 18px; }
.greeting audio { width: 100%; max-width: 420px; }
.msg-list audio { width: 100%; max-width: 420px; }

/* admin portal */
.admin { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding-top: 32px; padding-bottom: 64px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; align-self: start; }
.admin-nav a { padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.admin-nav a:hover { background: var(--accent-2); }
.admin-nav a.on { background: var(--brand); color: #fff; }
.admin-main { min-width: 0; }
.admin-main h1 { font-size: 2.2rem; }
@media (max-width: 860px) { .admin { grid-template-columns: 1fr; } .admin-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 6px; } .admin-nav a { white-space: nowrap; } }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 18px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.checks .check { font-weight: 500; }
.plan-edit { background: #fff; }
.narrow-form { max-width: 560px; }
.color-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.color-row input[type=color] { width: 52px; height: 40px; padding: 2px; margin: 0; }
.brand-preview { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.brand-preview span { padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.bp-brand { background: var(--brand); color: #fff; } .bp-accent { background: var(--accent); color: var(--ink); border-radius: 8px !important; } .bp-high { color: var(--highlight); border: 1.5px solid var(--line); }
.alert-list { margin: 0; padding-left: 1.1em; } .alert-list li { margin: 4px 0; }
.action-grid { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.action-grid input[type=number] { width: 90px; }
.mod-quote { margin: 0; padding: 12px; background: var(--accent-2); border-radius: 8px; min-height: 80px; font-size: .92rem; }
.tbl th { white-space: nowrap; }

/* voice recorder & extra guest bits */
.dlg.voice { text-align: center; }
.voice-timer { font: 2.6rem var(--serif); margin: 6px 0; color: var(--g-accent); }
.voice-status { color: var(--g-muted); }
.voice-btns { justify-content: center; }
.dlg audio { width: 100%; margin: 8px 0; }
.recording .voice-timer::before { content: '● '; color: #C0392B; }
.g-voices { display: grid; gap: 10px; max-width: 560px; margin: 0 auto; }
.g-voice { background: var(--g-card); border-radius: 10px; padding: 12px 14px; }
.g-voice audio { width: 100%; }
.g-voice p { margin: 0 0 6px; font-weight: 600; }
.q-item .waiting { grid-column: 1 / -1; color: var(--g-muted); font-size: .82rem; }

.stats dd.small { font: 400 .85rem var(--sans); color: var(--muted); }

/* ======================================================================
   v3 — app-style UI
   ====================================================================== */
:root { --shadow-1: 0 1px 2px rgba(28,26,25,.06), 0 4px 14px -6px rgba(28,26,25,.12); --shadow-2: 0 2px 6px rgba(28,26,25,.06), 0 24px 48px -20px rgba(31,59,51,.35); }
svg { stroke-linecap: round; stroke-linejoin: round; }

/* ---------- guest app shell ---------- */
body.app { min-height: 100dvh; }
.app-shell { max-width: 640px; padding: 0 0 calc(96px + env(safe-area-inset-bottom)); }
.app-bar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--g-bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--g-ink) 8%, transparent); }
.app-title { display: flex; flex-direction: column; min-width: 0; }
.app-names { font: 1.15rem/1.2 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-sub { font-size: .8rem; color: var(--g-muted); }
.avatar { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--g-accent); color: var(--g-bg); font: 600 1rem var(--sans); cursor: pointer; flex: none; }
.app-main { padding: 14px 16px 0; display: grid; gap: 14px; }
.hero-card { text-align: center; background: var(--g-card); border-radius: 22px; padding: 28px 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -18px rgba(0,0,0,.35); }
.hero-card .g-names { font-size: clamp(2.1rem, 9vw, 3.2rem); }
.hero-card .btn-big svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.banner { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 11px 14px; border-radius: 14px; background: var(--g-card); font-size: .92rem; }
.banner.tl { justify-content: space-between; }
.chips-row { overflow: hidden; }
.chips-label { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.guest .chip { flex: none; background: var(--g-card); color: var(--g-ink); border-color: color-mix(in srgb, var(--g-ink) 14%, transparent); }
.guest .chip.on { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-bg); }
.tab-pane { min-height: 30vh; }
.g-grid { border-radius: 14px; overflow: hidden; }
.g-tile { border-radius: 0; }
.t-likes { position: absolute; right: 6px; bottom: 6px; font: 600 .74rem var(--sans); color: #fff; background: rgba(0,0,0,.45); padding: 2px 7px; border-radius: 99px; }

.tabbar { position: fixed; left: 50%; translate: -50% 0; bottom: 0; z-index: 30; width: min(640px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--g-card) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid color-mix(in srgb, var(--g-ink) 9%, transparent); }
.tabbar > button, .tabbar > a { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: 0; padding: 6px 2px; color: var(--g-muted); font: 500 .7rem var(--sans); text-decoration: none; cursor: pointer; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tabbar [aria-selected="true"] { color: var(--g-accent); }
.tabbar b { font-weight: 600; }
.tabbar > .fab, .fab { justify-self: center; width: 58px; height: 58px; margin-top: -26px; border-radius: 50%; border: 4px solid var(--g-bg); background: var(--g-accent); color: var(--g-bg); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -6px rgba(0,0,0,.45); }
.fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* bottom sheets */
.sheet { border: 0; margin: auto auto 0; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); width: min(560px, 100%); max-width: 100%; max-height: 92dvh; overflow: auto;
  border-radius: 22px 22px 0 0; background: var(--g-card, #fff); color: var(--g-ink, var(--ink)); }
.sheet::backdrop { background: rgba(0,0,0,.42); }
@media (prefers-reduced-motion: no-preference) { .sheet[open] { animation: sheetUp .28s cubic-bezier(.2,.8,.2,1); } @keyframes sheetUp { from { translate: 0 40%; opacity: .4; } } }
@media (min-width: 700px) { .sheet { margin: auto; border-radius: 22px; } }
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--g-ink, #000) 20%, transparent); margin: 2px auto 14px; }
.sheet h2 { font-size: 1.55rem; text-align: center; }
.sheet form, .sheet > div:not(.sheet-handle) { display: grid; gap: 12px; }
.sheet .btn-big + .btn-big { margin-top: -2px; }
.sheet-list { display: grid; gap: 8px; margin-bottom: 12px; }
.sheet-item { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--g-ink) 5%, var(--g-card)); color: var(--g-ink); font: inherit; }
.sheet-item:hover { background: color-mix(in srgb, var(--g-accent) 12%, var(--g-card)); }
.sheet-item strong { display: block; font-weight: 600; }
.sheet-item small { display: block; color: var(--g-muted); font-size: .85rem; }
.si-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--g-accent); color: var(--g-bg); }
.si-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.rec { text-align: center; }
.rec video { width: 100%; border-radius: 14px; background: #000; max-height: 46dvh; }
.rec .check { justify-content: center; }
.voice-btns { display: grid; gap: 10px; }
.q-status { font-size: .82rem; color: var(--g-muted); }

/* viewer comments */
.v-bar { flex-wrap: wrap; gap: 10px; }
.v-who { color: #ddd; font-size: .9rem; flex-basis: 100%; text-align: center; }
.v-com, .v-dl { color: #fff; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 6px 16px; font: 600 .95rem var(--sans); cursor: pointer; text-decoration: none; }
.v-comments { position: absolute; left: 0; right: 0; bottom: 0; max-height: 55dvh; overflow: auto; background: #1a1a1a; border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.v-comments ul { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; font-size: .95rem; }
.v-comments input { background: #2a2a2a; color: #fff; border-color: #444; }

/* ---------- couple dashboard (app shell) ---------- */
body.app-dash { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.dash { display: grid; grid-template-columns: 248px 1fr; min-height: calc(100dvh - 65px); }
.dash-side { background: var(--bg); border-right: 1px solid var(--line); padding: 20px 14px; position: sticky; top: 65px; height: calc(100dvh - 65px); overflow: auto; }
.dash-back { display: block; font-size: .88rem; color: var(--muted); text-decoration: none; margin: 0 8px 14px; }
.dash-ev { display: flex; flex-direction: column; padding: 12px; margin-bottom: 12px; border-radius: 14px; background: var(--accent-2); }
.dash-ev strong { font: 1.15rem/1.2 var(--serif); color: var(--brand); font-weight: 400; }
.dash-ev span { font-size: .85rem; color: var(--muted); }
.dash-side nav { display: grid; gap: 2px; }
.dash-side nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.dash-side nav a:hover { background: var(--accent-2); }
.dash-side nav a.on { background: var(--brand); color: #fff; }
.dash-side nav a.ext { color: var(--muted); font-size: .92rem; }
.dash-side nav a.ext:first-of-type { margin-top: 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; padding-top: 16px; }
.dash-side svg, .dash-tabs svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.dash-main { padding: 26px clamp(16px, 3vw, 40px) 80px; min-width: 0; max-width: 1040px; display: grid; gap: 18px; align-content: start; }
.dash-head h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0; }
.dash-main > .panel, .dash-main .grid-2 .panel { margin-top: 0; }
.dash-main .grid-2 { gap: 18px; }
.dash-tabs { display: none; }
.card, .dash-main .panel { background: #fff; border-radius: 18px; padding: 20px 22px; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.card h2, .panel h2 { font-size: 1.45rem; }
.card.stack { gap: 14px; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; }
.stat strong, .stat b { font: 2rem/1.1 var(--serif); font-weight: 400; color: var(--brand); }
.stat span, .stat small { color: var(--muted); font-size: .88rem; }
.list { list-style: none; margin: 4px 0 0; padding: 0; }
.list-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.lr-main { flex: 1 1 220px; min-width: 0; }
.lr-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lr-actions form { margin: 0; }
.lr-actions select { margin: 0; width: auto; padding: 6px 10px; }
.switch { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { position: relative; width: 46px; height: 28px; flex: none; border-radius: 99px; background: var(--line); transition: background .2s; }
.switch span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: translate .2s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::after { translate: 18px 0; }
.switch input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: 2px; }
.sticky-save { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 3%, var(--bg)) 35%); z-index: 5; }
.status-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.status-row .tag { margin-left: 0; }
.table-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.tchip { padding: 6px 12px; border-radius: 12px; background: var(--accent-2); font-size: .9rem; }
.leader { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.leader li { counter-increment: l; display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.leader li::before { content: counter(l); width: 28px; color: var(--highlight); font-weight: 600; }
.leader li strong { flex: 1; font-weight: 500; }
.eyebrowless { margin: 0; }
.settings { display: grid; gap: 16px; }
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-main { padding: 18px 14px calc(96px + env(safe-area-inset-bottom)); }
  .dash-tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .dash-tabs > a, .dash-more > summary { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font: 500 .7rem var(--sans); color: var(--muted); text-decoration: none; cursor: pointer; list-style: none; }
  .dash-more > summary::-webkit-details-marker { display: none; }
  .dash-tabs a.on { color: var(--brand); }
  .dash-more { position: relative; }
  .dash-more > div { position: absolute; right: 4px; bottom: calc(100% + 10px); min-width: 210px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-2); padding: 8px; display: grid; }
  .dash-more > div a { padding: 11px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
  .dash-more > div a:hover { background: var(--accent-2); }
  .app-dash .topbar .menu a:not(.btn) { font-size: .9rem; }
}

/* ---------- wedding website, invitations, seat finder ---------- */
.site-wrap { max-width: 760px; padding-bottom: 64px; }
.site .g-head { padding: 64px 0 28px; }
.countdown { font-size: 1.05rem; color: var(--g-muted); margin: 0 0 16px; }
.countdown strong { font: 2.4rem/1 var(--serif); font-weight: 400; color: var(--g-accent); margin-right: 4px; }
.center-row { justify-content: center; }
.site-nav { position: sticky; top: 0; z-index: 10; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: 0 -16px 8px; padding-inline: 16px;
  background: color-mix(in srgb, var(--g-bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; padding: 7px 14px; border-radius: 99px; background: var(--g-card); color: var(--g-ink); text-decoration: none; font-weight: 500; font-size: .92rem; }
.site-sec { background: var(--g-card); border-radius: 22px; padding: 26px 24px; margin: 14px 0; scroll-margin-top: 64px; }
.site-sec h2 { font-size: 1.9rem; }
.site-sec details { border-bottom: 1px solid color-mix(in srgb, var(--g-ink) 12%, transparent); padding: 12px 0; }
.site-sec summary { font-weight: 600; cursor: pointer; }
.sched { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.sched li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--g-ink) 10%, transparent); }
.sched li:last-child { border-bottom: 0; }
.sched-time { font: 1.15rem var(--serif); color: var(--g-accent); }
.sched.compact { max-width: 360px; margin: 16px auto; text-align: left; }
.sched.compact li { padding: 6px 0; grid-template-columns: 60px 1fr; }
.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.link-list li { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--g-ink) 5%, var(--g-card)); }
.seat-result { font-size: 1.2rem; margin-top: 14px; padding: 16px; text-align: center; border-radius: 14px; background: color-mix(in srgb, var(--g-accent) 14%, var(--g-card)); }
.invite-wrap { max-width: 560px; padding-top: 28px; }
.invite-card { text-align: center; background: var(--g-card); border-radius: 6px; padding: 52px 28px 32px; position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 30px 60px -28px rgba(0,0,0,.45); outline: 1px solid color-mix(in srgb, var(--g-accent) 40%, transparent); outline-offset: -12px; }
@media (prefers-reduced-motion: no-preference) { .invite-card.opening { animation: inviteIn 1s cubic-bezier(.2,.8,.2,1) both; } @keyframes inviteIn { from { opacity: 0; transform: translateY(26px) scale(.97) rotateX(10deg); } } }
.inv-kicker { font-style: italic; color: var(--g-muted); }
.inv-date { font: 1.3rem var(--serif); color: var(--g-accent); margin: 0 0 6px; }
.inv-venue { margin: 0 0 16px; }
.inv-to { font-weight: 600; font-size: .95rem; }
.rsvp-guest { background: color-mix(in srgb, var(--g-ink) 4%, var(--g-card)); border-color: transparent; border-radius: 16px; }
.rsvp-guest legend { font: 1.15rem var(--serif); padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; clear: both; }
.pill-choice { position: relative; display: flex; align-items: center; justify-content: center; padding: 12px; border-radius: 12px; cursor: pointer; text-align: center;
  border: 1.5px solid color-mix(in srgb, var(--g-ink) 18%, transparent); font-weight: 500; }
.pill-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.pill-choice:has(input:checked) { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-bg); }
.pill-choice:has(input:focus-visible) { outline: 3px solid var(--g-accent); outline-offset: 2px; }
.guest select { background: var(--g-card); color: var(--g-ink); border-color: color-mix(in srgb, var(--g-ink) 18%, transparent); }
.guest fieldset { border-color: color-mix(in srgb, var(--g-ink) 14%, transparent); }

/* table plan print */
.plan-sheet { max-width: 1100px; margin: 20px auto; background: #fff; padding: 14mm; text-align: center; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; text-align: left; margin-top: 10mm; }
.plan-table { border: 1px solid #ddd; border-radius: 10px; padding: 12px 14px; break-inside: avoid; }
.plan-table h3 { color: var(--brand); font-size: 1.2rem; }
.plan-table ul { margin: 0; padding: 0; list-style: none; font-size: .95rem; }
@media print { .plan-sheet { margin: 0; padding: 10mm; } .plan-print @page { size: A4 landscape; } }

/* DJ screen */

/* embed widget */
.embed { background: transparent; }
.embed-wrap { padding: 12px; }
.embed-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.embed-head strong { font: 1.3rem var(--serif); font-weight: 400; }

/* host QR panel */
.qr-panel { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qr-panel .qr { margin: 0; }

/* ======================================================================
   Marketing site — premium, quiet, the product mock-ups carry the page
   ====================================================================== */
body.mk { background: var(--bg); font-size: 17px; }
.mk-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.mk-narrow { max-width: 760px; }
.mk-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.5) blur(16px); -webkit-backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.mk-top-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.mk-nav { display: flex; gap: 22px; align-items: center; flex: 1; }
.mk-nav > a, .mk-drop > summary { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .96rem; cursor: pointer; list-style: none; }
.mk-drop > summary::-webkit-details-marker { display: none; }
.mk-drop > summary::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; margin: 0 0 3px 8px; }
.mk-nav > a:hover, .mk-drop > summary:hover { color: var(--brand); }
.mk-drop { position: relative; }
.mk-drop-menu { position: absolute; top: calc(100% + 16px); left: -18px; width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 12px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-2); border: 1px solid var(--line); }
.mk-drop-menu a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; font-weight: 500; }
.mk-drop-menu a:hover { background: var(--accent-2); }
.mk-drop-menu svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--accent-2); fill: none; stroke: var(--brand); stroke-width: 1.8; flex: none; }
.mk-cta { display: flex; gap: 18px; align-items: center; }
.mk-login { color: var(--ink); text-decoration: none; font-weight: 500; }
@media (max-width: 980px) {
  .mk-top-in { flex-wrap: wrap; gap: 6px 18px; padding-block: 10px; }
  .mk-top-in .logo { flex: 1; }
  .mk-nav { order: 3; flex-basis: 100%; overflow-x: auto; gap: 18px; scrollbar-width: none; padding-bottom: 4px; }
  .mk-nav::-webkit-scrollbar { display: none; }
  .mk-nav > a, .mk-drop > summary { white-space: nowrap; font-size: .9rem; }
  .mk-drop { position: static; }
  .mk-drop-menu { position: fixed; left: 12px; right: 12px; top: 104px; width: auto; grid-template-columns: 1fr; }
}
.btn-lg { padding: 15px 28px; font-size: 1.04rem; }
.btn-outline-light { background: transparent; color: var(--bg); border-color: color-mix(in srgb, var(--bg) 55%, transparent); }
.btn-outline-light:hover { background: color-mix(in srgb, var(--bg) 12%, transparent); }
.mk-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }

.mk-hero { padding: 72px 0 88px; overflow: hidden; background:
  radial-gradient(60% 70% at 85% 30%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%),
  radial-gradient(40% 50% at 10% 100%, color-mix(in srgb, var(--highlight) 14%, transparent), transparent 70%); }
.mk-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.mk-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1.04; color: var(--brand); max-width: 14ch; letter-spacing: -.02em; }
.mk-lede { font-size: 1.2rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 80%, var(--bg)); max-width: 33em; }
.mk-hero-art { position: relative; display: grid; place-items: center; min-height: 560px; }
.mk-hero-sm { padding: 56px 0 64px; }
.mk-hero-sm .mk-hero-art { min-height: 480px; }
.mk-hero-sm h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.mk-center { text-align: center; }
.mk-center h1, .mk-center .mk-lede { margin-inline: auto; max-width: 20ch; }
.mk-center .mk-lede { max-width: 36em; }
.mk-crumbs { color: var(--muted); margin-bottom: 18px; }
.mk-crumbs a { color: var(--muted); }
.mk-float { position: absolute; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-2); font-size: .9rem; z-index: 3; }
.mk-float svg { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--brand); stroke: #fff; fill: none; stroke-width: 2; }
.mk-float b { display: block; } .mk-float small { color: var(--muted); }
.mk-float.f1 { left: -4%; top: 22%; } .mk-float.f2 { right: -6%; bottom: 18%; }
@media (prefers-reduced-motion: no-preference) {
  .mk-hero .phone { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
  .mk-float { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; } .f1 { animation-delay: .5s; } .f2 { animation-delay: .8s; }
  @keyframes rise { from { opacity: 0; translate: 0 24px; } }
}
@media (max-width: 900px) {
  .mk-hero { padding: 40px 0 56px; }
  .mk-hero-in { grid-template-columns: 1fr; gap: 28px; }
  .mk-hero-art { min-height: 0; padding: 10px 0 20px; }
  .mk-float.f1 { left: 0; top: 12%; } .mk-float.f2 { right: 0; bottom: 10%; }
}

/* device mock-ups */
.phone { width: 290px; aspect-ratio: 9 / 19; border-radius: 46px; background: #121212; padding: 11px; box-shadow: 0 0 0 1.5px #3a3a3a inset, var(--shadow-2), 0 50px 80px -40px rgba(31,59,51,.55); position: relative; }
.phone-notch { position: absolute; top: 20px; left: 50%; translate: -50% 0; width: 86px; height: 24px; border-radius: 20px; background: #121212; z-index: 2; }
.phone-screen { height: 100%; border-radius: 36px; overflow: hidden; background: var(--bg); position: relative; display: flex; flex-direction: column; font-size: 11px; line-height: 1.35; }
.phone.dim .phone-screen::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 1; }
.pm-bar { display: flex; justify-content: space-between; align-items: center; padding: 50px 16px 10px; }
.pm-bar b { display: block; font: 15px var(--serif); font-weight: 400; color: var(--brand); }
.pm-bar small { color: var(--muted); }
.pm-av { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 600; }
.pm-chips { display: flex; gap: 6px; padding: 4px 12px 10px; overflow: hidden; }
.pm-chips span { flex: none; padding: 5px 10px; border-radius: 99px; background: #fff; border: 1px solid var(--line); }
.pm-chips span.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 10px; flex: 1; align-content: start; }
.pm-grid i { aspect-ratio: 1; border-radius: 3px; }
.pm-grid i:first-child { border-top-left-radius: 12px; } .pm-grid i:nth-child(3) { border-top-right-radius: 12px; }
.pm-tabs { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; padding: 10px 10px 18px; background: #fff; border-top: 1px solid var(--line); }
.pm-tabs i { width: 18px; height: 18px; border-radius: 6px; background: var(--line); }
.pm-tabs i.on { background: var(--brand); }
.pm-fab { width: 42px; height: 42px; margin-top: -22px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 24px; border: 3px solid #fff; }
.pm-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: #fff; border-radius: 22px 22px 0 0; padding: 18px 18px 26px; text-align: center; display: grid; gap: 8px; }
.pm-sheet b { font: 17px var(--serif); font-weight: 400; }
.pm-sheet p { margin: 0; color: var(--muted); }
.pm-wave { display: flex; gap: 3px; align-items: center; justify-content: center; height: 48px; }
.pm-wave i { width: 3px; border-radius: 2px; background: var(--brand); }
.pm-timer { font: 24px var(--serif); color: var(--brand) !important; }
.pm-btn { display: block; padding: 10px; border-radius: 99px; background: var(--brand); color: #fff; font-weight: 600; text-align: center; }
.pm-note { font: italic 13px var(--serif); color: var(--ink) !important; background: var(--accent-2); padding: 14px; border-radius: 12px; }
.pm-check { color: var(--ok) !important; font-weight: 600; }
.pm-site { padding: 62px 18px 18px; text-align: center; display: grid; gap: 10px; align-content: start; height: 100%;
  background: radial-gradient(80% 40% at 50% 0, var(--accent), transparent 70%), var(--bg); }
.pm-site small { color: var(--muted); }
.pm-h { font: 30px/1.05 var(--serif); font-weight: 400; color: var(--brand); }
.pm-site p { margin: 0; }
.pm-count strong { font: 22px var(--serif); font-weight: 400; color: var(--highlight); }
.pm-sched, .pm-rsvp { background: #fff; border-radius: 14px; padding: 6px 12px; text-align: left; box-shadow: var(--shadow-1); }
.pm-sched p { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); margin: 0; }
.pm-sched p:last-child, .pm-rsvp p:last-child { border: 0; }
.pm-sched span { color: var(--highlight); font-weight: 600; width: 34px; }
.pm-rsvp p { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); margin: 0; }
.pm-rsvp span { padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); }
.pm-rsvp span.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.tv { width: min(500px, 100%); }
.tv-screen { aspect-ratio: 16 / 9; border-radius: 10px; border: 10px solid #141414; position: relative; box-shadow: var(--shadow-2); }
.tv-cap { position: absolute; left: 16px; bottom: 14px; color: #fff; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.6); font-size: .9rem; }
.tv-qr { position: absolute; right: 14px; bottom: 14px; width: 62px; height: 62px; background: #fff; border-radius: 8px; padding: 7px; }
.tv-qr i { display: block; width: 100%; height: 100%; background: repeating-conic-gradient(#111 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 2px; }
.tv-stand { width: 34%; height: 14px; margin: 0 auto; background: linear-gradient(#2a2a2a, #111); border-radius: 0 0 8px 8px; }
.laptop { width: min(520px, 100%); }
.laptop-screen { aspect-ratio: 16 / 10; background: #111315; border: 12px solid #222; border-bottom-width: 16px; border-radius: 16px 16px 0 0; overflow: hidden; }
.laptop-base { height: 14px; margin: 0 -6%; background: linear-gradient(#cfcfcf, #9a9a9a); border-radius: 0 0 14px 14px; }
.pm-dj { padding: 16px; display: grid; gap: 8px; color: #F1EFEA; font-size: 13px; }
.pm-dj p { margin: 0; padding: 10px 12px; border-radius: 10px; background: #1B1E21; display: flex; justify-content: space-between; gap: 8px; }
.pm-dj small { color: #9A9DA3; }
.pm-dj .pm-np { background: #F1EFEA; color: #111; }

.mk-strip { border-block: 1px solid var(--line); background: #fff; }
.mk-strip-in { display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding: 18px 24px; font-weight: 500; color: var(--muted); }
.mk-strip-in span { display: flex; gap: 10px; align-items: center; }
.mk-strip-in span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--highlight); }

.mk-sec { padding: 96px 0 0; }
.mk-sec:last-of-type { padding-bottom: 96px; }
.mk-h2 { font-size: clamp(2rem, 4vw, 3rem); color: var(--brand); letter-spacing: -.015em; max-width: 18ch; }
.mk-h3 { font-size: 1.4rem; color: var(--brand); }
.mk-sub { font-size: 1.12rem; color: var(--muted); max-width: 40em; margin-bottom: 36px; }
.mk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mk-card { display: block; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, translate .2s; }
.mk-card:hover { border-color: var(--brand); translate: 0 -2px; }
.mk-card h3 { font-size: 1.3rem; color: var(--brand); margin: 16px 0 6px; }
.mk-card p { margin: 0; color: var(--muted); font-size: .96rem; }
.mk-ic svg { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--accent-2); fill: none; stroke: var(--brand); stroke-width: 1.8; }

.mk-feature { padding: 104px 0 0; }
.mk-feature-in { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mk-feature.rev .mk-feature-art { order: 2; }
.mk-feature-art { display: grid; place-items: center; padding: 48px 20px; border-radius: 32px; background: linear-gradient(160deg, var(--accent-2), color-mix(in srgb, var(--accent) 60%, var(--bg))); }
.mk-feature-copy h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--brand); }
.mk-ticks { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 14px; }
.mk-ticks li { padding-left: 32px; position: relative; color: color-mix(in srgb, var(--ink) 82%, var(--bg)); }
.mk-ticks li::before { content: ''; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.mk-ticks b { color: var(--ink); }
.mk-more { font-weight: 600; color: var(--brand); text-underline-offset: 4px; }
@media (max-width: 900px) { .mk-feature { padding-top: 72px; } .mk-feature-in { grid-template-columns: 1fr; gap: 28px; } .mk-feature.rev .mk-feature-art { order: 0; } .mk-sec { padding-top: 72px; } }

.mk-steps { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.mk-steps li { counter-increment: s; padding: 28px; border-radius: 22px; background: var(--brand); color: color-mix(in srgb, var(--bg) 82%, var(--brand)); }
.mk-steps li::before { content: counter(s); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font: 1.2rem var(--serif); margin-bottom: 20px; }
.mk-steps h3 { color: var(--bg); font-size: 1.5rem; }
.mk-steps p { margin: 0; }
@media (max-width: 800px) { .mk-steps { grid-template-columns: 1fr; } }
.mk-partner { margin-top: 96px; }
.mk-partner-in { display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; padding: 48px; border-radius: 32px; background: var(--brand); color: color-mix(in srgb, var(--bg) 85%, var(--brand)); }
.mk-partner h2 { color: var(--bg); }
.mk-partner p { margin: 0; max-width: 38em; }
.mk-partner-in > div { flex: 1 1 400px; }
@media (max-width: 600px) { .mk-partner-in { padding: 32px 24px; border-radius: 24px; } }
.mk .plans { margin-top: 0; }
.mk .plan { border-radius: 24px; padding: 30px; border-color: var(--line); }
.mk .plan.featured { box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow-2); }
.mk-faq { border-bottom: 1px solid var(--line); padding: 20px 0; }
.mk-faq summary { font-weight: 600; font-size: 1.08rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: '+'; font: 400 1.5rem/1 var(--sans); color: var(--brand); transition: rotate .2s; }
.mk-faq[open] summary::after { rotate: 45deg; }
.mk-faq p { margin: 12px 0 0; color: var(--muted); max-width: 44em; }
.mk-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 48px; }
.mk-points > div { border-top: 1.5px solid var(--brand); padding-top: 20px; }
.mk-points p { color: var(--muted); margin: 0; }
.mk-timeline { list-style: none; padding: 0; margin: 0; counter-reset: t; position: relative; }
.mk-timeline li { counter-increment: t; position: relative; padding: 0 0 36px 64px; }
.mk-timeline li::before { content: counter(t); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font: 1.1rem var(--serif); }
.mk-timeline li:not(:last-child)::after { content: ''; position: absolute; left: 20px; top: 44px; bottom: 4px; width: 1.5px; background: var(--line); }
.mk-timeline p { color: var(--muted); margin: 0; }
.mk-band-cta { margin-top: 96px; padding: 88px 0; background: var(--brand); color: color-mix(in srgb, var(--bg) 82%, var(--brand)); text-align: center;
  background-image: radial-gradient(50% 80% at 50% 0, color-mix(in srgb, var(--highlight) 30%, transparent), transparent 70%); }
.mk-band-cta h2 { color: var(--bg); font-size: clamp(2rem, 4.4vw, 3.2rem); }
.mk-band-cta .mk-btns { justify-content: center; }
.mk-foot { padding: 64px 0 28px; background: #fff; border-top: 1px solid var(--line); }
.mk-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.mk-foot h2 { font: 600 .95rem var(--sans); margin-bottom: 12px; }
.mk-foot-grid > div:not(:first-child) a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; font-size: .95rem; }
.mk-foot-grid a:hover { color: var(--brand); }
.mk-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 800px) { .mk-foot-grid { grid-template-columns: 1fr 1fr; } .mk-foot-grid > div:first-child { grid-column: 1 / -1; } }
.mk .prose h1 { margin-top: 0; color: var(--brand); }
.app-dash .topbar .wrap { max-width: none; }

/* ---------- website editor ---------- */
.publish-card { display: flex; gap: 18px; justify-content: space-between; align-items: center; flex-wrap: wrap; border-left: 5px solid var(--highlight); }
.publish-card.is-live { border-left-color: var(--ok); }
.publish-main { flex: 1 1 320px; min-width: 0; }
.publish-title { font: 1.35rem/1.2 var(--serif); margin: 8px 0 4px; color: var(--brand); }
.publish-main .link-box { margin-top: 8px; max-width: 520px; }
.publish-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pill { display: inline-block; font: 600 .78rem var(--sans); padding: 3px 10px; border-radius: 99px; }
.pill-live { background: #DDEDE3; color: var(--ok); }
.pill-off { background: #F6E3D4; color: var(--warn); }
.seg-tabs { display: flex; gap: 4px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 72px; z-index: 6; box-shadow: var(--shadow-1); }
.seg-tabs::-webkit-scrollbar { display: none; }
.seg-tabs button { flex: 1 0 auto; border: 0; background: none; padding: 9px 14px; border-radius: 10px; font: 600 .9rem var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.seg-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }
@media (max-width: 860px) { .seg-tabs { top: 64px; } }
.field-label { font-weight: 600; font-size: .95rem; margin: 0 0 8px; }
.pw-wrap { display: flex; align-items: stretch; margin-top: 6px; }
.pw-wrap input { margin: 0; border-radius: var(--r) 0 0 var(--r); }
.pw-toggle { border: 1.5px solid var(--line); border-left: 0; background: var(--accent-2); padding: 0 14px; border-radius: 0 var(--r) var(--r) 0; font: 600 .88rem var(--sans); cursor: pointer; color: var(--ink); }
.rep { display: grid; gap: 10px; }
.rep-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--ink) 2%, #fff); }
.rep-fields { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.rep-f { margin: 0; font-weight: 500; font-size: .85rem; color: var(--muted); }
.rep-f input, .rep-f select, .rep-f textarea { margin-top: 4px; font-size: .97rem; }
.rep-cap { display: block; }
.f-time { flex: 0 0 120px; } .f-who { flex: 0 0 180px; } .f-grow { flex: 1 1 180px; } .f-full { flex: 1 1 100%; }
.rep-tools { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; }
.rep-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--muted); }
.rep-btn:hover { border-color: var(--brand); color: var(--brand); }
.rep-btn.rep-del:hover { border-color: var(--danger); color: var(--danger); }
.rep-add { justify-self: start; align-self: flex-start; }
@media (max-width: 600px) { .rep-tools { flex-direction: row; padding-top: 0; } .rep-row { flex-direction: column; } .f-time, .f-who { flex: 1 1 45%; } }
.cover-drop { position: relative; min-height: 160px; border: 2px dashed var(--line); border-radius: 16px; display: grid; place-items: center; overflow: hidden; background: var(--accent-2); }
.cover-drop.has-photo { border-style: solid; aspect-ratio: 16 / 8; }
.cover-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-btn { position: relative; z-index: 1; background: #fff; }
.cover-drop.has-photo .cover-btn { position: absolute; right: 12px; bottom: 12px; }
.cover-remove { position: absolute; left: 14px; bottom: 16px; z-index: 1; background: #fff; padding: 4px 10px; border-radius: 99px; text-decoration: none; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.photo-grid figure { margin: 0; position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--accent-2); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; }
.ph-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 1.1rem; cursor: pointer; }
.ph-add { aspect-ratio: 1; border: 2px dashed var(--line); border-radius: 12px; display: grid; place-content: center; text-align: center; cursor: pointer; color: var(--muted); font-weight: 500; }
.ph-add span { font-size: 2rem; line-height: 1; color: var(--brand); }
.ph-add.is-full { display: none; }
.venue-search { position: relative; }
.venue-results { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 20; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-2); max-height: 340px; overflow: auto; }
.venue-results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; }
.venue-results button:hover, .venue-results button:focus { background: var(--accent-2); }
.venue-results strong { display: block; font-weight: 600; }
.venue-results span { display: block; font-size: .87rem; color: var(--muted); }
.vr-msg { padding: 10px 12px; color: var(--muted); font-size: .9rem; }
.vr-credit { padding: 4px 12px; font-size: .75rem; color: var(--muted); text-align: right; }
.map-preview, .site-map { border-radius: 16px; overflow: hidden; background: var(--accent-2); min-height: 120px; display: grid; place-items: center; }
.map-preview iframe, .site-map iframe { width: 100%; height: 280px; border: 0; display: block; }
.nudge { border-left: 5px solid var(--highlight); }

/* ---------- couple website: cover, photos, map ---------- */
.site-cover { margin: 16px 0 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--g-card); }
.site-cover img { width: 100%; height: 100%; object-fit: cover; }
.site .g-head.has-cover { padding-top: 28px; }
.site-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 16px; }
.site-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.site-map { margin: 12px 0; }
.site-map iframe { height: 300px; }
.dir-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.site-sec .small.muted { margin: 8px 0 6px; }
@media (max-width: 600px) { .site-cover { aspect-ratio: 4 / 3; border-radius: 18px; } }
.btn-sm { white-space: nowrap; }
.ceremony-box { border-top: 1px solid var(--line); padding-top: 16px; }
.ceremony-box h3 { margin: 0; }
/* Basic rich-text editor (website story) */
.rte { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.rte:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight) 30%, transparent); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--bg, #faf8f4); position: sticky; top: 0; }
.rte-bar button { min-width: 36px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; }
.rte-bar button:hover { background: var(--accent-2); }
.rte-bar button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.rte-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.rte-body { min-height: 180px; max-height: 60vh; overflow: auto; padding: 14px 16px; outline: none; line-height: 1.6; }
.rte.is-empty .rte-body::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.rte .rte-body { position: relative; }
.rich > :first-child { margin-top: 0; }
.rich p { margin: 0 0 .8em; }
.rich h3 { margin: 1.1em 0 .4em; font-size: 1.15rem; }
.rich ul, .rich ol { margin: 0 0 .8em; padding-left: 1.4em; }
.rich a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Single-field rows (meal options): keep compact, tools inline */
.rep[data-kind="meals"] { gap: 8px; }
.rep[data-kind="meals"] .rep-row { flex-direction: row; align-items: center; padding: 6px 6px 6px 8px; }
.rep[data-kind="meals"] .rep-row label { flex: 1 1 auto; margin: 0; font-size: 0; }
.rep[data-kind="meals"] .rep-row label input { font-size: 1rem; margin: 0; width: 100%; }
.rep[data-kind="meals"] .rep-tools { flex-direction: row; padding-top: 0; flex: none; }
/* Cover framing */
.cover-frame { position: absolute; inset: 0; cursor: grab; touch-action: none; display: flex; justify-content: center; align-items: flex-start; }
.cover-frame.dragging { cursor: grabbing; }
.cover-frame:focus-visible { outline: 3px solid var(--highlight); outline-offset: -3px; }
.cover-hint { margin-top: 12px; padding: 5px 12px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; font-size: .85rem; pointer-events: none; transition: opacity .2s; }
.cover-frame.dragging .cover-hint { opacity: 0; }
.cover-drop.has-photo .cover-btn, .cover-remove { z-index: 2; }
.cover-phone-wrap { display: flex; gap: 14px; align-items: center; }
.cover-phone { flex: none; width: 96px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 3px solid var(--ink); background: var(--accent-2); }
.cover-phone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-phone-wrap .hint { margin: 0; }
/* Guests: people rows */
.people-field { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.people-field legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.people { display: grid; gap: 8px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--ink) 2%, #fff); }
.person-row .person-name { flex: 1 1 auto; margin: 0; min-width: 0; }
.person-row .person-name input { margin: 0; width: 100%; }
.person-row .person-child, .person-row .person-plus { flex: none; margin: 0; white-space: nowrap; }
.person-row .switch span { width: 40px; height: 24px; }
.person-row .switch span::after { width: 18px; height: 18px; }
.person-row .switch input:checked + span::after { translate: 16px 0; }
@media (max-width: 600px) {
  .person-row { flex-wrap: wrap; row-gap: 6px; }
  .person-row .person-name { flex: 1 1 calc(100% - 50px); }
  .person-row .person-del { order: 2; }
  .person-row .person-child { order: 3; margin-left: 4px; }
  .person-row .person-plus { order: 4; }
}
.rsvp-guest.is-plus { border-style: dashed; }
.steps-list { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.file-pick { justify-self: start; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Music */
.song-list .song-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.song-list .song-row:last-child { border-bottom: 0; }
.song-row .lr-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.song-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.song-note { width: auto; margin: 0; padding: 6px 28px 6px 10px; font-size: .9rem; }
.seg-tabs .count { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: .8em; text-align: center; }
.song-add { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; }
.song-add h3 { margin: 0; }
.song-add .btn { justify-self: start; }
@media (max-width: 600px) { .song-list .song-row { flex-wrap: wrap; } .song-tools { width: 100%; justify-content: flex-end; } }
.song-sheet h2 { margin: 24px 0 8px; font-size: 1.1rem; }
.song-sheet ol { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
/* Guest app: photo challenges */
.ch-card { background: var(--g-card); border-radius: 20px; padding: 14px 14px 10px; border: 1px solid color-mix(in srgb, var(--g-ink) 8%, transparent); }
.ch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.ch-head h2 { margin: 0; font-size: 1.05rem; }
.ch-progress { font-size: .85rem; color: color-mix(in srgb, var(--g-ink) 60%, transparent); white-space: nowrap; }
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--g-ink) 8%, transparent); }
.ch:first-child { border-top: 0; }
.ch-more { display: none; }
.ch-card.show-all .ch-more { display: flex; }
.ch-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--g-ink) 25%, transparent); display: grid; place-items: center; font-size: 14px; color: transparent; transition: background .2s, border-color .2s; }
.ch.done .ch-tick { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-bg); }
.ch.done .ch-tick::before { content: '✓'; }
.ch-text { flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0; padding: 4px 0; font: 500 .98rem var(--sans); color: var(--g-ink); cursor: pointer; }
.ch-text[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.ch.done .ch-text { color: color-mix(in srgb, var(--g-ink) 70%, transparent); }
.ch-count { display: block; font-weight: 400; font-size: .8rem; color: color-mix(in srgb, var(--g-ink) 55%, transparent); }
.ch-count:empty { display: none; }
.ch-go { flex: none; }
.ch.done .ch-go { background: transparent; color: var(--g-ink); border-color: color-mix(in srgb, var(--g-ink) 25%, transparent); }
.ch-all { display: block; margin: 4px auto 2px; font-size: .9rem; }
.ch-row .ch-n { flex: none; white-space: nowrap; }
.app-back { flex: none; width: 38px; height: 38px; margin-left: -6px; border-radius: 50%; display: grid; place-items: center; color: var(--g-ink); }
.app-back:hover { background: color-mix(in srgb, var(--g-ink) 8%, transparent); }
.app-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-bar .app-title { flex: 1 1 auto; }
/* Apps page */
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-card { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.app-card.is-on { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.app-card.is-locked { background: color-mix(in srgb, var(--ink) 3%, #fff); }
.app-card.is-locked .app-ic, .app-card.is-locked strong { opacity: .55; }
.app-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-2); color: var(--brand); }
.app-card.is-on .app-ic { background: var(--brand); color: #fff; }
.app-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-txt { flex: 1 1 auto; min-width: 0; }
.app-txt p { margin: 2px 0 0; font-size: .92rem; color: var(--muted); }
.app-link { display: inline-block; margin-top: 6px; font-size: .9rem; font-weight: 600; }
.app-sw { flex: none; margin-top: 4px; }
.app-card .tag { flex: none; }
.swatch.is-locked { opacity: .5; cursor: not-allowed; }
.swatch i { font-style: normal; font-size: .8em; }
.mini-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 3px solid; vertical-align: -3px; }
.theme-pick { border: 0; padding: 0; margin: 10px 0 0; }
.show-new { display: inline-block; margin-right: 10px; padding: 4px 12px; border-radius: 99px; background: #fff; color: #111; font: 600 .85rem var(--sans); text-shadow: none; vertical-align: 2px; }
@media (prefers-reduced-motion: no-preference) { .show-new { animation: newpop .6s ease-out; } @keyframes newpop { from { transform: scale(.6); opacity: 0; } } }
.slide.msg .show-new { position: absolute; top: 24px; left: 24px; }
.a2hs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 14px; border-radius: 16px; background: var(--g-card); border: 1px solid color-mix(in srgb, var(--g-accent) 40%, transparent); }
.a2hs p { margin: 0; display: grid; gap: 2px; font-size: .92rem; }
.a2hs-btns { display: flex; align-items: center; gap: 12px; }
.ch-board { margin-top: 8px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--g-ink) 8%, transparent); }
.ch-board-title { margin: 0 0 6px; font-weight: 600; font-size: .9rem; }
.ch-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ch-board li { display: flex; align-items: baseline; gap: 8px; font-size: .92rem; }
.ch-board li small { margin-left: auto; color: color-mix(in srgb, var(--g-ink) 55%, transparent); white-space: nowrap; }
.ch-medal { flex: none; }
.show-board { text-align: center; }
.show-board h2 { font: clamp(1.8rem, 4vw, 3rem)/1.2 var(--serif); margin: 0 0 .8em; }
.show-board ol { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: .5em; max-width: 30ch; font: clamp(1.3rem, 2.6vw, 2.1rem)/1.3 var(--sans); text-align: left; }
.show-board li { display: flex; align-items: baseline; gap: .5em; }
.show-board li small { margin-left: auto; padding-left: 1em; color: #bbb; font-size: .65em; white-space: nowrap; }
.show-board p { margin: 1.4em 0 0; color: #bbb; font-size: 1.1rem; }
.tag-up { flex: none; text-decoration: none; background: var(--accent-2); color: var(--brand); font-weight: 600; }
.tr-thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--accent-2); display: grid; place-items: center; }
.tr-thumb img, .tr-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-thumb i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.tr-msg { font: 2.2rem/1 var(--serif); color: var(--brand); }
.tr-audio { width: 220px; max-width: 100%; height: 36px; }
.trash-list li > span:first-of-type { flex: 1 1 160px; min-width: 0; }
/* Package status */
.pkg-status { border-radius: 20px; padding: 20px 22px; margin: 0 0 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, #fff), #fff 70%); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line)); display: grid; gap: 14px; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ps-kicker { margin: 0; font-size: .85rem; font-weight: 600; color: var(--muted); }
.ps-head h2 { margin: 2px 0 0; font-size: 1.5rem; }
.ps-code { font: 500 .8rem var(--sans); color: var(--muted); vertical-align: 4px; }
.ps-pill { flex: none; padding: 5px 12px; border-radius: 99px; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.ps-ok { background: #E3F1E6; color: #1E5B32; } .ps-mid { background: var(--accent-2); color: var(--ink); } .ps-warn { background: #FCEBD7; color: #7A4100; } .ps-off { background: #ECECEC; color: #555; } .ps-wait { background: #EEF0F6; color: #34406B; }
.ps-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-2); }
.ps-note.warn { background: #FCEBD7; }
.ps-dates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ps-dates li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); }
.ps-dates li:first-child { border-top: 0; }
.ps-dates li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); background: #fff; }
.ps-dates li.past::before { background: color-mix(in srgb, var(--brand) 45%, transparent); }
.ps-dates li.next::before { background: var(--highlight); border-color: var(--highlight); box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight) 25%, transparent); }
.ps-dates li.past .ps-label, .ps-dates li.past .ps-val { color: var(--muted); }
.ps-label { color: var(--muted); }
.ps-val { font-weight: 600; text-align: right; }
.ps-val em { font-style: normal; font-weight: 600; font-size: .8rem; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--highlight) 20%, #fff); color: #6B4E1E; }
.ps-link { font-weight: 400; font-size: .85rem; margin-left: 6px; }
.ps-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-actions form { margin: 0; }
.ps-foot { margin: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 600px) { .ps-val { text-align: left; } }
/* Centre the couple's dashboard like the rest of the site (sidebar + content in one centred column) */
.dash { max-width: 1080px; margin: 0 auto; }
.app-dash .topbar .wrap { max-width: 1120px; }
.dash-main { max-width: none; }
@media (min-width: 1081px) { .dash-side { border-left: 1px solid var(--line); } }
/* Admin: emails */
.email-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.email-prev iframe, .email-frame { width: 100%; height: 560px; border: 1px solid var(--line); border-radius: 12px; background: #f4f2ee; }
.email-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.email-tbl td { vertical-align: top; }
.email-brand input[type=color] { height: 44px; padding: 4px; }
@media (max-width: 900px) { .email-brand, .email-edit { grid-template-columns: 1fr; } }
.tag-bad { background: #FBE3E1; color: #9B2C1F; }

/* Files page */
.f-jumps{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.25rem}
.f-jump{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border:1px solid var(--line,#e3ded6);border-radius:999px;background:var(--card,#fff);color:inherit;text-decoration:none;font-size:.9rem}
.f-jump:hover{border-color:var(--brand,#1F3B33)}
.f-jump b{font-weight:600;background:var(--soft,#f1eee8);border-radius:999px;padding:0 .45rem;font-size:.8rem}
.f-jump.is-locked{opacity:.65}
.f-jump i{font-style:normal;font-size:.8rem}
.f-count{font-size:.85rem;font-weight:500;color:var(--muted,#6b665f);background:var(--soft,#f1eee8);border-radius:999px;padding:.1rem .55rem;vertical-align:middle;margin-left:.3rem}
.f-sec{scroll-margin-top:1rem}
.f-sec.is-locked{background:var(--soft,#f7f5f1);border-style:dashed}
.f-sec.is-locked h2{color:var(--muted,#6b665f)}
.f-off{background:#FFF6E0;border-radius:8px;padding:.6rem .8rem;font-size:.9rem;margin:0 0 1rem}
.f-tools{margin:0 0 .75rem}
.f-backup-grid{gap:1.5rem}
.f-backup-grid h3{font-size:1rem;margin:0 0 .4rem}
.f-backup .grid-2{margin:0}

/* Free trial + billing */
.trial-card{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 26px;margin:24px 0 8px;border-radius:14px;background:var(--accent-2,#F7ECE8);border:1.5px solid var(--brand,#1F3B33)}
.trial-card h2{margin:0 0 6px;font-size:1.35rem}
.trial-card p{margin:0 0 6px;max-width:62ch}
.trial-card > div{flex:1 1 360px}
.trial-why{flex:1 1 240px;margin:0;font-weight:600;color:var(--muted,#6b665f)}
.bill-trial{border:1.5px solid var(--brand,#1F3B33)}
.bill-trial.is-due{border-color:#B4532A;background:#FFF8F2}
.bill-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:6px 0 14px}
.bill-facts dt{font-size:.85rem;color:var(--muted,#6b665f)}
.bill-facts dd{margin:2px 0 0;font-weight:600}
.bill-facts small{font-weight:400;color:var(--muted,#6b665f)}
.bill-table{width:100%;border-collapse:collapse}
.bill-table th,.bill-table td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line,#e3ded6);vertical-align:top}
.bill-table .num{text-align:right;white-space:nowrap}

/* Partners */
.foot-base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.powered{margin:0}
.powered a{color:inherit}
.await-box{background:var(--accent-2,#F7ECE8);border-radius:12px;padding:14px 16px;margin:0 0 12px}
.await-box p{margin:0 0 8px}
.bank-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:8px 0}
.bank-dl dt{font-size:.82rem;color:var(--muted)}
.bank-dl dd{margin:2px 0 0;font-weight:600;font-variant-numeric:tabular-nums}

/* Admin packages list */
.pkg-list{list-style:none;padding:0;margin:0 0 20px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.pkg-row{display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.pkg-row:last-child{border-bottom:0}
.pkg-row.is-off .pkg-main,.pkg-row.is-off .pkg-price{opacity:.55}
.pkg-main{display:flex;flex-direction:column;gap:3px;color:inherit;text-decoration:none;min-width:0}
.pkg-main:hover .pkg-name{text-decoration:underline}
.pkg-name{font-weight:600;font-size:1.05rem}
.pkg-sum{font-size:.88rem;color:var(--muted)}
.pkg-price{font:1.3rem var(--serif);color:var(--brand);white-space:nowrap}
.pkg-sale{display:flex;align-items:center;gap:8px;margin:0}
.callout-note{background:#FFF6E0;border-radius:8px;padding:10px 12px;font-size:.92rem}
.plan-trial{color:var(--ok,#1E5B32);font-weight:600;margin:-12px 0 16px}
.plan .btn + .btn{margin-top:8px}
@media (max-width:700px){.pkg-row{grid-template-columns:1fr auto;}.pkg-sale{grid-column:1}}
.pp-hero{padding:56px 0 24px}
.pp-hero h1{max-width:20ch;margin:0 0 14px}
.pp-hero .lede{max-width:60ch}
.pp-name{font-weight:600;margin:0 0 12px;padding:0 12px}
.pp-name span{display:block;font-weight:400;font-size:.85rem;color:var(--muted)}
.pp-usage-top{margin-bottom:8px}
.pp-bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.pp-bar span{display:block;height:100%;background:var(--brand)}
.pp-logo{max-height:64px;max-width:240px}
.pp-plans .plan{cursor:pointer}
.pp-plans .plan input{position:absolute;opacity:0}
.plan .price small{font-size:1rem;color:var(--muted)}
.warn-callout{background:#FFF1E6}

/* Sign-in security */
.narrow{max-width:760px}
.sec-status{padding:12px 16px;border-radius:12px;background:#FFF6E0}
.sec-status.is-on{background:#E4F1E8}
.backup-codes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;font-size:1.1rem}
.backup-codes code{letter-spacing:.05em}
.codes-panel{border:2px solid var(--brand)}
.totp-setup{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.totp-qr svg{width:180px;height:180px;display:block}
.totp-key{font-size:1rem;word-break:break-all}
.or{text-align:center;color:var(--muted);margin:16px 0}
.btn-block{width:100%}
@media print{.topbar,.foot,.sec-page>*:not(.codes-panel){display:none}}

/* Help guide + support */
.guide{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start;margin-top:20px}
.guide-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:6px;font-size:.92rem;border-left:2px solid var(--line);padding-left:14px}
.guide-toc a{color:inherit}
.guide-sec{scroll-margin-top:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.guide-sec h2{font-size:1.35rem}
.guide-sec li{margin-bottom:6px}
.tip{background:var(--accent-2,#F7ECE8);border-radius:10px;padding:10px 14px}
@media (max-width:860px){.guide{grid-template-columns:1fr}.guide-toc{position:static}}
.thread{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:12px}
.msg{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:#fff;max-width:85%}
.msg.is-staff{align-self:flex-end;background:var(--accent-2,#F7ECE8)}
.msg-head{margin:0 0 6px}
.msg-body{white-space:normal;line-height:1.55}
.nav-count{display:inline-block;min-width:20px;padding:0 6px;border-radius:99px;background:#B4532A;color:#fff;font-size:.75rem;text-align:center;margin-left:4px}
.row-new td{background:#FFF6E0}
.chip{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:99px;margin:0 6px 6px 0;color:inherit;text-decoration:none;font-size:.9rem}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.guide-peek{margin-top:24px}

/* Footer (site, dashboards, partner pages) */
.foot{margin-top:64px;background:var(--brand);color:#fff;padding:48px 0 0}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .logo{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px}
.foot-brand p{opacity:.8;margin:10px 0 0;max-width:30ch}
.foot-col{display:flex;flex-direction:column;gap:10px}
.foot-col h4{margin:0 0 4px;font:600 .82rem var(--sans);letter-spacing:.02em;color:var(--accent);text-transform:none}
.foot-col p{margin:0}
.foot-col a span{display:block;font-size:.85rem;opacity:.7}
.foot-note{font-size:.85rem;opacity:.7}
.foot-bar{border-top:1px solid rgba(255,255,255,.15);padding:16px 0;font-size:.85rem}
.foot-bar-in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;opacity:.85}
.foot-legal{display:flex;gap:18px}
.foot .powered{margin:0}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
/* Guest pages footer (couple's theme colours) */
.g-footer{text-align:center;color:var(--g-muted);margin:48px auto 24px;padding:24px 16px 0;border-top:1px solid color-mix(in srgb, var(--g-muted) 25%, transparent);max-width:560px;font-size:.88rem}
.g-footer a{color:var(--g-ink)}
.g-footer-brand{margin:0 0 10px;font-size:.95rem}
.g-footer-brand a{font-weight:600;text-decoration:none}
.g-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px}
.g-footer-note{margin:0 0 8px;font-size:.8rem}
.g-footer-powered{margin:0;font-size:.78rem;opacity:.8}
.foot-col a,.foot-col p{font-size:.95rem}

/* Super Admin partner management */
.imp-bar{position:sticky;top:0;z-index:50;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 16px;background:#B4532A;color:#fff;font-size:.92rem}
.imp-bar form{margin:0}
.imp-bar .btn{background:#fff;color:#B4532A;border-color:#fff}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.tile-n{font:1.5rem var(--serif);color:var(--brand)}
.tile-l{font-size:.85rem;color:var(--muted)}
.pa-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start}
.pa-head h2{margin:0}
.tabs-row{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:16px 0 20px}
.tabs-row a{padding:8px 14px;color:inherit;text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.95rem}
.tabs-row a.on{border-bottom-color:var(--brand);font-weight:600}
.bar{display:inline-block;width:140px;height:8px;background:var(--line);border-radius:99px;overflow:hidden;vertical-align:middle}
.bar span{display:block;height:100%;background:var(--brand)}
.row-actions{white-space:nowrap}
.row-actions .linkish,.row-actions form{margin-right:8px}
.inline-details{display:inline-block}
.inline-details summary{list-style:none;cursor:pointer;display:inline}
.inline-details[open] form{display:flex;gap:6px;margin-top:6px}
.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.feature-row{align-items:flex-start}
.feature-row span .hint{display:block}
.pkg-price small{font-size:.8rem;color:var(--muted)}
.feature-row{display:flex !important;gap:10px;align-items:flex-start}
.feature-row input{flex:none;margin-top:4px}
.feature-row > span{display:flex;flex-direction:column}

/* ---- Marketing site v2 ---- */
.mk-kicker { font-weight: 600; color: var(--highlight); margin: 0 0 14px; font-size: .95rem; }
.mk-sec-tight { padding-top: 40px; }
.mk-mega { width: 760px; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; left: -120px; }
.mk-mega > div { display: grid; gap: 2px; align-content: start; }
.mk-mega-h { margin: 4px 12px 6px; font-weight: 600; font-size: .85rem; color: var(--muted); }
.mk-mega a { padding: 8px 10px; font-size: .94rem; }
.mk-mega svg { width: 30px; height: 30px; padding: 6px; }
.mk-drop-sm { width: 360px; grid-template-columns: 1fr; }
.mk-drop-sm b { display: block; } .mk-drop-sm small { display: block; color: var(--muted); font-weight: 400; font-size: .85rem; }
@media (max-width: 900px) { .mk-mega, .mk-drop-sm { width: auto; grid-template-columns: 1fr; left: 12px; max-height: 70vh; overflow-y: auto; } }
.mk-hero-copy { min-width: 0; }
.mk-float.f3 { left: 2%; bottom: 6%; }
@media (prefers-reduced-motion: no-preference) { .f3 { animation-delay: 1s; } }
@media (max-width: 900px) { .mk-float.f3 { display: none; } }
.mk-foot-h2b { margin-top: 22px; }

/* Before / on the day / after */
.mk-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mk-phase { padding: 26px 22px; border-radius: 26px; background: #fff; border: 1px solid var(--line); }
.mk-phase:nth-child(2) { background: var(--brand); border-color: var(--brand); }
.mk-phase:nth-child(2) .mk-phase-h b, .mk-phase:nth-child(2) .mk-phase-list b { color: var(--bg); }
.mk-phase:nth-child(2) .mk-phase-h span, .mk-phase:nth-child(2) .mk-phase-list small { color: color-mix(in srgb, var(--bg) 72%, var(--brand)); }
.mk-phase:nth-child(2) .mk-phase-list a:hover { background: color-mix(in srgb, var(--bg) 10%, var(--brand)); }
.mk-phase:nth-child(2) svg { background: color-mix(in srgb, var(--bg) 14%, var(--brand)); stroke: var(--accent); }
.mk-phase-h { margin: 0 0 16px; } .mk-phase-h b { display: block; font: 1.6rem var(--serif); color: var(--brand); } .mk-phase-h span { color: var(--muted); }
.mk-phase-list { display: grid; gap: 4px; }
.mk-phase-list a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; margin: 0 -10px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.mk-phase-list a:hover { background: var(--accent-2); }
.mk-phase-list svg { width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: var(--accent-2); fill: none; stroke: var(--brand); stroke-width: 1.8; flex: none; }
.mk-phase-list b { display: block; color: var(--ink); } .mk-phase-list small { display: block; color: var(--muted); font-size: .9rem; line-height: 1.4; }
@media (max-width: 900px) { .mk-phases { grid-template-columns: 1fr; } }

/* Themes */
.mk-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.mk-theme { display: grid; gap: 8px; font-weight: 500; font-size: .92rem; text-align: center; }
.mk-theme-sw { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; background: var(--tb); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.mk-theme-sw b { font: 1.7rem var(--serif); color: var(--ti); position: relative; }
.mk-theme-sw i { position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: var(--ta); }

/* Keep forever */
.mk-keep { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.keep-mock { display: grid; gap: 12px; width: min(380px, 100%); }
.keep-card { background: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: var(--shadow-2); display: grid; gap: 6px; }
.keep-card b { font: 1.2rem var(--serif); color: var(--brand); font-weight: 400; } .keep-card small { color: var(--muted); }
.keep-card .pm-btn { justify-self: start; padding: 9px 18px; margin-top: 6px; }
.keep-card:nth-child(2) { margin-left: 28px; } .keep-card:nth-child(3) { margin-right: 28px; }
.keep-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.keep-row i { aspect-ratio: 1; border-radius: 8px; }
@media (max-width: 900px) { .mk-keep { grid-template-columns: 1fr; gap: 28px; } }

/* For businesses */
.mk-biz-in { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mk-biz-card { display: grid; gap: 8px; align-content: start; padding: 32px; border-radius: 28px; background: var(--accent-2); color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color .2s; }
.mk-biz-card:hover { border-color: var(--brand); }
.mk-biz-card svg { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: #fff; fill: none; stroke: var(--brand); stroke-width: 1.8; }
.mk-biz-card h3 { font-size: 1.5rem; color: var(--brand); margin: 8px 0 0; } .mk-biz-card p { margin: 0 0 6px; color: color-mix(in srgb, var(--ink) 78%, var(--bg)); }
@media (max-width: 800px) { .mk-biz-in { grid-template-columns: 1fr; } }

/* Pricing comparison */
.cmp-wrap { overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); background: #fff; }
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp tbody th { text-align: left; font-weight: 500; }
.cmp thead th { font: 1.2rem var(--serif); color: var(--brand); vertical-align: bottom; }
.cmp thead th span { display: block; font: 600 .95rem var(--sans); color: var(--ink); margin-top: 4px; }
.cmp tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--accent-2) 40%, #fff); }
.cmp-y { color: var(--ok); font-weight: 700; } .cmp-n { color: var(--muted); }
.mk-extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mk-extras > div { padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.mk-extras h3 { font-size: 1.2rem; color: var(--brand); margin: 0; } .mk-extras p { margin: 6px 0 0; color: var(--muted); }
.mk-extras .mk-extra-price { font: 1.6rem var(--serif); color: var(--ink); }
@media (max-width: 800px) { .mk-extras { grid-template-columns: 1fr; } }
.mk-phase-title { margin-top: 48px; } .mk-phase-title:first-child { margin-top: 0; }
.mk-faq-group { margin: 40px 0 8px; } .mk-faq-group:first-child { margin-top: 0; }

/* New phone mocks */
.pm-tight { padding-top: 6px; gap: 8px; height: auto; }
.pm-ch span { width: 18px; color: var(--muted); } .pm-ch span.ok { color: var(--ok); }
.pm-board { background: #fff; border-radius: 14px; padding: 8px 12px; text-align: left; box-shadow: var(--shadow-1); display: grid; gap: 8px; }
.pm-board p { margin: 0; display: grid; gap: 4px; } .pm-board i { display: block; height: 6px; border-radius: 6px; background: var(--highlight); }
.seat-mock { width: min(420px, 100%); background: #fff; border-radius: 26px; padding: 22px; box-shadow: var(--shadow-2); display: grid; gap: 16px; }
.seat-head { display: flex; justify-content: space-between; align-items: baseline; } .seat-head b { font: 1.3rem var(--serif); color: var(--brand); font-weight: 400; } .seat-head small { color: var(--muted); }
.seat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.seat-t { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.seat-c { width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--accent-2); display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: var(--brand); text-align: center; line-height: 1.1; padding: 4px; }
.seat-t i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--line); transform: rotate(var(--a)) translateY(-210%); }
.seat-t i.on { background: var(--brand); }
.seat-find { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--brand); color: var(--bg); font-size: .9rem; }
.seat-find span { opacity: .75; }
.mk-phase-keep { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.mk-phase-keep .keep-row { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mk-phase-keep p { margin: 14px 0 0; color: var(--muted); font-size: .92rem; } .mk-phase-keep b { color: var(--ink); }
.mk-phase { display: flex; flex-direction: column; }
.mk-duo .phone:first-child { position: absolute; width: 250px; left: 2%; top: 9%; rotate: -7deg; opacity: .97; }
.mk-duo .phone:nth-child(2) { position: relative; left: 16%; rotate: 3deg; z-index: 1; }
.mk-duo .mk-float { z-index: 3; }
.mk-duo .mk-float.f1 { left: auto; right: -4%; top: 16%; } .mk-duo .mk-float.f2 { right: auto; left: -2%; bottom: 14%; } .mk-duo .mk-float.f3 { left: auto; right: 0; bottom: 4%; }
@media (max-width: 900px) { .mk-duo .phone:first-child { display: none; } .mk-duo .phone:nth-child(2) { left: 0; rotate: 0deg; } .mk-duo .mk-float.f1 { right: 0; } .mk-duo .mk-float.f2 { left: 0; } }
.seat-t i { transform: rotate(var(--a)) translateY(-330%); }
.mk-legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (min-width: 1100px) { .mk-cards-5 { grid-template-columns: repeat(5, 1fr); } }
.cmp tbody th { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 170px; }
.cmp tbody tr:nth-child(odd) th { background: color-mix(in srgb, var(--accent-2) 40%, #fff); }
@media (max-width: 600px) { .cmp th, .cmp td { padding: 12px; } }
.resend-form { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.resend-form input { min-width: 0; width: 210px; padding: 6px 10px; font-size: .9rem; }
.failed-mail { border-color: color-mix(in srgb, var(--bad, #b3261e) 35%, var(--line)); }
.price-in { width: 130px; display: inline-block; margin-left: 8px; padding: 6px 10px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel-head h2 { margin: 0; }
.ce-rule { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.ce-rule legend { font-weight: 600; padding: 0 6px; }
.ce-when { display: grid; grid-template-columns: 90px 110px 1fr; gap: 10px; align-items: end; }
.ce-who { margin: 0; padding-left: 18px; max-height: 260px; overflow: auto; }
@media (max-width: 600px) { .ce-when { grid-template-columns: 1fr 1fr; } }

/* Rich-text editor */
.rte { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; margin-top: 6px; }
.rte:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.rte-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 5px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent-2) 45%, #fff); }
.rte-bar button { font: 500 .82rem var(--sans); padding: 5px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--ink); cursor: pointer; min-width: 30px; }
.rte-bar button:hover, .rte-bar button:focus-visible { background: #fff; outline: none; box-shadow: inset 0 0 0 1px var(--line); }
.rte-area { min-height: 96px; max-height: 520px; overflow: auto; padding: 10px 14px; font-weight: 400; line-height: 1.55; outline: none; }
.rte-inline .rte-area { min-height: 0; white-space: nowrap; overflow-x: auto; }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rte-area p { margin: 0 0 .7em; } .rte-area h2 { font-size: 1.2rem; margin: .4em 0; } .rte-area ul, .rte-area ol { margin: 0 0 .7em; padding-left: 22px; }
.rte-area a { color: var(--brand); }
/* Content form */
.content-form .panel { margin: 0; }
.faq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; background: #fff; }
.faq-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.faq-n { font-weight: 600; font-size: .9rem; color: var(--muted); }
.faq-tools { display: flex; gap: 4px; }
.sticky-save { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); z-index: 5; }
.ann-bar { display: block; text-align: center; padding: 9px 16px; background: var(--brand); color: var(--bg); font-size: .92rem; text-decoration: none; }
.ann-bar a, a.ann-bar:hover { color: var(--bg); text-decoration: underline; }
.mk-faq-a > :first-child { margin-top: 0; } .mk-faq-a p { margin: 0 0 .7em; } .mk-faq-a ul { padding-left: 20px; }
.mk-lede p { margin: 0 0 .6em; } .mk-lede p:last-child { margin-bottom: 0; }
.mk-partner-text p { margin: 0; } .pp-note p { margin: 0; } .pp-about .prose { max-width: 70ch; }
.lede p { margin: 0 0 .6em; }
.admin-nav-h { margin: 18px 12px 4px; font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; border-top: 1px solid var(--line); padding-top: 14px; }
.perm-group { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 0 0 12px; display: grid; gap: 2px; }
.perm-group legend { font-weight: 600; padding: 0 6px; }
.perm-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.perm-row:last-child { border-bottom: 0; }
label.perm-row { justify-content: flex-start; }
.perm-tri { display: flex; gap: 4px; flex: none; }
.perm-tri label { display: inline-flex; gap: 4px; align-items: center; padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; font-size: .85rem; font-weight: 500; cursor: pointer; }
.perm-tri label:has(input:checked) { background: var(--brand); color: #fff; border-color: var(--brand); }
.perm-tri input { position: absolute; opacity: 0; pointer-events: none; }
.perm-tri label:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.role-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (max-width: 700px) { .perm-row { flex-direction: column; align-items: flex-start; } }
.acct-panel { display: grid; gap: 10px; }
.acct-id { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acct-id strong { font: 2rem var(--serif); color: var(--brand); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.sec-h { margin-top: 28px; }
.acct-no { font-variant-numeric: tabular-nums; font-weight: 600; }
.nav-search { margin: 0 0 14px; } .nav-search input { width: 100%; padding: 8px 12px; font-size: .9rem; border-radius: 10px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 16px; }
.filter-bar label { flex: 1 1 150px; } .filter-bar label:first-child { flex: 2 1 240px; }
.audit-tbl td { vertical-align: top; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 24px; margin: 0; }
.facts dt { font-size: .82rem; color: var(--muted); } .facts dd { margin: 2px 0 0; font-weight: 500; }
.sr-label { display: contents; }
.filter-bar { display: grid; grid-template-columns: 2fr 1.3fr 1fr 1fr 1fr auto; }
@media (max-width: 900px) { .filter-bar { grid-template-columns: 1fr 1fr; } .filter-bar label:first-child { grid-column: 1 / -1; } }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
.billing-filter { grid-template-columns: 2fr 1fr 1fr auto auto; }
/* Account profile */
.acct-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.acct-avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--bg); font: 1.4rem var(--serif); flex: none; }
.acct-head-main { flex: 1; min-width: 220px; }
.acct-head-line { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; flex-wrap: wrap; }
.acct-head-line .acct-no { font-size: 1.05rem; }
.acct-head-sub { margin: 0; color: var(--muted); }
.acct-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.acct-card { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.acct-card-l { font-size: .8rem; color: var(--muted); font-weight: 600; }
.acct-card-v { font-weight: 500; }
.acct-grid { align-items: start; } .acct-grid .panel { margin: 0; }
.lock-form { display: inline-flex; gap: 6px; } .lock-form input { width: 220px; padding: 6px 10px; font-size: .9rem; }
.tabs-row { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 6px 0 16px; }
.acct-stack { display: grid; gap: 16px; } .acct-stack .panel { margin: 0; }
/* Single-column layouts (no side-by-side panels) */
.stack-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.stack-sections > .panel, .stack-sections > section, .stack-sections > form { margin: 0; }
.email-brand, .email-edit { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.email-brand .email-prev, .email-edit > .panel:last-child { max-width: 760px; }
.email-prev iframe, .email-frame { width: 100%; }
.f-backup-grid > div { padding-bottom: 14px; border-bottom: 1px solid var(--line); } .f-backup-grid > div:last-child { border-bottom: 0; padding-bottom: 0; }
.qr-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.qr-side h2 { margin-top: 0; } .qr-side .link-box { margin: 12px 0; }
@media (max-width: 600px) { .qr-panel { grid-template-columns: 1fr; justify-items: start; } }
/* Help centre */
.help-hero { padding: 22px 24px; border-radius: 22px; background: var(--accent-2); margin-bottom: 18px; }
.help-hero p { margin: 0 0 12px; font-size: 1.05rem; }
.help-search { display: flex; gap: 8px; } .help-search label { flex: 1; } .help-search input { width: 100%; font-size: 1rem; padding: 12px 14px; }
.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.help-cat { border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.help-cat-head { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--ink); }
.help-cat-head strong { display: block; font-size: 1.05rem; color: var(--brand); } .help-cat-head small { display: block; color: var(--muted); }
.help-cat ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.help-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-2); flex: none; }
.help-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-ic.sm { width: 30px; height: 30px; vertical-align: middle; } .help-ic.sm svg { width: 17px; height: 17px; }
.help-crumbs { margin-bottom: 12px; color: var(--muted); } .help-crumbs a { color: var(--muted); }
.help-articles { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 8px; }
.help-articles a { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-decoration: none; color: var(--ink); }
.help-articles a:hover { border-color: var(--brand); } .help-articles strong { color: var(--brand); }
.help-article { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; max-width: 78ch; }
.help-article .prose h2 { font-size: 1.3rem; margin: 1.4em 0 .4em; scroll-margin-top: 80px; }
.help-toc { display: grid; gap: 4px; padding: 12px 14px; margin-bottom: 16px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-2) 50%, #fff); border-radius: 0 10px 10px 0; }
.help-feedback { margin: 16px 0; } .help-feedback form { display: flex; gap: 8px; align-items: center; }
.help-pager { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0; }
.help-pager a { display: grid; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; max-width: 48%; } .help-pager a.next { text-align: right; margin-left: auto; }
.help-pager small { color: var(--muted); }
.help-stuck { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--line); margin: 16px 0; }
.help-stuck > div { flex: 1; min-width: 200px; } .help-stuck p { margin: 2px 0 0; } .help-stuck svg { width: 30px; height: 30px; fill: none; stroke: var(--brand); stroke-width: 1.8; }
.help-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.help-admin-list { list-style: none; padding: 0; margin: 0; } .help-admin-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.help-admin-list li > .small { flex: 1; } .help-admin-list li:last-child { border-bottom: 0; } .is-off { opacity: .6; }
.move-form { display: inline-flex; gap: 2px; } .move-form .btn { padding: 4px 9px; }
.icon-pick { display: flex; gap: 8px; flex-wrap: wrap; } .icon-pick label { cursor: pointer; } .icon-pick input { position: absolute; opacity: 0; }
.icon-pick input:checked + .help-ic { outline: 2px solid var(--brand); outline-offset: 2px; } .icon-pick input:focus-visible + .help-ic { outline: 2px dashed var(--brand); }
.help-preview { max-width: 78ch; }
mark { background: color-mix(in srgb, var(--highlight) 30%, #fff); padding: 0 2px; border-radius: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vh-wrap { display: contents; }
.who-tag { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.tag-partner { background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); }
.tag-customer { background: color-mix(in srgb, var(--highlight) 18%, #fff); color: color-mix(in srgb, var(--highlight) 70%, #000); }
.tag-tenant { background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.tag-tenant:hover { border-color: var(--brand); }
.support-filter { grid-template-columns: 2fr 1.3fr 1fr auto; } .desk-filter { grid-template-columns: 2fr 1fr auto; }
.support-tbl td { vertical-align: top; }
.ticket-meta .facts { margin-top: 8px; }
.narrow-wide { max-width: 860px; }
.msg.is-internal { border-style: dashed; background: color-mix(in srgb, var(--accent-2) 40%, #fff); }
/* Albums */
.albums-panel { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; background: #fff; }
.albums-panel summary { cursor: pointer; }
.album-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.album-row, .album-new { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.album-row input[name=name], .album-new input[name=name] { flex: 1 1 180px; min-width: 0; }
.album-btns { display: flex; gap: 4px; margin-left: auto; } .album-btns .btn { padding: 4px 10px; }
.album-move { position: sticky; top: 72px; z-index: 6; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--brand); color: #fff; }
.album-move select { min-width: 160px; }
.mod { position: relative; } .mod-sel { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 6px; line-height: 0; }
.mod-sel input { width: 18px; height: 18px; } .mod.is-sel { outline: 3px solid var(--brand); outline-offset: -3px; }
/* Guest album chips */
.g-albums { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; } .g-albums::-webkit-scrollbar { display: none; }
.g-albums button { flex: none; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--g-line, var(--line)); background: var(--g-card, #fff); color: inherit; font: inherit; font-size: .9rem; cursor: pointer; }
.g-albums button[aria-pressed=true] { background: var(--g-accent, var(--brand)); color: #fff; border-color: transparent; }
.g-album-hint { font-size: .85rem; opacity: .8; margin: 0 2px 8px; }
/* QR designer + printable cards */
.qd-bar { max-width: 210mm; margin: 0 auto; padding: 20px 16px; }
.qd-bar h1 { margin: 6px 0 8px; }
.qd-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.qd-group { font-size: 1rem; margin: 14px 0 8px; } .qd-group:first-of-type { margin-top: 4px; }
.qd-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; }
.qd-opt { display: grid; gap: 3px; cursor: pointer; align-content: start; } .qd-opt input { position: absolute; opacity: 0; }
.qd-opt small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.qd-thumb { display: block; width: 136px; height: 193px; border-radius: 8px; border: 2px solid var(--line); overflow: hidden; background: #fff; }
.qd-mini { display: block; zoom: .34; pointer-events: none; }
.qd-mini .qcard { width: 105mm; height: 148.5mm; border: 0; }
.qd-opt input:checked + .qd-thumb { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.qd-opt input:focus-visible + .qd-thumb { outline: 2px dashed var(--brand); outline-offset: 2px; }
.qd-sizes { display: grid; gap: 6px; }
.qd-colours { display: flex; gap: 18px; flex-wrap: wrap; } .qd-colours input[type=color] { width: 80px; height: 40px; padding: 2px; }
.qd-preview-h { margin: 22px 0 0; }
.print-sheet { width: 210mm; height: 297mm; margin: 20px auto; background: #fff; display: grid; box-shadow: 0 4px 30px rgba(0,0,0,.12); overflow: hidden; }
.ps-cards { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ps-tent { grid-template-rows: 1fr 1fr; } .ps-tent .qcard { border-bottom: 1px dashed #bbb; }
.ps-cards .qcard:nth-child(n+5), .ps-tent .qcard:nth-child(n+3), .ps-sign .qcard:nth-child(n+2) { display: none; }
.ps-mini { grid-template-columns: 85mm 85mm; grid-auto-rows: 55mm; justify-content: center; align-content: center; }
.ps-mini .qcard { width: 154.5mm; height: 100mm; zoom: .55; padding: 8mm 12mm; }
.ps-mini .qcard-in { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 9mm; text-align: left; align-items: start; transform: none !important; }
.ps-mini .qc-qr { grid-row: 1 / 4; grid-column: 1; width: 52mm; height: 52mm; } .ps-mini .qc-names, .ps-mini .qc-line, .ps-mini .qc-how { grid-column: 2; order: 0 !important; margin: 0 0 3mm !important; padding: 0 !important; background: none !important; color: inherit; }
.ps-mini .qc-how { margin: 0; } .ps-mini .qcard-in::before, .ps-mini .qcard-in::after { display: none; }
.ps-sign { grid-template-rows: 1fr; } .ps-sign .qcard { width: 105mm; height: 148.5mm; zoom: 2; }
.qcard { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10mm; border: 1px dashed #ddd; background: var(--qbg); color: #222; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.qcard > i { display: none; position: absolute; pointer-events: none; }
.qcard-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.qc-names { font: 26pt/1.1 var(--serif); color: var(--qc); margin: 0 0 3mm; } .qc-line { font-size: 12pt; margin: 0 0 6mm; }
.qc-qr { width: 52mm; height: 52mm; box-sizing: content-box; } .qc-qr svg { width: 100%; height: 100%; display: block; } .qc-how { font-size: 9.5pt; opacity: .75; margin: 5mm 0 0; max-width: 70mm; }
@media print { .qd-bar, .alert { display: none !important; } .print-sheet { margin: 0; box-shadow: none; } .qcard { border-color: transparent; } .ps-tent .qcard { border-bottom: 1px dashed #bbb; } }
@media screen and (max-width: 860px) { .print-sheet { zoom: .45; } }
.ps-tent .qcard:first-child .qcard-in { transform: rotate(180deg); }
/* social links */
.social{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0 0}
.social a{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid currentColor;color:inherit;opacity:.85}
.social a:hover,.social a:focus-visible{opacity:1}
.g-social{justify-content:center}
.ps-mini .qd-modern .qc-line { color: var(--qc) !important; font-size: 12pt; }
.ps-mini .qd-celestial .qd-b { top: auto; bottom: 8mm; }
/* guest contact details */
.lead-stats { display: flex; gap: 28px; flex-wrap: wrap; } .lead-stats p { margin: 0; } .lead-stats strong { font-size: 1.6rem; display: block; line-height: 1.1; }
.lead-dlg #nameForm { display: grid; gap: 10px; } .lead-dlg label.small { display: block; text-align: left; } .lead-dlg label.small input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; }
.lead-dlg label.lead-consent { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-start; text-align: left; } .lead-dlg .lead-consent > span { flex: 1; min-width: 0; } .lead-dlg .lead-consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; }
.lead-dlg h2, .lead-dlg p { text-align: left; } .lead-note { margin: 0; } .lead-err { color: #a3261b; margin: 0; }
.qd-thumb { position: relative; } .qd-opt.is-locked { cursor: not-allowed; } .qd-opt.is-locked .qd-mini { opacity: .45; }
.qd-lock { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 6px; border-radius: 6px; background: var(--ink, #222); color: #fff; font-size: .75rem; font-weight: 600; text-align: center; }
.qd-upsell { margin: 0 0 4px; padding: 10px 14px; border-radius: 12px; background: var(--accent-2, #f5ece3); }
/* host logo */
.ev-logo { display: block; max-width: 180px; max-height: 72px; width: auto; height: auto; margin: 0 auto 12px; object-fit: contain; }
.ev-logo-set { display: grid; gap: 8px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); } .ev-logo-set p { margin: 0; }
.ev-logo-prev { padding: 12px; border: 1px dashed var(--line); border-radius: 12px; justify-self: start; } .ev-logo-prev .ev-logo { margin: 0; }
.qc-logo { display: block; max-width: 40mm; max-height: 16mm; width: auto; height: auto; object-fit: contain; margin: 0 auto 4mm; }
.qc-logo[hidden] { display: none; }
.ps-mini .qc-logo { grid-column: 2; margin: 0 0 3mm; max-height: 12mm; }
.invite-card .ev-logo, .g-head .ev-logo { margin-bottom: 14px; }
/* web address field: show the whole fixed part, stack on narrow screens */
.prefix-input span { flex: none; white-space: nowrap; overflow: visible; max-width: none; text-overflow: clip; }
.prefix-input input { flex: 1 1 auto; min-width: 0; }
.addr-preview { display: block; margin-top: 6px; font-size: .9rem; color: var(--muted); word-break: break-all; }
.addr-preview strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .prefix-input { flex-direction: column; }
  .prefix-input span { border-right: 1.5px solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
  .prefix-input input { border-radius: 0 0 var(--r) var(--r); }
}
/* branding theme picker (partners) */
.th-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
.th-opt { display: grid; gap: 3px; cursor: pointer; align-content: start; position: relative; }
.th-opt input { position: absolute; opacity: 0; }
.th-opt small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.th-opt strong { font-size: .95rem; }
.th-sw { display: block; height: 96px; border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--c4); position: relative; }
.th-bar { display: block; height: 22px; background: var(--c1); }
.th-body { display: grid; gap: 5px; padding: 8px 10px; }
.th-h { font-size: 1.15rem; line-height: 1; color: var(--c5); }
.th-line { display: block; height: 6px; width: 80%; border-radius: 3px; background: var(--c2); } .th-line.s { width: 55%; }
.th-btn { position: absolute; right: 10px; bottom: 10px; width: 42px; height: 16px; border-radius: 8px; background: var(--c1); }
.th-dot { position: absolute; right: 12px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--c3); }
.th-sw-custom { display: grid; place-items: center; font-size: 2rem; color: var(--muted); background: repeating-linear-gradient(45deg, var(--accent-2) 0 10px, transparent 10px 20px); }
.th-opt input:checked + .th-sw { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); }
.th-opt input:focus-visible + .th-sw { outline: 2px dashed var(--brand); outline-offset: 2px; }
.th-opt.is-locked { cursor: not-allowed; } .th-opt.is-locked .th-sw { opacity: .45; }
.th-colours { margin-top: 8px; }
.th-colours input[type=color] { height: 46px; padding: 3px; width: 100%; min-width: 90px; cursor: pointer; }
.social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 18px; }
.nowrap { white-space: nowrap; }
.tbl-partners td { vertical-align: top; }
.tbl-partners td:first-child { min-width: 220px; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
/* Super Admin partners list: one full-width card per partner */
.pcards { display: grid; gap: 14px; margin-top: 16px; }
.pcard { background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.pcard-head { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: flex-start; }
.pcard-head h3 { margin: 0; font-size: 1.25rem; } .pcard-head h3 a { color: var(--ink); text-decoration: none; } .pcard-head h3 a:hover { text-decoration: underline; }
.pcard-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pcard-actions { display: flex; gap: 8px; align-items: center; } .pcard-actions form { margin: 0; }
.pcard-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 22px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.pcard-fact dt { font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
.pcard-fact dd { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.pcard-bar { display: block; height: 6px; border-radius: 3px; background: var(--accent-2); margin-top: 6px; overflow: hidden; }
.pcard-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* Tables shown as cards (public/cards.js): one full-width card per row */
.cards-wrap { overflow: visible; border: 0; background: transparent; }
table.tbl-cards, .tbl-cards tbody, .tbl-cards tfoot { display: block; width: 100%; border: 0; }
.tbl-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tbl-cards tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 22px; position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 0 0 12px; }
.tbl-cards tr:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
.tbl-cards td, .tbl-cards th { display: block; padding: 0; border: 0; text-align: left; background: none; min-width: 0; overflow-wrap: anywhere; position: static; }
.tbl-cards td[data-label]::before, .tbl-cards th[data-label]::before { content: attr(data-label); display: block; font-size: .76rem; font-weight: 600; color: var(--muted); margin-bottom: 3px; letter-spacing: 0; text-transform: none; }
.tbl-cards .td-title { grid-column: 1 / -1; font-size: 1.02rem; padding: 0 40px 12px 0; border-bottom: 1px solid var(--line); }
.tbl-cards .td-title strong, .tbl-cards .td-title a strong { font-size: 1.08rem; }
.tbl-cards .td-check { position: absolute; top: 16px; right: 18px; }
.tbl-cards .td-check input { width: 20px; height: 20px; }
.tbl-cards .td-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.tbl-cards .td-actions form { margin: 0; }
.tbl-cards .td-wide { grid-column: 1 / -1; }
.tbl-cards .td-empty { display: none; }
.tbl-cards td.num, .tbl-cards .num { text-align: left; }
.tbl-cards tr.row-new { border-color: var(--highlight); box-shadow: inset 4px 0 0 var(--highlight); }
.tbl-cards tfoot tr { background: var(--accent-2); }

/* ===== Form fields & layout consistency (whole suite, both brand styles) ===== */
label { font-size: .93rem; line-height: 1.35; }
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]):not([type=hidden]), select, textarea {
  min-height: 46px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; background-color: #fff; color: var(--ink);
  font: 400 1rem/1.35 var(--sans); box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 100px; resize: vertical; }
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); outline: none; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, #fff); }
select:not([multiple]) { -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; padding: 0; accent-color: var(--brand); flex: none; cursor: pointer; }
input[disabled], select[disabled], textarea[disabled] { background-color: var(--accent-2); opacity: .75; cursor: not-allowed; }
.check { font-weight: 500; gap: 10px; align-items: flex-start; line-height: 1.45; }
.check .hint { margin-left: 30px; }
fieldset { padding: 18px 20px 20px; border-radius: 14px; }
legend { font-size: 1rem; font-weight: 700; padding: 0 8px; }
.hint { font-size: .84rem; line-height: 1.45; }
.btn { min-height: 46px; } .btn-sm { min-height: 36px; } .btn-big { min-height: 52px; }
.stack { gap: 20px; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 20px; }
/* search and filter bars: fields keep a usable width and wrap instead of squashing */
.filter-bar, .inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 14px; align-items: end; }
.filter-bar label, .inline-form label { flex: none; min-width: 0; }
.filter-bar > .btn, .filter-bar > button, .inline-form > .btn, .inline-form > button { justify-self: start; }
@media (min-width: 760px) { .filter-bar > label:first-child, .inline-form > label:first-child { grid-column: span 2; } }
.inline-form.help-peek { display: flex; }
.admin-main > .inline-form, .admin-main > form.filter-bar { background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; }
.billing-filter, .support-filter, .desk-filter, .acct-filter, .codes-filter { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* monthly / yearly switch */
.bt-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--accent-2); border: 1.5px solid var(--line); margin: 4px 0 8px; }
.bt-opt { position: relative; margin: 0; cursor: pointer; }
.bt-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bt-opt span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 999px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bt-opt input:checked + span { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.bt-opt input:focus-visible + span { outline: 3px solid var(--highlight); outline-offset: 2px; }
.bt-save { font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--highlight); color: #fff; }
.bt-sub { margin: 0 0 6px; color: var(--muted); }
[data-billing="annual"] .bt-sub.bt-has-save { color: var(--ok); font-weight: 600; }
.bt-total { margin: 4px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--accent-2); font-size: .95rem; }
.bt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.plan-pick { cursor: pointer; position: relative; }
.plan-pick > input[type=radio] { position: absolute; top: 18px; right: 18px; }
.plan-pick:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.join-wrap { max-width: 1080px; padding-top: 32px; padding-bottom: 48px; }
.join-plans { margin: 4px 0 0; }
.join-plans .plan h3 { margin-right: 30px; }
.pp-plans .plan h3, .pp-plans .flag { margin-right: 30px; }
.filter-bar .btn, .inline-form .btn, .filter-bar button, .inline-form button { min-height: 46px; padding-inline: 22px; }
@media (min-width: 760px) { .filter-bar > label:first-of-type, .inline-form > label:first-of-type { grid-column: span 2; } }
.admin-main > .cta-row.toolbar { margin: 0 0 12px; justify-content: flex-end; }
.inline.addr { display: flex; align-items: stretch; margin-top: 6px; }
.inline.addr > span { flex: none; display: flex; align-items: center; padding: 0 12px; background: var(--accent-2); border: 1.5px solid var(--line); border-right: 0; border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.inline.addr input { margin: 0; border-radius: 0 10px 10px 0; flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) { .inline.addr { flex-direction: column; } .inline.addr > span { border-right: 1.5px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 10px 12px; } .inline.addr input { border-radius: 0 0 10px 10px; } }
.label-like { margin: 0; font-weight: 600; font-size: .93rem; } .stack-sm { display: grid; gap: 10px; }

/* ===== Light / dark mode switch ===== */
.theme-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: inherit; cursor: pointer; }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-sun { display: none; }
html[data-theme="dark"] .theme-btn .i-sun { display: block; } html[data-theme="dark"] .theme-btn .i-moon { display: none; }
.theme-btn:focus-visible { outline: 3px solid var(--highlight); outline-offset: 2px; }

/* ===== Dark mode for the app (admin, partner portal, dashboards, sign-in). Guest pages keep the couple's theme. ===== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) {
  --bg: #0E1322; --surface: #161C2E; --surface-2: #1C2338; --ink: #E6EAF5; --muted: #A6B0CC; --line: #2B3453; --accent-2: #1E2742;
  --brand: color-mix(in srgb, var(--brand-solid) 32%, #fff); --brand-2: color-mix(in srgb, var(--brand-solid) 45%, #fff);
  --ok: #5CCB97; --danger: #FF7A70; --warn: #F2A867;
  background: var(--bg); color: var(--ink);
}
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) :is(.panel, .card, .plan, .event-list a, .chip, .tile, .acct-head, .acct-card, .help-cat, .help-articles a, .help-article, .albums-panel, .qd-form, .app-card, .pkg-list, .msg, .rte, .faq-item, .seg-tabs, .dash-more > div, .pcard, .plan-edit, .venue-results, .rep-btn, .cover-btn, .tag-tenant, .tbl-cards tr, .tbl-wrap:not(.cards-wrap), .dash-side, .topbar, .admin-main > .inline-form, .admin-main > form.filter-bar, fieldset, .callout, .alert, .bt-toggle, .sheet, dialog, details.danger-zone, .th-sw-custom) {
  background-color: var(--surface); border-color: var(--line); color: var(--ink);
}
html[data-theme="dark"] body:not(.guest):not(.site) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea) { background-color: var(--surface-2); border-color: #39436A; color: var(--ink); }
html[data-theme="dark"] body:not(.guest):not(.site) select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9D0EA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] body:not(.guest):not(.site) :is(input, textarea)::placeholder { color: #7E89AA; }
html[data-theme="dark"] body:not(.guest):not(.site) .btn:not(.btn-ghost):not(.btn-light):not(.btn-danger) { background: var(--brand-solid); border-color: color-mix(in srgb, var(--brand-solid) 60%, #fff); color: #fff; }
html[data-theme="dark"] body:not(.guest):not(.site) .btn-ghost { background: transparent; color: var(--ink); border-color: #4A5580; }
html[data-theme="dark"] body:not(.guest):not(.site) .btn-ghost:hover { background: var(--surface-2); }
html[data-theme="dark"] body:not(.guest):not(.site) :is(.admin-nav a.on, .dash-side nav a.on, .bt-opt input:checked + span, .chip.on) { background: var(--brand-solid); color: #fff; border-color: transparent; }
html[data-theme="dark"] body:not(.guest):not(.site) :is(.admin-nav a:hover, .dash-side nav a:hover) { background: var(--surface-2); }
html[data-theme="dark"] body:not(.guest):not(.site) .dash-ev { background: var(--surface-2); }
html[data-theme="dark"] body:not(.guest):not(.site) .dash-ev strong { color: var(--ink); }
html[data-theme="dark"] body:not(.guest):not(.site) .tag { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] body:not(.guest):not(.site) .tag-ok { background: #123A2C; color: #8FE3BC; }
html[data-theme="dark"] body:not(.guest):not(.site) .tag-bad { background: #4A1D1D; color: #FFB4AC; }
html[data-theme="dark"] body:not(.guest):not(.site) .alert { background: #3A1F22; border-color: #6B3036; color: #FFD7D3; }
html[data-theme="dark"] body:not(.guest):not(.site) .alert.ok { background: #12332A; border-color: #22604C; color: #C9F2DF; }
html[data-theme="dark"] body:not(.guest):not(.site) .bt-total, html[data-theme="dark"] body:not(.guest):not(.site) .prefix-input span, html[data-theme="dark"] body:not(.guest):not(.site) .inline.addr > span { background: var(--surface-2); color: var(--muted); border-color: #39436A; }
html[data-theme="dark"] body:not(.guest):not(.site) .switch span { background: #39436A; }
html[data-theme="dark"] body:not(.guest):not(.site) img.logo-preview { background: #fff; }
html[data-theme="dark"] body:not(.guest):not(.site) .tbl th, html[data-theme="dark"] body:not(.guest):not(.site) .tbl td { border-color: var(--line); }
/* EveryExtra brand style in dark mode: keep the magenta buttons and navy bars */
html[data-theme="dark"] body.ee-app { --brand-solid: #FF2E93; }
html[data-theme="dark"] body.ee-app .btn:not(.btn-ghost):not(.btn-light):not(.btn-danger) { background: #FF2E93; border-color: #FF2E93; }
html[data-theme="dark"] body.ee-app :is(.admin-nav a.on, .dash-side nav a.on) { background: #26315C; box-shadow: inset 3px 0 0 #FF2E93; }
html[data-theme="dark"] body.ee-app a:not(.btn) { color: #FF8CC6; }
html[data-theme="dark"] body.ee-app :is(.admin-nav a, .dash-side nav a, .foot a, .topbar .menu a) { color: var(--ink); }
html[data-theme="dark"] body.ee-app .topbar { background: #070D24; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) .pkg-status { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) .ps-note { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) .ps-dates li::before { background: var(--surface); }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) .foot { background: #070B16; color: var(--ink); }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) .ps-ok { background: #123A2C; color: #8FE3BC; }
html[data-theme="dark"] body:not(.guest):not(.site):not(.print-page) .ps-warn { background: #4A2D12; color: #FFD1A0; }
html[data-theme="dark"] body.ee-app .btn:not(.btn-ghost):not(.btn-light):not(.btn-danger) { background: #D91A75; border-color: #D91A75; color: #FFFFFF; }
.bt-save { color: #FFFFFF; }
/* theme switch on the navy EveryExtra top bar (light and dark) */
body.ee-app .topbar .theme-btn { color: #E8ECFF; border-color: rgba(232, 236, 255, .4); }
body.ee-app .topbar .theme-btn:hover { color: #2EE6D6; border-color: #2EE6D6; }
.topbar .theme-btn:hover { border-color: currentColor; }

/* ---- Partner growth: Grow page, checklist, stats, demo, sales pack, connections ---- */
.gr-bar { margin: 6px 0 14px; }
.gr-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.gr-steps li { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.gr-steps li.is-done span:not(.gr-tick) { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.gr-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.gr-steps li.is-done .gr-tick { background: var(--brand); border-color: var(--brand); }
.gr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 6px 0 14px; }
.gr-tile { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; }
.gr-tile strong { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; color: var(--brand); }
.gr-tile span { font-size: .88rem; color: var(--muted); }
.gr-demo { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.gr-demo > .stack-sm { flex: 1 1 320px; min-width: 0; }
.gr-qr { border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; flex: none; }
.gr-pack { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.gr-pack-item { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); }
.gr-pack-item:hover { border-color: var(--brand); }
.gr-pack-item strong { color: var(--brand); }
.gr-pack-item span { font-size: .9rem; color: var(--muted); }
.gr-refs { padding-left: 18px; }
.gr-how { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.gr-how summary { cursor: pointer; font-weight: 700; }
.gr-how ol { margin: 10px 0 4px; padding-left: 20px; display: grid; gap: 6px; }
.gr-code { background: var(--accent-2, #f4f2ee); border-radius: 10px; padding: 12px 14px; overflow-x: auto; font-size: .82rem; white-space: pre-wrap; word-break: break-word; max-height: 360px; }
.gr-offer p { margin: 0; }
.gr-posts { display: grid; gap: 22px; }
.gr-post { margin: 0; border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 12px; }
.gr-post-art svg { width: 100%; max-width: 520px; height: auto; display: block; border-radius: 10px; }
.gr-post figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .gr-tile strong { font-size: 1.3rem; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* partner's line on guest pages, and the enquiry form */
.g-promo { margin: 26px auto 6px; max-width: 560px; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 18px 20px; border-radius: 18px; background: color-mix(in srgb, var(--accent, #eee) 55%, transparent); }
.g-promo p { margin: 0; font-size: .95rem; }
.g-promo-logo { max-height: 40px; max-width: 160px; object-fit: contain; }
.enq-logo { max-height: 56px; max-width: 220px; object-fit: contain; display: block; margin-bottom: 14px; }
.enq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* launch offers band (partner page and join page) */
.offer-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 10px 0 22px; }
.offer-band > div { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; display: grid; gap: 3px; }
.offer-band strong { font-size: 1.05rem; }
.offer-band span { font-size: .88rem; color: var(--muted); }

/* earnings calculator */
.calc { display: grid; gap: 18px; }
.calc-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.calc-in label { display: grid; gap: 6px; font-weight: 600; align-content: start; }
.calc-in input { font-size: 1.15rem; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg, #fff); color: var(--ink); width: 100%; }
.calc-lead { font-size: 1.05rem; margin: 0 0 12px; }
.calc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.calc-plan { border: 1.5px solid var(--line); border-radius: 18px; padding: 16px 18px; position: relative; }
.calc-plan h3 { margin: 0 0 6px; font-size: 1.1rem; }
.calc-plan.is-best { border-color: var(--highlight, #FF2E93); box-shadow: inset 0 0 0 1px var(--highlight, #FF2E93); }
.calc-plan.is-small { opacity: .7; }
.calc-plan .flag { margin: 0 0 6px; font-size: .78rem; font-weight: 800; color: var(--highlight, #C2186B); }
.calc-profit { font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.calc-profit small { font-size: .85rem; font-weight: 600; letter-spacing: 0; color: var(--muted); }

/* sales pack print pages (A4) */
.sp-body { background: #e9e6e1; }
.sp-page { width: 210mm; min-height: 297mm; margin: 18px auto; background: #fff; color: #1c1a19; box-shadow: 0 4px 30px rgba(0,0,0,.15); padding: 16mm 16mm 14mm; box-sizing: border-box; font-family: var(--sp-bf); display: flex; flex-direction: column; gap: 6mm; }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 10mm; border-bottom: 3px solid var(--sp-brand); padding-bottom: 5mm; }
.sp-head p { margin: 0; color: #555; font-size: 11pt; }
.sp-logo { max-height: 18mm; max-width: 70mm; object-fit: contain; }
.sp-logo-text { font-family: var(--sp-hf); font-size: 20pt; color: var(--sp-brand); }
.sp-page h1 { font-family: var(--sp-hf); color: var(--sp-brand); font-size: 30pt; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
.sp-lede { font-size: 13pt; line-height: 1.5; margin: 0; color: #333; }
.sp-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; }
.sp-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3mm; }
.sp-feats { columns: 2; column-gap: 8mm; padding-left: 5mm; margin: 0; font-size: 11pt; line-height: 1.45; }
.sp-feats li { break-inside: avoid; margin-bottom: 2.5mm; }
.sp-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(40mm, 1fr)); gap: 4mm; }
.sp-plan { border: 1.5px solid #ddd; border-radius: 4mm; padding: 4mm 5mm; }
.sp-plan.is-feat { border-color: var(--sp-brand); background: color-mix(in srgb, var(--sp-accent) 45%, #fff); }
.sp-plan h3 { margin: 0; font-family: var(--sp-hf); color: var(--sp-brand); font-size: 14pt; }
.sp-plan .sp-price { font-size: 18pt; font-weight: 800; margin: 1mm 0; }
.sp-plan p { margin: 0; font-size: 9.5pt; color: #444; }
.sp-foot { margin-top: auto; display: flex; gap: 8mm; align-items: center; border-top: 1px solid #ddd; padding-top: 5mm; font-size: 10.5pt; }
.sp-foot p { margin: 0 0 1.5mm; }
.sp-qr { width: 30mm; flex: none; } .sp-qr svg { width: 100%; height: auto; display: block; }
.sp-cta { font-weight: 700; color: var(--sp-brand); font-size: 12pt; }
.sp-poster { text-align: center; align-items: center; justify-content: flex-start; background: linear-gradient(180deg, color-mix(in srgb, var(--sp-accent) 70%, #fff), #fff 55%); }
.sp-poster .sp-head { border: 0; justify-content: center; width: 100%; }
.sp-poster h1 { font-size: 54pt; margin-top: 6mm; }
.sp-poster .sp-lede { font-size: 17pt; max-width: 150mm; }
.sp-bigqr { width: 110mm; padding: 6mm; background: #fff; border-radius: 6mm; border: 3px solid var(--sp-brand); margin: 6mm 0; } .sp-bigqr svg { width: 100%; height: auto; display: block; }
.sp-steps { display: flex; gap: 8mm; justify-content: center; font-weight: 800; font-size: 15pt; color: var(--sp-brand); margin: 0; flex-wrap: wrap; }
.sp-poster-foot { margin-top: auto; font-size: 12pt; color: #333; line-height: 1.5; }
@media print { .sp-body { background: #fff; } .sp-page { margin: 0; box-shadow: none; width: 210mm; height: 297mm; min-height: 0; page-break-after: always; } }
@media (max-width: 820px) { .sp-page { width: auto; min-height: 0; margin: 10px; padding: 18px; } .sp-feats { columns: 1; } .sp-poster h1 { font-size: 36pt; } .sp-bigqr { width: 70%; } }
/* website widgets page */
.wd-preview { border: 1px dashed var(--line); border-radius: 14px; padding: 12px; background: repeating-conic-gradient(color-mix(in srgb, var(--line) 35%, transparent) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.wd-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }

/* Partner & venue portal menu: grouped into sections; items not on the plan show a lock */
.admin-nav.pn { gap: 0; }
.pn-sec { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line); }
.pn-sec:first-of-type { border-top: 0; }
.pn-h { margin: 4px 12px 4px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.admin-nav a.is-locked { color: var(--muted); }
.pn-lock { font-style: normal; font-size: .8em; opacity: .75; }
.upsell { max-width: 720px; }
.upsell h2 { margin-top: 10px; }
.tag-up { background: var(--accent); color: var(--brand); }
@media (max-width: 860px) { .pn-sec { flex-direction: row; flex-wrap: wrap; } .pn-h { width: 100%; } }
/* Venue portal */
.vn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0 0 18px; }
.vn-stat { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface, #fff); }
.vn-stat b { display: block; font: 600 1.8rem/1.1 var(--serif); }
.vn-stat span { font-size: .85rem; color: var(--muted); }
.vn-rows { display: grid; gap: 8px; }
.vn-row { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 8px; }
@media (max-width: 640px) { .vn-row { grid-template-columns: 1fr; } }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sc-item { position: relative; border-radius: 10px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--accent-2); }
.sc-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sc-item input { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; }
.sc-item:has(input:checked) { border-color: var(--brand); }
.sc-item small { display: block; padding: 4px 8px; font-size: .75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-bar { position: sticky; bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 0; background: var(--bg); }
.vf-list { display: grid; gap: 8px; }
.vf-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.vf-row p { margin: 2px 0 0; font-size: .88rem; color: var(--muted); }
.code-big { font: 600 1.05rem/1 ui-monospace, Menlo, monospace; letter-spacing: .04em; }
/* Admin: tile pages (Advanced settings, Integrations) */
.adm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 8px 0 24px; }
.adm-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, #fff); color: var(--ink); text-decoration: none; }
.adm-tile:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.adm-tile strong { font-size: 1.05rem; }
.adm-tile span { font-size: .9rem; color: var(--muted); }
.adm-tile .tag { align-self: flex-start; }
.adm-group { margin: 22px 0 6px; }
a.vn-stat { text-decoration: none; color: inherit; } a.vn-stat:hover { border-color: var(--brand); }