/* ===========================================================
   Vela — Event Planner

   Three palette generations live here:

   :root  — Blue & Gold (the original warm-editorial palette).
            Acts as a complete fallback so any class can partial-override.
   body.theme-onyx-champagne  — THE NEW DEFAULT. Dark canvas, warm-charcoal
            cards, champagne accents. Set by applyTheme() when
            state.settings.theme === 'default'.
   body.theme-blue-gold  — explicit return to the warm-editorial original
            (handy when other variants are layered on top).
   body.theme-navy/gold/cream  — variations on the warm-editorial base.
            applyTheme() layers theme-blue-gold first for these so the
            partial overrides land on the expected baseline.

   Variable contract:
     --page-bg     canvas color behind everything
     --cream       LIGHT foreground (text on dark surfaces, hover overlays)
     --cream-soft  panel / card background
     --cream-strong slightly stronger panel accent
     --gold        primary brand ACCENT (small splashes — buttons, pills)
     --mustard     deeper accent (used in gradients with --gold)
     --sky         neutral muted (tags, secondary chrome)
     --navy        primary brand CHROME bg (sidebar, hero, primary button)
     --navy-deep   deeper chrome (paired with --navy in gradients)
     --navy-ink    deepest TEXT color (semantic: "the color of ink on paper")
                   — light in dark mode (ink on dark paper), dark in light.
     --white       always pure white
   =========================================================== */
:root{
  --page-bg:      #EFE7DA;
  --cream:        #EFE7DA;
  --cream-soft:   #F7F2E9;
  --cream-strong: #E5DAC6;
  --gold:         #F0CE6A;
  --gold-soft:    #F7DF94;
  --mustard:      #D8A748;
  --mustard-deep: #B8862E;
  --sky:          #B5CFE3;
  --sky-soft:     #DCEAF4;
  --navy:         #2F4868;
  --navy-deep:    #1F3350;
  --navy-ink:     #14233A;
  --white:        #FFFFFF;
  /* --surface is "the bg of a card/panel/dropdown" — distinct from
     --white because in dark mode the surface inverts to charcoal while
     true-white (for things like sidebar text on dark chrome) stays
     white. Sweep target: any rule that paints a card/panel/dropdown
     should use var(--surface), not var(--white). */
  --surface:      #FFFFFF;
  /* RGB triplets — referenced by rgba() in gradients/shadows/borders
     so they track theme switches. Keep in sync with the corresponding
     hex vars above. */
  --accent-rgb:      240, 206, 106;   /* --gold */
  --accent-deep-rgb: 216, 167, 72;    /* --mustard */
  --brand-rgb:       47, 72, 104;     /* --navy */
  --brand-deep-rgb:  31, 51, 80;      /* --navy-deep */
  --ink-rgb:         20, 35, 58;      /* --navy-ink */
  --sky-rgb:         181, 207, 227;   /* --sky */
  --shadow-sm: 0 1px 2px rgba(var(--brand-deep-rgb), 0.08), 0 1px 3px rgba(var(--brand-deep-rgb), 0.06);
  --shadow-md: 0 4px 14px rgba(var(--brand-deep-rgb), 0.10), 0 2px 6px rgba(var(--brand-deep-rgb), 0.06);
  --shadow-lg: 0 20px 40px rgba(var(--brand-deep-rgb), 0.15);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sidebar-w: 260px;
}

/* ---- Onyx & Champagne (DEFAULT — Dark Mode Luxe) -------------
   Restrained luxury: near-black canvas, warm charcoal cards, soft
   champagne accents. --navy-ink inverts to a light cream because in
   dark mode the "ink" is the light text written on dark paper. The
   sweep `color: var(--navy-ink)` → `color: var(--navy-ink)` (handled
   below in this same file) ensures every text-color use respects this. */
body.theme-onyx-champagne{
  --page-bg:      #1a1820;
  --cream:        #ede4d3;
  --cream-soft:   #2b252e;
  --cream-strong: #1f1c20;
  --gold:         #d4b483;
  --gold-soft:    #e0c69e;
  --mustard:      #b89a6e;
  --mustard-deep: #8a6f4a;
  --sky:          #9a9088;
  --sky-soft:     #3a3438;
  --navy:         #2b252e;       /* warm charcoal — chrome bg */
  --navy-deep:    #1f1c20;       /* deeper charcoal */
  --navy-ink:     #ede4d3;       /* INVERTED: text color is now LIGHT */
  --surface:      #2b252e;       /* cards/panels are charcoal, not white */
  --accent-rgb:      212, 180, 131;   /* champagne */
  --accent-deep-rgb: 184, 154, 110;
  /* In dark mode --brand-rgb is used exclusively as a border-tint
     expression (~56 `rgba(var(--brand-rgb), .X)` borders) — set it to
     the cream-light RGB so the faint borders stay VISIBLE on dark
     cards. Without this they'd be charcoal-on-charcoal = invisible. */
  --brand-rgb:       237, 228, 211;
  --brand-deep-rgb:  31, 28, 32;
  --ink-rgb:         237, 228, 211;   /* cream */
  --sky-rgb:         154, 144, 136;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.55);
}

/* ---- Plum & Champagne (LIGHT — refined romance, bridal-editorial)
   Deep plum chrome on warm ivory canvas. Champagne is the primary
   accent (badges, active indicators), burnt copper is the deeper
   gradient counterpart. Inputs/cards stay white for crisp contrast. */
body.theme-plum-champagne{
  --page-bg:      #ede4d3;
  --cream:        #ede4d3;
  --cream-soft:   #f5ede0;
  --cream-strong: #d9cfbe;
  --gold:         #c9a87c;   /* champagne — primary accent */
  --gold-soft:    #e0c69e;
  --mustard:      #8a5a3a;   /* burnt copper — gradient pair */
  --mustard-deep: #6e4828;
  --sky:          #a89a8a;
  --sky-soft:     #d4c8b8;
  --navy:         #3a2942;   /* deep plum — chrome bg */
  --navy-deep:    #2a1d32;
  --navy-ink:     #1f1820;
  --surface:      #ffffff;
  --accent-rgb:      201, 168, 124;
  --accent-deep-rgb: 138, 90, 58;
  --brand-rgb:       58, 41, 66;
  --brand-deep-rgb:  42, 29, 50;
  --ink-rgb:         31, 24, 32;
  --sky-rgb:         168, 154, 138;
}

/* ---- Burgundy & Gold (LIGHT — hotel-luxe, rich, dramatic)
   Aubergine chrome on soft cream canvas. Burgundy wine as the active
   accent (pills/status), champagne as secondary (badge gradient). */
body.theme-burgundy-gold{
  --page-bg:      #f0e8d8;
  --cream:        #f0e8d8;
  --cream-soft:   #f8f3e8;
  --cream-strong: #e0d4bc;
  --gold:         #7e3147;   /* burgundy wine — primary accent */
  --gold-soft:    #a04e63;
  --mustard:      #c9a87c;   /* champagne — secondary accent */
  --mustard-deep: #a8895e;
  --sky:          #9a9088;
  --sky-soft:     #c8c0b8;
  --navy:         #332238;   /* deep aubergine — chrome bg */
  --navy-deep:    #261a2b;
  --navy-ink:     #1a1620;
  --surface:      #ffffff;
  --accent-rgb:      126, 49, 71;
  --accent-deep-rgb: 201, 168, 124;
  --brand-rgb:       51, 34, 56;
  --brand-deep-rgb:  38, 26, 43;
  --ink-rgb:         26, 22, 32;
  --sky-rgb:         154, 144, 136;
}

/* Burgundy & Gold chrome-accent overrides — `--gold` (burgundy wine)
   and `--navy` (aubergine) are both dark wine tones, so the default
   "use --gold for accents on chrome" pattern produces low-contrast
   icons + active states inside the sidebar. Swap chrome-tier accents
   to `--mustard` (champagne) which pops against aubergine. */
body.theme-burgundy-gold .nav-ico,
body.theme-burgundy-gold .cd-num,
body.theme-burgundy-gold .hero-eyebrow,
body.theme-burgundy-gold .auth-sync.syncing,
body.theme-burgundy-gold .landing-privacy .eyebrow{
  color: var(--mustard);
}
body.theme-burgundy-gold .nav-item.active{
  background: linear-gradient(90deg, rgba(var(--accent-deep-rgb),.22), rgba(var(--accent-deep-rgb),0));
  color: var(--mustard);
  border-left-color: var(--mustard);
}
body.theme-burgundy-gold .brand-mark{
  background: linear-gradient(135deg, var(--mustard) 0%, var(--gold) 100%);
  box-shadow: 0 4px 12px rgba(var(--accent-deep-rgb), .45);
}
/* Hero card on the dashboard — the radial wash uses --accent-rgb which
   is burgundy here. On aubergine bg that's muddy. Use champagne. */
body.theme-burgundy-gold .hero-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-deep-rgb),.45), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(var(--sky-rgb), .35), transparent 50%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}

