*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Animations removed for calm, controllable, buttery-smooth scrolling */
*,*::before,*::after{animation:none!important}
:root{
  color-scheme:light;
  /* ── Coolors palette — jet · green → orange → pink, chartreuse spot ── */
  --ink:#363537;             /* jet         */
  --muted:#6f6d74;
  --line:rgba(54,53,55,.18);
  --accent:#0cce6b;          /* green       */
  --accent2:#ef2d56;         /* pink        */
  --accent3:#ed7d3a;         /* orange      */
  --accent-grad:linear-gradient(120deg,#0cce6b 0%,#ed7d3a 54%,#ef2d56 100%);
  --accent-soft:rgba(12,206,107,.14);
  --glow:rgba(12,206,107,.5);
  --danger:#e21d48;
  --ok:#0a9d52;
  /* glass surfaces */
  --glass:rgba(255,255,255,.58);
  --glass-2:rgba(255,255,255,.74);
  --glass-brd:rgba(255,255,255,.82);
  --field:rgba(255,255,255,.78);
  /* neomorphic depth */
  --sh:34px 34px 68px rgba(24,80,54,.16),-22px -22px 56px rgba(255,255,255,.64);
  --sh-card:0 22px 50px -22px rgba(22,74,50,.40),inset 0 1px 0 rgba(255,255,255,.66);
  --sh-raise:6px 6px 14px rgba(24,80,54,.17),-6px -6px 14px rgba(255,255,255,.86),inset 0 1px 0 rgba(255,255,255,.6);
  --sh-inset:inset 3px 3px 7px rgba(24,80,54,.13),inset -3px -3px 7px rgba(255,255,255,.86);
  --radius:24px;
  --radius-sm:14px;
  --gutter-x:clamp(20px,6vw,80px);
  --gutter-y:clamp(26px,6vh,60px);
  /* Shared guest-table column widths — header filters/sort and the live
     rows both consume these, so the two grids always stay aligned. */
  --gcol-num:30px;
  --gcol-rel:130px;
  --gcol-ref:140px;
  --gcol-act:128px;   /* invite & rsvp — equal width so toggles line up */
  --gcol-party:144px;
  --gcol-end:40px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Cormorant Garamond',serif;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  background:#eefcf4;color:var(--ink);
  font-family:var(--sans);font-size:1.02rem;font-weight:500;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.serif{font-family:var(--serif)}

/* ── Animated colourful background ── */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(42% 48% at 14% 18%,rgba(12,206,107,.42),transparent 70%),
    radial-gradient(44% 46% at 86% 12%,rgba(239,45,86,.34),transparent 70%),
    radial-gradient(46% 48% at 88% 86%,rgba(237,125,58,.42),transparent 70%),
    radial-gradient(48% 50% at 12% 88%,rgba(220,237,49,.44),transparent 70%),
    linear-gradient(135deg,#eafff4 0%,#fffef0 40%,#fff4ec 74%,#fdeef1 100%);
  animation:bgshift 26s ease-in-out infinite alternate;
}
@keyframes bgshift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-2%,-1%)}}

/* ── Dark theme ── */
html.dark{
  color-scheme:dark;
  --ink:#eef3f0;
  --muted:#a2aaa6;
  --line:rgba(120,210,160,.18);
  --accent:#1fdd84;          /* green  */
  --accent2:#ff5277;         /* pink   */
  --accent3:#ff9a52;         /* orange */
  --accent-grad:linear-gradient(120deg,#1fdd84 0%,#ff9a52 54%,#ff5277 100%);
  --accent-soft:rgba(31,221,132,.20);
  --glow:rgba(31,221,132,.55);
  --danger:#ff6b86;
  --ok:#3fe08f;
  --glass:rgba(26,34,30,.58);
  --glass-2:rgba(34,44,39,.74);
  --glass-brd:rgba(60,210,140,.24);
  --field:rgba(28,38,33,.72);
  --sh:30px 30px 66px rgba(0,0,0,.46),-20px -20px 52px rgba(40,200,120,.07);
  --sh-card:0 26px 56px -22px rgba(0,0,0,.66),inset 0 1px 0 rgba(120,235,180,.15);
  --sh-raise:6px 6px 14px rgba(0,0,0,.42),-6px -6px 14px rgba(40,190,120,.09),inset 0 1px 0 rgba(120,235,180,.13);
  --sh-inset:inset 3px 3px 8px rgba(0,0,0,.42),inset -2px -2px 7px rgba(60,200,140,.07);
}
html.dark{background:#0f1411}
html.dark body::before{
  background:
    radial-gradient(42% 48% at 14% 18%,rgba(20,200,120,.34),transparent 70%),
    radial-gradient(44% 46% at 86% 12%,rgba(239,45,86,.26),transparent 70%),
    radial-gradient(46% 48% at 88% 86%,rgba(237,125,58,.24),transparent 70%),
    radial-gradient(48% 50% at 12% 88%,rgba(200,220,40,.20),transparent 70%),
    linear-gradient(135deg,#0f1611 0%,#13180f 48%,#0e120f 100%);
}
html.dark input::placeholder,html.dark textarea::placeholder{color:#7f8a84}
body,input,select,textarea,.btn,.theme-toggle,.tab-panel,.glass-card{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease}

/* ── Floating theme toggle ── */
.theme-toggle{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right));z-index:70;
  width:52px;height:52px;border-radius:50%;border:1px solid var(--glass-brd);
  background:var(--glass-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-raise);
  transition:transform .25s,box-shadow .25s,background .4s,color .4s}
.theme-toggle:hover{transform:scale(1.09) rotate(-8deg)}
.theme-toggle:active{box-shadow:var(--sh-inset)}
.theme-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon{display:none}
html.dark .theme-toggle .icon-sun{display:none}
html.dark .theme-toggle .icon-moon{display:block}
@media(max-width:680px){.theme-toggle{bottom:calc(80px + env(safe-area-inset-bottom));width:46px;height:46px}}

/* ── App header + section menu ── */
.app-header{position:fixed;top:0;left:0;right:0;z-index:65;display:flex;align-items:center;gap:16px;
  padding:10px calc(var(--gutter-x) + env(safe-area-inset-right)) 10px calc(var(--gutter-x) + env(safe-area-inset-left));
  padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--glass-2);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--glass-brd);box-shadow:var(--sh-card)}
