:root {
  --ink: #302b28;
  --muted: #766f69;
  --brand: #98634e;
  --brand-dark: #754737;
  --warm: #f7f2ed;
  --line: #e7ddd5;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --shadow: 0 20px 60px rgb(64 42 31 / 10%);
}

body {
  color: var(--ink);
  background: #fcfaf8;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .65rem 1rem;
  color: #fff;
  background: #222;
  border-radius: 8px;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.site-header { position: relative; z-index: 100; background: rgb(252 250 248 / 90%); border-bottom: 1px solid rgb(231 221 213 / 70%); backdrop-filter: blur(14px); }
.site-header .navbar { min-height: 76px; }
.brand-mark { color: #302b28; font: 600 1.45rem var(--serif); text-decoration: none; letter-spacing: -.04em; }
.brand-mark:hover { color: var(--brand); }
.brand-mark span { margin-left: .18rem; color: var(--brand); font-size: .62rem; vertical-align: top; }
.site-header .nav-link { color: #5f5752; font-size: .88rem; font-weight: 600; }
.site-header .nav-link:hover { color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: .8rem; }
.header-actions .btn { padding: .65rem 1.15rem; font-size: .84rem; }
.site-header.is-scrolled { box-shadow: 0 8px 28px rgb(63 42 32 / 8%); }

/* ── Premium scroll-aware header (landing only) ── */
.marketing-page { padding-top: 0; }
.marketing-page .site-header { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, box-shadow .4s ease; }
.marketing-page .site-header .navbar { min-height: 72px; }
.marketing-page .brand-mark { color: #f5ebdc; }
.marketing-page .brand-mark:hover { color: #dcbd82; }
.marketing-page .brand-mark span { color: #dcbd82; }
.marketing-page .site-header .nav-link { color: rgb(243 231 214 / 82%); }
.marketing-page .site-header .nav-link:hover { color: #dcbd82; }
.marketing-page .header-actions .btn-dark { color: #2a2016; background: linear-gradient(135deg, #e7c88c, #c99a57); border: 0; box-shadow: 0 10px 26px rgb(201 168 106 / 28%); }
.marketing-page .header-actions .btn-dark:hover { color: #231a12; background: linear-gradient(135deg, #f0d49b, #d6ab64); }
.marketing-page .account-avatar { color: #231a12; background: #d6ab64; }
.marketing-page .navbar-toggler { padding: .4rem .55rem; background: transparent; border: 1px solid rgb(220 189 130 / 40%); border-radius: 10px; }
.marketing-page .navbar-toggler:focus { box-shadow: none; }
.marketing-page .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23f3e7d6' stroke-width='2.2' stroke-linecap='round' d='M5 8h20M5 15h20M5 22h20'/%3E%3C/svg%3E"); }

/* scrolled → dark frosted glass bar */
.marketing-page .site-header.is-scrolled { background: rgb(20 15 11 / 82%); backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid rgb(220 189 130 / 14%); box-shadow: 0 12px 34px rgb(0 0 0 / 30%); }

@media (max-width: 991.98px) {
  .marketing-page .navbar-collapse { margin-top: .6rem; padding: 1rem 1.1rem 1.2rem; background: rgb(20 15 11 / 96%); border: 1px solid rgb(220 189 130 / 16%); border-radius: 16px; box-shadow: 0 18px 40px rgb(0 0 0 / 35%); }
}

/* Golden scroll-progress line (landing only) */
.scroll-progress { display: none; }
.marketing-page .scroll-progress { display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; }
.marketing-page .scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #c99a57, #e7c88c, #f0d49b); box-shadow: 0 0 10px rgb(220 189 130 / 65%); border-radius: 0 3px 3px 0; }

/* Subtle logo glow + sparkle (landing only) */
.marketing-page .brand-mark { text-shadow: 0 0 20px rgb(220 189 130 / 22%); }
.marketing-page .brand-mark span { display: inline-block; color: #e7c88c; text-shadow: 0 0 8px rgb(220 189 130 / 70%); animation: logo-twinkle 3.4s ease-in-out infinite; }
@keyframes logo-twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); text-shadow: 0 0 6px rgb(220 189 130 / 50%); }
  50% { opacity: .82; transform: scale(1.22) rotate(10deg); text-shadow: 0 0 16px rgb(240 212 155 / 95%); }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-page .brand-mark span { animation: none; }
}
.account-avatar { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-weight: 700; text-decoration: none; }
.message-stack { position: relative; z-index: 90; margin-top: 1rem; }
.site-footer { padding: 4.5rem 0 1.5rem; color: #bdb4af; background: #302a27; }
.site-footer .brand-mark { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-grid p { max-width: 300px; margin-top: 1rem; font-size: .85rem; line-height: 1.7; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.footer-grid strong { margin-bottom: .35rem; color: #fff; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid a:not(.brand-mark) { color: #bdb4af; font-size: .84rem; text-decoration: none; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 10%); font-size: .72rem; }

/* Marketing home */
.marketing-page { background: #fbf8f5; }
/* ── Premium dark hero — the invitation comes alive ── */
.home-hero--dark { position: relative; overflow: hidden; isolation: isolate; color: #f3e7d6; background: radial-gradient(130% 90% at 82% 2%, #2d2317 0, #1b1510 45%, #130e0a 100%); }
.hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(42% 44% at 78% 28%, rgb(201 168 106 / 22%), transparent 70%), radial-gradient(40% 40% at 10% 88%, rgb(183 110 121 / 13%), transparent 70%); }
.home-hero { position: relative; z-index: 1; max-width: 1240px; min-height: 90vh; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 3rem; margin: 0 auto; padding: 5rem 1.5rem 5.5rem; }
.eyebrow--gold { color: #dcbd82; }
.home-hero__copy h1 { max-width: 720px; margin: 1.1rem 0 1.4rem; color: #f7edde; font: 500 clamp(3rem, 6.2vw, 5.6rem)/.98 var(--serif); letter-spacing: -.045em; }
.home-hero__copy h1 em { color: #dcbd82; font-style: italic; font-weight: 500; }
.home-hero--dark .home-hero__copy > p { max-width: 560px; color: rgb(243 231 214 / 72%); font-size: 1.08rem; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.9rem; flex-wrap: wrap; }
.hero-actions .btn { min-height: 54px; display: inline-flex; align-items: center; gap: 1rem; }
.hero-actions .btn span { transition: transform .2s; }
.hero-actions .btn:hover span { transform: translateX(3px); }
.home-hero--dark .hero-actions .btn-brand { color: #2a2016; background: linear-gradient(135deg, #e7c88c, #c99a57); box-shadow: 0 16px 36px rgb(201 168 106 / 30%); }
.home-hero--dark .hero-actions .btn-brand:hover { color: #231a12; background: linear-gradient(135deg, #f0d49b, #d6ab64); transform: translateY(-1px); }
.home-hero--dark .text-link { color: #f3e7d6; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3rem; text-decoration-color: rgb(220 189 130 / 55%); }
.hero-trust { display: flex; align-items: center; gap: .8rem; margin-top: 2.3rem; }
.hero-trust p { margin: 0; color: rgb(243 231 214 / 62%); font-size: .74rem; line-height: 1.5; }
.hero-trust strong { color: #f3e7d6; }
.avatar-stack { display: flex; padding-left: 8px; }
.avatar-stack span { width: 34px; height: 34px; display: grid; place-items: center; margin-left: -8px; color: #231a12; background: #d6ab64; border: 2px solid #1b1510; border-radius: 50%; font: 600 .7rem var(--serif); }
.avatar-stack span:nth-child(2) { background: #b88f6a; }
.avatar-stack span:nth-child(3) { background: #9c7a63; }

.home-hero__visual { min-height: 620px; display: grid; place-items: center; position: relative; }
.hero-phone { position: relative; z-index: 2; width: min(318px, 76vw); padding: 11px; background: linear-gradient(160deg, #3c352d, #1b1611); border-radius: 46px; box-shadow: 0 46px 100px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(255 255 255 / 7%); }
.hero-phone__notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 80px; height: 19px; background: #15100c; border-radius: 0 0 14px 14px; z-index: 4; }
.hero-phone__screen { position: relative; height: 592px; border-radius: 35px; overflow: hidden; background: #0c0a08; }
.hero-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2.2rem 1.4rem; text-align: center; opacity: 0; transform: scale(1.03); transition: opacity 1s ease, transform 1s ease; background: var(--s-bg); color: var(--s-ink); }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hs-kicker { color: var(--s-accent); font: 700 .6rem "DM Sans", sans-serif; letter-spacing: .28em; text-transform: uppercase; }
.hs-names { margin: .2rem 0; font: italic 500 2.7rem/1 var(--serif); }
.hs-names i { color: var(--s-accent); font-size: 1.35rem; }
.hs-orn { color: var(--s-accent); font-size: 1.35rem; }
.hero-countdown { display: flex; gap: .45rem; margin: .4rem 0; }
.hero-countdown span { display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: .45rem .25rem; border: 1px solid var(--s-accent); border-radius: 10px; }
.hero-countdown b { font: 700 1.25rem "DM Sans", sans-serif; line-height: 1; color: var(--s-ink); }
.hero-countdown small { margin-top: .22rem; font: 600 .48rem "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--s-accent); }
.hs-btn { margin-top: .4rem; padding: .58rem 1.2rem; color: var(--s-btn-ink); background: var(--s-accent); border: 0; border-radius: 99px; font: 600 .68rem "DM Sans", sans-serif; letter-spacing: .03em; cursor: default; }

.hero-dots { display: flex; gap: .4rem; justify-content: center; margin-top: 1.3rem; }
.hero-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(243 231 214 / 25%); transition: width .4s ease, background .4s ease; }
.hero-dots i.is-active { width: 22px; border-radius: 99px; background: #dcbd82; }

.hero-live { position: absolute; z-index: 4; right: 2%; top: 10%; display: flex; align-items: center; gap: .45rem; padding: .36rem .75rem; color: #f3e7d6; background: rgb(24 18 13 / 85%); border: 1px solid rgb(220 189 130 / 22%); border-radius: 99px; font: 600 .6rem "DM Sans", sans-serif; letter-spacing: .08em; }
.hero-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #80d29b; animation: hero-pulse 1.9s infinite; }
@keyframes hero-pulse { 0% { box-shadow: 0 0 0 0 rgb(128 210 155 / 55%); } 70% { box-shadow: 0 0 0 9px rgb(128 210 155 / 0%); } 100% { box-shadow: 0 0 0 0 rgb(128 210 155 / 0%); } }

.hero-toast { position: absolute; z-index: 4; left: 0; bottom: 14%; display: flex; align-items: center; gap: .65rem; padding: .72rem .95rem; color: #f3e7d6; background: rgb(26 20 14 / 92%); border: 1px solid rgb(220 189 130 / 25%); border-radius: 15px; box-shadow: 0 20px 48px rgb(0 0 0 / 45%); opacity: 0; transform: translateY(14px) scale(.95); transition: opacity .55s ease, transform .55s ease; }
.hero-toast.is-show { opacity: 1; transform: translateY(0) scale(1); }
.hero-toast__check { width: 32px; height: 32px; flex: none; display: grid; place-items: center; color: #fff; background: #6e8c72; border-radius: 50%; font-size: .82rem; }
.hero-toast strong { display: block; font: 600 .77rem "DM Sans", sans-serif; }
.hero-toast small { display: block; margin-top: .05rem; color: rgb(243 231 214 / 58%); font-size: .62rem; }

@media (max-width: 920px) {
  .home-hero { grid-template-columns: 1fr; gap: 2.5rem; min-height: auto; padding-top: 3.5rem; text-align: center; }
  .home-hero__copy h1 { margin-inline: auto; }
  .home-hero__copy > p { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .hero-toast { left: 50%; transform: translateX(-50%) translateY(14px) scale(.95); }
  .hero-toast.is-show { transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
  .hero-live__dot { animation: none; }
}
.occasion-strip { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding: 1.2rem; overflow: hidden; color: #e2cbc0; background: #3d3430; white-space: nowrap; }
.occasion-strip span { color: #fff; font: italic 500 clamp(1rem, 2vw, 1.25rem) var(--serif); }
.home-section { max-width: 1200px; margin: 0 auto; padding: clamp(5rem, 10vw, 8rem) 1.5rem; }
.home-section__heading { max-width: 680px; margin: 0 auto 3.5rem; text-align: center; }
.home-section__heading h2,
.feature-showcase h2 { margin: .75rem 0 1rem; font: 500 clamp(2.4rem, 5vw, 4rem)/1.05 var(--serif); letter-spacing: -.03em; }
.home-section__heading p { color: var(--muted); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.steps-grid article { min-height: 280px; padding: 1.8rem; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; transition: transform .25s, box-shadow .25s; }
.steps-grid article:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.steps-grid article > span { position: absolute; top: 1.2rem; right: 1.4rem; color: #cdbbb0; font: italic 500 1.1rem var(--serif); }
.step-icon { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 2.2rem; color: var(--brand); background: #f4eae4; border-radius: 50%; font-size: 1.3rem; }
.steps-grid h3,
.everything-grid h3 { font: 600 1.35rem var(--serif); }
.steps-grid p,
.everything-grid p { color: var(--muted); font-size: .88rem; line-height: 1.7; }
.feature-showcase { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 7rem); align-items: center; padding-inline: max(1.5rem, calc((100vw - 1200px) / 2)); background: #f0e5dc; }
.feature-showcase__copy { max-width: 540px; }
.feature-showcase__copy > p { color: var(--muted); line-height: 1.7; }
.feature-showcase__visual { perspective: 900px; }
.feature-dashboard-card { padding: 1.2rem; background: #fff; border: 1px solid #ded2ca; border-radius: 20px; box-shadow: 0 35px 80px rgb(74 48 35 / 18%); transform: rotateY(5deg) rotateX(2deg); }
.fake-window-bar { display: flex; gap: .3rem; padding-bottom: 1rem; border-bottom: 1px solid #eee7e2; }
.fake-window-bar span { width: 7px; height: 7px; background: #d8cdc6; border-radius: 50%; }
.fake-dashboard-title { display: flex; align-items: end; justify-content: space-between; padding: 1.5rem .6rem 1rem; }
.fake-dashboard-title small,
.fake-dashboard-title strong { display: block; }
.fake-dashboard-title small { color: var(--brand); font-size: .55rem; text-transform: uppercase; }
.fake-dashboard-title strong { font: 600 1.5rem var(--serif); }
.fake-dashboard-title b { padding: .5rem .7rem; color: #fff; background: var(--brand); border-radius: 99px; font-size: .6rem; }
.fake-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .6rem; }
.fake-stats span { padding: .8rem; color: var(--muted); background: #f8f4f1; border-radius: 10px; font-size: .55rem; }
.fake-stats strong { display: block; color: var(--ink); font: 600 1.2rem var(--serif); }
.fake-list { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin: .5rem; padding: .7rem; border: 1px solid #eee5df; border-radius: 10px; }
.fake-list > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #6e8c72; border-radius: 50%; font-size: .6rem; }
.fake-list strong,
.fake-list small { display: block; font-size: .62rem; }
.fake-list small { color: var(--muted); }
.fake-list b { color: #52715a; background: #e7f0e9; border-radius: 99px; padding: .3rem .45rem; font-size: .48rem; }
.check-list { display: grid; gap: .9rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: .7rem; font-size: .88rem; font-weight: 600; }
.check-list span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: #6e8c72; border-radius: 50%; font-size: .65rem; }
.everything-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.everything-grid article { padding: 1.5rem; border-left: 1px solid var(--line); }
.everything-grid article > span { display: block; margin-bottom: 1.5rem; color: var(--brand); font-size: 1.7rem; }
.testimonial-section { padding: clamp(5rem, 10vw, 8rem) 1.5rem; color: #fff; background: #3d3430; text-align: center; }
.quote-mark { color: #d6aa91; font: 500 5rem/.5 var(--serif); }
.testimonial-section blockquote { max-width: 850px; margin: 1.5rem auto 2rem; font: italic 500 clamp(1.8rem, 4vw, 3.1rem)/1.25 var(--serif); }
.testimonial-person { display: inline-flex; align-items: center; gap: .7rem; text-align: left; }
.testimonial-person > span { width: 42px; height: 42px; display: grid; place-items: center; color: #3d3430; background: #e7d1c3; border-radius: 50%; font: 600 .7rem var(--serif); }
.testimonial-person strong,
.testimonial-person small { display: block; }
.testimonial-person small { color: #bdb1aa; font-size: .7rem; }
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem .2rem; cursor: pointer; font: 600 1.05rem var(--serif); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--brand); font: 400 1.4rem sans-serif; transition: transform .2s; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list p { max-width: 670px; padding: 0 0 1.3rem; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.home-cta { padding: clamp(5rem, 10vw, 8rem) 1.5rem; color: #fff; background: var(--brand); text-align: center; }
.home-cta > span { color: #efd8ca; }
.home-cta h2 { max-width: 800px; margin: 1rem auto; font: 500 clamp(2.4rem, 6vw, 4.6rem)/1.02 var(--serif); }
.home-cta p { color: rgb(255 255 255 / 75%); }
.home-cta .btn { margin-top: 1.2rem; padding: .8rem 1.5rem; border-radius: 99px; font-weight: 700; }

/* Templates / live-demos gallery — each card is a phone showing the real invite */
.templates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.tpl-card { display: flex; flex-direction: column; align-items: center; padding: 1.8rem 1rem .25rem; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, var(--c-bg, #f6efe8) 0%, #fff 62%); text-decoration: none; box-shadow: 0 6px 20px rgb(63 42 32 / 5%); transition: transform .24s ease, box-shadow .24s ease; }
.tpl-card:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgb(63 42 32 / 13%); }

.tpl-phone { position: relative; width: 208px; height: 424px; padding: 8px; background: #16130f; border-radius: 32px; box-shadow: 0 16px 34px rgb(30 20 14 / 28%), inset 0 0 0 2px rgb(255 255 255 / 7%); }
.tpl-phone__screen { position: absolute; inset: 8px; border-radius: 25px; overflow: hidden; background: #fff; }
.tpl-frame { position: absolute; top: 0; left: 0; width: 384px; height: 820px; border: 0; transform: scale(.5); transform-origin: top left; pointer-events: none; }
.tpl-phone__notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 15px; background: #16130f; border-radius: 0 0 11px 11px; z-index: 3; }
.tpl-phone__glare { position: absolute; inset: 8px; border-radius: 25px; z-index: 2; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / 22%) 0%, rgb(255 255 255 / 0) 34%); }

.tpl-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; margin-top: 1.1rem; padding: .55rem .35rem .15rem; }
.tpl-foot__text strong { display: block; color: #3a302c; font-size: .85rem; font-weight: 600; }
.tpl-foot__text small { color: var(--muted); font-size: .66rem; }
.tpl-cta { flex: none; color: var(--c-accent, var(--brand)); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.templates-more { margin-top: 2.8rem; text-align: center; }
.templates-more .btn { padding: .7rem 1.4rem; border-radius: 99px; }

/* Pricing (pay per event) */
.pricing-section { max-width: 640px; }
.pricing-card { border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 18px 50px rgb(63 42 32 / 8%); overflow: hidden; text-align: center; }
.pricing-card__top { padding: 2.6rem 2rem 2rem; background: linear-gradient(180deg, #faf4ef, #fff); border-bottom: 1px solid var(--line); }
.pricing-badge { display: inline-block; padding: .32rem .85rem; color: var(--brand-dark); background: #f2e4db; border-radius: 99px; font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pricing-amount { display: flex; align-items: flex-start; justify-content: center; gap: .3rem; margin: 1.2rem 0 .4rem; color: #3a302c; }
.pricing-cur { margin-top: .7rem; font: 500 1.6rem var(--serif); color: var(--brand); }
.pricing-num { font: 500 4.6rem/1 var(--serif); letter-spacing: -.03em; }
.pricing-unit { margin-top: .7rem; color: var(--muted); font-size: .72rem; font-weight: 600; text-align: left; line-height: 1.25; }
.pricing-note { color: var(--muted); font-size: .82rem; margin: 0; }
.pricing-features { list-style: none; margin: 0; padding: 1.8rem 2rem .4rem; text-align: left; }
.pricing-features li { position: relative; padding: .55rem 0 .55rem 1.9rem; color: #4a413b; font-size: .92rem; border-bottom: 1px solid #f2ece6; }
.pricing-features li:last-child { border-bottom: 0; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-size: .68rem; font-weight: 700; }
.pricing-card .btn-brand { margin: 1.4rem 2rem .4rem; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; }
.pricing-secure { padding-bottom: 2rem; color: var(--muted); font-size: .74rem; }

@media (max-width: 960px) {
  .templates-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .templates-grid { grid-template-columns: 1fr; }
}

/* Client dashboard */
.dashboard-page { background: #f7f3ef; }
.dashboard-shell { max-width: 1220px; min-height: 70vh; margin: 0 auto; padding: 3.5rem 1.25rem 6rem; }
.dashboard-welcome { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.dashboard-welcome .eyebrow { margin-top: 0; }
.dashboard-welcome h1 { margin: .4rem 0; font: 500 clamp(2.2rem, 5vw, 3.7rem)/1.05 var(--serif); }
.dashboard-welcome p { margin: 0; color: var(--muted); }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 3.5rem; }
.dashboard-stats article { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.stat-icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--brand); background: #f5eae4; border-radius: 50%; }
.dashboard-stats strong,
.dashboard-stats span:not(.stat-icon) { display: block; }
.dashboard-stats strong { font: 600 1.7rem var(--serif); }
.dashboard-stats strong small { color: #a69a93; font-size: .9rem; }
.dashboard-stats div > span { color: var(--muted); font-size: .73rem; }
.section-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.section-heading-row .eyebrow { margin-top: 0; }
.section-heading-row h2 { margin: .25rem 0 0; font: 500 2rem var(--serif); }
.event-count-label { color: var(--muted); font-size: .75rem; }
.event-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.event-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 8px 25px rgb(66 44 32 / 5%); transition: transform .2s, box-shadow .2s; }
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.event-card__cover { min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.2rem; color: #fff; background: radial-gradient(circle at 90% 10%, rgb(255 255 255 / 22%), transparent 35%), var(--card-accent); }
.event-type { align-self: flex-start; padding: .28rem .55rem; background: rgb(255 255 255 / 18%); border: 1px solid rgb(255 255 255 / 25%); border-radius: 99px; font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
.event-card__cover small { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.event-card__cover h3 { margin: .45rem 0 0; font: italic 500 2rem/.95 var(--serif); }
.event-card__body { padding: 1.1rem; }
.event-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.event-card__meta > span:last-child { color: var(--muted); font-size: .6rem; }
.event-response-row { margin: 1.2rem 0; color: var(--muted); font-size: .73rem; }
.event-response-row strong { color: var(--ink); }
.mini-progress { height: 5px; margin-top: .55rem; overflow: hidden; background: #eee8e4; border-radius: 99px; }
.mini-progress span { display: block; height: 100%; background: #6d9276; border-radius: inherit; }
.event-card__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; }
.event-card__actions .btn { padding: .55rem; border-radius: 10px; font-size: .72rem; }
.event-card__actions .btn:only-child { grid-column: 1 / -1; }

/* Guest manager */
.guest-manager-shell { max-width: 1180px; min-height: 70vh; margin: 0 auto; padding: 3.2rem 1.25rem 6rem; }
.guest-manager-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.guest-manager-header .eyebrow { display: block; margin-top: 1.4rem; }
.guest-manager-header h1 { max-width: 760px; margin: .45rem 0; font: 500 clamp(2.35rem, 5vw, 4rem)/1 var(--serif); letter-spacing: -.035em; }
.guest-manager-header p { max-width: 670px; margin: .7rem 0 0; color: var(--muted); line-height: 1.65; }
.guest-total-card { min-width: 155px; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-align: center; box-shadow: 0 12px 35px rgb(66 42 31 / 7%); }
.guest-total-card strong,
.guest-total-card span { display: block; }
.guest-total-card strong { color: var(--brand); font: 500 2.1rem/1 var(--serif); }
.guest-total-card span { margin-top: .3rem; color: var(--muted); font-size: .62rem; }
.guest-manager-notice { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; padding: .85rem 1rem; color: #695128; background: #fff8e8; border: 1px solid #ead7aa; border-radius: 14px; }
.guest-manager-notice > span { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; background: #f3dfb1; border-radius: 50%; }
.guest-manager-notice p { margin: 0; font-size: .72rem; line-height: 1.55; }
.guest-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.guest-entry-card { position: relative; padding: 1.35rem; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 44px rgb(65 42 31 / 7%); }
.guest-entry-card__number { width: 34px; height: 34px; display: grid; place-items: center; position: absolute; top: 1rem; right: 1rem; color: var(--brand); background: #f4e7df; border-radius: 50%; font-size: .58rem; font-weight: 800; }
.guest-entry-card h2 { margin: 0; font: 600 1.35rem var(--serif); }
.guest-entry-card > p { margin: .25rem 0 1.15rem; color: var(--muted); font-size: .72rem; }
.guest-entry-card .form-label { font-size: .72rem; }
.guest-entry-card .form-control { min-height: 46px; }
.guest-entry-card .form-text { font-size: .65rem; }
.template-download { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .85rem; color: #294963; background: #edf5fa; border: 1px solid #d1e2ed; border-radius: 13px; text-decoration: none; }
.template-download > span:first-child { width: 34px; height: 34px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: #466d8c; border-radius: 50%; }
.template-download strong,
.template-download small { display: block; }
.template-download strong { font-size: .72rem; }
.template-download small { margin-top: .12rem; color: #728899; font-size: .6rem; }
.guest-list-section { margin-top: 1.5rem; padding: 1.4rem; background: rgb(255 255 255 / 82%); border: 1px solid var(--line); border-radius: 22px; }
.guest-list { display: grid; gap: .55rem; }
.guest-row { display: grid; grid-template-columns: auto minmax(170px, 1fr) auto auto; align-items: center; gap: .8rem; padding: .8rem; background: #fff; border: 1px solid #eee5df; border-radius: 14px; }
.guest-avatar { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font: 600 1rem var(--serif); }
.guest-identity strong,
.guest-identity small { display: block; }
.guest-identity strong { font-size: .78rem; }
.guest-identity small { margin-top: .15rem; color: var(--muted); font-size: .62rem; overflow-wrap: anywhere; }
.guest-rsvp-status { padding: .32rem .55rem; color: #8b682e; background: #fbefd2; border-radius: 99px; font-size: .56rem; font-weight: 750; }
.guest-rsvp-status--confirmed { color: #467052; background: #e4f0e7; }
.guest-rsvp-status--declined { color: #8b504b; background: #f7e5e3; }
.guest-link-actions { display: flex; align-items: center; justify-content: end; gap: .35rem; }
.guest-link-actions form { margin: 0; }
.guest-link-pending { color: var(--muted); font-size: .6rem; font-style: italic; }
.guest-delete-button { width: 30px; height: 30px; display: grid; place-items: center; color: #9b5e57; background: #faeeec; border: 0; border-radius: 50%; font-size: 1rem; }
.guest-empty-state { padding: 3rem 1rem; color: var(--muted); text-align: center; }
.guest-empty-state > span { color: var(--brand); font-size: 2rem; }
.guest-empty-state h3 { margin: .6rem 0 .3rem; color: var(--ink); font: 600 1.3rem var(--serif); }
.guest-empty-state p { margin: 0; font-size: .72rem; }
.empty-events { padding: 5rem 1.5rem; background: #fff; border: 1px dashed #d9cbc2; border-radius: 22px; text-align: center; }
.empty-events > span { color: var(--brand); font-size: 2.2rem; }
.empty-events h2 { margin: 1rem 0 .6rem; font: 500 2rem var(--serif); }
.empty-events p { max-width: 500px; margin: 0 auto 1.5rem; color: var(--muted); }
.dashboard-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; color: var(--muted); font-size: .8rem; }
.dashboard-pagination a { color: var(--brand); font-weight: 700; }

/* Account */
.account-page { background: #f7f3ef; }
.account-shell { max-width: 980px; min-height: 70vh; margin: 0 auto; padding: 3.5rem 1.25rem 6rem; }
.account-heading { margin-bottom: 2rem; }
.account-heading .eyebrow { margin-top: 1.3rem; }
.account-heading h1 { margin: .35rem 0; font: 500 3rem var(--serif); }
.account-heading p { color: var(--muted); }
.account-grid { display: grid; grid-template-columns: 300px 1fr; gap: 1.25rem; align-items: start; }
.account-profile-card,
.account-settings { padding: 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.account-profile-card { text-align: center; }
.account-profile-card__avatar { width: 78px; height: 78px; display: grid; place-items: center; margin: 0 auto 1rem; color: #fff; background: var(--brand); border: 7px solid #f3e8e1; border-radius: 50%; font: 600 1.5rem var(--serif); }
.account-profile-card h2 { margin: 0; font: 600 1.35rem var(--serif); }
.account-profile-card p { margin: .35rem 0 1.3rem; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.account-settings h2 { margin: 0 0 .7rem; font: 600 1.35rem var(--serif); }
.account-settings > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; padding: 1rem .3rem; color: inherit; border-bottom: 1px solid var(--line); text-decoration: none; }
.account-settings > a:last-child { border-bottom: 0; }
.setting-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--brand); background: #f5eae4; border-radius: 50%; font-weight: 700; }
.setting-icon--muted { color: #796e68; background: #eeeae7; }
.account-settings strong,
.account-settings small { display: block; }
.account-settings strong { font-size: .86rem; }
.account-settings small { margin-top: .12rem; color: var(--muted); font-size: .7rem; }
.account-settings b { color: var(--brand); font-weight: 400; }

/* Authentication and account security */
.auth-page { min-height: 100vh; background: #f8f3ef; }
.auth-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(500px, 1.1fr); position: relative; }
.auth-brand { position: absolute; top: 2rem; left: 2.25rem; z-index: 3; color: #fff; }
.auth-brand:hover { color: #fff; opacity: .85; }
.auth-story { min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; position: relative; padding: 4rem clamp(2rem, 5vw, 5rem); color: #fff; background: radial-gradient(circle at 20% 15%, rgb(255 255 255 / 12%), transparent 22%), linear-gradient(150deg, #6d4b3e, #392f2b 72%); }
.auth-story::before,
.auth-story::after { content: ""; width: 420px; height: 650px; position: absolute; border: 1px solid rgb(238 207 189 / 18%); border-radius: 50%; transform: rotate(38deg); }
.auth-story::before { top: -320px; left: -250px; }
.auth-story::after { right: -300px; bottom: -350px; }
.auth-story__content { max-width: 560px; position: relative; z-index: 2; }
.auth-story .eyebrow { color: #e8c7b5; }
.auth-story blockquote { margin: 1rem 0 2rem; font: italic 500 clamp(2.2rem, 4.4vw, 4.5rem)/1.08 var(--serif); letter-spacing: -.03em; }
.auth-story__feature { display: flex; align-items: center; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / 16%); }
.auth-story__feature > span { width: 35px; height: 35px; display: grid; place-items: center; color: #544037; background: #e8c7b5; border-radius: 50%; }
.auth-story__feature p { margin: 0; }
.auth-story__feature strong,
.auth-story__feature small { display: block; }
.auth-story__feature strong { font-size: .82rem; }
.auth-story__feature small { margin-top: .15rem; color: #c8bbb5; font-size: .7rem; }
.auth-story__ornament { position: absolute; top: 15%; right: 13%; color: rgb(232 199 181 / 35%); font-size: 5rem; transform: rotate(-15deg); }
.auth-form-column { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 1.5rem 2rem; }
.auth-card { width: min(100%, 490px); padding: clamp(1.5rem, 4vw, 2.6rem); background: #fff; border: 1px solid rgb(152 99 78 / 12%); border-radius: 24px; box-shadow: 0 25px 70px rgb(77 48 35 / 11%); }
.auth-card__heading { margin-bottom: 1.6rem; }
.auth-card__heading .eyebrow { margin-top: 0; }

/* Social login (Google) */
.social-login { margin-bottom: .5rem; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; min-height: 51px; padding: .7rem 1rem; color: #3c4043; font-size: .9rem; font-weight: 600; background: #fff; border: 1px solid #dcdcdc; border-radius: 12px; text-decoration: none; transition: background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.btn-google:hover { color: #3c4043; background: #f8f9fa; border-color: #cfcfcf; box-shadow: 0 4px 14px rgb(60 64 67 / 10%); }
.btn-google__icon { flex: none; }
.social-login__divider { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 .2rem; color: var(--muted); font-size: .72rem; }
.social-login__divider::before,
.social-login__divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card__heading h1,
.auth-card > h1 { margin: .65rem 0 .75rem; font: 500 clamp(2.05rem, 4vw, 3rem)/1.05 var(--serif); letter-spacing: -.025em; }
.auth-card__heading p,
.auth-card > p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.65; }
.auth-card__heading--center { text-align: center; }
.auth-card__heading strong { color: var(--ink); overflow-wrap: anywhere; }
.auth-form .mb-3 { margin-bottom: 1rem !important; }
.auth-form-label,
.auth-form .form-label { margin-bottom: .45rem; color: #4e4642; font-size: .76rem; font-weight: 700; }
.auth-form .form-control { min-height: 51px; padding-inline: .9rem; font-size: .9rem; }
.auth-form .form-check { margin: .2rem 0 .8rem; }
.auth-form .form-check-label { color: var(--muted); font-size: .75rem; }
.auth-form .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.auth-form .errorlist,
.auth-card .errorlist { margin: .35rem 0; padding: 0; color: #a3433b; list-style: none; font-size: .72rem; }
.auth-form .alert-block { padding: .7rem; color: #8d3530; background: #fff0ef; border: 0; border-radius: 10px; font-size: .75rem; }
.auth-form .btn-brand { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; }
.auth-form-row { display: flex; justify-content: space-between; margin: -.2rem 0 1rem; }
.auth-form-row a,
.auth-switch a,
.auth-back-link { color: var(--brand); font-size: .75rem; font-weight: 700; text-underline-offset: .2rem; }
.auth-switch { margin: 1.4rem 0 0 !important; padding-top: 1.2rem; border-top: 1px solid var(--line); text-align: center; }
.auth-terms { margin: .8rem auto 0 !important; color: #99908b !important; font-size: .65rem !important; text-align: center; }
.auth-back-link { display: inline-block; margin-bottom: 1.5rem; text-decoration: none; }
.auth-footer-copy { margin: 1rem 0 0; color: #9a8e87; font-size: .65rem; }
.auth-messages .alert { padding: .7rem .8rem; border-radius: 10px; font-size: .75rem; }
.auth-state-icon { width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 1.2rem; color: #fff; background: #6c9075; border: 8px solid #e6efe8; border-radius: 50%; font-size: 1.5rem; }
.auth-state-icon--warning { color: #8a6129; background: #f4dba9; border-color: #fbf0d9; font-weight: 700; }
.auth-state-icon--neutral { color: var(--brand); background: #ead9cf; border-color: #f6eee9; }
.auth-notice { margin: 1.4rem 0; padding: 1rem; background: #f8f4f1; border-radius: 12px; text-align: center; }
.auth-notice strong { font: 600 .9rem var(--serif); }
.auth-notice p { margin: .2rem 0 0; color: var(--muted); font-size: .72rem; }
.auth-help { display: flex; gap: .7rem; margin-top: 1.3rem; padding: .9rem; background: #f8f4f1; border-radius: 12px; }
.auth-help > span { color: var(--brand); }
.auth-help p { margin: 0; }
.auth-help strong,
.auth-help small { display: block; }
.auth-help strong { font-size: .72rem; }
.auth-help small { margin-top: .15rem; color: var(--muted); font-size: .65rem; }
.auth-steps-mini { display: grid; gap: .7rem; margin: 1.5rem 0; }
.auth-steps-mini > div { display: flex; align-items: center; gap: .7rem; padding: .75rem; background: #faf7f4; border-radius: 11px; }
.auth-steps-mini > div > span { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; color: var(--brand); background: #efe2da; border-radius: 50%; font: 600 .75rem var(--serif); }
.auth-steps-mini p { margin: 0; }
.auth-steps-mini strong,
.auth-steps-mini small { display: block; }
.auth-steps-mini strong { font-size: .72rem; }
.auth-steps-mini small { color: var(--muted); font-size: .63rem; }

.account-manage-shell { max-width: 1080px; }
.manage-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.3rem; align-items: start; }
.manage-nav { display: grid; gap: .35rem; padding: .65rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.manage-nav a { display: flex; align-items: center; gap: .65rem; padding: .75rem; color: #625954; border-radius: 10px; font-size: .76rem; font-weight: 650; text-decoration: none; }
.manage-nav a:hover { color: var(--brand); background: #f8f1ed; }
.manage-nav span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--brand); background: #f4e8e1; border-radius: 50%; }
.manage-card { min-width: 0; padding: clamp(1.3rem, 3vw, 2rem); background: #fff; border: 1px solid var(--line); border-radius: 20px; }
.manage-card__heading { display: flex; gap: .85rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.manage-card__heading .setting-icon { flex: 0 0 auto; }
.manage-card__heading h2,
.manage-card > h1 { margin: 0; font: 600 1.45rem var(--serif); }
.manage-card__heading p,
.manage-card > p { margin: .25rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.manage-form { max-width: 560px; }
.manage-form .btn-brand { min-height: 45px; display: inline-flex; margin-top: .7rem; padding: .65rem 1.2rem; }
.manage-secondary-link { display: inline-block; margin-left: .8rem; color: var(--brand); font-size: .72rem; font-weight: 700; }
.password-guidance { display: flex; flex-direction: column; margin: .5rem 0; padding: .8rem; color: var(--muted); background: #f8f4f1; border-radius: 10px; font-size: .68rem; }
.password-guidance strong { color: var(--ink); }
.manage-card .btn-primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.manage-card .card { border-color: var(--line); border-radius: 14px; }
.manage-card table { font-size: .78rem; }
.email-address-list { display: grid; gap: .6rem; }
.email-address-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.email-address-row:has(input:checked) { background: #fbf5f1; border-color: var(--brand); }
.email-address-row input { position: absolute; opacity: 0; }
.email-radio { width: 17px; height: 17px; border: 1px solid #a89a92; border-radius: 50%; }
.email-address-row input:checked + .email-radio { border: 5px solid var(--brand); }
.email-address-copy strong,
.email-address-copy small { display: block; }
.email-address-copy strong { font-size: .78rem; overflow-wrap: anywhere; }
.email-address-copy small { color: var(--muted); font-size: .62rem; }
.email-badge { padding: .3rem .5rem; color: #876333; background: #f7e9cb; border-radius: 99px; font-size: .55rem; font-weight: 700; }
.email-badge--verified { color: #4e7558; background: #e4efe7; }
.email-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.email-actions .btn { font-size: .68rem; }
.manage-divider { height: 1px; margin: 2rem 0 1.5rem; background: var(--line); }
.manage-card h3 { font: 600 1.15rem var(--serif); }
.manage-copy { color: var(--muted); font-size: .72rem; }
.profile-form-card { max-width: 720px; }

.btn-brand {
  color: #fff;
  border: 0;
  background: var(--brand);
  border-radius: 999px;
  padding-inline: 1.5rem;
  box-shadow: 0 8px 24px rgb(117 71 55 / 18%);
}

.btn-brand:hover,
.btn-brand:focus-visible {
  color: #fff;
  background: var(--brand-dark);
  transform: translateY(-1px);
}

.btn-soft {
  color: var(--brand-dark);
  background: #f1e8e1;
  border-radius: 999px;
  padding: .8rem 1rem;
}

.alert-error {
  color: #8d3530;
  background: #fff0ef;
  border-color: #f0cbc8;
}

/* Creator experience */
.creator-page {
  background: linear-gradient(145deg, #fbf8f5, #f4ede7);
}

.creator-page > .mb-1 { margin: 0 !important; }

.creator-page .navbar {
  background: rgb(255 255 255 / 82%) !important;
  border-bottom: 1px solid rgb(231 221 213 / 70%);
  backdrop-filter: blur(12px);
}

.creator-shell,
.editor-shell {
  max-width: 1220px;
  margin: 0 auto;
  padding: 3rem 1rem 5rem;
}

.creator-shell { max-width: 820px; }

.create-event-shell { max-width: 1240px; margin: 0 auto; padding: 3rem 1.25rem 6rem; }
.create-event-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.create-event-heading .eyebrow { margin-top: 1.4rem; }
.create-event-heading h1 { margin: .4rem 0; font: 500 clamp(2.5rem, 5vw, 4rem)/1.02 var(--serif); letter-spacing: -.035em; }
.create-event-heading > div:first-child > p { max-width: 650px; margin: .65rem 0 0; color: var(--muted); }
.creation-time { display: flex; align-items: center; gap: .7rem; min-width: 220px; padding: .85rem 1rem; background: rgb(255 255 255 / 72%); border: 1px solid var(--line); border-radius: 14px; }
.creation-time > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--brand); background: #f4e7df; border-radius: 50%; }
.creation-time p { margin: 0; }
.creation-time strong,
.creation-time small { display: block; }
.creation-time strong { font-size: .73rem; }
.creation-time small { margin-top: .1rem; color: var(--muted); font-size: .62rem; }
.create-event-grid { display: grid; grid-template-columns: minmax(0, 1fr) 365px; gap: 1.5rem; align-items: start; }
.create-event-form-card { padding: clamp(1.25rem, 3vw, 2.3rem); }
.creation-guide { position: sticky; top: 1.3rem; }
.creation-guide__card { min-height: 440px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; padding: 2.2rem 1.5rem; color: var(--guide-ink, #4b3c35); background: radial-gradient(circle at 15% 12%, var(--guide-surface, #fff), transparent 30%), var(--guide-bg, #f1e0d4); border: 1px solid color-mix(in srgb, var(--guide-accent, #98634e) 20%, transparent); border-radius: 24px; text-align: center; box-shadow: 0 18px 50px rgb(74 45 33 / 10%); transition: color .3s, background .3s; }
.creation-guide__card::before,
.creation-guide__card::after { content: ""; width: 180px; height: 270px; position: absolute; border: 1px solid rgb(152 99 78 / 18%); border-radius: 50%; transform: rotate(38deg); }
.creation-guide__card::before { top: -150px; left: -110px; }
.creation-guide__card::after { right: -130px; bottom: -140px; }
.creation-guide__kicker { position: absolute; top: 1.2rem; color: var(--brand); font-size: .55rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.creation-guide__icon { margin-bottom: 1rem; color: var(--brand); }
.creation-guide__card > small { color: var(--brand); font-size: .6rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.creation-guide__card h2 { max-width: 300px; margin: .8rem 0; font: italic 500 2.5rem/.98 var(--guide-heading, var(--serif)); overflow-wrap: anywhere; }
.creation-guide__divider { width: 130px; display: flex; align-items: center; gap: .55rem; margin: .65rem 0 1rem; color: var(--brand); }
.creation-guide__divider span { height: 1px; flex: 1; background: currentcolor; opacity: .4; }
.creation-guide__divider i { font-style: normal; }
.creation-guide__card blockquote { max-width: 285px; margin: 0; color: #75645d; font: italic 500 .9rem/1.65 var(--serif); }
.creation-guide__tips { margin-top: .9rem; padding: 1.1rem; background: rgb(255 255 255 / 68%); border: 1px solid var(--line); border-radius: 16px; }
.creation-guide__tips > strong { font: 600 .85rem var(--serif); }
.creation-guide__tips ul { display: grid; gap: .45rem; margin: .7rem 0 .9rem; padding: 0; list-style: none; }
.creation-guide__tips li { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .68rem; }
.creation-guide__tips li span { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: #708d77; border-radius: 50%; font-size: .5rem; }
.creation-guide__tips > p { margin: 0; padding-top: .75rem; color: #8a7d76; border-top: 1px solid var(--line); font-size: .62rem; }

/* ── Guided create flow: step cards + visual type/style pickers ── */
.create-steps { display: grid; gap: 1.25rem; }
.create-step { padding: clamp(1.1rem, 2.5vw, 1.8rem); }
.create-step__head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.create-step__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font: 700 .9rem var(--serif); }
.create-step__head h2 { margin: 0; font: 600 1.25rem var(--serif); }
.create-step__head p { margin: .12rem 0 0; color: var(--muted); font-size: .8rem; }
.create-step--error { border-color: #e6a6a0; box-shadow: 0 0 0 1px #e6a6a0; }
.create-step__err { margin: .7rem 0 0; color: #b4524a; font-size: .78rem; font-weight: 600; }

.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .7rem; }
.type-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: 1rem .7rem; text-align: center; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease; }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card:hover { transform: translateY(-2px); border-color: #e0cdbf; }
.type-card__icon { font-size: 1.6rem; line-height: 1; }
.type-card strong { color: #3a302c; font-size: .88rem; }
.type-card small { color: var(--muted); font-size: .66rem; }
.type-card:has(input:checked) { border-color: var(--brand); background: #fbf4ef; box-shadow: 0 8px 20px rgb(152 99 78 / 14%); }
.type-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.style-empty { margin: 0; padding: 1.4rem; text-align: center; color: var(--muted); font-size: .85rem; background: #faf5f0; border: 1px dashed var(--line); border-radius: 12px; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: .7rem; }
.style-card { position: relative; display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-card:hover { transform: translateY(-2px); border-color: #e0cdbf; }
.style-card__swatch { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--c-bg); color: var(--c-accent); font-size: 1.1rem; border: 1px solid rgb(0 0 0 / 6%); }
.style-card__text strong { display: block; color: #3a302c; font-size: .82rem; line-height: 1.15; }
.style-card__text small { color: var(--muted); font-size: .64rem; }
.style-card:has(input:checked) { border-color: var(--c-accent); box-shadow: 0 8px 20px rgb(0 0 0 / 10%); }
.style-card:has(input:checked) .style-card__swatch { outline: 2px solid var(--c-accent); outline-offset: 1px; }

.create-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: .3rem .4rem; }
.create-actions .btn { min-height: 52px; display: inline-flex; align-items: center; gap: .8rem; }
.create-actions small { color: var(--muted); font-size: .72rem; }

@media (max-width: 860px) {
  .create-event-grid { grid-template-columns: 1fr; }
  .creation-guide { position: static; order: -1; }
}

.creator-heading { margin-bottom: 1.75rem; }
.creator-heading h1,
.editor-toolbar h1 {
  margin: .35rem 0;
  font: 500 clamp(2rem, 5vw, 3.25rem)/1.1 var(--serif);
}

.creator-heading p { color: var(--muted); font-size: 1.05rem; }
.eyebrow,
.eyebrow-link {
  display: inline-block;
  color: var(--brand);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}
.eyebrow { display: block; margin-top: 1.5rem; }

.editor-card {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: #fff;
  border: 1px solid rgb(231 221 213 / 80%);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.editor-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
  padding: .55rem;
  overflow-x: auto;
  position: sticky;
  top: .75rem;
  z-index: 20;
  background: rgb(255 255 255 / 88%);
  border: 1px solid rgb(226 215 207 / 78%);
  border-radius: 16px;
  box-shadow: 0 10px 35px rgb(67 44 33 / 8%);
  backdrop-filter: blur(16px);
}
.editor-progress__label { min-width: max-content; margin-inline: .35rem .2rem; color: #6f645e; font: 600 .72rem var(--serif); }
.editor-progress a {
  min-width: max-content;
  padding: .45rem .75rem;
  color: #8b827c;
  background: #f7f3f0;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s, background .2s, transform .2s;
}
.editor-progress a:hover { color: var(--brand-dark); background: #f1e6df; transform: translateY(-1px); }
.editor-progress .is-active { color: #fff; background: var(--brand); }
.editor-progress__save { min-height: 34px; display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: .4rem .72rem; color: #fff; background: var(--ink); border: 0; border-radius: 999px; font-size: .65rem; font-weight: 750; }
.editor-progress__save:hover { background: var(--brand-dark); }
.editor-step-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.editor-page .editor-step-nav { top: 76px; }
.editor-step-nav [data-editor-step] { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: .55rem; padding: .5rem .6rem; color: #756a63; background: #f7f3f0; border: 1px solid transparent; border-radius: 12px; text-align: left; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.editor-step-nav [data-editor-step]:hover { color: #5b4940; background: #f2e8e2; transform: translateY(-1px); }
.editor-step-nav [data-editor-step] > i { width: 30px; height: 30px; display: grid; place-items: center; color: #89614e; background: #eee0d8; border-radius: 9px; font-size: .55rem; font-style: normal; font-weight: 800; }
.editor-step-nav [data-editor-step] strong,
.editor-step-nav [data-editor-step] small { display: block; min-width: 0; }
.editor-step-nav [data-editor-step] strong { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.editor-step-nav [data-editor-step] small { margin-top: .1rem; overflow: hidden; color: #998d86; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
.editor-step-nav [data-editor-step].is-active { color: #fff; background: var(--brand); border-color: var(--brand); box-shadow: 0 7px 18px rgb(117 71 55 / 20%); }
.editor-step-nav [data-editor-step].is-active > i { color: var(--brand); background: #fff; }
.editor-step-nav [data-editor-step].is-active small { color: #eadbd3; }
/* The section tabs are the single section navigation. Hide only the redundant
   form/preview toggle on desktop (both columns show side by side there). */
@media (min-width: 901px) {
  .editor-page .editor-view-switch { display: none; }
}
.editor-step-panel { min-width: 0; scroll-margin-top: 158px; }
.editor-step-heading { margin: 0 0 .8rem; padding: .35rem .2rem .65rem; }
.editor-step-heading > span { color: var(--brand); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.editor-step-heading h2 { margin: .25rem 0 0; color: var(--ink); font: 500 clamp(1.75rem, 3vw, 2.35rem)/1.06 var(--serif); }
.editor-step-heading p { max-width: 630px; margin: .35rem 0 0; color: #82766f; font-size: .74rem; line-height: 1.5; }
.editor-step-actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin: -.15rem 0 1rem; padding: .75rem .85rem; color: #8c7f77; background: rgb(255 255 255 / 75%); border: 1px solid #e6dcd6; border-radius: 15px; font-size: .63rem; }
.editor-step-actions button { min-height: 40px; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; color: #fff; background: var(--ink); border: 1px solid var(--ink); border-radius: 10px; font-size: .68rem; font-weight: 750; }
.editor-step-actions button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.editor-step-actions button.is-secondary { color: #66574f; background: #fff; border-color: #d9cbc3; }
.editor-step-actions button.is-secondary:hover { color: var(--brand-dark); border-color: #bc9b89; }

.form-section {
  margin: 0 0 1.75rem;
  padding: 0 0 1.4rem;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.form-section legend { margin-bottom: .2rem; font: 500 1.45rem/1.3 var(--serif); }
.form-section-copy { margin-bottom: 1rem; color: var(--muted); font-size: .88rem; }
.message-assistant-intro { display: flex; align-items: flex-start; gap: .7rem; margin: .3rem 0 1rem; padding: .8rem; color: #705b51; background: #f8f0eb; border-radius: 12px; }
.message-assistant-intro > span { color: var(--brand); }
.message-assistant-intro p { margin: 0; font-size: .75rem; line-height: 1.55; }
.message-assistant-intro strong { color: var(--ink); }
.message-assistant { padding: 1rem; border: 1px solid #e8dbd3; border-radius: 16px; background: #fefdfc; }
.message-assistant textarea { resize: vertical; line-height: 1.65; }
.message-editor-meta { display: flex; justify-content: space-between; gap: 1rem; margin: -.35rem .1rem .9rem; color: #978b84; font-size: .62rem; }
.message-editor-meta b { color: var(--brand); font-weight: 700; }
.message-live-preview { margin: 0; padding: .85rem 1rem; color: #755c51; background: #f7efea; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; font: italic 500 .83rem/1.55 var(--serif); }
.rich-text-source { width: 1px !important; height: 1px !important; position: absolute !important; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.rich-text-editor { margin-bottom: 1rem; overflow: hidden; border: 1px solid #ddcfc6; border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.rich-text-editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 12%); }
.rich-text-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem; background: #f8f3ef; border-bottom: 1px solid #eadfd8; }
.rich-text-toolbar button { min-height: 34px; padding: .35rem .62rem; color: #5f514a; background: #fff; border: 1px solid #dfd3cc; border-radius: 8px; font-size: .7rem; font-weight: 700; }
.rich-text-toolbar button:hover,
.rich-text-toolbar button:focus-visible { color: #fff; background: var(--brand); border-color: var(--brand); }
.rich-text-canvas { min-height: 130px; padding: .9rem 1rem; color: var(--ink); font-size: .9rem; line-height: 1.7; outline: 0; }
.rich-text-canvas:empty::before { content: "Escribe aquí…"; color: #aaa09a; pointer-events: none; }
.rich-text-canvas p { margin: 0 0 .7rem; }
.rich-text-canvas h3 { margin: .45rem 0 .7rem; font: 500 1.3rem/1.2 var(--serif); }
.rich-text-canvas blockquote { margin: .6rem 0; padding-left: .8rem; color: #806354; border-left: 3px solid var(--brand); font: italic 500 1rem/1.6 var(--serif); }
.rich-text-canvas ul,
.rich-text-canvas ol { padding-left: 1.3rem; }
.rich-text-status { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem .65rem; color: #8e837d; background: #fcfaf8; border-top: 1px solid #eee5df; font-size: .6rem; }
.rich-text-status .is-over { color: var(--danger); font-weight: 800; }
.hero-image-style-picker { margin: .15rem 0 1rem; }
.hero-image-style-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .55rem 0 .35rem; }
.hero-image-style-option { display: block; position: relative; padding: .55rem; border: 1px solid #e1d4cc; border-radius: 13px; cursor: pointer; }
.hero-image-style-option:has(input:checked) { border: 2px solid var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 10%); }
.hero-image-style-option input { position: absolute; opacity: 0; }
.hero-image-style-option > strong { display: block; margin-top: .45rem; font-size: .66rem; line-height: 1.25; }
.hero-image-style-option__visual { height: 58px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #f4ece7; border-radius: 8px; }
.hero-image-style-option__visual i { background: linear-gradient(145deg, #738571, #354e46); }
.hero-image-style-option__visual b { width: 48%; height: 4px; place-self: center; background: #a7765f; border-radius: 9px; box-shadow: 0 9px #d8c5ba, 0 -9px #d8c5ba; }
.hero-image-style-option--immersive .hero-image-style-option__visual { display: grid; background: linear-gradient(145deg, #65776a, #283e38); }
.hero-image-style-option--immersive .hero-image-style-option__visual i { display: none; }
.hero-image-style-option--immersive .hero-image-style-option__visual b { grid-column: 1 / -1; background: #fff; box-shadow: 0 9px rgb(255 255 255 / 55%), 0 -9px rgb(255 255 255 / 55%); }
.hero-image-style-option--divider .hero-image-style-option__visual { grid-template-columns: 1fr; grid-template-rows: 1fr 1.2fr; }
.hero-image-style-option--divider .hero-image-style-option__visual i { grid-row: 2; }
.hero-image-style-option--divider .hero-image-style-option__visual b { grid-row: 1; grid-column: 1; }
.mobile-hero-style-picker { margin: 1.2rem 0 1rem; padding-top: 1rem; border-top: 1px solid #eee3dc; }
.mobile-hero-style-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .55rem 0 .35rem; }
.mobile-hero-style-option { display: block; position: relative; padding: .55rem; border: 1px solid #e1d4cc; border-radius: 13px; cursor: pointer; }
.mobile-hero-style-option:has(input:checked) { border: 2px solid var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 10%); }
.mobile-hero-style-option input { position: absolute; opacity: 0; }
.mobile-hero-style-option > strong { display: block; margin-top: .45rem; font-size: .66rem; line-height: 1.25; }
.mobile-hero-style-option__visual { width: 58px; height: 82px; display: grid; grid-template-rows: 1.25fr .75fr; position: relative; margin-inline: auto; overflow: hidden; background: #f8f1ed; border: 1px solid #e7dbd3; border-radius: 8px; }
.mobile-hero-style-option__visual i { grid-row: 1; background: linear-gradient(160deg, #799078, #2c4840); }
.mobile-hero-style-option__visual b { position: absolute; top: 35px; inset-inline: 5px; color: #fff; font: italic 500 .8rem/1 var(--serif); text-align: center; text-shadow: 0 1px 3px rgb(0 0 0 / 35%); }
.mobile-hero-style-option__visual em { width: 60%; height: 3px; place-self: center; background: #b88973; border-radius: 5px; box-shadow: 0 7px #dcc8bd, 0 -7px #dcc8bd; }
.mobile-hero-style-option--stacked .mobile-hero-style-option__visual b { top: 61px; color: #75584c; text-shadow: none; }
.mobile-hero-style-option--stacked .mobile-hero-style-option__visual em { display: none; }
.mobile-hero-style-option--fullscreen .mobile-hero-style-option__visual { grid-template-rows: 1fr; }
.mobile-hero-style-option--fullscreen .mobile-hero-style-option__visual i { grid-row: 1; }
.mobile-hero-style-option--fullscreen .mobile-hero-style-option__visual b { top: 56px; }

.countdown-picker { margin: .35rem 0 1.25rem; }
.countdown-picker > p { margin: -.2rem 0 .85rem; color: var(--muted); font-size: .74rem; }
.countdown-picker__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.countdown-option { min-width: 0; display: block; position: relative; padding: .8rem; background: #fefdfc; border: 1px solid #e2d8d1; border-radius: 15px; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.countdown-option:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 10px 24px rgb(75 45 34 / 8%); }
.countdown-option:has(input:focus-visible) { outline: 3px solid rgb(152 99 78 / 18%); outline-offset: 2px; }
.countdown-option:has(input:checked) { border: 2px solid var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 10%); }
.countdown-option > input { position: absolute; opacity: 0; pointer-events: none; }
.countdown-option > strong { display: block; margin-top: .65rem; font-size: .72rem; }
.countdown-option__check { width: 23px; height: 23px; display: grid; place-items: center; position: absolute; top: .5rem; right: .5rem; z-index: 2; color: #fff; background: var(--brand); border-radius: 50%; font-size: .58rem; opacity: 0; transform: scale(.72); transition: .2s; }
.countdown-option:has(input:checked) .countdown-option__check { opacity: 1; transform: scale(1); }
.opening-style-picker { margin: 1.35rem 0; padding: 1rem; background: linear-gradient(145deg, #fff, #faf5f1); border: 1px solid #e5d8d0; border-radius: 17px; }
.opening-style-picker__heading strong,
.opening-style-picker__heading small { display: block; }
.opening-style-picker__heading strong { color: var(--ink); font: 550 1.05rem var(--serif); }
.opening-style-picker__heading small { margin-top: .15rem; color: #8d817a; font-size: .66rem; }
.opening-style-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .8rem 0 .45rem; }
.opening-style-option { min-width: 0; display: block; position: relative; padding: .5rem; background: #fff; border: 1px solid #e3d8d1; border-radius: 13px; cursor: pointer; text-align: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.opening-style-option:hover { border-color: var(--brand); transform: translateY(-2px); }
.opening-style-option:has(input:focus-visible) { outline: 3px solid rgb(152 99 78 / 18%); outline-offset: 2px; }
.opening-style-option:has(input:checked) { border: 2px solid var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 10%); }
.opening-style-option input { position: absolute; opacity: 0; pointer-events: none; }
.opening-style-option > strong { display: block; min-height: 2.25em; margin-top: .4rem; color: #594b44; font-size: .57rem; line-height: 1.2; }
.opening-style-option__visual { height: 58px; display: grid; place-items: center; position: relative; overflow: hidden; color: var(--brand); background: #f8f0eb; border-radius: 9px; }
.opening-style-option__visual i,
.opening-style-option__visual b { display: block; position: absolute; }
.opening-style-option__visual em { display: none; font-style: normal; }
.opening-style-option--none .opening-style-option__visual::before { content: "—"; color: #9b8e87; font-size: 1.2rem; }
.opening-style-option--envelope .opening-style-option__visual i { width: 40px; height: 27px; background: #fff; border: 1px solid #b98c77; border-radius: 2px; }
.opening-style-option--envelope .opening-style-option__visual i::after { content: ""; position: absolute; inset: 0; background: #ead9cf; clip-path: polygon(0 0, 100% 0, 50% 60%); }
.opening-style-option--envelope .opening-style-option__visual b { width: 9px; height: 9px; background: var(--brand); border: 2px solid #fff; border-radius: 50%; }
.opening-style-option--heart .opening-style-option__visual::before { content: "♥"; font-size: 2.4rem; filter: drop-shadow(0 5px 7px rgb(152 99 78 / 18%)); }
.opening-style-option--curtains .opening-style-option__visual { background: #3d3430; }
.opening-style-option--curtains .opening-style-option__visual::before,
.opening-style-option--curtains .opening-style-option__visual::after { content: ""; width: 43%; height: 100%; position: absolute; top: 0; background: repeating-linear-gradient(90deg, #81503d 0 28%, #ad765f 29% 55%); }
.opening-style-option--curtains .opening-style-option__visual::before { left: 0; }
.opening-style-option--curtains .opening-style-option__visual::after { right: 0; }
.opening-style-option--curtains .opening-style-option__visual em { display: block; z-index: 1; color: #fff; }
.opening-style-option--sparkle .opening-style-option__visual em { display: block; font-size: 2rem; }
.opening-style-option--sparkle .opening-style-option__visual::before,
.opening-style-option--sparkle .opening-style-option__visual::after { content: "✧"; position: absolute; color: #c8a38f; font-size: .7rem; }
.opening-style-option--sparkle .opening-style-option__visual::before { top: 9px; left: 15px; }
.opening-style-option--sparkle .opening-style-option__visual::after { right: 14px; bottom: 10px; }
.opening-style-option--storybook .opening-style-option__visual i { width: 20px; height: 34px; left: calc(50% - 20px); background: #fff; border: 1px solid #b98c77; border-radius: 3px 0 0 3px; transform: skewY(-5deg); }
.opening-style-option--storybook .opening-style-option__visual b { width: 20px; height: 34px; right: calc(50% - 20px); background: #fff; border: 1px solid #b98c77; border-radius: 0 3px 3px 0; transform: skewY(5deg); }
.opening-style-option--doors .opening-style-option__visual i,
.opening-style-option--doors .opening-style-option__visual b { width: 21px; height: 38px; top: 10px; background: linear-gradient(90deg, #79533f, #ad7d64); border: 1px solid #624333; }
.opening-style-option--doors .opening-style-option__visual i { left: calc(50% - 21px); }
.opening-style-option--doors .opening-style-option__visual b { right: calc(50% - 21px); }
.opening-style-option--doors .opening-style-option__visual::after { content: "✦"; z-index: 1; color: #f8e3c4; font-size: .55rem; }
.opening-style-option--petals .opening-style-option__visual::before { content: "❧"; color: #b16f74; font-size: 2.3rem; transform: rotate(-22deg); text-shadow: 17px -8px #dfb7b7, -15px 9px #d4969b; }
.opening-style-option--balloons .opening-style-option__visual::before { content: "●  ●"; color: #bd7580; font-size: 1.35rem; letter-spacing: .15rem; text-shadow: 9px 13px #d8ae6e; transform: translateY(-6px); }
.opening-style-option--premiere .opening-style-option__visual { color: #fff; background: #2e2927; }
.opening-style-option--premiere .opening-style-option__visual::before { content: "3 · 2 · 1"; font: 600 1rem var(--serif); letter-spacing: .08em; }
.opening-style-option--constellation .opening-style-option__visual { color: #f5dfaa; background: #172438; }
.opening-style-option--constellation .opening-style-option__visual::before { content: "✦  ·  ✧"; font-size: 1rem; letter-spacing: .2rem; transform: rotate(-12deg); text-shadow: 15px 13px #fff, -12px 14px #89acd0; }
.countdown-option__demo { min-height: 65px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; gap: .25rem; padding: .55rem; color: #5d4a40; background: #f5efeb; border-radius: 10px; }
.countdown-option__demo span { min-width: 0; text-align: center; }
.countdown-option__demo strong,
.countdown-option__demo small { display: block; }
.countdown-option__demo strong { font: 500 .95rem/1 var(--serif); }
.countdown-option__demo small { margin-top: .2rem; font-size: .39rem; letter-spacing: .05em; text-transform: uppercase; }
.countdown-option--rings .countdown-option__demo span { aspect-ratio: 1; display: grid; place-content: center; border: 1px solid #b9907f; border-radius: 50%; }
.countdown-option--flip .countdown-option__demo { color: #fff; background: #4b3931; }
.countdown-option--flip .countdown-option__demo span { padding: .35rem .1rem; background: #201a17; border-radius: 4px; box-shadow: inset 0 1px rgb(255 255 255 / 12%); }
.countdown-option--spotlight .countdown-option__demo span:first-child { grid-column: span 2; }
.countdown-option--spotlight .countdown-option__demo span:first-child strong { color: var(--brand); font-size: 1.7rem; }
.countdown-option--spotlight .countdown-option__demo span:last-child { display: none; }
.experience-toggle { min-height: 48px; display: flex; align-items: center; margin-top: 1.85rem; padding: .65rem .8rem; background: #f7f2ef; border: 1px solid #e6dbd4; border-radius: 12px; }
.experience-toggle .form-check { margin: 0; }

.section-builder { display: grid; gap: 1rem; }
.section-builder-group { padding: .8rem; background: #f8f4f1; border: 1px solid #e8ddd7; border-radius: 18px; }
.section-builder-group__heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .25rem .25rem .8rem; }
.section-builder-group__heading > span { align-self: start; padding: .35rem .5rem; color: #815e4d; background: #eee0d8; border-radius: 99px; font-size: .53rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.section-builder-group__heading h3 { margin: 0; color: #443832; font: 500 1.05rem var(--serif); }
.section-builder-group__heading p { margin: .15rem 0 0; color: #8d8078; font-size: .6rem; line-height: 1.4; }
.section-builder-group__heading > small { color: #9b8d85; font-size: .55rem; white-space: nowrap; }
.section-builder-group__modules { display: grid; gap: .55rem; }
.section-module { overflow: hidden; background: #fefdfc; border: 1px solid #e6ddd7; border-radius: 15px; transition: border-color .2s, box-shadow .2s; }
.section-module[open] { border-color: #d8c3b8; box-shadow: 0 10px 28px rgb(68 45 34 / 7%); }
.section-module summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .75rem; padding: .9rem; cursor: pointer; list-style: none; }
.section-module summary::-webkit-details-marker { display: none; }
.section-module__number { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); background: #f5ebe5; border-radius: 50%; font-size: .62rem; font-weight: 800; }
.section-module summary strong,
.section-module summary small { display: block; }
.section-module summary strong { color: var(--ink); font: 500 .91rem var(--serif); }
.section-module summary small { margin-top: .15rem; color: var(--muted); font-size: .62rem; }
.section-module__status { color: var(--brand); font-size: .6rem; font-weight: 750; }
.section-module__status::after { content: "⌄"; display: inline-block; margin-left: .35rem; transition: transform .2s; }
.section-module[open] .section-module__status::after { transform: rotate(180deg); }
.section-module__body { padding: .2rem 1rem 1rem 3.95rem; border-top: 1px solid #eee6e1; }
.section-module__body > .form-check:first-child { margin-top: .9rem; }
.section-toggle-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .9rem; }
.section-toggle-row .form-check,
.section-module__body > .form-check { padding: .65rem .75rem .65rem 2.35rem; background: #f7f2ef; border-radius: 10px; }
.section-module__hint { margin: .45rem 0 0; color: #91847d; font-size: .66rem; line-height: 1.5; }
.music-upload-panel { margin-top: .85rem; padding: 1rem; background: linear-gradient(135deg, #f7f0eb, #fdfbf9); border: 1px solid #e2d3ca; border-radius: 15px; }
.music-upload-panel__intro { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; }
.music-upload-panel__intro > span { width: 40px; height: 40px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; box-shadow: 0 8px 18px rgb(117 71 55 / 18%); }
.music-upload-panel__intro strong,
.music-upload-panel__intro small { display: block; }
.music-upload-panel__intro strong { color: var(--ink); font-size: .8rem; }
.music-upload-panel__intro small { margin-top: .15rem; color: var(--muted); font-size: .64rem; }
.music-upload-panel input[type="file"] { width: 100%; min-height: 48px; padding: .35rem; color: var(--muted); background: #fff; border: 1px dashed #cdb5a8; border-radius: 11px; font-size: .7rem; cursor: pointer; }
.music-upload-panel input[type="file"]::file-selector-button { min-height: 38px; margin-right: .7rem; padding: .55rem .8rem; color: #fff; background: var(--ink); border: 0; border-radius: 8px; font-weight: 750; cursor: pointer; }
.music-upload-panel__status { margin: .6rem 0 .4rem; color: #66584f; font-size: .66rem; font-weight: 700; overflow-wrap: anywhere; }
.music-upload-panel__player { width: 100%; height: 42px; display: block; margin-top: .5rem; }
.music-upload-panel__player[hidden] { display: none; }
.music-upload-panel__remove { margin-top: .65rem; padding: .55rem .65rem; color: #8a4b46; background: #fff4f2; border-radius: 10px; font-size: .68rem; }
.music-upload-panel__remove .form-check { margin: 0; }
.music-url-alternative { margin-top: 1rem; padding-top: 1rem; position: relative; border-top: 1px solid #eadfd8; }
.music-url-alternative > span { display: table; margin: -1.45rem auto .65rem; padding: 0 .55rem; color: #94867e; background: #fefdfc; font-size: .58rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.image-upload { margin-top: .85rem; }
.image-upload > input[type="file"] { width: 1px; height: 1px; overflow: hidden; position: absolute; opacity: 0; }
.image-upload__dropzone { min-height: 132px; display: flex; align-items: center; justify-content: center; gap: .85rem; padding: 1.2rem; color: #756a63; background: linear-gradient(135deg, #fdfbf9, #f8f1ec); border: 1.5px dashed #d2b9ab; border-radius: 16px; text-align: left; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.image-upload__dropzone:hover,
.image-upload.is-dragging .image-upload__dropzone { color: var(--brand-dark); background: #f7ebe4; border-color: var(--brand); transform: translateY(-1px); }
.image-upload:focus-within .image-upload__dropzone { outline: 3px solid rgb(152 99 78 / 16%); outline-offset: 2px; }
.image-upload__icon { width: 42px; height: 42px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-size: 1.25rem; box-shadow: 0 8px 18px rgb(117 71 55 / 18%); }
.image-upload__dropzone strong,
.image-upload__dropzone small { display: block; }
.image-upload__dropzone strong { color: var(--ink); font-size: .8rem; }
.image-upload__dropzone small { margin-top: .25rem; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.image-upload__current { margin-bottom: .7rem; }
.image-upload__current:empty { display: none; }
.image-upload__current figure { max-width: 280px; margin: 0; overflow: hidden; position: relative; border-radius: 13px; }
.image-upload__current img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.image-upload__current figcaption { position: absolute; right: .45rem; bottom: .45rem; padding: .25rem .45rem; color: #fff; background: rgb(35 27 23 / 72%); border-radius: 99px; font-size: .52rem; backdrop-filter: blur(6px); }
.image-upload__previews { display: flex; gap: .55rem; margin-top: .65rem; overflow-x: auto; }
.image-upload__previews:empty { display: none; }
.image-upload__previews figure { min-width: 120px; margin: 0; overflow: hidden; position: relative; border: 2px solid #fff; border-radius: 11px; box-shadow: 0 5px 16px rgb(58 39 30 / 12%); }
.image-upload__previews img { width: 100%; aspect-ratio: 4 / 3; display: block; object-fit: cover; }
.image-upload__previews figcaption { position: absolute; inset: auto 0 0; padding: .3rem; overflow: hidden; color: #fff; background: linear-gradient(transparent, rgb(30 23 20 / 75%)); font-size: .5rem; text-overflow: ellipsis; white-space: nowrap; }
.uploaded-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin: .85rem 0; }
.uploaded-gallery__item { min-width: 0; margin: 0; overflow: hidden; position: relative; border-radius: 11px; }
.uploaded-gallery__item img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; }
.uploaded-gallery__item > span { position: absolute; right: .3rem; bottom: .3rem; padding: .25rem .4rem; color: #fff; background: rgb(45 32 27 / 78%); border-radius: 99px; font-size: .5rem; cursor: pointer; backdrop-filter: blur(6px); }
.image-remove-option { margin-top: .55rem; padding: .55rem .65rem; color: #8a4b46; background: #fff4f2; border-radius: 10px; font-size: .7rem; }
.image-remove-option .form-check { margin: 0; }

.theme-picker { margin-top: 1.2rem; }
.birthday-audience-field { margin: .9rem 0 1.15rem; padding: 1rem; background: linear-gradient(135deg, #f8f2ed, #fdfbf9); border: 1px solid #e1d2c8; border-radius: 14px; }
.birthday-audience-field[hidden] { display: none; }
.birthday-audience-field label { color: var(--ink); }
.birthday-audience-field .form-text { margin-top: .35rem; font-size: .7rem; }
.theme-picker__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.theme-picker__heading label { margin: 0; }
.theme-picker__heading p { margin: .2rem 0 0; color: var(--muted); font-size: .72rem; }
.theme-picker__heading > span { min-width: max-content; color: var(--brand); font-size: .65rem; font-weight: 700; }
.theme-picker__prompt { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; color: #745b50; background: #f8f0eb; border: 1px dashed #d9c1b4; border-radius: 12px; font-size: .72rem; }
.theme-picker__prompt.is-hidden { display: none; }
.theme-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.theme-option { min-width: 0; overflow: hidden; position: relative; background: #fff; border: 1px solid #ded5cf; border-radius: 15px; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.theme-option[hidden] { display: none; }
.theme-option:hover { transform: translateY(-3px); border-color: var(--theme-accent); box-shadow: 0 12px 28px rgb(62 42 31 / 10%); }
.theme-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--theme-accent) 28%, transparent); outline-offset: 2px; }
.theme-option:has(input:checked) { border: 2px solid var(--theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 14%, transparent); }
.theme-option > input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option__check { width: 25px; height: 25px; display: grid; place-items: center; position: absolute; top: .55rem; right: .55rem; z-index: 2; color: #fff; background: var(--theme-accent); border: 2px solid rgb(255 255 255 / 78%); border-radius: 50%; font-size: .58rem; opacity: 0; transform: scale(.7); transition: .2s; }
.theme-option:has(input:checked) .theme-option__check { opacity: 1; transform: scale(1); }
.theme-option__preview { min-height: 165px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; padding: 1.2rem .5rem; color: var(--theme-ink); background: radial-gradient(circle at 15% 15%, var(--theme-surface), transparent 35%), var(--theme-bg); text-align: center; }
.theme-option__preview::before,
.theme-option__preview::after { content: ""; width: 80px; height: 125px; position: absolute; border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, transparent); border-radius: 50%; transform: rotate(38deg); }
.theme-option__preview::before { top: -65px; left: -50px; }
.theme-option__preview::after { right: -55px; bottom: -65px; }
.theme-preview-kicker { color: var(--theme-accent); font-size: .43rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.theme-option__preview strong { margin: .5rem 0 .15rem; font: italic 500 1.45rem/.9 var(--theme-heading); }
.theme-option__preview > i { color: var(--theme-accent); font-size: .8rem; }
.theme-option__preview > small { margin-top: .45rem; padding-top: .35rem; border-top: 1px solid color-mix(in srgb, var(--theme-accent) 35%, transparent); font-size: .4rem; letter-spacing: .12em; }
.theme-option__info { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem; }
.theme-option__info strong,
.theme-option__info small { display: block; }
.theme-option__info strong { font-size: .68rem; overflow-wrap: anywhere; }
.theme-option__info small { margin-top: .12rem; color: var(--muted); font-size: .52rem; }
.theme-palette { display: flex; flex: 0 0 auto; padding-left: .3rem; }
.theme-palette i { width: 14px; height: 14px; margin-left: -4px; border: 1px solid rgb(255 255 255 / 85%); border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / 12%); }
.theme-picker__empty { grid-column: 1 / -1; padding: 2rem; color: var(--muted); background: #faf7f4; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.theme-picker__empty > span { display: block; margin-bottom: .5rem; color: var(--brand); font-size: 1.5rem; }
.theme-picker__empty strong { color: var(--ink); font: 600 1rem var(--serif); }
.theme-picker__empty p { margin: .35rem 0 0; font-size: .7rem; }
.style-composer { margin-bottom: 1rem; overflow: hidden; background: #fbf8f5; border: 1px solid #e4d8d0; border-radius: 17px; }
.style-composer__preview { min-height: 122px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; position: relative; padding: 1.15rem 1.25rem; color: var(--theme-ink, #302b28); background: var(--theme-bg, #f6f0e8); isolation: isolate; transition: color .25s, background-color .25s; }
.style-composer__preview > div { position: relative; z-index: 1; }
.style-composer__preview small { display: block; color: var(--theme-accent, #98634e); font-size: .5rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.style-composer__preview strong { display: block; margin: .2rem 0 .1rem; font: italic 500 1.85rem/1 var(--composer-heading, var(--theme-heading, var(--serif))); }
.style-composer__preview p { margin: 0; color: color-mix(in srgb, var(--theme-ink, #302b28) 70%, transparent); font: .65rem var(--composer-body, "DM Sans", sans-serif); }
.style-composer__texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .48; }
.style-composer__palette { display: flex; position: relative; z-index: 1; padding-left: .5rem; }
.style-composer__palette i { width: 20px; height: 20px; margin-left: -5px; border: 2px solid rgb(255 255 255 / 78%); border-radius: 50%; box-shadow: 0 2px 5px rgb(0 0 0 / 12%); }
.style-layer-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #eadfd8; }
.style-layer-tabs button { min-width: 0; display: flex; align-items: center; gap: .55rem; padding: .72rem .8rem; color: #7d7069; background: #fff; border: 0; text-align: left; transition: color .2s, background .2s; }
.style-layer-tabs button:hover { color: var(--brand); background: #fdfaf8; }
.style-layer-tabs button.is-active { color: var(--brand); background: #f7eee9; box-shadow: inset 0 -2px var(--brand); }
.style-layer-tabs i { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; color: #9a6a55; background: #f4e7df; border-radius: 50%; font-size: .48rem; font-style: normal; font-weight: 800; }
.style-layer-tabs span,
.style-layer-tabs strong,
.style-layer-tabs small { min-width: 0; display: block; }
.style-layer-tabs strong { font-size: .67rem; }
.style-layer-tabs small { margin-top: .05rem; overflow: hidden; font-size: .5rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.style-layer-panel[hidden] { display: none; }
.style-layer-panel__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1rem 0 .75rem; }
.style-layer-panel__heading div > span { display: block; margin-bottom: .12rem; color: var(--brand); font-size: .48rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.style-layer-panel__heading strong { font: 600 .94rem var(--serif); }
.style-layer-panel__heading p { max-width: 330px; margin: 0; color: var(--muted); font-size: .61rem; text-align: right; }
.texture-choice-grid,
.typography-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.texture-option,
.typography-option { min-width: 0; display: grid; grid-template-columns: 54px minmax(0, 1fr) 20px; align-items: center; gap: .65rem; position: relative; padding: .65rem; background: #fff; border: 1px solid #dfd5ce; border-radius: 14px; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.texture-option:hover,
.typography-option:hover { transform: translateY(-2px); border-color: #b98b75; box-shadow: 0 9px 22px rgb(62 42 31 / 8%); }
.texture-option:has(input:checked),
.typography-option:has(input:checked) { border: 2px solid var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 10%); }
.texture-option > input,
.typography-option > input { position: absolute; opacity: 0; }
.texture-option > span > strong,
.texture-option > span > small,
.typography-option > span > strong,
.typography-option > span > small { display: block; }
.texture-option > span > strong,
.typography-option > span > strong { font-size: .64rem; }
.texture-option > span > small,
.typography-option > span > small { margin-top: .12rem; color: var(--muted); font-size: .5rem; }
.texture-option > b,
.typography-option > b { width: 19px; height: 19px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-size: .48rem; opacity: 0; transform: scale(.65); transition: .2s; }
.texture-option:has(input:checked) > b,
.typography-option:has(input:checked) > b { opacity: 1; transform: scale(1); }
.texture-option__sample { width: 54px; height: 54px; display: block; overflow: hidden; position: relative; background-color: #f1e9e1; border-radius: 11px; }
.texture-option__sample i { position: absolute; inset: 0; }
.texture-option--paper .texture-option__sample i,
[data-texture="paper"] .style-composer__texture { background-image: radial-gradient(circle at 20% 25%, rgb(120 91 70 / 14%) 0 1px, transparent 1.5px), radial-gradient(circle at 76% 70%, rgb(120 91 70 / 10%) 0 1px, transparent 1.5px); background-size: 17px 19px, 23px 21px; }
.texture-option--linen .texture-option__sample i,
[data-texture="linen"] .style-composer__texture { background-image: repeating-linear-gradient(0deg, rgb(92 70 56 / 8%) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(92 70 56 / 7%) 0 1px, transparent 1px 5px); }
.texture-option--botanical .texture-option__sample i,
[data-texture="botanical"] .style-composer__texture { background-image: radial-gradient(5px 11px at 22% 24%, rgb(91 119 91 / 26%) 0 60%, transparent 70%), radial-gradient(10px 5px at 60% 42%, rgb(91 119 91 / 22%) 0 60%, transparent 70%), radial-gradient(5px 10px at 42% 74%, rgb(120 150 110 / 20%) 0 60%, transparent 70%), radial-gradient(10px 5px at 86% 74%, rgb(91 119 91 / 24%) 0 60%, transparent 70%); background-size: 66px 60px; }
.texture-option--petals .texture-option__sample { background: #f8e9ec; }
.texture-option--petals .texture-option__sample i,
[data-texture="petals"] .style-composer__texture { background-image: radial-gradient(9px 5px at 20% 28%, rgb(190 105 126 / 26%) 0 66%, transparent 74%), radial-gradient(5px 9px at 66% 20%, rgb(215 145 159 / 22%) 0 66%, transparent 74%), radial-gradient(8px 5px at 42% 70%, rgb(190 105 126 / 24%) 0 66%, transparent 74%), radial-gradient(5px 8px at 86% 62%, rgb(215 145 159 / 20%) 0 66%, transparent 74%); background-size: 62px 56px; }
.texture-option--lace .texture-option__sample { background: #fbf3f1; }
.texture-option--lace .texture-option__sample i,
[data-texture="lace"] .style-composer__texture { background-image: radial-gradient(circle, transparent 0 5px, rgb(155 103 110 / 16%) 5.5px 6.5px, transparent 7px), radial-gradient(circle, transparent 0 3px, rgb(155 103 110 / 11%) 3.5px 4.5px, transparent 5px); background-position: 0 0, 9px 9px; background-size: 18px 18px; }
.texture-option--watercolor .texture-option__sample { background: #f3ebf0; }
.texture-option--watercolor .texture-option__sample i,
[data-texture="watercolor"] .style-composer__texture { background-image: radial-gradient(circle at 20% 30%, rgb(194 137 158 / 24%), transparent 34%), radial-gradient(circle at 78% 65%, rgb(126 160 171 / 21%), transparent 38%), radial-gradient(circle at 52% 18%, rgb(225 182 130 / 15%), transparent 30%); filter: blur(.2px); }
.texture-option--celestial .texture-option__sample { background: #203147; }
.texture-option--celestial .texture-option__sample i,
[data-texture="celestial"] .style-composer__texture { background-image: radial-gradient(circle, currentColor 0 1px, transparent 1.5px), radial-gradient(circle, currentColor 0 1.5px, transparent 2px); background-position: 0 0, 13px 17px; background-size: 29px 29px, 37px 37px; color: rgb(225 184 100 / 55%); }
.texture-option--confetti .texture-option__sample i,
[data-texture="confetti"] .style-composer__texture { background-image: radial-gradient(circle, #d9947b 0 2px, transparent 2.5px), radial-gradient(circle, #d5ad55 0 1.5px, transparent 2px), radial-gradient(circle, #7fa6a0 0 1.5px, transparent 2px), radial-gradient(circle, #d9947b 0 1.5px, transparent 2px), radial-gradient(circle, #d5ad55 0 2px, transparent 2.5px); background-position: 5px 7px, 23px 16px, 38px 33px, 14px 37px, 43px 9px; background-size: 48px 44px; }
.texture-option--balloons .texture-option__sample { background: #eef4f7; }
.texture-option--balloons .texture-option__sample i,
[data-texture="balloons"] .style-composer__texture { background-image: radial-gradient(9px 12px at 26% 32%, rgb(225 131 139 / 32%) 0 70%, transparent 74%), radial-gradient(2px 2px at 26% 49%, rgb(225 131 139 / 32%) 0 70%, transparent 82%), radial-gradient(8px 11px at 64% 56%, rgb(103 166 185 / 28%) 0 70%, transparent 74%), radial-gradient(2px 2px at 64% 71%, rgb(103 166 185 / 28%) 0 70%, transparent 82%), radial-gradient(8px 10px at 86% 22%, rgb(231 185 88 / 30%) 0 70%, transparent 74%), radial-gradient(2px 2px at 86% 35%, rgb(231 185 88 / 30%) 0 70%, transparent 82%); background-size: 92px 90px; }
.texture-option--streamers .texture-option__sample { background: #fff6e8; }
.texture-option--streamers .texture-option__sample i,
[data-texture="streamers"] .style-composer__texture { background-image: repeating-radial-gradient(ellipse at 0 0, transparent 0 8px, rgb(214 137 100 / 22%) 9px 10px, transparent 11px 18px), repeating-radial-gradient(ellipse at 100% 100%, transparent 0 12px, rgb(100 153 159 / 16%) 13px 14px, transparent 15px 25px); }
.texture-option--sprinkles .texture-option__sample { background: #fff8f3; }
.texture-option--sprinkles .texture-option__sample i,
[data-texture="sprinkles"] .style-composer__texture { background-image: linear-gradient(35deg, transparent 45%, #da7885 46% 54%, transparent 55%), linear-gradient(125deg, transparent 45%, #e0ad4e 46% 54%, transparent 55%), linear-gradient(75deg, transparent 45%, #65a3a8 46% 54%, transparent 55%); background-position: 2px 4px, 13px 17px, 25px 8px; background-size: 31px 29px; }
.typography-option__sample { min-width: 54px; color: #50433c; text-align: center; }
.typography-option__sample strong { font-size: 1.5rem !important; line-height: 1; }
.typography-option__sample i { display: block; margin-top: .15rem; overflow: hidden; font-size: .35rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.typography-option--theme .typography-option__sample,
[data-typography="theme"] { --composer-heading: var(--theme-heading, "Playfair Display"); --composer-body: "DM Sans"; }
.typography-option--romantic .typography-option__sample,
[data-typography="romantic"] { --composer-heading: "Cormorant Garamond"; --composer-body: "DM Sans"; }
.typography-option--editorial .typography-option__sample,
[data-typography="editorial"] { --composer-heading: "Bodoni Moda"; --composer-body: "Tenor Sans"; }
.typography-option--classic .typography-option__sample,
[data-typography="classic"] { --composer-heading: "Playfair Display"; --composer-body: "DM Sans"; }
.typography-option--modern .typography-option__sample,
[data-typography="modern"] { --composer-heading: "Fraunces"; --composer-body: "DM Sans"; }
.typography-option--delicate .typography-option__sample,
[data-typography="delicate"] { --composer-heading: "Cormorant Garamond"; --composer-body: "Tenor Sans"; }
.typography-option--gala .typography-option__sample,
[data-typography="gala"] { --composer-heading: "Marcellus"; --composer-body: "DM Sans"; }
.typography-option--festive .typography-option__sample,
[data-typography="festive"] { --composer-heading: "Fraunces"; --composer-body: "Tenor Sans"; }
.typography-option--minimal .typography-option__sample,
[data-typography="minimal"] { --composer-heading: "Tenor Sans"; --composer-body: "DM Sans"; }
.typography-option__sample strong { font-family: var(--composer-heading); }
.typography-option__sample i { font-family: var(--composer-body); }
.form-label { font-size: .84rem; font-weight: 700; }
.form-control,
.form-select {
  min-height: 48px;
  border-color: #ddd3cb;
  border-radius: 12px;
  background-color: #fefdfc;
}
.form-control:focus,
.form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgb(152 99 78 / 12%); }
.invalid-feedback { color: #a3433b; }
.form-text { color: #867d77; }
.editor-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.save-hint { color: var(--muted); font-size: .78rem; }

.editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  padding: 1.4rem 1.5rem;
  background: linear-gradient(125deg, rgb(255 255 255 / 88%), rgb(247 239 234 / 82%));
  border: 1px solid rgb(226 215 207 / 82%);
  border-radius: 22px;
  box-shadow: 0 18px 55px rgb(64 42 31 / 8%);
  backdrop-filter: blur(16px);
}
.editor-toolbar h1 { max-width: 720px; margin: .45rem 0 0; font-size: clamp(1.75rem, 3vw, 2.55rem); letter-spacing: -.025em; }
.editor-breadcrumb { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .72rem; font-weight: 700; text-decoration: none; }
.editor-breadcrumb:hover { color: var(--brand); }
.editor-title-line { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-top: .55rem; }
.editor-sync-state { min-width: 205px; display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; color: #4d6956; background: rgb(226 240 230 / 72%); border: 1px solid rgb(99 137 109 / 18%); border-radius: 13px; transition: color .2s, background .2s; }
.editor-sync-state > span { width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: #67866f; border-radius: 50%; font-size: .65rem; }
.editor-sync-state strong,
.editor-sync-state small { display: block; }
.editor-sync-state strong { font-size: .68rem; }
.editor-sync-state small { margin-top: .1rem; color: #718078; font-size: .56rem; }
.editor-sync-state.is-dirty { color: #775c32; background: #f7edd7; border-color: #e8d3a9; }
.editor-sync-state.is-dirty > span { background: #ad8040; }
.editor-sync-state.is-error { color: #8f3f39; background: #fff0ee; border-color: #e8bbb6; }
.editor-sync-state.is-error > span { background: #b55149; }
.editor-sync-state.is-error small { color: #98605b; }
.editor-form-alert { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .9rem 1rem; color: #873e38; background: #fff1ef; border: 1px solid #efc4c0; border-radius: 16px; box-shadow: 0 12px 34px rgb(135 62 56 / 9%); }
.editor-form-alert > span { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; color: #fff; background: #b55149; border-radius: 50%; font-weight: 800; }
.editor-form-alert strong,
.editor-form-alert small { display: block; }
.editor-form-alert small { margin-top: .15rem; color: #98605b; font-size: .73rem; }
.editor-view-switch { display: none; }
.status-pill {
  display: inline-block;
  padding: .3rem .65rem;
  color: #765c2d;
  background: #f5edce;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 750;
  text-transform: uppercase;
}
.status-pill--published { color: #356249; background: #dfeee4; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 790px) 390px; justify-content: center; gap: 2.5rem; align-items: start; }
.editor-grid > * { min-width: 0; }

/* Editor with clean 2-column layout */
.editor-topbar__save { padding: 8px 16px !important; font-size: 13px !important; border-radius: 10px !important; }
@media (max-width: 1100px) {
  .editor-grid--sidebar { grid-template-columns: 1fr; }
  .setup-guide--sidebar { position: static; max-height: none; }
}

/* Setup guide — step-by-step to a complete, publishable invitation */
.setup-guide { max-width: 1210px; margin: 0 auto 1.1rem; padding: .85rem 1.1rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 26px rgb(63 42 32 / 6%); }
.setup-guide__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.setup-guide__intro strong { display: block; font: 600 1.05rem var(--serif); color: #3a302c; }
.setup-guide__intro span { color: var(--muted); font-size: .82rem; }
.setup-guide__intro b { color: var(--brand); }
.setup-guide__head--done strong { font: 600 1.1rem var(--serif); color: #4e7558; }
.setup-guide__head--done span { display: block; margin-top: .15rem; color: var(--muted); font-size: .85rem; }
.setup-guide__next { font-size: .8rem; padding: .5rem 1rem; white-space: nowrap; }
.setup-guide__bar { height: 7px; margin: .9rem 0 1.1rem; background: #efe6dd; border-radius: 99px; overflow: hidden; }
.setup-guide__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #b98568); border-radius: 99px; transition: width .4s ease; }
.setup-guide__steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .55rem; margin: 0; padding: 0; }
.setup-step a { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; background: #fdfbf9; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.setup-step a:hover { transform: translateY(-2px); border-color: #e0cdbf; background: #fff; }
.setup-step__mark { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: .78rem; font-weight: 700; color: #9a8c80; background: #efe6dd; }
.setup-step__text strong { display: block; color: #3a302c; font-size: .82rem; font-weight: 600; line-height: 1.2; }
.setup-step__text small { color: var(--muted); font-size: .68rem; }
.setup-step.is-done .setup-step__mark { color: #fff; background: #5a9e74; }
.setup-step.is-done .setup-step__text strong { color: #6a7d70; }
.setup-step.is-next a { border-color: var(--brand); background: #fff; box-shadow: 0 6px 16px rgb(152 99 78 / 12%); }
.setup-step.is-next .setup-step__mark { color: #fff; background: var(--brand); }
.setup-step.has-error a { border-color: #e6a6a0; background: #fdf3f2; }
.setup-step.has-error .setup-step__mark { color: #fff; background: #b4524a; }
.setup-step.has-error .setup-step__text strong { color: #a4443c; }
.editor-page .editor-shell { max-width: 1390px; padding-top: 2rem; }
.editor-page .site-footer { display: none; }
.editor-page .message-stack { width: min(420px, calc(100% - 2rem)); position: fixed; top: 88px; right: 1rem; z-index: 120; margin: 0; }
.editor-page .message-stack .alert { box-shadow: 0 16px 45px rgb(48 70 56 / 15%); }
.editor-page .editor-card--form { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.editor-page .editor-card--form form { counter-reset: editor-section; }
.editor-page .form-section { scroll-margin-top: 6rem; counter-increment: editor-section; margin: 0 0 1rem; padding: clamp(1.25rem, 3vw, 2rem); background: rgb(255 255 255 / 92%); border: 1px solid rgb(228 218 211 / 90%); border-radius: 22px; box-shadow: 0 14px 40px rgb(64 42 31 / 6%); }
.editor-page .form-section legend { display: flex; align-items: center; gap: .75rem; padding-top: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); }
.editor-page .form-section legend::before { content: counter(editor-section, decimal-leading-zero); width: 34px; height: 34px; display: inline-grid; flex: 0 0 auto; place-items: center; color: var(--brand); background: #f4e8e1; border-radius: 50%; font: 800 .6rem "DM Sans", sans-serif; }
.editor-page .form-section:focus-within { border-color: rgb(152 99 78 / 38%); box-shadow: 0 18px 50px rgb(64 42 31 / 9%); }
.editor-page .editor-actions { justify-content: space-between; margin: 1rem 0; padding: .75rem .85rem; background: rgb(255 255 255 / 86%); border: 1px solid rgb(222 210 202 / 90%); border-radius: 17px; box-shadow: 0 10px 30px rgb(59 39 29 / 8%); }
.editor-page .editor-actions .btn { min-height: 48px; }
.publish-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--warm);
  border-radius: 16px;
}
.publish-panel p { margin: .2rem 0 0; color: var(--muted); font-size: .85rem; }
.publish-panel--warning { background: #fff7e7; border: 1px solid #ead49f; }
.publish-panel--warning strong { color: #76551d; }
.publish-panel--admin { color: #eff7ff; background: linear-gradient(135deg, #26384d, #172535); border: 1px solid rgb(255 255 255 / 12%); }
.publish-panel--admin p { color: rgb(239 247 255 / 68%); }
.admin-access-label { display: block; margin-bottom: .25rem; color: #a9cae8; font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.publish-panel--admin .btn { color: #203044; background: #f5f9fc; border-color: #f5f9fc; }
.publish-panel .btn:disabled { cursor: not-allowed; opacity: .58; }
.preview-column {
  width: 390px;
  height: calc(100svh - 72px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  top: 72px;
  justify-self: center;
  align-self: start;
  padding-block: 1rem;
}
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 .8rem .65rem; }
.preview-header small { color: #9a8f88; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.preview-label { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .11em; }
.preview-label span { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; background: #64a47b; border-radius: 50%; }
.phone-frame { padding: 11px; background: linear-gradient(145deg, #34312f, #171615); border: 1px solid rgb(255 255 255 / 9%); border-radius: 42px; box-shadow: 0 30px 80px rgb(40 28 21 / 25%), 0 0 0 8px rgb(255 255 255 / 35%); }
.phone-speaker { width: 76px; height: 18px; margin: -2px auto -16px; position: relative; z-index: 2; background: #22201f; border-radius: 0 0 14px 14px; }
.phone-screen { height: clamp(420px, calc(100svh - 185px), 710px); overflow: hidden auto; background: #fff; border-radius: 31px; scrollbar-width: none; }

/* Preview size toggle (móvil / escritorio) */
.preview-size-toggle { display: inline-flex; gap: 2px; padding: 2px; background: #efe6dd; border-radius: 8px; }
.preview-size-toggle button { padding: 3px 11px; border: 0; background: transparent; border-radius: 6px; font: 700 .6rem "DM Sans", sans-serif; letter-spacing: .04em; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.preview-size-toggle button.is-active { color: #3a302c; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 10%); }
.preview-column.is-desktop { width: 468px; }
.preview-column.is-desktop .phone-frame { border-radius: 16px; padding: 9px; }
.preview-column.is-desktop .phone-speaker { display: none; }
.preview-column.is-desktop .phone-screen { width: 450px; border-radius: 10px; }

/* Resumen de la invitación (sección Revisar) */
.editor-summary { margin: 1.4rem 0 .4rem; padding: 1.2rem 1.3rem; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgb(63 42 32 / 5%); }
.editor-summary__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.editor-summary__head h3 { margin: 0; font: 600 1.1rem var(--serif); color: #3a302c; }
.editor-summary__count { color: var(--brand); font-size: .8rem; font-weight: 700; }
.editor-summary__bar { height: 6px; margin: .7rem 0 1rem; background: #efe6dd; border-radius: 99px; overflow: hidden; }
.editor-summary__bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #b98568); border-radius: 99px; transition: width .4s ease; }
.editor-summary__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.editor-summary__item { padding: .6rem .8rem; background: #faf5f0; border-radius: 10px; }
.editor-summary__item span { display: block; color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.editor-summary__item strong { display: block; margin-top: .15rem; color: #3a302c; font-size: .88rem; overflow-wrap: anywhere; }
.invitation--preview { min-height: 100%; }
.invitation--preview .invitation-side-media { height: 475px; }
.invitation--preview .invitation-side-media--stacked { height: 330px; }
.invitation--preview .invitation-side-media--fullscreen { height: 650px; }
.invitation--preview .invitation-side-media figcaption { padding: 2.5rem .9rem; }
.invitation--preview .invitation-side-media figcaption span { font-size: 3.7rem; }
.invitation--preview.invitation--fixed-canvas:is(.invitation--mobile-overlay, .invitation--mobile-fullscreen) .invite-hero h1 { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.invitation--preview .invite-hero { min-height: 580px; padding-inline: 1rem; }
.invitation--preview .invite-hero--split { min-height: 0; padding: 0; }
.invitation--preview .invite-hero--split .invite-hero__photo { height: 260px; }
.invitation--preview .invite-hero--split .invite-hero__content { min-height: 520px; padding: 3.5rem 1rem 2.5rem; }
.invitation--preview .invite-hero h1 { font-size: 2.9rem; line-height: .95; }
.invitation--preview .hero-kicker,
.invitation--preview .section-kicker { font-size: .75rem; letter-spacing: .16em; }
.invitation--preview .hero-message { font-size: 1rem; line-height: 1.7; }
.invitation--preview .invite-section h2 { font-size: 2.05rem; line-height: 1.1; }
.invitation--preview .hero-date span,
.invitation--preview .countdown span { font-size: .75rem; }
.invitation--preview .calendar-button { font-size: .8rem; }
.calendar-button--preview { cursor: default; }
.preview-section-placeholder { min-height: 250px; display: grid; place-content: center; gap: .45rem; padding: 2rem; color: color-mix(in srgb, var(--invite-dark-ink) 72%, transparent); background: linear-gradient(145deg, var(--invite-dark), color-mix(in srgb, var(--invite-dark) 78%, var(--invite-accent))); text-align: center; }
.preview-section-placeholder > span { color: var(--invite-muted); font-size: 2rem; }
.preview-section-placeholder strong { color: var(--invite-dark-ink); font: 400 1.35rem var(--invite-heading); }
.preview-section-placeholder small,
.preview-gallery-empty > small { color: color-mix(in srgb, var(--invite-ink) 62%, transparent); font-size: .72rem; }
.preview-gallery-grid { max-width: 280px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: repeat(2, 75px); gap: .45rem; margin: 1.5rem auto .85rem; }
.preview-gallery-grid span { display: block; background: linear-gradient(135deg, color-mix(in srgb, var(--invite-accent) 18%, var(--invite-surface)), color-mix(in srgb, var(--invite-muted) 48%, var(--invite-bg))); border-radius: 4px 14px 4px 14px; }
.preview-gallery-grid span:first-child { grid-row: 1 / 3; }
.preview-mini-section { padding: 4rem 1.5rem; color: var(--invite-ink); text-align: center; background: var(--invite-surface); }
.preview-mini-section span { color: var(--invite-accent); font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; }
.preview-mini-section h2 { margin: .75rem 0; font: 400 2rem/1.1 var(--invite-heading); }

/* Public invitation */
.invitation-opening { width: 100%; min-height: 100svh; display: grid; place-items: center; position: fixed; inset: 0; z-index: 9999; overflow: hidden; padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)); color: var(--invite-ink); background: var(--invite-bg); font-family: var(--invite-body); isolation: isolate; }
.invitation-opening[hidden] { display: none; }
body.invitation-page:has(.invitation-opening:not([hidden])) { overflow: hidden; }
.invitation-opening::before,
.invitation-opening::after { content: ""; width: min(55vw, 520px); aspect-ratio: 1; position: absolute; z-index: -1; border: 1px solid color-mix(in srgb, var(--invite-accent) 15%, transparent); border-radius: 50%; }
.invitation-opening::before { top: -34vw; left: -23vw; }
.invitation-opening::after { right: -26vw; bottom: -35vw; }
.invitation-opening.is-ready::before { animation: invitation-ring-drift 5s ease-in-out infinite alternate; }
.invitation-opening.is-ready::after { animation: invitation-ring-drift 5.8s .4s ease-in-out infinite alternate-reverse; }
.invitation-opening__content { width: min(100%, 520px); display: grid; justify-items: center; position: relative; z-index: 3; text-align: center; }
.invitation-opening__content > * { opacity: 0; transform: translateY(13px); }
.invitation-opening.is-ready .invitation-opening__eyebrow { animation: invitation-opening-item-in .7s .08s both; }
.invitation-opening.is-ready .invitation-opening__symbol { animation: invitation-opening-symbol-in .9s .2s both; }
.invitation-opening.is-ready .invitation-opening__content h1 { animation: invitation-opening-item-in .8s .42s both; }
.invitation-opening.is-ready .invitation-opening__content > p { animation: invitation-opening-item-in .7s .62s both; }
.invitation-opening.is-ready .invitation-opening__progress { animation: invitation-opening-item-in .55s .78s both; }
.invitation-opening.is-ready .invitation-opening__content > small { animation: invitation-opening-item-in .55s .9s both; }
.invitation-opening__eyebrow { margin-bottom: clamp(1.5rem, 5svh, 3.5rem); color: var(--invite-accent); font-size: clamp(.62rem, 2.6vw, .74rem); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.invitation-opening__symbol { width: 128px; height: 104px; display: grid; place-items: center; position: relative; margin-bottom: clamp(1.4rem, 4svh, 2.5rem); }
.invitation-opening__content h1 { max-width: 490px; margin: 0; color: var(--invite-ink); font: italic 500 clamp(2.8rem, 12vw, 5.6rem)/.93 var(--invite-heading); text-wrap: balance; }
.invitation-opening__content > p { max-width: 350px; margin: 1rem 0 1.45rem; color: color-mix(in srgb, var(--invite-ink) 68%, transparent); font-size: clamp(.78rem, 3.4vw, .9rem); line-height: 1.6; }
.invitation-opening__content > small { margin-top: 1rem; color: color-mix(in srgb, var(--invite-ink) 47%, transparent); font: italic .72rem var(--invite-heading); }
.invitation-opening__progress { width: 94px; height: 2px; display: block; overflow: hidden; position: relative; background: color-mix(in srgb, var(--invite-accent) 18%, transparent); border-radius: 99px; }
.invitation-opening__progress i { width: 100%; height: 100%; display: block; background: var(--invite-accent); border-radius: inherit; transform: scaleX(0); transform-origin: left; }
.invitation-opening.is-ready .invitation-opening__progress i { animation: invitation-opening-progress 1.6s .08s cubic-bezier(.3,.7,.2,1) both; }
.invitation-opening__aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.invitation-opening__aura i { width: clamp(190px, 42vw, 390px); aspect-ratio: 1; position: absolute; top: 43%; left: 50%; opacity: 0; border: 1px solid color-mix(in srgb, var(--invite-accent) 18%, transparent); border-radius: 50%; transform: translate(-50%, -50%) scale(.55); }
.invitation-opening.is-ready .invitation-opening__aura i:nth-child(1) { animation: invitation-aura 2.8s .15s ease-out infinite; }
.invitation-opening.is-ready .invitation-opening__aura i:nth-child(2) { animation: invitation-aura 2.8s .9s ease-out infinite; }
.invitation-opening.is-ready .invitation-opening__aura i:nth-child(3) { animation: invitation-aura 2.8s 1.65s ease-out infinite; }
.invitation-opening__envelope,
.invitation-opening__heart,
.invitation-opening__star,
.invitation-opening__book,
.invitation-opening__doors,
.invitation-opening__petals,
.invitation-opening__balloons,
.invitation-opening__premiere,
.invitation-opening__constellation { display: none; }

.invitation-opening--envelope .invitation-opening__envelope { width: 112px; height: 76px; display: block; position: relative; background: var(--invite-surface); border: 1px solid color-mix(in srgb, var(--invite-accent) 55%, transparent); border-radius: 3px; box-shadow: 0 18px 42px rgb(38 29 25 / 13%); perspective: 500px; }
.invitation-opening--envelope .invitation-opening__envelope::before,
.invitation-opening--envelope .invitation-opening__envelope::after { content: ""; position: absolute; inset: 0; }
.invitation-opening--envelope .invitation-opening__envelope::before { z-index: 2; background: linear-gradient(145deg, transparent 49%, color-mix(in srgb, var(--invite-accent) 16%, var(--invite-surface)) 50%) left / 50% 100% no-repeat, linear-gradient(215deg, transparent 49%, color-mix(in srgb, var(--invite-accent) 12%, var(--invite-surface)) 50%) right / 50% 100% no-repeat; }
.invitation-opening--envelope .invitation-opening__envelope::after { z-index: 3; clip-path: polygon(0 100%, 50% 42%, 100% 100%); background: color-mix(in srgb, var(--invite-accent) 9%, var(--invite-surface)); }
.invitation-opening--envelope .invitation-opening__envelope i { height: 57px; position: absolute; inset: 0; z-index: 4; background: color-mix(in srgb, var(--invite-accent) 13%, var(--invite-surface)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .75s cubic-bezier(.25,.75,.25,1); }
.invitation-opening--envelope .invitation-opening__envelope b { width: 27px; height: 27px; position: absolute; top: 26px; left: 42px; z-index: 5; background: var(--invite-accent); border: 4px solid var(--invite-surface); border-radius: 50%; box-shadow: 0 2px 8px rgb(35 24 20 / 18%); transition: opacity .25s, transform .45s; }
.invitation-opening--envelope.is-ready:not(.is-opening) .invitation-opening__envelope { animation: invitation-envelope-float 1.8s ease-in-out infinite; }
.invitation-opening--envelope.is-ready:not(.is-opening) .invitation-opening__envelope b { animation: invitation-seal-pulse 1.8s .35s ease-in-out infinite; }
.invitation-opening--envelope.is-opening .invitation-opening__envelope i { transform: rotateX(180deg); }
.invitation-opening--envelope.is-opening .invitation-opening__envelope b { opacity: 0; transform: scale(.55); }

.invitation-opening--heart .invitation-opening__heart { width: 118px; height: 105px; display: block; position: relative; color: transparent; filter: drop-shadow(0 17px 18px color-mix(in srgb, var(--invite-accent) 20%, transparent)); }
.invitation-opening--heart .invitation-opening__heart::before,
.invitation-opening--heart .invitation-opening__heart::after { content: "♥"; position: absolute; inset: -16px 0 0; color: var(--invite-accent); font: 400 8.2rem/1 var(--invite-heading); transition: transform .95s cubic-bezier(.2,.75,.2,1), opacity .35s .55s; }
.invitation-opening--heart .invitation-opening__heart::before { clip-path: inset(0 50% 0 0); transform-origin: left center; }
.invitation-opening--heart .invitation-opening__heart::after { clip-path: inset(0 0 0 50%); transform-origin: right center; }
.invitation-opening--heart.is-ready:not(.is-opening) .invitation-opening__heart { animation: invitation-heart-beat 1.25s .65s ease-in-out infinite; }
.invitation-opening--heart.is-opening .invitation-opening__heart::before { opacity: 0; transform: translateX(-55px) rotate(-15deg); }
.invitation-opening--heart.is-opening .invitation-opening__heart::after { opacity: 0; transform: translateX(55px) rotate(15deg); }
.invitation-opening--heart.is-opening .invitation-opening__symbol::after { content: "✦"; position: absolute; color: var(--invite-accent); font-size: 1.3rem; animation: invitation-heart-reveal .85s .08s both; }

.invitation-opening--storybook .invitation-opening__book { width: 126px; height: 82px; display: block; position: relative; perspective: 700px; filter: drop-shadow(0 17px 18px rgb(45 30 24 / 14%)); }
.invitation-opening--storybook .invitation-opening__book::before { content: ""; width: 4px; position: absolute; inset-block: 2px; left: calc(50% - 2px); z-index: 3; background: color-mix(in srgb, var(--invite-accent) 48%, #fff); border-radius: 4px; }
.invitation-opening--storybook .invitation-opening__book i,
.invitation-opening--storybook .invitation-opening__book b { width: 50%; height: 100%; position: absolute; top: 0; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--invite-accent) 9%, #fff)); border: 1px solid color-mix(in srgb, var(--invite-accent) 43%, transparent); transition: transform 1.05s cubic-bezier(.2,.75,.2,1), filter .7s; }
.invitation-opening--storybook .invitation-opening__book i { left: 0; border-radius: 6px 1px 1px 6px; transform-origin: right center; }
.invitation-opening--storybook .invitation-opening__book b { right: 0; border-radius: 1px 6px 6px 1px; transform-origin: left center; }
.invitation-opening--storybook .invitation-opening__book i::after,
.invitation-opening--storybook .invitation-opening__book b::after { content: ""; width: 60%; height: 1px; position: absolute; top: 28%; left: 20%; background: var(--invite-muted); box-shadow: 0 10px var(--invite-muted), 0 20px var(--invite-muted), 0 30px var(--invite-muted); opacity: .65; }
.invitation-opening--storybook.is-ready:not(.is-opening) .invitation-opening__book { animation: invitation-book-breathe 2s ease-in-out infinite; }
.invitation-opening--storybook.is-opening .invitation-opening__book i { transform: rotateY(-155deg); filter: brightness(.92); }
.invitation-opening--storybook.is-opening .invitation-opening__book b { transform: rotateY(155deg); filter: brightness(.92); }

.invitation-opening--doors .invitation-opening__doors { width: 122px; height: 91px; display: block; position: relative; overflow: visible; perspective: 800px; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--invite-accent) 38%, #fff), transparent 60%); }
.invitation-opening--doors .invitation-opening__doors i,
.invitation-opening--doors .invitation-opening__doors b { width: 50%; height: 100%; position: absolute; top: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--invite-accent) 72%, #3a241d), var(--invite-accent)); border: 1px solid color-mix(in srgb, var(--invite-accent) 72%, #251914); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--invite-accent) 78%, #fff); transition: transform 1s cubic-bezier(.2,.75,.2,1); }
.invitation-opening--doors .invitation-opening__doors i { left: 0; transform-origin: left center; }
.invitation-opening--doors .invitation-opening__doors b { right: 0; transform-origin: right center; }
.invitation-opening--doors .invitation-opening__doors i::after,
.invitation-opening--doors .invitation-opening__doors b::after { content: ""; width: 5px; height: 5px; position: absolute; top: 49%; background: #f4d7a5; border-radius: 50%; box-shadow: 0 0 8px #f4d7a5; }
.invitation-opening--doors .invitation-opening__doors i::after { right: 8px; }
.invitation-opening--doors .invitation-opening__doors b::after { left: 8px; }
.invitation-opening--doors.is-ready:not(.is-opening) .invitation-opening__doors { animation: invitation-door-glow 1.8s ease-in-out infinite; }
.invitation-opening--doors.is-opening .invitation-opening__doors i { transform: rotateY(-108deg); }
.invitation-opening--doors.is-opening .invitation-opening__doors b { transform: rotateY(108deg); }

.invitation-opening--petals .invitation-opening__petals { width: 130px; height: 96px; display: block; position: relative; }
.invitation-opening--petals .invitation-opening__petals i { width: 30px; height: 18px; position: absolute; left: 50px; top: 38px; background: linear-gradient(145deg, color-mix(in srgb, var(--invite-accent) 75%, #fff), var(--invite-muted)); border-radius: 80% 10% 80% 10%; box-shadow: inset 4px 2px 8px rgb(255 255 255 / 45%); transition: transform 1.15s cubic-bezier(.2,.75,.2,1), opacity .9s .25s; }
.invitation-opening--petals .invitation-opening__petals i:nth-child(1) { transform: translate(-30px,-22px) rotate(18deg); }
.invitation-opening--petals .invitation-opening__petals i:nth-child(2) { transform: translate(25px,-25px) rotate(78deg); }
.invitation-opening--petals .invitation-opening__petals i:nth-child(3) { transform: translate(-38px,20px) rotate(125deg); }
.invitation-opening--petals .invitation-opening__petals i:nth-child(4) { transform: translate(31px,19px) rotate(176deg); }
.invitation-opening--petals .invitation-opening__petals i:nth-child(5) { transform: translate(0,2px) rotate(42deg) scale(.8); }
.invitation-opening--petals.is-ready:not(.is-opening) .invitation-opening__petals { animation: invitation-petal-sway 2.1s ease-in-out infinite; }
.invitation-opening--petals.is-opening .invitation-opening__petals i:nth-child(1) { opacity: 0; transform: translate(-105px,-90px) rotate(140deg); }
.invitation-opening--petals.is-opening .invitation-opening__petals i:nth-child(2) { opacity: 0; transform: translate(115px,-75px) rotate(230deg); }
.invitation-opening--petals.is-opening .invitation-opening__petals i:nth-child(3) { opacity: 0; transform: translate(-120px,90px) rotate(280deg); }
.invitation-opening--petals.is-opening .invitation-opening__petals i:nth-child(4) { opacity: 0; transform: translate(125px,95px) rotate(330deg); }
.invitation-opening--petals.is-opening .invitation-opening__petals i:nth-child(5) { opacity: 0; transform: translate(8px,-125px) rotate(220deg); }

.invitation-opening--balloons .invitation-opening__balloons { width: 128px; height: 110px; display: block; position: relative; }
.invitation-opening--balloons .invitation-opening__balloons i,
.invitation-opening--balloons .invitation-opening__balloons b,
.invitation-opening--balloons .invitation-opening__balloons em { width: 43px; height: 54px; position: absolute; border-radius: 50% 50% 46% 46%; box-shadow: inset 8px 4px 12px rgb(255 255 255 / 28%), 0 10px 22px rgb(46 28 23 / 10%); transition: transform 1.15s cubic-bezier(.2,.75,.2,1), opacity .75s .35s; }
.invitation-opening--balloons .invitation-opening__balloons i { left: 10px; top: 22px; background: var(--invite-accent); transform: rotate(-8deg); }
.invitation-opening--balloons .invitation-opening__balloons b { left: 43px; top: 5px; z-index: 2; background: color-mix(in srgb, var(--invite-muted) 65%, #f1c787); }
.invitation-opening--balloons .invitation-opening__balloons em { right: 9px; top: 26px; background: color-mix(in srgb, var(--invite-accent) 58%, #c59fca); transform: rotate(8deg); }
.invitation-opening--balloons .invitation-opening__balloons :is(i,b,em)::after { content: ""; width: 1px; height: 48px; position: absolute; top: 52px; left: 50%; background: color-mix(in srgb, var(--invite-ink) 35%, transparent); transform-origin: top; }
.invitation-opening--balloons.is-ready:not(.is-opening) .invitation-opening__balloons :is(i,b,em) { animation: invitation-balloon-bob 1.9s ease-in-out infinite alternate; }
.invitation-opening--balloons.is-ready:not(.is-opening) .invitation-opening__balloons b { animation-delay: -.55s; }
.invitation-opening--balloons.is-ready:not(.is-opening) .invitation-opening__balloons em { animation-delay: -.95s; }
.invitation-opening--balloons.is-opening .invitation-opening__balloons i { opacity: 0; transform: translate(-35px,-170px) rotate(-16deg); }
.invitation-opening--balloons.is-opening .invitation-opening__balloons b { opacity: 0; transform: translate(5px,-190px) rotate(7deg); }
.invitation-opening--balloons.is-opening .invitation-opening__balloons em { opacity: 0; transform: translate(42px,-160px) rotate(18deg); }

.invitation-opening--premiere { color: #f7f0e6; background: radial-gradient(circle at 50% 42%, #34302e, #12100f 75%); }
.invitation-opening--premiere::before,
.invitation-opening--premiere::after { border-color: rgb(255 255 255 / 12%); }
.invitation-opening--premiere .invitation-opening__eyebrow,
.invitation-opening--premiere .invitation-opening__content h1,
.invitation-opening--premiere .invitation-opening__content > p,
.invitation-opening--premiere .invitation-opening__content > small { color: #f7f0e6; }
.invitation-opening--premiere .invitation-opening__premiere { width: 108px; height: 108px; display: block; position: relative; border: 1px solid rgb(255 255 255 / 23%); border-radius: 50%; box-shadow: 0 0 0 13px rgb(255 255 255 / 3%), 0 0 55px rgb(255 232 197 / 9%); }
.invitation-opening--premiere .invitation-opening__premiere::before,
.invitation-opening--premiere .invitation-opening__premiere::after { content: ""; position: absolute; background: rgb(255 255 255 / 16%); }
.invitation-opening--premiere .invitation-opening__premiere::before { width: 1px; inset-block: -13px; left: 50%; }
.invitation-opening--premiere .invitation-opening__premiere::after { height: 1px; inset-inline: -13px; top: 50%; }
.invitation-opening--premiere .invitation-opening__premiere :is(i,b,em) { display: grid; place-items: center; position: absolute; inset: 0; color: #f7f0e6; font: 500 4rem/1 var(--invite-heading); font-style: normal; opacity: 0; }
.invitation-opening--premiere.is-ready .invitation-opening__premiere i { animation: invitation-count-three 1.68s both; }
.invitation-opening--premiere.is-ready .invitation-opening__premiere b { animation: invitation-count-two 1.68s both; }
.invitation-opening--premiere.is-ready .invitation-opening__premiere em { animation: invitation-count-one 1.68s both; }
.invitation-opening--premiere .invitation-opening__progress i { background: #f7f0e6; }

.invitation-opening--constellation { color: #eff5ff; background: radial-gradient(circle at 50% 40%, #243b59, #0d1725 72%); }
.invitation-opening--constellation::before,
.invitation-opening--constellation::after { border-color: rgb(174 208 247 / 14%); }
.invitation-opening--constellation .invitation-opening__eyebrow,
.invitation-opening--constellation .invitation-opening__content h1,
.invitation-opening--constellation .invitation-opening__content > p,
.invitation-opening--constellation .invitation-opening__content > small { color: #eff5ff; }
.invitation-opening--constellation .invitation-opening__constellation { width: 134px; height: 104px; display: block; position: relative; transition: transform 1.1s cubic-bezier(.2,.75,.2,1), opacity .75s .3s; }
.invitation-opening--constellation .invitation-opening__constellation::before { content: ""; width: 94px; height: 63px; position: absolute; left: 20px; top: 20px; border: 1px solid rgb(178 211 247 / 45%); clip-path: polygon(0 20%, 42% 0, 62% 58%, 100% 30%, 72% 100%, 22% 78%); }
.invitation-opening--constellation .invitation-opening__constellation i { position: absolute; color: #e8d59a; font-style: normal; animation: invitation-constellation-twinkle 1.5s ease-in-out infinite; }
.invitation-opening--constellation .invitation-opening__constellation i:nth-child(1) { left: 14px; top: 19px; }
.invitation-opening--constellation .invitation-opening__constellation i:nth-child(2) { left: 57px; top: 2px; animation-delay: -.3s; }
.invitation-opening--constellation .invitation-opening__constellation i:nth-child(3) { right: 10px; top: 34px; animation-delay: -.65s; }
.invitation-opening--constellation .invitation-opening__constellation i:nth-child(4) { right: 34px; bottom: 3px; animation-delay: -.9s; }
.invitation-opening--constellation .invitation-opening__constellation i:nth-child(5) { left: 24px; bottom: 15px; animation-delay: -1.15s; }
.invitation-opening--constellation.is-opening .invitation-opening__constellation { opacity: 0; transform: scale(2.6) rotate(28deg); }
.invitation-opening--constellation .invitation-opening__progress i { background: #dceaff; }

.invitation-opening--sparkle .invitation-opening__star { display: block; color: var(--invite-accent); font-size: 5.8rem; filter: drop-shadow(0 14px 25px color-mix(in srgb, var(--invite-accent) 22%, transparent)); animation: invitation-star-pulse 2.4s ease-in-out infinite; }
.invitation-opening__sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.invitation-opening__sparkles i { display: block; position: absolute; color: var(--invite-accent); font-style: normal; opacity: 0; }
.invitation-opening.is-ready .invitation-opening__sparkles i { animation: invitation-ambient-float 2.6s ease-in-out infinite; }
.invitation-opening--sparkle.is-ready .invitation-opening__sparkles i { animation-name: invitation-sparkle; }
.invitation-opening__sparkles i:nth-child(1) { top: 16%; left: 17%; font-size: 1.2rem; }
.invitation-opening__sparkles i:nth-child(2) { top: 28%; right: 16%; animation-delay: .35s; }
.invitation-opening__sparkles i:nth-child(3) { right: 24%; bottom: 19%; animation-delay: .75s; }
.invitation-opening__sparkles i:nth-child(4) { bottom: 29%; left: 19%; animation-delay: 1s; }
.invitation-opening__sparkles i:nth-child(5) { top: 11%; right: 39%; animation-delay: 1.3s; }

.invitation-opening__curtain { display: none; position: absolute; inset-block: 0; z-index: 1; width: 51%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--invite-accent) 90%, #25140e) 0 12%, var(--invite-accent) 12% 23%, color-mix(in srgb, var(--invite-accent) 78%, #fff) 23% 31%); box-shadow: inset 0 0 55px rgb(20 8 5 / 35%); transition: transform 1s cubic-bezier(.65,0,.25,1); }
.invitation-opening--curtains { color: var(--invite-surface); background: var(--invite-dark); }
.invitation-opening--curtains::before,
.invitation-opening--curtains::after { display: none; }
.invitation-opening--curtains .invitation-opening__curtain { display: block; }
.invitation-opening--curtains .invitation-opening__curtain--left { left: 0; }
.invitation-opening--curtains .invitation-opening__curtain--right { right: 0; transform: scaleX(-1); }
.invitation-opening--curtains .invitation-opening__content { color: var(--invite-surface); }
.invitation-opening--curtains .invitation-opening__content h1,
.invitation-opening--curtains .invitation-opening__content > p,
.invitation-opening--curtains .invitation-opening__content > small,
.invitation-opening--curtains .invitation-opening__eyebrow { color: var(--invite-surface); }
.invitation-opening--curtains .invitation-opening__star { display: block; color: var(--invite-surface); font-size: 3.6rem; }
.invitation-opening--curtains.is-ready:not(.is-opening) .invitation-opening__curtain { animation: invitation-curtain-shimmer 2.2s ease-in-out infinite alternate; }
.invitation-opening--curtains.is-opening .invitation-opening__curtain--left { transform: translateX(-100%); }
.invitation-opening--curtains.is-opening .invitation-opening__curtain--right { transform: translateX(100%) scaleX(-1); }

.invitation-opening.is-opening:not(.invitation-opening--curtains) { animation: invitation-opening-away .75s .55s cubic-bezier(.65,0,.25,1) forwards; }
.invitation-opening.is-opening .invitation-opening__content > :not(.invitation-opening__symbol) { animation: invitation-opening-copy-away .55s forwards; }
@keyframes invitation-opening-away { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }
@keyframes invitation-opening-copy-away { to { opacity: 0; transform: translateY(-12px); } }
@keyframes invitation-opening-item-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@keyframes invitation-opening-symbol-in { from { opacity: 0; transform: translateY(18px) scale(.72) rotate(-5deg); } 70% { opacity: 1; transform: translateY(-3px) scale(1.05) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes invitation-opening-progress { to { transform: scaleX(1); } }
@keyframes invitation-aura { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 24% { opacity: .6; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes invitation-ring-drift { to { transform: translate(18px, 13px) scale(1.04); } }
@keyframes invitation-envelope-float { 50% { transform: translateY(-7px) rotate(.8deg); } }
@keyframes invitation-seal-pulse { 50% { box-shadow: 0 2px 8px rgb(35 24 20 / 18%), 0 0 0 7px color-mix(in srgb, var(--invite-accent) 13%, transparent); transform: scale(1.05); } }
@keyframes invitation-heart-beat { 12% { transform: scale(1.08); } 24% { transform: scale(1); } 36% { transform: scale(1.05); } 52% { transform: scale(1); } }
@keyframes invitation-book-breathe { 50% { transform: translateY(-5px) rotateX(4deg); } }
@keyframes invitation-door-glow { 50% { filter: drop-shadow(0 0 17px color-mix(in srgb, var(--invite-accent) 28%, transparent)); transform: scale(1.025); } }
@keyframes invitation-petal-sway { 50% { transform: translateY(-6px) rotate(5deg); } }
@keyframes invitation-balloon-bob { to { transform: translateY(-8px) rotate(3deg); } }
@keyframes invitation-count-three { 0%, 4% { opacity: 0; transform: scale(1.3); } 8%, 27% { opacity: 1; transform: scale(1); } 32%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes invitation-count-two { 0%, 34% { opacity: 0; transform: scale(1.3); } 39%, 59% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; transform: scale(.7); } }
@keyframes invitation-count-one { 0%, 67% { opacity: 0; transform: scale(1.3); } 72%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes invitation-constellation-twinkle { 50% { opacity: .3; transform: scale(.65) rotate(25deg); } }
@keyframes invitation-curtain-shimmer { to { filter: brightness(1.12); background-position: 12px 0; } }
@keyframes invitation-star-pulse { 50% { opacity: .7; transform: scale(1.12) rotate(18deg); } }
@keyframes invitation-sparkle { 50% { opacity: .25; transform: scale(.6) rotate(35deg); } }
@keyframes invitation-ambient-float { 0%, 100% { opacity: .12; transform: translateY(0) scale(.75); } 50% { opacity: .55; transform: translateY(-9px) scale(1); } }
@keyframes invitation-heart-reveal { from { opacity: 0; transform: scale(.3) rotate(-20deg); } 55% { opacity: 1; transform: scale(1.35) rotate(8deg); } to { opacity: .65; transform: scale(1); } }

.invitation-page .navbar,
.rsvp-page .navbar { display: none; }
.invitation-page .site-header,
.invitation-page .site-footer,
.rsvp-page .site-header,
.rsvp-page .site-footer { display: none; }
.invitation-page > .mb-1,
.rsvp-page > .mb-1 { display: none; }
.invitation-page > .container,
.rsvp-page > .container { max-width: none; padding: 0; }
.invitation { --invite-bg: #f8f2eb; --invite-surface: #fff; --invite-accent: #9b6b52; --invite-ink: #3a302c; --invite-muted: #d8b9a7; --invite-dark: #3d3430; --invite-dark-ink: #fff; --invite-heading: var(--serif); --invite-body: "DM Sans", sans-serif; overflow: hidden; position: relative; color: var(--invite-ink); background: var(--invite-bg); font-family: var(--invite-body); isolation: isolate; }
.invite-hero h1[tabindex="-1"]:focus { outline: none; }
.invitation::before { content: ""; position: absolute; inset: 0; z-index: 18; pointer-events: none; opacity: .16; }
.invitation[data-invite-texture="paper"]::before { background-image: radial-gradient(circle at 20% 25%, var(--invite-ink) 0 1px, transparent 1.4px), radial-gradient(circle at 76% 70%, var(--invite-accent) 0 1px, transparent 1.4px); background-size: 19px 21px, 27px 25px; }
.invitation[data-invite-texture="linen"]::before { background-image: repeating-linear-gradient(0deg, var(--invite-ink) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, var(--invite-ink) 0 1px, transparent 1px 6px); opacity: .045; }
.invitation[data-invite-texture="botanical"]::before { background-image: radial-gradient(6px 14px at 20% 22%, var(--invite-accent) 0 60%, transparent 70%), radial-gradient(13px 6px at 58% 40%, var(--invite-accent) 0 60%, transparent 70%), radial-gradient(6px 13px at 40% 74%, var(--invite-muted) 0 60%, transparent 70%), radial-gradient(12px 6px at 86% 76%, var(--invite-accent) 0 60%, transparent 70%), radial-gradient(6px 12px at 82% 14%, var(--invite-muted) 0 60%, transparent 70%); background-size: 134px 122px; opacity: .15; }
.invitation[data-invite-texture="petals"]::before { background-image: radial-gradient(13px 7px at 18% 26%, var(--invite-accent) 0 66%, transparent 74%), radial-gradient(7px 12px at 63% 18%, var(--invite-muted) 0 66%, transparent 74%), radial-gradient(12px 7px at 40% 68%, var(--invite-accent) 0 66%, transparent 74%), radial-gradient(7px 11px at 84% 58%, var(--invite-muted) 0 66%, transparent 74%), radial-gradient(9px 6px at 9% 84%, var(--invite-accent) 0 66%, transparent 74%); background-size: 124px 112px; opacity: .13; }
.invitation[data-invite-texture="lace"]::before { background-image: radial-gradient(circle, transparent 0 8px, var(--invite-accent) 8.5px 9.5px, transparent 10px), radial-gradient(circle, transparent 0 4px, var(--invite-muted) 4.5px 5.5px, transparent 6px); background-position: 0 0, 14px 14px; background-size: 28px 28px; opacity: .09; }
.invitation[data-invite-texture="watercolor"]::before { background-image: radial-gradient(circle at 18% 24%, var(--invite-muted), transparent 30%), radial-gradient(circle at 82% 62%, var(--invite-accent), transparent 34%), radial-gradient(circle at 48% 84%, var(--invite-muted), transparent 27%); background-size: 470px 560px; opacity: .08; }
.invitation[data-invite-texture="celestial"]::before { background-image: radial-gradient(circle, var(--invite-accent) 0 1px, transparent 1.4px), radial-gradient(circle, var(--invite-muted) 0 1.5px, transparent 2px); background-position: 0 0, 21px 29px; background-size: 43px 43px, 61px 61px; opacity: .18; }
.invitation[data-invite-texture="confetti"]::before { background-image: radial-gradient(circle, var(--invite-accent) 0 2.5px, transparent 3px), radial-gradient(circle, var(--invite-muted) 0 2px, transparent 2.5px), radial-gradient(circle, var(--invite-dark) 0 1.5px, transparent 2px), radial-gradient(circle, var(--invite-muted) 0 1.5px, transparent 2px), radial-gradient(circle, var(--invite-accent) 0 2px, transparent 2.5px); background-position: 9px 12px, 42px 28px, 66px 54px, 26px 66px, 82px 18px; background-size: 92px 84px; opacity: .17; }
.invitation[data-invite-texture="balloons"]::before { background-image: radial-gradient(12px 15px at 24% 30%, var(--invite-accent) 0 70%, transparent 74%), radial-gradient(2.5px 2.5px at 24% 45%, var(--invite-accent) 0 70%, transparent 82%), radial-gradient(11px 14px at 62% 52%, var(--invite-muted) 0 70%, transparent 74%), radial-gradient(2.5px 2.5px at 62% 66%, var(--invite-muted) 0 70%, transparent 82%), radial-gradient(10px 13px at 85% 20%, var(--invite-accent) 0 70%, transparent 74%), radial-gradient(2.5px 2.5px at 85% 33%, var(--invite-accent) 0 70%, transparent 82%); background-size: 150px 150px; opacity: .12; }
.invitation[data-invite-texture="streamers"]::before { background-image: repeating-radial-gradient(ellipse at 0 0, transparent 0 15px, var(--invite-accent) 16px 17px, transparent 18px 32px), repeating-radial-gradient(ellipse at 100% 100%, transparent 0 21px, var(--invite-muted) 22px 23px, transparent 24px 43px); opacity: .1; }
.invitation[data-invite-texture="sprinkles"]::before { background-image: linear-gradient(35deg, transparent 45%, var(--invite-accent) 46% 54%, transparent 55%), linear-gradient(125deg, transparent 45%, var(--invite-muted) 46% 54%, transparent 55%), linear-gradient(75deg, transparent 45%, var(--invite-accent) 46% 54%, transparent 55%); background-position: 3px 5px, 21px 28px, 39px 12px; background-size: 53px 49px; opacity: .12; }
.invitation-content-stream { min-width: 0; position: relative; background: var(--invite-bg); }
.invitation-side-media { height: 70svh; position: relative; margin: 0; overflow: hidden; background: var(--invite-dark); }
.invitation-side-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 25%; }
.invitation-side-media figcaption { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: absolute; inset: 0; padding: 3rem 1.2rem; color: #fff; background: linear-gradient(180deg, transparent 40%, rgb(9 18 22 / 12%) 60%, rgb(9 18 22 / 78%)); text-align: center; }
.invitation-side-media figcaption small { margin-bottom: .8rem; font-size: .61rem; font-weight: 750; letter-spacing: .24em; text-transform: uppercase; }
.invitation-side-media figcaption span { max-width: 92%; font: italic 400 clamp(3.5rem, 15vw, 5.8rem)/.88 var(--invite-heading); text-wrap: balance; text-shadow: 0 4px 18px rgb(0 0 0 / 45%); }
.invitation-side-media--stacked { height: 54svh; }
.invitation-side-media--stacked figcaption { display: none; }
.invitation-side-media--fullscreen { height: 100svh; }
.invitation-side-media--fullscreen figcaption { padding-bottom: clamp(4rem, 13svh, 7rem); }
.invitation-side-media--fullscreen figcaption span { font-size: clamp(4rem, 17vw, 6.4rem); }
.invite-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 4.5rem 1.25rem 3rem;
  text-align: center;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--invite-surface) 68%, transparent), transparent 28%),
    radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--invite-accent) 18%, transparent), transparent 32%),
    var(--invite-bg);
}
.invite-hero__content { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; }
.invite-hero__photo { width: 100%; margin: 0; overflow: hidden; background: var(--invite-dark); }
.invite-hero__photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.invite-hero--split { min-height: 0; padding: 0; }
.invite-hero--split .invite-hero__photo { height: clamp(360px, 56svh, 620px); }
.invite-hero--split .invite-hero__content { min-height: 72svh; justify-content: center; padding: 4.25rem 1.25rem 3rem; }
.invite-hero--immersive { isolation: isolate; color: var(--invite-dark-ink); background: var(--invite-dark); }
.invite-hero--immersive .invite-hero__photo { position: absolute; inset: 0; height: 100%; z-index: -2; }
.invite-hero--immersive .invite-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(10 15 14 / 40%), rgb(10 15 14 / 72%)); }
.invite-hero--immersive .invite-hero__content { max-width: 620px; padding: 2.2rem 1.2rem; background: rgb(21 27 25 / 34%); border: 1px solid rgb(255 255 255 / 18%); border-radius: 24px; backdrop-filter: blur(8px); }
.invite-hero--immersive h1,
.invite-hero--immersive .hero-guest-card__name { color: var(--invite-dark-ink); }
.invite-hero--immersive .hero-message,
.invite-hero--immersive .hero-guest-card__passes { color: rgb(255 255 255 / 82%); }
.invite-hero--immersive .hero-guest-card { background: rgb(255 255 255 / 8%); border-color: rgb(255 255 255 / 24%); }
.invite-hero::before,
.invite-hero::after { content: ""; position: absolute; width: 130px; height: 210px; border: 1px solid color-mix(in srgb, var(--invite-accent) 20%, transparent); border-radius: 50%; transform: rotate(35deg); }
.invite-hero::before { left: -80px; top: 10%; }
.invite-hero::after { right: -80px; bottom: 8%; }
.hero-ornament { color: var(--invite-accent); font-size: 1.15rem; }
.hero-guest-card { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin: 2.1rem auto 0; padding: 1.15rem 2.2rem; border: 1px solid color-mix(in srgb, var(--invite-accent) 30%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--invite-surface) 8%, transparent); }
.hero-guest-card__label { color: var(--invite-accent); font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.hero-guest-card__name { font: 400 clamp(1.5rem, 4.5vw, 2rem)/1.15 var(--invite-heading); color: var(--invite-ink); }
.hero-guest-card__passes { margin-top: .15rem; color: color-mix(in srgb, var(--invite-ink) 60%, transparent); font-size: .72rem; letter-spacing: .03em; }
.hero-kicker,
.section-kicker { color: var(--invite-accent); font-size: .67rem; font-weight: 750; letter-spacing: .23em; text-transform: uppercase; }
.hero-kicker { margin-top: 1.6rem; }
.invite-hero h1 { max-width: 800px; margin: 1.2rem 0 .7rem; font: italic 400 clamp(3.4rem, 14vw, 7.5rem)/.9 var(--invite-heading); color: var(--invite-ink); }
.hero-message { max-width: 420px; color: color-mix(in srgb, var(--invite-ink) 72%, transparent); font: 400 1rem/1.65 var(--invite-heading); }
.rich-invitation-text > :first-child { margin-top: 0; }
.rich-invitation-text > :last-child { margin-bottom: 0; }
.rich-invitation-text p { margin: 0 0 .8rem; }
.rich-invitation-text h3 { margin: 1rem 0 .7rem; font: 500 1.35em/1.15 var(--invite-heading); }
.rich-invitation-text blockquote { margin: 1rem 0; padding-inline: 1rem; color: var(--invite-accent); font-style: italic; }
.rich-invitation-text ul,
.rich-invitation-text ol { max-width: 480px; margin: 1rem auto; padding-left: 1.4rem; text-align: left; }
.hero-divider { display: flex; align-items: center; gap: .7rem; width: 170px; margin: 1.5rem auto; color: var(--invite-accent); }
.hero-divider span { height: 1px; flex: 1; background: currentcolor; opacity: .45; }
.hero-divider i { font-style: normal; }
.hero-date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; text-transform: uppercase; }
.hero-date strong { padding: 0 1rem; border-inline: 1px solid color-mix(in srgb, var(--invite-accent) 35%, transparent); font: 400 2.7rem/1 var(--invite-heading); }
.hero-date span { max-width: 85px; font-size: .66rem; font-weight: 700; letter-spacing: .11em; }
.countdown { display: flex; gap: clamp(.9rem, 5vw, 2.2rem); margin-top: 2.5rem; }
.countdown div { min-width: 44px; }
.countdown strong { display: block; font: 400 1.55rem/1 var(--invite-heading); }
.countdown span { color: color-mix(in srgb, var(--invite-ink) 62%, transparent); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.date-section { display: flex; flex-direction: column; align-items: center; background: color-mix(in srgb, var(--invite-bg) 88%, var(--invite-surface)); }
.date-section .hero-date { margin-top: 1.5rem; }
.date-section .countdown { justify-content: center; }
.countdown--rings div { width: clamp(58px, 14vw, 74px); aspect-ratio: 1; display: grid; place-content: center; border: 1px solid color-mix(in srgb, var(--invite-accent) 52%, transparent); border-radius: 50%; }
.countdown--rings strong { color: var(--invite-accent); }
.countdown--flip { gap: clamp(.4rem, 2.5vw, .8rem); }
.countdown--flip div { min-width: clamp(58px, 14vw, 76px); padding: .75rem .4rem .6rem; position: relative; color: var(--invite-surface); background: color-mix(in srgb, var(--invite-dark) 90%, #000); border-radius: 7px; box-shadow: 0 8px 18px rgb(35 25 20 / 18%); }
.countdown--flip div::after { content: ""; position: absolute; inset: 50% 0 auto; border-top: 1px solid rgb(255 255 255 / 13%); }
.countdown--flip span { color: color-mix(in srgb, var(--invite-surface) 65%, transparent); }
.countdown--spotlight { align-items: end; gap: clamp(.65rem, 3vw, 1.3rem); }
.countdown--spotlight div:first-child { padding-right: clamp(.8rem, 3vw, 1.5rem); border-right: 1px solid color-mix(in srgb, var(--invite-accent) 40%, transparent); }
.countdown--spotlight div:first-child strong { color: var(--invite-accent); font-size: clamp(3rem, 12vw, 5.2rem); }
.countdown--spotlight div:first-child span { font-size: .7rem; }
.calendar-button { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; padding: .65rem 1rem; color: var(--invite-accent); border: 1px solid color-mix(in srgb, var(--invite-accent) 42%, transparent); border-radius: 999px; font-size: .72rem; font-weight: 700; text-decoration: none; transition: color .2s, background .2s, transform .2s; }
.calendar-button:hover { color: var(--invite-surface); background: var(--invite-accent); transform: translateY(-2px); }
.image-divider { height: clamp(310px, 65vw, 760px); margin: 0; overflow: hidden; position: relative; background: var(--invite-dark); }
.image-divider::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(20 14 10 / 22%)); pointer-events: none; }
.image-divider img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.75,.25,1); }
.image-divider.is-visible img { transform: scale(1.025); }
.welcome-msg-section { position: relative; background: var(--invite-surface); }
.welcome-msg-section::before { content: "“"; position: absolute; top: 1rem; left: 50%; color: color-mix(in srgb, var(--invite-accent) 10%, transparent); font: 8rem/1 var(--invite-heading); transform: translateX(-50%); }
.section-signature { margin-top: 1.5rem; color: var(--invite-accent); font-size: 1.2rem; }
.gallery-section { background: var(--invite-bg); }
.invitation-gallery { max-width: 920px; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 58px; gap: clamp(.45rem, 1.5vw, .8rem); margin: 2.2rem auto 0; }
.invitation-gallery__item { grid-column: span 4; grid-row: span 5; margin: 0; overflow: hidden; border-radius: 4px 18px 4px 18px; }
.invitation-gallery__item:nth-child(5n + 1) { grid-column: span 7; grid-row: span 7; }
.invitation-gallery__item:nth-child(5n + 2) { grid-column: span 5; grid-row: span 4; }
.invitation-gallery__item:nth-child(5n + 3) { grid-column: span 5; grid-row: span 3; }
.invitation-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.invitation-gallery__item:hover img { transform: scale(1.04); }

@keyframes invitation-soft-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes invitation-cinematic-in { from { opacity: 0; transform: scale(1.035); filter: blur(8px); } }
@keyframes invitation-playful-in { 0% { opacity: 0; transform: translateY(22px) rotate(-1deg); } 70% { transform: translateY(-4px) rotate(.35deg); } }
.experience--soft .invite-hero > * { animation: invitation-soft-in .8s both; }
.experience--soft .invite-hero > *:nth-child(n + 2) { animation-delay: calc((var(--entrance-index, 1) - 1) * .06s); }
.experience--cinematic .invite-hero { animation: invitation-cinematic-in 1.15s cubic-bezier(.2,.75,.25,1) both; }
.experience--playful .invite-hero > * { animation: invitation-playful-in .8s cubic-bezier(.2,.85,.25,1.15) both; }
.experience--playful .invite-hero > *:nth-child(2n) { animation-delay: .08s; }
.invite-section { padding: clamp(5rem, 12vw, 8rem) 1.25rem; text-align: center; }
.invite-section h2 { margin: .8rem auto 1.1rem; font: 400 clamp(2.35rem, 8vw, 4.5rem)/1.05 var(--invite-heading); }
.invite-section > p { max-width: 560px; margin-inline: auto; color: color-mix(in srgb, var(--invite-ink) 68%, transparent); line-height: 1.75; }
.location-section { background: var(--invite-surface); }
.invite-button { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.25rem; padding: .85rem 1.2rem; color: var(--invite-surface); background: var(--invite-accent); border-radius: 99px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.invite-button:hover { color: var(--invite-surface); transform: translateY(-2px); box-shadow: 0 10px 26px rgb(92 63 49 / 20%); }

/* QR access and collaborative memories */
.qr-setting-card { display: grid; grid-template-columns: 42px 1fr; gap: .85rem; margin-top: .9rem; padding: 1rem; background: #f8f3f0; border: 1px solid #eadfd8; border-radius: 14px; }
.qr-setting-card__icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand); background: #fff; border: 1px solid #e7d8cf; border-radius: 12px; font-size: 1.25rem; }
.qr-setting-card .form-check { margin: 0; }
.qr-setting-card p { margin: .35rem 0 0; color: #766b65; font-size: .72rem; line-height: 1.5; }
.qr-setting-card__link { display: inline-block; margin-top: .55rem; color: var(--brand); font-size: .72rem; font-weight: 700; text-decoration: none; }
.access-qr-section { text-align: center; background: color-mix(in srgb, var(--invite-bg) 76%, white); }
.access-qr-section p { max-width: 520px; margin-inline: auto; }
.invitation-qr-card { width: min(230px, 76vw); margin: 1.5rem auto 0; padding: 1rem; background: #fff; border: 1px solid color-mix(in srgb, var(--invite-accent) 18%, #fff); border-radius: 22px; box-shadow: 0 18px 50px rgb(45 36 31 / 9%); }
.invitation-qr-card img { display: block; width: 100%; aspect-ratio: 1; border-radius: 12px; }
.invitation-qr-card small { display: block; margin-top: .7rem; color: #685d57; font-size: .72rem; font-weight: 650; }
.invitation-qr-placeholder { width: 150px; aspect-ratio: 1; display: grid; place-items: center; margin: 1.25rem auto .75rem; color: var(--invite-accent); background: repeating-conic-gradient(from 45deg, currentColor 0 25%, transparent 0 50%) 50% / 22px 22px; border: 12px solid #fff; border-radius: 18px; font-size: 0; box-shadow: 0 12px 35px rgb(44 35 30 / 10%); }
.photo-drop-section { text-align: center; color: var(--invite-dark-ink); background: var(--invite-dark); overflow: hidden; }
.photo-drop-section .section-kicker { color: var(--invite-muted); }
.photo-drop-section h2, .photo-drop-section p { color: inherit; }
.photo-drop-section p { max-width: 560px; margin-inline: auto; opacity: .82; }
.photo-drop-section .invite-button--light {
  min-height: 52px;
  justify-content: center;
  padding-inline: 1.35rem;
  color: color-mix(in srgb, var(--invite-dark) 90%, #000);
  background: var(--invite-dark-ink);
  border: 1px solid color-mix(in srgb, var(--invite-dark-ink) 74%, transparent);
  box-shadow: 0 12px 30px rgb(0 0 0 / 24%);
  font-size: .78rem;
  font-weight: 750;
}
.photo-drop-section .invite-button--light:hover {
  color: color-mix(in srgb, var(--invite-dark) 90%, #000);
  background: #fff;
  box-shadow: 0 16px 34px rgb(0 0 0 / 30%);
}
.photo-drop-section .invite-button--light:focus-visible {
  color: #0b1723;
  background: #fff;
  outline: 3px solid var(--invite-accent);
  outline-offset: 4px;
}
.photo-drop-qr { width: 132px; margin: 1.3rem auto 0; padding: .6rem; background: #fff; border-radius: 16px; }
.photo-drop-qr img { display: block; width: 100%; border-radius: 8px; }
.photo-drop-qr small { display: block; margin: .35rem -.2rem -.1rem; color: #524944; font-size: .6rem; font-weight: 700; }
.invitation-qr-placeholder--light { width: 110px; color: #fff; border-color: var(--invite-dark); opacity: .8; }
.photo-drop-note { display: block; margin-top: 1rem; font-size: .68rem; opacity: .65; }
.invitation-gallery__item figcaption { position: absolute; inset: auto .6rem .6rem; padding: .35rem .55rem; color: #fff; background: rgb(28 24 22 / 62%); border-radius: 99px; font-size: .6rem; backdrop-filter: blur(8px); }

.photo-upload-page .site-header, .photo-upload-page .site-footer { display: none; }
.photo-upload-page { min-height: 100vh; background: #f3ede8; }
.photo-upload-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.photo-upload-card { width: min(100%, 540px); padding: clamp(1.25rem, 5vw, 2.35rem); background: #fffdfb; border: 1px solid #e6d9d1; border-radius: 28px; box-shadow: 0 24px 70px rgb(59 44 36 / 11%); }
.photo-upload-hero { margin-bottom: 1.5rem; text-align: center; }
.photo-upload-hero__icon, .photo-upload-success__icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 1rem; color: #fff; background: #93634f; border-radius: 50%; }
.photo-upload-hero h1, .photo-upload-success h1 { margin: .35rem 0 .6rem; font: 500 clamp(2rem, 9vw, 3.1rem)/1.02 var(--serif); color: #332a26; }
.photo-upload-hero p, .photo-upload-success p { color: #746861; line-height: 1.6; }
.photo-drop-input { margin-bottom: 1rem; }
.photo-drop-input input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.photo-drop-input label { min-height: 150px; display: grid; place-items: center; align-content: center; gap: .25rem; padding: 1rem; color: #6e5a50; background: #f8f2ee; border: 1.5px dashed #cdb3a5; border-radius: 18px; text-align: center; cursor: pointer; }
.photo-drop-input label > span { font-size: 2rem; line-height: 1; }
.photo-drop-input label strong { color: #3a302b; font-size: 1rem; }
.photo-drop-input label small { color: #857970; font-size: .75rem; }
.photo-upload-privacy { margin: .9rem 0 0; color: #80736c; font-size: .72rem; text-align: center; }
.photo-upload-success { text-align: center; }
.photo-upload-success__icon { background: #547862; font-size: 1.4rem; }
.photo-upload-success .btn { display: block; margin-top: 1.4rem; }
.photo-upload-back { display: inline-block; margin-top: 1rem; color: #795a4c; font-size: .82rem; font-weight: 650; }

.photo-manager-shell { width: min(1180px, calc(100% - 2rem)); margin: 2rem auto 5rem; }
.photo-manager-header { display: flex; justify-content: space-between; gap: 2rem; align-items: end; padding: 1.5rem; background: #fff; border: 1px solid #e9dfda; border-radius: 24px; }
.photo-manager-header .eyebrow { display: block; margin-top: 1.2rem; }
.photo-manager-header h1 { margin: .25rem 0; font: 500 clamp(2.2rem, 5vw, 4rem)/1 var(--serif); }
.photo-manager-header p { margin: 0; color: var(--muted); }
.photo-manager-stats { display: flex; gap: .75rem; }
.photo-manager-stats div { min-width: 100px; padding: 1rem; background: #f7f1ed; border-radius: 16px; text-align: center; }
.photo-manager-stats strong, .photo-manager-stats span { display: block; }
.photo-manager-stats strong { color: var(--brand); font: 500 1.8rem var(--serif); }
.photo-manager-stats span { color: #776b64; font-size: .7rem; }
.photo-manager-notice { display: flex; gap: .5rem; margin-top: 1rem; padding: 1rem 1.2rem; background: #fff4d9; border: 1px solid #efd89e; border-radius: 14px; }
.photo-manager-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.photo-review-card { overflow: hidden; background: #fff; border: 1px solid #e8ded8; border-radius: 20px; }
.photo-review-card figure { position: relative; aspect-ratio: 4 / 3; margin: 0; background: #ede7e3; }
.photo-review-card figure img { width: 100%; height: 100%; object-fit: cover; }
.photo-review-card figure span { position: absolute; top: .75rem; left: .75rem; padding: .35rem .65rem; color: #fff; background: rgb(42 35 31 / 72%); border-radius: 99px; font-size: .65rem; font-weight: 700; backdrop-filter: blur(7px); }
.photo-review-card--approved figure span { background: rgb(52 107 72 / 80%); }
.photo-review-card--rejected figure { opacity: .65; }
.photo-review-card__body { padding: 1rem; }
.photo-review-card__body p { margin: .3rem 0; color: #685e58; font-size: .82rem; }
.photo-review-card__body small { color: #958880; font-size: .68rem; }
.photo-review-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.photo-review-actions form { margin: 0; }
.photo-review-actions button { padding: .45rem .7rem; color: #fff; background: #426f54; border: 0; border-radius: 9px; font-size: .68rem; font-weight: 700; }
.photo-review-actions button.is-secondary { color: #554b46; background: #eee8e4; }
.photo-review-actions button.is-danger { color: #9b453d; background: #fae9e6; }
.photo-manager-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 430px; padding: 2rem; background: #fff; border: 1px dashed #d9c9c0; border-radius: 24px; text-align: center; }
.photo-manager-empty > span { font-size: 2.5rem; color: var(--brand); }
.photo-manager-empty h2 { margin: .7rem 0 .2rem; font: 500 2rem var(--serif); }
.photo-manager-empty p { max-width: 480px; color: var(--muted); }
.photo-manager-empty img { width: 150px; margin-top: 1rem; border-radius: 12px; }
.photo-manager-empty a { margin-top: .75rem; color: var(--brand); font-weight: 700; }

@media (max-width: 767px) {
  .qr-setting-card { grid-template-columns: 36px 1fr; padding: .85rem; }
  .qr-setting-card__icon { width: 36px; height: 36px; }
  .photo-drop-qr { display: none; }
  .photo-drop-section .invite-button--light { width: min(100%, 300px); }
  .photo-manager-header { display: block; padding: 1.1rem; }
  .photo-manager-stats { margin-top: 1rem; }
  .photo-manager-stats div { flex: 1; min-width: 0; }
  .photo-manager-grid { grid-template-columns: 1fr; }
  .photo-manager-notice { display: grid; }
}

/* Event control center */
.control-center-page { background: #f4efeb; }
.control-shell { width: min(1220px, calc(100% - 2rem)); margin: 2rem auto 5rem; }
.control-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.5rem 1.65rem; background: #fff; border: 1px solid #ece3dd; border-radius: 20px; box-shadow: 0 8px 26px rgb(52 37 30 / 5%); }
.control-header .eyebrow { display: block; }
.control-header h1 { margin: .3rem 0 .35rem; font: 500 clamp(1.7rem, 3vw, 2.5rem)/1.02 var(--serif); color: var(--ink); }
.control-header p { margin: 0; color: #857970; font-size: .82rem; }
.control-header__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.control-workspace:not(.is-ready) [data-workspace-panel]:not([data-workspace-default]) { display: none; }
.control-workspace-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; position: sticky; top: 74px; z-index: 24; margin-top: 1rem; padding: .45rem; background: rgb(244 239 235 / 92%); border: 1px solid #e1d5ce; border-radius: 18px; box-shadow: 0 10px 28px rgb(52 37 30 / 7%); backdrop-filter: blur(14px); }
.control-workspace-nav button { min-height: 64px; display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: .65rem; padding: .65rem .75rem; color: #6f625b; background: transparent; border: 0; border-radius: 13px; text-align: left; transition: color .2s, background .2s, box-shadow .2s, transform .2s; }
.control-workspace-nav button:hover { color: #443832; background: rgb(255 255 255 / 68%); }
.control-workspace-nav button.is-active { color: #fff; background: #3a312d; box-shadow: 0 8px 20px rgb(49 38 33 / 18%); transform: translateY(-1px); }
.control-workspace-nav button > span:first-child { width: 36px; height: 36px; display: grid; place-items: center; color: #875f4d; background: #f4e7df; border-radius: 10px; font-size: .9rem; }
.control-workspace-nav button.is-active > span:first-child { color: #3a312d; background: #fff; }
.control-workspace-nav strong,
.control-workspace-nav small { display: block; }
.control-workspace-nav strong { font-size: .76rem; }
.control-workspace-nav small { margin-top: .12rem; color: #9a8d86; font-size: .59rem; }
.control-workspace-nav button.is-active small { color: #d9cec8; }
.control-workspace-panel { padding-top: 1.15rem; }
.control-section-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .2rem .15rem .85rem; }
.control-section-intro h2 { margin: .18rem 0 0; color: var(--ink); font: 500 clamp(1.65rem, 3vw, 2.25rem)/1.05 var(--serif); }
.control-section-intro p { max-width: 670px; margin: .35rem 0 0; color: #81746d; font-size: .76rem; line-height: 1.5; }
.control-section-intro > span { padding: .45rem .7rem; color: #795a4b; background: #eadfd8; border-radius: 99px; font-size: .68rem; font-weight: 750; white-space: nowrap; }
.control-alerts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.control-alerts > a { min-height: 78px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .75rem; padding: .85rem 1rem; color: #443832; background: #fff9eb; border: 1px solid #ead8a9; border-radius: 16px; text-decoration: none; }
.control-alerts > a > span { width: 38px; height: 38px; display: grid; place-items: center; color: #875c36; background: #f6e6bd; border-radius: 50%; font-weight: 800; }
.control-alerts strong, .control-alerts small { display: block; }
.control-alerts strong { font-size: .8rem; }
.control-alerts small { margin-top: .15rem; color: #817268; font-size: .66rem; line-height: 1.35; }
.control-alerts b { color: #9b6b52; }
.control-alerts__clear { min-height: 78px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: .75rem; padding: .85rem 1rem; color: #395845; background: #eef6f0; border: 1px solid #cfe1d4; border-radius: 16px; }
.control-alerts__clear > span { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: #54745e; border-radius: 50%; font-weight: 800; }
.control-alerts__clear strong,
.control-alerts__clear small { display: block; }
.control-alerts__clear small { margin-top: .15rem; color: #6d8273; font-size: .66rem; }
.control-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.control-metrics article { min-height: 165px; padding: 1.15rem; background: #fff; border: 1px solid #e7ddd7; border-radius: 20px; }
.control-metrics article > span { color: #80736c; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.control-metrics article > strong { display: block; margin: .4rem 0 .8rem; color: #352c28; font: 500 2.4rem var(--serif); }
.control-metrics article > strong small { color: #a09189; font-size: 1rem; }
.control-metrics article > small { display: block; margin-top: .55rem; color: #8b7e76; font-size: .66rem; }

/* Summary metric cards with harmonised brand rings ------------------- */
.control-metrics__card { min-height: 155px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.25rem; background: #fff; border: 1px solid #e7ddd7; border-radius: 20px; box-shadow: 0 10px 30px rgb(63 42 32 / 5%); }
.control-metrics__text { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.control-metrics__label { color: #80736c; font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.control-metrics__value { margin: .25rem 0 0; color: #352c28; font: 500 2.1rem/1 var(--serif); }
.control-metrics__value small { color: #a89a92; font-size: 1rem; font-family: inherit; font-weight: 400; }
.control-metrics__hint { margin-top: .3rem; color: #8b7e76; font-size: .66rem; }
.control-metrics__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.control-metrics__chip { padding: .22rem .5rem; border-radius: 7px; font-size: .62rem; font-weight: 650; }
.control-metrics__chip--pending { color: #8a5a1b; background: #fbf0db; }
.control-metrics__chip--declined { color: #9a4038; background: #f8e7e4; }

.control-ring { position: relative; width: 66px; height: 66px; display: grid; place-items: center; flex-shrink: 0; }
.control-ring svg { width: 66px; height: 66px; transform: rotate(-90deg); display: block; }
.control-ring__track { fill: none; stroke: #efe7e1; stroke-width: 3.4; }
.control-ring__value { fill: none; stroke-width: 3.4; stroke-linecap: round; transition: stroke-dashoffset .7s cubic-bezier(.4, 0, .2, 1); }
.control-ring span { position: absolute; font-size: .8rem; font-weight: 750; }
.control-ring--confirm .control-ring__value { stroke: #52745e; }
.control-ring--confirm span { color: #46624f; }
.control-ring--arrive .control-ring__value { stroke: var(--brand); }
.control-ring--arrive span { color: var(--brand-dark); }
.control-ring--plan .control-ring__value { stroke: #b07d2b; }
.control-ring--plan span { color: #8f6420; }

/* Reusable activity / list feed (RSVP, catering) --------------------- */
.control-feed { display: flex; flex-direction: column; gap: .5rem; }
.control-feed--scroll { max-height: 250px; overflow-y: auto; padding-right: .15rem; }
.control-feed__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .9rem; border: 1px solid #f0e8e2; border-radius: 12px; background: #fcfaf8; }
.control-feed__main { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.control-feed__icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.control-feed__icon svg { width: 15px; height: 15px; }
.control-feed__icon--yes { color: #4a6a55; background: #e9f1ec; }
.control-feed__icon--no { color: #9a4038; background: #f8e7e4; }
.control-feed__name { display: block; font-size: .8rem; font-weight: 600; color: #3d3430; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.control-feed__desc { display: block; margin-top: .12rem; color: #8b7e76; font-size: .68rem; line-height: 1.35; }
.control-feed__desc em { font-style: italic; color: #6f635b; }
.control-feed__time { color: #a89b95; font-size: .66rem; font-weight: 600; white-space: nowrap; }
.control-feed__diet { color: #8a5a1b; background: #fbf0db; padding: .14rem .42rem; border-radius: 5px; font-weight: 650; white-space: nowrap; }
.control-feed__empty { text-align: center; color: #8b7e76; padding: 1.75rem 0; }
.control-feed__empty svg { width: 26px; height: 26px; color: #c3b4aa; display: block; margin: 0 auto .5rem; }
.control-feed__empty strong { display: block; font-size: .82rem; color: #5d514b; }
.control-feed__empty small { display: block; margin-top: .25rem; font-size: .66rem; }
.control-diet-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #f1e9e3; }
.control-diet-tags span { color: #6a4a30; background: #f6ede2; border: 1px solid #ecdcc9; padding: .25rem .6rem; border-radius: 99px; font-size: .66rem; font-weight: 650; }

/* SVG icons inside the warm circular chips (alerts, shortcuts) -------- */
.control-alerts > a > span svg,
.control-alerts__clear > span svg { width: 17px; height: 17px; }
.control-shortcuts > a > span svg { width: 18px; height: 18px; }

/* Keep every glyph-chip icon the right size after the emoji→SVG pass ---- */
.seating-card__icon svg { width: 18px; height: 18px; }
.analytics-insight__icon svg { width: 18px; height: 18px; }
.analytics-decision-banner > span svg { width: 20px; height: 20px; }
.custom-reminder-empty > span svg { width: 20px; height: 20px; }
.payment-history__empty > span svg,
.analytics-inline-empty > span svg { width: 20px; height: 20px; }
.analytics-onboarding-empty > span svg { width: 22px; height: 22px; }
.control-progress { height: 7px; overflow: hidden; background: #eee8e4; border-radius: 99px; }
.control-progress i { height: 100%; display: block; background: #9b6b52; border-radius: inherit; }
.control-progress--arrival i { background: #48725a; }
.control-progress--tasks i { background: #4f6e8a; }
.control-metric-detail { display: flex; flex-wrap: wrap; gap: .35rem; }
.control-metric-detail em { padding: .35rem .55rem; color: #71645d; background: #f5efeb; border-radius: 99px; font-size: .63rem; font-style: normal; }
.control-overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); gap: 1rem; margin-top: 1rem; }
.control-focus .control-panel__heading > button { align-self: center; padding: .45rem .65rem; color: #805a48; background: transparent; border: 0; font-size: .66rem; font-weight: 750; white-space: nowrap; }
.control-focus-list { display: grid; }
.control-focus-list > a { display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem .15rem; color: #4d4039; border-top: 1px solid #eee5e0; text-decoration: none; }
.control-focus-list > a:hover { color: #76503e; }
.control-focus-list > a > span:nth-child(2) > strong,
.control-focus-list > a > span:nth-child(2) > small { display: block; }
.control-focus-list > a > span:nth-child(2) > strong { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.control-focus-list > a > span:nth-child(2) > small { margin-top: .15rem; color: #92857d; font-size: .61rem; }
.control-focus-list > a > b { color: var(--brand); }
.control-focus-list__date { width: 45px; min-height: 45px; display: grid; place-content: center; color: #785747; background: #f4e9e3; border-radius: 10px; text-align: center; }
.control-focus-list__date strong,
.control-focus-list__date small { display: block; }
.control-focus-list__date strong { font: 500 1.05rem/1 var(--serif); }
.control-focus-list__date small { margin-top: .15rem; font-size: .48rem; text-transform: uppercase; }
.control-focus-list__date.is-overdue { color: #a33f38; background: #fbe9e7; }
.control-focus__empty { display: flex; align-items: center; gap: .75rem; padding: 1rem; color: #41604d; background: #eef6f0; border-radius: 13px; }
.control-focus__empty > span { font-size: 1.25rem; }
.control-focus__empty p,
.control-focus__empty strong,
.control-focus__empty small { display: block; margin: 0; }
.control-focus__empty small { margin-top: .2rem; color: #708176; font-size: .64rem; }
.task-calendar { margin-top: 1rem; overflow: hidden; }
.task-calendar__header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.task-calendar__header h2 { margin: .2rem 0 0; font: 500 1.75rem var(--serif); }
.task-calendar__header p { margin: .25rem 0 0; color: #857970; font-size: .75rem; }
.task-calendar__summary { display: flex; flex-wrap: wrap; justify-content: end; gap: .4rem; }
.task-calendar__summary span { padding: .4rem .65rem; color: #765f53; background: #f4ece7; border-radius: 99px; font-size: .64rem; font-weight: 750; }
.task-calendar__summary span.is-overdue { color: #973f39; background: #fbe9e7; }
.task-calendar__toolbar { min-height: 48px; display: grid; grid-template-columns: 38px auto 38px 1fr; align-items: center; gap: .4rem; margin-top: 1rem; padding: .35rem; background: #f8f3f0; border: 1px solid #ebe0da; border-radius: 14px; }
.task-calendar__toolbar > a:not(.task-calendar__today) { width: 38px; height: 38px; display: grid; place-items: center; color: #735344; background: #fff; border: 1px solid #e2d6cf; border-radius: 10px; text-decoration: none; }
.task-calendar__toolbar > a:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.task-calendar__toolbar > strong { min-width: 150px; color: #493a34; font: 500 1.1rem var(--serif); text-align: center; text-transform: capitalize; }
.task-calendar__today { justify-self: end; padding: .45rem .75rem; color: #785746; border-radius: 9px; font-size: .68rem; font-weight: 750; text-decoration: none; }
.task-calendar__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: .75rem; }
.task-calendar__weekdays span { padding: .4rem; color: #93867e; font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.task-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border: 1px solid #eadfd9; border-radius: 16px; }
.task-calendar__day { min-width: 0; min-height: 112px; padding: .55rem; background: #fff; border-right: 1px solid #eee5e0; border-bottom: 1px solid #eee5e0; }
.task-calendar__day:nth-child(7n) { border-right: 0; }
.task-calendar__day:nth-last-child(-n + 7) { border-bottom: 0; }
.task-calendar__day > time { width: 26px; height: 26px; display: grid; place-items: center; color: #5b4b43; border-radius: 50%; font-size: .7rem; font-weight: 750; }
.task-calendar__day.is-outside { background: #fbf8f6; }
.task-calendar__day.is-outside > time { color: #c0b5ae; }
.task-calendar__day.is-today > time { color: #fff; background: var(--brand); }
.task-calendar__day.has-overdue:not(.is-today) > time { color: #a33f38; background: #fbe9e7; }
.task-calendar__items { display: grid; gap: .25rem; margin-top: .35rem; }
.task-calendar__item { min-width: 0; display: flex; align-items: center; gap: .35rem; padding: .3rem .35rem; color: #5d4e47; background: #f5f0ed; border-radius: 7px; font-size: .58rem; font-weight: 700; line-height: 1.2; text-decoration: none; }
.task-calendar__item:hover { color: #43362f; background: #eee4df; }
.task-calendar__item i { width: 6px; height: 6px; flex: 0 0 auto; background: #8a817b; border-radius: 50%; }
.task-calendar__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-calendar__item--high i { background: #b77934; }
.task-calendar__item--urgent i,
.task-calendar__item.is-overdue i { background: #b64b43; }
.task-calendar__item.is-completed { opacity: .58; text-decoration: line-through; }
.task-calendar__item.is-completed i { background: #52745e; }
.task-calendar__items > small { color: #9a8d85; font-size: .55rem; }
.task-calendar__empty { display: flex; align-items: center; justify-content: center; gap: .65rem; padding: 1rem; color: #8b7c74; background: #fcfaf8; border: 1px dashed #e4d7d0; border-radius: 13px; }
.task-calendar__empty > span { color: var(--brand); font-size: 1.25rem; }
.task-calendar__empty p { margin: 0; font-size: .7rem; }
.task-calendar__empty strong { color: #574840; }
.task-calendar__legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; color: #81746d; font-size: .58rem; }
.task-calendar__legend span { display: inline-flex; align-items: center; gap: .3rem; }
.task-calendar__legend i { width: 7px; height: 7px; background: #8a817b; border-radius: 50%; }
.task-calendar__legend i.is-high { background: #b77934; }
.task-calendar__legend i.is-urgent { background: #b64b43; }
.task-calendar__legend i.is-completed { background: #52745e; }
.task-calendar__agenda { display: none; }
.event-task-card:target .event-task { border-color: var(--brand); box-shadow: 0 0 0 4px rgb(152 99 78 / 10%), 0 12px 30px rgb(57 40 32 / 8%); }
.control-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.control-planning-stack { margin-top: 1rem; }
.control-panel { padding: 1.25rem; background: #fff; border: 1px solid #e6dcd6; border-radius: 22px; }
.control-panel__heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.control-panel__heading h2 { margin: .2rem 0 0; font: 500 1.75rem var(--serif); }
.control-panel__heading p { margin: .25rem 0 0; color: #857970; font-size: .75rem; }
.control-panel__heading > span { padding: .4rem .65rem; color: #7a5a4b; background: #f4eae5; border-radius: 99px; font-size: .7rem; font-weight: 750; }
.control-panel__heading-actions { display: flex; align-items: center; justify-content: end; gap: .45rem; }
.control-panel__heading-actions form { margin: 0; }
.control-panel__heading-actions button { min-height: 34px; padding: .4rem .65rem; color: #795342; background: #fff8f3; border: 1px solid #ddc5b8; border-radius: 99px; font-size: .64rem; font-weight: 750; white-space: nowrap; }
.control-panel__heading-actions button:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
.control-panel__heading-actions > span { padding: .4rem .65rem; color: #7a5a4b; background: #f4eae5; border-radius: 99px; font-size: .7rem; font-weight: 750; }
.task-composer { margin-bottom: 1rem; overflow: hidden; background: #f8f3f0; border: 1px solid #e4d7d0; border-radius: 15px; }
.task-composer > summary { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .7rem; padding: .75rem; cursor: pointer; list-style: none; }
.task-composer > summary::-webkit-details-marker { display: none; }
.task-composer > summary > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 10px; font-size: 1rem; }
.task-composer > summary strong,
.task-composer > summary small { display: block; }
.task-composer > summary strong { color: #493b35; font-size: .77rem; }
.task-composer > summary small { margin-top: .15rem; color: #8b7e76; font-size: .62rem; }
.task-composer > summary > i { color: var(--brand); font-style: normal; transition: transform .2s; }
.task-composer[open] > summary > i { transform: rotate(180deg); }
.task-composer .task-quick-form { margin: 0; border: 0; border-top: 1px solid #e7dbd4; border-radius: 0; box-shadow: none; }
.task-list-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .8rem; }
.task-list-toolbar > span { margin-right: .25rem; color: #8a7d75; font-size: .62rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.task-list-toolbar button { min-height: 34px; padding: .35rem .6rem; color: #73665f; background: #f7f2ef; border: 1px solid #e5dad4; border-radius: 99px; font-size: .64rem; font-weight: 700; }
.task-list-toolbar button b { margin-left: .2rem; color: #9b6b52; }
.task-list-toolbar button.is-active { color: #fff; background: #443934; border-color: #443934; }
.task-list-toolbar button.is-active b { color: #e8d6cc; }
.task-list-toolbar button:disabled { opacity: .45; cursor: not-allowed; }
.task-quick-form { padding: 1rem; background: #f8f3f0; border-radius: 16px; }
.task-quick-form__basics { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.task-quick-form .mb-3 { margin-bottom: .65rem !important; }
.task-quick-form label { font-size: .68rem; }
.task-quick-form .btn { min-height: 44px; }
.task-create-details { margin: .15rem 0 .8rem; overflow: hidden; background: #fff; border: 1px solid #e6d9d2; border-radius: 13px; }
.task-create-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; list-style: none; cursor: pointer; }
.task-create-details summary::-webkit-details-marker { display: none; }
.task-create-details summary strong,
.task-create-details summary small { display: block; }
.task-create-details summary strong { color: #55453e; font-size: .72rem; }
.task-create-details summary small { margin-top: .15rem; color: #95877f; font-size: .6rem; }
.task-create-details summary i { color: #8e6654; font-style: normal; transition: transform .2s; }
.task-create-details[open] summary i { transform: rotate(180deg); }
.task-create-details__body { padding: .85rem; border-top: 1px solid #eee4de; }
.task-create-details__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.task-create-details__grid .mb-3 { margin-bottom: 0 !important; }
.task-create-details__wide { grid-column: 1 / -1; }
.task-quick-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.task-quick-form__footer > span { color: #8a7c74; font-size: .62rem; }
.task-quick-form__footer .btn { flex: 0 0 auto; }
/* ── TASKS PANEL ── */
.tasks-panel-header { display: grid; gap: 1.25rem; margin-bottom: 1.75rem; }
.tasks-panel-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.tasks-kpi-card { position: relative; overflow: hidden; padding: 1rem 1.1rem 1.1rem; background: #fff; border: 1px solid #ece4de; border-radius: 18px; box-shadow: 0 2px 8px rgb(57 40 32 / 4%); transition: box-shadow .2s, transform .2s; }
.tasks-kpi-card:hover { box-shadow: 0 8px 24px rgb(57 40 32 / 9%); transform: translateY(-2px); }
.tasks-kpi-card__accent { position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 18px 0 0 18px; }
.tasks-kpi-card__label { margin-left: .25rem; color: #84766f; font-size: .6rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.tasks-kpi-card__value { margin: .3rem 0 .1rem .25rem; color: #332b26; font: 700 2rem var(--serif); line-height: 1; }
.tasks-kpi-card__sub { margin-left: .25rem; color: #9a8c84; font-size: .62rem; }
.tasks-progress-bar { margin: .65rem 0 1.25rem; }
.tasks-progress-bar__track { height: 8px; background: #f0e8e3; border-radius: 99px; overflow: hidden; }
.tasks-progress-bar__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), #c98a6e); transition: width .6s cubic-bezier(.4,0,.2,1); }
.tasks-progress-bar__labels { display: flex; justify-content: space-between; margin-top: .4rem; color: #9a8c84; font-size: .6rem; }
.event-task-list { display: grid; gap: .55rem; margin-top: 1rem; }
.event-task-card { scroll-margin-top: 1rem; }
.event-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; padding: .9rem 1rem; background: #fff; border: 1px solid #ece3de; border-radius: 16px; transition: border-color .2s, box-shadow .2s, transform .15s; }
.event-task:hover { border-color: #d4c4ba; box-shadow: 0 4px 16px rgb(57 40 32 / 6%); }
.event-task:has(.task-definition[open]) { border-color: #c8ad9f; box-shadow: 0 12px 30px rgb(57 40 32 / 9%); transform: none; }
.event-task form { margin: 0; }
.event-task > form:first-child button { width: 32px; height: 32px; display: grid; place-items: center; color: transparent; background: #fff; border: 2px solid #d0c0b6; border-radius: 50%; transition: all .2s; }
.event-task > form:first-child button:hover { border-color: var(--brand); background: #fdf0ea; }
.event-task-card.is-completed .event-task { background: #fafaf8; border-color: #e8e2dd; }
.event-task-card.is-completed .event-task > form:first-child button { color: #fff; background: linear-gradient(135deg, #52745e, #3e5e4c); border-color: #52745e; box-shadow: 0 2px 6px rgb(82 116 94 / 30%); }
.event-task strong, .event-task small { display: block; }
.event-task strong { color: #3a302c; font-size: .8rem; font-weight: 650; }
.event-task small { margin-top: .2rem; color: #958880; font-size: .63rem; }
.event-task-card.is-completed .task-definition__title > strong { color: #a09490; text-decoration: line-through; }
.task-priority { font-weight: 750; }
.task-priority--high { color: #9b6837; }
.task-priority--urgent { color: #a7433b; }
.event-task__delete { width: 32px; height: 32px; color: #c0aea4; background: transparent; border: 0; border-radius: 8px; font-size: 1.1rem; transition: all .2s; }
.event-task__delete:hover { color: #a33b35; background: #fbecea; }
.task-definition { min-width: 0; }
.task-definition summary { display: flex; align-items: start; justify-content: space-between; gap: 1rem; list-style: none; cursor: pointer; }
.task-definition summary::-webkit-details-marker { display: none; }
.task-definition__title { min-width: 0; }
.task-definition__title em { display: block; margin-top: .45rem; color: #4a6e56; font-size: .68rem; font-style: normal; font-weight: 700; overflow-wrap: anywhere; }
.task-definition__title em.is-missing { color: #a35e42; font-weight: 650; }
.task-definition__state { flex: 0 0 auto; display: grid; justify-items: end; gap: .35rem; }
.task-definition__state b { color: #896252; font-size: .62rem; font-weight: 750; white-space: nowrap; }
.task-definition__state b i { display: inline-block; margin-left: .2rem; font-style: normal; transition: transform .2s; }
.task-definition[open] .task-definition__state b i { transform: rotate(180deg); }
.task-status { padding: .28rem .55rem; border-radius: 99px; font-size: .57rem; font-weight: 800; letter-spacing: .02em; }
.task-status--pending { color: #8a7268; background: #f3ede9; }
.task-status--researching { color: #8b632d; background: #fbefd8; }
.task-status--defined { color: #375e47; background: #e4f0e9; }
.task-status--completed { color: #fff; background: #52745e; }
.task-detail-form { margin-top: .85rem !important; padding: 1rem; background: #faf6f3; border: 1px solid #eee3dc; border-radius: 14px; }
.task-detail-form__intro { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.task-detail-form__intro strong,
.task-detail-form__intro span { display: block; }
.task-detail-form__intro strong { color: #3f342f; font-size: .8rem; }
.task-detail-form__intro > div > span { margin-top: .16rem; color: #8e8179; font-size: .63rem; }
.task-detail-form__privacy { flex: 0 0 auto; padding: .28rem .55rem; color: #52745e; background: #e8f1eb; border-radius: 99px; font-size: .55rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.task-detail-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .45rem; padding: .35rem; background: #f1e9e4; border-radius: 13px; }
.task-detail-tabs button { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .05rem .45rem; padding: .58rem .62rem; color: #786b64; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease; }
.task-detail-tabs button:hover { color: #493b35; background: rgb(255 255 255 / 55%); }
.task-detail-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.task-detail-tabs button[aria-selected="true"] { color: #4a3931; background: #fff; border-color: #e2d5cd; box-shadow: 0 3px 10px rgb(72 47 36 / 8%); }
.task-detail-tabs button > span { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: #a27561; background: #f6ece6; border-radius: 50%; font-size: .52rem; font-weight: 800; }
.task-detail-tabs button[aria-selected="true"] > span { color: #fff; background: var(--brand); }
.task-detail-tabs b,
.task-detail-tabs small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-detail-tabs b { font-size: .63rem; font-weight: 800; }
.task-detail-tabs small { margin: 0; color: #a0938b; font-size: .52rem; }
.task-detail-panel { margin-top: .75rem; padding: .95rem; background: #fff; border: 1px solid #e9dfd9; border-radius: 13px; animation: task-panel-in .2s ease both; }
.task-detail-panel[hidden] { display: none !important; }
.task-detail-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid #f0e8e3; }
.task-detail-panel > header span { color: #4b3e38; font-size: .7rem; font-weight: 800; }
.task-detail-panel > header small { color: #9c8f87; font-size: .56rem; text-align: right; }
.task-detail-panel .mb-3 { margin-bottom: .65rem !important; }
.task-detail-panel label { margin-bottom: .3rem; font-size: .64rem; }
.task-detail-panel .form-control,
.task-detail-panel .form-select { min-height: 42px; padding: .55rem .65rem; font-size: .72rem; }
.task-detail-panel__hint { margin: .15rem 0 0; color: #94877f; font-size: .56rem; line-height: 1.45; }
.task-budget-ledger-link { display: inline-block; margin-top: .55rem; color: var(--brand); font-size: .6rem; font-weight: 800; text-decoration: none; }
.task-budget-ledger-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.task-budget-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.task-budget-summary > div { padding: .6rem .7rem; background: #faf6f3; border-radius: 10px; }
.task-budget-summary span,
.task-budget-summary strong { display: block; }
.task-budget-summary span { color: #9b8d85; font-size: .52rem; text-transform: uppercase; letter-spacing: .05em; }
.task-budget-summary strong { margin-top: .15rem; color: #4a3d36; font-size: .8rem; font-variant-numeric: tabular-nums; }
@keyframes task-panel-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.task-detail-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.task-detail-form__grid .mb-3 { margin-bottom: 0 !important; }
.task-detail-form__grid label { margin-bottom: .3rem; font-size: .64rem; }
.task-detail-form__grid .form-control,
.task-detail-form__grid .form-select { min-height: 42px; padding: .55rem .65rem; font-size: .72rem; }
.task-detail-form__wide { grid-column: 1 / -1; }
.task-detail-form__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .85rem; }
.task-detail-form__footer span { max-width: 340px; color: #8c7f77; font-size: .6rem; line-height: 1.4; }
.task-detail-form__footer .btn { min-height: 42px; flex: 0 0 auto; }
.control-empty { min-height: 200px; display: grid; place-items: center; align-content: center; gap: .3rem; padding: 2rem 1.5rem; color: #887a72; text-align: center; }
.control-empty > span { width: 54px; height: 54px; display: grid; place-items: center; color: #9a7461; background: #f6ede7; border: 1px solid #ecdfd7; border-radius: 50%; font-size: 1.3rem; margin-bottom: .35rem; }
.control-empty > span svg { width: 24px; height: 24px; }
.control-empty strong { color: #4c403a; font: 500 1.2rem var(--serif); }
.control-empty small { max-width: 390px; font-size: .7rem; line-height: 1.5; }
.control-empty .btn { margin-top: .75rem; }
/* Minimalist empty state: hairline frame, no heavy dashed inline overrides */
.control-empty--framed { border: 1px solid #ece3dd; border-radius: 20px; background: #fffdfb; margin-top: 1.5rem; }
.control-shortcuts { display: grid; gap: .55rem; }
.control-shortcuts .control-panel__heading { margin-bottom: .35rem; }
.control-shortcuts > a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .7rem; padding: .75rem; color: #493d37; border: 1px solid #ece3de; border-radius: 13px; text-decoration: none; }
.control-shortcuts > a:hover { border-color: #cdb8ac; background: #fcf8f5; }
.control-shortcuts > a > span { width: 38px; height: 38px; display: grid; place-items: center; color: #8c604c; background: #f5eae4; border-radius: 11px; }
.control-shortcuts strong, .control-shortcuts small { display: block; }
.control-shortcuts strong { font-size: .75rem; }
.control-shortcuts small { margin-top: .15rem; color: #8f827a; font-size: .61rem; }

/* ── ARRIVALS PANEL ── */
.guest-control-panel { margin-top: 0; }
.arrivals-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.5rem; }
.arrivals-kpi-card { padding: 1.1rem 1.15rem; background: #fff; border: 1px solid #ece4de; border-radius: 18px; box-shadow: 0 2px 8px rgb(57 40 32 / 4%); transition: box-shadow .2s, transform .2s; cursor: default; }
.arrivals-kpi-card:hover { box-shadow: 0 6px 20px rgb(57 40 32 / 8%); transform: translateY(-2px); }
.arrivals-kpi-card__label { display: block; color: #84766f; font-size: .58rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .3rem; }
.arrivals-kpi-card__value { display: block; font: 700 1.9rem var(--serif); color: #332b26; line-height: 1; }
.arrivals-kpi-card__sub { display: block; margin-top: .3rem; color: #9a8c84; font-size: .6rem; }
.arrivals-kpi-card__bar { height: 4px; background: #f0e8e3; border-radius: 99px; margin-top: .7rem; overflow: hidden; }
.arrivals-kpi-card__bar-fill { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.arrivals-search-dock { display: flex; align-items: center; gap: .85rem; padding: .85rem 1.1rem; margin-bottom: 1rem; background: #fff; border: 1px solid #e4dbd5; border-radius: 16px; box-shadow: 0 2px 12px rgb(57 40 32 / 4%); flex-wrap: wrap; }
.arrivals-search-dock__input-wrap { position: relative; flex: 1; min-width: 200px; }
.arrivals-search-dock__icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: #b0a09a; font-size: .95rem; pointer-events: none; }
.arrivals-search-dock input { width: 100%; padding: .6rem .85rem .6rem 2.5rem; background: #f8f3f0; border: 1.5px solid #e8ddd7; border-radius: 12px; font-size: .82rem; color: #3a302c; outline: none; transition: border-color .2s, box-shadow .2s; }
.arrivals-search-dock input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 12%); background: #fff; }
.arrivals-search-dock__actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.arrivals-scan-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; background: linear-gradient(135deg, #453830, #5c4940); color: #fff; border: none; border-radius: 10px; font-size: .72rem; font-weight: 700; cursor: pointer; transition: all .2s; box-shadow: 0 2px 8px rgb(57 40 32 / 20%); }
.arrivals-scan-btn:hover { background: linear-gradient(135deg, #5c4940, #6e5a4f); box-shadow: 0 4px 16px rgb(57 40 32 / 30%); transform: translateY(-1px); }
.arrivals-count-badge { padding: .4rem .8rem; background: #f4ede8; color: #7a5a4b; border-radius: 99px; font-size: .65rem; font-weight: 750; white-space: nowrap; }
.arrivals-filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.arrivals-filter-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 99px; font-size: .68rem; font-weight: 700; border: 1.5px solid #e4dbd5; background: #fff; color: #7a6e68; cursor: pointer; transition: all .2s; white-space: nowrap; }
.arrivals-filter-btn:hover { border-color: #c8b5ab; color: #453830; }
.arrivals-filter-btn.is-active { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 3px 10px rgb(152 99 78 / 30%); }
.arrivals-filter-btn.is-active--green { border-color: #3a7054; background: #3a7054; color: #fff; box-shadow: 0 3px 10px rgb(58 112 84 / 30%); }
.arrivals-filter-btn.is-active--amber { border-color: #b8700c; background: #b8700c; color: #fff; box-shadow: 0 3px 10px rgb(184 112 12 / 30%); }
.arrivals-filter-btn.is-active--slate { border-color: #4f5d75; background: #4f5d75; color: #fff; box-shadow: 0 3px 10px rgb(79 93 117 / 30%); }
.arrivals-filter-btn b { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: rgba(0,0,0,.12); border-radius: 99px; font-size: .6rem; }
.arrivals-filter-btn.is-active b, .arrivals-filter-btn.is-active--green b, .arrivals-filter-btn.is-active--amber b, .arrivals-filter-btn.is-active--slate b { background: rgba(255,255,255,.25); }
.arrivals-qr-box { display: none; background: #fff; border: 1px solid #e4dbd5; border-radius: 18px; padding: 1.25rem; margin-bottom: 1rem; text-align: center; box-shadow: 0 4px 20px rgb(57 40 32 / 6%); }
.arrivals-qr-box__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.arrivals-qr-box__header strong { font-size: .8rem; color: #3a302c; }
.arrivals-qr-close { background: none; border: none; width: 28px; height: 28px; display: grid; place-items: center; color: #e45d50; border-radius: 8px; cursor: pointer; font-size: 1.1rem; transition: background .2s; }
.arrivals-qr-close:hover { background: #fbecea; }
.arrivals-qr-viewport { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #f4f0ed; border: 1.5px dashed #d0c5be; }
.arrivals-qr-hint { margin: .65rem 0 0; color: #9a8c84; font-size: .65rem; }
.arrival-list-wrap { background: #fff; border: 1px solid #e6ddd7; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 12px rgb(57 40 32 / 4%); }
.arrival-list { display: grid; }
.arrival-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #f0ebe7; transition: background .15s; }
.arrival-row:last-child { border-bottom: none; }
.arrival-row:hover { background: #fdfaf8; }
.arrival-row.is-arrived { background: linear-gradient(90deg, rgb(58 112 84 / 6%), transparent 70%); }
.arrival-row.is-arrived:hover { background: linear-gradient(90deg, rgb(58 112 84 / 10%), rgb(248 253 250 / 80%) 70%); }
.arrival-row__avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; font-size: .82rem; font-weight: 750; flex-shrink: 0; }
.arrival-row__identity { min-width: 0; }
.arrival-row__identity strong { display: block; color: #3a302c; font-size: .82rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrival-row__identity small { display: block; margin-top: .2rem; color: #9a8c84; font-size: .63rem; }
.arrival-row__meta { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; flex-wrap: wrap; }
.arrival-row__tag { padding: .2rem .5rem; border-radius: 6px; font-size: .6rem; font-weight: 700; }
.arrival-row__actions { flex-shrink: 0; display: flex; align-items: center; gap: .65rem; }
.arrival-checkin-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem 1rem; border-radius: 99px; font-size: .68rem; font-weight: 750; background: #eaf4ed; color: #2d6e4a; border: 1.5px solid #b6dfc6; white-space: nowrap; }
.arrival-checkin-pill svg { width: 14px; height: 14px; }
.arrival-undo-btn { padding: .4rem .75rem; color: #8a7e78; background: #f5f0ed; border: 1px solid #e4dbd5; border-radius: 8px; font-size: .65rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.arrival-undo-btn:hover { color: #a33b35; border-color: #f5b8b3; background: #fef2f1; }
.arrival-register-form { display: flex; align-items: center; gap: .55rem; padding: .45rem .55rem .45rem .9rem; background: #f8f3f0; border: 1.5px solid #e4dbd5; border-radius: 12px; }
.arrival-register-form label { color: #8a7e78; font-size: .65rem; font-weight: 700; white-space: nowrap; }
.arrival-register-form input { width: 48px; padding: .3rem .4rem; background: #fff; border: 1px solid #d4c8c0; border-radius: 8px; text-align: center; font-size: .82rem; font-weight: 700; color: #3a302c; }
.arrival-register-btn { padding: .45rem .9rem; background: linear-gradient(135deg, #3a302c, #504540); color: #fff; border: none; border-radius: 9px; font-size: .68rem; font-weight: 750; cursor: pointer; transition: all .2s; white-space: nowrap; }
.arrival-register-btn:hover { background: linear-gradient(135deg, #504540, #635850); box-shadow: 0 3px 12px rgb(57 40 32 / 25%); }
.arrival-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .35rem .7rem; margin-bottom: .65rem; padding: .75rem; background: #f8f4f1; border-radius: 13px; }
.arrival-tools label { grid-column: 1 / -1; color: #665951; font-size: .65rem; font-weight: 750; }
.arrival-tools input { min-height: 42px; padding: .55rem .7rem; background: #fff; border: 1px solid #d9cbc3; border-radius: 10px; font-size: .75rem; }
.arrival-tools > span { padding-bottom: .65rem; color: #8a7d75; font-size: .62rem; white-space: nowrap; }
.arrival-time { text-align: right; }
.arrival-time strong, .arrival-time small { display: block; }
.arrival-time strong { color: #477058; }
.arrival-time small { color: #8d8078; font-size: .62rem; }
.checkin-register-form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1rem; }
.checkin-register-form label { grid-column: 1 / -1; font-size: .75rem; font-weight: 700; }
.checkin-register-form input { min-height: 48px; padding: .65rem; border: 1px solid #d6c8c0; border-radius: 12px; }
.checkin-arrival-state { display: grid; gap: .2rem; margin: 1rem 0; padding: 1rem; color: #315640; background: #eaf4ed; border-radius: 14px; }
.guest-summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: #fff; border: 1px solid #e6dcd6; border-radius: 20px; }
.guest-summary-strip article { min-height: 112px; padding: 1rem; border-right: 1px solid #eee4df; }
.guest-summary-strip article:last-child { border-right: 0; }
.guest-summary-strip span, .guest-summary-strip strong, .guest-summary-strip small { display: block; }
.guest-summary-strip span { color: #84766f; font-size: .61rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.guest-summary-strip strong { margin: .2rem 0; color: #3f342f; font: 500 1.8rem var(--serif); }
.guest-summary-strip small { color: #93867e; font-size: .61rem; }

@media (max-width: 900px) {
  .control-alerts, .control-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-layout { grid-template-columns: 1fr; }
  .control-overview-grid { grid-template-columns: 1fr; }
  .guest-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guest-summary-strip article:nth-child(2) { border-right: 0; }
  .guest-summary-strip article:nth-child(-n + 2) { border-bottom: 1px solid #eee4df; }
  .arrivals-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .tasks-panel-kpi { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .control-shell { width: min(100% - 1rem, 1220px); margin-top: .5rem; }
  .control-header { display: block; padding: 1.1rem; border-radius: 20px; }
  .control-header h1 { font-size: 2.35rem; }
  .control-header__actions { margin-top: 1rem; }
  .control-header__actions .btn { flex: 1; }
  .control-workspace-nav { display: flex; top: 61px; margin-inline: -.05rem; padding: .35rem; overflow-x: auto; border-radius: 15px; scroll-snap-type: x mandatory; }
  .control-workspace-nav button { min-width: 172px; min-height: 58px; flex: 1 0 172px; scroll-snap-align: start; }
  .control-workspace-panel { padding-top: .85rem; }
  .control-section-intro { display: block; padding-inline: .25rem; }
  .control-section-intro h2 { font-size: 1.75rem; }
  .control-section-intro p { font-size: .76rem; }
  .control-section-intro > span { display: inline-block; margin-top: .6rem; }
  .control-section-intro--guests .btn { width: 100%; margin-top: .75rem; }
  .control-alerts, .control-metrics { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .control-alerts > a { grid-column: 1 / -1; }
  .control-metrics article { min-height: 145px; padding: .85rem; }
  .control-metrics article > strong { font-size: 2rem; }
  .control-panel { padding: .9rem; border-radius: 18px; }
  .control-panel__heading { display: block; }
  .control-panel__heading-actions { justify-content: space-between; margin-top: .65rem; }
  .control-panel__heading-actions button { white-space: normal; text-align: left; }
  .control-focus .control-panel__heading > button { margin-top: .45rem; padding-left: 0; }
  .control-focus-list > a { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .control-focus-list > a > span:nth-child(2) > strong { white-space: normal; }
  .task-calendar__header { display: block; }
  .task-calendar__summary { justify-content: start; margin-top: .65rem; }
  .task-calendar__toolbar { grid-template-columns: 38px 1fr 38px; }
  .task-calendar__today { grid-column: 1 / -1; justify-self: center; }
  .task-calendar__weekdays span { padding-inline: .1rem; font-size: .52rem; }
  .task-calendar__day { min-height: 58px; padding: .3rem; }
  .task-calendar__day > time { width: 23px; height: 23px; font-size: .63rem; }
  .task-calendar__items { display: flex; flex-wrap: wrap; gap: 3px; margin: .3rem 0 0 .15rem; }
  .task-calendar__item { width: 7px; height: 7px; display: block; padding: 0; background: transparent; }
  .task-calendar__item i { width: 7px; height: 7px; display: block; }
  .task-calendar__item span,
  .task-calendar__items > small { display: none; }
  .task-calendar__empty { margin-top: .7rem; }
  .task-calendar__agenda { display: grid; gap: .45rem; margin-top: .75rem; }
  .task-calendar__agenda > a { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: .65rem; padding: .6rem; color: #51433c; border: 1px solid #ebe1db; border-radius: 11px; text-decoration: none; }
  .task-calendar__agenda time { display: grid; place-items: center; color: var(--brand); background: #f4e9e3; border-radius: 9px; }
  .task-calendar__agenda time strong,
  .task-calendar__agenda time span,
  .task-calendar__agenda > a > span > strong,
  .task-calendar__agenda > a > span > small { display: block; }
  .task-calendar__agenda time strong { font: 500 1rem var(--serif); }
  .task-calendar__agenda time span { margin-top: -.15rem; font-size: .48rem; text-transform: uppercase; }
  .task-calendar__agenda > a > span > strong { font-size: .68rem; }
  .task-calendar__agenda > a > span > small { margin-top: .15rem; color: #91847c; font-size: .56rem; }
  .task-calendar__agenda > a > b { color: var(--brand); }
  .task-quick-form__basics,
  .task-create-details__grid { grid-template-columns: 1fr; gap: 0; }
  .task-create-details__wide { grid-column: auto; }
  .task-quick-form__footer { display: grid; }
  .task-quick-form__footer .btn { width: 100%; }
  .task-composer > summary { grid-template-columns: 36px 1fr auto; padding: .65rem; }
  .task-composer > summary small { font-size: .7rem; line-height: 1.35; }
  .task-list-toolbar { flex-wrap: nowrap; padding-bottom: .25rem; overflow-x: auto; }
  .task-list-toolbar > span,
  .task-list-toolbar button { flex: 0 0 auto; }
  .guest-summary-strip article { min-height: 100px; padding: .8rem; }
  .guest-summary-strip strong { font-size: 1.55rem; }
  .arrival-tools { grid-template-columns: 1fr; }
  .arrival-tools > span { padding: 0; }
  .arrival-row { grid-template-columns: auto 1fr; gap: .6rem; }
  .arrival-row__actions { grid-column: 1 / -1; padding-left: 54px; }
  .task-definition summary { display: grid; gap: .5rem; }
  .task-definition__state { display: flex; align-items: center; justify-content: space-between; }
  .task-detail-form { margin-inline: -2.4rem -3.75rem !important; padding: .8rem; }
  .task-detail-form__intro { align-items: flex-start; }
  .task-detail-form__intro > div > span { max-width: 230px; line-height: 1.4; }
  .task-detail-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .task-detail-tabs::-webkit-scrollbar { display: none; }
  .task-detail-tabs button { flex: 0 0 130px; scroll-snap-align: start; }
  .task-detail-panel { padding: .8rem; }
  .task-detail-panel > header { display: grid; gap: .15rem; }
  .task-detail-panel > header small { text-align: left; }
  .task-budget-summary { gap: .35rem; }
  .task-budget-summary > div { padding: .5rem; }
  .task-budget-summary strong { font-size: .7rem; }
  .task-detail-form__grid { grid-template-columns: 1fr; }
  .task-detail-form__wide { grid-column: auto; }
  .task-detail-form__footer { display: grid; }
  .task-detail-form__footer .btn { width: 100%; }
  .arrival-row > form:last-child, .arrival-form { grid-column: 2 / -1; }
  .arrival-form .btn { flex: 1; }
  .arrivals-kpi-strip { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
  .tasks-panel-kpi { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .tasks-kpi-card:last-child { grid-column: 1 / -1; }
  .arrivals-search-dock { flex-wrap: wrap; gap: .65rem; }
  .arrivals-search-dock__input-wrap { min-width: unset; width: 100%; }
  .arrivals-filters { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
  .arrivals-filter-btn { flex: 0 0 auto; }
  .arrival-register-form { flex-wrap: wrap; }
}
/* ── CONTROL HEADER TABS SCROLL ── */
.control-header-tabs { display: flex; gap: .3rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .1rem; }
.control-header-tabs::-webkit-scrollbar { display: none; }
.control-tab-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; color: #7a6e68; background: #f5f0ec; border: 1.5px solid transparent; border-radius: 10px; font-size: .7rem; font-weight: 700; text-decoration: none; white-space: nowrap; scroll-snap-align: start; transition: all .18s; }
.control-tab-btn svg { opacity: .7; flex-shrink: 0; }
.control-tab-btn:hover { color: #453830; background: #ece5df; }
.control-tab-btn.is-active { color: #fff; background: var(--brand); border-color: var(--brand-dark); box-shadow: 0 3px 10px rgb(152 99 78 / 30%); }
.control-tab-btn.is-active svg { opacity: 1; }

/* ── SHARED PANEL INTRO ── */
.cc-panel-intro { margin-bottom: 1.5rem; }
.cc-panel-intro h2 { margin: .25rem 0 .35rem; font: 500 1.9rem var(--serif); color: #332b26; }
.cc-panel-intro p { margin: 0; color: #9a8c84; font-size: .78rem; }

/* ── BUDGET PANEL ── */
.budget-kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-bottom: 1.25rem; }
.budget-kpi-card { padding: 1.1rem 1.15rem; background: #fff; border: 1px solid #ece4de; border-radius: 18px; box-shadow: 0 2px 8px rgb(57 40 32 / 4%); transition: box-shadow .2s, transform .2s; }
.budget-kpi-card:hover { box-shadow: 0 6px 20px rgb(57 40 32 / 8%); transform: translateY(-2px); }
.budget-kpi-card__label { display: block; color: #84766f; font-size: .58rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; margin-bottom: .3rem; }
.budget-kpi-card__value { display: block; font: 700 1.85rem var(--serif); color: #332b26; line-height: 1; }
.budget-kpi-card__sub { display: block; margin-top: .3rem; color: #9a8c84; font-size: .6rem; }
.budget-kpi-card__bar { height: 4px; background: #f0e8e3; border-radius: 99px; margin-top: .7rem; overflow: hidden; }
.budget-kpi-card__bar-fill { height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.budget-progress { margin-bottom: 1.5rem; }
.budget-progress__track { height: 10px; background: #f0e8e3; border-radius: 99px; overflow: hidden; }
.budget-progress__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3a7054, #52a87a); transition: width .6s cubic-bezier(.4,0,.2,1); }
.budget-progress__labels { display: flex; justify-content: space-between; margin-top: .45rem; color: #9a8c84; font-size: .62rem; }
.budget-table { display: grid; gap: .35rem; margin-top: .75rem; }
.budget-table__head { display: grid; grid-template-columns: 1fr 100px 100px 100px 90px; gap: .5rem; padding: .5rem .85rem; color: #9a8c84; font-size: .6rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.budget-table__row { display: grid; grid-template-columns: 1fr 100px 100px 100px 90px; gap: .5rem; align-items: center; padding: .75rem .85rem; background: #fff; border: 1px solid #ece4de; border-radius: 12px; transition: border-color .2s; }
.budget-table__row:hover { border-color: #d4c4ba; }
.budget-table__row.is-completed { background: #fafaf8; opacity: .75; }
.budget-table__name strong { display: block; font-size: .78rem; color: #3a302c; font-weight: 650; }
.budget-table__name small { display: block; margin-top: .15rem; color: #9a8c84; font-size: .62rem; }
.budget-table__amount { font-size: .78rem; font-weight: 700; color: #3a302c; }
.budget-table__amount--paid { color: #2d6e4a; }
.budget-table__amount--due { color: #b8700c; }
.budget-unset-row { display: flex; justify-content: space-between; align-items: center; padding: .6rem .85rem; background: #fff; border: 1px solid #eee4de; border-radius: 10px; font-size: .75rem; color: #6a5a52; text-decoration: none; transition: all .2s; }
.budget-unset-row:hover { border-color: var(--brand); color: var(--brand); background: #fdf8f5; }
.budget-unset-row > span:last-child { font-size: .65rem; font-weight: 750; }

/* ── SCHEDULE / CRONOGRAMA PANEL ── */
.schedule-timeline { display: grid; gap: 0; margin-top: 1rem; position: relative; padding-left: .5rem; }
.schedule-item { display: grid; grid-template-columns: 72px 20px 1fr; gap: 0 1rem; align-items: start; }
.schedule-item:not(:last-child) .schedule-item__dot::after { content: ''; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% - 4px); background: linear-gradient(180deg, #e4d7d0, transparent); }
.schedule-item__time { padding: .9rem 0; text-align: right; }
.schedule-item__time strong { display: block; font-size: .88rem; font-weight: 750; color: var(--brand); font-variant-numeric: tabular-nums; }
.schedule-item__time span { display: block; font-size: .58rem; color: #b0a09a; margin-top: .1rem; text-transform: uppercase; letter-spacing: .05em; }
.schedule-item__dot { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; }
.schedule-item__dot::before { content: ''; width: 14px; height: 14px; background: #fff; border: 2.5px solid var(--brand); border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px rgb(152 99 78 / 12%); z-index: 1; }
.schedule-item__dot::after { content: ''; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 2px; bottom: 0; background: linear-gradient(180deg, #e4d7d0, transparent); }
.schedule-item:last-child .schedule-item__dot::after { display: none; }
.schedule-item__body { padding: .65rem 0 1.5rem; }
.schedule-item__icon { display: inline-block; margin-bottom: .35rem; font-size: 1.1rem; }
.schedule-item__title { display: block; font-size: .9rem; font-weight: 700; color: #3a302c; }
.schedule-item__desc { margin: .35rem 0 0; color: #8a7e78; font-size: .75rem; line-height: 1.5; }
.schedule-item__location { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; font-size: .68rem; color: #9a8c84; }
.schedule-item__location a { color: var(--brand); text-decoration: none; font-weight: 600; }
.schedule-item__location a:hover { text-decoration: underline; }

/* Budget ledger: agreed costs, dated installments and private receipts. */
.budget-ledger > .control-panel__heading { margin-bottom: .8rem; }
.budget-ledger > .control-panel__heading h3 { margin: .2rem 0 0; color: #3b302b; font: 500 1.35rem var(--serif); }
.budget-ledger > .control-panel__heading p { margin: .25rem 0 0; color: #94877f; font-size: .68rem; }
.budget-concept-list { display: grid; gap: .7rem; }
.budget-concept-card { overflow: hidden; background: #fff; border: 1px solid #e7ddd6; border-radius: 18px; box-shadow: 0 2px 10px rgb(57 40 32 / 4%); scroll-margin-top: 90px; }
.budget-concept-card[open] { border-color: #d7c3b8; box-shadow: 0 12px 30px rgb(57 40 32 / 8%); }
.budget-concept-card > summary { display: grid; grid-template-columns: minmax(210px, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; list-style: none; cursor: pointer; }
.budget-concept-card > summary::-webkit-details-marker { display: none; }
.budget-concept-card__identity { min-width: 0; display: flex; align-items: center; gap: .75rem; }
.budget-concept-card__identity > div { min-width: 0; }
.budget-concept-card__identity strong,
.budget-concept-card__identity small { display: block; }
.budget-concept-card__identity strong { overflow: hidden; color: #3d322d; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.budget-concept-card__identity small { margin-top: .2rem; color: #998b83; font-size: .6rem; }
.budget-concept-card__icon { width: 38px; height: 38px; display: grid; flex: 0 0 auto; place-items: center; color: #8c604c; background: #f4e9e2; border-radius: 12px; font: 600 1rem var(--serif); }
.budget-concept-card__figures { display: flex; align-items: center; gap: 1.1rem; }
.budget-concept-card__figures > span { min-width: 72px; text-align: right; }
.budget-concept-card__figures small,
.budget-concept-card__figures strong { display: block; }
.budget-concept-card__figures small { color: #a0938b; font-size: .5rem; letter-spacing: .05em; text-transform: uppercase; }
.budget-concept-card__figures strong { margin-top: .15rem; color: #493c36; font-size: .75rem; font-variant-numeric: tabular-nums; }
.budget-concept-card__figures strong.is-paid { color: #357052; }
.budget-concept-card__figures strong.is-due { color: #ad6a20; }
.budget-concept-card__figures > b { color: var(--brand); font-size: .6rem; white-space: nowrap; }
.budget-concept-card__figures > b i { display: inline-block; margin-left: .2rem; font-style: normal; transition: transform .2s; }
.budget-concept-card[open] .budget-concept-card__figures > b i { transform: rotate(180deg); }
.budget-concept-card__body { display: grid; gap: .8rem; padding: 0 1.1rem 1.1rem; border-top: 1px solid #f0e8e3; }
.budget-cost-editor,
.payment-history,
.payment-composer { padding-top: 1rem; }
.budget-cost-editor > header strong,
.budget-cost-editor > header small,
.payment-history > header strong,
.payment-history > header small,
.payment-composer > header strong,
.payment-composer > header small { display: block; }
.budget-cost-editor > header strong,
.payment-history > header strong,
.payment-composer > header strong { color: #453933; font-size: .72rem; }
.budget-cost-editor > header small,
.payment-history > header small,
.payment-composer > header small { margin-top: .15rem; color: #998c84; font-size: .58rem; }
.budget-cost-editor > form { display: grid; grid-template-columns: minmax(180px, 320px) auto; align-items: end; gap: .65rem; margin-top: .7rem; }
.budget-cost-editor .mb-3 { margin-bottom: 0 !important; }
.budget-cost-editor .btn { min-height: 42px; }
.payment-history > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.payment-history > header > span { padding: .3rem .55rem; color: #357052; background: #e9f2ec; border-radius: 99px; font-size: .58rem; font-weight: 800; }
.payment-history__list { display: grid; gap: .45rem; margin-top: .7rem; }
.payment-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .65rem; background: #faf7f4; border: 1px solid #eee5df; border-radius: 12px; }
.payment-row time { text-align: center; }
.payment-row time strong,
.payment-row time span { display: block; }
.payment-row time strong { color: var(--brand); font: 600 1rem var(--serif); }
.payment-row time span { color: #a0938b; font-size: .48rem; text-transform: uppercase; }
.payment-row__info strong,
.payment-row__info small { display: block; }
.payment-row__info strong { color: #3d322d; font-size: .76rem; font-variant-numeric: tabular-nums; }
.payment-row__info small { margin-top: .12rem; color: #8f8179; font-size: .56rem; }
.payment-row__info p { margin: .25rem 0 0; color: #766962; font-size: .58rem; }
.payment-row__actions { display: flex; align-items: center; gap: .5rem; }
.payment-row__actions a,
.payment-row__actions > span { color: var(--brand); font-size: .57rem; font-weight: 750; text-decoration: none; }
.payment-row__actions > span { color: #aaa09a; font-weight: 600; }
.payment-row__actions form { margin: 0; }
.payment-row__actions button { width: 27px; height: 27px; color: #a36b61; background: #fff; border: 1px solid #eadbd5; border-radius: 8px; }
.payment-history__empty { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; padding: .7rem; color: #92857e; background: #faf7f4; border-radius: 11px; }
.payment-history__empty span { font-size: 1rem; }
.payment-history__empty p { margin: 0; font-size: .61rem; }
.payment-composer { border-top: 1px dashed #e5d9d2; }
.payment-composer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .7rem; margin-top: .75rem; }
.payment-composer__grid .mb-3 { margin-bottom: 0 !important; }
.payment-composer__grid label { margin-bottom: .3rem; font-size: .62rem; }
.payment-composer__grid .form-control,
.payment-composer__grid .form-select { min-height: 42px; padding: .55rem .65rem; font-size: .7rem; }
.payment-composer__wide { grid-column: 1 / -1; }
.payment-receipt-hint { display: block; margin-top: .25rem; color: #9c8f87; font-size: .54rem; }
.payment-composer__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.payment-composer__footer > span { color: #958880; font-size: .57rem; }
.budget-paid-off { display: flex; align-items: center; gap: .65rem; padding: .8rem; color: #315f46; background: #e9f3ed; border-radius: 12px; }
.budget-paid-off > span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: #4e8062; border-radius: 50%; }
.budget-paid-off strong,
.budget-paid-off small { display: block; }
.budget-paid-off strong { font-size: .7rem; }
.budget-paid-off small { margin-top: .15rem; font-size: .57rem; }
.budget-unset-list { display: grid; gap: .5rem; }
.budget-unset-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(150px, 230px) auto; gap: .7rem; }
.budget-unset-row > div:first-child strong,
.budget-unset-row > div:first-child small { display: block; }
.budget-unset-row > div:first-child strong { color: #4c403a; font-size: .72rem; }
.budget-unset-row > div:first-child small { margin-top: .15rem; color: #9a8d85; font-size: .56rem; }
.budget-unset-row .mb-3 { margin-bottom: 0 !important; }
.budget-unset-row label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.budget-unset-row .form-control,
.budget-unset-row .btn { min-height: 40px; font-size: .68rem; }

/* Schedule editor lives where the user manages the day. */
.schedule-save-note { color: #7a6d65; font-size: .62rem; }
.schedule-composer { margin-bottom: 1rem; overflow: hidden; background: #fff; border: 1px solid #e5d9d2; border-radius: 16px; }
.schedule-composer > summary { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .7rem; padding: .8rem 1rem; list-style: none; cursor: pointer; }
.schedule-composer > summary::-webkit-details-marker,
.schedule-editor-card > summary::-webkit-details-marker { display: none; }
.schedule-composer > summary > span { width: 36px; height: 36px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 11px; }
.schedule-composer > summary strong,
.schedule-composer > summary small { display: block; }
.schedule-composer > summary strong { color: #423630; font-size: .74rem; }
.schedule-composer > summary small { margin-top: .15rem; color: #978a82; font-size: .58rem; }
.schedule-composer > summary b { color: var(--brand); font-size: .62rem; }
.schedule-composer > summary i { display: inline-block; font-style: normal; transition: transform .2s; }
.schedule-composer[open] > summary i { transform: rotate(180deg); }
.schedule-composer > form { padding: 1rem; background: #faf7f4; border-top: 1px solid #eee4de; }
.schedule-form-grid { display: grid; grid-template-columns: 1fr 1.25fr .65fr; gap: .65rem; }
.schedule-form-grid__wide { grid-column: 1 / -1; }
.schedule-form-grid .mb-3 { margin-bottom: 0 !important; }
.schedule-form-grid label { margin-bottom: .3rem; font-size: .62rem; }
.schedule-form-grid .form-control,
.schedule-form-grid .form-select { min-height: 42px; padding: .55rem .65rem; font-size: .7rem; }
.schedule-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.schedule-form-actions > span { color: #94877f; font-size: .57rem; }
.schedule-editor-card { display: block; scroll-margin-top: 90px; }
.schedule-editor-card > summary { display: grid; grid-template-columns: 72px 20px minmax(0, 1fr) auto; gap: 0 1rem; align-items: start; list-style: none; cursor: pointer; }
.schedule-editor-card__edit { margin-top: .8rem; color: var(--brand); font-size: .6rem; font-weight: 750; }
.schedule-editor-card__edit i { display: inline-block; font-style: normal; transition: transform .2s; }
.schedule-editor-card[open] .schedule-editor-card__edit i { transform: rotate(180deg); }
.schedule-editor-card__form { margin: -.6rem 0 1rem 124px; padding: .9rem; background: #faf7f4; border: 1px solid #e9dfd9; border-radius: 14px; }
.schedule-delete-btn { margin-top: .65rem; padding: .3rem 0; color: #a14f49; background: transparent; border: 0; font-size: .6rem; font-weight: 750; }

@media (max-width: 767.98px) {
  .budget-concept-card > summary { grid-template-columns: 1fr; }
  .budget-concept-card__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
  .budget-concept-card__figures > span { min-width: 0; padding: .45rem; background: #faf7f4; border-radius: 9px; text-align: left; }
  .budget-concept-card__figures > b { grid-column: 1 / -1; text-align: right; }
  .payment-composer__grid,
  .schedule-form-grid { grid-template-columns: 1fr; }
  .payment-composer__wide,
  .schedule-form-grid__wide { grid-column: auto; }
  .payment-composer__footer,
  .schedule-form-actions { display: grid; }
  .payment-composer__footer .btn,
  .schedule-form-actions .btn { width: 100%; }
  .payment-row { grid-template-columns: 44px 1fr; }
  .payment-row__actions { grid-column: 2; justify-content: space-between; }
  .budget-cost-editor > form,
  .budget-unset-row { grid-template-columns: 1fr; }
  .budget-unset-row label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .schedule-editor-card > summary { grid-template-columns: 58px 16px minmax(0, 1fr); gap: 0 .6rem; }
  .schedule-editor-card__edit { grid-column: 3; margin: -.9rem 0 .7rem; text-align: right; }
  .schedule-editor-card__form { margin: 0 0 1rem; }
}

/* ── SEATING PANEL ── */
.seating-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.5rem; }
.seating-kpi { padding: 1rem 1.15rem; background: #fff; border: 1px solid #ece4de; border-radius: 16px; text-align: center; transition: box-shadow .2s, transform .2s; }
.seating-kpi:hover { box-shadow: 0 6px 20px rgb(57 40 32 / 8%); transform: translateY(-2px); }
.seating-kpi strong { display: block; font: 700 1.8rem var(--serif); color: #332b26; }
.seating-kpi span { display: block; margin-top: .2rem; color: #9a8c84; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.seating-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: .5rem; }
.seating-card { background: #fff; border: 1px solid #ece4de; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 8px rgb(57 40 32 / 4%); transition: box-shadow .2s, transform .2s; }
.seating-card:hover { box-shadow: 0 8px 24px rgb(57 40 32 / 9%); transform: translateY(-2px); }
.seating-card__header { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; background: #faf5f1; border-bottom: 1px solid #ece4de; }
.seating-card__icon { font-size: 1.1rem; flex-shrink: 0; }
.seating-card__header strong { display: block; font-size: .82rem; font-weight: 750; color: #3a302c; }
.seating-card__header small { display: block; margin-top: .1rem; color: #9a8c84; font-size: .62rem; }
.seating-card__list { list-style: none; margin: 0; padding: .5rem .85rem .75rem; display: grid; gap: .3rem; }
.seating-card__guest { display: flex; align-items: center; gap: .55rem; padding: .35rem 0; border-bottom: 1px solid #f5f0ec; }
.seating-card__guest:last-child { border-bottom: none; }
.seating-card__avatar { width: 26px; height: 26px; display: grid; place-items: center; background: #eff6ff; color: #1e40af; border-radius: 50%; font-size: .62rem; font-weight: 750; flex-shrink: 0; }
.seating-card__guest > span:nth-child(2) { flex: 1; font-size: .75rem; font-weight: 600; color: #3a302c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seating-card__passes { font-size: .65rem; color: #9a8c84; font-weight: 700; flex-shrink: 0; }

/* ── REMINDERS PANEL ── */
.reminders-kpi-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-bottom: 1.5rem; }
.reminders-kpi { padding: 1rem 1.15rem; background: #fff; border: 1px solid #ece4de; border-radius: 16px; text-align: center; transition: box-shadow .2s, transform .2s; }
.reminders-kpi:hover { box-shadow: 0 6px 20px rgb(57 40 32 / 8%); transform: translateY(-2px); }
.reminders-kpi strong { display: block; font: 700 1.8rem var(--serif); color: #332b26; }
.reminders-kpi span { display: block; margin-top: .2rem; color: #9a8c84; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.reminders-kpi--green strong { color: #2d6e4a; }
.reminders-kpi--blue strong { color: #1e40af; }
.reminder-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid #f0ebe7; transition: background .15s; }
.reminder-row:last-child { border-bottom: none; }
.reminder-row:hover { background: #fdfaf8; }
.reminder-row__avatar { width: 40px; height: 40px; display: grid; place-items: center; background: #eff6ff; color: #1e40af; border-radius: 50%; font-size: .8rem; font-weight: 750; flex-shrink: 0; }
.reminder-row__info { min-width: 0; }
.reminder-row__info strong { display: block; font-size: .8rem; font-weight: 650; color: #3a302c; }
.reminder-row__info small { display: block; margin-top: .2rem; color: #9a8c84; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-row__actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.reminder-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 8px; font-size: .65rem; font-weight: 750; text-decoration: none; border: 1.5px solid; cursor: pointer; transition: all .18s; white-space: nowrap; }
.reminder-btn--wa { color: #1a7a3a; background: #e8f7ef; border-color: #b6dfc6; }
.reminder-btn--wa:hover { background: #1a7a3a; color: #fff; border-color: #1a7a3a; }
.reminder-btn--email { color: #1e40af; background: #eff6ff; border-color: #bdd6f5; }
.reminder-btn--email:hover { background: #1e40af; color: #fff; border-color: #1e40af; }
.reminder-btn--copy { color: #6a5a52; background: #f5f0ec; border-color: #e4d8d0; }
.reminder-btn--copy:hover { background: #3a302c; color: #fff; border-color: #3a302c; }

.custom-reminder-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.custom-reminder-kpis article { min-width: 0; padding: .9rem 1rem; background: linear-gradient(145deg, #fff, #faf7f4); border: 1px solid #e9e0da; border-radius: 15px; }
.custom-reminder-kpis span,
.custom-reminder-kpis small { display: block; }
.custom-reminder-kpis span { color: #84776f; font-size: .61rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.custom-reminder-kpis strong { display: block; margin: .3rem 0 .12rem; color: #332b26; font: 650 1.65rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.custom-reminder-kpis small { color: #9b8f88; font-size: .61rem; }
.custom-reminder-kpis .is-overdue { background: #fff7f4; border-color: #eccdc5; }
.custom-reminder-kpis .is-overdue strong { color: #a4463f; }
.custom-reminder-kpis .is-complete { background: #f4faf6; border-color: #cee1d5; }
.custom-reminder-kpis .is-complete strong { color: #347052; }

.reminder-composer { margin: 0 0 1rem; overflow: hidden; background: #fff; border: 1px solid #dfd3cb; border-radius: 17px; box-shadow: 0 6px 20px rgb(56 40 31 / 4%); }
.reminder-composer > summary { min-height: 68px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .9rem 1rem; cursor: pointer; list-style: none; }
.reminder-composer > summary::-webkit-details-marker,
.custom-reminder-card details > summary::-webkit-details-marker { display: none; }
.reminder-composer > summary > span { width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #3a302c; border-radius: 11px; font-size: 1rem; }
.reminder-composer > summary strong,
.reminder-composer > summary small { display: block; }
.reminder-composer > summary strong { color: #3a302c; font-size: .76rem; }
.reminder-composer > summary small { margin-top: .12rem; color: #968981; font-size: .62rem; }
.reminder-composer > summary b { display: flex; align-items: center; gap: .35rem; color: #94604a; font-size: .65rem; }
.reminder-composer > summary i,
.custom-reminder-card summary > b i { font-style: normal; transition: transform .2s; }
.reminder-composer[open] > summary i,
.custom-reminder-card details[open] summary > b i { transform: rotate(180deg); }
.reminder-composer > form { padding: 1rem; background: #fcf9f7; border-top: 1px solid #eee4dd; }
.reminder-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .8rem; }
.reminder-form-grid__wide { grid-column: 1 / -1; }
.reminder-form-grid .mb-3 { margin-bottom: .7rem !important; }
.reminder-form-grid .form-label { margin-bottom: .3rem; color: #50443e; font-size: .65rem; font-weight: 700; }
.reminder-form-grid .form-control,
.reminder-form-grid .form-select { min-height: 43px; border-color: #ded2ca; border-radius: 11px; font-size: .74rem; }
.reminder-form-grid textarea.form-control { min-height: 78px; resize: vertical; }
.reminder-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .2rem; }
.reminder-form-actions > span { color: #958981; font-size: .61rem; line-height: 1.4; }
.reminder-form-actions .btn { min-height: 42px; padding-inline: 1rem; font-size: .7rem; }

.custom-reminder-list { display: grid; gap: .6rem; margin-bottom: 1.8rem; }
.custom-reminder-card { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .7rem; position: relative; padding: .75rem; background: #fff; border: 1px solid #e9e0da; border-radius: 16px; box-shadow: 0 4px 15px rgb(58 42 34 / 3%); transition: border-color .2s, box-shadow .2s, transform .2s; }
.custom-reminder-card:hover { border-color: #d9c6ba; box-shadow: 0 8px 24px rgb(58 42 34 / 7%); transform: translateY(-1px); }
.custom-reminder-card.is-overdue { background: linear-gradient(100deg, #fff8f5, #fff); border-color: #e8c6bd; }
.custom-reminder-card.is-completed { opacity: .68; background: #fafaf8; }
.custom-reminder-card.is-completed .custom-reminder-card__copy > strong { text-decoration: line-through; }
.custom-reminder-card > form:first-child > button { width: 28px; height: 28px; display: grid; place-items: center; margin-top: .45rem; padding: 0; color: #fff; background: #fff; border: 1.5px solid #cdbeb5; border-radius: 50%; cursor: pointer; font-size: .7rem; }
.custom-reminder-card.is-completed > form:first-child > button { background: #367052; border-color: #367052; }
.custom-reminder-card > details { min-width: 0; }
.custom-reminder-card details > summary { min-width: 0; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: .75rem; cursor: pointer; list-style: none; }
.custom-reminder-card summary time { min-height: 54px; display: grid; place-items: center; align-content: center; color: #8b5b46; background: #f6ece6; border-radius: 12px; line-height: 1; text-align: center; }
.custom-reminder-card summary time strong { font: 650 1.12rem/1 var(--serif); }
.custom-reminder-card summary time span { margin-top: .15rem; font-size: .48rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.custom-reminder-card summary time small { margin-top: .22rem; color: #9c7b6c; font-size: .5rem; }
.custom-reminder-card__copy { min-width: 0; }
.custom-reminder-card__copy > div { display: flex; align-items: center; gap: .3rem; margin-bottom: .25rem; flex-wrap: wrap; }
.custom-reminder-card__copy > strong,
.custom-reminder-card__copy > small,
.custom-reminder-card__copy > p { display: block; }
.custom-reminder-card__copy > strong { overflow: hidden; color: #3f3530; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.custom-reminder-card__copy > small { margin-top: .16rem; color: #8d8079; font-size: .58rem; }
.custom-reminder-card__copy > p { margin: .22rem 0 0; color: #8d8079; font-size: .62rem; line-height: 1.4; }
.reminder-category,
.reminder-priority,
.reminder-overdue { padding: .2rem .4rem; border-radius: 99px; font-size: .49rem; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; }
.reminder-category { color: #76645b; background: #f2ece8; }
.reminder-priority { color: #6f655f; background: #f3f1ef; }
.reminder-priority--high { color: #95631e; background: #fff2d8; }
.reminder-priority--urgent,
.reminder-overdue { color: #9e423b; background: #fbe9e6; }
.custom-reminder-card summary > b { display: flex; align-items: center; gap: .25rem; color: #9a6b57; font-size: .58rem; white-space: nowrap; }
.custom-reminder-card__edit { margin-top: .75rem; padding: .85rem; background: #faf6f3; border: 1px solid #eee3dc; border-radius: 13px; }
.custom-reminder-card__delete { width: 28px; height: 28px; display: grid; place-items: center; margin-top: .45rem; padding: 0; color: #9d7160; background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 1rem; }
.custom-reminder-card__delete:hover { color: #a13f39; background: #fbe9e6; }
.custom-reminder-empty { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.8rem; padding: 1rem; color: #82756e; background: #faf7f4; border: 1px dashed #d9cbc2; border-radius: 15px; }
.custom-reminder-empty > span { width: 36px; height: 36px; display: grid; place-items: center; color: #96614b; background: #f3e6df; border-radius: 11px; }
.custom-reminder-empty strong,
.custom-reminder-empty small { display: block; }
.custom-reminder-empty strong { color: #4c403a; font-size: .73rem; }
.custom-reminder-empty small { margin-top: .12rem; color: #978a83; font-size: .61rem; }
.rsvp-reminder-heading { margin: 0 0 .85rem; padding-top: 1.4rem; border-top: 1px solid #eee5df; }
.rsvp-reminder-heading h3 { margin: .22rem 0 0; color: #332b26; font: 550 1.3rem/1.15 var(--serif); }
.rsvp-reminder-heading p { margin: .28rem 0 0; color: #8d8079; font-size: .7rem; }

/* ── ANALYTICS PANEL ── */
.analytics-intro { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; }
.analytics-intro .cc-panel-intro { margin-bottom: 0; }
.analytics-intro__actions { display: flex; flex: 0 0 auto; gap: .55rem; }
.analytics-intro__actions .btn { padding: .55rem .9rem; font-size: .72rem; }
.analytics-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.analytics-kpi { min-width: 0; min-height: 174px; display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: 1.1rem; overflow: hidden; background: #fff; border: 1px solid #e9e0da; border-radius: 18px; box-shadow: 0 5px 18px rgb(58 42 34 / 4%); }
.analytics-kpi::before { content: ""; width: 90px; height: 90px; position: absolute; top: -52px; right: -45px; border: 1px solid rgb(152 99 78 / 10%); border-radius: 50%; }
.analytics-kpi--primary { background: linear-gradient(145deg, #fff, #faf2ed); border-color: #dfc9bc; }
.analytics-kpi--success { background: linear-gradient(145deg, #fff, #f2f8f4); border-color: #cee1d5; }
.analytics-kpi--warning { background: linear-gradient(145deg, #fff, #fff8eb); border-color: #ead9b8; }
.analytics-kpi__label { color: #776a64; font-size: .65rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.analytics-kpi > strong { margin-top: .42rem; color: #332b26; font: 650 clamp(1.9rem, 3vw, 2.45rem)/1 var(--serif); font-variant-numeric: tabular-nums; }
.analytics-kpi > small { min-height: 2.4em; margin-top: .4rem; color: #867a73; font-size: .72rem; line-height: 1.45; }
.analytics-kpi__progress { width: 100%; height: 5px; margin-top: auto; overflow: hidden; background: #eadfd8; border-radius: 99px; }
.analytics-kpi__progress i { height: 100%; display: block; background: linear-gradient(90deg, var(--brand), #c18a71); border-radius: inherit; transition: width .5s var(--ease-out); }
.analytics-kpi__trend,
.analytics-kpi__complete,
.analytics-kpi > a { margin-top: auto; color: #85766e; font-size: .66rem; font-weight: 650; text-decoration: none; }
.analytics-kpi > a { color: #9b661c; }
.analytics-kpi > a:hover { text-decoration: underline; text-underline-offset: .2rem; }
.analytics-kpi__complete { color: #367052; }
.analytics-decision-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid; border-radius: 16px; }
.analytics-decision-banner.is-pending { color: #6d4b19; background: #fff9ed; border-color: #ead9b8; }
.analytics-decision-banner.is-complete { color: #285d43; background: #f1f8f3; border-color: #cce1d3; }
.analytics-decision-banner > span { width: 34px; height: 34px; display: grid; place-items: center; background: rgb(255 255 255 / 68%); border: 1px solid currentColor; border-radius: 50%; font-size: .9rem; }
.analytics-decision-banner strong { display: block; color: inherit; font-size: .8rem; }
.analytics-decision-banner p { margin: .12rem 0 0; color: color-mix(in srgb, currentColor 74%, transparent); font-size: .7rem; line-height: 1.45; }
.analytics-decision-banner a { color: inherit; font-size: .68rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.analytics-decision-banner a:hover { text-decoration: underline; text-underline-offset: .2rem; }
.analytics-main-grid,
.analytics-history-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.analytics-main-grid { grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); }
.analytics-history-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); }
.analytics-card { min-width: 0; padding: 1.15rem; background: #fff; border: 1px solid #e9e0da; border-radius: 19px; box-shadow: 0 5px 18px rgb(58 42 34 / 4%); }
.analytics-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.analytics-card__heading h3 { margin: .18rem 0 0; color: #332b26; font: 550 1.18rem/1.15 var(--serif); }
.analytics-card__heading > small { color: #95877f; font-size: .66rem; font-weight: 650; }
.analytics-donut { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 1.25rem; }
.analytics-donut svg { width: 176px; max-width: 100%; height: auto; flex-shrink: 0; filter: drop-shadow(0 8px 12px rgb(58 42 34 / 6%)); }
.analytics-donut__legend { min-width: 0; display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.analytics-donut__legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .55rem 0; color: #625751; border-bottom: 1px solid #f1ebe7; font-size: .74rem; }
.analytics-donut__legend li:last-child { border-bottom: 0; }
.analytics-donut__legend i,
.analytics-chart-legend i { width: 9px; height: 9px; display: inline-block; border-radius: 50%; }
.analytics-donut__legend i.is-confirmed,
.analytics-chart-legend i.is-confirmed { background: #367052; }
.analytics-donut__legend i.is-pending { background: #ddd3cc; }
.analytics-donut__legend i.is-declined,
.analytics-chart-legend i.is-declined { background: #b75951; }
.analytics-donut__legend span { min-width: 0; }
.analytics-donut__legend small { display: block; margin-top: .1rem; color: #a0948d; font-size: .61rem; }
.analytics-donut__legend b { color: #332b26; font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.analytics-insights { display: grid; gap: .55rem; }
.analytics-insight { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem; padding: .72rem; background: #faf7f4; border: 1px solid #eee6e1; border-radius: 13px; }
.analytics-insight__icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--brand); background: #f2e5de; border-radius: 10px; font-size: .8rem; }
.analytics-insight strong,
.analytics-insight small { display: block; }
.analytics-insight strong { color: #453a34; font-size: .74rem; }
.analytics-insight small { margin-top: .13rem; color: #8f827b; font-size: .66rem; line-height: 1.4; }
.analytics-chart-legend { display: flex; align-items: center; gap: .7rem; color: #8f827b; font-size: .6rem; }
.analytics-chart-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.analytics-timeline { display: grid; gap: .55rem; }
.analytics-timeline__row { display: grid; grid-template-columns: 42px minmax(120px, 1fr) 86px; align-items: center; gap: .75rem; }
.analytics-timeline__date { display: grid; place-items: center; padding: .35rem; color: #786a63; background: #faf6f3; border: 1px solid #eee5df; border-radius: 9px; font-variant-numeric: tabular-nums; text-align: center; }
.analytics-timeline__date strong { font-size: .72rem; line-height: 1; }
.analytics-timeline__date span { margin-top: .12rem; font-size: .5rem; letter-spacing: .06em; text-transform: uppercase; }
.analytics-timeline__track { min-width: 0; display: flex; align-items: center; gap: .25rem; position: relative; padding-block: .2rem; }
.analytics-timeline__track::before { content: ""; height: 1px; position: absolute; inset: 50% 0 auto; background: #eee7e2; }
.analytics-timeline__bar { width: max(26px, var(--bar-width)); height: 26px; display: grid; place-items: center; position: relative; border-radius: 7px; color: #fff; font-size: .62rem; font-weight: 750; transition: width .35s var(--ease-out); }
.analytics-timeline__bar--confirmed { background: linear-gradient(90deg, #367052, #4c8b69); }
.analytics-timeline__bar--declined { background: linear-gradient(90deg, #a94b45, #c66a61); }
.analytics-timeline__total { color: #9c8f88; font-size: .6rem; text-align: right; }
.analytics-activity-list { display: grid; gap: .15rem; }
.analytics-activity-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #f1ebe7; }
.analytics-activity-item:last-child { border-bottom: 0; }
.analytics-activity-item__avatar { width: 30px; height: 30px; display: grid; place-items: center; color: #7c5949; background: #f3e6df; border-radius: 50%; font-size: .66rem; font-weight: 750; }
.analytics-activity-item strong,
.analytics-activity-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analytics-activity-item strong { color: #453a34; font-size: .7rem; }
.analytics-activity-item small { margin-top: .1rem; color: #9a8d86; font-size: .58rem; }
.analytics-status { padding: .25rem .45rem; border-radius: 99px; font-size: .54rem; font-weight: 750; white-space: nowrap; }
.analytics-status--confirmed { color: #2d6849; background: #eaf5ee; }
.analytics-status--declined { color: #97433e; background: #faecea; }
.analytics-status--pending { color: #8a641f; background: #fff5dd; }
.analytics-inline-empty { min-height: 150px; display: grid; place-items: center; align-content: center; gap: .35rem; color: #a1938b; text-align: center; }
.analytics-inline-empty span { font-size: 1.4rem; }
.analytics-inline-empty p { margin: 0; font-size: .7rem; }
.analytics-onboarding-empty { min-height: 230px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.4rem; background: linear-gradient(145deg, #fff, #faf3ef); border: 1px dashed #d8c3b7; border-radius: 20px; }
.analytics-onboarding-empty > span { width: 52px; height: 52px; display: grid; place-items: center; color: var(--brand); background: #f2e4dc; border-radius: 15px; font-size: 1.35rem; }
.analytics-onboarding-empty strong { color: #382f2a; font: 550 1.2rem var(--serif); }
.analytics-onboarding-empty p { max-width: 560px; margin: .3rem 0 0; color: #8e817a; font-size: .74rem; line-height: 1.5; }

/* ── RESPONSIVE FOR NEW PANELS ── */
@media (max-width: 900px) {
  .budget-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .budget-table__head, .budget-table__row { grid-template-columns: 1fr 80px 80px; }
  .budget-table__head > span:nth-child(4), .budget-table__row > span:nth-child(4) { display: none; }
  .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-main-grid,
  .analytics-history-grid { grid-template-columns: 1fr; }
  .seating-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .reminders-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .budget-kpi-strip { grid-template-columns: 1fr; }
  .budget-table__head { display: none; }
  .budget-table__row { grid-template-columns: 1fr auto; gap: .35rem; }
  .budget-table__amount:not(:first-of-type) { display: none; }
  .seating-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .seating-grid { grid-template-columns: 1fr; }
  .reminders-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .reminder-row { grid-template-columns: auto 1fr; }
  .reminder-row__actions { grid-column: 1 / -1; padding-left: 52px; }
  .custom-reminder-kpis { gap: .4rem; }
  .custom-reminder-kpis article { padding: .7rem; }
  .custom-reminder-kpis strong { font-size: 1.35rem; }
  .custom-reminder-kpis small { display: none; }
  .reminder-composer > summary { grid-template-columns: auto minmax(0, 1fr); }
  .reminder-composer > summary b { display: none; }
  .reminder-form-grid { grid-template-columns: 1fr; }
  .reminder-form-grid__wide { grid-column: auto; }
  .reminder-form-actions { align-items: stretch; flex-direction: column; }
  .reminder-form-actions .btn { width: 100%; }
  .custom-reminder-card { grid-template-columns: auto minmax(0, 1fr); gap: .45rem; padding: .65rem; }
  .custom-reminder-card details > summary { grid-template-columns: 44px minmax(0, 1fr); gap: .55rem; }
  .custom-reminder-card summary > b { display: none; }
  .custom-reminder-card > form:last-child { position: absolute; top: .35rem; right: .35rem; }
  .custom-reminder-card__copy { padding-right: 1.5rem; }
  .custom-reminder-card__copy > strong { white-space: normal; }
  .custom-reminder-card__edit { grid-column: 1 / -1; margin-left: -2.3rem; }
  .schedule-item { grid-template-columns: 60px 16px 1fr; gap: 0 .65rem; }
  .analytics-intro { align-items: stretch; flex-direction: column; }
  .analytics-intro__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .analytics-intro__actions .btn { display: grid; place-items: center; }
  .analytics-kpi-grid { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .analytics-kpi { min-height: 158px; padding: .9rem; }
  .analytics-kpi > strong { font-size: 1.85rem; }
  .analytics-kpi > small { font-size: .67rem; }
  .analytics-decision-banner { grid-template-columns: auto 1fr; }
  .analytics-decision-banner > a { grid-column: 2; }
  .analytics-card { padding: .9rem; }
  .analytics-card__heading { flex-direction: column; gap: .45rem; }
  .analytics-donut { grid-template-columns: 1fr; justify-items: center; }
  .analytics-donut__legend { width: 100%; }
  .analytics-timeline__row { grid-template-columns: 38px minmax(100px, 1fr); gap: .5rem; }
  .analytics-timeline__total { grid-column: 2; margin-top: -.35rem; text-align: left; }
  .analytics-onboarding-empty { grid-template-columns: 1fr; text-align: center; }
  .analytics-onboarding-empty > span { justify-self: center; }
  .analytics-onboarding-empty .btn { width: 100%; }
  .control-tab-btn { font-size: .65rem; padding: .45rem .7rem; }
}

@media (max-width: 390px) {
  .analytics-kpi-grid { grid-template-columns: 1fr; }
  .analytics-kpi { min-height: 145px; }
}

.dress-code { max-width: 420px; display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 2rem auto 0; padding-top: 1.5rem; border-top: 1px solid #eee5df; }
.dress-code > span { color: var(--invite-accent); }
.dress-code small,
.dress-code strong { display: block; }
.dress-code small { color: var(--muted); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; }
.dress-code strong { font-family: var(--invite-heading); font-weight: 400; }
.itinerary-section { background: var(--invite-dark); color: var(--invite-dark-ink); }
.itinerary-section .section-kicker { color: var(--invite-muted); }
.timeline { max-width: 560px; margin: 2.75rem auto 0; padding: 0; list-style: none; text-align: left; }
.timeline li { display: grid; grid-template-columns: 58px 16px 1fr; gap: .75rem; min-height: 95px; }
.timeline time { padding-top: .05rem; color: var(--invite-muted); font: 400 1rem var(--invite-heading); }
.timeline-dot { width: 10px; height: 10px; position: relative; margin-top: .3rem; border: 2px solid var(--invite-muted); border-radius: 50%; }
.timeline-dot::after { content: ""; width: 1px; height: 80px; position: absolute; top: 10px; left: 3px; background: color-mix(in srgb, var(--invite-muted) 45%, transparent); }
.timeline li:last-child .timeline-dot::after { display: none; }
.timeline strong { font: 400 1.3rem var(--invite-heading); }
.timeline p { margin-top: .3rem; color: color-mix(in srgb, var(--invite-dark-ink) 68%, transparent); font-size: .85rem; }
.itinerary-empty-state { max-width: 360px; display: grid; place-items: center; gap: .35rem; margin: 2rem auto 0; padding: 1.2rem; color: color-mix(in srgb, var(--invite-dark-ink) 72%, transparent); border: 1px dashed color-mix(in srgb, var(--invite-muted) 52%, transparent); border-radius: 14px; }
.itinerary-empty-state > span { color: var(--invite-muted); font-size: 1.4rem; }
.itinerary-empty-state strong { color: var(--invite-dark-ink); font: 400 1rem var(--invite-heading); }
.itinerary-empty-state small { font-size: .68rem; }
.gifts-section { background: var(--invite-bg); }
.gift-grid { max-width: 650px; display: grid; gap: .75rem; margin: 2rem auto 0; }
.gift-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; color: inherit; background: color-mix(in srgb, var(--invite-surface) 78%, transparent); border: 1px solid color-mix(in srgb, var(--invite-accent) 14%, transparent); border-radius: 14px; text-align: left; text-decoration: none; }
.gift-card > span { color: var(--invite-accent); font-size: 1.5rem; }
.gift-card small { color: var(--invite-accent); }
.gift-card--placeholder { border-style: dashed; opacity: .78; }
.rsvp-callout { color: var(--invite-surface); background: var(--invite-accent); }
.rsvp-callout .section-kicker { color: color-mix(in srgb, var(--invite-surface) 78%, transparent); }
.rsvp-callout > p { color: color-mix(in srgb, var(--invite-surface) 76%, transparent); }
.rsvp-choice-preview,
.rsvp-choice-actions { max-width: 430px; display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin: 1.6rem auto .5rem; }
.rsvp-choice-preview > span,
.rsvp-choice-actions > a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem; color: var(--invite-accent); background: var(--invite-surface); border: 1px solid color-mix(in srgb, var(--invite-surface) 62%, transparent); border-radius: 12px; font-size: .7rem; font-weight: 750; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.rsvp-choice-actions > a:hover { color: var(--invite-accent); transform: translateY(-2px); box-shadow: 0 10px 24px rgb(35 22 18 / 14%); }
.rsvp-choice-preview b,
.rsvp-choice-actions b { font-size: .95rem; }
.rsvp-personal-note { display: block; margin-top: .85rem; color: color-mix(in srgb, var(--invite-surface) 78%, transparent); font-size: .7rem; }
.rsvp-note { display: inline-block; margin-top: 1rem; font: italic 1rem var(--serif); }
.invitation-footer { padding: 3.5rem 1rem; color: color-mix(in srgb, var(--invite-ink) 68%, transparent); background: color-mix(in srgb, var(--invite-bg) 86%, var(--invite-accent)); text-align: center; }
.invitation-footer span,
.invitation-footer strong { display: block; }
.invitation-footer strong { margin-top: .4rem; color: var(--invite-accent); font: italic 400 1.7rem var(--invite-heading); }
.music-btn-fixed { min-height: 48px; display: inline-flex; align-items: center; gap: .6rem; position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 30; padding: .55rem .9rem .55rem .55rem; color: var(--invite-ink); background: color-mix(in srgb, var(--invite-surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--invite-accent) 28%, transparent); border-radius: 999px; box-shadow: 0 12px 32px rgb(40 26 20 / 18%); font-size: .68rem; font-weight: 750; backdrop-filter: blur(14px); }
.music-btn-fixed__icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--invite-surface); background: var(--invite-accent); border-radius: 50%; font-size: .9rem; }
.music-btn-fixed[aria-pressed="true"] .music-btn-fixed__icon { animation: music-pulse 1.8s ease-in-out infinite; }
.invitation--preview .music-btn-fixed--preview { width: max-content; position: sticky; right: auto; bottom: 1rem; float: right; margin: -4rem 1rem 1rem 0; pointer-events: none; }
@keyframes music-pulse { 50% { transform: scale(1.1) rotate(8deg); } }

/* RSVP */
.rsvp-page { min-height: 100vh; background: radial-gradient(circle at top, #fff 0, #f7efe9 50%, #eee2d9 100%); }
.rsvp-shell { min-height: 100svh; display: grid; place-items: center; padding: 1rem; }
.rsvp-card { width: min(100%, 560px); padding: clamp(1.4rem, 6vw, 2.75rem); background: rgb(255 255 255 / 94%); border: 1px solid rgb(152 99 78 / 13%); border-radius: 26px; box-shadow: 0 28px 80px rgb(75 45 34 / 14%); }
.rsvp-card__ornament { color: var(--brand); text-align: center; }
.rsvp-card > .section-kicker { display: block; margin-top: .8rem; text-align: center; }
.rsvp-card h1 { margin: .55rem 0; font: 400 clamp(2rem, 9vw, 3.15rem)/1.05 var(--serif); text-align: center; }
.rsvp-intro { max-width: 430px; margin: .8rem auto 1.3rem; color: var(--muted); line-height: 1.6; text-align: center; }
.rsvp-event-summary { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; padding: .9rem 1rem; background: var(--warm); border-radius: 14px; }
.rsvp-event-summary > span { color: var(--brand); font-size: 1.3rem; }
.rsvp-event-summary strong,
.rsvp-event-summary small { display: block; }
.rsvp-event-summary strong { font: 400 1rem var(--serif); }
.rsvp-event-summary small { margin-top: .15rem; color: var(--muted); }
.rsvp-choice-grid .form-label { display: block; margin-bottom: .65rem; font: 400 1.15rem var(--serif); }
.rsvp-choice-grid .form-check { margin-bottom: .6rem; padding: 0; }
.rsvp-choice-grid .form-check-input { position: absolute; opacity: 0; }
.rsvp-choice-grid .form-check-label { width: 100%; display: flex; align-items: center; min-height: 54px; padding: .75rem 1rem .75rem 2.8rem; position: relative; border: 1px solid #ded3cb; border-radius: 14px; cursor: pointer; transition: .2s; }
.rsvp-choice-grid .form-check-label::before { content: ""; width: 18px; height: 18px; position: absolute; left: 1rem; border: 1px solid #a9998f; border-radius: 50%; }
.rsvp-choice-grid .form-check-input:checked + .form-check-label { color: var(--brand-dark); background: #faf4f0; border-color: var(--brand); }
.rsvp-choice-grid .form-check-input:checked + .form-check-label::before { border: 5px solid var(--brand); }
.attendance-details { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.attendance-details.is-hidden { display: none; }
.passes-caption { color: var(--muted); font-size: .84rem; }
.rsvp-card .btn-brand { min-height: 52px; margin-top: .4rem; }
.privacy-note { margin: 1rem 0 0; color: #968a83; font-size: .7rem; text-align: center; }
.submit-status { padding-top: .8rem; color: var(--muted); font-size: .8rem; text-align: center; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: block; }
.form-alert { margin-bottom: 1rem; padding: .75rem; color: #873e38; background: #fff0ef; border-radius: 12px; }
.success-mark { width: 76px; height: 76px; display: grid; place-items: center; margin: 0 auto 1rem; color: #fff; background: #668c70; border: 9px solid #e5eee7; border-radius: 50%; font-size: 1.8rem; }
.rsvp-card--done > p { color: var(--muted); line-height: 1.65; text-align: center; }
.rsvp-card--done .rsvp-event-summary { margin-top: 1.5rem; }

.reveal-on-scroll { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; }

@media (max-width: 991.98px) {
  .create-event-grid { grid-template-columns: 1fr; }
  .creation-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; position: static; }
  .creation-guide__card { min-height: 380px; }
  .creation-guide__tips { margin-top: 0; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { color: var(--ink); }
  .auth-brand:hover { color: var(--brand); }
  .auth-story { display: none; }
  .auth-form-column { padding-top: 5.5rem; }
  .manage-layout { grid-template-columns: 1fr; }
  .manage-nav { display: flex; overflow-x: auto; }
  .manage-nav a { min-width: max-content; }
  .header-actions { align-items: flex-start; padding: .7rem 0 1rem; }
  .site-header .navbar-nav { padding-top: .7rem; border-top: 1px solid var(--line); }
  .home-hero { grid-template-columns: 1fr; padding-top: 3.5rem; text-align: center; }
  .home-hero__copy > p { margin-inline: auto; }
  .hero-actions,
  .hero-trust { justify-content: center; }
  .home-hero__visual { min-height: 580px; }
  .floating-note--top { left: 8%; }
  .floating-note--bottom { right: 8%; }
  .feature-showcase { grid-template-columns: 1fr; }
  .feature-showcase__copy { max-width: 680px; margin-inline: auto; text-align: center; }
  .check-list { display: inline-grid; text-align: left; }
  .everything-grid { grid-template-columns: repeat(2, 1fr); }
  .event-card-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-grid { grid-template-columns: 1fr; }
  .editor-page .editor-step-nav { top: 58px; }
  .editor-card--form,
  .editor-card--form form { width: 100%; min-width: 0; }
  .editor-view-switch { width: min(100%, 440px); display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; position: sticky; top: .5rem; z-index: 30; margin: 0 auto 1rem; padding: .3rem; background: rgb(255 255 255 / 92%); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgb(65 43 32 / 10%); backdrop-filter: blur(14px); }
  .editor-view-switch button { min-height: 42px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; font-size: .72rem; font-weight: 750; }
  .editor-view-switch button.is-active { color: #fff; background: var(--brand); box-shadow: 0 5px 14px rgb(117 71 55 / 18%); }
  .editor-grid[data-mobile-view="form"] .preview-column { display: none; }
  .editor-grid[data-mobile-view="preview"] .editor-card--form { display: none; }
  .preview-column { width: min(100%, 390px); max-width: 390px; height: auto; display: block; position: static; margin: 0 auto; padding-block: 0; }
}

@media (max-width: 575.98px) {
  .create-event-shell { padding: 1.7rem .7rem 4rem; }
  .create-event-heading { align-items: stretch; flex-direction: column; }
  .create-event-heading h1 { font-size: 2.7rem; }
  .creation-time { min-width: 0; }
  .create-event-form-card { padding-inline: 1rem; }
  .creation-guide { grid-template-columns: 1fr; }
  .creation-guide__card { min-height: 390px; }
  .editor-progress { margin-inline: -.2rem; }
  .editor-step-nav { display: flex; padding: .35rem; scroll-snap-type: x mandatory; }
  .editor-step-nav [data-editor-step] { min-width: 172px; flex: 0 0 172px; scroll-snap-align: start; }
  .editor-step-nav .editor-progress__save { min-width: 92px; flex: 0 0 auto; justify-content: center; margin-left: 0; }
  .editor-progress__label { display: none; }
  .editor-progress a { font-size: .8rem; }
  .editor-progress__save { font-size: .76rem; }
  .editor-step-heading { padding-inline: .15rem; }
  .editor-step-panel { scroll-margin-top: 132px; }
  .editor-step-heading h2 { font-size: 1.85rem; }
  .editor-step-heading p { font-size: .78rem; }
  .editor-step-actions { align-items: stretch; flex-direction: column; }
  .editor-step-actions button { justify-content: center; }
  .section-builder-group { padding: .55rem; border-radius: 15px; }
  .section-builder-group__heading { grid-template-columns: 1fr auto; gap: .4rem; padding: .25rem .2rem .65rem; }
  .section-builder-group__heading > span { grid-column: 1 / -1; justify-self: start; }
  .section-builder-group__heading h3 { font-size: 1.15rem; }
  .section-builder-group__heading p { font-size: .72rem; }
  .message-assistant { padding: .75rem; }
  .section-module summary { grid-template-columns: auto 1fr; }
  .section-module__status { display: none; }
  .section-module__body { padding-left: 1rem; }
  .section-toggle-row { grid-template-columns: 1fr; }
  .section-module summary strong { font-size: 1rem; line-height: 1.3; }
  .section-module summary small,
  .section-module__hint { font-size: .78rem; line-height: 1.5; }
  .music-upload-panel { padding: .8rem; }
  .music-upload-panel__intro strong { font-size: .9rem; }
  .music-upload-panel__intro small,
  .music-upload-panel__status { font-size: .75rem; line-height: 1.4; }
  .music-upload-panel input[type="file"] { font-size: .76rem; }
  .image-upload__dropzone { min-height: 118px; align-items: center; flex-direction: column; text-align: center; }
  .image-upload__dropzone strong { font-size: .9rem; }
  .image-upload__dropzone small { font-size: .75rem; }
  .uploaded-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .countdown-picker__grid { display: flex; margin-inline: -.15rem; padding: .2rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .countdown-option { min-width: 235px; scroll-snap-align: start; }
  .experience-toggle { margin-top: 0; }
  .theme-card-grid { display: flex; margin-inline: -.25rem; padding: .25rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .theme-option { min-width: 215px; scroll-snap-align: start; }
  .birthday-audience-field { padding: .85rem; }
  .birthday-audience-field .form-text { font-size: .78rem; line-height: 1.45; }
  .auth-brand { top: 1.25rem; left: 1.25rem; }
  .auth-form-column { justify-content: flex-start; padding: 4.8rem .7rem 1.5rem; }
  .auth-card { padding: 1.35rem 1.1rem; border-radius: 18px; box-shadow: 0 15px 45px rgb(77 48 35 / 9%); }
  .auth-card__heading h1,
  .auth-card > h1 { font-size: 2.1rem; }
  .manage-layout { gap: .8rem; }
  .manage-nav { margin-inline: -.2rem; }
  .manage-card { padding: 1.1rem; }
  .manage-secondary-link { display: block; margin: .8rem 0 0; }
  .email-address-row { grid-template-columns: auto auto 1fr; }
  .email-badge { grid-column: 3; justify-self: start; }
  .site-header .navbar { min-height: 66px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
  .home-hero { min-height: auto; padding: 3.2rem 1rem; }
  .home-hero__copy h1 { font-size: clamp(2.8rem, 14vw, 4.1rem); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
  .home-hero__visual { min-height: 520px; margin-top: .5rem; }
  .showcase-phone { width: 270px; }
  .showcase-phone__screen { min-height: 490px; }
  .showcase-phone h2 { font-size: 2.8rem; }
  .floating-note { min-width: 180px; }
  .floating-note--top { top: 8%; left: 0; }
  .floating-note--bottom { right: 0; bottom: 5%; }
  .occasion-strip { justify-content: flex-start; }
  .home-section { padding-inline: 1rem; }
  .steps-grid,
  .event-card-grid { grid-template-columns: 1fr; }
  .steps-grid article { min-height: auto; }
  .feature-showcase { padding-inline: 1rem; }
  .feature-dashboard-card { padding: .7rem; }
  .fake-stats span { padding: .55rem; }
  .everything-grid { grid-template-columns: 1fr; }
  .everything-grid article { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; }
  .everything-grid article > span { grid-row: 1 / 3; }
  .everything-grid article h3 { margin-top: 0; }
  .dashboard-shell { padding: 2rem .8rem 4rem; }
  .dashboard-welcome { align-items: stretch; flex-direction: column; }
  .dashboard-welcome .btn { width: 100%; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-stats article { padding: .9rem 1rem; }
  .guest-manager-shell { padding: 2rem .75rem 4rem; }
  .guest-manager-header { align-items: stretch; flex-direction: column; gap: 1rem; }
  .guest-manager-header h1 { font-size: 2.4rem; }
  .guest-total-card { min-width: 0; text-align: left; }
  .guest-entry-grid { grid-template-columns: 1fr; }
  .guest-entry-card { padding: 1.1rem; }
  .guest-list-section { padding: .8rem; }
  .guest-row { grid-template-columns: auto 1fr; }
  .guest-rsvp-status { grid-column: 2; justify-self: start; }
  .guest-link-actions { grid-column: 1 / -1; justify-content: stretch; padding-top: .25rem; }
  .guest-link-actions .btn { flex: 1; }
  .guest-link-pending { flex: 1; }
  .account-shell { padding: 2rem .8rem 4rem; }
  .account-grid { grid-template-columns: 1fr; }
  .creator-shell,
  .editor-shell { padding: 1.5rem .75rem 3rem; }
  .editor-card { border-radius: 18px; }
  .editor-toolbar { display: block; padding: 1.05rem; border-radius: 18px; }
  .editor-toolbar h1 { font-size: 1.6rem; }
  .editor-title-line { display: block; }
  .editor-sync-state { min-width: 0; margin-top: .85rem; }
  .editor-sync-state strong { font-size: .78rem; }
  .editor-sync-state small { font-size: .75rem; line-height: 1.4; }
  .editor-toolbar .toolbar-actions { margin-top: .8rem; }
  .editor-toolbar .toolbar-actions .btn { width: 100%; }
  .editor-page .form-section { padding: 1.15rem; border-radius: 17px; }
  .editor-page .form-section legend::before { width: 30px; height: 30px; }
  .editor-page .editor-actions { align-items: stretch; flex-direction: column; }
  .editor-page .editor-actions .btn { width: 100%; }
  .editor-page .save-hint { text-align: center; }
  .publish-panel { align-items: stretch; flex-direction: column; }
  .publish-panel .btn { width: 100%; }
  .phone-frame { border-radius: 35px; }
  .phone-screen { height: 660px; border-radius: 25px; }
  .hero-date { gap: .55rem; }
  .hero-date strong { padding-inline: .65rem; }
  .countdown--rings { gap: .4rem; }
  .countdown--rings div { width: 58px; }
  .countdown--spotlight { gap: .55rem; }
  .editor-view-switch button { font-size: .82rem; }
  .invitation .hero-kicker,
  .invitation .section-kicker { font-size: .75rem; letter-spacing: .16em; }
  .invitation .invite-hero h1 { font-size: clamp(2.75rem, 12vw, 3rem); line-height: .95; }
  .invitation .hero-message { max-width: 340px; font-size: 1rem; line-height: 1.7; }
  .invitation .invite-section h2 { font-size: clamp(2rem, 9vw, 2.35rem); line-height: 1.1; }
  .invitation .hero-date strong { font-size: 2.35rem; }
  .invitation .hero-date span { font-size: .75rem; line-height: 1.4; }
  .invitation .countdown strong { font-size: 1.65rem; }
  .invitation .countdown span { font-size: .75rem; line-height: 1.4; }
  .invitation .calendar-button { min-height: 44px; font-size: .82rem; }
  .invitation .dress-code small { font-size: .75rem; }
  .invitation .timeline p { font-size: .95rem; line-height: 1.6; }
  .invitation .rsvp-note { font-size: .95rem; line-height: 1.55; }
  .rsvp-choice-preview,
  .rsvp-choice-actions { grid-template-columns: 1fr; }
  .invitation-footer strong { font-size: 1.55rem; }
  .invitation-gallery { grid-auto-rows: 42px; }
  .invitation-gallery__item { border-radius: 3px 12px 3px 12px; }
  .music-btn-fixed { max-width: calc(100vw - 2rem); }
  .gift-card { grid-template-columns: auto 1fr; }
  .gift-card small { grid-column: 2; }
  .rsvp-shell { align-items: start; padding: .7rem; }
  .rsvp-card { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal-on-scroll { opacity: 1; transform: none; }
}

@media (max-width: 575.98px) {
  .hero-image-style-picker__grid { grid-template-columns: 1fr; }
  .hero-image-style-option { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: .75rem; }
  .hero-image-style-option > strong { margin: 0; font-size: .72rem; }
  .hero-image-style-option__visual { width: 112px; }
  .mobile-hero-style-picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
  .mobile-hero-style-option { padding: .4rem .25rem; text-align: center; }
  .mobile-hero-style-option > strong { font-size: .59rem; }
  .opening-style-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opening-style-option--none { grid-column: 1 / -1; }
  .opening-style-option > strong { min-height: auto; font-size: .63rem; }
  .rich-text-toolbar button { flex: 1 0 auto; }
}

@media (max-width: 1023.98px) {
  .invitation--fixed-canvas:is(.invitation--mobile-overlay, .invitation--mobile-fullscreen) .invite-hero h1 {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .invitation--fixed-canvas.invitation--mobile-overlay .invite-hero__content { min-height: 58svh; }
  .invitation--fixed-canvas.invitation--mobile-fullscreen .invite-hero__content { min-height: 64svh; }
}

/* The live editor preview is a mini render, not a scroll experience. Its
   sections stay visible because they scroll inside their own phone frame. */
.invitation--preview .reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Embed mode: read-only invitation shown inside the landing phone mockups.
   Everything is visible at once (no scroll-reveal) and non-interactive. */
.invitation--embed .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
body.invitation-embed { background: var(--invite-bg, #f8f2eb); scrollbar-width: none; }
body.invitation-embed::-webkit-scrollbar { width: 0; height: 0; display: none; }
body.invitation-embed .music-btn-fixed,
body.invitation-embed .music-btn-fixed--preview { display: none !important; }

/* Public invitation: strip the marketing chrome — a guest sees only the invite. */
body.invitation-page .site-header,
body.invitation-page .site-footer { display: none; }
body.invitation-page .site-content { padding: 0; }

/* Desktop: the invitation is mobile-first (full-bleed bands). On wider screens
   frame it as a centered "paper" card floating on a neutral backdrop so the
   bands read as intentional instead of stranded in empty space. */
@media (min-width: 768px) {
  body.invitation-page { background: #e9e7e2; }
  body.invitation-page .site-content { padding-block: clamp(2rem, 5vw, 4.5rem); }
  .invitation {
    max-width: 720px;
    margin-inline: auto;
    border-radius: 22px;
    box-shadow: 0 34px 90px rgb(28 22 18 / 26%);
  }
  .invite-hero { min-height: 78vh; }
  .invite-hero h1 { font-size: clamp(3.8rem, 7vw, 5.6rem); }
  .invite-hero::before { left: -60px; }
  .invite-hero::after { right: -60px; }
  .invite-section { padding-inline: clamp(2rem, 6vw, 4rem); }
}

@media (min-width: 1024px) {
  .invitation { max-width: 840px; }
  body.invitation-page:has(.invitation--fixed-canvas) { height: 100svh; overflow: hidden; background: var(--invite-dark, #20272d); }
  body.invitation-page:has(.invitation--fixed-canvas) .site-content { padding: 0; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas { width: 100%; max-width: none; height: 100svh; display: flex; margin: 0; overflow: hidden; border-radius: 0; box-shadow: none; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invitation-side-media { width: 48%; height: 100svh; flex: 0 0 48%; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invitation-side-media figcaption { display: none; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invitation-content-stream { width: 52%; height: 100svh; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--invite-muted) transparent; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invitation-content-stream::-webkit-scrollbar { width: 7px; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invitation-content-stream::-webkit-scrollbar-thumb { background: var(--invite-muted); border-radius: 8px; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invite-hero--split { min-height: 100svh; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invite-hero--split .invite-hero__content { min-height: 100svh; justify-content: center; padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); }
  .invitation:not(.invitation--preview).invitation--fixed-canvas .invite-hero--split h1 { font-size: clamp(4rem, 7vw, 7rem); }
}

@media (min-width: 1200px) {
  .invitation { max-width: 920px; }
  .invitation:not(.invitation--preview).invitation--fixed-canvas { max-width: none; }
}

/* Product design system — shared polish for every application template */
:root {
  --surface: #fffdfb;
  --surface-soft: #f7f1ec;
  --surface-tint: #f1e5dd;
  --success: #557762;
  --warning: #a27638;
  --danger: #a54d46;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 14px 42px rgb(63 42 32 / 8%);
  --shadow-lifted: 0 24px 70px rgb(63 42 32 / 14%);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

::selection { color: #fff; background: var(--brand); }

html { scroll-behavior: smooth; }

body:not(.invitation-page):not(.rsvp-page):not(.auth-page) {
  background:
    radial-gradient(circle at 8% 4%, rgb(210 179 161 / 16%), transparent 24rem),
    radial-gradient(circle at 92% 14%, rgb(137 157 141 / 10%), transparent 26rem),
    #fbf8f5;
}

.site-content { min-height: 62vh; }

a,
button,
input,
select,
textarea,
summary { -webkit-tap-highlight-color: transparent; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgb(152 99 78 / 24%);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgb(252 250 248 / 84%);
  box-shadow: 0 1px 0 rgb(65 42 31 / 7%);
}

.site-header .container-xl { max-width: 1240px; }
.site-header .navbar { min-height: 72px; }
.site-header .nav-link { position: relative; }
.site-header .navbar-nav .nav-link::after {
  content: "";
  height: 2px;
  position: absolute;
  right: .5rem;
  bottom: .25rem;
  left: .5rem;
  background: var(--brand);
  border-radius: 99px;
  transform: scaleX(0);
  transition: transform .25s var(--ease-out);
}
.site-header .navbar-nav .nav-link:hover::after,
.site-header .navbar-nav .nav-link:focus-visible::after { transform: scaleX(1); }
.navbar-toggler { padding: .48rem .58rem; border-color: var(--line); border-radius: 12px; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgb(152 99 78 / 13%); }

.btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  font-weight: 700;
  transition: color .2s, background .2s, border-color .2s, box-shadow .25s, transform .25s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-dark { background: #342e2b; border-color: #342e2b; box-shadow: 0 9px 24px rgb(41 33 29 / 13%); }
.btn-outline-secondary { color: #625852; border-color: #d8cdc5; background: rgb(255 255 255 / 62%); }
.btn-outline-secondary:hover { color: var(--brand-dark); background: #fff; border-color: #cdb9ad; box-shadow: 0 9px 22px rgb(63 42 32 / 8%); }

.form-control,
.form-select {
  min-height: 50px;
  padding: .72rem .9rem;
  color: var(--ink);
  background-color: #fffefd;
  border: 1px solid #dcd1c9;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 60%);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.form-control:hover,
.form-select:hover { border-color: #cdbdb3; }
.form-control:focus,
.form-select:focus { background-color: #fff; border-color: var(--brand); box-shadow: 0 0 0 4px rgb(152 99 78 / 11%); }
.form-control::placeholder { color: #a49b95; }
textarea.form-control { min-height: 116px; line-height: 1.6; }
.form-check-input,
.auth-form .form-check-input {
  width: 1.15rem;
  min-height: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  margin-top: 0;
  padding: 0;
  border-radius: 5px;
}
.auth-form .form-check { display: flex; align-items: center; gap: .5rem; min-height: 24px; padding-left: 0; }
.auth-form .form-check-label { padding-top: .05rem; }
.invalid-feedback,
.alert-block,
.errorlist { line-height: 1.45; }

.message-stack .alert {
  border: 1px solid rgb(83 116 94 / 16%);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
}

/* Motion-inspired feedback that never controls content visibility. */
.motion-enter {
  animation: product-enter .65s var(--ease-out) both;
  animation-delay: var(--motion-delay, 0ms);
}
@keyframes product-enter {
  from { opacity: 0; transform: translateY(14px) scale(.992); }
  to { opacity: 1; transform: none; }
}

.event-card,
.dashboard-stats article,
.steps-grid article,
.everything-grid article,
.guest-entry-card,
.account-profile-card,
.account-settings,
.manage-card {
  transition: border-color .25s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.event-card:hover,
.steps-grid article:hover,
.everything-grid article:hover,
.guest-entry-card:hover,
.account-settings:hover {
  border-color: rgb(152 99 78 / 28%);
  box-shadow: var(--shadow-lifted);
  transform: translateY(-4px);
}

/* Marketing */
.home-hero { position: relative; isolation: isolate; }
.home-hero::before {
  content: "";
  width: 230px;
  aspect-ratio: 1;
  position: absolute;
  top: 7%;
  left: -8%;
  z-index: -1;
  border: 1px solid rgb(152 99 78 / 10%);
  border-radius: 50%;
}
.home-hero__copy h1 { text-wrap: balance; }
.home-hero__visual { border-radius: 42% 58% 50% 50% / 46% 45% 55% 54%; }
.showcase-phone { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.home-hero__visual:hover .showcase-phone { box-shadow: 0 42px 100px rgb(70 42 30 / 31%); transform: rotate(0deg) translateY(-5px); }
.floating-note { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.floating-note:hover { box-shadow: 0 20px 50px rgb(75 48 36 / 18%); transform: translateY(-4px); }
.occasion-strip { padding: 0; }
.occasion-strip__track { min-width: max-content; display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 4vw, 3rem); padding: 1.15rem 1.5rem; }
.everything-grid article > span,
.step-icon { transition: transform .35s var(--ease-out), background .25s; }
.everything-grid article:hover > span,
.steps-grid article:hover .step-icon { transform: rotate(-5deg) scale(1.08); }
.faq-list details { transition: background .25s, border-color .25s, box-shadow .25s; }
.faq-list details[open] { background: #fff; border-color: rgb(152 99 78 / 25%); box-shadow: var(--shadow-soft); }
.faq-list summary span { transition: transform .25s var(--ease-out); }
.faq-list details[open] summary span { transform: rotate(45deg); }

/* Dashboard and creator */
.dashboard-shell,
.guest-manager-shell,
.account-shell { position: relative; }
.dashboard-welcome h1,
.create-event-heading h1,
.guest-manager-header h1,
.account-heading h1 { text-wrap: balance; }
.dashboard-stats article { overflow: hidden; position: relative; background: rgb(255 255 255 / 86%); }
.dashboard-stats article::after {
  content: "";
  width: 80px;
  aspect-ratio: 1;
  position: absolute;
  top: -42px;
  right: -35px;
  background: rgb(152 99 78 / 7%);
  border-radius: 50%;
}
.event-card { overflow: hidden; }
.event-card__cover { position: relative; }
.event-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 30%, rgb(255 255 255 / 12%));
  pointer-events: none;
}
.event-card__actions .btn { flex: 1 1 auto; }
.editor-toolbar,
.editor-page .form-section,
.guest-entry-card,
.guest-list-section { backdrop-filter: blur(18px); }
.editor-page .form-section { transition: border-color .25s, box-shadow .3s, transform .3s var(--ease-out); }
.editor-page .form-section:focus-within { transform: translateY(-2px); }
.editor-progress { scrollbar-width: none; }
.editor-progress::-webkit-scrollbar { display: none; }
.phone-frame { transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.preview-column:hover .phone-frame { box-shadow: 0 38px 95px rgb(40 28 21 / 30%), 0 0 0 8px rgb(255 255 255 / 45%); transform: translateY(-3px); }
.guest-row { transition: background .2s, border-color .2s, transform .2s var(--ease-out); }
.guest-row:hover { background: #fff; border-color: rgb(152 99 78 / 22%); transform: translateX(3px); }

/* Authentication */
.auth-story {
  background:
    radial-gradient(circle at 72% 18%, rgb(224 190 169 / 17%), transparent 18rem),
    linear-gradient(150deg, #765446, #493731 48%, #2f2927 100%);
}
.auth-story__ornament { animation: ornament-float 6s ease-in-out infinite; }
@keyframes ornament-float { 50% { transform: translateY(-9px) rotate(-10deg); } }
.auth-form-column {
  background:
    radial-gradient(circle at 85% 12%, rgb(208 177 159 / 18%), transparent 18rem),
    #f9f5f1;
}
.auth-card { border-radius: var(--radius-lg); box-shadow: 0 28px 90px rgb(77 48 35 / 13%); }
.auth-card__heading h1 { text-wrap: balance; }
.auth-form a { color: var(--brand-dark); font-size: .75rem; font-weight: 700; text-underline-offset: .2rem; }
.auth-form .form-text { margin-top: .45rem; font-size: .7rem; line-height: 1.45; }
.auth-state-icon { box-shadow: 0 8px 24px rgb(74 103 82 / 16%); }
.account-settings > a { border-radius: 12px; transition: background .2s, padding .2s; }
.account-settings > a:hover { padding-inline: .75rem; background: #faf5f1; }
.manage-nav a { transition: color .2s, background .2s, transform .2s; }
.manage-nav a:hover { transform: translateX(2px); }

/* Friendly system states and event access */
.system-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 22%, rgb(193 145 119 / 13%), transparent 25rem),
    radial-gradient(circle at 88% 78%, rgb(222 190 169 / 18%), transparent 28rem),
    #f7f3ef;
}
.system-page .site-footer { display: none; }
.system-page .cookie-banner {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  margin: -1rem auto 1rem;
  animation: none;
}
.system-state,
.checkin-shell { min-height: calc(100svh - 73px); display: grid; place-items: center; padding: clamp(1.25rem, 4vw, 3.5rem); }
.system-state { isolation: isolate; overflow: hidden; position: relative; }
.system-state::before,
.system-state::after {
  width: min(36vw, 420px);
  aspect-ratio: 1;
  content: "";
  position: absolute;
  z-index: -1;
  border: 1px solid rgb(152 99 78 / 9%);
  border-radius: 44% 56% 63% 37% / 52% 39% 61% 48%;
  pointer-events: none;
}
.system-state::before { top: -16%; left: -10%; transform: rotate(18deg); }
.system-state::after { right: -12%; bottom: -25%; transform: rotate(-22deg); }
.system-state__card,
.checkin-card {
  width: min(100%, 680px);
  overflow: hidden;
  position: relative;
  padding: clamp(1.5rem, 4.5vw, 3.25rem);
  background: rgb(255 253 251 / 94%);
  border: 1px solid rgb(152 99 78 / 16%);
  border-radius: clamp(24px, 4vw, 36px);
  box-shadow: 0 28px 80px rgb(70 47 36 / 11%), 0 2px 8px rgb(70 47 36 / 4%);
  text-align: center;
  backdrop-filter: blur(18px);
}
.system-state__card::before {
  width: 150px;
  height: 3px;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  transform: translateX(-50%);
}
.system-state__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 auto 1.5rem;
  color: #756860;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.system-state__status-dot { width: 7px; height: 7px; background: #b04f47; border-radius: 50%; box-shadow: 0 0 0 5px rgb(176 79 71 / 10%); }
.system-state__code {
  position: static;
  margin-left: .2rem;
  padding: .3rem .55rem;
  color: #876f63;
  background: #f3ebe5;
  border-radius: 999px;
  font: 700 .6rem/1 var(--sans);
  letter-spacing: .08em;
}
.system-state__icon,
.checkin-card__status { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 1.1rem; color: #fff; background: var(--success); border: 7px solid #e3ede6; border-radius: 50%; font-size: 1.4rem; }
.system-state__icon--warning { color: #7a5728; background: #eccf9a; border-color: #f9edd7; }
.system-state__icon--error { color: #a74740; background: #fff7f5; border-color: #f7dfdc; box-shadow: 0 12px 28px rgb(167 71 64 / 12%); }
.system-state__card h1,
.checkin-card h1 { max-width: 540px; margin: .65rem auto .85rem; font: 500 clamp(2rem, 6vw, 3.15rem)/1.04 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.system-state__card > p { max-width: 500px; margin: 0 auto; color: var(--muted); font-size: clamp(.88rem, 2vw, 1rem); line-height: 1.65; text-wrap: pretty; }
.system-state__actions { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.65rem; }
.system-state__actions .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding-inline: 1.35rem; font-size: .78rem; font-weight: 700; }
.system-state__tip {
  max-width: 510px;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 1.5rem auto 0;
  padding: .85rem 1rem;
  color: #75665e;
  background: #f8f2ed;
  border: 1px solid #eee1d8;
  border-radius: 14px;
  text-align: left;
}
.system-state__tip svg { flex: 0 0 auto; margin-top: .1rem; color: var(--brand); }
.system-state__tip p { margin: 0; font-size: .72rem; line-height: 1.5; }
.system-state__tip strong { display: block; margin-bottom: .08rem; color: #4f433d; }

.checkin-page { min-height: 100vh; background: radial-gradient(circle at top, #fff, #f3e9e2 60%, #e9ddd5); }
.checkin-page .site-header,
.checkin-page .site-footer { display: none; }
.checkin-shell { min-height: 100svh; }
.checkin-card__event { margin: 0; color: var(--brand); font: italic 500 1.05rem var(--serif); }
.checkin-details { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.75rem 0 1rem; }
.checkin-details > div { padding: 1rem; background: var(--surface-soft); border-radius: 14px; }
.checkin-details dt { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.checkin-details dd { margin: .35rem 0 0; font: 500 1.05rem var(--serif); }
.checkin-details dd strong { color: var(--brand); font-size: 1.5rem; }
.checkin-card__note { margin: 1rem 0 0; color: var(--muted); font-size: .75rem; }

@media (max-width: 767.98px) {
  .texture-choice-grid,
  .typography-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-header .navbar { min-height: 64px; }
  .site-header .navbar-collapse { margin: .6rem -.25rem 0; padding: .75rem; background: rgb(255 255 255 / 96%); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
  .site-header .navbar-nav .nav-link { min-height: 44px; display: flex; align-items: center; padding-inline: .75rem; }
  .site-header .navbar-nav .nav-link::after { display: none; }
  .header-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem; }
  .header-actions .nav-link { min-height: 44px; display: flex; align-items: center; padding: .6rem .75rem; background: var(--surface-soft); border-radius: 12px; }
  .home-hero__visual { border-radius: 34px; }
  .occasion-strip { overflow-x: auto; scrollbar-width: none; }
  .occasion-strip::-webkit-scrollbar { display: none; }
  .occasion-strip__track { justify-content: flex-start; }
  .event-card:hover,
  .steps-grid article:hover,
  .everything-grid article:hover,
  .guest-entry-card:hover,
  .account-settings:hover { transform: none; }
  .system-state__actions { display: grid; }
  .checkin-details { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .style-composer__preview { min-height: 108px; padding: 1rem; }
  .style-composer__preview strong { font-size: 1.5rem; }
  .style-composer__preview p { max-width: 220px; }
  .style-layer-tabs button { justify-content: center; padding: .7rem .35rem; text-align: center; }
  .style-layer-tabs button i,
  .style-layer-tabs button small { display: none; }
  .style-layer-panel__heading { display: block; }
  .style-layer-panel__heading p { margin-top: .3rem; text-align: left; }
  .texture-choice-grid,
  .typography-choice-grid { grid-template-columns: 1fr; }
  .system-state,
  .checkin-shell { padding: 1rem .75rem 2rem; }
  .system-state__card,
  .checkin-card { padding: 1.35rem 1.05rem; border-radius: 24px; }
  .system-state__status { margin-bottom: 1.2rem; font-size: .57rem; letter-spacing: .06em; }
  .system-state__icon { width: 58px; height: 58px; border-width: 6px; }
  .system-state__card h1 { font-size: clamp(2rem, 10.5vw, 2.65rem); }
  .system-state__actions .btn { width: 100%; }
  .system-state__tip { margin-top: 1.2rem; padding: .75rem .8rem; }
  .auth-form .form-check { margin-bottom: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-enter,
  .auth-story__ornament { animation: none; }
  .system-state__card,
  .system-state__icon { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes system-card-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes system-icon-enter { 0% { opacity: 0; transform: scale(.72) rotate(-8deg); } 70% { transform: scale(1.05); } 100% { opacity: 1; transform: none; } }
  .system-state__card { animation: system-card-enter .55s cubic-bezier(.2,.75,.2,1) both; }
  .system-state__icon { animation: system-icon-enter .5s .16s cubic-bezier(.2,.85,.25,1.15) both; }
}

/* Superuser catalog studio */
.catalog-shell { max-width: 1240px; margin: 0 auto; padding: 1.2rem 0 4rem; }
.catalog-kicker { display: block; color: #9b624b; font-size: .64rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.catalog-hero { min-height: 260px; display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 3.7rem); overflow: hidden; position: relative; color: #f9f2ed; background: linear-gradient(125deg, #342c29, #594036 62%, #8d5a45); border-radius: 30px; box-shadow: 0 24px 60px rgb(53 39 33 / 18%); }
.catalog-hero::before { width: 360px; aspect-ratio: 1; content: ""; position: absolute; top: -210px; right: 12%; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; box-shadow: 0 0 0 55px rgb(255 255 255 / 3%), 0 0 0 110px rgb(255 255 255 / 2%); }
.catalog-hero > * { position: relative; z-index: 1; }
.catalog-hero .catalog-kicker { color: #e1bba9; }
.catalog-hero h1 { max-width: 680px; margin: .7rem 0 .8rem; font: 500 clamp(2.4rem, 5vw, 4.6rem)/.98 var(--serif); letter-spacing: -.045em; }
.catalog-hero p { max-width: 620px; margin: 0; color: #d9cdc7; line-height: 1.7; }
.catalog-hero__link { min-width: 210px; display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: 1rem 1.1rem; color: #382d28; background: #fffaf6; border-radius: 17px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.catalog-hero__link:hover { color: #382d28; transform: translateY(-3px); box-shadow: 0 14px 30px rgb(20 12 9 / 18%); }
.catalog-hero__link span { font-size: .65rem; font-weight: 700; text-transform: uppercase; }
.catalog-hero__link strong { font: 600 1.15rem var(--serif); }
.catalog-hero__link i { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; }
.catalog-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1rem 0 1.4rem; }
.catalog-metrics article { padding: 1.25rem 1.35rem; background: #fff; border: 1px solid #e9dfd7; border-radius: 17px; }
.catalog-metrics span, .catalog-metrics small { display: block; color: #8a7e76; font-size: .65rem; }
.catalog-metrics strong { display: block; margin: .3rem 0; font: 600 2rem var(--serif); }
.catalog-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(290px, .75fr); gap: 1.2rem; margin-bottom: 1.2rem; }
.catalog-panel { padding: clamp(1.2rem, 3vw, 2rem); background: rgb(255 255 255 / 88%); border: 1px solid #e9dfd7; border-radius: 23px; box-shadow: 0 12px 34px rgb(63 43 32 / 5%); }
.catalog-panel__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.catalog-panel__heading h2 { margin: .3rem 0 0; font: 600 1.55rem var(--serif); }
.catalog-panel__heading > a { color: #865640; font-size: .7rem; font-weight: 700; text-decoration: none; }
.catalog-coverage { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; }
.catalog-coverage > a { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: .7rem; padding: .8rem; color: #3b322e; background: #faf7f4; border: 1px solid transparent; border-radius: 13px; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
.catalog-coverage > a:hover { background: #fff; border-color: #dcc9be; transform: translateY(-2px); }
.catalog-coverage__symbol { width: 38px; height: 38px; display: grid; place-items: center; color: #9a624b; background: #f1e5dd; border-radius: 11px; }
.catalog-coverage strong, .catalog-coverage small { display: block; }
.catalog-coverage strong { font-size: .76rem; }
.catalog-coverage small { margin-top: .15rem; color: #978a82; font-size: .6rem; }
.catalog-coverage i { padding: .25rem .45rem; color: #9a6731; background: #fbeddc; border-radius: 99px; font-size: .52rem; font-style: normal; font-weight: 800; text-transform: uppercase; }
.catalog-coverage i.is-ready { color: #4f7658; background: #e7f1e9; }
.catalog-recent-list { display: grid; gap: .25rem; }
.catalog-recent-list > a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .65rem; padding: .7rem .35rem; color: #3b322e; border-bottom: 1px solid #eee6e0; text-decoration: none; }
.catalog-recent-list > a > i { width: 32px; height: 32px; background: var(--swatch); border: 5px solid color-mix(in srgb, var(--swatch), white 76%); border-radius: 50%; }
.catalog-recent-list strong, .catalog-recent-list small { display: block; }
.catalog-recent-list strong { font-size: .72rem; }
.catalog-recent-list small { margin-top: .12rem; color: #968980; font-size: .56rem; }
.catalog-recent-list b { color: #9a6a53; font-size: .55rem; font-weight: 700; }
.catalog-recent-list b.is-active { color: #4f7658; }
.catalog-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.catalog-group-card { min-height: 110px; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; padding: 1rem; position: relative; color: #3b322e; background: #faf7f4; border: 1px solid transparent; border-radius: 14px; text-decoration: none; transition: transform .2s, border-color .2s, background .2s; }
.catalog-group-card:hover { color: #3b322e; background: #fff; border-color: #dbc8bc; transform: translateY(-2px); }
.catalog-group-card > span { color: #b29e92; font: italic 500 .75rem var(--serif); }
.catalog-group-grid strong { font-size: .75rem; }
.catalog-group-grid p { margin: .35rem 0 0; color: #8b7e76; font-size: .62rem; line-height: 1.5; }
.catalog-group-grid b { color: #a36c53; font: 600 1.4rem var(--serif); }
.catalog-group-card > i { position: absolute; right: 1rem; bottom: .75rem; color: #8d5b45; font-size: .55rem; font-style: normal; font-weight: 800; }
.catalog-quicklinks { display: grid; grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 2rem; margin-top: 1.2rem; padding: 2rem; color: #f6eeea; background: #39312d; border-radius: 22px; }
.catalog-quicklinks h2 { margin: .35rem 0; font: 600 1.5rem var(--serif); }
.catalog-quicklinks p { margin: 0; color: #bfb2ab; font-size: .72rem; }
.catalog-quicklinks nav { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.catalog-quicklinks nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem .85rem; color: #f5eeea; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 8%); border-radius: 11px; font-size: .7rem; text-decoration: none; }
.catalog-quicklinks nav small { margin-left: auto; color: #cfaa97; }
.catalog-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; padding: 1rem .2rem; }
.catalog-page-heading a { display: block; margin-bottom: 1.3rem; color: #865640; font-size: .7rem; font-weight: 700; text-decoration: none; }
.catalog-page-heading h1 { margin: .3rem 0 .4rem; font: 500 clamp(2.2rem, 4vw, 3.7rem)/1 var(--serif); letter-spacing: -.035em; }
.catalog-page-heading p { margin: 0; color: #83776f; font-size: .8rem; }
.catalog-page-heading > strong { color: #98634e; font: 600 2.6rem var(--serif); text-align: right; }
.catalog-page-heading > strong small { display: block; color: #8f837b; font: 600 .58rem "DM Sans", sans-serif; text-transform: uppercase; }
.catalog-filters { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto auto; align-items: end; gap: .7rem; margin-bottom: 1.2rem; padding: 1rem; background: #fff; border: 1px solid #e8ddd5; border-radius: 16px; }
.catalog-filters label span { display: block; margin-bottom: .35rem; color: #776b64; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.catalog-filters input, .catalog-filters select { width: 100%; min-height: 42px; padding: .6rem .75rem; color: #403733; background: #faf8f6; border: 1px solid #e5dad2; border-radius: 10px; font: 500 .7rem "DM Sans", sans-serif; }
.catalog-filters .btn { min-height: 42px; font-size: .7rem; }
.catalog-filters > a { align-self: center; color: #8e5b45; font-size: .66rem; font-weight: 700; }
.staff-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.staff-theme-card { overflow: hidden; background: #fff; border: 1px solid #e4d9d1; border-radius: 18px; box-shadow: 0 8px 25px rgb(58 39 29 / 5%); transition: transform .22s, box-shadow .22s; }
.staff-theme-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgb(58 39 29 / 10%); }
.staff-theme-card.is-inactive { opacity: .76; }
.staff-theme-card__preview { min-height: 205px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; position: relative; color: var(--card-ink); background: radial-gradient(circle at top, var(--card-surface), transparent 48%), var(--card-bg); text-align: center; }
.staff-theme-card__preview::before, .staff-theme-card__preview::after { width: 115px; height: 180px; content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--card-accent), transparent 68%); border-radius: 50%; transform: rotate(38deg); }
.staff-theme-card__preview::before { top: -100px; left: -65px; }.staff-theme-card__preview::after { right: -75px; bottom: -120px; }
.staff-theme-card__preview span { color: var(--card-accent); font-size: .5rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.staff-theme-card__preview strong { max-width: 250px; margin: .75rem 0 .35rem; font: 500 1.65rem/1.05 var(--card-heading), var(--serif); }
.staff-theme-card__preview i { color: var(--card-accent); font-style: normal; }
.staff-theme-card__preview small { margin-top: .7rem; color: color-mix(in srgb, var(--card-ink), transparent 38%); font-size: .58rem; }
.staff-theme-card__body { padding: .9rem; }
.staff-theme-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #8c8078; font-size: .58rem; }
.catalog-status { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .5rem; color: #8b6350; background: #f2e7e0; border-radius: 99px; font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.catalog-status::before { width: 6px; height: 6px; content: ""; background: currentColor; border-radius: 50%; }
.catalog-status.is-active { color: #507359; background: #e5efe7; }
.staff-theme-card__palette { display: flex; margin: .8rem 0; }
.staff-theme-card__palette i { width: 25px; height: 25px; margin-right: -5px; background: var(--card-bg); border: 2px solid #fff; border-radius: 50%; }.staff-theme-card__palette i:nth-child(2) { background: var(--card-surface); }.staff-theme-card__palette i:nth-child(3) { background: var(--card-accent); }.staff-theme-card__palette i:nth-child(4) { background: var(--card-ink); }
.staff-theme-card__actions { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #eee6e0; }
.staff-theme-card__actions a, .staff-theme-card__actions button { width: 100%; padding: .65rem .25rem; color: #765445; background: transparent; border: 0; font-size: .61rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.staff-theme-card__actions > * + * { border-left: 1px solid #eee6e0; }
.catalog-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; font-size: .68rem; }.catalog-pagination a { color: #875743; font-weight: 700; }.catalog-pagination span { color: #8b7f77; }
.catalog-empty { color: #8c8078; font-size: .7rem; }.catalog-empty--large { grid-column: 1 / -1; padding: 4rem 1rem; background: #fff; border: 1px dashed #d9c8bd; border-radius: 20px; text-align: center; }.catalog-empty--large > span { color: #b0785f; font-size: 2rem; }.catalog-empty--large h2 { font: 600 1.6rem var(--serif); }.catalog-empty--large .btn { margin-top: 1rem; }
.theme-studio__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(310px, .65fr); align-items: start; gap: 1.2rem; }
.theme-studio__fields { display: grid; gap: 1rem; }
.catalog-form-section { padding: clamp(1.2rem, 3vw, 1.8rem); background: #fff; border: 1px solid #e7dcd4; border-radius: 20px; }
.catalog-form-section > header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid #eee6e1; }
.catalog-form-section > header > i { width: 36px; height: 36px; display: grid; place-items: center; color: #955f48; background: #f4e8e1; border-radius: 50%; font-size: .62rem; font-style: normal; font-weight: 800; }
.catalog-form-section h2 { margin: 0; font: 600 1.25rem var(--serif); }.catalog-form-section header p { margin: .1rem 0 0; color: #90847c; font-size: .64rem; }
.catalog-form-grid { display: grid; gap: .8rem; }.catalog-form-grid--2 { grid-template-columns: 1fr 1fr; }.catalog-form-grid--3 { grid-template-columns: 1.4fr 1fr .65fr; }
.catalog-form-section .form-label { color: #574b45; font-size: .66rem; font-weight: 800; }.catalog-form-section .form-control, .catalog-form-section .form-select { min-height: 45px; padding: .7rem .8rem; border-color: #dfd2ca; border-radius: 11px; font-size: .72rem; }.catalog-form-section .form-text { font-size: .58rem; }
.theme-color-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.theme-color-field { display: grid; grid-template-columns: 42px 1fr; align-items: end; gap: .55rem; }.theme-color-field > input[type="color"] { width: 42px; height: 45px; margin-bottom: 1rem; padding: 3px; background: #fff; border: 1px solid #ded1c9; border-radius: 10px; cursor: pointer; }.theme-color-field > div { margin-bottom: 0 !important; }
.theme-studio__actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .4rem; }.theme-studio__actions > a { color: #7d6f67; font-size: .7rem; font-weight: 700; }.theme-studio__actions .btn { min-height: 48px; padding-inline: 1.6rem; font-weight: 700; }
.theme-studio__preview-wrap { padding: 1rem; position: sticky; top: 90px; background: #fff; border: 1px solid #e6dbd3; border-radius: 24px; box-shadow: 0 18px 50px rgb(60 41 31 / 9%); }.theme-studio__preview-wrap > .catalog-kicker { display: flex; align-items: center; gap: .45rem; margin: .2rem .3rem .9rem; }.theme-studio__preview-wrap > .catalog-kicker i { width: 7px; height: 7px; background: #5b8a67; border-radius: 50%; box-shadow: 0 0 0 4px rgb(91 138 103 / 10%); }
.theme-live-preview { overflow: hidden; color: var(--preview-ink); background: var(--preview-bg); border-radius: 18px; font-family: var(--preview-body), sans-serif; }
.theme-live-preview__hero { min-height: 365px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; background: radial-gradient(circle at top, var(--preview-surface), transparent 55%); text-align: center; }.theme-live-preview__hero::before, .theme-live-preview__hero::after { width: 130px; height: 210px; content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--preview-accent), transparent 65%); border-radius: 50%; transform: rotate(35deg); }.theme-live-preview__hero::before { top: -105px; left: -75px; }.theme-live-preview__hero::after { right: -90px; bottom: -130px; }
.theme-live-preview__hero span, .theme-live-preview__section > span { color: var(--preview-accent); font-size: .48rem; font-weight: 800; letter-spacing: .22em; }.theme-live-preview__hero > i { margin: .8rem; color: var(--preview-accent); font-style: normal; }.theme-live-preview__hero h2 { margin: 0; font: 500 2.55rem/.88 var(--preview-heading), serif; }.theme-live-preview__hero p { margin: 1rem 0; color: color-mix(in srgb, var(--preview-ink), transparent 30%); font-size: .62rem; }.theme-live-preview__hero b { padding: .45rem .8rem; border-block: 1px solid var(--preview-muted); font: 600 .55rem var(--preview-heading), serif; letter-spacing: .15em; }
.theme-live-preview__section { min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.2rem 1.3rem; color: var(--preview-dark-ink); background: var(--preview-dark); text-align: center; }.theme-live-preview__section > span { color: var(--preview-muted); }.theme-live-preview__section h3 { margin: .75rem 0; font: 500 1.65rem/1 var(--preview-heading), serif; }.theme-live-preview__section p { max-width: 280px; color: color-mix(in srgb, var(--preview-dark-ink), transparent 28%); font-size: .64rem; line-height: 1.6; }.theme-live-preview__section button { margin-top: .8rem; padding: .65rem .9rem; color: var(--preview-dark); background: var(--preview-muted); border: 0; border-radius: 99px; font-size: .6rem; font-weight: 800; }
.theme-preview-note { margin: .8rem .3rem .2rem; color: #8e827a; font-size: .58rem; line-height: 1.5; }
.catalog-edit-list { display: grid; gap: .65rem; }
.catalog-edit-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: .9rem; padding: 1rem 1.15rem; color: #403632; background: #fff; border: 1px solid #e7dcd4; border-radius: 15px; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; }
.catalog-edit-row:hover { color: #403632; border-color: #ceb5a7; box-shadow: 0 10px 25px rgb(61 41 31 / 7%); transform: translateY(-2px); }
.catalog-edit-row.is-inactive { opacity: .64; }
.catalog-edit-row__order { width: 40px; height: 40px; display: grid; place-items: center; color: #956049; background: #f4e8e1; border-radius: 50%; font-size: .62rem; font-weight: 800; }
.catalog-edit-row__copy strong, .catalog-edit-row__copy small, .catalog-edit-row__copy q { display: block; }
.catalog-edit-row__copy strong { font-size: .77rem; }.catalog-edit-row__copy small { margin-top: .16rem; color: #8e8179; font-size: .6rem; }.catalog-edit-row__copy q { max-width: 740px; margin-top: .42rem; color: #6f625b; font: italic 500 .72rem/1.45 var(--serif); quotes: none; }
.catalog-edit-row__action { color: #8d5b45; font-size: .62rem; font-weight: 800; }
.catalog-item-editor { max-width: 820px; }.catalog-item-form { display: grid; gap: 1rem; }.catalog-item-form textarea { resize: vertical; }

@media (max-width: 991.98px) {
  .catalog-layout, .theme-studio__grid { grid-template-columns: 1fr; }
  .catalog-group-grid { grid-template-columns: repeat(2, 1fr); }
  .staff-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-studio__preview-wrap { position: static; }
  .theme-live-preview { display: grid; grid-template-columns: 1fr 1fr; }.theme-live-preview__hero, .theme-live-preview__section { min-height: 330px; }
}
@media (max-width: 767.98px) {
  .catalog-shell { padding-top: .5rem; }
  .catalog-hero { min-height: 0; display: grid; padding: 2rem 1.3rem; border-radius: 23px; }.catalog-hero__link { width: 100%; }
  .catalog-metrics { grid-template-columns: repeat(2, 1fr); }.catalog-layout { display: block; }.catalog-layout > * + * { margin-top: 1rem; }
  .catalog-group-grid, .catalog-quicklinks, .catalog-quicklinks nav { grid-template-columns: 1fr; }
  .catalog-page-heading { display: block; }.catalog-page-heading > strong { margin-top: 1rem; text-align: left; }
  .catalog-filters { grid-template-columns: 1fr 1fr; }.catalog-filters label:first-child { grid-column: 1 / -1; }
  .staff-theme-grid { grid-template-columns: 1fr; }
  .catalog-edit-row { grid-template-columns: 38px 1fr auto; }.catalog-edit-row__action { display: none; }
  .catalog-form-grid--2, .catalog-form-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .catalog-coverage, .catalog-group-grid, .catalog-metrics, .catalog-filters, .theme-color-grid { grid-template-columns: 1fr; }
  .catalog-filters label:first-child { grid-column: auto; }
  .theme-live-preview { display: block; }.theme-live-preview__hero { min-height: 340px; }.theme-live-preview__section { min-height: 270px; }
  .theme-studio__actions { align-items: stretch; flex-direction: column-reverse; }.theme-studio__actions .btn, .theme-studio__actions a { width: 100%; text-align: center; }
}

/* Invitation section designer: itinerary and gift configuration */
.section-style-field { margin: 1rem 0 1.35rem; }
.section-style-field__label { display: block; margin-bottom: .65rem; color: #514843; font-size: .78rem; font-weight: 750; }
.section-style-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.section-style-option { min-width: 0; display: grid; gap: .45rem; padding: .65rem; position: relative; background: #fbf8f5; border: 1px solid #e4d9d1; border-radius: 13px; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease-out); }
.section-style-option:hover { background: #fff; border-color: #cdb8ac; transform: translateY(-2px); }
.section-style-option:has(input:checked) { background: #fff9f5; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(152 99 78 / 10%); }
.section-style-option input { position: absolute; opacity: 0; pointer-events: none; }
.section-style-option strong { overflow-wrap: anywhere; font-size: .63rem; line-height: 1.25; }
.section-style-option__visual { height: 66px; display: flex; overflow: hidden; position: relative; background: #eee4dd; border-radius: 9px; }
.section-style-option__visual i { display: block; }

.itinerary-style-mini { align-items: center; justify-content: center; gap: .35rem; }
.itinerary-style-mini i { width: 8px; height: 8px; position: relative; background: var(--brand); border-radius: 50%; }
.itinerary-style-mini--timeline { flex-direction: column; }
.itinerary-style-mini--timeline::before { content: ""; width: 1px; height: 44px; position: absolute; background: rgb(152 99 78 / 36%); }
.itinerary-style-mini--cards { align-items: stretch; padding: .5rem; }
.itinerary-style-mini--cards i { width: 28%; height: auto; background: #fff; border: 1px solid #ddcec5; border-radius: 5px; }
.itinerary-style-mini--steps { justify-content: space-around; padding: .7rem .45rem; }
.itinerary-style-mini--steps i { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; }
.itinerary-style-mini--steps i:nth-child(2) { align-self: end; }
.itinerary-style-mini--agenda { flex-direction: column; align-items: stretch; gap: .35rem; padding: .65rem; }
.itinerary-style-mini--agenda i { width: 100%; height: 1px; background: rgb(152 99 78 / 35%); border-radius: 0; }

.gift-style-mini { gap: .35rem; padding: .55rem; }
.gift-style-mini i { flex: 1; background: #fff; border: 1px solid #ddcec5; border-radius: 5px; }
.gift-style-mini--cards { flex-direction: column; }
.gift-style-mini--boutique i { border-radius: 50% 50% 6px 6px; }
.gift-style-mini--minimal { flex-direction: column; }
.gift-style-mini--minimal i { width: 100%; flex: 0 0 1px; margin-block: .25rem; background: rgb(152 99 78 / 35%); border: 0; border-radius: 0; }
.gift-style-mini--envelopes { align-items: center; }
.gift-style-mini--envelopes i { height: 34px; position: relative; border-radius: 4px; }
.gift-style-mini--envelopes i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, transparent 49%, #eadbd2 50% 52%, transparent 53%); }

.inline-editor { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.inline-editor__heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.inline-editor__heading strong { font: 600 1rem var(--serif); }
.inline-editor__heading small { color: var(--muted); font-size: .65rem; }
.inline-editor__rows { display: grid; gap: .65rem; }
.inline-editor-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: .7rem; padding: .8rem; background: #faf7f4; border: 1px solid #e9dfd8; border-radius: 14px; transition: background .2s, border-color .2s; }
.inline-editor-row:focus-within { background: #fff; border-color: rgb(152 99 78 / 38%); }
.inline-editor-row__number { width: 28px; height: 28px; display: grid; place-items: center; color: var(--brand); background: #f0e2da; border-radius: 50%; font-size: .56rem; font-weight: 800; }
.inline-editor-row__grid { min-width: 0; display: grid; gap: .55rem; }
.inline-editor-row__grid--itinerary { grid-template-columns: 1.15fr 1.4fr .65fr; }
.inline-editor-row__grid--gift { grid-template-columns: .8fr 1.2fr 1.35fr; }
.inline-editor-row__wide { grid-column: 1 / -1; }
.inline-editor-row .mb-3 { margin-bottom: 0 !important; }
.inline-editor-row .form-label { margin-bottom: .3rem; font-size: .66rem; }
.inline-editor-row .form-control,
.inline-editor-row .form-select { min-height: 42px; padding: .55rem .65rem; font-size: .75rem; }
.inline-editor-row textarea.form-control { min-height: 64px; }
.inline-delete { grid-column: 2; width: max-content; display: flex; align-items: center; gap: .4rem; color: #9b4f49; font-size: .65rem; cursor: pointer; }
.inline-delete input { width: 15px; height: 15px; accent-color: var(--danger); }
.inline-editor-row.is-marked-delete { opacity: .48; background: #f8eded; border-color: #e8c9c6; }
.inline-remove-button { grid-column: 2; width: max-content; padding: .25rem 0; color: #8f625b; background: transparent; border: 0; font-size: .64rem; font-weight: 700; text-decoration: underline; text-decoration-color: rgb(143 98 91 / 35%); text-underline-offset: .2rem; }
.inline-remove-button:hover { color: var(--danger); }
.inline-add-button { width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: .75rem; color: var(--brand-dark); background: #fff; border: 1px dashed #cdb8ac; border-radius: 13px; font-size: .72rem; font-weight: 800; transition: color .2s, background .2s, border-color .2s, transform .2s var(--ease-out); }
.inline-add-button:hover { color: #fff; background: var(--brand); border-color: var(--brand); transform: translateY(-2px); }
.inline-add-button:disabled { cursor: not-allowed; opacity: .5; transform: none; }

/* Four itinerary compositions */
.timeline-marker { display: grid; place-items: center; }
.timeline-copy { min-width: 0; }

.itinerary-section--timeline .timeline-marker { color: var(--invite-muted); font-size: .62rem; }

.itinerary-section--cards { color: var(--invite-ink); background: color-mix(in srgb, var(--invite-bg) 78%, var(--invite-surface)); }
.itinerary-section--cards .section-kicker { color: var(--invite-accent); }
.timeline--cards { max-width: 780px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 2.3rem auto 0; text-align: left; }
.timeline--cards li { min-height: 150px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; align-items: start; gap: .65rem .8rem; padding: 1.15rem; position: relative; background: color-mix(in srgb, var(--invite-surface) 90%, transparent); border: 1px solid color-mix(in srgb, var(--invite-accent) 18%, transparent); border-radius: 5px 20px 5px 20px; }
.timeline--cards time { grid-column: 2; color: var(--invite-accent); font-size: .72rem; font-weight: 750; letter-spacing: .12em; }
.timeline--cards .timeline-marker { width: 36px; height: 36px; grid-row: 1 / 3; color: var(--invite-surface); background: var(--invite-accent); border: 0; border-radius: 50%; font-size: .72rem; }
.timeline--cards .timeline-marker::after { display: none; }
.timeline--cards .timeline-copy { grid-column: 2; }
.timeline--cards strong { color: var(--invite-ink); }
.timeline--cards p { color: color-mix(in srgb, var(--invite-ink) 64%, transparent); }

.itinerary-section--steps { overflow: hidden; position: relative; background: var(--invite-dark); color: var(--invite-dark-ink); }
.itinerary-section--steps::before { content: ""; width: 340px; height: 520px; position: absolute; top: 18%; left: 50%; border: 1px solid color-mix(in srgb, var(--invite-muted) 22%, transparent); border-radius: 50%; transform: translateX(-50%) rotate(68deg); }
.timeline--steps { max-width: 620px; display: grid; gap: 1rem; position: relative; margin: 2.5rem auto 0; }
.timeline--steps li { width: 72%; min-height: 100px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: .9rem; padding: 1rem 1.2rem; position: relative; background: color-mix(in srgb, var(--invite-surface) 8%, transparent); border: 1px solid color-mix(in srgb, var(--invite-muted) 25%, transparent); border-radius: 18px; backdrop-filter: blur(8px); }
.timeline--steps li:nth-child(even) { margin-left: auto; }
.timeline--steps time { position: absolute; top: .7rem; right: 1rem; color: var(--invite-muted); font-size: .7rem; }
.timeline--steps .timeline-marker { width: 48px; height: 48px; color: var(--invite-dark); background: var(--invite-muted); border: 0; border-radius: 50%; font-size: .72rem; }
.timeline--steps .timeline-marker::after { display: none; }
.timeline--steps strong { color: var(--invite-dark-ink); }

.itinerary-section--agenda { color: var(--invite-ink); background: var(--invite-surface); }
.itinerary-section--agenda .section-kicker { color: var(--invite-accent); }
.timeline--agenda { max-width: 680px; margin: 2.4rem auto 0; border-top: 1px solid color-mix(in srgb, var(--invite-accent) 24%, transparent); }
.timeline--agenda li { min-height: 0; display: grid; grid-template-columns: 90px 42px 1fr; align-items: center; gap: 1rem; padding: 1.2rem .25rem; border-bottom: 1px solid color-mix(in srgb, var(--invite-accent) 24%, transparent); }
.timeline--agenda time { color: var(--invite-accent); font-size: 1.3rem; }
.timeline--agenda .timeline-marker { width: 34px; height: 34px; color: var(--invite-accent); border: 1px solid color-mix(in srgb, var(--invite-accent) 45%, transparent); border-radius: 50%; font-size: .62rem; }
.timeline--agenda .timeline-marker::after { display: none; }
.timeline--agenda strong { color: var(--invite-ink); }
.timeline--agenda p { color: color-mix(in srgb, var(--invite-ink) 62%, transparent); }

/* Four gift registry compositions */
.gift-card__icon { flex: 0 0 auto; }
.gift-card > .gift-card__copy { min-width: 0; display: block; color: inherit; font-size: inherit; }
.gift-card__copy strong,
.gift-card__copy em { display: block; }
.gift-card__copy em { margin-top: .18rem; color: color-mix(in srgb, var(--invite-ink) 58%, transparent); font-size: .68rem; font-style: normal; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }

.gift-grid--cards .gift-card { transition: transform .25s var(--ease-out), box-shadow .25s, border-color .25s; }
.gift-grid--cards .gift-card:hover { border-color: color-mix(in srgb, var(--invite-accent) 35%, transparent); box-shadow: 0 14px 34px rgb(42 29 23 / 10%); transform: translateY(-3px); }

.gifts-section--boutique { position: relative; background: var(--invite-dark); color: var(--invite-dark-ink); }
.gifts-section--boutique::before { content: "✦"; position: absolute; top: 1.5rem; left: 50%; color: color-mix(in srgb, var(--invite-muted) 22%, transparent); font-size: 6rem; transform: translateX(-50%); }
.gifts-section--boutique .section-kicker { color: var(--invite-muted); }
.gifts-section--boutique > p { color: color-mix(in srgb, var(--invite-dark-ink) 65%, transparent); }
.gift-grid--boutique { max-width: 760px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gift-grid--boutique .gift-card { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; color: var(--invite-dark-ink); background: color-mix(in srgb, var(--invite-surface) 7%, transparent); border-color: color-mix(in srgb, var(--invite-muted) 30%, transparent); border-radius: 50% 50% 18px 18px; text-align: center; }
.gift-grid--boutique .gift-card__icon { color: var(--invite-muted); font-size: 1.8rem; }
.gift-grid--boutique .gift-card__copy em { color: color-mix(in srgb, var(--invite-dark-ink) 58%, transparent); }
.gift-grid--boutique .gift-card small { color: var(--invite-muted); }

.gifts-section--minimal { background: var(--invite-surface); }
.gift-grid--minimal { max-width: 700px; gap: 0; border-top: 1px solid color-mix(in srgb, var(--invite-accent) 30%, transparent); }
.gift-grid--minimal .gift-card { min-height: 76px; padding: 1rem .25rem; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--invite-accent) 30%, transparent); border-radius: 0; }
.gift-grid--minimal .gift-card__icon { width: 34px; height: 34px; display: grid; place-items: center; color: var(--invite-accent); border: 1px solid color-mix(in srgb, var(--invite-accent) 32%, transparent); border-radius: 50%; font-size: .9rem; }
.gift-grid--minimal .gift-card small { color: var(--invite-accent); }
.gift-grid--minimal .gift-card:hover { padding-inline: .75rem; background: color-mix(in srgb, var(--invite-accent) 5%, transparent); }

.gifts-section--envelopes { background: color-mix(in srgb, var(--invite-bg) 82%, var(--invite-surface)); }
.gift-grid--envelopes { max-width: 780px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gift-grid--envelopes .gift-card { min-height: 145px; display: grid; grid-template-columns: 48px 1fr; grid-template-rows: 1fr auto; overflow: hidden; position: relative; padding: 1.3rem; background: var(--invite-surface); border: 0; border-radius: 8px; box-shadow: 0 16px 36px rgb(48 33 26 / 9%); }
.gift-grid--envelopes .gift-card::before,
.gift-grid--envelopes .gift-card::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 56%; pointer-events: none; }
.gift-grid--envelopes .gift-card::before { background: linear-gradient(155deg, transparent 49.5%, color-mix(in srgb, var(--invite-accent) 10%, var(--invite-surface)) 50%); }
.gift-grid--envelopes .gift-card::after { background: linear-gradient(205deg, transparent 49.5%, color-mix(in srgb, var(--invite-accent) 7%, var(--invite-surface)) 50%); }
.gift-grid--envelopes .gift-card > * { position: relative; z-index: 1; }
.gift-grid--envelopes .gift-card__icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--invite-surface); background: var(--invite-accent); border-radius: 50%; font-size: .9rem; }
.gift-grid--envelopes .gift-card small { grid-column: 2; color: var(--invite-accent); }

@media (max-width: 767.98px) {
  .section-style-picker { display: flex; overflow-x: auto; padding: .2rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .section-style-picker::-webkit-scrollbar { display: none; }
  .section-style-option { min-width: 150px; scroll-snap-align: start; }
  .inline-editor-row__grid--itinerary,
  .inline-editor-row__grid--gift { grid-template-columns: 1fr 1fr; }
  .inline-editor-row__grid--itinerary > :nth-child(2),
  .inline-editor-row__grid--gift > :nth-child(3) { grid-column: 1 / -1; }
  .timeline--cards,
  .gift-grid--boutique,
  .gift-grid--envelopes { grid-template-columns: 1fr; }
  .timeline--steps li { width: 88%; }
}

@media (max-width: 575.98px) {
  .inline-editor__heading { flex-direction: column; }
  .inline-editor-row { grid-template-columns: 1fr; }
  .inline-editor-row__number { margin-bottom: -.15rem; }
  .inline-editor-row__grid--itinerary,
  .inline-editor-row__grid--gift { grid-template-columns: 1fr; }
  .inline-editor-row__grid--itinerary > *,
  .inline-editor-row__grid--gift > *,
  .inline-delete,
  .inline-remove-button { grid-column: 1; }
  .timeline--cards li { min-height: 135px; }
  .timeline--steps li { width: 100%; }
  .timeline--agenda li { grid-template-columns: 68px 34px 1fr; gap: .65rem; }
  .timeline--agenda time { font-size: 1rem; }
  .gift-grid--envelopes .gift-card { min-height: 132px; }
}

/* ============================================================
   Admin shell — sidebar + topbar + content (Data-Dense Dashboard)
   Palette informed by ui-ux-pro-max: blue primary + amber accent.
   ============================================================ */
.admin {
  --a-sidebar: #2f2723; --a-sidebar-2: #3a322c; --a-sidebar-active: #453a31;
  --a-side-text: #b0a498; --a-side-active: #fdf8f3;
  --a-content: #f6f0e8; --a-surface: #fffdfb;
  --a-border: #e8ded4; --a-border-strong: #d8c9bc;
  --a-ink: #3a302c; --a-ink2: #6a5a50; --a-ink3: #9a8c84;
  --a-blue: #98634e; --a-blue-hover: #7d5240; --a-blue-tint: #f4eae4;
  --a-ok-t: #2d6e4a; --a-ok-bg: #e4f0e9; --a-ok-dot: #3a7054;
  --a-warn-t: #b8700c; --a-warn-bg: #fbefd8; --a-warn-dot: #d9a12b;
  --a-draft-t: #6a5a50; --a-draft-bg: #efe7de; --a-draft-dot: #b0a498;
  --a-danger-t: #b64b43; --a-danger-bg: #fbe9e7;
  --a-shadow: 0 1px 2px rgb(57 40 32 / 5%);
  --a-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--a-sans);
  color: var(--a-ink);
  background: var(--a-content);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  -webkit-font-smoothing: antialiased;
}
.admin :focus-visible { outline: 2px solid var(--a-blue); outline-offset: 2px; border-radius: 4px; }

/* Sidebar */
.admin-sidebar { background: var(--a-sidebar); color: var(--a-side-text); display: flex; flex-direction: column; gap: 24px; padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.admin-sidebar::-webkit-scrollbar { width: 8px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
.admin-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); }
.admin-brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px; color: #fff; font-weight: 700; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.admin-brand span { color: var(--a-blue); font-size: 14px; }
.admin-navgroup { display: flex; flex-direction: column; gap: 3px; }
.admin-navlabel { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #5b6676; padding: 0 8px 6px; }
.admin-navitem { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px; color: var(--a-side-text); text-decoration: none; font-size: 14px; font-weight: 500; position: relative; transition: background .15s ease, color .15s ease; }
.admin-navitem svg { width: 19px; height: 19px; flex: none; opacity: .9; }
.admin-navitem:hover { background: var(--a-sidebar-2); color: #cfd5de; }
.admin-navitem.active { background: var(--a-sidebar-active); color: var(--a-side-active); }
.admin-navitem.active::before { content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--a-blue); }
.admin-navitem.active svg { opacity: 1; color: #d9a88f; }
.admin-navbadge { margin-left: auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--a-blue); color: #fff; border-radius: 20px; padding: 1px 7px; }
.admin-sidefoot { margin-top: auto; position: sticky; bottom: 0; background: var(--a-sidebar); padding-top: 10px; }
.admin-userchip { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: var(--a-sidebar-2); }
.admin-userchip__text { display: flex; flex-direction: column; min-width: 0; }
.admin-userchip__text strong { color: #e6e9ee; font-size: 13px; font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-userchip__text small { color: #6b7686; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #a56b52, #7d5240); text-decoration: none; }
.admin-avatar--sm { width: 32px; height: 32px; font-size: 12px; }

/* Main column + topbar */
.admin-main { display: flex; flex-direction: column; min-width: 0; }
.admin-topbar { height: 64px; flex: none; background: var(--a-surface); border-bottom: 1px solid var(--a-border); display: flex; align-items: center; gap: 16px; padding: 0 28px; position: sticky; top: 0; z-index: 5; }
.admin-topbar__title { font-size: 15px; font-weight: 600; color: var(--a-ink); }
.admin-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* Unified editor header — lives inside the global topbar (no second bar) */
.editor-page .admin-topbar { gap: 10px; }
.editor-topbar__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.editor-topbar__title { margin: 0; font: 500 clamp(1.05rem, 1.8vw, 1.4rem)/1.1 var(--serif, "Playfair Display", serif); color: var(--a-ink, #2f2723); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.editor-topbar__btn { padding: 8px 14px !important; font-size: 13px !important; border-radius: 10px !important; }
.editor-sync-state { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; color: #4d6956; background: rgb(226 240 230 / 72%); border: 1px solid rgb(99 137 109 / 18%); border-radius: 10px; font-size: 12px; white-space: nowrap; }
.editor-sync-state strong { font-weight: 600; }
.editor-sync-state__dot { width: 18px; height: 18px; flex: none; display: grid; place-items: center; color: #fff; background: #67866f; border-radius: 50%; font-size: 9px; }
.editor-sync-state.is-dirty { color: #8a6d2e; background: rgb(247 236 206 / 72%); border-color: rgb(201 168 106 / 32%); }
.editor-sync-state.is-dirty .editor-sync-state__dot { background: #c9a86a; }
.editor-sync-state.is-error { color: #a4443c; background: rgb(247 224 221 / 82%); border-color: rgb(180 82 74 / 32%); }
.editor-sync-state.is-error .editor-sync-state__dot { background: #b4524a; }
.editor-sync-state.is-saving { color: #7a6c3e; background: rgb(247 240 218 / 80%); border-color: rgb(201 168 106 / 30%); }
.editor-sync-state.is-saving .editor-sync-state__dot { background: #c9a86a; animation: sync-spin 1s linear infinite; }
@keyframes sync-spin { to { transform: rotate(360deg); } }
.editor-field-hint { margin: 0 0 1rem; padding: .6rem .9rem; color: #a4443c; background: rgb(247 224 221 / 55%); border: 1px solid rgb(180 82 74 / 22%); border-radius: 10px; font-size: .82rem; }
@media (max-width: 720px) {
  .editor-sync-state { display: none; }
  .editor-topbar__title { max-width: 46vw; }
  .editor-topbar__btn { padding: 7px 10px !important; }
}
.admin-search { display: flex; align-items: center; gap: 9px; background: var(--a-content); border: 1px solid var(--a-border); border-radius: 10px; padding: 0 12px; height: 40px; width: 340px; max-width: 42vw; transition: border-color .15s ease, box-shadow .15s ease; }
.admin-search:focus-within { border-color: var(--a-blue); box-shadow: 0 0 0 3px var(--a-blue-tint); }
.admin-search svg { width: 17px; height: 17px; color: var(--a-ink3); flex: none; }
.admin-search input { border: 0; outline: 0; background: transparent; width: 100%; font-family: inherit; font-size: 14px; color: var(--a-ink); }
.admin-search input::placeholder { color: var(--a-ink3); }
.admin-iconbtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--a-border); background: var(--a-surface); color: var(--a-ink2); display: grid; place-items: center; position: relative; transition: background .15s ease, border-color .15s ease; }
.admin-iconbtn:hover { background: var(--a-content); border-color: var(--a-border-strong); color: var(--a-ink); }
.admin-iconbtn svg { width: 19px; height: 19px; }
.admin-iconbtn::after { content: ""; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; border: 2px solid var(--a-surface); }
.admin-topuser { display: inline-flex; }

/* Content */
.admin-content { padding: 28px; display: flex; flex-direction: column; gap: 24px; }
.admin-messages { display: flex; flex-direction: column; gap: 10px; }
.admin-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-pagehead h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.admin-pagehead p { margin: 4px 0 0; font-size: 14px; color: var(--a-ink2); }

/* KPI cards */
.admin-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.admin-kpi { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: 12px; padding: 18px; box-shadow: var(--a-shadow); display: flex; flex-direction: column; gap: 10px; }
.admin-kpi__top { display: flex; align-items: center; justify-content: space-between; }
.admin-kpi__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--a-ink3); }
.admin-kpi__ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--a-blue-tint); color: var(--a-blue); }
.admin-kpi__ic svg { width: 18px; height: 18px; }
.admin-kpi__num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-kpi__num small { font-size: 16px; font-weight: 600; color: var(--a-ink3); }
.admin-kpi__delta { font-size: 12.5px; color: var(--a-ink2); }
.admin-kpi__delta b { font-weight: 600; }
.admin-kpi__delta .up { color: var(--a-ok-t); }

/* Panel + table */
.admin-panel { background: var(--a-surface); border: 1px solid var(--a-border); border-radius: 12px; box-shadow: var(--a-shadow); overflow: hidden; }
.admin-panel__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; flex-wrap: wrap; }
.admin-panel__head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.admin-panel__count { font-size: 13px; color: var(--a-ink3); font-weight: 500; }
.admin-segmented { display: flex; background: var(--a-content); border: 1px solid var(--a-border); border-radius: 9px; padding: 3px; gap: 2px; margin-left: 8px; }
.admin-segmented button { border: 0; background: transparent; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--a-ink2); padding: 5px 12px; border-radius: 7px; transition: background .15s, color .15s; }
.admin-segmented button.on { background: var(--a-surface); color: var(--a-ink); box-shadow: var(--a-shadow); }
.admin-btn-primary { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: var(--a-blue); color: #fff; border: 0; cursor: pointer; text-decoration: none; font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 10px; box-shadow: 0 1px 2px rgb(152 99 78 / 35%); transition: background .15s ease, transform .05s ease; }
.admin-btn-primary:hover { background: var(--a-blue-hover); color: #fff; }
.admin-btn-primary:active { transform: translateY(1px); }
.admin-btn-primary svg { width: 17px; height: 17px; }

.admin-tablewrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin-table thead th { text-align: left; font-size: 13px; font-weight: 700; color: var(--a-ink2); padding: 12px 20px; background: #fafbfc; border-top: 1px solid var(--a-border); border-bottom: 1px solid var(--a-border); white-space: nowrap; }
.admin-table th.right, .admin-table td.right { text-align: right; }
.admin-table tbody td { padding: 15px 20px; border-bottom: 1px solid var(--a-border); font-size: 14px; vertical-align: middle; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr { transition: background .12s ease; }
.admin-table tbody tr:hover { background: #fafbfc; }
.admin-evname { font-weight: 600; color: var(--a-ink); }
.admin-evsub { font-size: 12.5px; color: var(--a-ink3); margin-top: 2px; }
.admin-table .muted { color: var(--a-ink2); }
.admin-num { font-variant-numeric: tabular-nums; }

.admin-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.admin-pill .pdot { width: 7px; height: 7px; border-radius: 50%; }
.admin-pill--published { background: var(--a-ok-bg); color: var(--a-ok-t); } .admin-pill--published .pdot { background: var(--a-ok-dot); }
.admin-pill--pending { background: var(--a-warn-bg); color: var(--a-warn-t); } .admin-pill--pending .pdot { background: var(--a-warn-dot); }
.admin-pill--draft { background: var(--a-draft-bg); color: var(--a-draft-t); } .admin-pill--draft .pdot { background: var(--a-draft-dot); }
.admin-pill--archived { background: var(--a-draft-bg); color: var(--a-draft-t); } .admin-pill--archived .pdot { background: var(--a-draft-dot); }

.admin-rowact { display: inline-flex; gap: 8px; justify-content: flex-end; }
.admin-ghost { font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--a-border-strong); background: var(--a-surface); color: var(--a-ink); transition: background .12s, border-color .12s; }
.admin-ghost:hover { background: var(--a-content); border-color: #c3c7cf; color: var(--a-ink); }
.admin-ghost--view { color: var(--a-blue); border-color: #e3cdbe; }
.admin-ghost--view:hover { background: var(--a-blue-tint); color: var(--a-blue); }

.admin-empty { padding: 44px 20px; text-align: center; color: var(--a-ink3); font-size: 14px; }
.admin-empty h2 { margin: 0 0 6px; font-size: 18px; color: var(--a-ink); }
.admin-empty p { margin: 0 auto 16px; max-width: 380px; }

.admin-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; padding-top: 4px; font-size: 13px; color: var(--a-ink2); }
.admin-pagination a { color: var(--a-blue); text-decoration: none; font-weight: 600; }

/* Let event-scoped legacy shells sit cleanly inside the admin content */
.admin-content .control-shell,
.admin-content .guest-manager-shell,
.admin-content .editor-shell { max-width: none; min-height: 0; margin: 0; padding: 0; }

/* Responsive Drawer Navigation and Overlay */
.admin-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.admin-sidebar-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.admin-sidebar-toggle {
  display: none !important;
}

@media (max-width: 900px) {
  .admin-sidebar-toggle {
    display: inline-flex !important;
  }
  .admin {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--a-sidebar, #111827);
    padding: 22px 16px;
    gap: 20px;
  }
  .admin-sidebar.is-open {
    transform: translateX(0);
  }
  .admin-sidefoot {
    display: block;
    margin-top: auto;
  }
  .admin-navlabel {
    display: block;
  }
  .admin-navgroup {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .admin-navitem.active::before {
    left: -16px;
  }
  .admin-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-topbar {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 560px) {
  .admin-search { display: none; }
  .admin-kpis { grid-template-columns: 1fr; }
  .admin-content, .admin-topbar { padding-left: 16px; padding-right: 16px; }
}

/* Custom styles for cards & subnav added for UI improvements */
.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  padding: 20px 0;
}

.admin-card {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 16px;
  box-shadow: var(--a-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgb(17 24 39 / 8%);
}

.admin-card__top {
  padding: 14px 20px;
  background: var(--a-content);
  border-bottom: 1px solid var(--a-border);
  border-top: 4px solid var(--theme-accent, var(--a-blue));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-card__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--a-ink2);
}

.admin-card__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.admin-card__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--a-ink);
  letter-spacing: -.01em;
}

.admin-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-card__meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--a-ink2);
}

.admin-card__meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--a-ink3);
  flex-shrink: 0;
}

.admin-card__progress {
  margin-top: auto;
  margin-bottom: 20px;
}

.admin-card__progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--a-ink2);
}

.admin-card__progress-label strong {
  font-weight: 600;
  color: var(--a-ink);
}

.admin-card__progress-bar {
  height: 6px;
  background: var(--a-border);
  border-radius: 3px;
  overflow: hidden;
}

.admin-card__progress-fill {
  height: 100%;
  background: var(--theme-accent, var(--a-blue));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.admin-card__footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--a-border);
}

.admin-card__footer a {
  text-align: center;
}

/* Sidebar subnavigation for event control center — nested tree under "Control". */
.admin-subnav {
  margin: 5px 0 6px 19px;
  padding-left: 13px;
  border-left: 1.5px solid rgb(255 255 255 / 9%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-navsubitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-radius: 7px;
  color: #8b95a5;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.admin-navsubitem svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .72;
  transition: opacity .15s ease, color .15s ease;
}

/* Connector tick that lights up when the item is active. */
.admin-navsubitem::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 1.5px;
  background: transparent;
  transition: background .15s ease, width .15s ease;
}

.admin-navsubitem:hover { background: rgb(255 255 255 / 5%); color: #d3d9e2; }
.admin-navsubitem:hover svg { opacity: 1; }

.admin-navsubitem.active { background: rgb(152 99 78 / 16%); color: #fff; font-weight: 600; }
.admin-navsubitem.active svg { color: #d9a88f; opacity: 1; }
.admin-navsubitem.active::before { background: #98634e; width: 8px; height: 2px; }

/* "Organización" style sub-section label inside the tree. */
.admin-subnav__divider {
  margin: 12px 0 4px;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #59636f;
}

/* Music button: playing state — gentle pulse so guests see the song is on. */
/* Music button: playing state — gentle pulse so guests see the song is on. */
.music-btn-fixed.is-playing .music-btn-fixed__icon { animation: music-pulse 1.6s ease-in-out infinite; }
@keyframes music-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--invite-accent) 45%, transparent); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px color-mix(in srgb, var(--invite-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .music-btn-fixed.is-playing .music-btn-fixed__icon { animation: none; }
}

/* ============================================================
   Premium Design Enhancements (Progressive Typography, Custom
   Scrollbars, Native Scroll reveals, and Slick Admin Elevations)
   ============================================================ */

/* 1. High-Legibility Typography Wrapping */
h1, h2, h3, h4, h5, h6, .hero-guest-card__name, #access-qr-title {
  text-wrap: balance;
}

p, li, .rsvp-intro, .hero-guest-card__passes, .rsvp-note {
  text-wrap: pretty;
}

/* 2. Custom Modern Scrollbar Design */
:root {
  --scrollbar-thumb: var(--brand, #98634e);
  --scrollbar-track: #f7f1ec;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

body:not(.invitation-page):not(.rsvp-page) {
  --scrollbar-thumb: var(--a-blue, #98634e);
  --scrollbar-track: var(--a-border, #e7e9ee);
}

@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 9999px;
  }
  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 9999px;
  }
}

/* 3. Native Scroll-Driven Reveal Animations (Progressive Enhancement) */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(32px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .reveal-on-scroll {
      animation: reveal-up auto cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 40%;
      /* Avoid conflicts with standard intersection observer triggers */
      transition: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}

/* 4. Elegant Elevations and Interactive Transitions for Admin Shell */
.admin-content article,
.admin-content .control-panel,
.admin-content .control-workspace-panel {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}

.admin-content article:hover,
.admin-content .control-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgb(17 24 39 / 8%), 0 8px 16px -8px rgb(17 24 39 / 6%);
  border-color: var(--a-border-strong) !important;
}

.admin-navitem {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, color 0.15s ease;
}

.admin-navitem:hover {
  transform: translateX(4px);
  background: var(--a-sidebar-2);
  color: #fff !important;
}

.admin-navitem.active {
  background: var(--a-sidebar-active) !important;
  color: #fff !important;
}

.control-shortcuts > a {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.control-shortcuts > a:hover {
  transform: translateX(6px);
  border-color: #cdb8ac !important;
  background: #fcf8f5 !important;
  box-shadow: 0 8px 16px -6px rgba(152, 99, 78, 0.08);
}

.admin .btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.admin .btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.06);
}

.admin .btn:active {
  transform: translateY(0);
}

/* 5. Smooth Focus Ring Transitions for Form Inputs */
.admin input:focus,
.admin select:focus,
.admin textarea:focus,
.admin-search:focus-within {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
  border-color: var(--a-blue) !important;
}

/* 6. Responsive Control Center Overrides */
@media (max-width: 560px) {
  .control-header {
    padding: 16px 20px !important;
    gap: 1rem !important;
    border-radius: 14px !important;
  }
  .control-header-tabs {
    gap: 8px !important;
    margin-top: 16px !important;
  }
  .control-tab-btn {
    padding: 6px 8px !important;
    font-size: 12.5px !important;
  }
  .arrival-row {
    flex-wrap: wrap;
    padding: 12px 14px !important;
  }
  .arrival-row__identity {
    width: 100%;
    flex: none !important;
  }
  .arrival-row > form, 
  .arrival-row > div {
    margin-left: 52px !important;
  }
}

/* 7. Segmented Tab Control and KPI Styling Improvements */
.control-header-tabs {
  background: #f1f5f9;
  padding: 4px;
  border-radius: 12px;
  display: inline-flex;
  gap: 4px;
  border: 1px solid #e2e8f0;
  width: fit-content;
  max-width: 100%;
}

.control-tab-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--a-ink2, #5b6472);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.control-tab-btn:hover {
  color: var(--a-ink, #111827);
}

.control-tab-btn.is-active,
.control-tab-btn.active {
  background: #fff !important;
  color: var(--a-blue, #98634e) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  font-weight: 600 !important;
  border-bottom: none !important;
}

/* KPI Customization */
.control-metrics article {
  border: 1px solid var(--a-border, #e7e9ee) !important;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 4%), 0 2px 4px -2px rgb(0 0 0 / 4%) !important;
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  padding: 22px !important;
}

.control-metrics article::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
}

.control-metrics article:nth-child(1)::before { background: var(--a-blue, #98634e); }
.control-metrics article:nth-child(2)::before { background: #d97706; }
.control-metrics article:nth-child(3)::before { background: #16a34a; }
.control-metrics article:nth-child(4)::before { background: #6366f1; }




/* ── Control · Pendientes + Presupuesto — polish ──────────────── */
/* Aligned, tabular figures read like real financial data. */
.tasks-kpi-card__value,
.budget-kpi-card__value,
.budget-kpi-card__sub,
.budget-table__amount,
.budget-table__head,
.budget-progress__labels { font-variant-numeric: tabular-nums; }

/* Budget KPI cards: a semantic top accent makes the three roles scannable. */
.budget-kpi-strip { gap: 1rem; }
.budget-kpi-card { position: relative; padding-top: 1.25rem; }
.budget-kpi-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 18px 18px 0 0; background: #c9cdd6; }
.budget-kpi-card--paid::before { background: #3a7054; }
.budget-kpi-card--pending::before { background: #d9a12b; }
.budget-kpi-card__value { font-size: 2rem; letter-spacing: -.01em; }

/* Budget table: right-aligned money, crisp header, gentle row lift. */
.budget-table__head { border-bottom: 1px solid #ece4de; padding-bottom: .55rem; }
.budget-table__head span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.budget-table__amount { text-align: right; }
.budget-table__amount--due { font-weight: 750; }
.budget-table__name a { display: inline-block; margin-top: .25rem; color: var(--brand); font-size: .56rem; font-weight: 750; text-decoration: none; }
.budget-table__name a:hover { text-decoration: underline; text-underline-offset: 2px; }
.budget-table__row { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.budget-table__row:hover { box-shadow: 0 6px 16px rgb(57 40 32 / 6%); transform: translateY(-1px); }

/* Tasks KPI numbers a touch tighter. */
.tasks-kpi-card__value { letter-spacing: -.01em; }

@media (max-width: 640px) {
  .budget-kpi-strip { grid-template-columns: 1fr; }
}

/* Task detail form: operational fields tucked into an optional expander. */
.task-detail-extra { margin-top: .35rem; }

/* Task detail form: divided into visible sections — all editable at once. */
.task-detail-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed #e7ddd6; }
.task-detail-block__label { display: block; margin-bottom: .7rem; color: #8a7d75; font-size: .6rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.task-detail-block__label em { color: #b0a49c; font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ── Task cards · priority accent + chip (scannable list) ── */
.event-task { position: relative; }
.event-task-card--high .event-task::before,
.event-task-card--urgent .event-task::before {
  content: ""; position: absolute; left: 0; top: 13px; bottom: 13px;
  width: 3px; border-radius: 0 3px 3px 0;
}
.event-task-card--high .event-task::before { background: #d29a4e; }
.event-task-card--urgent .event-task::before { background: #c0504a; }
.event-task-card--high .event-task,
.event-task-card--urgent .event-task { padding-left: 1.15rem; }
.event-task-card.is-completed .event-task::before { opacity: .3; }

/* Priority rendered as a scannable chip instead of loose colored text. */
.task-priority {
  display: inline-block; padding: .1rem .42rem; border-radius: 99px;
  font-size: .54rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #7a6e66; background: #f1ebe7; vertical-align: middle;
}
.task-priority--high { color: #8a5a22; background: #fbefd8; }
.task-priority--urgent { color: #a7433b; background: #fbe6e3; }

/* Linked task (#task-…) gets a warm highlight so it's easy to spot. */
.event-task-card:target .event-task { background: #fdf7f3; }

/* ════════════════════════════════════════════════════════════════
   Tasks list · Animista-style motion + fancy (organic) border-radius
   Inspiración: animista.net · 9elements fancy-border-radius
   ════════════════════════════════════════════════════════════════ */

/* Organic radius signature that morphs on interaction. */
.event-task {
  border-radius: 20px;
  transition:
    border-color .2s ease,
    box-shadow .3s cubic-bezier(.2,.8,.2,1),
    transform .3s cubic-bezier(.2,.8,.2,1),
    border-radius .4s cubic-bezier(.2,.8,.2,1);
}
.event-task:hover { transform: translateY(-3px); border-radius: 28px 16px 28px 16px; }
.event-task:has(.task-definition[open]) { border-radius: 24px 24px 24px 10px; transform: none; }

/* Toggle checkbox → soft organic blob with playful hover. */
.event-task > form:first-child button {
  border-radius: 44% 56% 56% 44% / 46% 46% 54% 54%;
  transition: transform .28s cubic-bezier(.2,.9,.3,1.3), background .2s ease, border-color .2s ease, color .2s ease;
}
.event-task > form:first-child button:hover { transform: scale(1.1) rotate(-5deg); }

/* KPI cards get the same organic hover morph. */
.tasks-kpi-card { border-radius: 20px; transition: box-shadow .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1), border-radius .4s cubic-bezier(.2,.8,.2,1); }
.tasks-kpi-card:hover { border-radius: 28px 16px 28px 16px; }
.tasks-kpi-card__accent { border-radius: 20px 0 0 20px; }

@media (prefers-reduced-motion: no-preference) {
  /* Staggered entrance for the task list (Animista "fade-in-up"). */
  @keyframes task-enter {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
  .event-task-list .event-task-card { animation: task-enter .55s cubic-bezier(.2,.75,.2,1) both; }
  .event-task-list .event-task-card:nth-child(1) { animation-delay: .04s; }
  .event-task-list .event-task-card:nth-child(2) { animation-delay: .10s; }
  .event-task-list .event-task-card:nth-child(3) { animation-delay: .16s; }
  .event-task-list .event-task-card:nth-child(4) { animation-delay: .22s; }
  .event-task-list .event-task-card:nth-child(5) { animation-delay: .28s; }
  .event-task-list .event-task-card:nth-child(6) { animation-delay: .34s; }
  .event-task-list .event-task-card:nth-child(7) { animation-delay: .40s; }
  .event-task-list .event-task-card:nth-child(n+8) { animation-delay: .46s; }

  /* KPI cards fade-in-up too. */
  @keyframes kpi-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .tasks-kpi-card { animation: kpi-enter .5s cubic-bezier(.2,.75,.2,1) both; }
  .tasks-kpi-card:nth-child(2) { animation-delay: .08s; }
  .tasks-kpi-card:nth-child(3) { animation-delay: .16s; }

  /* Priority bar grows from the top (Animista "scale-in-ver-top"). */
  @keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .event-task-card--high .event-task::before,
  .event-task-card--urgent .event-task::before { transform-origin: top center; animation: bar-grow .55s .3s cubic-bezier(.2,.85,.25,1) both; }

  /* Satisfying pop when a task is completed. */
  @keyframes check-pop { 0% { transform: scale(.4); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
  .event-task-card.is-completed .event-task > form:first-child button { animation: check-pop .4s cubic-bezier(.2,.9,.3,1.4) both; }
}

/* ── Cookie banner ─────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1000; width: min(680px, calc(100% - 32px));
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; background: #fffdfb; color: #3a302c;
  border: 1px solid #e6dcd4; border-radius: 16px;
  box-shadow: 0 16px 40px rgb(46 32 24 / 16%);
  animation: cookie-in .45s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cookie-in { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
.cookie-banner__text { margin: 0; flex: 1 1 300px; font-size: .82rem; line-height: 1.55; }
.cookie-banner__text a { color: var(--brand, #98634e); font-weight: 600; }
.cookie-banner__btn {
  flex: 0 0 auto; padding: 9px 18px; border: 0; border-radius: 10px; cursor: pointer;
  background: #443934; color: #fff; font-family: inherit; font-size: .82rem; font-weight: 600;
  transition: background .15s ease, transform .05s ease;
}
.cookie-banner__btn:hover { background: #2f2723; }
.cookie-banner__btn:active { transform: translateY(1px); }
/* Keep the guest-facing invitation experience chrome-less. */
.invitation-page .cookie-banner, .rsvp-page .cookie-banner { display: none; }
@media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } }

/* ── Legal documents (privacy / terms / cookies) ───────────────── */
.legal-doc { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 1.25rem 5rem; color: #3a302c; }
.legal-doc__notice { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2rem; padding: .85rem 1.1rem; background: #fbf3ea; border: 1px solid #ecdcc6; border-radius: 12px; color: #7a5a3a; font-size: .82rem; line-height: 1.5; }
.legal-doc__notice code { padding: 0 .2rem; background: #f0e3d3; border-radius: 4px; font-size: .9em; }
.legal-doc__head { margin-bottom: 2.5rem; }
.legal-doc__head .eyebrow { color: var(--brand, #98634e); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.legal-doc__head h1 { margin: .5rem 0 .4rem; font: 500 clamp(2rem, 5vw, 2.8rem) var(--serif, "Playfair Display", serif); letter-spacing: -.01em; }
.legal-doc__head p { margin: 0; color: #8a7c72; font-size: .85rem; }
.legal-doc section { margin-bottom: 1.9rem; }
.legal-doc h2 { margin: 0 0 .6rem; font: 500 1.3rem var(--serif, serif); }
.legal-doc p { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.7; }
.legal-doc ul { margin: 0 0 .7rem; padding-left: 1.2rem; }
.legal-doc li { margin-bottom: .4rem; font-size: .92rem; line-height: 1.6; }
.legal-doc a { color: var(--brand, #98634e); }
.legal-doc__tablewrap { overflow-x: auto; }
.legal-doc__table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .85rem; min-width: 460px; }
.legal-doc__table th, .legal-doc__table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #ede3da; }
.legal-doc__table th { color: #6a5a50; font-weight: 700; background: #faf5ef; }
.legal-doc__foot { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #ede3da; font-size: .85rem; font-weight: 600; }

/* ── Seating chart · print-ready PDF document ──────────────────── */
.seating-print-page .cookie-banner { display: none; }
.seatprint { --sp-accent: #98634e; --sp-ink: #3a302c; --sp-bg: #faf6f1; --sp-surface: #fff; --sp-heading: var(--serif, "Playfair Display", serif); min-height: 100vh; color: var(--sp-ink); background: var(--sp-bg); font-family: "DM Sans", sans-serif; }
.seatprint__bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .85rem 1.5rem; background: #fff; border-bottom: 1px solid #e6dcd4; }
.seatprint__bar a { color: var(--sp-ink); text-decoration: none; font-weight: 600; font-size: .85rem; }
.seatprint__bar > div { display: flex; align-items: center; gap: 1rem; }
.seatprint__bar > div span { color: #8a7c72; font-size: .8rem; }
.seatprint__bar button { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.15rem; border: 0; border-radius: 10px; background: var(--sp-accent); color: #fff; font: 600 .85rem "DM Sans", sans-serif; cursor: pointer; transition: filter .15s ease; }
.seatprint__bar button:hover { filter: brightness(.92); }
.seatprint__doc { max-width: 900px; margin: 0 auto; padding: 2.75rem 1.5rem 4rem; }
.seatprint__head { text-align: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid color-mix(in srgb, var(--sp-accent) 30%, transparent); }
.seatprint__kicker { color: var(--sp-accent); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.seatprint__head h1 { margin: .5rem 0 .35rem; font: italic 400 clamp(2.2rem, 6vw, 3.2rem)/1 var(--sp-heading); color: var(--sp-ink); }
.seatprint__head p { margin: 0; color: #7a6c62; font-size: .95rem; text-transform: capitalize; }
.seatprint__stats { display: inline-block; margin-top: .7rem; padding: .35rem .95rem; background: color-mix(in srgb, var(--sp-accent) 10%, #fff); border-radius: 99px; color: var(--sp-accent); font-size: .74rem; font-weight: 700; }
.seatprint__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.seatprint__table { background: var(--sp-surface); border: 1px solid #e8ded4; border-radius: 14px; overflow: hidden; break-inside: avoid; }
.seatprint__table-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: color-mix(in srgb, var(--sp-accent) 12%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--sp-accent) 18%, transparent); }
.seatprint__table-no { font: 500 1.15rem var(--sp-heading); color: color-mix(in srgb, var(--sp-accent) 82%, #2a2a2a); }
.seatprint__table-count { min-width: 22px; height: 22px; padding: 0 5px; display: grid; place-items: center; background: var(--sp-accent); color: #fff; border-radius: 99px; font-size: .7rem; font-weight: 700; }
.seatprint__guests { margin: 0; padding: .55rem 1rem .9rem 2rem; }
.seatprint__guests li { margin: .28rem 0; font-size: .85rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.seatprint__gpasses { color: var(--sp-accent); font-weight: 700; font-size: .72rem; }
.seatprint__unassigned { margin-top: 1.5rem; padding: 1rem 1.25rem; background: #fbf3ea; border: 1px dashed #e2cdb3; border-radius: 12px; break-inside: avoid; }
.seatprint__unassigned h2 { margin: 0 0 .5rem; font: 500 1.05rem var(--sp-heading); }
.seatprint__unassigned ul { margin: 0; padding-left: 1.2rem; columns: 2; }
.seatprint__unassigned li { font-size: .82rem; margin: .15rem 0; }
.seatprint__empty { padding: 2.5rem; text-align: center; color: #8a7c72; font-size: .9rem; }
.seatprint__foot { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid #e8ded4; text-align: center; color: #a2948a; font-size: .75rem; }

@media print {
  @page { size: A4; margin: 1.4cm; }
  .no-print { display: none !important; }
  .seatprint { background: #fff !important; }
  .seatprint__doc { max-width: none; margin: 0; padding: 0; }
  .seatprint, .seatprint * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}