/* ================================================================ */
/* NULOEVENTS — WEDDING PORTAL                                        */
/* Emily & Cam · August 14, 2027                                      */
/* ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ================================================================ */
/* ROOT VARIABLES                                                     */
/* ================================================================ */

:root {

  /* ── Surfaces ─────────────────────────────────────────── */
  --colorBg:           #FAF8F4;
  --colorSurface:      #FFFFFF;
  --colorSidebarBg:    #F5EFE7;
  --colorSurfaceAlt:   #F7F3EE;

  /* ── Borders ──────────────────────────────────────────── */
  --colorBorder:       #E8DECE;
  --colorBorderLight:  #F0E8DC;
  --colorBorderStrong: #D4C4B0;

  /* ── Brand browns ─────────────────────────────────────── */
  --colorBrown:        #7A5C40;
  --colorBrownDark:    #4A3728;
  --colorBrownLight:   #B89A76;
  --colorBrownMid:     #8B6B4E;

  /* ── Gold accent ──────────────────────────────────────── */
  --colorGold:         #C9A96E;
  --colorGoldLight:    #E8D5B0;
  --colorGoldSoft:     #FBF4E8;

  /* ── Text ─────────────────────────────────────────────── */
  --colorTextPrimary:  #2C2418;
  --colorTextSecondary:#6B5544;
  --colorTextMuted:    #A8927E;

  /* ── Status colors ────────────────────────────────────── */
  --colorAttending:    #4A7A4C;
  --colorAttendingBg:  #EDF5EE;
  --colorAttendingBdr: #C3DCC4;

  --colorDeclined:     #A05050;
  --colorDeclinedBg:   #FDF0F0;
  --colorDeclinedBdr:  #E8C3C3;

  --colorPending:      #8B6430;
  --colorPendingBg:    #FDF6E8;
  --colorPendingBdr:   #E8D8B0;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadowCard:        0 2px 14px rgba(92, 64, 40, 0.07), 0 1px 4px rgba(92, 64, 40, 0.04);
  --shadowCardHover:   0 6px 24px rgba(92, 64, 40, 0.12), 0 2px 8px rgba(92, 64, 40, 0.06);
  --shadowHeader:      0 1px 8px rgba(92, 64, 40, 0.06);

  /* ── Typography ───────────────────────────────────────── */
  --fontHeading:       'Playfair Display', Georgia, 'Times New Roman', serif;
  --fontBody:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Layout ───────────────────────────────────────────── */
  --sidebarWidth:      228px;
  --headerHeight:      108px;

  /* ── Radius ───────────────────────────────────────────── */
  --radiusSm:          8px;
  --radiusMd:          12px;
  --radiusLg:          16px;
  --radiusXl:          24px;

  /* ── Transitions ──────────────────────────────────────── */
  --transitionFast:    150ms ease;
  --transitionMed:     250ms ease;

}

/* ================================================================ */
/* RESET & BASE                                                       */
/* ================================================================ */

*,
*::before,
*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

html {

  font-size: 16px;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

body {

  font-family: var(--fontBody);

  background-color: var(--colorBg);

  color: var(--colorTextPrimary);

  min-height: 100vh;

}

a {

  color: inherit;

  text-decoration: none;

}

button {

  font-family: inherit;

  cursor: pointer;

}

input,
select,
textarea {

  font-family: inherit;

}

/* ================================================================ */
/* APP HEADER                                                         */
/* ================================================================ */

.appHeader {

  position: sticky;

  top: 0;

  z-index: 60;

  background-color: var(--colorSurface);

  border-bottom: 1px solid var(--colorBorder);

  box-shadow: var(--shadowHeader);

  text-align: center;

  padding: 20px 32px 18px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0;

}

.headerBrand {

  font-size: 0.65rem;

  font-family: var(--fontBody);

  font-weight: 600;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: var(--colorGold);

  margin-bottom: 6px;

}

.headerCouple {

  font-family: var(--fontHeading);

  font-style: italic;

  font-size: 1.9rem;

  font-weight: 500;

  color: var(--colorBrownDark);

  line-height: 1;

  letter-spacing: 0.01em;

}

.headerOrnament {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  margin: 6px 0 4px;

}

.headerOrnamentLine {

  width: 40px;

  height: 1px;

  background-color: var(--colorGold);

  opacity: 0.65;

}

.headerOrnamentDiamond {

  width: 6px;

  height: 6px;

  background-color: var(--colorGold);

  transform: rotate(45deg);

  flex-shrink: 0;

  opacity: 0.80;

}

.headerDate {

  font-size: 0.67rem;

  font-family: var(--fontBody);

  font-weight: 500;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--colorTextMuted);

}