/* ---- Other theme variants (built on :root / blue-gold base) ---- */
body.theme-blue-gold{
  /* Explicit no-op: :root IS the blue-gold palette. Class kept so the
     user can select it from the menu without applying any variant
     override on top — and so applyTheme() can layer it as a base when
     theme-navy/gold/cream are picked. */
}
body.theme-navy{ --page-bg:#E8EDF3; --cream:#E8EDF3; --cream-soft:#F1F4F8; --navy:#0F2742; }
body.theme-gold{ --page-bg:#FAF0DA; --cream:#FAF0DA; --cream-soft:#FDF8EB; --navy:#5A4116; --mustard:#C58A26; }
body.theme-cream{ --page-bg:#F7F2E9; --cream:#F7F2E9; --cream-soft:#FBF7EF; --navy:#3B3A38; --mustard:#B89860; --sky:#D5CDBE; }

/* Base ---------------------------------------------------------- */
*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html, body{
  margin: 0; padding: 0;
  background: var(--page-bg);
  color: var(--navy-ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body{
  min-height: 100vh;
  background: var(--page-bg);
}
/* The warm-editorial body wash (sky + gold radials) is a blue-gold-era
   flourish. Restore it only when that theme is selected — the new
   default reads cleaner as a flat brand-taupe canvas. */
body.theme-blue-gold{
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--sky-rgb), 0.45), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.30), transparent 45%),
    var(--page-bg);
}
h1,h2,h3,h4{ margin: 0; color: var(--navy-ink); }
button{ font-family: inherit; cursor: pointer; }
a{ color: var(--navy-ink); }

/* ===== Sidebar ===== */
.sidebar{
  position: fixed; left: 0; top: 0;
  width: var(--sidebar-w); height: 100vh;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  padding: 26px 14px;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 20;
  box-shadow: var(--shadow-md);
  transition: transform .25s ease;
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--mustard) 100%);
  display:flex; align-items:center; justify-content:center;
  color: var(--navy-deep);
  font-family: var(--serif);
  font-weight: 700; font-size: 16px; letter-spacing: .5px;
  box-shadow: 0 4px 12px rgba(var(--accent-deep-rgb),.35);
}
.brand-title{
  font-family: var(--serif);
  font-size: 20px; font-weight: 600;
  font-style: italic; line-height: 1.1;
}
.brand-sub{
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sky); opacity: .85;
}
.nav{ display:flex; flex-direction:column; gap: 2px; flex: 1; overflow-y:auto; padding-right: 2px;}
.nav-item{
  background: transparent; border: 0;
  color: rgba(239,231,218,.75);
  text-align: left;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  display:flex; align-items:center; gap: 12px;
  font-size: 14px; font-weight: 500;
  transition: all .15s ease;
}
.nav-item:hover{ background: rgba(255,255,255,.06); color: var(--cream); }
.nav-item.active{
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),0));
  color: var(--gold);
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}
.nav-ico{
  width: 22px; text-align:center;
  color: var(--gold); opacity:.85;
  font-size: 14px;
}
.sidebar-foot{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 10px 4px;
  font-family: var(--serif);
  color: var(--sky);
}
.couple-mini{ font-style: italic; font-size: 18px; }
.date-mini{ font-size: 12px; opacity: .8; letter-spacing: 1px; text-transform: uppercase; font-family: var(--sans); }

.menu-toggle{
  position: fixed; top: 14px; left: 14px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--cream); border: 0;
  font-size: 20px;
  display:none;
  box-shadow: var(--shadow-md);
}

/* ===== Main ===== */
.main{
  margin-left: var(--sidebar-w);
  padding: 32px 40px 80px;
  min-height: 100vh;
}
.view{ display: none; max-width: 1280px; margin: 0 auto; }
.view.active{ display: block; }

.view-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 24px; margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(var(--brand-rgb), .15);
}
.eyebrow{
  margin: 0 0 4px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--mustard); font-weight: 600;
}
.view-title{
  font-family: var(--serif);
  font-size: 42px; line-height: 1.05; font-weight: 600;
  color: var(--navy-ink);
}
.view-sub{
  margin: 8px 0 0; color: rgba(var(--ink-rgb), .65);
  font-size: 14px; max-width: 60ch;
}
.head-actions{ display:flex; gap: 8px; flex-shrink:0; }

/* ===== Buttons ===== */
.btn{
  border: 0; border-radius: 999px; padding: 10px 18px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px;
  display:inline-flex; align-items:center; gap: 6px;
  transition: all .15s ease;
  font-family: var(--sans);
}
.btn-primary{
  background: var(--navy); color: var(--cream);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover{ background: var(--navy-deep); transform: translateY(-1px); box-shadow: var(--shadow-md);}
.btn-ghost{
  background: var(--surface); color: var(--navy-ink);
  border: 1px solid rgba(var(--brand-rgb), .18);
}
.btn-ghost:hover{ background: var(--cream-soft); }
.btn-danger{
  background: transparent; color: #B23A48;
  border: 1px solid rgba(178,58,72,.3);
}
.btn-danger:hover{ background: rgba(178,58,72,.08); }
.btn-sm{ padding: 6px 12px; font-size: 12px; }

.icon-btn{
  background: transparent; border: 0; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 22px; color: var(--navy-ink);
}
.icon-btn:hover{ background: var(--cream-strong); }

/* ===== Hero Card (Dashboard) ===== */
.hero-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb),.5), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(var(--sky-rgb), .5), transparent 50%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  margin-bottom: 28px;
  color: var(--cream);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.hero-card::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 10% 80%, rgba(255,255,255,.04) 0, transparent 8%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.04) 0, transparent 6%);
  pointer-events:none;
}
.hero-inner{ position: relative; z-index: 1; text-align:center; }
.hero-eyebrow{
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.hero-couple{
  font-family: var(--serif); font-style: italic;
  font-size: 56px; font-weight: 500;
  color: var(--cream); margin: 0;
}
.hero-date{
  margin: 6px 0 22px;
  font-size: 14px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sky);
}
.countdown{
  display:flex; gap: 28px; justify-content:center; flex-wrap:wrap;
}
.countdown > div{
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 14px 22px; min-width: 90px;
  text-align: center;
}
.cd-num{
  display:block; font-family: var(--serif);
  font-size: 42px; font-weight: 600; color: var(--gold);
  line-height: 1;
}
.cd-lbl{
  display:block; margin-top: 4px;
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--sky); opacity: .8;
}

/* ===== KPI grid ===== */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}
.grid-cards.small{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
@media (max-width: 1100px){
  .grid-cards{ grid-template-columns: repeat(2, 1fr); }
  .grid-cards.small{ grid-template-columns: repeat(4, 1fr); }
}
.kpi-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(var(--brand-rgb), .06);
  position: relative;
}
.kpi-card.xs{ padding: 14px 16px; }
.kpi-card.xs .kpi-value{ font-size: 22px; }
.kpi-label{
  margin: 0; font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--mustard);
  font-weight: 600;
}
.kpi-value{
  margin: 6px 0;
  font-family: var(--serif);
  font-size: 32px; font-weight: 600;
  color: var(--navy-ink);
}
.kpi-sub{
  margin: 0; color: rgba(var(--ink-rgb), .55); font-size: 12px;
}
.kpi-input-wrap input{
  width: 100%; margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px; border: 1px solid rgba(var(--brand-rgb), .15);
  font-size: 13px; font-family: var(--sans); color: var(--navy-ink);
  background: var(--cream-soft);
}
.progress{
  height: 6px; background: var(--cream-strong);
  border-radius: 999px; overflow: hidden; margin: 6px 0;
}
.progress.big{ height: 10px; }
.progress-bar{
  height:100%; width: 0%;
  background: linear-gradient(90deg, var(--mustard), var(--gold));
  transition: width .4s ease;
  border-radius: 999px;
}

.hero-progress{
  padding: 18px 22px;
  display:flex; align-items:center; gap: 20px;
  margin-bottom: 24px;
}
.hero-progress-text{ flex-shrink:0; }
.hero-progress .progress{ flex: 1; }

/* ===== Panels ===== */
.panel{
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(var(--brand-rgb), .06);
  overflow: hidden;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(var(--brand-rgb), .06);
}
.panel-head h3{
  font-family: var(--serif);
  font-size: 22px; font-weight: 600; color: var(--navy-ink);
}
/* Direct <p> children of a .panel (About section body, Data Management
   footnote, etc.) need their own inset since .panel itself has no
   padding — child containers like .form-grid / .actions-row supply it
   for the inputs/buttons inside them. Without this, free-floating
   paragraphs sit flush against the panel edges. */