.ah-brand{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ah-menu{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.ah-menu::-webkit-scrollbar{display:none}
.ah-link{appearance:none;-webkit-appearance:none;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.03em;padding:9px 16px;border-radius:22px;cursor:pointer;white-space:nowrap;transition:color .25s,background .3s,box-shadow .3s}
.ah-link:hover{color:var(--ink)}
.ah-link.active{color:#fff;background:var(--accent-grad);box-shadow:0 10px 22px -10px var(--glow)}
.ah-actions{display:flex;align-items:center;gap:10px}
.ah-icon{appearance:none;-webkit-appearance:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--glass-brd);background:var(--glass-2);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--sh-raise);transition:transform .2s,box-shadow .25s,color .3s,background .3s}
.ah-icon:hover{transform:scale(1.06)}
.ah-icon.on{color:#fff;background:var(--accent-grad);border-color:transparent}

/* ── Header-driven single-page views ── */
.view{display:none;flex-direction:column;gap:clamp(18px,2.6vh,28px);width:100%;max-width:1100px;
  margin:clamp(16px,3vh,30px) auto;padding:clamp(20px,3vw,34px);
  background:var(--glass);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:var(--sh-card)}
.view.active{display:flex;animation:fadeIn .4s ease}
.event-meta{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.lock-fields{display:flex;flex-direction:column;gap:clamp(16px,2.4vh,24px)}
.view.locked .lock-fields{opacity:.65}
@media(max-width:680px){.event-meta{grid-template-columns:1fr}.ah-brand{display:none}}

/* Numbers in a monospaced face */
.counter,.page-num,.page-badge,.guest-num,.gs-num,.spin-val,.ft-val,.tb-val,.tb-total,
.pr-total,.pr-table td,input[type=number],input[type=tel],input[type=datetime-local]{font-family:var(--mono)}

/* Material Symbols */
.msi{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1;font-size:1.15rem;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.btn .msi{font-size:1.25rem}
.action-row .btn,#ghConnectBtn,.map-row .btn{padding:13px 16px}
#printReport{display:none}

/* ── Scroll container ── */
#pages{height:100vh;height:100svh;overflow-y:auto;scroll-behavior:smooth;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--accent) transparent;padding-top:calc(64px + env(safe-area-inset-top))}
/* While the on-screen keyboard is open: free the scroll (no snap fighting) and
   reserve room below so the focused field can sit above the keyboard. --kb is
   set from the VisualViewport in main.js. */
#pages.kb-open{scroll-snap-type:none;padding-bottom:var(--kb,0px);scroll-padding-bottom:calc(var(--kb,0px) + 24px)}
#pages::-webkit-scrollbar{width:8px}
#pages::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent),var(--accent2));border-radius:8px}
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,30px);padding:calc(var(--gutter-y) + env(safe-area-inset-top)) calc(var(--gutter-x) + env(safe-area-inset-right)) calc(var(--gutter-y) + env(safe-area-inset-bottom)) calc(var(--gutter-x) + env(safe-area-inset-left));position:relative}

/* ── Glass card surface (shared) ── */
.tab-panel.active,.glass-card,.summary-list,.gh-connect,.guest-summary,.food-total,.wa-panel{
  background:var(--glass);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:var(--sh-card)}

/* ── Fixed chrome ── */
.brand{position:fixed;top:calc(20px + env(safe-area-inset-top));left:calc(var(--gutter-x) + env(safe-area-inset-left));font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;z-index:60;pointer-events:none}
.counter{position:fixed;top:calc(20px + env(safe-area-inset-top));right:calc(var(--gutter-x) + env(safe-area-inset-right));font-size:.7rem;letter-spacing:.1em;color:var(--muted);z-index:60;pointer-events:none;font-variant-numeric:tabular-nums}
.page-nav{position:fixed;right:calc(26px + env(safe-area-inset-right));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;z-index:60;padding:12px 9px;border-radius:30px;background:var(--glass-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-brd);box-shadow:var(--sh-card)}
.page-nav button{width:9px;height:9px;border-radius:50%;border:none;background:var(--line);padding:0;cursor:pointer;transition:background .3s,transform .3s,box-shadow .3s}
.page-nav button:hover{transform:scale(1.25)}
.page-nav button.active{background:var(--accent-grad);transform:scale(1.5);box-shadow:0 0 10px var(--glow)}

/* ── Reveal-on-view (kept static — no entrance animation) ── */
.reveal,.reveal.in{opacity:1;transform:none;transition:none}

/* ── Page head ── */
.page-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.page-num{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,6vw,4rem);line-height:.9;user-select:none;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.92}
.page-title{font-family:var(--serif);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:-.01em}
.page-sub{font-size:.82rem;color:var(--muted);margin-top:4px;font-weight:500}
.page-badge{margin-left:auto;font-size:.82rem;letter-spacing:.02em;color:#fff;font-weight:700;white-space:nowrap;padding:7px 15px;border-radius:30px;background:var(--accent-grad);box-shadow:0 8px 18px -8px var(--glow)}
.hr{height:1px;background:linear-gradient(90deg,var(--accent),transparent);opacity:.4;border:none}

/* ── Planner tabs ── */
.planner{justify-content:flex-start;gap:clamp(18px,3vh,26px)}
.tabs{display:flex;gap:8px;padding:7px;border-radius:30px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--glass-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-brd);box-shadow:var(--sh-card);align-self:flex-start;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tab{appearance:none;-webkit-appearance:none;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:10px 22px;border-radius:24px;cursor:pointer;white-space:nowrap;transition:color .25s,background .3s,box-shadow .3s}
.tab:hover{color:var(--ink)}
.tab.active{color:#fff;background:var(--accent-grad);box-shadow:0 10px 22px -10px var(--glow)}
.tab-panel{display:none;flex-direction:column;gap:clamp(18px,2.6vh,28px);padding:clamp(20px,3vw,34px)}
.tab-panel.active{display:flex;animation:fadeIn .4s ease}

/* ── Hero ── */
.hero{gap:clamp(26px,4vh,42px)}
.hero-inner{max-width:780px}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:20px;padding:7px 16px;border-radius:30px;background:var(--accent-grad);box-shadow:0 10px 24px -10px var(--glow)}
.hero-title{font-family:var(--serif);font-weight:600;font-style:italic;font-size:clamp(2.4rem,6.8vw,4.6rem);line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.hero-sub{margin-top:20px;font-size:clamp(.96rem,1.4vw,1.12rem);color:var(--muted);max-width:48ch;line-height:1.65}
.for-field{margin-top:30px;max-width:520px;padding:18px 20px;border-radius:var(--radius);background:var(--glass);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid var(--glass-brd);box-shadow:var(--sh-card)}
.for-field label{font-size:.66rem;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:8px}
.for-field input{font-family:var(--serif);font-size:1.2rem;font-style:italic;background:transparent;border:none;box-shadow:none;padding:4px 2px}
.for-field input:focus{box-shadow:none;border-bottom:2px solid var(--accent)}
.scroll-cue{position:absolute;left:calc(var(--gutter-x) + env(safe-area-inset-left));bottom:calc(26px + env(safe-area-inset-bottom));font-size:.66rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.scroll-cue span{display:block;width:2px;height:26px;border-radius:2px;background:var(--accent-grad);margin:0 0 8px;animation:bounce 2.4s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}

/* ── Event type chips ── */
.event-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;max-width:660px}
.event-btn{background:var(--glass-2);border:1px solid var(--glass-brd);color:var(--muted);padding:10px 18px;font-size:.74rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;border-radius:30px;transition:all .25s;white-space:nowrap;font-family:var(--sans);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh-raise)}
.event-btn:hover{color:var(--ink);transform:translateY(-2px)}
.event-btn.active{background:var(--accent-grad);border-color:transparent;color:#fff;box-shadow:0 12px 26px -10px var(--glow)}

/* ── Form elements ── */
.row{display:grid;gap:20px}
.row-2{grid-template-columns:1fr 1fr}
.row-3{grid-template-columns:1fr 1fr 1fr}
label{font-size:.66rem;color:var(--muted);font-weight:700;letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:8px}
input,select,textarea{
  width:100%;background:var(--field);border:1px solid var(--glass-brd);
  color:var(--ink);padding:12px 14px;font-size:.94rem;font-family:var(--sans);font-weight:500;
  outline:none;border-radius:var(--radius-sm);box-shadow:var(--sh-inset);
  transition:box-shadow .25s,border-color .25s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--sh-inset),0 0 0 3px var(--accent-soft)}
input[type=checkbox]{width:auto;border:none;padding:0;box-shadow:none;accent-color:var(--accent);cursor:pointer}
/* iOS/WebKit renders datetime-local with its own appearance, leaving the value
   vertically off-centre and the field taller than siblings — normalise it. */
input[type=datetime-local]{-webkit-appearance:none;appearance:none;text-align:left;min-height:46px;line-height:1.2}
input[type=datetime-local]::-webkit-date-and-time-value{text-align:left;margin:0}
input::placeholder,textarea::placeholder{color:#84857f}
textarea{resize:vertical;min-height:60px;line-height:1.55}
select{cursor:pointer}
/* Native dropdown popups can't be translucent — give options a solid,
   theme-matched backing so they stay legible (esp. in dark mode). */
select option{background:#fff;color:#363537}
html.dark select option{background:#1a221d;color:#eef3f0}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--glass-brd);background:var(--glass-2);color:var(--ink);padding:12px 22px;font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius-sm);font-family:var(--sans);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--sh-raise);transition:transform .2s,box-shadow .2s,color .2s}
.btn:hover{transform:translateY(-2px);color:var(--accent)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-inset)}
.btn-fill{background:var(--accent-grad);border-color:transparent;color:#fff;box-shadow:0 12px 26px -10px var(--glow)}
.btn-fill:hover{color:#fff;filter:brightness(1.06)}
.add-btn{width:100%;border:1px dashed var(--glass-brd);background:var(--glass);color:var(--accent);padding:15px 0;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;border-radius:var(--radius-sm);transition:all .25s;font-family:var(--sans)}
.add-btn:hover{background:var(--accent-soft);border-color:var(--accent)}
.remove-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:var(--gcol-end);flex-shrink:0;background:none;border:none;color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.03em;cursor:pointer;padding:6px;border-radius:20px;transition:color .2s,background .2s;font-family:var(--sans);white-space:nowrap}
.remove-btn:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}

/* ── Map ── */
.map-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.map-row input{flex:1;min-width:180px}
.map-preview{width:100%;border:1px solid var(--glass-brd);height:210px;display:none;background:var(--glass);margin-top:8px;overflow:hidden;border-radius:var(--radius-sm);box-shadow:var(--sh-card)}
.map-preview iframe{width:100%;height:100%;border:none}
.map-preview.show{display:block;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeOut{to{opacity:0;transform:translateY(-6px)}}

/* ── Food items ── */
#foodList,#guestList{display:flex;flex-direction:column;gap:14px}
.food-item{background:var(--glass-2);border:1px solid var(--glass-brd);border-radius:var(--radius-sm);box-shadow:var(--sh-card);padding:18px;display:grid;gap:16px;animation:slideIn .3s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.food-total{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;margin-top:2px}
.ft-label{font-size:.78rem;color:var(--muted);font-weight:600}
.ft-val{font-family:var(--serif);font-size:1.7rem;font-weight:600;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Guests ── */
.guest-summary{display:flex;flex-wrap:wrap;gap:0;padding:18px 22px}
.gs-stat{text-align:left;margin:6px 26px 6px 0;padding-right:26px;border-right:1px solid var(--line)}
.gs-stat:last-child{border-right:none;margin-right:0;padding-right:0}
.gs-num{font-family:var(--serif);font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:600;line-height:1;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gs-lab{font-size:.66rem;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.breakdowns{display:flex;flex-wrap:wrap;gap:26px}
.bd-group{flex:1 1 240px;min-width:220px}
.bd-title{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-weight:700}
.bd-chips{display:flex;flex-wrap:wrap;gap:8px}
.rel-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--glass-brd);background:var(--glass-2);border-radius:24px;padding:6px 14px;font-size:.84rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--sh-raise);transition:transform .2s}
.rel-chip:hover{transform:translateY(-2px)}
.rc-lab{color:var(--ink);font-weight:600}
.rc-num{font-family:var(--mono);font-size:.74rem;font-weight:700;color:#fff;background:var(--accent-grad);padding:2px 8px;border-radius:12px}
.rel-empty{font-size:.82rem;color:var(--muted)}
.food-sync-lab{display:flex;align-items:center;gap:6px;margin:8px 0 0;text-transform:none;font-size:.72rem;font-weight:500;color:var(--muted);cursor:pointer}
.food-sync-lab input{width:auto;margin:0}
.guest-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.guest-toolbar .gf-search{flex:1 1 220px;min-width:160px}
.gf-count{font-size:.74rem;color:var(--muted);font-family:var(--mono);margin-left:auto;white-space:nowrap}
/* Per-column filter header — mirrors the .guest-item column widths. */
.guest-header{display:flex;align-items:center;gap:14px;padding:0 16px 8px;margin-bottom:6px;border-bottom:1px solid var(--glass-brd)}
.guest-header .gh-col{display:flex;align-items:center}
.guest-header select,.guest-header input{width:100%;font-size:.82rem;padding:8px 10px;cursor:pointer}
.gh-num{width:var(--gcol-num);flex-shrink:0}
.gh-name{flex:1;min-width:150px}
.gh-rel{width:var(--gcol-rel);flex-shrink:0}
.gh-ref{width:var(--gcol-ref);flex-shrink:0}
.gh-inv,.gh-rsvp{width:var(--gcol-act);flex-shrink:0}
.gh-party{width:var(--gcol-party);flex-shrink:0;justify-content:center}
.gh-end{flex:0 0 var(--gcol-end)}
.gh-lab{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;user-select:none}
.gh-lab:hover{color:var(--text)}
.gh-lab.sorted{color:var(--accent)}
.gh-lab.sorted::after{content:'▲';font-size:.6rem;margin-left:4px}
.gh-lab.sorted.desc::after{content:'▼'}
/* Header only makes sense while rows stay single-line (>980px); below that
   rows reflow, so hide the column header to avoid a misaligned grid. */
@media(max-width:980px){.guest-header{display:none}}
.guest-item{background:var(--glass-2);border:1px solid var(--glass-brd);border-radius:var(--radius-sm);box-shadow:var(--sh-card);padding:16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;animation:slideIn .3s ease}
.guest-item.rsvp-locked{opacity:.74}
.guest-item.rsvp-locked .rsvp-toggle{opacity:1}
.guest-num{font-family:var(--mono);font-size:.8rem;font-weight:600;color:#fff;background:var(--accent-grad);flex-shrink:0;width:var(--gcol-num);height:30px;border-radius:10px;display:grid;place-items:center}
.guest-name-wrap{flex:1;min-width:150px}
.guest-name-wrap input.invited{color:var(--ok);font-weight:600}
.honorific{width:92px;flex-shrink:0;font-size:.86rem;padding:10px 10px}
.relationship{width:var(--gcol-rel);flex-shrink:0;font-size:.86rem;padding:10px 10px}
.reference{width:var(--gcol-ref);flex-shrink:0;font-size:.86rem;padding:10px 12px}
.invite-toggle{display:flex;align-items:center;justify-content:center;gap:7px;width:var(--gcol-act);flex-shrink:0;cursor:pointer;user-select:none;background:var(--glass);border:1px solid var(--glass-brd);border-radius:24px;padding:7px 12px;box-shadow:var(--sh-raise);font-family:var(--sans);transition:box-shadow .25s}
.invite-toggle .track{width:30px;height:16px;border-radius:10px;border:1px solid var(--line);background:var(--field);position:relative;transition:border-color .25s,background .25s}
.invite-toggle .track::after{content:'';position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .25s,background .25s}
.invite-toggle .it-icon{font-size:1.05rem;color:var(--muted);transition:color .25s}
.invite-toggle .it-label{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.invite-toggle.on .track{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 22%,transparent)}
.invite-toggle.on .track::after{transform:translateX(14px);background:var(--ok)}
.invite-toggle.on .it-icon,.invite-toggle.on .it-label{color:var(--ok)}
.rsvp-toggle.on .track{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 22%,transparent)}
.rsvp-toggle.on .track::after{background:var(--danger)}
.rsvp-toggle.on .it-icon,.rsvp-toggle.on .it-label{color:var(--danger)}
.spinner-wrap{display:flex;align-items:center;justify-content:center;gap:10px;width:var(--gcol-party);flex-shrink:0}
.spin-label{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.spinner{display:flex;align-items:center;border:1px solid var(--glass-brd);border-radius:24px;background:var(--glass);box-shadow:var(--sh-raise);overflow:hidden}
.spin-btn{background:none;border:none;color:var(--accent);width:32px;height:34px;font-size:1.1rem;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:background .15s}
.spin-btn:hover{background:var(--accent-soft)}
.spin-val{width:26px;text-align:center;font-size:.88rem;font-weight:600;transition:color .2s,transform .2s}

/* ── Summary page ── */
.summary-list{display:flex;flex-direction:column;max-width:580px;padding:22px 26px}
.tb-row{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.tb-label{font-size:.86rem;color:var(--muted);font-weight:600}
.tb-val{font-size:.96rem;color:var(--ink);font-weight:600}
.tb-val.cleared{color:var(--ok);font-weight:700}
.tb-total-wrap{display:flex;justify-content:space-between;align-items:baseline;padding-top:22px}
.tb-total-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tb-total{font-family:var(--serif);font-size:clamp(2.2rem,5.5vw,3.4rem);font-weight:700;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.action-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.gh-connect{padding:18px 22px;max-width:580px}
.gh-connect label{margin-bottom:10px}

/* ── Guest phone field ── */
.guest-phone{width:150px;flex-shrink:0;font-size:.86rem;padding:10px 12px}

/* ── WhatsApp invite panel ── */
.wa-panel{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,3vw,26px);margin-top:2px}
.wa-head{font-family:var(--serif);font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:9px}
.wa-head .msi{font-size:1.55rem;color:#25D366}
.wa-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.wa-note{font-size:.72rem;color:var(--muted);flex:1;min-width:220px;line-height:1.5}
.wa-list{display:flex;flex-wrap:wrap;gap:8px}
.wa-link{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--glass-brd);background:var(--glass-2);border-radius:24px;padding:7px 14px;font-size:.82rem;font-weight:600;color:var(--ink);text-decoration:none;box-shadow:var(--sh-raise);transition:transform .2s,color .2s}
.wa-link:hover{transform:translateY(-2px);color:#1ebe57}
.wa-link .msi{font-size:1rem;color:#25D366}
.wa-img-input{display:flex;gap:10px;align-items:stretch}
.wa-img-input input{flex:1;min-width:0}
.wa-img-input .btn{flex:0 0 auto;padding:0 16px}
.wa-img-preview{display:flex;align-items:center;gap:10px;margin-top:10px}
.wa-img-preview img{width:46px;height:46px;object-fit:cover;border-radius:10px;border:1px solid var(--glass-brd);box-shadow:var(--sh-raise)}
.wa-img-meta{flex:1;min-width:0;font-size:.74rem;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Summary side column + load-list dropdown ── */
.summary-side{display:flex;flex-direction:column;gap:14px}
#loadListSelect{flex:1;min-width:180px}

/* ── Event-type dropdown (replaces the old chip strip) ── */
.event-select-wrap{margin-top:28px;max-width:420px}
.event-select-wrap select{font-size:1rem;font-weight:600}

/* ── Dashboard ── */
.dashboard{justify-content:flex-start}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:14px}
.dash-kpi{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius-sm);box-shadow:var(--sh-card);padding:16px 18px}
.dk-val{font-family:var(--serif);font-size:1.65rem;font-weight:700;line-height:1.1;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dk-lab{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin-top:6px}
.dk-sub{font-size:.7rem;color:var(--muted);margin-top:3px}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin-top:18px}
.dash-card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);box-shadow:var(--sh-card);padding:20px}
.dash-card-h{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:14px}
.dash-empty{font-size:.8rem;color:var(--muted);padding:8px 0}
.dash-bars{display:flex;flex-direction:column;gap:10px}
.db-row{display:grid;grid-template-columns:36% 1fr auto;align-items:center;gap:10px}
.db-lab{font-size:.78rem;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-track{height:12px;border-radius:8px;background:var(--field);box-shadow:var(--sh-inset);overflow:hidden}
.db-fill{height:100%;border-radius:8px;min-width:3px}
.db-val{font-family:var(--mono);font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap}
.dash-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.dn-top{font-family:var(--serif);font-size:15px;font-weight:700;fill:var(--ink)}
.dn-bot{font-size:7px;fill:var(--muted);letter-spacing:.18em}
.dash-legend{display:flex;flex-direction:column;gap:8px;font-size:.8rem;color:var(--ink)}
.dl-item{display:flex;align-items:center;gap:8px}
.dl-dot{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.dash-progress{margin-bottom:14px}
.dp-track{height:16px;border-radius:10px;background:var(--field);box-shadow:var(--sh-inset);overflow:hidden}
.dp-fill{height:100%;background:var(--accent-grad);border-radius:10px;min-width:3px}
.dp-meta{display:flex;justify-content:space-between;gap:8px;font-size:.72rem;color:var(--muted);margin-top:8px;font-weight:600}

/* ── Invitation card ── */
.invite-wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,30%,340px);gap:clamp(20px,3vw,40px);align-items:start}
.invite-stage{display:flex;justify-content:center;padding:clamp(10px,2vw,22px);border-radius:var(--radius);background:var(--glass-2);border:1px solid var(--glass-brd);box-shadow:var(--sh-inset)}
#inviteCanvas{width:100%;max-width:560px;height:auto;aspect-ratio:1/1;display:block;border-radius:18px;box-shadow:0 22px 50px -22px rgba(54,52,148,.5);background:#fff}
.invite-side{display:flex;flex-direction:column;gap:16px}
.invite-hint{font-size:.7rem;color:var(--muted);margin-top:8px;line-height:1.5}
.invite-hint em{font-style:italic;color:var(--ink)}
.invite-actions{display:flex;gap:12px;flex-wrap:wrap}
.invite-actions .btn{flex:1 1 calc(50% - 6px);min-width:120px}
.invite-tip{font-size:.74rem;color:var(--muted);line-height:1.6;padding:14px 16px;border:1px solid var(--glass-brd);border-radius:var(--radius-sm);background:var(--glass)}
@media(max-width:760px){
  .invite-wrap{grid-template-columns:1fr}
  #inviteCanvas{max-width:440px;margin:0 auto}
  .invite-actions .btn{flex:1 1 100%}
}

/* ── Responsive ── */
@media(min-width:981px){
  :root{--gutter-x:clamp(40px,4vw,80px);--gutter-y:clamp(44px,7vh,88px)}
  body{font-size:1.05rem}
  .brand,.counter{font-size:.76rem}
  label,.for-field label{font-size:.7rem}
  input,select,textarea{font-size:1rem;padding:13px 15px}
  .for-field input{font-size:1.4rem}
  .row{gap:26px}
  .page-sub{font-size:.92rem}
  .page-badge{font-size:.88rem}
  .hero-sub{font-size:1.2rem;line-height:1.65}
  .tab{font-size:.86rem;padding:11px 26px}
  .event-btn{font-size:.76rem;padding:11px 20px}
  .btn{font-size:.78rem;padding:13px 24px}
  .gs-lab{font-size:.7rem}
  .ft-label{font-size:.9rem}
  .ft-val{font-size:1.9rem}
  .tb-label{font-size:.98rem}
  .tb-val{font-size:1.06rem}
  .honorific,.relationship,.guest-num{font-size:.95rem}
  .summary-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,3vw,52px);align-items:start}
  .summary-grid .summary-list{max-width:none}
  .guest-item{gap:18px}
}
@media(min-width:681px) and (max-width:980px){
  .row-3{grid-template-columns:1fr 1fr}
  /* Guest row: name on its own line, the rest share an even, aligned row */
  .guest-name-wrap{flex:1 1 100%}
  .honorific,.guest-phone,.relationship,.reference{width:auto;flex:1 1 0;min-width:120px}
}
@media(min-width:681px) and (max-width:980px) and (orientation:portrait){
  :root{--gutter-x:clamp(34px,7vw,64px);--gutter-y:clamp(40px,6vh,72px)}
}
/* Phones (portrait) */
@media(max-width:680px){
  .page-nav{right:auto;left:50%;top:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);flex-direction:row;gap:13px;padding:10px 16px;border-radius:24px}
  .page{justify-content:flex-start;padding-top:calc(72px + env(safe-area-inset-top));padding-bottom:calc(var(--gutter-y) + 58px + env(safe-area-inset-bottom));gap:clamp(16px,3.2vh,24px)}
  .page.hero{justify-content:center;padding-top:calc(var(--gutter-y) + env(safe-area-inset-top))}
  .row-2,.row-3{grid-template-columns:1fr;gap:16px}
  .tab-panel{padding:18px}
  .gs-stat{padding-right:18px;margin-right:18px}
  .brand{font-size:.62rem}
  .counter{font-size:.62rem}
  input,select,textarea,.honorific{font-size:16px}
  .event-select-wrap{margin-top:22px;max-width:none}
  .hero-title{line-height:1.12}
  .hero-sub{max-width:100%}
  .page-head{gap:14px}
  .map-preview{height:180px}
  .action-row{gap:10px}
  .action-row .btn{flex:1 1 calc(50% - 5px);padding:14px}
  .guest-name-wrap,.guest-phone{flex-basis:100%}
  /* Honorific · relationship · reference sit three-up and stay aligned */
  .honorific,.relationship,.reference{width:auto;flex:1 1 30%;min-width:96px}
  .guest-item{gap:12px}
  .wa-actions .btn{flex:1 1 100%}
}
@media(max-width:400px){
  :root{--gutter-x:16px}
  .brand{display:none}
  .honorific{width:80px}
  .gs-stat{padding-right:14px;margin-right:14px}
  .action-row .btn{flex-basis:100%}
}
/* Short / landscape phones & small tablets */
@media(orientation:landscape) and (max-height:600px){
  .page,.page.hero{justify-content:flex-start;gap:16px;padding-top:calc(58px + env(safe-area-inset-top))}
  .hero-title{font-size:clamp(1.6rem,5vw,2.6rem)}
  .page-nav{flex-direction:column;right:calc(14px + env(safe-area-inset-right));left:auto;top:50%;bottom:auto;transform:translateY(-50%)}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
@media print{
  @page{size:A4;margin:16mm}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body::before,.app-header,.page-nav,.brand,.counter,.scroll-cue,.add-btn,#pages,.theme-toggle{display:none!important}
  /* Always print on clean white paper, even when the app is in dark mode —
     otherwise html.dark's dark background frames the page in black. */
  html,html.dark{background:#fff!important;color-scheme:light}
  body{background:#fff!important;margin:0}
  #printReport{display:block!important;color:#23222e;background:#fff;margin:0 auto;font-family:var(--sans);font-size:11px;line-height:1.5}

  /* Accent tokens for the report */
  #printReport{--pa:#0aa758;--pa2:#ed7d3a;--pink:#ef2d56}

  /* Cover */
  .pr-cover{padding:0 0 14px;border-bottom:3px solid var(--pa);margin-bottom:18px}
  .pr-kicker{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pa)}
  .pr-name{font-family:var(--serif);font-size:2.5rem;font-weight:700;line-height:1.05;margin:6px 0 4px;color:#1b1830}
  .pr-meta{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--pink)}
  .pr-meta2{font-size:.82rem;color:#555;margin-top:3px}
  .pr-prepared{font-size:.7rem;color:#999;margin-top:6px;letter-spacing:.03em}

  .pr-section{margin-bottom:20px}
  .pr-h{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:#2a2550;border-bottom:2px solid var(--pa);padding-bottom:6px;margin-bottom:10px;break-after:avoid;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
  .pr-h-sub{font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#999}
  .pr-row{display:flex;justify-content:space-between;gap:16px;font-size:.82rem;padding:5px 0;border-bottom:1px dotted #ddd;break-inside:avoid}
  .pr-row span{color:#777}

  /* ── Page 1 : the analytics dashboard, recoloured for paper ── */
  .pr-dashpage{margin-bottom:0}
  .pr-dash{color:#23222e}
  .pr-dash .dash-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
  .pr-dash .dash-kpi{background:#f6f4fd;border:1px solid #e7e4f3;border-radius:9px;box-shadow:none;padding:9px 11px;break-inside:avoid}
  .pr-dash .dk-val{font-family:var(--serif);font-size:1.25rem;font-weight:700;background:none;-webkit-text-fill-color:var(--pa);color:var(--pa)}
  .pr-dash .dk-lab{font-size:.56rem;color:#777;margin-top:3px}
  .pr-dash .dk-sub{font-size:.6rem;color:#999;margin-top:2px}
  .pr-dash .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0}
  .pr-dash .dash-card{background:#fff;border:1px solid #e7e4f3;border-radius:10px;box-shadow:none;padding:11px 13px;break-inside:avoid}
  .pr-dash .dash-card-h{font-family:var(--serif);font-size:.95rem;font-weight:700;color:#2a2550;margin-bottom:9px}
  .pr-dash .dash-bars{gap:6px}
  .pr-dash .db-lab{font-size:.66rem;color:#333}
  .pr-dash .db-track{height:9px;background:#ece9f6;box-shadow:none}
  .pr-dash .db-val{font-size:.62rem;color:#666}
  .pr-dash .dash-donut{gap:12px}
  .pr-dash .dn-top{fill:#23222e}
  .pr-dash .dn-bot{fill:#888}
  .pr-dash .dash-legend{font-size:.66rem;color:#333}
  .pr-dash .dp-track{height:11px;background:#ece9f6;box-shadow:none}
  .pr-dash .dp-fill{background:var(--pa)}
  .pr-dash .dp-meta{font-size:.6rem;color:#777}
  .pr-dash .dash-empty{font-size:.66rem;color:#999}

  /* ── Page 2 : plain, alphabetical guest names + party (no cards) ── */
  .pr-guestpage{break-before:page}
  .pr-namelist{list-style:none;margin:0;padding:0}
  .pr-nl-head{display:flex;align-items:baseline;gap:12px;padding:0 0 6px;margin-bottom:2px;border-bottom:2px solid var(--pa);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pa);break-inside:avoid;break-after:avoid}
  .pr-nl-row{display:flex;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dotted #ddd;font-size:.86rem;break-inside:avoid}
  .pr-namelist .nl-idx{font-family:var(--mono);font-size:.66rem;color:#aaa;min-width:20px;flex-shrink:0}
  .pr-namelist .nl-name{flex:1;font-weight:600;color:#1f1c33;overflow-wrap:anywhere}
  .pr-namelist .nl-party{font-family:var(--mono);font-weight:700;color:var(--pa);flex-shrink:0}
  .pr-nl-head .nl-party,.pr-nl-head .nl-idx{color:var(--pa)}
}