/* Mobile menu toggle */
.menuToggle {

  display: none;

  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  flex-direction: column;

  gap: 5px;

  background: none;

  border: none;

  padding: 6px;

  cursor: pointer;

  outline: none;

  -webkit-tap-highlight-color: transparent;

}

.menuToggle span {

  display: block;

  width: 22px;

  height: 1.5px;

  background-color: var(--colorBrownDark);

  border-radius: 2px;

  transition: transform var(--transitionFast), opacity var(--transitionFast);

}

.menuToggle.menuOpen span:nth-child(1) {

  transform: translateY(6.5px) rotate(45deg);

}

.menuToggle.menuOpen span:nth-child(2) {

  opacity: 0;

}

.menuToggle.menuOpen span:nth-child(3) {

  transform: translateY(-6.5px) rotate(-45deg);

}

/* ================================================================ */
/* APP LAYOUT                                                         */
/* ================================================================ */

.appLayout {

  display: grid;

  grid-template-columns: var(--sidebarWidth) 1fr;

  min-height: calc(100vh - var(--headerHeight));

}

/* ================================================================ */
/* SIDEBAR                                                            */
/* ================================================================ */

.appSidebar {

  background-color: var(--colorSidebarBg);

  border-right: 1px solid var(--colorBorder);

  padding: 32px 0;

  display: flex;

  flex-direction: column;

  gap: 4px;

  position: sticky;

  top: var(--headerHeight);

  height: calc(100vh - var(--headerHeight));

  overflow-y: auto;

}

.appSidebar::-webkit-scrollbar {

  width: 0;

}

.sidebarSection {

  padding: 0 20px;

  margin-bottom: 6px;

}

.sidebarSectionLabel {

  font-size: 0.60rem;

  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--colorTextMuted);

  padding: 0 12px;

  margin-bottom: 6px;

  display: block;

}

/* ================================================================ */
/* SIDEBAR NAVIGATION                                                 */
/* ================================================================ */

.sidebarNav {

  padding: 0 16px;

  display: flex;

  flex-direction: column;

  gap: 2px;

  flex: 1;

}

.navItem {

  display: block;

  width: 100%;

  padding: 10px 14px;

  font-size: 0.88rem;

  font-weight: 400;

  color: var(--colorTextSecondary);

  border-radius: var(--radiusMd);

  border: 1px solid transparent;

  border-left: 2px solid transparent;

  cursor: pointer;

  background: none;

  text-align: left;

  transition: color var(--transitionFast), background-color var(--transitionFast), border-color var(--transitionFast);

  letter-spacing: 0.01em;

}

.navItem:hover {

  color: var(--colorBrown);

  background-color: rgba(201, 169, 110, 0.08);

}

.navItem.navItemActive {

  color: var(--colorBrownDark);

  font-weight: 600;

  background-color: rgba(201, 169, 110, 0.10);

  border-left-color: var(--colorGold);

}

.sidebarFooter {

  padding: 20px 28px 0;

  border-top: 1px solid var(--colorBorder);

  margin-top: auto;

}

.sidebarFooterText {

  font-size: 0.68rem;

  color: var(--colorTextMuted);

  letter-spacing: 0.05em;

}

/* ================================================================ */
/* MAIN CONTENT                                                       */
/* ================================================================ */