.panel > p{
  margin: 0;
  padding: 18px 20px;
  line-height: 1.55;
}
.panel > p + p{ padding-top: 0; }
.panel > .actions-row + p,
.panel > .form-grid + p,
.panel > .snapshots-wrap + p{ padding-top: 0; }
.two-col{
  display:grid; gap: 18px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

.task-list-mini{
  list-style: none; margin: 0; padding: 8px 0;
}
.task-list-mini li{
  display:flex; align-items:center; justify-content:space-between;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(var(--brand-rgb), .05);
  font-size: 14px;
}
.task-list-mini li:last-child{ border-bottom: 0; }
.task-list-mini .meta{ color: rgba(var(--ink-rgb), .55); font-size: 12px; }
.link{
  color: var(--mustard-deep);
  font-size: 12px; text-decoration:none; font-weight: 600;
  letter-spacing: .3px;
}
.link:hover{ text-decoration: underline; }

/* ===== Tables ===== */
.filter-bar{ display:flex; gap: 8px; align-items:center; flex-wrap:wrap; }
.filter-bar input[type="text"],
.filter-bar select{
  padding: 8px 12px; border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 999px; background: var(--cream-soft);
  font-size: 13px; font-family: var(--sans); color: var(--navy-ink);
  min-width: 180px;
}
.check-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--cream-soft); border: 1px solid rgba(var(--brand-rgb), .12);
  font-size: 13px; color: var(--navy-ink); cursor: pointer;
}

.table-wrap{ overflow-x: auto; padding: 0; }
.data-table{
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.data-table thead{
  background: var(--cream-soft);
}
.data-table th{
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--navy-ink);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(var(--brand-rgb), .1);
  white-space: nowrap;
}
.data-table td{
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--brand-rgb), .05);
  color: var(--navy-ink);
  vertical-align: middle;
}
.data-table tbody tr:hover{ background: rgba(var(--sky-rgb), .1); }
.data-table tbody tr:last-child td{ border-bottom: 0; }
.data-table .num{ font-variant-numeric: tabular-nums; text-align: right; }
.data-table.compare th:not(:first-child),
.data-table.compare td:not(:first-child){ min-width: 180px; }

.row-tag{
  display:inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .5px;
  background: var(--sky-soft); color: var(--navy-ink);
}
.row-tag.gold{ background: var(--gold-soft); color: var(--mustard-deep); }
.row-tag.green{ background: #DCE9D4; color: #3F6033; }
.row-tag.red{ background: #F4D8D8; color: #87333A; }
.row-tag.muted{ background: var(--cream-strong); color: rgba(var(--ink-rgb), .6);}

.row-actions{
  display:inline-flex; gap: 4px;
}
.row-actions button{
  background: transparent; border: 0;
  width: 28px; height: 28px; border-radius: 50%;
  color: var(--navy-ink); cursor: pointer;
  font-size: 14px;
}
.row-actions button:hover{ background: var(--cream-strong); }
.row-actions button.del:hover{ background: #F4D8D8; color: #87333A; }

.empty-state{
  text-align:center; padding: 36px 20px;
  color: rgba(var(--ink-rgb), .55);
  font-style: italic; font-family: var(--serif);
  font-size: 16px;
}

/* checkbox styling */
input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(var(--brand-rgb), .3);
  border-radius: 5px;
  background: var(--surface);
  position: relative; cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
  transition: all .12s ease;
}
input[type="checkbox"]:checked{
  background: var(--mustard); border-color: var(--mustard);
}
input[type="checkbox"]:checked::after{
  content: '✓';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -54%);
  color: var(--white); font-size: 13px; font-weight: 700;
}

/* ===== Checklist groups ===== */
.cl-group{
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(var(--brand-rgb), .06);
}
.cl-group-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--cream-soft), transparent);
  border-bottom: 1px solid rgba(var(--brand-rgb), .06);
  cursor: pointer;
}
.cl-group-title{
  display:flex; align-items: baseline; gap: 12px;
  font-family: var(--serif);
  font-size: 22px; color: var(--navy-ink);
}
.cl-group-count{
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mustard); font-weight: 600;
}
.cl-group-head .progress{ flex:1; max-width: 200px; margin: 0 0 0 14px;}
.cl-group-body{ padding: 4px 0 12px; }
.cl-task{
  display:flex; align-items:center; gap: 12px;
  padding: 8px 20px;
  border-bottom: 1px dashed rgba(var(--brand-rgb), .06);
}
.cl-task:last-child{ border-bottom: 0; }
.cl-task input[type="text"], .cl-task input[type="date"]{
  flex: 1; border: 0; background: transparent;
  font-size: 14px; color: var(--navy-ink); padding: 4px 0;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s ease;
}
.cl-task input[type="text"]:focus, .cl-task input[type="date"]:focus{
  outline: none; border-color: var(--gold);
}
.cl-task input[type="date"]{ max-width: 140px; flex: 0; color: rgba(var(--ink-rgb), .6); font-size: 12px;}
.cl-task.done input[type="text"]{ text-decoration: line-through; color: rgba(var(--ink-rgb), .4); }
.cl-add-row{ padding: 6px 20px; }
.cl-add-row button{
  background: transparent; border: 0;
  color: var(--mustard-deep); font-weight: 600; font-size: 12px;
  letter-spacing: .5px; cursor:pointer; padding: 6px 0;
}

/* ===== Schedule ===== */
.sch-group{
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(var(--brand-rgb), .06);
}
.sch-group-head{
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--cream-soft), transparent);
  border-bottom: 1px solid rgba(var(--brand-rgb), .06);
  font-family: var(--serif);
  font-size: 22px; color: var(--navy-ink);
  font-style: italic;
}
.sch-list{ list-style: none; margin: 0; padding: 0; }
.sch-row{
  display:grid; grid-template-columns: 100px 1fr 1fr 40px;
  gap: 14px; align-items:center;
  padding: 12px 20px;
  border-bottom: 1px dashed rgba(var(--brand-rgb), .06);
}
.sch-row:last-child{ border-bottom: 0; }
.sch-row input{
  border: 0; background: transparent; font-family: var(--sans);
  font-size: 14px; color: var(--navy-ink); padding: 4px 0;
  border-bottom: 1px dashed rgba(var(--brand-rgb), .1);
}
.sch-row input[type="time"]{
  font-family: var(--serif); font-size: 20px; color: var(--mustard-deep);
  font-weight: 600;
}
.sch-row input:focus{ outline:none; border-color: var(--gold); }

/* ===== Music ===== */
.mus-group{
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid rgba(var(--brand-rgb), .06);
}
.mus-group-head{
  padding: 16px 20px;
  background: linear-gradient(90deg, var(--cream-soft), transparent);
  border-bottom: 1px solid rgba(var(--brand-rgb), .06);
  font-family: var(--serif);
  font-size: 22px; color: var(--navy-ink); font-style: italic;
}
.mus-row{
  display:grid; grid-template-columns: 22px 1fr 1fr 1fr 1fr 40px;
  gap: 12px; align-items:center;
  padding: 10px 20px;
  border-bottom: 1px dashed rgba(var(--brand-rgb), .06);
}
.mus-row input{
  border: 0; background: transparent; font-family: var(--sans);
  font-size: 13px; color: var(--navy-ink); padding: 4px 0;
  border-bottom: 1px dashed rgba(var(--brand-rgb), .1);
}
.mus-row input:focus{ outline:none; border-color: var(--gold); }
.mus-row .moment{
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--mustard);
}