.appMain {

  padding: 40px 44px 60px;

  min-width: 0;

}

/* ================================================================ */
/* PAGE SECTIONS                                                      */
/* ================================================================ */

.page {

  display: none;

}

.page.pageActive {

  display: block;

}

.pageHeader {

  margin-bottom: 28px;

}

.pageTitle {

  font-family: var(--fontHeading);

  font-size: 1.7rem;

  font-weight: 600;

  color: var(--colorBrownDark);

  letter-spacing: -0.01em;

  line-height: 1.2;

}

.pageSubtitle {

  font-size: 0.88rem;

  color: var(--colorTextSecondary);

  margin-top: 5px;

}

.pageDivider {

  width: 80px;

  height: 1px;

  background: linear-gradient(to right, var(--colorGold), transparent);

  margin: 10px 0 0;

}

/* ================================================================ */
/* DASHBOARD — STAT CARDS                                             */
/* ================================================================ */

.statsGrid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin-bottom: 22px;

}

.statCard {

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusLg);

  padding: 28px 24px 24px;

  text-align: center;

  box-shadow: var(--shadowCard);

  transition: transform var(--transitionFast), box-shadow var(--transitionFast);

  cursor: default;

}

.statCard:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadowCardHover);

}

.statCardAccentTop {

  width: 32px;

  height: 2px;

  margin: 0 auto 16px;

  border-radius: 2px;

}

.statCardInvited    .statCardAccentTop { background-color: var(--colorBrownLight); }
.statCardAttending  .statCardAccentTop { background-color: var(--colorAttending); }
.statCardDeclined   .statCardAccentTop { background-color: var(--colorDeclined); }
.statCardAwaiting   .statCardAccentTop { background-color: var(--colorGold); }

.statNumber {

  font-family: var(--fontHeading);

  font-size: 2.8rem;

  font-weight: 600;

  line-height: 1;

  letter-spacing: -0.02em;

  margin-bottom: 8px;

}

.statCardInvited   .statNumber { color: var(--colorBrownDark); }
.statCardAttending .statNumber { color: var(--colorAttending); }
.statCardDeclined  .statNumber { color: var(--colorDeclined); }
.statCardAwaiting  .statNumber { color: var(--colorPending); }

.statLabel {

  font-size: 0.68rem;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--colorTextMuted);

}

/* ── Unavailable stat state ── */

.statCardInvited  .statNumberUnavailable,
.statCardAwaiting .statNumberUnavailable {

  color: var(--colorTextMuted);

}

.statLabelRow {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

}

.statInfoIcon {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 18px;

  height: 18px;

  color: var(--colorTextMuted);

  cursor: help;

  border-radius: 50%;

  flex-shrink: 0;

  transition: color var(--transitionFast), background-color var(--transitionFast);

}

.statInfoIcon:hover,
.statInfoIcon:focus {

  color: var(--colorGold);

  background-color: rgba(201, 169, 110, 0.10);

  outline: none;

}

.statInfoTooltip {

  position: absolute;

  bottom: calc(100% + 8px);

  left: 50%;

  transform: translateX(-50%);

  background-color: var(--colorBrownDark);

  color: #FFFFFF;

  font-family: var(--fontBody);

  font-size: 0.72rem;

  font-weight: 400;

  line-height: 1.5;

  letter-spacing: 0.01em;

  text-transform: none;

  white-space: normal;

  width: 210px;

  padding: 9px 12px;

  border-radius: var(--radiusSm);

  box-shadow: 0 4px 16px rgba(44, 36, 24, 0.18);

  pointer-events: none;

  visibility: hidden;

  opacity: 0;

  transition: opacity var(--transitionFast);

  z-index: 10;

}

.statInfoTooltip::after {

  content: '';

  position: absolute;

  top: 100%;

  left: 50%;

  transform: translateX(-50%);

  border: 5px solid transparent;

  border-top-color: var(--colorBrownDark);

}

.statInfoIcon:hover .statInfoTooltip,
.statInfoIcon:focus .statInfoTooltip {

  visibility: visible;

  opacity: 1;

}

/* ================================================================ */
/* DASHBOARD — COUNTDOWN CARD                                         */
/* ================================================================ */

.countdownCard {

  background: linear-gradient(135deg, #FAF3E8 0%, #F5EBDA 100%);

  border: 1px solid var(--colorGoldLight);

  border-radius: var(--radiusLg);

  padding: 40px 48px;

  text-align: center;

  position: relative;

  overflow: hidden;

  box-shadow: var(--shadowCard);

  margin-bottom: 22px;

}

.countdownCard::before {

  content: '';

  position: absolute;

  top: -60px;

  right: -60px;

  width: 220px;

  height: 220px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(201, 169, 110, 0.10) 0%, transparent 70%);

  pointer-events: none;

}

.countdownLabel {

  font-size: 0.67rem;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--colorGold);

  margin-bottom: 10px;

}

.countdownNumber {

  font-family: var(--fontHeading);

  font-size: 5rem;

  font-weight: 700;

  line-height: 1;

  color: var(--colorBrownDark);

  letter-spacing: -0.04em;

}

.countdownUnit {

  font-family: var(--fontHeading);

  font-size: 1.4rem;

  font-weight: 400;

  font-style: italic;

  color: var(--colorBrown);

  margin: 6px 0 14px;

}

.countdownDate {

  font-size: 0.68rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--colorTextMuted);

}

/* ================================================================ */
/* DASHBOARD — QUICK LINKS                                            */
/* ================================================================ */

.quickLinksGrid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

}

.quickLinkCard {

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusLg);

  padding: 22px 20px;

  cursor: pointer;

  transition: border-color var(--transitionFast), background-color var(--transitionFast), transform var(--transitionFast);

  box-shadow: var(--shadowCard);

}

.quickLinkCard:hover {

  border-color: var(--colorGold);

  background-color: var(--colorGoldSoft);

  transform: translateY(-1px);

}

.quickLinkTitle {

  font-family: var(--fontHeading);

  font-size: 1rem;

  font-weight: 500;

  color: var(--colorBrownDark);

  margin-bottom: 4px;

}

.quickLinkSub {

  font-size: 0.78rem;

  color: var(--colorTextMuted);

}

/* ================================================================ */
/* GUESTS PAGE                                                        */
/* ================================================================ */

.guestToolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-bottom: 20px;

  flex-wrap: wrap;

}

.searchBar {

  display: flex;

  align-items: center;

  gap: 10px;

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusMd);

  padding: 10px 16px;

  flex: 1;

  max-width: 380px;

  box-shadow: var(--shadowCard);

  transition: border-color var(--transitionFast), box-shadow var(--transitionFast);

}

.searchBar:focus-within {

  border-color: var(--colorGold);

  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.14);

}

.searchIcon {

  color: var(--colorTextMuted);

  flex-shrink: 0;

  font-size: 14px;

}

.searchInput {

  flex: 1;

  border: none;

  background: transparent;

  font-size: 0.875rem;

  color: var(--colorTextPrimary);

  outline: none;

}

.searchInput::placeholder {

  color: var(--colorTextMuted);

}

.guestCount {

  font-size: 0.8rem;

  color: var(--colorTextSecondary);

  font-weight: 500;

  white-space: nowrap;

}

.guestTableWrap {

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusLg);

  overflow: hidden;

  box-shadow: var(--shadowCard);

}

.guestTableScroll {

  overflow-x: auto;

}

.guestTable {

  width: 100%;

  border-collapse: collapse;

  min-width: 580px;

}

.guestTable thead th {

  text-align: left;

  padding: 14px 18px;

  font-size: 0.65rem;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--colorTextMuted);

  border-bottom: 1px solid var(--colorBorder);

  background-color: var(--colorSurfaceAlt);

  white-space: nowrap;

}

.guestTable tbody td {

  padding: 14px 18px;

  font-size: 0.875rem;

  color: var(--colorTextPrimary);

  border-bottom: 1px solid var(--colorBorderLight);

  vertical-align: middle;

}