/* ===== Seating ===== */
.seating-layout{
  display:grid; gap: 18px;
  grid-template-columns: 280px 1fr;
}
@media (max-width: 900px){ .seating-layout{ grid-template-columns: 1fr; } }
.seating-pool{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0 0 14px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(var(--brand-rgb), .06);
  max-height: 70vh; overflow: hidden;
  display:flex; flex-direction:column;
}
.seating-pool .panel-head{ flex-shrink:0; }
.seating-pool input[type="text"]{
  margin: 10px 16px;
  padding: 8px 12px;
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 999px; background: var(--cream-soft);
  font-size: 13px;
}
.seating-pool-list{
  list-style:none; margin: 0; padding: 4px 16px 8px;
  overflow-y: auto; flex: 1;
}
.seating-pool-list li, .seat-pill{
  background: var(--cream-soft);
  border: 1px solid rgba(var(--brand-rgb), .08);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 6px;
  font-size: 12px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  transition: all .12s ease;
}
.seating-pool-list li:hover{ background: var(--sky-soft); }
.seating-pool-list li.picked{
  background: var(--mustard);
  border-color: var(--mustard-deep);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--accent-deep-rgb),.4);
}
.seat-pill{ display:inline-flex; align-items:center; gap:6px; margin: 3px; }
.seat-pill .x{
  cursor:pointer; opacity:.5;
}
.seat-pill .x:hover{ opacity: 1; color: #87333A; }

.seating-stage{
  background:
    radial-gradient(circle, rgba(var(--sky-rgb), .15) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: var(--surface);
  border-radius: var(--radius);
  border: 1px solid rgba(var(--brand-rgb), .08);
  min-height: 70vh;
  padding: 18px;
  display:flex; flex-wrap: wrap; gap: 16px;
  align-content:flex-start;
}
.table-card{
  width: 240px;
  background: var(--cream-soft);
  border: 2px solid var(--mustard);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow-sm);
  transition: all .15s ease;
}
.table-card.drag-over{ background: var(--sky-soft); border-color: var(--navy-ink); }
.table-card.targetable{
  cursor: pointer;
  border-color: var(--navy-ink);
  background: var(--sky-soft);
  box-shadow: 0 4px 14px rgba(var(--brand-rgb), .18);
}
.table-card.targetable:hover{ background: #C8DCEC; }
.table-card.full{
  opacity: .55;
  cursor: not-allowed;
}
.table-card [data-table-cap]{
  width: 50px;
  padding: 2px 6px;
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
}
.seats-hint{
  color: rgba(var(--ink-rgb), .4);
  font-size: 12px;
  font-style: italic;
}
.table-card.targetable .seats-hint{
  color: var(--navy-ink);
  font-style: normal;
  font-weight: 600;
}
.table-card h4{
  font-family: var(--serif);
  font-size: 18px; color: var(--navy-ink);
  margin: 0 0 6px; display:flex; align-items:center; justify-content:space-between;
}
.table-card h4 input{
  border: 0; background: transparent; flex: 1;
  font-family: var(--serif); font-size: 18px; color: var(--navy-ink);
  border-bottom: 1px dashed transparent;
}
.table-card h4 input:focus{ outline: none; border-color: var(--gold); }
.table-card .cap{
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--mustard); margin-bottom: 8px;
}

/* ===== Forms / Modal ===== */
.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 14px 18px;
  padding: 20px;
}
.form-grid label{
  display:flex; flex-direction:column; gap: 4px;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--mustard-deep); font-weight: 600;
}
.form-grid label.full{ grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea{
  padding: 10px 12px;
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 10px;
  background: var(--cream-soft);
  font-size: 14px; font-family: var(--sans); color: var(--navy-ink);
  letter-spacing: normal; text-transform: none;
  font-weight: 400;
}
.form-grid textarea{ resize: vertical; min-height: 80px;}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{
  outline: none; border-color: var(--mustard); background: var(--surface);
}

.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(var(--ink-rgb), .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 100;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  animation: fade .2s ease;
}
.modal{
  background: var(--cream-soft);
  border-radius: var(--radius-lg);
  max-width: 640px; width: 100%;
  max-height: 90vh; overflow: hidden;
  box-shadow: var(--shadow-lg);
  display:flex; flex-direction:column;
  animation: pop .25s ease;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(var(--brand-rgb), .08);
}
.modal-head h3{
  font-family: var(--serif);
  font-size: 26px; font-weight: 600; color: var(--navy-ink);
}
.modal-body{
  overflow-y: auto; padding: 4px 4px;
}
.modal-foot{
  display:flex; justify-content:flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid rgba(var(--brand-rgb), .08);
  background: var(--surface);
}
@keyframes fade{ from{opacity:0;} to{opacity:1;} }
@keyframes pop{ from{transform: scale(.96); opacity:0;} to{transform: scale(1); opacity:1;} }

/* ===== Notes Grid ===== */
.notes-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.note-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid rgba(var(--brand-rgb), .08);
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap: 8px;
  position: relative;
  min-height: 160px;
}
.note-card:nth-child(4n){ background: var(--cream-soft);}
.note-card:nth-child(5n){ background: var(--sky-soft);}
.note-card input.title{
  border: 0; background: transparent;
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--navy-ink); padding: 2px 0;
}
.note-card textarea{
  border: 0; background: transparent;
  font-family: var(--sans); font-size: 13px;
  color: var(--navy-ink); flex: 1;
  resize: none;
}
.note-card input:focus, .note-card textarea:focus{ outline: none; }
.note-card .note-del{
  position:absolute; top:8px; right:8px;
  background: transparent; border: 0; cursor: pointer;
  opacity: .35; transition: opacity .15s ease;
  font-size: 14px; color: var(--navy-ink);
}
.note-card:hover .note-del{ opacity: 1; }

/* ===== Itinerary ===== */
.itinerary-day{
  background: var(--cream-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 12px 20px;
  display:grid;
  grid-template-columns: 120px 1fr 40px;
  gap: 14px; align-items:flex-start;
}
.itinerary-day input{
  padding: 8px 10px;
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 8px; background: var(--surface);
  font-size: 13px;
}
.itinerary-day textarea{
  padding: 8px 10px;
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 8px; background: var(--surface);
  font-size: 13px; resize: vertical; min-height: 60px;
  font-family: var(--sans);
}

/* ===========================================================
   Landing page — public-facing welcome for new users
   =========================================================== */
body.on-landing{
  overflow: hidden;
}
.landing{
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--cream);
  overflow-y: auto;
}
.landing::before{
  content:''; position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--sky-rgb), .45), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb),.30), transparent 40%);
  z-index: -1;
}

.landing-nav{
  position: sticky; top: 0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 40px;
  background: rgba(239,231,218,.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(var(--brand-rgb), .06);
  z-index: 10;
}
.landing-brand{
  display:flex; align-items:center; gap: 14px;
}
.landing-mark{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--mustard));
  display:flex; align-items:center; justify-content:center;
  color: var(--navy-deep);
  font-family: var(--serif);
  font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 12px rgba(var(--accent-deep-rgb),.35);
}
.landing-mark.sm{ width: 32px; height: 32px; font-size: 12px; }
.landing-brand-name{
  font-family: var(--serif); font-style: italic;
  font-size: 22px; font-weight: 600;
  color: var(--navy-ink); line-height: 1.1;
}
.landing-brand-sub{
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mustard-deep); font-weight: 600;
}
.landing-nav-links{
  display:flex; align-items:center; gap: 26px;
}
.landing-nav-links a{
  color: var(--navy-ink);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  letter-spacing: .3px;
  transition: color .15s ease;
}
.landing-nav-links a:hover{ color: var(--mustard-deep); }

/* Hero */
.landing-hero{
  padding: 80px 40px 100px;
  display:flex; justify-content:center;
}
.landing-hero-inner{
  max-width: 760px;
  text-align: center;
}
.landing-title{
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--navy-ink);
  margin: 14px 0 22px;
  letter-spacing: -1px;
}
.landing-title em{
  font-style: italic;
  color: var(--mustard-deep);
}
.landing-sub{
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(var(--ink-rgb), .65);
  margin: 0 0 36px;
  line-height: 1.6;
}
.landing-cta{
  display:flex; flex-direction:column; align-items:center; gap: 14px;
  margin-bottom: 32px;
}
.btn-lg{ padding: 14px 32px; font-size: 15px; }
.landing-demo-link{ font-size: 12px; }
.landing-trust{
  display:flex; gap: 22px; justify-content:center; flex-wrap:wrap;
  color: rgba(var(--ink-rgb), .55);
  font-size: 12px;
  letter-spacing: .3px;
}

/* Sections */
.landing-section{
  padding: 80px 40px;
  max-width: 1200px; margin: 0 auto;
  text-align: center;
}
.landing-section-title{
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 600;
  color: var(--navy-ink);
  margin: 6px 0 50px;
  letter-spacing: -.5px;
}

/* Event grid */
.event-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}
.event-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px 24px;
  border: 1px solid rgba(var(--brand-rgb), .08);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all .2s ease;
}
.event-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mustard);
}
.event-emoji{
  font-size: 36px; margin-bottom: 12px;
  line-height: 1;
}
.event-card h3{
  font-family: var(--serif);
  font-size: 22px; font-weight: 600;
  color: var(--navy-ink);
  margin: 0 0 8px;
}
.event-card p{
  font-size: 13px;
  color: rgba(var(--ink-rgb), .65);
  margin: 0; line-height: 1.5;
}

/* Features */
.landing-features-section{
  background: var(--surface);
  max-width: none;
  margin: 0;
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left;
}
.feature-card{
  padding: 22px;
  background: var(--cream-soft);
  border-radius: var(--radius);
  border: 1px solid rgba(var(--brand-rgb), .06);
}
.feature-icon{
  font-size: 28px; margin-bottom: 10px;
}
.feature-card h3{
  font-family: var(--serif);
  font-size: 20px; font-weight: 600;
  color: var(--navy-ink);
  margin: 0 0 6px;
}
.feature-card p{
  font-size: 13px;
  color: rgba(var(--ink-rgb), .65);
  margin: 0; line-height: 1.55;
}

/* Privacy */
.landing-privacy{
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--cream);
  max-width: none;
  margin: 0;
  padding: 90px 40px;
}
.landing-privacy .eyebrow{ color: var(--gold); }
.landing-privacy .landing-section-title{ color: var(--cream); }
.privacy-inner{ max-width: 800px; margin: 0 auto; }
.privacy-text{
  font-size: 16px;
  line-height: 1.7;
  color: rgba(239,231,218,.85);
  margin: 0 0 36px;
}
.privacy-bullets{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  text-align: left;
}
.privacy-bullets > div{
  padding: 16px 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  font-size: 14px;
  color: rgba(239,231,218,.85);
}
.privacy-bullets strong{
  display:block;
  color: var(--gold);
  font-family: var(--serif);
  font-size: 17px; font-weight: 600;
  font-style: italic;
  margin-bottom: 4px;
}