.guestTable tbody tr:last-child td {

  border-bottom: none;

}

.guestTable tbody tr {

  transition: background-color var(--transitionFast);

}

.guestTable tbody tr:hover td {

  background-color: #FAF6F0;

}

.guestName {

  font-weight: 500;

}

.guestPhone,
.guestAddress {

  color: var(--colorTextSecondary);

  font-size: 0.84rem;

}

/* ================================================================ */
/* STATUS BADGES                                                      */
/* ================================================================ */

.statusBadge {

  display: inline-flex;

  align-items: center;

  padding: 3px 12px;

  border-radius: 999px;

  font-size: 0.70rem;

  font-weight: 600;

  letter-spacing: 0.04em;

  white-space: nowrap;

  border: 1px solid transparent;

}

.badgeAttending {

  background-color: var(--colorAttendingBg);

  color: var(--colorAttending);

  border-color: var(--colorAttendingBdr);

}

.badgeDeclined {

  background-color: var(--colorDeclinedBg);

  color: var(--colorDeclined);

  border-color: var(--colorDeclinedBdr);

}

.badgePending {

  background-color: var(--colorPendingBg);

  color: var(--colorPending);

  border-color: var(--colorPendingBdr);

}

/* ================================================================ */
/* SONGS PAGE                                                         */
/* ================================================================ */

.songsGrid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

}

.songCard {

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusLg);

  padding: 20px 22px;

  display: flex;

  gap: 16px;

  align-items: flex-start;

  box-shadow: var(--shadowCard);

  transition: transform var(--transitionFast), border-color var(--transitionFast);

}

.songCard:hover {

  transform: translateY(-1px);

  border-color: var(--colorBorderStrong);

}

.songIconWrap {

  width: 44px;

  height: 44px;

  border-radius: 10px;

  background-color: #F5EBE0;

  border: 1px solid var(--colorBorderLight);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 1.1rem;

}

.songMeta {

  flex: 1;

  min-width: 0;

}

.songTitle {

  font-family: var(--fontHeading);

  font-size: 0.98rem;

  font-weight: 500;

  color: var(--colorBrownDark);

  margin-bottom: 3px;

  line-height: 1.3;

}

.songArtist {

  font-size: 0.82rem;

  color: var(--colorTextSecondary);

  margin-bottom: 6px;

}

.songRequester {

  font-size: 0.72rem;

  color: var(--colorTextMuted);

  letter-spacing: 0.02em;

}

.songRequesterName {

  font-weight: 500;

  color: var(--colorTextSecondary);

}

/* ================================================================ */
/* TIMELINE PAGE                                                      */
/* ================================================================ */

.timelineWrap {

  position: relative;

  padding-left: 44px;

}

.timelineWrap::before {

  content: '';

  position: absolute;

  left: 14px;

  top: 8px;

  bottom: 24px;

  width: 1px;

  background: linear-gradient(to bottom, var(--colorGold), rgba(201, 169, 110, 0.20));

}

.timelineItem {

  position: relative;

  margin-bottom: 28px;

}

.timelineItem:last-child {

  margin-bottom: 0;

}

/* Standard dot connector */
.timelineItem::before {

  content: '';

  position: absolute;

  left: -30px;

  top: 12px;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background-color: var(--colorGoldLight);

  border: 2px solid var(--colorGold);

  box-shadow: 0 0 0 3px var(--colorBg);

}

/* Wedding day connector — special */
.timelineItemWedding::before {

  background-color: var(--colorGold);

  box-shadow: 0 0 0 3px var(--colorBg), 0 0 0 5px rgba(201, 169, 110, 0.25);

  width: 14px;

  height: 14px;

  left: -31px;

  top: 11px;

}

.timelineCard {

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusLg);

  padding: 20px 24px;

  box-shadow: var(--shadowCard);

  transition: border-color var(--transitionFast);

}

.timelineCard:hover {

  border-color: var(--colorGold);

}