/* Final CTA */
.landing-final-cta{
  padding: 100px 40px;
  text-align: center;
  background: var(--cream);
}

/* Footer */
.landing-foot{
  padding: 30px 40px;
  background: var(--surface);
  border-top: 1px solid rgba(var(--brand-rgb), .06);
}
.landing-foot-inner{
  max-width: 1200px;
  margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: 16px;
}
.landing-foot-brand{
  display:flex; align-items:center; gap: 10px;
  font-family: var(--serif); font-style: italic;
  color: var(--navy-ink);
  font-size: 16px;
}
.landing-foot-meta{
  color: rgba(var(--ink-rgb), .55);
  font-size: 13px;
}

/* Mobile */
@media (max-width: 800px){
  .landing-nav{ padding: 14px 18px; }
  .landing-nav-links{ gap: 14px; }
  .landing-nav-links a:not(.btn){ display: none; }
  .landing-hero{ padding: 48px 20px 70px; }
  .landing-section{ padding: 56px 20px; }
  .landing-privacy{ padding: 60px 20px; }
  .landing-final-cta{ padding: 70px 20px; }
  .event-grid{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: 1fr; }
  .privacy-bullets{ grid-template-columns: 1fr; }
  .landing-foot{ padding: 24px 20px; }
}
@media (max-width: 1024px) and (min-width: 801px){
  .event-grid{ grid-template-columns: repeat(2, 1fr); }
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Brief flash while applying remote sync updates */
body.syncing-remote .main{
  transition: opacity .15s ease;
  opacity: .85;
}

/* ===== Sync error banner ===== */
.sync-error-banner{
  position: fixed; bottom: 24px; right: 24px;
  background: #87333A;
  color: #FFF;
  padding: 10px 14px 10px 18px;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(135,51,58,.35);
  z-index: 250;
  display:flex; align-items:center; gap: 12px;
  max-width: calc(100vw - 48px);
  animation: slideIn .25s ease;
}
.sync-error-text{
  font-size: 13px; font-weight: 500;
  letter-spacing: .2px;
}
.sync-error-banner .btn{
  background: rgba(255,255,255,.18);
  color: #FFF;
  padding: 6px 14px;
  font-size: 12px;
}
.sync-error-banner .btn:hover{ background: rgba(255,255,255,.28); }
.sync-error-banner .icon-btn{
  color: rgba(255,255,255,.8);
  width: 28px; height: 28px;
}
.sync-error-banner .icon-btn:hover{
  background: rgba(255,255,255,.15);
  color: #FFF;
}
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (max-width: 600px){
  .sync-error-banner{ left: 12px; right: 12px; bottom: 12px; }
}

/* ===== Toast ===== */
.toast{
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(40px);
  background: var(--navy); color: var(--cream);
  padding: 12px 22px; border-radius: 999px;
  font-size: 13px; letter-spacing: .5px;
  box-shadow: var(--shadow-lg);
  z-index: 200; opacity: 0;
  transition: all .25s ease;
  pointer-events: none;
}
.toast.show{
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ===== Auth UI ===== */
.auth-block{
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 12px;
  padding-top: 12px;
}
.btn.full{ width: 100%; justify-content: center; }
.btn-link{
  background: transparent; border: 0; cursor: pointer;
  color: var(--gold); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 0;
  font-family: var(--sans); font-weight: 600;
}
.btn-link:hover{ color: var(--cream); text-decoration: underline; }
.auth-user{
  display:flex; align-items:center; gap: 10px;
  padding: 4px 0 8px;
}
.auth-user img{
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gold); object-fit: cover;
  border: 1px solid rgba(255,255,255,.15);
}
.auth-name{
  font-family: var(--serif); font-style: italic;
  color: var(--cream); font-size: 14px; line-height: 1.1;
}
.auth-sync{
  font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--sky); opacity: .8;
}
.auth-sync.syncing{ color: var(--gold); }
.auth-sync.error{ color: #F0A4A4; }
.auth-actions{ display:flex; gap: 12px; }

.auth-overlay{
  position: fixed; inset: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--sky-rgb), .45), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb),.30), transparent 45%),
    var(--page-bg);
  z-index: 150;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  animation: fade .25s ease;
}
.auth-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 38px 36px;
  max-width: 460px; width: 100%;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.auth-title{
  font-family: var(--serif);
  font-size: 36px; font-weight: 600;
  color: var(--navy-ink); margin: 4px 0 6px;
}
.auth-sub{
  color: rgba(var(--ink-rgb), .6);
  margin: 0 0 24px; font-size: 14px;
}
.auth-choice{
  display:flex; flex-direction:column; gap: 14px;
  margin-bottom: 16px;
}
.auth-or{
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(var(--ink-rgb), .4);
}
.auth-join{
  display:flex; gap: 8px;
}
.auth-join input{
  flex:1; padding: 10px 14px;
  border: 1px solid rgba(var(--brand-rgb), .15); border-radius: 999px;
  background: var(--cream-soft); font-size: 13px; font-family: var(--sans);
}
.auth-type-label{
  display:flex; flex-direction:column; gap: 6px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mustard-deep); font-weight: 600;
  text-align: left;
}
.auth-type-label select{
  padding: 10px 14px;
  border: 1px solid rgba(var(--brand-rgb), .15); border-radius: 12px;
  background: var(--cream-soft); font-size: 14px; font-family: var(--sans);
  color: var(--navy-ink); font-weight: 400; letter-spacing: normal; text-transform: none;
}
.auth-skip{
  color: rgba(var(--ink-rgb), .5);
  margin-top: 12px;
}
.auth-skip:hover{ color: var(--navy-ink); }
.eyebrow.center{ text-align: center; }

.sync-banner{
  position: fixed; top: 0; left: var(--sidebar-w); right: 0;
  background: var(--mustard);
  color: var(--navy-deep);
  padding: 8px 20px; text-align: center;
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 600; z-index: 15;
  transition: transform .2s ease;
  transform: translateY(-100%);
}
.sync-banner.show{ transform: translateY(0); }
@media (max-width: 850px){ .sync-banner{ left: 0; } }