.timelineItemWedding .timelineCard {

  background: linear-gradient(135deg, #FAF3E8 0%, #F5EBDA 100%);

  border-color: var(--colorGoldLight);

}

.timelineDate {

  font-size: 0.67rem;

  font-weight: 600;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--colorGold);

  margin-bottom: 4px;

}

.timelineEventTitle {

  font-family: var(--fontHeading);

  font-size: 1.05rem;

  font-weight: 500;

  color: var(--colorBrownDark);

  margin-bottom: 6px;

}

.timelineItemWedding .timelineEventTitle {

  font-size: 1.15rem;

  font-weight: 600;

}

.timelineDesc {

  font-size: 0.855rem;

  color: var(--colorTextSecondary);

  line-height: 1.55;

}

/* ================================================================ */
/* SETTINGS PAGE                                                      */
/* ================================================================ */

.settingsLayout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  align-items: start;

}

.settingsCard {

  background-color: var(--colorSurface);

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusLg);

  padding: 32px;

  box-shadow: var(--shadowCard);

}

.settingsCardTitle {

  font-family: var(--fontHeading);

  font-size: 1.05rem;

  font-weight: 500;

  color: var(--colorBrownDark);

  margin-bottom: 20px;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--colorBorder);

}

.settingsField {

  margin-bottom: 18px;

}

.settingsLabel {

  display: block;

  font-size: 0.68rem;

  font-weight: 600;

  letter-spacing: 0.10em;

  text-transform: uppercase;

  color: var(--colorTextMuted);

  margin-bottom: 8px;

}

.settingsInput {

  width: 100%;

  padding: 11px 14px;

  border: 1px solid var(--colorBorder);

  border-radius: var(--radiusMd);

  background-color: var(--colorBg);

  color: var(--colorTextPrimary);

  font-size: 0.9rem;

  transition: border-color var(--transitionFast), box-shadow var(--transitionFast);

  outline: none;

}

.settingsInput:focus {

  border-color: var(--colorGold);

  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.14);

}

.settingsInput::placeholder {

  color: var(--colorTextMuted);

}

.themeColorGrid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 10px;

  margin-top: 4px;

}

.themeColorSwatch {

  height: 36px;

  border-radius: 8px;

  cursor: pointer;

  border: 2px solid transparent;

  transition: transform var(--transitionFast), border-color var(--transitionFast);

}

.themeColorSwatch:hover {

  transform: scale(1.08);

}

.themeColorSwatch.swatchActive {

  border-color: var(--colorBrownDark);

  box-shadow: 0 0 0 2px #FFFFFF;

}

/* ================================================================ */
/* SUPPORT PAGE                                                        */
/* ================================================================ */

.supportLayout {

  max-width: 600px;

}

.supportSelect {

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A8927E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 14px center;

  padding-right: 36px;

}

.supportTextarea {

  resize: vertical;

  min-height: 120px;

  line-height: 1.6;

}

.supportFeedback {

  margin-top: 18px;

  font-size: 0.875rem;

  line-height: 1.55;

  border-radius: var(--radiusMd);

  padding: 13px 16px;

  display: none;

}

.supportFeedback.feedbackVisible {

  display: block;

}

.supportFeedback.feedbackSuccess {

  background-color: var(--colorAttendingBg);

  color: var(--colorAttending);

  border: 1px solid var(--colorAttendingBdr);

}

.supportFeedback.feedbackError {

  background-color: var(--colorDeclinedBg);

  color: var(--colorDeclined);

  border: 1px solid var(--colorDeclinedBdr);

}

/* ================================================================ */
/* BUTTONS                                                            */
/* ================================================================ */

.btnPrimary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 11px 26px;

  background-color: var(--colorBrown);

  color: #FFFFFF;

  border: none;

  border-radius: var(--radiusMd);

  font-size: 0.875rem;

  font-weight: 500;

  letter-spacing: 0.02em;

  cursor: pointer;

  font-family: inherit;

  transition: background-color var(--transitionFast), box-shadow var(--transitionFast), transform var(--transitionFast);

  box-shadow: 0 2px 8px rgba(122, 92, 64, 0.28);

}

.btnPrimary:hover {

  background-color: var(--colorBrownDark);

  box-shadow: 0 4px 14px rgba(74, 55, 40, 0.32);

  transform: translateY(-1px);

}

.btnPrimary:active {

  transform: translateY(0);

}

.btnSecondary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 22px;

  background-color: transparent;

  color: var(--colorBrown);

  border: 1px solid var(--colorBorderStrong);

  border-radius: var(--radiusMd);

  font-size: 0.875rem;

  font-weight: 500;

  cursor: pointer;

  font-family: inherit;

  transition: background-color var(--transitionFast), border-color var(--transitionFast);

}

.btnSecondary:hover {

  background-color: var(--colorGoldSoft);

  border-color: var(--colorGold);

}

/* ================================================================ */
/* MOBILE OVERLAY                                                     */
/* ================================================================ */

.sidebarOverlay {

  display: none;

  position: fixed;

  inset: 0;

  background-color: rgba(44, 36, 24, 0.40);

  z-index: 55;

  backdrop-filter: blur(2px);

}

.sidebarOverlay.overlayVisible {

  display: block;

}

/* ================================================================ */
/* EMPTY / PLACEHOLDER STATES                                         */
/* ================================================================ */

.emptyState {

  text-align: center;

  padding: 60px 32px;

}

.emptyStateIcon {

  font-size: 2rem;

  margin-bottom: 14px;

  opacity: 0.5;

}

.emptyStateText {

  font-family: var(--fontHeading);

  font-style: italic;

  font-size: 1rem;

  color: var(--colorTextMuted);

}

/* ================================================================ */
/* RESPONSIVE — TABLET (≤ 1100px)                                    */
/* ================================================================ */

@media (max-width: 1100px) {

  .statsGrid {

    grid-template-columns: repeat(2, 1fr);

  }

  .quickLinksGrid {

    grid-template-columns: repeat(2, 1fr);

  }

  .settingsLayout {

    grid-template-columns: 1fr;

  }

  .songsGrid {

    grid-template-columns: 1fr;

  }

  .appMain {

    padding: 28px 28px 48px;

  }

}

/* ================================================================ */
/* RESPONSIVE — MOBILE (≤ 768px)                                     */
/* ================================================================ */

@media (max-width: 768px) {

  :root {

    --sidebarWidth:  0px;

    --headerHeight:  100px;

  }

  .appLayout {

    grid-template-columns: 1fr;

  }

  .appSidebar {

    position: fixed;

    top: var(--headerHeight);

    left: 0;

    width: 260px;

    height: calc(100vh - var(--headerHeight));

    transform: translateX(-100%);

    z-index: 58;

    transition: transform var(--transitionMed);

    background-color: var(--colorSurface);

  }

  .appSidebar.sidebarOpen {

    transform: translateX(0);

  }

  .sidebarOverlay {

    top: var(--headerHeight);

  }

  .menuToggle {

    display: flex;

  }

  .statsGrid {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }

  .countdownCard {

    padding: 28px 24px;

  }

  .countdownNumber {

    font-size: 3.6rem;

  }

  .quickLinksGrid {

    grid-template-columns: 1fr;

  }

  .guestToolbar {

    flex-direction: column;

    align-items: flex-start;

  }

  .searchBar {

    max-width: 100%;

    width: 100%;

  }

  .songsGrid {

    grid-template-columns: 1fr;

  }

  .settingsLayout {

    grid-template-columns: 1fr;

  }

  .pageTitle {

    font-size: 1.45rem;

  }

  .appMain {

    padding: 24px 18px 48px;

  }

  .headerCouple {

    font-size: 1.55rem;

  }

}

@media (max-width: 480px) {

  .statsGrid {

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }

  .statCard {

    padding: 20px 16px 18px;

  }

  .statNumber {

    font-size: 2.2rem;

  }

}