/* Reset modal */
.reset-modal{ padding: 20px; display:flex; flex-direction:column; gap: 10px; }
.reset-help{ color: rgba(var(--ink-rgb), .65); font-size: 13px; margin: 0 0 6px; }
.reset-option{
  display:flex; align-items:flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--cream-soft);
  border: 1px solid rgba(var(--brand-rgb), .1);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s ease;
}
.reset-option:hover{ background: var(--sky-soft); }
.reset-option.danger{ border-color: rgba(178,58,72,.25); }
.reset-option.danger:hover{ background: #FAEBED; }
.reset-option input[type="radio"]{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(var(--brand-rgb), .3);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
}
.reset-option input[type="radio"]:checked{ border-color: var(--mustard); }
.reset-option input[type="radio"]:checked::after{
  content:''; position:absolute; inset: 3px;
  background: var(--mustard); border-radius: 50%;
}
.reset-option strong{
  display:block; color: var(--navy-ink); font-family: var(--serif);
  font-size: 16px; font-weight: 600;
}
.reset-option strong em{ font-style:normal; color: var(--mustard-deep); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.reset-option .reset-sub{
  display:block; font-size: 12px; color: rgba(var(--ink-rgb), .6);
  margin-top: 2px;
}

.invite-modal{ padding: 20px; }
.invite-help{ color: rgba(var(--ink-rgb), .65); font-size: 13px; margin: 0 0 14px; }
.invite-code-row{
  display:flex; gap: 10px; align-items:stretch;
  margin-bottom: 10px;
}
.invite-code-row code{
  flex:1; padding: 12px 14px;
  background: var(--cream-soft);
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 10px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 13px; color: var(--navy-ink);
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
}
.invite-status{
  margin: 0; font-size: 12px;
  min-height: 18px;
  letter-spacing: .3px;
}
.invite-status.ok{ color: #3F6033; font-weight: 600; }
.invite-status.warn{ color: var(--mustard-deep); }
/* ---------- Edit-event cover-photo block (Sprint 2 chunk 2e) ---------- */
.v2-cover-edit{ margin-top: 6px; }
.v2-cover-edit-label{
  font-size: 12px; font-weight: 600;
  color: rgba(var(--ink-rgb), .7);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.v2-cover-edit-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: start;
}
.v2-cover-preview{
  width: 140px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-soft, #fbf5e8), var(--sky-soft, #e8eef5));
  display: flex; align-items: center; justify-content: center;
}
.v2-cover-preview img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.v2-cover-preview.is-empty span{
  font-size: 11px;
  color: rgba(var(--ink-rgb), .5);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.v2-cover-actions{
  display: flex; flex-direction: column; gap: 6px;
}
.v2-cover-actions input[type="file"]{
  font-size: 12px;
}
.v2-cover-help{
  margin: 0;
  font-size: 11px;
  color: rgba(var(--ink-rgb), .55);
}
.v2-cover-status{
  margin: 0;
  font-size: 12px;
  color: var(--mustard-deep, #8b6914);
  min-height: 16px;
}

/* ---------- Event switcher (Sprint 2 chunk 2b) ---------- */
.event-switcher{
  position: relative;
  margin: 0 16px 12px;
}
.event-switcher-trigger{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow ."
    "label   chev";
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: var(--cream-soft, #fbf5e8);
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.event-switcher-trigger:hover{
  background: var(--surface);
  border-color: rgba(var(--brand-rgb), .28);
}
.event-switcher-eyebrow{
  grid-area: eyebrow;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .5);
}
.event-switcher-label{
  grid-area: label;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-switcher-chev{
  grid-area: chev;
  margin-left: 8px;
  color: rgba(var(--ink-rgb), .5);
  font-size: 11px;
}
.event-switcher-menu{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(var(--ink-rgb), .12);
  padding: 4px;
}
.event-switcher-item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 100ms ease;
}
.event-switcher-item:hover{ background: var(--cream-soft, #fbf5e8); }
.event-switcher-item.current{ background: var(--cream-soft, #fbf5e8); }
.event-switcher-check{
  color: var(--mustard-deep, #8b6914);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
}
.event-switcher-item-text{
  display: flex; flex-direction: column;
  min-width: 0;
}
.event-switcher-item-name{
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-switcher-item-meta{
  font-size: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .5);
  margin-top: 1px;
}
.event-switcher-empty{
  padding: 12px 10px;
  font-size: 12px;
  color: rgba(var(--ink-rgb), .55);
  text-align: center;
}

.csv-stage{ padding: 18px 20px 6px; }
.csv-hint{ font-size: 13px; color: rgba(var(--ink-rgb), .7); margin: 0 0 10px; line-height: 1.45; }
.csv-hint code, .csv-hint em{ background: var(--cream-soft, #fbf5e8); padding: 1px 5px; border-radius: 4px; font-style: normal; }
.csv-stage-1 textarea{
  width: 100%;
  min-height: 160px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}
.csv-file-row{
  margin-top: 10px;
  display: flex; align-items: center; gap: 10px;
}
.csv-file-help{ font-size: 12px; color: rgba(var(--ink-rgb), .55); }
.csv-map-grid{
  display: grid; gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 8px;
  border: 1px solid rgba(var(--brand-rgb), .12);
  border-radius: 8px;
  background: var(--cream-soft, #fbf5e8);
}
.csv-map-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 8px;
}
.csv-map-header{
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  padding: 4px 8px;
  background: var(--surface);
  border: 1px solid rgba(var(--brand-rgb), .12);
  border-radius: 6px;
  color: var(--navy-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csv-map-arrow{ color: rgba(var(--ink-rgb), .4); font-weight: 600; }
.csv-map-select{
  padding: 6px 8px;
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: 6px;
  font-size: 12px;
  background: var(--surface);
}
.csv-preview-wrap{ margin-top: 12px; }
.csv-preview-table{
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.csv-preview-table th, .csv-preview-table td{
  padding: 4px 8px;
  border-bottom: 1px solid rgba(var(--brand-rgb), .08);
  text-align: left;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.csv-preview-table th{
  background: var(--cream-soft, #fbf5e8);
  font-weight: 600;
  color: rgba(var(--ink-rgb), .7);
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 10px;
}
.csv-note{ margin: 10px 0 0; font-size: 11px; color: rgba(var(--ink-rgb), .55); }

.invite-mail-row{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px; align-items:center;
  margin: 14px 0 10px;
}
.invite-mail-row label{
  font-size: 12px; color: rgba(var(--ink-rgb), .7);
  white-space: nowrap;
}
.invite-mail-row input{
  padding: 8px 10px;
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: 8px;
  font-size: 13px;
}
.invite-foot{
  margin: 6px 0 0;
  font-size: 11px;
  color: rgba(var(--ink-rgb), .55);
}
.v2-invite-hint{
  display: inline-block;
  background: var(--cream-soft, #fbf5e8);
  border: 1px solid rgba(var(--accent-deep-rgb), 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 auto 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mustard-deep, #8b6914);
  letter-spacing: .2px;
}

/* Sprint 3 hotfix: in-app browser block (Messenger / FB / Insta / TikTok) */
.v2-inapp-block{
  max-width: 480px;
  margin: 0 auto 22px;
  padding: 18px 22px 16px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-deep-rgb), 0.4);
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(var(--ink-rgb), .06);
  text-align: left;
}
.v2-inapp-title{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy-ink, #14233a);
}
.v2-inapp-help{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--ink-rgb), .75);
}
.v2-inapp-help strong{ color: var(--navy-ink, #14233a); }
.v2-inapp-link-row{
  display: flex; gap: 8px; align-items: stretch;
  margin-bottom: 6px;
}
.v2-inapp-link-row code{
  flex: 1;
  padding: 8px 10px;
  background: var(--cream-soft, #fbf5e8);
  border: 1px solid rgba(var(--brand-rgb), .15);
  border-radius: 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--navy-ink, #14233a);
  -webkit-user-select: all;
  user-select: all;
  word-break: break-all;
  line-height: 1.3;
  min-width: 0;
}
.v2-inapp-status{
  margin: 4px 0 0;
  font-size: 12px;
  min-height: 16px;
}
.v2-inapp-status.ok{ color: #3F6033; font-weight: 600; }
.v2-inapp-status.warn{ color: var(--mustard-deep, #8b6914); }

.snapshots-wrap{ padding: 0 20px 16px; }
.snapshots-help{ margin: 0 0 10px; }
.snapshots-list{
  display:flex; flex-direction:column; gap: 6px;
  max-height: 240px; overflow-y:auto;
}
.snapshot-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 8px 12px;
  background: var(--cream-soft);
  border-radius: 8px;
  border: 1px solid rgba(var(--brand-rgb), .08);
}
.snapshot-row strong{
  font-family: var(--serif); font-size: 16px; color: var(--navy-ink);
}
.snapshot-row .meta{ color: rgba(var(--ink-rgb), .5); font-size: 11px; }

/* Misc */
.muted{ color: rgba(var(--ink-rgb), .55); }
.small{ font-size: 12px; }
.actions-row{
  display:flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 20px;
}

/* Responsive ----------------------------------------------------- */
@media (max-width: 850px){
  :root{ --sidebar-w: 0px; }
  .sidebar{ transform: translateX(-100%); width: 260px; }
  .sidebar.open{ transform: translateX(0); }
  .main{ padding: 64px 18px 60px; }
  .menu-toggle{ display:flex; align-items:center; justify-content:center; }
  .view-title{ font-size: 32px; }
  .hero-couple{ font-size: 36px; }
  .hero-card{ padding: 28px 24px; }
  .cd-num{ font-size: 30px; }
  .form-grid{ grid-template-columns: 1fr; }
  .view-head{ flex-direction:column; align-items:flex-start; }
  .head-actions{ width: 100%; }
}

/* ===========================================================
   V2 Events Dashboard (Sprint 1)
   Overlay layer over the v1 app, gated by SCHEMA_V2_ENABLED.
   When active, body.v2-active hides v1 chrome.
   =========================================================== */
body.v2-active .sidebar,
body.v2-active .main,
body.v2-active .menu-toggle,
body.v2-active #authOverlay,
body.v2-active #landingPage,
body.v2-active .landing,
body.v2-active .sync-error-banner { display: none !important; }
body.v2-active.on-landing { background: var(--page-bg); }

.v2-dash{
  position: fixed; inset: 0;
  background: var(--page-bg);
  overflow-y: auto;
  z-index: 50;
  padding: 36px 56px 80px;
}
/* Restore the warm-editorial sky+gold radial wash on the dashboard
   only when the blue-gold theme is selected — the new default reads
   cleaner on a flat brand-taupe canvas. */
body.theme-blue-gold .v2-dash{
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--sky-rgb), 0.55), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(var(--accent-rgb), 0.35), transparent 50%),
    var(--page-bg);
}
.v2-dash-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 36px;
  gap: 18px; flex-wrap: wrap;
}
.v2-dash-brand{ display:flex; align-items:center; gap:14px; }
.v2-dash-brand .brand-mark{ width: 52px; height: 52px; font-size: 18px; }
.v2-dash-brand-text .brand-title{
  color: var(--navy-ink);
  font-size: 26px;
  font-style: italic;
}
.v2-dash-brand-text .brand-sub{
  color: var(--navy-ink);
  opacity: 0.65;
}
.v2-dash-user{ display:flex; align-items:center; gap:10px; }
.v2-user-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  background: var(--cream-strong);
}
.v2-user-name{ font-weight: 500; color: var(--navy-ink); }

.v2-dash-signin{
  max-width: 480px;
  margin: 60px auto;
  text-align: center;
  background: var(--surface);
  padding: 40px 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.v2-dash-signin h2{
  font-family: var(--serif);
  font-size: 28px;
  font-style: italic;
  margin-bottom: 12px;
}
.v2-dash-signin p{ color: var(--navy-ink); opacity: 0.7; margin-bottom: 28px; }

.v2-dash-status{
  max-width: 600px; margin: 40px auto; text-align: center;
}
.v2-status-text{
  color: var(--navy-ink); opacity: 0.75;
  font-size: 16px;
}

.v2-dash-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 14px;
}
.v2-dash-h2{
  font-family: var(--serif);
  font-size: 32px;
  font-style: italic;
  color: var(--navy-ink);
}

.v2-events-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.v2-event-card{
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(var(--brand-deep-rgb), 0.06);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 160px;
  overflow: hidden;
}
/* Sprint 2 chunk 2e: cover photo + placeholder */
.v2-event-cover{
  margin: -22px -22px 4px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--cream-soft, #fbf5e8), var(--sky-soft, #e8eef5));
}
.v2-event-cover img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.v2-event-cover-placeholder{
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--cream-strong) 100%);
  position: relative;
}
.v2-event-cover-placeholder::after{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb),.18), transparent 50%);
}
.v2-event-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.v2-event-card-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 10px;
}
.v2-event-name{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--navy-ink);
  line-height: 1.2;
}
.v2-event-type-pill{
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sky-soft);
  color: var(--navy-ink);
  white-space: nowrap;
}
.v2-event-meta{
  display:flex; flex-wrap: wrap; gap: 14px;
  font-size: 13px; color: var(--navy-ink); opacity: 0.7;
}
.v2-event-meta-item{ display:flex; align-items:center; gap: 4px; }
.v2-event-status{
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mustard-deep);
  font-weight: 600;
}
.v2-event-status.archived{ color: var(--navy-ink); opacity: 0.5; }

/* ---------- Archive toggle + divider (Sprint 2 chunk 2c) ---------- */
.v2-dash-toolbar-actions{
  display: flex; align-items: center; gap: 16px;
}
.v2-archived-toggle{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(var(--ink-rgb), .65);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.v2-archived-toggle input{
  accent-color: var(--mustard-deep, #8b6914);
  margin: 0;
  cursor: pointer;
}
.v2-archived-divider{
  grid-column: 1 / -1;
  margin: 14px 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .45);
  border-top: 1px dashed rgba(var(--brand-rgb), .15);
  padding-top: 10px;
}

/* Per-card action buttons (Edit / Delete). Visible on hover/focus
   of the card; tap-friendly on touch where hover doesn't apply. */
.v2-event-actions{
  display: flex;
  gap: 8px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity .12s ease;
}
.v2-event-card:hover .v2-event-actions,
.v2-event-card:focus-within .v2-event-actions{ opacity: 1; }
@media (hover: none){ .v2-event-actions{ opacity: 1; } }

.v2-card-action{
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(var(--brand-deep-rgb), 0.15);
  background: var(--surface);
  color: var(--navy-ink);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.v2-card-action:hover{ background: var(--cream); }
.v2-card-action.danger{ color: #b94a3a; border-color: rgba(185,74,58,0.25); }
.v2-card-action.danger:hover{ background: #fbe9e5; }

.v2-events-empty{
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.v2-events-empty h3{
  font-family: var(--serif);
  font-size: 24px;
  font-style: italic;
  margin-bottom: 8px;
}
.v2-events-empty p{
  color: var(--navy-ink); opacity: 0.7;
  margin-bottom: 22px;
}

@media (max-width: 700px){
  .v2-dash{ padding: 24px 18px 60px; }
  .v2-dash-h2{ font-size: 26px; }
  .v2-events-grid{ grid-template-columns: 1fr; }
}

/* ===========================================================
   V2 Event-detail bridge (Sprint 1 Phase 2)
   When body.v2-event-open: keep v1 chrome visible but hide v2
   dashboard + v1 auth/landing widgets that don't apply.
   =========================================================== */
body.v2-event-open .landing,
body.v2-event-open #landingPage,
body.v2-event-open #authOverlay,
body.v2-event-open #authBlock,
body.v2-event-open .sync-error-banner,
body.v2-event-open #v2Dashboard { display: none !important; }

body.v2-event-open .v2-event-back,
body.v2-event-open .v2-readonly-banner { display: inline-flex; }

/* Lives inside `.sidebar` as the first child (above .brand). Was a
   fixed-position button at top:14px/left:18px which overlapped the
   brand-mark badge in every theme. Now it's an inline pill with chrome
   styling that matches the sidebar's dark bg across all themes. */
.v2-event-back{
  display: none;
  align-items: center; gap: 6px;
  margin: 0 0 14px;
  padding: 6px 14px;
  background: rgba(255,255,255,.07);
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  width: fit-content;
  font-family: var(--sans);
  transition: background .15s ease, transform .15s ease;
}
.v2-event-back:hover{
  background: rgba(255,255,255,.14);
  transform: translateX(-2px);
}

.v2-readonly-banner{
  display: none;
  position: fixed;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  padding: 8px 16px;
  background: var(--mustard);
  color: var(--navy-ink);
  border-radius: 8px;
  font-size: 13px;
  max-width: min(640px, calc(100vw - 200px));
  box-shadow: var(--shadow-sm);
  align-items: center;
}

@media (max-width: 700px){
  .v2-event-back{ padding: 5px 12px; font-size: 11px; }
  .v2-readonly-banner{
    top: auto; bottom: 14px;
    left: 12px; right: 12px;
    max-width: none;
    transform: none;
    font-size: 12px;
  }
}

/* ---------- Sprint 3 chunk 3f: client-portal section ----------
   Calmer, lower-density layout than the planner dashboard. The user is
   here because they're invited as a guest, not because they're managing
   the event — so the visual weight tilts toward "comfortable read" not
   "operate the spreadsheet." */
.v2-client-events-h2{ margin-top: 36px; }

body.client-portal-open .landing,
body.client-portal-open #landingPage,
body.client-portal-open #authOverlay,
body.client-portal-open #authBlock,
body.client-portal-open .sync-error-banner,
body.client-portal-open #v2Dashboard{ display: none !important; }

.client-portal{
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 24px 80px;
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--navy, #1a2638);
}
.client-portal-back{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), 0.12);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 24px;
}
.client-portal-back:hover{ background: var(--cream, #f6f1ea); }
.client-portal-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}
.client-portal-cover{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--cream-soft) 0%, var(--cream-strong) 100%);
  background-size: cover;
  background-position: center;
  margin-bottom: 16px;
}
.client-portal-title{ font-size: 28px; font-weight: 600; margin: 0; }
.client-portal-meta{ color: rgba(var(--ink-rgb), 0.55); font-size: 14px; }
.client-portal-host{ color: rgba(var(--ink-rgb), 0.6); font-size: 13px; margin-top: 4px; }

.client-portal-block{
  background: var(--surface);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 18px;
}
.client-portal-block h3{
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
}
.client-portal-rsvp{
  background: var(--cream, #f9f4ec);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  border-radius: 14px;
  padding: 22px 22px 24px;
  margin-bottom: 22px;
}
.client-portal-rsvp h3{ margin: 0 0 14px; font-size: 17px; font-weight: 600; }
.client-portal-rsvp-row{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px 16px;
  align-items: center;
  margin-bottom: 10px;
}
.client-portal-rsvp-row label{
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.65);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.client-portal-rsvp-row input[type=text],
.client-portal-rsvp-row textarea,
.client-portal-rsvp-row select{
  width: 100%;
  padding: 9px 12px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
}
.client-portal-rsvp-row textarea{ min-height: 72px; resize: vertical; }
.client-portal-rsvp-row .readonly-value{
  color: rgba(var(--ink-rgb), 0.7);
  font-style: italic;
}
.client-portal-rsvp-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.client-portal-rsvp-status{
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.55);
  margin-left: auto;
}
.client-portal-rsvp-status.ok{ color: #2f7a3d; }
.client-portal-rsvp-status.warn{ color: #b94a3a; }

.client-portal-list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-portal-list li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.06);
  font-size: 14px;
}
.client-portal-list li:first-child{ border-top: none; }
.client-portal-list .meta{ color: rgba(var(--ink-rgb), 0.55); font-size: 13px; }
.client-portal-empty{
  color: rgba(var(--ink-rgb), 0.5);
  font-style: italic;
  font-size: 14px;
}

@media (max-width: 700px){
  .client-portal{ padding: 20px 14px 60px; }
  .client-portal-rsvp-row{ grid-template-columns: 1fr; gap: 4px 0; }
}

/* ---------- Sprint 3f: invite modal — role selector + guest picker ---------- */
.invite-role-row{
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  align-items: center;
}
.invite-role-row label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.invite-guest-picker{
  margin-bottom: 14px;
}
.invite-guest-picker label{
  display: block;
  font-size: 13px;
  color: rgba(var(--ink-rgb), 0.6);
  margin-bottom: 6px;
}
.invite-guest-picker select{
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(var(--ink-rgb), 0.18);
  border-radius: 8px;
  font: inherit;
  background: var(--surface);
}
.invite-guest-picker .note{
  font-size: 12px;
  color: rgba(var(--ink-rgb), 0.5);
  margin-top: 4px;
}

/* ===========================================================
   Onyx & Champagne — dark-mode element overrides
   -----------------------------------------------------------
   Variable inversion alone isn't enough for elements that hardcode
   --white as background, or that hover with --cream (too bright as a
   bg overlay in dark mode), or that need a louder primary-action
   eye-catch on a dark canvas. These rules patch those specific cases.
   =========================================================== */
/* Cards/panels get charcoal bg automatically via --surface sweep.
   Borders also work because --brand-rgb redefines to cream in dark mode.
   Only the client-portal RSVP card gets a slight extra emphasis. */
body.theme-onyx-champagne .client-portal-rsvp{
  background: var(--cream-strong);
}

/* Inputs / selects / textareas need a dark surface + light text to
   remain legible. */
body.theme-onyx-champagne input[type=text],
body.theme-onyx-champagne input[type=email],
body.theme-onyx-champagne input[type=tel],
body.theme-onyx-champagne input[type=date],
body.theme-onyx-champagne input[type=datetime-local],
body.theme-onyx-champagne input[type=number],
body.theme-onyx-champagne input[type=search],
body.theme-onyx-champagne select,
body.theme-onyx-champagne textarea{
  background: var(--cream-strong);
  color: var(--navy-ink);
  border-color: rgba(var(--ink-rgb), 0.18);
}
body.theme-onyx-champagne ::placeholder{ color: rgba(var(--ink-rgb), 0.45); }

/* Primary action — champagne is the eye-catch the dark canvas needs. */
body.theme-onyx-champagne .btn-primary{
  background: var(--gold);
  color: var(--navy-deep);
}
body.theme-onyx-champagne .btn-primary:hover{
  background: var(--gold-soft);
  color: var(--navy-deep);
}

/* Ghost buttons / card-actions — switch from cream-on-cream to
   charcoal-on-charcoal with light text. (.v2-event-back is no longer
   on this list — it now lives inside the sidebar with chrome styling
   that already works on dark surfaces in every theme.) */
body.theme-onyx-champagne .btn-ghost,
body.theme-onyx-champagne .v2-card-action{
  background: var(--cream-soft);
  color: var(--navy-ink);
  border-color: rgba(var(--ink-rgb), 0.15);
}
body.theme-onyx-champagne .btn-ghost:hover,
body.theme-onyx-champagne .v2-card-action:hover{
  background: var(--cream-strong);
}
body.theme-onyx-champagne .v2-card-action.danger{
  color: #d68a7e;
  border-color: rgba(214, 138, 126, 0.30);
}
body.theme-onyx-champagne .v2-card-action.danger:hover{
  background: rgba(214, 138, 126, 0.10);
}

/* Sidebar — already dark via --navy; a hairline border separates it
   from the page-bg charcoal. */
body.theme-onyx-champagne .sidebar{
  border-right: 1px solid rgba(var(--ink-rgb), 0.06);
}

/* The cover placeholder's coral radial overlay reads too pink on
   charcoal. Swap to champagne. */
body.theme-onyx-champagne .v2-event-cover-placeholder::after{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb),.22), transparent 50%);
}

/* Modal surfaces / dropdown menus / event switcher. */
body.theme-onyx-champagne .modal-card,
body.theme-onyx-champagne #eventSwitcherMenu{
  background: var(--cream-soft);
  border: 1px solid rgba(var(--ink-rgb), 0.08);
  color: var(--navy-ink);
}

/* Nav-item hover — softer than the cream wash inherited from light mode. */
body.theme-onyx-champagne .nav-item:hover{
  background: rgba(var(--ink-rgb), 0.06);
}
body.theme-onyx-champagne .data-table tbody tr:hover{
  background: rgba(var(--ink-rgb), 0.04);
}

/* Native <select> dropdowns: Chrome/Edge respect background+color set on
   the option element; Firefox uses the OS picker and ignores it. The
   styling here covers Chromium browsers — Firefox users see the OS list
   which is still legible. */
body.theme-onyx-champagne option,
body.theme-onyx-champagne optgroup{
  background: var(--cream-soft);
  color: var(--navy-ink);
}

/* The checklist group head uses linear-gradient(--cream-soft, transparent)
   which, on a cream-soft (charcoal) card body, creates an unwanted "lighter
   bar" on top in dark mode. Flatten it. */
body.theme-onyx-champagne .cl-group-head{
  background: transparent;
}

/* Seating chart canvas (.seating-stage) inherits var(--surface) = charcoal
   now via the sweep, but the dotted grid uses rgba(var(--sky-rgb),...) which
   in dark mode is mid-gray — visible but subtle, which is what we want.
   No further override needed. */

/* Progress bars on the dashboard / checklist were styled to look "filled"
   on cream backgrounds. The track now shows on charcoal — bump contrast. */
body.theme-onyx-champagne .progress,
body.theme-onyx-champagne progress::-webkit-progress-bar{
  background: var(--cream-strong);
}

/* Row tags (.row-tag.green / .red etc) keep their semantic hues but their
   default bg was --sky-soft (very light blue). In dark mode --sky-soft is
   dark-tinted gray — fine. The .muted variant uses --cream-strong which
   inverted properly. No change. */

/* Hero card already works in dark mode — its linear-gradient(--navy →
   --navy-deep) gives a warm-charcoal gradient on the dark canvas, and the
   .hero-couple / .hero-date / .cd-num explicit color rules use --cream /
   --sky / --gold which all invert sanely. No override needed. */

/* ===========================================================
   Admin panel
   =========================================================== */
.admin-panel{ min-width: min(880px, calc(100vw - 80px)); }
.admin-panel-help{
  margin: 0 0 14px;
  color: rgba(var(--ink-rgb), .65);
  font-size: 13px;
  line-height: 1.5;
}
.admin-panel-toolbar{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.admin-panel-toolbar input[type=search]{
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: 8px;
  background: var(--cream-soft);
  color: var(--navy-ink);
  font: inherit;
}
.admin-panel-status{
  font-size: 12px;
  color: rgba(var(--ink-rgb), .55);
}
.admin-panel-status.ok{ color: #3F6033; }
.admin-panel-status.warn{ color: #b94a3a; }
.admin-panel-table-wrap{
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid rgba(var(--brand-rgb), .1);
  border-radius: 10px;
}
.admin-panel-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-panel-table th,
.admin-panel-table td{
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(var(--brand-rgb), .08);
  vertical-align: middle;
}
.admin-panel-table thead th{
  background: var(--cream-soft);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  color: rgba(var(--ink-rgb), .65);
  position: sticky; top: 0;
}
.admin-panel-table tbody tr:last-child td{ border-bottom: 0; }
.admin-panel-table tbody tr:hover{ background: rgba(var(--ink-rgb), .04); }
.admin-panel-empty{
  text-align: center;
  padding: 24px;
  color: rgba(var(--ink-rgb), .55);
  font-style: italic;
}

.admin-user-cell{ display: flex; align-items: center; gap: 10px; }
.admin-user-avatar{
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.admin-user-avatar-fallback{
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold) 0%, var(--mustard) 100%);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 12px;
}

.admin-bootstrap-badge{
  display: inline-block;
  padding: 3px 10px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px;
}

.admin-plan-select{
  padding: 5px 10px;
  border: 1px solid rgba(var(--brand-rgb), .2);
  border-radius: 6px;
  background: var(--cream-soft);
  color: var(--navy-ink);
  font: inherit;
  font-size: 12px;
}
.admin-plan-none{
  font-size: 12px;
  color: rgba(var(--ink-rgb), .45);
  font-style: italic;
}

/* Compact toggle switch for the admin column. */
.admin-toggle{
  position: relative;
  display: inline-block;
  width: 36px; height: 20px;
  cursor: pointer;
}
.admin-toggle-input{
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.admin-toggle-slider{
  position: absolute; inset: 0;
  background: rgba(var(--ink-rgb), .2);
  border-radius: 999px;
  transition: background .15s ease;
}
.admin-toggle-slider::before{
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.admin-toggle-input:checked + .admin-toggle-slider{ background: var(--gold); }
.admin-toggle-input:checked + .admin-toggle-slider::before{ transform: translateX(16px); }
.admin-toggle-input:disabled + .admin-toggle-slider{ opacity: .4; cursor: not-allowed; }

@media (max-width: 700px){
  .admin-panel{ min-width: 0; }
  .admin-panel-table{ font-size: 12px; }
  .admin-panel-table th, .admin-panel-table td{ padding: 8px 10px; }
}