/* =====================================================================
   Design tokens.
   Picked a deep "stage curtain" base with vivid pink primary and an
   acid-lime accent that pops against it. Refined enough to feel
   designed, loud enough to feel like a party.
   ===================================================================== */
:root {
    --ink:        #0b0a0e;
    --ink-2:      #15131b;
    --ink-3:      #1f1c27;
    --paper:      #f6f1e7;
    --paper-dim:  #d8d2c5;
    --muted:      #aba6b8;
    --line:       rgba(246, 241, 231, 0.10);
    --line-soft:  rgba(246, 241, 231, 0.06);

    /* Primary brand accents */
    --hot:        #ff4d6d;   /* hot pink */
    --hot-bright: #ff7da0;
    --lime:       #d6ff3d;   /* acid lime */
    --orange:     #ff8a3d;
    --violet:     #a17dff;

    /* Glassy gradients used as backdrop */
    --grad-1: radial-gradient(1200px 600px at 20% -10%, rgba(255,77,109,0.32), transparent 60%),
              radial-gradient(900px 600px at 110% 10%, rgba(214,255,61,0.18), transparent 55%),
              radial-gradient(700px 500px at 50% 100%, rgba(161,125,255,0.18), transparent 60%);

    --radius-lg: 28px;
    --radius:    18px;
    --radius-sm: 12px;

    --shadow-1: 0 30px 80px -20px rgba(0,0,0,0.7), 0 8px 20px -8px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 0 1px rgba(246,241,231,0.06), 0 30px 60px -30px rgba(255,77,109,0.5);
}

/* =====================================================================
   Reset & base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    min-height: 100vh;
    background: var(--ink);
    color: var(--paper);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: var(--grad-1);
    z-index: -2;
    opacity: 0.9;
    pointer-events: none;
}
/* Film-grain overlay — gives the dark background some life */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Reusable animated color-blob background (used by Groups, Discover, etc.).
   The app applies .is-low-end on every device, so the static gradient
   fallback below is what actually renders in practice; the animated divs
   are kept for capable browsers without that class. */
.page-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; }
.page-blob.pb1 { width: 460px; height: 460px; background: #d6ff3d; top: -130px; left: -110px; animation: page-blob-1 26s ease-in-out infinite alternate; }
.page-blob.pb2 { width: 420px; height: 420px; background: #7a56ff; top: 22%; right: -150px; animation: page-blob-2 30s ease-in-out infinite alternate; }
.page-blob.pb3 { width: 360px; height: 360px; background: #ff4d8d; bottom: 6%; left: -90px; animation: page-blob-3 28s ease-in-out infinite alternate; }
.page-blob.pb4 { width: 400px; height: 400px; background: #4d9aff; bottom: -120px; right: 8%; animation: page-blob-4 32s ease-in-out infinite alternate; }
@keyframes page-blob-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px, 90px) scale(1.15); } }
@keyframes page-blob-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-90px, 70px) scale(1.10); } }
@keyframes page-blob-3 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px, -80px) scale(1.12); } }
@keyframes page-blob-4 { from { transform: translate(0,0) scale(1); } to { transform: translate(-70px, -60px) scale(1.10); } }
body.is-low-end .page-blob { display: none; }
body.is-low-end .page-blobs {
    background:
        radial-gradient(60% 50% at 14% 18%, rgba(214,255,61,0.26), transparent 65%),
        radial-gradient(55% 45% at 88% 28%, rgba(122,86,255,0.30), transparent 65%),
        radial-gradient(55% 50% at 10% 88%, rgba(255,77,141,0.28), transparent 65%),
        radial-gradient(60% 50% at 90% 90%, rgba(77,154,255,0.26), transparent 65%);
}
@media (prefers-reduced-motion: reduce) { .page-blob { animation: none !important; } }


a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select, button { font-family: inherit; color: inherit; }

.icon { width: 18px; height: 18px; flex-shrink: 0; }
.icon-lg { width: 22px; height: 22px; }
.icon-xl { width: 28px; height: 28px; }

/* =====================================================================
   Nav
   ===================================================================== */
/* =====================================================================
   Nav — has its own backdrop scrim so it stays readable on any theme.
   ===================================================================== */
.nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 12px;
    flex-wrap: wrap;
}
/* Backdrop scrim that sits behind the nav and creates contrast
   regardless of theme. The themed body bg shows through softly. */
.nav::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 72px;
    background: linear-gradient(180deg, rgba(11,10,14,0.65) 0%, rgba(11,10,14,0.0) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
    pointer-events: none;
}
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Fraunces', serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -0.03em;
    font-variation-settings: "SOFT" 100, "WONK" 1;
    /* Brand uses hardcoded cream — the scrim ensures it's always readable */
    color: #f6f1e7;
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.brand .dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: #ff4d6d;
    border-radius: 50%;
    margin: 0 3px;
    box-shadow: 0 0 20px #ff4d6d;
    transform: translateY(-2px);
}
.brand em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: #d6ff3d;
    font-size: 24px;
    margin-left: 6px;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* All nav buttons + the avatar trigger lock to this exact pixel
       height so they visually align. Overrides the padding-based
       sizing on .btn (which varied subtly across font + border combos).
       Override at the mobile breakpoint below. */
    --nav-btn-h: 44px;
}
/* Nav buttons specifically — ensure readable text on any backdrop */
.nav-actions .btn {
    color: #f6f1e7;
    border-color: rgba(246,241,231,0.25);
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
    /* Padding becomes horizontal-only; vertical fill comes from height +
       inline-flex align-items:center which is already on .btn. */
    height: var(--nav-btn-h);
    padding-top: 0;
    padding-bottom: 0;
    box-sizing: border-box;
}
.nav-actions .btn.btn-hot {
    color: #f6f1e7;
    text-shadow: none;
}
.nav-actions .btn.btn-lime {
    color: #0b0a0e;
    text-shadow: none;
}
.nav-actions .btn .label-text {
    display: inline;
}

/* Mobile: collapse button labels to icons-only so nav fits one line.
   Staged so labels survive as long as they fit, and lower-priority buttons
   collapse first. "Sign in" is the least important action, so its label goes
   first; the primary "Create an Event" keeps its label down to the narrowest
   widths; everything else collapses only when truly cramped. */
@media (max-width: 640px) {
    .nav { padding: 14px 16px; gap: 8px; }
    .brand, .brand em { font-size: 21px; }
    .nav-actions { gap: 6px; --nav-btn-h: 38px; }
    .nav-actions .btn {
        padding-left: 11px;
        padding-right: 11px;
    }
    .nav-actions .avatar-trigger .avatar { width: 32px; height: 32px; }
}
/* Step 1 (≤560px): drop the "Sign in" label first — lowest priority. */
@media (max-width: 560px) {
    .nav-actions .nav-signin .label-text { display: none; }
    .nav-actions .nav-signin { gap: 0; }
}
/* Step 2 (≤440px): now collapse the remaining secondary labels
   ("My events", etc.) — but keep the primary "Create an Event". */
@media (max-width: 440px) {
    .nav-actions .btn:not(.nav-create) .label-text { display: none; }
    .nav-actions .btn:not(.nav-create) { gap: 0; }
}
/* Step 3 (≤360px): finally collapse the primary too, if we must. */
@media (max-width: 360px) {
    .nav-actions .btn .label-text { display: none; }
    .nav-actions .btn { gap: 0; }
}
/* Extra narrow (under ~380px): brand shrinks further so all items fit */
@media (max-width: 380px) {
    .brand, .brand em { font-size: 18px; }
    .brand .dot { width: 8px; height: 8px; }
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 0.01em;
    border: none;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    background: var(--paper);
    color: var(--ink);
}
.btn-primary:hover { box-shadow: 0 10px 30px -10px rgba(246,241,231,0.5); }

.btn-hot {
    background: var(--hot);
    color: #fff8e8;
    box-shadow: 0 10px 30px -10px rgba(255,77,109,0.6);
}
.btn-hot:hover { background: var(--hot-bright); }
/* The hot button's fill is a saturated accent in every theme, so its label
   stays light even on light themes (where --paper would otherwise be dark). */
body.has-light-theme .btn-hot { color: #fff8e8; }

.btn-lime {
    background: var(--lime);
    color: var(--ink);
}

.btn-ghost {
    background: transparent;
    color: var(--paper);
    border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--line-soft); }

.btn-danger {
    background: transparent;
    color: var(--hot);
    border: 1px solid rgba(255,77,109,0.4);
}
.btn-danger:hover { background: rgba(255,77,109,0.10); border-color: var(--hot); }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 26px; font-size: 15.5px; }

.avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--ink-3);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
}

/* Avatar dropdown menu in the nav */
.avatar-menu { position: relative; }
.avatar-trigger {
    /* The trigger is now a .btn .btn-ghost (see markup) so it inherits
       the same height + box-sizing as the sibling nav buttons. We just
       override the shape (circle not pill), hide the visible border so
       it looks like a frameless avatar, and zero the horizontal padding.
       Border stays at 1px solid transparent so the border-box height
       math matches the other buttons EXACTLY. */
    border-color: transparent !important;
    background: transparent !important;
    border-radius: 50% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Square it off so the bounding box is a circle, not a pill. */
    width: var(--nav-btn-h, 44px);
    cursor: pointer;
    transition: transform 0.12s ease;
    /* Ensure it doesn't shrink in the flex row */
    flex-shrink: 0;
    /* Keep relative for the unread-count dot positioning */
    position: relative;
}
.avatar-trigger:hover {
    transform: scale(1.05);
    background: transparent !important;
}
.avatar-trigger .avatar {
    transition: border-color 0.12s ease;
    width: 34px; height: 34px;
}
.avatar-menu.open .avatar-trigger .avatar {
    border-color: var(--hot);
}
.avatar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: rgba(15,15,22,0.92);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-radius: 14px;
    padding: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 20px 40px -10px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.08);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.avatar-menu.open .avatar-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.avatar-dropdown-head {
    padding: 10px 12px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
}
.avatar-dropdown-name {
    font-weight: 600;
    font-size: 14px;
    color: #fff8e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-dropdown-email {
    font-size: 12px;
    color: rgba(255,248,232,0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}
.avatar-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #fff8e8;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.avatar-dropdown a:hover { background: rgba(255,255,255,0.10); }
.avatar-dropdown a .icon { width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0; }

/* Dropdown row with a unread-count badge on the right. The badge
   self-positions via margin-left:auto so when it's absent (zero
   notifications), the icon + label stay flush-left like every other
   row in the menu — no space-between weirdness. */
.dropdown-with-badge {
    /* No special layout — relies on margin-left:auto on the badge */
}
.dropdown-unread-badge {
    background: #ff4d6d;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: auto;
}

/* Unread-messages dot on the avatar trigger. Appears top-right of the
   avatar with the count inside. Self-positions relative to .avatar-menu
   (the trigger's parent). */
.avatar-unread-dot {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ff4d6d;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 18px;
    padding: 0 4px;
    text-align: center;
    box-shadow: 0 0 0 2px rgba(11,10,14,0.65), 0 2px 6px -1px rgba(255,77,109,0.6);
    pointer-events: none;
    /* Subtle pulse to draw the eye */
    animation: avatar-unread-pulse 2.2s ease-in-out infinite;
}
@keyframes avatar-unread-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.10); }
}

/* =====================================================================
   Layout / cards
   ===================================================================== */
.wrap { max-width: 720px; margin: 0 auto; padding: 12px 22px 80px; }
.wrap-wide { max-width: 1100px; margin: 0 auto; padding: 12px 22px 80px; }

/* Create page wraps everything in a glass container so the live theme
   preview behind it shows through with the same aesthetic as the
   published event page. */
.create-wrap {
    margin: 24px auto 80px;
    padding: 36px 32px 44px;
    background: rgba(15,15,22,0.55);
    border-radius: 28px;
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,0.05),
        0 40px 80px -20px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.04);
}
@media (max-width: 700px) {
    .create-wrap {
        margin: 12px 14px 60px;
        padding: 26px 18px 30px;
        border-radius: 22px;
    }
}
/* Inside the create-wrap, individual .card blocks need to be subtler
   so they don't compete with the outer glass. */
.create-wrap > form > .card,
.create-wrap > form .card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    padding: 22px;
    margin-bottom: 16px;
}
.create-wrap > form > .card:last-of-type,
.create-wrap > form .card:last-of-type {
    margin-bottom: 0;
}

.card {
    background: linear-gradient(180deg, rgba(31,28,39,0.6), rgba(21,19,27,0.6));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* =====================================================================
   Form styles
   ===================================================================== */
.field { margin-bottom: 18px; }
.field-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-bottom: 8px;
}
.input, .textarea, .select {
    width: 100%;
    background: rgba(11, 10, 14, 0.5);
    border: 1px solid var(--line);
    color: var(--paper);
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.input:focus, .textarea:focus, .select:focus {
    border-color: var(--hot);
    background: rgba(11,10,14,0.7);
}
.textarea { min-height: 90px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: rgba(246,241,231,0.35); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
/* The When/Ends/Capacity row holds wide datetime-local inputs that overflow
   a fixed 1fr column at mid widths. auto-fit + minmax wraps each field to a
   new line as soon as it can't fit ~210px, so nothing spills off-screen. */
.field-row-datetime {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
@media (max-width: 600px) {
    .field-row-datetime { grid-template-columns: 1fr; }
}

/* Title field — special, big, hand-drawn feeling */
.title-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--paper);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(32px, 6vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    padding: 8px 0;
    font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 100;
    /* Textarea-specific so it behaves like a giant wrapping input */
    resize: none;
    overflow: hidden;
    min-height: 1.2em;
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.title-input::placeholder { color: rgba(246,241,231,0.25); font-style: italic; }

/* Small character counter under the title — reassures the user the
   field will accept what they're writing and shows when they're
   approaching the 75-char ceiling. */
.title-counter {
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    letter-spacing: 0.04em;
    user-select: none;
}
body.has-light-theme .title-counter { color: rgba(26,22,18,0.55); }

/* Inline icon-prefix fields used for host/location/cost/cap */
.input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    background: rgba(11,10,14,0.5);
    border: 1px solid var(--line);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease;
}
.input-row:focus-within { border-color: var(--hot); }
.input-row .icon { color: var(--muted); }
.input-row input,
.input-row select {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--paper);
    font: inherit;
    font-size: 15px;
}
.input-row input::placeholder { color: rgba(246,241,231,0.35); }
.input-row .prefix { color: var(--muted); font-size: 15px; }

/* Native <select> — by default browsers paint these with a white
   background and gray text that's unreadable on dark themes. Force
   the dark color scheme + supply our own caret + override the option
   list colors where supported. */
.input-row select,
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 24px;
    cursor: pointer;
}
/* The option list popup. Most browsers ignore styling here; color-scheme:
   dark above handles macOS/Safari and modern Chrome on dark systems. We
   also set explicit option background/color for browsers that honor it. */
.input-row select option,
select option {
    background: #1a1612;
    color: var(--paper, #f6f1e7);
}

/* Native date/time picker — make the calendar icon visible on dark theme */
.input-row input[type="datetime-local"],
.input-row input[type="date"],
.input-row input[type="time"] {
    color-scheme: dark;
    cursor: pointer;
}
/* datetime-local and number inputs carry an intrinsic minimum width (the
   native picker/spinner reserves space), which makes them overflow narrow
   containers unlike text inputs. Force them to obey the flex box and clip any
   native chrome that would otherwise spill past the parent. */
.input-row input[type="datetime-local"],
.input-row input[type="date"],
.input-row input[type="time"],
.input-row input[type="number"] {
    width: 0;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}
.input-row input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.input-row input[type="date"]::-webkit-calendar-picker-indicator,
.input-row input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) saturate(0.6) hue-rotate(45deg);
    opacity: 0.65;
    cursor: pointer;
    margin-left: 8px;
}
.input-row input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.input-row input[type="date"]::-webkit-calendar-picker-indicator:hover,
.input-row input[type="time"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* =====================================================================
   Cover image uploader
   ===================================================================== */
.cover-uploader {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    border: 1.5px dashed rgba(246,241,231,0.2);
    background: linear-gradient(135deg, rgba(255,77,109,0.08), rgba(214,255,61,0.06));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease;
}
.cover-uploader:hover { border-color: var(--hot); }
.cover-uploader .hint {
    color: var(--muted);
    font-size: 13px;
    text-align: center;
    padding: 0 12px;
}
.cover-uploader .hint b { color: var(--paper); display: block; font-size: 15px; margin-bottom: 4px; }
.cover-uploader img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.cover-uploader input[type=file] { display: none; }

/* Cover picker — tabbed switcher between Upload and Gallery */
.cover-and-title {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
    transition: grid-template-columns 0.25s ease;
}
@media (max-width: 720px) {
    .cover-and-title { grid-template-columns: 1fr; }
}
/* When the cover-picker is expanded (gallery is active), let the picker
   span the whole row so the user can browse a wide grid. The title
   column collapses below (or hides on narrow screens). */
.cover-and-title:has(.cover-picker.is-expanded) {
    grid-template-columns: 1fr;
}
.cover-picker.is-expanded {
    grid-column: 1 / -1;
}
/* Title column gets de-emphasized during gallery browse — pushed below
   the gallery so the gallery has the full width. */
.cover-and-title:has(.cover-picker.is-expanded) .title-col {
    order: 2;
}
.cover-picker { width: 100%; transition: max-width 0.25s ease; }
.cover-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.cover-tabs-row {
    flex: 1;
    display: flex;
    gap: 4px;
    background: rgba(246,241,231,0.04);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
}
/* Done button — sits to the right of the Upload/Gallery tabs.
   Hidden by default; only appears when the picker is expanded into
   the gallery. The hide rule needs higher specificity than the
   .gallery-close-btn display:inline-flex base rule (which the Done
   button also wears), hence the picker:not() selector. */
.cover-picker:not(.is-expanded) .cover-tabs-done {
    display: none;
}
.cover-picker.is-expanded .cover-tabs-done {
    display: inline-flex;
}
.cover-tabs-done {
    flex-shrink: 0;
}
.cover-tab {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--muted);
    padding: 8px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.cover-tab:hover { color: var(--paper); }
.cover-tab.is-active {
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
}
.cover-pane { display: none; }
.cover-pane.is-active { display: block; }
.cover-empty {
    text-align: center;
    padding: 24px 16px;
    border: 1.5px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 13px;
}
.cover-empty p { margin: 10px 0 0; line-height: 1.5; }
.cover-empty code {
    background: rgba(0,0,0,0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}

/* Toolbar above the gallery: filter chips on the left, close button
   on the right. Done button moved into .cover-tabs row above. */
.gallery-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--paper);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.gallery-close-btn .icon { width: 13px; height: 13px; }
.gallery-close-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
}
body.has-light-theme .gallery-close-btn {
    background: rgba(255,255,255,0.65);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
}
body.has-light-theme .gallery-close-btn:hover {
    background: #fff;
    border-color: rgba(26,22,18,0.30);
}

/* Gallery filter chips — row of category pills above the grid */
.gallery-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.gallery-filter-chip {
    border: 1px solid var(--line);
    background: rgba(246,241,231,0.04);
    color: var(--paper-dim);
    padding: 6px 12px;
    border-radius: 999px;
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.gallery-filter-chip:hover {
    color: var(--paper);
    border-color: rgba(246,241,231,0.25);
}
.gallery-filter-chip.is-active {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
    font-weight: 600;
}
.gallery-filter-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    background: rgba(0,0,0,0.18);
    color: inherit;
    padding: 1px 6px;
    border-radius: 999px;
    opacity: 0.75;
}
.gallery-filter-chip.is-active .gallery-filter-count {
    background: rgba(0,0,0,0.10);
    opacity: 1;
}

/* Gallery grid */
.cover-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    transition: max-height 0.25s ease;
}
/* Expanded: bigger thumbnails + taller scroll area */
.cover-picker.is-expanded .cover-gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    max-height: 540px;
    gap: 12px;
}
.gallery-img {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.1s ease, border-color 0.15s ease;
}
.gallery-img:hover { transform: scale(1.04); }
.gallery-img input { position: absolute; opacity: 0; pointer-events: none; }
.gallery-img img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.gallery-img:has(input:checked) {
    border-color: var(--lime);
    transform: scale(1.04);
}
.gallery-img:has(input:checked)::after {
    content: '✓';
    position: absolute;
    top: 4px; right: 4px;
    background: var(--lime);
    color: var(--ink);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.title-col { min-width: 0; }

/* =====================================================================
   Expandable extras (music, gift, attire, food, parking, link)
   ===================================================================== */
.extras-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px dashed var(--line);
}
.extras-section h3 {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--paper-dim);
}
.extras-section .sub {
    color: var(--muted);
    font-size: 13.5px;
    margin: 0 0 16px;
}

.extra-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.extra-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--ink-2);
    color: var(--paper);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}
.extra-chip:hover { border-color: rgba(246,241,231,0.25); }
.extra-chip.active {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.extra-chip .icon { width: 14px; height: 14px; }

.extra-input-card {
    display: none;
    background: rgba(11,10,14,0.4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    gap: 12px;
}
.extra-input-card.open { display: flex; flex-direction: column; }
.extra-input-card .head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--lime);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
}
.extra-input-card .head-label { display: inline-flex; align-items: center; gap: 8px; }
.extra-close {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.13s ease, color 0.13s ease, border-color 0.13s ease;
}
.extra-close:hover { background: rgba(255,77,109,0.16); border-color: rgba(255,77,109,0.45); color: var(--hot); }
.extra-close .icon { width: 13px; height: 13px; }
.extra-input-card input, .extra-input-card textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 8px 0;
    font-size: 15px;
    color: var(--paper);
    outline: none;
    width: 100%;
}
/* Auto-growing detail textarea: starts one line tall, expands as the user
   adds newlines (driven by JS), never shows a scrollbar. */
.extra-textarea {
    resize: none; overflow: hidden;
    font-family: inherit; line-height: 1.5;
    min-height: 38px;
    padding-right: 52px;
}
/* Field wrapper holds the textarea + a character counter in its corner. */
.extra-field { position: relative; }
.extra-counter {
    position: absolute; right: 0; bottom: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--muted);
    pointer-events: none; background: transparent;
}
.extra-input-card input::placeholder,
.extra-input-card textarea::placeholder { color: rgba(246,241,231,0.3); }

/* =====================================================================
   Sticky CTA bar at the bottom of the create form
   ===================================================================== */
.cta-bar {
    position: sticky;
    bottom: 14px;
    /* z-index needed so sticky CTA renders above any positioned siblings.
       The theme picker cards have `position: relative` with inner
       z-index values (theme-emoji: 2, is-selected ::after: 3) that
       were painting on top of the CTA when scrolling. Anything ≥ 4
       works; 20 gives generous headroom for future additions. */
    z-index: 20;
    margin-top: 32px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: rgba(11,10,14,0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    display: flex; gap: 10px; align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-1);
}
/* Legacy .grow helper for any third-party use — kept for compatibility,
   but the production markup no longer renders one. */
.cta-bar .grow { flex: 1; color: var(--muted); font-size: 13px; }
.cta-bar .grow b { color: var(--paper); }

/* Exit is always icon-only (square). */
.cta-exit { padding-left: 13px !important; padding-right: 13px !important; }
.cta-exit .icon { margin: 0; }
.cta-bar .btn { white-space: nowrap; flex-shrink: 0; }

/* Progressive collapse (JS-driven, like the host bar). As the bar runs out of
   room the buttons drop their text to icons one at a time, in this order:
   Cancel → Save → Publish. Exit is already icon-only. Each stage is a class
   on .cta-bar that hides one button's .cta-btn-text. */
.cta-bar.cta-collapse-1 .cta-cancel .cta-btn-text { display: none; }
.cta-bar.cta-collapse-1 .cta-cancel { padding-left: 13px; padding-right: 13px; }
.cta-bar.cta-collapse-2 .cta-save .cta-btn-text { display: none; }
.cta-bar.cta-collapse-2 .cta-save { padding-left: 13px; padding-right: 13px; }
.cta-bar.cta-collapse-3 .cta-publish .cta-btn-text { display: none; }
.cta-bar.cta-collapse-3 .cta-publish { padding-left: 13px; padding-right: 13px; }
.cta-bar .btn .icon { flex-shrink: 0; }

/* =====================================================================
   Home / landing
   ===================================================================== */
.hero {
    text-align: center;
    padding: 80px 20px 60px;
    max-width: 880px;
    margin: 0 auto;
}
.hero .eyebrow {
    display: inline-flex;
    align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px; text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--lime);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(214,255,61,0.4);
    background: rgba(214,255,61,0.08);
    margin-bottom: 28px;
}
.hero h1 {
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: clamp(48px, 9vw, 110px);
    line-height: 0.95;
    letter-spacing: -0.045em;
    margin: 0 0 24px;
    font-variation-settings: "SOFT" 50, "WONK" 1, "opsz" 144;
}
.hero h1 em {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    color: var(--hot);
}
.hero h1 .strike { color: var(--lime); display: inline-block; transform: rotate(-3deg); }
.hero p {
    color: var(--paper-dim);
    font-size: 19px;
    max-width: 540px;
    margin: 0 auto 36px;
}
.hero .cta-row { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   Event page
   ===================================================================== */
.event-wrap {
    width: calc(100% - 28px);
    max-width: 720px;
    margin: 24px auto 0;
    padding: 36px 38px 80px;
    /* Apple Glass — softly distinguished from the themed bg via layered
       shadows rather than a hard border line. The inset top highlight
       reads as a glass edge catching light; the dark outer shadow
       creates separation without competing with the theme. */
    background: rgba(15,15,22,0.55);
    border-radius: 28px;
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    box-shadow:
        /* inner top highlight — the glass edge catching light */
        inset 0 1px 0 rgba(255,255,255,0.18),
        /* very faint inner bottom shadow — gives the panel depth */
        inset 0 -1px 0 rgba(0,0,0,0.15),
        /* soft outer glow that pushes the panel forward from the theme */
        0 1px 0 rgba(255,255,255,0.05),
        0 40px 80px -20px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.04);
}
@media (max-width: 748px) {
    .event-wrap {
        margin: 12px auto 60px;
        padding: 26px 22px 30px;
        border-radius: 22px;
    }
}

/* =====================================================================
   Light-theme content adjustments.
   On light themes (Paper, Confetti, Sunshine, Hot Pink, Lavender, Mint),
   the panel itself becomes light cream — a true "light theme" look —
   and text inside flips to dark for readability. This feels much more
   harmonious with bright backdrops than dark glass on cream ever did.
   ===================================================================== */
body.has-light-theme .event-wrap,
body.has-light-theme .create-wrap,
body.has-light-theme .signin-card {
    /* Cream glass — semi-transparent so the theme shows through, like
       the dark glass on dark themes but inverted in color. Preserves
       the backdrop blur + saturation for that proper "frosted" feel. */
    background: rgba(255,248,232,0.62);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        inset 0 -1px 0 rgba(0,0,0,0.05),
        0 1px 0 rgba(255,255,255,0.30),
        0 40px 80px -20px rgba(0,0,0,0.18),
        0 0 0 1px rgba(0,0,0,0.04);
}
/* Flip the text + line color variables to dark inside the light panel.
   These cascade through every `.field-label`, `.sub`, `.toggle-sub`,
   `.event-host`, `.comment-text`, etc. that reads from them. */
body.has-light-theme .event-wrap,
body.has-light-theme .host-admin,
body.has-light-theme .create-wrap {
    --paper: #1a1612;
    --paper-dim: rgba(26,22,18,0.78);
    --muted: rgba(26,22,18,0.58);
    --ink: #1a1612;
    --line: rgba(26,22,18,0.16);
    --line-soft: rgba(26,22,18,0.08);
    color: #1a1612;
}
/* Inner cards inside the create form — soft dark tint on a pale base */
body.has-light-theme .create-wrap .card,
body.has-light-theme .event-wrap .card {
    background: rgba(26,22,18,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
/* Title shadow on dark glass is fine on light themes too, but the text
   shadow at rgba(0,0,0,0.35) reads as smudge against the cream panel.
   Remove it. */
body.has-light-theme .event-title {
    text-shadow: none;
}
/* Inputs / textareas / selects in the light panel — give them a slightly
   lighter inner surface so they don't disappear into the panel. */
body.has-light-theme .input-row,
body.has-light-theme .comment-composer,
body.has-light-theme .announcement-composer,
body.has-light-theme .password-panel .input-row {
    background: rgba(255,255,255,0.55);
    border-color: rgba(26,22,18,0.15);
}
body.has-light-theme .input-row input,
body.has-light-theme .input-row select,
body.has-light-theme .comment-composer textarea,
body.has-light-theme .announcement-composer textarea,
body.has-light-theme textarea,
body.has-light-theme input {
    color: #1a1612;
    color-scheme: light;
}
body.has-light-theme .input-row input::placeholder,
body.has-light-theme textarea::placeholder {
    color: rgba(26,22,18,0.40);
}
body.has-light-theme .input-row select option,
body.has-light-theme select option {
    background: #fff8e8;
    color: #1a1612;
}
/* Dropdown caret arrow for selects on light themes — use a dark stroke */
body.has-light-theme select,
body.has-light-theme .input-row select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
/* Avatar dropdown stays dark — it's a contextual menu, not part of the
   themed panel — so we don't override it. */

/* ----- Light-theme adjustments for individual decorative elements ----- */

/* Toggle switches: the off-state track needs a visible dark tint on
   cream panels. The knob inverts so it stays visible against the track. */
body.has-light-theme .toggle-switch {
    background: rgba(26,22,18,0.20);
}
body.has-light-theme .toggle-switch::after {
    background: #fff8e8;
}
body.has-light-theme .toggle-row input:checked + .toggle-switch {
    background: #2a6e1a; /* darker green for proper contrast on cream */
}
body.has-light-theme .toggle-row input:checked + .toggle-switch::after {
    background: #fff8e8;
}

/* .textarea and .input class elements use a hardcoded dark background.
   Flip to a soft cream-tinted surface on light themes. */
body.has-light-theme .input,
body.has-light-theme .textarea,
body.has-light-theme .select {
    background: rgba(255,255,255,0.55);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
}
body.has-light-theme .input:focus,
body.has-light-theme .textarea:focus,
body.has-light-theme .select:focus {
    background: rgba(255,255,255,0.75);
    border-color: var(--hot);
}
body.has-light-theme .input::placeholder,
body.has-light-theme .textarea::placeholder {
    color: rgba(26,22,18,0.40);
}

/* RSVP status banner — the "You're in" / "Maybe" / "Can't go" pill at
   the top of the RSVP section. Default uses --ink-2 (dark) for the bg.
   On light theme, the colored variants already use rgba accent overlays
   which read OK, but the base needs a light surface. */
body.has-light-theme .rsvp-status-banner {
    background: rgba(255,255,255,0.55);
    border-color: rgba(26,22,18,0.12);
}
body.has-light-theme .rsvp-status-banner.going {
    background: rgba(140,200,40,0.20);
    border-color: rgba(80,160,30,0.45);
}
body.has-light-theme .rsvp-status-banner.maybe {
    background: rgba(255,138,61,0.18);
    border-color: rgba(255,138,61,0.45);
}
body.has-light-theme .rsvp-status-banner.no {
    background: rgba(255,77,109,0.16);
    border-color: rgba(255,77,109,0.45);
}
body.has-light-theme .rsvp-status-banner.pending {
    background: rgba(200,150,30,0.16);
    border-color: rgba(200,150,30,0.40);
}
body.has-light-theme .rsvp-status-banner.pending .icon {
    color: #a37a1b;
}

/* Status pills (admin) + guest badges + plus-ones tag: when these use
   --lime as the FOREGROUND text color, the default light-yellow-green
   lime is invisible on cream. Force darker accent text. */
body.has-light-theme .guest-row .badge.going,
body.has-light-theme .plus-ones-tag {
    color: #4a7a14;
    background: rgba(140,200,40,0.20);
}
body.has-light-theme .guest-row .badge.maybe {
    color: #a05d10;
    background: rgba(255,138,61,0.18);
}
body.has-light-theme .guest-row .badge.no {
    color: #c12048;
    background: rgba(255,77,109,0.16);
}

/* Expandable section "on" tag — uses --lime bg with --ink text. On
   light theme the lime is the same pale yellow-green which is hard to
   see; bump to a darker green. */
body.has-light-theme .expandable-summary-tag {
    background: #4a7a14;
    color: #fff8e8;
}
body.has-light-theme .expandable-summary-tag.muted {
    background: rgba(26,22,18,0.12);
    color: rgba(26,22,18,0.55);
}

/* Pending pill in the host's view — darken the yellow on cream */
body.has-light-theme .pending-pill {
    background: rgba(200,150,30,0.16);
    color: #8a6510;
    border-color: rgba(200,150,30,0.40);
}

/* Approval queue + announcement card — same logic */
body.has-light-theme .approval-queue {
    background: rgba(200,150,30,0.06);
    border-color: rgba(200,150,30,0.30);
}
body.has-light-theme .approval-queue-eyebrow {
    color: #8a6510;
}
body.has-light-theme .approval-row {
    background: rgba(255,255,255,0.45);
}
body.has-light-theme .announcement-composer {
    background: rgba(74,122,20,0.06);
    border-color: rgba(74,122,20,0.25);
}
body.has-light-theme .announcement {
    background: rgba(74,122,20,0.05);
    border-color: rgba(74,122,20,0.20);
}
body.has-light-theme .announcement-host-tag {
    background: #4a7a14;
    color: #fff8e8;
}

/* Comments composer + comment card */
body.has-light-theme .comment-composer {
    background: rgba(255,255,255,0.50);
    border-color: rgba(26,22,18,0.14);
}
body.has-light-theme .comment {
    background: rgba(255,255,255,0.45);
    border-color: rgba(26,22,18,0.10);
}

/* Comments locked banner (pink/hot) */
body.has-light-theme .locked-banner {
    background: rgba(255,77,109,0.10);
    border-color: rgba(255,77,109,0.30);
}

/* Plus-ones row in the RSVP form */
body.has-light-theme .rsvp-plus-ones-row {
    background: rgba(255,255,255,0.45);
    border-color: rgba(26,22,18,0.12);
}
body.has-light-theme .rsvp-plus-ones-select {
    background-color: rgba(255,255,255,0.7);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
body.has-light-theme .rsvp-plus-ones-select option {
    background: #fff8e8;
    color: #1a1612;
}
/* Plus-ones cap select on the create form (inline with toggle) */
body.has-light-theme .plus-ones-select-wrap select {
    background-color: rgba(255,255,255,0.7);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
body.has-light-theme .plus-ones-select-wrap select option {
    background: #fff8e8;
    color: #1a1612;
}

/* Inner cards (.event-meta rows, .pay-method rows, etc) */
body.has-light-theme .meta-row,
body.has-light-theme .icon-bubble {
    background: rgba(255,255,255,0.40);
}
body.has-light-theme .meta-row .label {
    color: rgba(26,22,18,0.55);
}

/* Avatar dropdown in nav stays dark — but the nav itself becomes light */
body.has-light-theme .nav-glass {
    background: rgba(255,248,232,0.7);
    border-color: rgba(26,22,18,0.10);
}

/* Buttons: .btn-ghost has a light text color by default; on light themes
   that's invisible. Flip text + border to dark. */
body.has-light-theme .btn-ghost {
    color: #1a1612;
    border-color: rgba(26,22,18,0.20);
    background: rgba(255,255,255,0.30);
}
body.has-light-theme .btn-ghost:hover {
    background: rgba(255,255,255,0.55);
    border-color: rgba(26,22,18,0.35);
}
/* Lime button — keep the green but use a darker tone for proper contrast */
body.has-light-theme .btn-lime {
    background: #4a7a14;
    color: #fff8e8;
}
body.has-light-theme .btn-lime:hover { background: #3a6210; }

/* Host link on event page — needs dark on cream */
body.has-light-theme .event-host .host-link {
    color: #1a1612;
}
body.has-light-theme .event-host .host-link:hover {
    color: var(--hot);
}

/* Add to calendar dropdown trigger uses translucent white over a dark
   page — flip on light theme */
body.has-light-theme .add-to-cal-btn {
    background: rgba(26,22,18,0.08);
    border-color: rgba(26,22,18,0.18);
    color: #1a1612;
}
body.has-light-theme .add-to-cal-btn:hover {
    background: rgba(26,22,18,0.16);
}
/* Add-to-calendar popover: was hard-coded dark glass with light text.
   On light themes the .meta-row a rule flipped the link color to dark
   (var(--paper) = #1a1612) while the popover background stayed dark —
   net result: black text on dark. Flip the popover to a light cream
   glass and force dark link text inside it. */
body.has-light-theme .add-to-cal-menu {
    background: rgba(255,248,232,0.95);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 20px 40px -10px rgba(26,22,18,0.25),
        0 0 0 1px rgba(26,22,18,0.10);
}
body.has-light-theme .add-to-cal-menu a {
    color: #1a1612;
    text-decoration: none;
}
body.has-light-theme .add-to-cal-menu a:hover {
    background: rgba(26,22,18,0.06);
}

/* ----- Item 3: theme picker "selected" text -----
   The selected theme card uses --lime (pale yellow-green) for the name
   label and check ring color. On light backgrounds that's invisible.
   Flip to dark green. */
body.has-light-theme .theme-card.is-selected {
    border-color: #2a6e1a;
}
body.has-light-theme .theme-card.is-selected::after {
    background: #2a6e1a;
    color: #fff8e8;
}
body.has-light-theme .theme-card.is-selected .theme-name {
    color: #2a6e1a;
}
body.has-light-theme .theme-name {
    color: rgba(26,22,18,0.70);
}

/* ----- Item 5: RSVP buttons on light themes -----
   The default state uses --paper for text and a transparent dark border;
   on light theme that text was dark on a dark background hover/current
   state. Flip the whole interaction model: light surfaces with dark
   text, colored fills when current/hovered. */
body.has-light-theme .rsvp-btn {
    background: rgba(255,255,255,0.60);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
}
body.has-light-theme .rsvp-btn:hover {
    background: rgba(255,255,255,0.85);
    border-color: rgba(26,22,18,0.30);
}
body.has-light-theme .rsvp-btn.going-btn:hover,
body.has-light-theme .rsvp-btn.going-btn.is-current {
    background: #2a6e1a;
    color: #fff8e8;
    border-color: #2a6e1a;
}
body.has-light-theme .rsvp-btn.maybe-btn:hover,
body.has-light-theme .rsvp-btn.maybe-btn.is-current {
    background: #c25a14;
    color: #fff8e8;
    border-color: #c25a14;
}
body.has-light-theme .rsvp-btn.no-btn:hover,
body.has-light-theme .rsvp-btn.no-btn.is-current {
    background: #c12048;
    color: #fff8e8;
    border-color: #c12048;
}

/* ----- Item 6: "Host Tools" eyebrow on light themes -----
   Default uses --lime (pale yellow-green) which is unreadable on cream.
   Flip to dark green. Use !important to override any future inline or
   higher-specificity rule that might creep in. */
body.has-light-theme .host-admin-eyebrow,
body.has-light-theme .host-tools-eyebrow {
    color: #2a6e1a !important;
}
body.has-light-theme .host-admin-eyebrow .icon,
body.has-light-theme .host-tools-eyebrow .icon {
    color: #2a6e1a;
    stroke: currentColor;
}
/* Invite-box (host's "Your invite link" panel) — yellow background +
   yellow label text are unreadable on light themes. Flip to dark-green
   accents matching the rest of the light-theme palette. */
body.has-light-theme .invite-bar {
    background: rgba(255,255,255,0.92);
    border-color: rgba(74,122,20,0.34);
}
body.has-light-theme .invite-bar-label {
    color: #2a6e1a;
}
body.has-light-theme .invite-url {
    background: rgba(255,255,255,0.70);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
}
/* Host-admin container itself — subtle cream surface on light themes */
body.has-light-theme .host-admin {
    background: rgba(255,248,232,0.62);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border-color: rgba(26,22,18,0.10);
}

/* "Spots left" / "full" tag — used to be inline color:var(--lime) which
   was invisible on cream. Promoted to classes so light theme can flip
   them to deep green / cranberry. */
.capacity-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    margin-left: 6px;
}
.capacity-left { color: var(--lime); }
.capacity-full { color: var(--hot); }
body.has-light-theme .capacity-left { color: #2a6e1a; }
body.has-light-theme .capacity-full { color: #c12048; }

/* ----- Item 4: muted contrast (light theme side) -----
   Make the muted text darker so descriptions, field labels, and sub-copy
   read clearly against the cream panel. Labels especially were too faint. */
body.has-light-theme .event-wrap,
body.has-light-theme .host-admin,
body.has-light-theme .create-wrap {
    --muted: rgba(26,22,18,0.82);
    --paper-dim: rgba(26,22,18,0.92);
}
/* Field labels (the mono uppercase captions) need extra weight on light bg. */
body.has-light-theme .field-label { color: rgba(26,22,18,0.78); }

/* +1s row select: light theme styling for the select inside the toggle */
body.has-light-theme .plus-ones-row .plus-ones-select-wrap select {
    background-color: rgba(255,255,255,0.70);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1612' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
body.has-light-theme .plus-ones-row .plus-ones-select-wrap select option {
    background: #fff8e8;
    color: #1a1612;
}

/* Sticky CTA bar at the bottom of the create form — was hardcoded dark.
   On light theme, flip to a light frosted bar with dark text. */
body.has-light-theme .cta-bar {
    background: rgba(255,248,232,0.82);
    border-color: rgba(26,22,18,0.12);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.5),
        0 -20px 40px -20px rgba(0,0,0,0.10);
}
body.has-light-theme .cta-bar .grow {
    color: rgba(26,22,18,0.65);
}
body.has-light-theme .cta-bar .grow b {
    color: #1a1612;
}

/* Cover Upload/Gallery tabs — the tab pill background and active state.
   The pill background lives on .cover-tabs-row (inner element), not the
   outer .cover-tabs row (which is just a flex container for tabs + Done). */
body.has-light-theme .cover-tabs-row {
    background: rgba(26,22,18,0.06);
    border-color: rgba(26,22,18,0.12);
}
body.has-light-theme .cover-tab {
    color: rgba(26,22,18,0.55);
}
body.has-light-theme .cover-tab:hover {
    color: #1a1612;
}
body.has-light-theme .cover-tab.is-active {
    background: #2a6e1a;
    color: #fff8e8;
}
body.has-light-theme .gallery-filter-row {
    border-bottom-color: rgba(26,22,18,0.14);
}
body.has-light-theme .gallery-filter-chip {
    background: rgba(255,255,255,0.55);
    color: rgba(26,22,18,0.75);
    border-color: rgba(26,22,18,0.18);
}
body.has-light-theme .gallery-filter-chip:hover {
    background: rgba(255,255,255,0.85);
    color: #1a1612;
    border-color: rgba(26,22,18,0.30);
}
body.has-light-theme .gallery-filter-chip.is-active {
    background: #2a6e1a;
    color: #fff8e8;
    border-color: #2a6e1a;
}
body.has-light-theme .gallery-filter-count {
    background: rgba(26,22,18,0.10);
}
body.has-light-theme .gallery-filter-chip.is-active .gallery-filter-count {
    background: rgba(255,255,255,0.20);
    color: #fff8e8;
}
body.has-light-theme .cover-empty {
    border-color: rgba(26,22,18,0.20);
    color: rgba(26,22,18,0.60);
}
body.has-light-theme .cover-empty code {
    background: rgba(26,22,18,0.10);
    color: #1a1612;
}

/* Payment-method cards (Venmo/Cash App/PayPal/Zelle) — base background
   was hardcoded; flip to a soft cream surface on light themes. */
body.has-light-theme .pm-card {
    background: rgba(255,255,255,0.55);
    border-color: rgba(26,22,18,0.12);
}
body.has-light-theme .pm-card.is-on {
    background: rgba(140,200,40,0.14);
    border-color: rgba(80,160,30,0.40);
}

/* Theme picker cards on the create form — backgrounds may be hardcoded
   dark. The CARDS themselves should stay vivid (they preview themes),
   but their borders/text need to read on cream. */
body.has-light-theme .theme-card {
    border-color: rgba(26,22,18,0.14);
}
body.has-light-theme .theme-card-name {
    color: #1a1612;
}

/* Extras chips ("link", "music", "gift", etc.) — inactive uses --ink-2
   for bg which defaults to dark; on light theme both bg and text were
   becoming dark = invisible. Flip to soft cream surface with dark text,
   active state uses dark pill with cream text (matching toggle aesthetic). */
body.has-light-theme .extra-chip {
    background: rgba(255,255,255,0.55);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
}
body.has-light-theme .extra-chip:hover {
    background: rgba(255,255,255,0.75);
    border-color: rgba(26,22,18,0.28);
}
body.has-light-theme .extra-chip.active {
    background: #2a6e1a;
    color: #fff8e8;
    border-color: #2a6e1a;
}
body.has-light-theme .extra-chip.active:hover {
    background: #225a14;
    border-color: #225a14;
}

/* Extras input card — when chip is active, an input shows below.
   Default has dark bg, flip on light themes. */
body.has-light-theme .extra-input-card {
    background: rgba(255,255,255,0.45);
    border-color: rgba(26,22,18,0.14);
}
body.has-light-theme .extra-input-card input,
body.has-light-theme .extra-input-card textarea {
    background: rgba(255,255,255,0.70);
    color: #1a1612;
    border-color: rgba(26,22,18,0.18);
}
body.has-light-theme .extra-input-card input::placeholder,
body.has-light-theme .extra-input-card textarea::placeholder {
    color: rgba(26,22,18,0.40);
}

/* Override the yellow/amber accents that I previously set to #8a6510 —
   they're still too light against the cream panel. Drop to deeper amber. */
body.has-light-theme .pending-pill {
    background: rgba(160,110,20,0.16);
    color: #5a3a08;
    border-color: rgba(160,110,20,0.45);
}
body.has-light-theme .approval-queue {
    background: rgba(160,110,20,0.06);
    border-color: rgba(160,110,20,0.30);
}
body.has-light-theme .approval-queue-eyebrow {
    color: #5a3a08;
}
body.has-light-theme .rsvp-status-banner.pending {
    background: rgba(160,110,20,0.14);
    border-color: rgba(160,110,20,0.42);
}
body.has-light-theme .rsvp-status-banner.pending .icon {
    color: #6b4810;
}

/* Light theme: the "ends" time + various meta sub-text using paper-dim
   were a touch too light. Boost. */
body.has-light-theme .meta-end-time,
body.has-light-theme .when-time,
body.has-light-theme .when-end-different-day {
    color: rgba(26,22,18,0.65);
}
body.has-light-theme .when-date,
body.has-light-theme .when-row-when { color: #1a1612; }
body.has-light-theme .when-dash { color: rgba(26,22,18,0.40); }
body.has-light-theme .when-row-label { color: rgba(26,22,18,0.55); }

/* Profile danger zone + admin tool: hardcoded dark backgrounds */
body.has-light-theme .danger-row {
    background: rgba(255,255,255,0.45);
    border-color: rgba(26,22,18,0.14);
}
body.has-light-theme .danger-row-delete {
    background: rgba(255,77,109,0.08);
    border-color: rgba(255,77,109,0.35);
}

/* Contact host modal — opens over the event page so inherits theme.
   The dialog has its own dark glass — flip on light theme for consistency.
   The dialog uses `var(--paper)` for text color, but the dialog itself
   is outside .event-wrap (and is moved to the top layer on showModal),
   so my .event-wrap variable overrides don't reach it. Set the text
   color vars directly on the dialog. */
body.has-light-theme .contact-modal {
    background: rgba(255,248,232,0.95);
    color: #1a1612;
    color-scheme: light;
    --paper: #1a1612;
    --paper-dim: rgba(26,22,18,0.86);
    --muted: rgba(26,22,18,0.72);
    --line: rgba(26,22,18,0.16);
}
body.has-light-theme .contact-modal h3,
body.has-light-theme .contact-modal .contact-form,
body.has-light-theme .contact-modal .contact-modal-eyebrow,
body.has-light-theme .contact-modal .contact-modal-sub {
    color: #1a1612;
}
body.has-light-theme .contact-modal .contact-modal-eyebrow {
    color: rgba(26,22,18,0.55);
}
body.has-light-theme .contact-modal .contact-modal-sub {
    color: rgba(26,22,18,0.70);
}
body.has-light-theme .contact-modal textarea {
    background: rgba(255,255,255,0.70);
    color: #1a1612;
    border-color: rgba(26,22,18,0.20);
}
body.has-light-theme .contact-modal textarea::placeholder {
    color: rgba(26,22,18,0.40);
}
body.has-light-theme .contact-close {
    color: rgba(26,22,18,0.55);
}
body.has-light-theme .contact-close:hover {
    color: #1a1612;
}

/* "Who's coming" headcount chips — going/maybe/no pills under the
   guest list header. Default uses --ink-2 (dark) for background; on
   light theme my paper override flips text to dark too, so it was
   dark-on-dark = invisible. Use a light surface here. */
body.has-light-theme .guest-count {
    background: rgba(255,255,255,0.55);
    border-color: rgba(26,22,18,0.14);
    color: #1a1612;
}
body.has-light-theme .guest-count.going b { color: #2a6e1a; }
body.has-light-theme .guest-count.maybe b { color: #a05d10; }
body.has-light-theme .guest-count.no    b { color: #c12048; }

/* =====================================================================
   Wide / desktop event layout — kicks in automatically at >=980px.
   Two-column split above the fold (cover on the left, sticky; details
   on the right), then full-width sections below the split.
   Below 980px the narrow stacked layout is used.
   ===================================================================== */
.event-wrap { position: relative; }

/* Guarantee side padding in the tablet range (701–979px), where neither
   the mobile (<=700) nor desktop (>=980) override applies. This makes the
   base padding explicit for that band so nothing can collapse it. */
@media (min-width: 749px) and (max-width: 979px) {
    .event-wrap {
        padding: 36px 38px 60px;
        margin: 20px auto 0;
    }
}

@media (min-width: 980px) {
    .event-wrap {
        max-width: 1100px;
        padding: 44px 48px 52px;
    }

    /* The above-the-fold wrapper is a 2-column grid with exactly TWO
       children: the cover (col 1) and a content wrapper (col 2). All
       right-column items live inside .event-above-fold-content and are
       stacked there via normal block flow — no grid row distribution
       to worry about. The cover sticks within the grid container; the
       container's height is determined by max(cover height, content
       height), so sticky naturally lets go at the bottom of whichever
       is taller. */
    .event-above-fold {
        display: grid;
        grid-template-columns: 380px 1fr;
        column-gap: 40px;
        align-items: start;
        margin-bottom: 8px;
    }

    .event-above-fold > .event-cover {
        grid-column: 1;
        position: sticky;
        top: 24px;
        margin: 0;
        aspect-ratio: 1 / 1;
        align-self: start;
    }
    .event-above-fold > .event-cover img {
        width: 100%; height: 100%;
        object-fit: cover;
        border-radius: 18px;
    }

    /* Right-column container — holds title, host, meta, description,
       RSVP, payments. Normal block flow within. */
    .event-above-fold > .event-above-fold-content {
        grid-column: 2;
        min-width: 0;
    }
    /* When there's no cover image, the content wrapper spans both cols
       (centered + narrower). See :has() rule near the end of this block. */

    /* Tight stacking under the title — pull host + meta up close to
       the title without the giant default vertical margins. */
    .event-above-fold-content > h1.event-title {
        margin-top: 0;
        margin-bottom: 8px;
    }
    .event-above-fold-content > p.event-host {
        margin-top: 0;
        margin-bottom: 16px;
    }
    .event-above-fold-content > .event-meta {
        margin-top: 0;
        margin-bottom: 20px;
    }
    .event-above-fold-content > .rsvp-section,
    .event-above-fold-content > .payments-section {
        margin-top: 0;
    }
    .event-above-fold-content > .event-description {
        /* The description paragraph under When/Where. */
        margin-top: 0;
        margin-bottom: 22px;
    }

    /* Title can be larger when it has dedicated column space */
    .event-wrap h1.event-title {
        font-size: clamp(36px, 4.2vw, 56px);
    }

    /* No cover image → content wrapper expands to full width, centered
       single column (still wider than narrow mode). */
    .event-above-fold:not(:has(> .event-cover)) {
        grid-template-columns: 1fr;
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
    }
    .event-above-fold:not(:has(> .event-cover)) > .event-above-fold-content {
        grid-column: 1;
    }
}

.preview-banner {
    background: linear-gradient(135deg, var(--lime), #b5e028);
    color: var(--ink);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
    font-weight: 600;
    font-size: 14px;
}
.preview-banner .grow { flex: 1; }
/* Banner buttons sit on a lime background, so the default ghost button
   (cream text on transparent) is unreadable. Use dark-on-translucent
   instead for Edit, and keep Publish dark-on-cream for prominence. */
.preview-banner .btn-ghost {
    background: rgba(11,10,14,0.10);
    color: var(--ink);
    border-color: rgba(11,10,14,0.25);
}
.preview-banner .btn-ghost:hover {
    background: rgba(11,10,14,0.20);
    border-color: rgba(11,10,14,0.40);
}
.preview-banner .btn-hot {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.preview-banner .btn-hot:hover {
    background: #000;
}

.cancelled-banner {
    background: rgba(255,77,109,0.18);
    border: 1px solid rgba(255,77,109,0.40);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex; align-items: center; gap: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.cancelled-banner .grow { flex: 1; }
.cancelled-banner-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255,77,109,0.18);
    color: var(--hot);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cancelled-banner-title { font-weight: 600; font-size: 15px; color: var(--hot); }
.cancelled-banner-sub { font-size: 13px; opacity: 0.8; margin-top: 2px; }

/* Host admin block — Edit / Cancel / Invite URL */
.host-admin {
    /* Matches .event-wrap exactly via width:calc(100% - 28px) + max-width:
       always a 14px side gutter, centered, no dead zones at any width. */
    width: calc(100% - 28px);
    max-width: 720px;
    margin: 28px auto 0;
    padding: 36px 38px;
    /* Same glass treatment as .event-wrap (dark tint + backdrop blur) so
       the panel stays clearly readable on every theme — the old faint 5%
       white wash was nearly invisible on light/busy themes. */
    background: rgba(15,15,22,0.55);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 20px 50px -20px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.04);
}
@media (max-width: 748px) {
    .host-admin { margin: 24px auto 0; padding: 26px 22px; }
}
@media (min-width: 980px) {
    .host-admin { max-width: 1100px; padding: 32px 48px; }
}
.host-admin-head { margin-bottom: 16px; }
.host-admin-eyebrow {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lime);
    display: inline-flex; align-items: center; gap: 6px;
}

/* Co-host management — roster + add form, lives in the host tools panel. */
.cohosts {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    margin-bottom: 18px;
}
.cohosts-summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    font-size: 15px; font-weight: 600;
    user-select: none;
}
.cohosts-summary::-webkit-details-marker { display: none; }
.cohosts-summary-label { display: flex; align-items: center; gap: 7px; }
.cohosts-summary-label .icon { width: 16px; height: 16px; }
.cohosts-count {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    background: rgba(255,255,255,0.1); color: var(--paper-dim);
    padding: 1px 8px; border-radius: 999px;
}
.cohosts-chevron { color: var(--muted); display: inline-flex; transition: transform 0.18s ease; }
.cohosts-chevron .icon { width: 18px; height: 18px; }
.cohosts[open] .cohosts-chevron { transform: rotate(90deg); }
.cohosts-body { padding: 0 18px 16px; }
.cohosts-head { margin-bottom: 12px; }
.cohosts-head h3 {
    margin: 0 0 2px;
    font-size: 15px;
    display: flex; align-items: center; gap: 7px;
}
.cohosts-head h3 .icon { width: 16px; height: 16px; }
.cohosts-sub {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--muted);
}
/* Edit screen: half-width "Hosted by" input + Add co-hosts button */
.host-cohost-row { display: flex; gap: 10px; align-items: stretch; }
.host-cohost-row .host-name-input { flex: 1; min-width: 0; }
.cohost-open-btn { flex-shrink: 0; white-space: nowrap; }
.cohost-open-btn.is-icon-only { padding-left: 12px; padding-right: 12px; }
.cohost-open-btn.is-icon-only .icon { margin: 0; }
.cohost-btn-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px;
    background: rgba(214,255,61,0.2); color: var(--lime, #d6ff3d);
    border-radius: 999px; font-size: 11px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 540px) {
    .host-cohost-row { flex-direction: column; }
    .cohost-open-btn { justify-content: center; }
}

/* Co-host management modal (opened from the edit screen) */
.cohost-modal {
    border: 1px solid var(--line); border-radius: 18px;
    background: #15131a; color: var(--paper);
    padding: 22px; width: 100%; max-width: 460px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.cohost-modal::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
body.has-light-theme .cohost-modal {
    background: #fff8e8;
    color: #1a1612;
    --paper: #1a1612;
    --paper-dim: rgba(26,22,18,0.78);
    --muted: rgba(26,22,18,0.58);
    --line: rgba(26,22,18,0.16);
    border-color: rgba(26,22,18,0.12);
}
/* On the cream modal, the lime/green accents are unreadable — flip them to
   a deep green that reads on light. */
body.has-light-theme .cohost-modal .cohost-tag-owner {
    background: rgba(60,130,30,0.16);
    color: #2f6b16;
    border-color: rgba(60,130,30,0.4);
}
body.has-light-theme .cohost-modal .cohost-modal-eyebrow .icon { color: #2f6b16; }
body.has-light-theme .cohost-modal .cohost-add-row .btn-lime {
    background: #3c8216; color: #fff; border-color: #3c8216;
}
/* The count badge on the edit button (outside the modal) on light theme */
body.has-light-theme .cohost-btn-count {
    background: rgba(60,130,30,0.18); color: #2f6b16;
}
.cohost-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.cohost-modal-eyebrow {
    display: flex; align-items: center; gap: 7px;
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 18px;
}
.cohost-modal-eyebrow .icon { width: 18px; height: 18px; color: var(--lime); }
.cohost-modal-sub { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cohost-modal-close { background: none; border: 0; color: var(--paper-dim); cursor: pointer; padding: 4px; flex-shrink: 0; }
.cohost-list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.cohost-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
}
.cohost-id { flex: 1; min-width: 0; }
.cohost-name {
    font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.cohost-email {
    font-size: 12px; color: var(--muted);
    margin-top: 1px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cohost-tag {
    font-family: ui-monospace, monospace;
    font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: var(--paper);
    border: 1px solid rgba(255,255,255,0.14);
}
.cohost-tag-owner {
    background: rgba(214,255,61,0.14);
    color: var(--lime);
    border-color: rgba(214,255,61,0.3);
}
.cohost-remove-form { margin: 0; flex-shrink: 0; }
.cohost-remove-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: #ffb4b4;
    background: rgba(255,80,80,0.08);
    border: 1px solid rgba(255,80,80,0.22);
    padding: 6px 11px; border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.cohost-remove-btn .icon { width: 12px; height: 12px; }
.cohost-remove-btn:hover {
    background: rgba(255,80,80,0.16);
    border-color: rgba(255,80,80,0.4);
}
/* Per-row actions: Make host + Remove sit side by side. */
.cohost-row-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.cohost-transfer-btn {
    display: inline-flex; align-items: center; gap: 4px;
    font: inherit; font-size: 12px; font-weight: 600;
    color: var(--lime, #d6ff3d);
    background: rgba(214,255,61,0.10);
    border: 1px solid rgba(214,255,61,0.28);
    padding: 6px 11px; border-radius: 999px;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.cohost-transfer-btn .icon { width: 12px; height: 12px; }
.cohost-transfer-btn:hover { background: rgba(214,255,61,0.2); }
.cohost-transfer-form { margin: 0; }
body.has-light-theme .cohost-modal .cohost-transfer-btn {
    color: #2f6b16; background: rgba(60,130,30,0.14); border-color: rgba(60,130,30,0.35);
}
/* "or" divider between the attendee picker and the email field. */
.cohost-or {
    text-align: center; font-size: 11.5px; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.1em;
    margin: 12px 0;
    position: relative;
}
.cohost-pick-form { margin: 0 0 0; }
select.cohost-add-input { cursor: pointer; }
.cohost-queue-empty { display: none; }
.cohost-add-form { margin: 0; }
.cohost-add-label {
    display: block;
    font-size: 12.5px; font-weight: 600;
    margin-bottom: 6px;
}
.cohost-add-row { display: flex; gap: 8px; align-items: stretch; }
.cohost-add-input {
    flex: 1; min-width: 0;
    font: inherit; font-size: 14px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--paper);
}
.cohost-add-input::placeholder { color: var(--muted); }
.cohost-add-input:focus {
    outline: none;
    border-color: rgba(214,255,61,0.5);
}
.cohost-add-hint {
    margin: 8px 0 0;
    font-size: 11.5px; color: var(--muted);
}
.cohost-note {
    margin: 0; font-size: 12.5px; color: var(--muted);
}

/* Host inbox — messages from guests, stored in DB so the host never
   misses one even when email delivery fails on shared hosting. */
.host-inbox {
    background: rgba(214,255,61,0.05);
    border: 1px solid rgba(214,255,61,0.20);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.host-inbox-head { margin-bottom: 12px; }
.host-inbox-head h3 {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 17px;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--paper);
}
.host-inbox-count {
    background: var(--lime);
    color: var(--ink);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.host-inbox-sub {
    color: var(--muted);
    font-size: 12.5px;
    margin: 4px 0 0;
}
.host-inbox-list {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 12px;
}
.host-message {
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 10px;
}
.host-message-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.host-message-head .avatar { width: 36px; height: 36px; flex-shrink: 0; }
.host-message-from { flex: 1; min-width: 0; }
.host-message-name {
    font-weight: 600;
    color: var(--paper);
    font-size: 14.5px;
}
.host-message-email {
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
    word-break: break-all;
}
.host-message-email:hover { color: var(--lime); text-decoration: underline; }
.host-message-time {
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--muted);
    flex-shrink: 0;
}
.host-message-body {
    margin: 0;
    color: var(--paper);
    font-size: 14.5px;
    line-height: 1.55;
    word-wrap: break-word;
}
.host-message-flag {
    margin: 8px 0 0;
    font-size: 12px;
    color: rgb(255,210,80);
    font-style: italic;
}

/* Host-only delete control on each guest message. Inline form sits
   below the body. Compact, subtle red — destructive but not shouting. */
.host-message-actions {
    margin: 8px 0 0;
}
.host-message-delete-btn {
    background: transparent;
    border: 1px solid rgba(255,77,109,0.25);
    color: rgba(255,138,160,0.85);
    padding: 4px 11px;
    border-radius: 999px;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.host-message-delete-btn .icon { width: 12px; height: 12px; }
.host-message-delete-btn:hover {
    background: #ff4d6d;
    color: #fff;
    border-color: #ff4d6d;
}
body.has-light-theme .host-message-delete-btn {
    border-color: rgba(180,30,55,0.35);
    color: #a82844;
}
body.has-light-theme .host-message-delete-btn:hover {
    background: #d9304f;
    color: #fff;
    border-color: #d9304f;
}

/* Light theme overrides for inbox */
body.has-light-theme .host-inbox {
    background: rgba(74,122,20,0.06);
    border-color: rgba(74,122,20,0.25);
}
body.has-light-theme .host-inbox-count {
    background: #2a6e1a;
    color: #fff8e8;
}
body.has-light-theme .host-message {
    background: rgba(255,255,255,0.50);
    border-color: rgba(26,22,18,0.12);
}
body.has-light-theme .host-message-email:hover { color: #2a6e1a; }
body.has-light-theme .host-message-flag { color: #8a6510; }
/* Floating invite bar — mirrors the edit page's .cta-bar exactly: a normal
   full-width flow child that uses position:sticky so it floats just above
   the viewport bottom while scrolling, then settles at the end of the page.
   It's a direct child of <main>, so the whole page height is its sticky
   container — that's what lets it float the entire way down rather than
   only appearing near the bottom. */
/* Slim floating host action bar — invite link + Edit + Cancel. Floats just
   above the viewport bottom while scrolling, settles at page end. */
.host-bar {
    position: sticky;
    bottom: 14px;
    z-index: 40;
    width: calc(100% - 28px);
    max-width: 720px;
    margin: 20px auto 40px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: rgba(11,10,14,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(214,255,61,0.28);
    box-shadow: var(--shadow-1);
    color: var(--paper);
}
/* On light themes the bar goes light too — matching the editor's CTA bar
   treatment (same background, border, and lifted shadow) so the two sticky
   bars feel consistent. */
body.has-light-theme .host-bar {
    background: rgba(255,248,232,0.82);
    border-color: rgba(26,22,18,0.12);
    box-shadow:
        0 -1px 0 rgba(255,255,255,0.5),
        0 -20px 40px -20px rgba(0,0,0,0.10);
    color: #1a1612;
}
@media (min-width: 980px) {
    .host-bar { max-width: 1100px; }
}
.host-bar-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* Actions + Share NEVER shrink — they keep their full labels at all widths. */
.host-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.host-bar-actions .btn-sm { font-size: 13px; padding: 8px 14px; white-space: nowrap; }
.host-bar-exit { padding-left: 11px !important; padding-right: 11px !important; }
.host-bar-exit .icon { margin: 0; }

/* Share button — full size with "Share" label, never collapses. */
.host-bar-share {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    color: var(--paper);
    font: inherit; font-size: 13px; font-weight: 600;
    white-space: nowrap;
    transition: background 0.13s ease;
}
.host-bar-share:hover { background: rgba(255,255,255,0.12); }
body.has-light-theme .host-bar-share {
    background: rgba(26,22,18,0.06);
    border-color: rgba(26,22,18,0.20);
    color: #1a1612;
}
body.has-light-theme .host-bar-share:hover { background: rgba(26,22,18,0.12); }
.host-bar-share.is-copied { background: rgba(214,255,61,0.2); border-color: rgba(214,255,61,0.4); }
.host-bar-share .icon { width: 16px; height: 16px; }

/* Invite link — the ONLY flexible element. It shrinks first (dropping the
   URL, then the words) so the other buttons keep their labels. */
.host-bar-invite {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: 8px;
    background: rgba(214,255,61,0.10);
    border: 1px solid rgba(214,255,61,0.28);
    color: var(--lime, #d6ff3d);
    font: inherit; font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    transition: background 0.13s ease;
    text-align: left;
    overflow: hidden;
}
.host-bar-invite:hover { background: rgba(214,255,61,0.18); }
.host-bar-invite.is-copied { background: rgba(214,255,61,0.26); }
body.has-light-theme .host-bar-invite {
    background: rgba(47,125,24,0.10);
    border-color: rgba(47,125,24,0.35);
    color: #2f7d18;
}
body.has-light-theme .host-bar-invite:hover { background: rgba(47,125,24,0.18); }
.host-bar-invite-label {
    display: inline-flex; align-items: center; gap: 5px;
    flex-shrink: 0; white-space: nowrap;
}
.host-bar-invite-label .icon { width: 14px; height: 14px; }
.host-bar-invite-url {
    flex: 1; min-width: 0;
    overflow: hidden; white-space: nowrap;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; font-weight: 500;
    color: rgba(214,255,61,0.7);
}
.host-bar-invite-url > span {
    display: inline-block;
    will-change: transform;
}
/* When the URL is wider than its box, JS adds .is-marquee and sets the exact
   scroll distance (--marquee-dist) + duration (--marquee-time). The text then
   eases out to reveal the tail, pauses, and returns — a smooth back-and-forth
   so the whole link is readable without truncation. */
.host-bar-invite-url.is-marquee > span {
    animation: hostbar-url-marquee var(--marquee-time, 6s) ease-in-out infinite alternate;
}
@keyframes hostbar-url-marquee {
    0%, 18%   { transform: translateX(0); }
    82%, 100% { transform: translateX(var(--marquee-dist, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .host-bar-invite-url.is-marquee > span { animation: none; }
    .host-bar-invite-url { text-overflow: ellipsis; }
}

/* JS-driven progressive collapse (applied to .host-bar). Stage 1: the OTHER
   buttons drop their text (icon only) to give the invite link room. Stage 2:
   if still too tight, the invite link collapses to its icon. The URL is never
   hidden on its own — it stays visible and marquees. */
.host-bar.hb-hide-btn-text .host-bar-btn-text { display: none; }
.host-bar.hb-hide-btn-text .host-bar-share-text { display: none; }
.host-bar.hb-hide-invite-label .host-bar-invite {
    flex: 0 0 auto;
}
.host-bar.hb-hide-invite-label .host-bar-invite-url { display: none; }
.host-bar.hb-hide-invite-label .host-bar-invite-label-text { display: none; }
.host-bar.hb-hide-invite-label .host-bar-invite-label { gap: 0; }
.host-bar.hb-hide-invite-label .host-bar-invite-label .icon { margin: 0; }

@media (max-width: 480px) {
    .host-bar { padding: 9px 11px; }
}

.invite-bar {
    /* Matches .event-wrap via width:calc(100% - 28px) + max-width — always
       a 14px gutter, centered, no dead zones. */
    position: sticky;
    bottom: 14px;
    z-index: 40;
    width: calc(100% - 28px);
    max-width: 720px;
    margin: 20px auto 40px;
    padding: 12px 22px;
    border-radius: var(--radius);
    background: rgba(11,10,14,0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(214,255,61,0.28);
    box-shadow: var(--shadow-1);
}
@media (max-width: 748px) {
    .invite-bar { margin: 18px auto 40px; }
}
@media (min-width: 980px) {
    .invite-bar { max-width: 1100px; padding: 12px 48px; }
}

.invite-bar-inner {
    display: flex;
    gap: 10px;
    align-items: center;
}
.invite-bar-label {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(214,255,61,0.9);
    display: inline-flex; align-items: center; gap: 5px;
    flex-shrink: 0;
}
.invite-bar-label .icon { width: 13px; height: 13px; }
.invite-bar #inviteCopyBtn { flex-shrink: 0; }
.invite-url {
    flex: 1; min-width: 0;
    background: rgba(0,0,0,0.3);
    color: var(--paper);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    border: 1px solid rgba(246,241,231,0.10);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex; align-items: center;
}
/* On narrow screens the label can drop to keep the URL + button usable. */
@media (max-width: 520px) {
    .invite-bar-label { display: none; }
}
.host-admin-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
}

/* Toggle row — used for "keep guest list private" */
.toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(246,241,231,0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.toggle-row input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.toggle-switch {
    width: 42px; height: 24px;
    background: var(--ink-3);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: var(--paper);
    border-radius: 50%;
    transition: left 0.15s ease;
}
.toggle-row input:checked + .toggle-switch { background: var(--lime); }
.toggle-row input:checked + .toggle-switch::after { left: 21px; background: var(--ink); }
.toggle-text {
    /* min-width: 0 is critical here. Without it, the default
       min-width: auto on flex items would refuse to shrink the
       toggle-text below the intrinsic width of its child <input>
       (which is around 170px by default). On narrow phones that
       forced the entire toggle-row to overflow its container,
       making the password text field appear to extend past the
       parent div. With min-width:0 the text and input shrink
       gracefully to fit. */
    flex: 1;
    min-width: 0;
}
.toggle-title { font-weight: 600; font-size: 14px; }
.toggle-sub { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }

/* Plus-ones row: extends .toggle-row by adding a select on the right
   edge. The select lives inside the <label>, so its event propagation
   is stopped in the markup to keep dropdown clicks from toggling the
   checkbox. When .is-off, the select fades + is disabled (its value
   isn't submitted, so controller sees max_plus_ones = 0). */
.plus-ones-row .plus-ones-select-wrap {
    flex: 0 0 auto;
    margin-left: 12px;
    transition: opacity 0.18s ease;
}
.plus-ones-row .plus-ones-select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background: rgba(0,0,0,0.30);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--paper);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 8px 30px 8px 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    min-width: 110px;
}
.plus-ones-row .plus-ones-select-wrap select:focus {
    border-color: var(--hot);
}
.plus-ones-row .plus-ones-select-wrap select option {
    background: #1a1612;
    color: var(--paper, #f6f1e7);
}
.plus-ones-row.is-off .plus-ones-select-wrap {
    opacity: 0.35;
    pointer-events: none;
}
@media (max-width: 540px) {
    .plus-ones-row .plus-ones-select-wrap {
        margin-left: 0;
        margin-top: 10px;
        /* Width matches content size, not full-width — full-width looks
           ridiculous on mobile because the select only needs ~130px. */
        width: auto;
        align-self: flex-start;
    }
    .plus-ones-row .plus-ones-select-wrap select {
        width: auto;
        min-width: 130px;
    }
}

/* Payment method cards in the create form — checkbox toggles each one */
.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* Prevent overflow when input contents are longer than column. */
    min-width: 0;
}
.payment-grid > * { min-width: 0; }
@media (max-width: 600px) {
    .payment-grid { grid-template-columns: 1fr; }
}
.pm-card {
    display: block;
    cursor: pointer;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(246,241,231,0.03);
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.pm-card.is-on {
    border-color: var(--lime);
    background: rgba(214,255,61,0.06);
}
.pm-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pm-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.pm-toggle-switch {
    width: 32px; height: 20px;
    background: var(--ink-3);
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.pm-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--paper);
    border-radius: 50%;
    transition: left 0.15s ease;
}
.pm-card.is-on .pm-toggle-switch { background: var(--lime); }
.pm-card.is-on .pm-toggle-switch::after { left: 14px; background: var(--ink); }
.pm-card-label { font-weight: 600; font-size: 14px; }
.pm-card-input input { transition: opacity 0.15s ease; }
.pm-card:not(.is-on) .pm-card-input { opacity: 0.5; }
.pm-card:not(.is-on) .pm-card-input input { pointer-events: none; }
.input-row .prefix {
    color: var(--muted);
    font-family: ui-monospace, monospace;
    font-size: 13px;
    user-select: none;
}

/* Tiny inline button */
.btn-tiny { padding: 6px 12px; font-size: 12px; }

/* ============== Payment section on event page ============== */
.payments-section { margin: 32px 0; }
.payments-section h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 6px;
    display: flex; align-items: center; gap: 10px;
}
.cost-pill {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    background: var(--lime);
    color: var(--ink);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.payments-section .sub { color: var(--muted); font-size: 13px; margin: 0 0 16px; }
.pay-amount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.pay-amount-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.pay-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.pay-method {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: 100%;
    transition: transform 0.12s ease, border-color 0.12s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.pay-method:hover {
    transform: translateY(-1px);
    border-color: var(--lime);
}
.pay-method-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(0,0,0,0.4);
}
.pay-venmo    .pay-method-icon { background: #3D95CE; color: white; }
.pay-cashapp  .pay-method-icon { background: #00C244; color: white; }
.pay-paypal   .pay-method-icon { background: #003087; color: white; }
.pay-zelle    .pay-method-icon { background: #6D1ED4; color: white; }

.pay-method-body { flex: 1; min-width: 0; }
.pay-method-label { font-weight: 600; font-size: 15px; }
.pay-method-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pay-method-note { font-size: 12px; color: var(--muted); margin-top: 4px; font-style: italic; }
.pay-method-action {
    color: var(--lime);
    display: flex;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: 'JetBrains Mono', monospace;
}
.pay-method-action .copied { color: var(--lime); font-weight: 700; }
.pay-method-action .tap-to-copy { color: var(--muted); font-size: 11px; }
.optional, .required {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 6px;
}
.optional {
    /* Quiet, low-emphasis hint — small and faded so it doesn't compete
       with the field label. */
    color: var(--paper);
    opacity: 0.3;
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
.required { color: var(--hot); }

.event-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(800px 400px at 30% 30%, var(--hot), transparent 60%),
        radial-gradient(600px 400px at 90% 80%, var(--violet), transparent 60%),
        var(--ink-2);
    margin-bottom: 30px;
    box-shadow: var(--shadow-1);
}
.event-cover img { width: 100%; height: 100%; object-fit: cover; }

.event-group-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--paper-dim); text-decoration: none;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    vertical-align: middle;
    transition: color 0.13s ease, border-color 0.13s ease;
}
.event-host-sep { color: var(--muted); margin: 0 6px; }
.event-group-link .icon { width: 13px; height: 13px; }
.event-group-link:hover { color: var(--paper); border-color: rgba(255,255,255,0.25); }
.event-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(36px, 7vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    margin: 0 0 6px;
    font-variation-settings: "SOFT" 80, "WONK" 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    /* Subtle shadow improves legibility across all themes. Light themes
       set --title-shadow to 'none' to avoid dark-on-dark muddiness. */
    text-shadow: var(--title-shadow, 0 1px 24px rgba(0,0,0,0.35));
}
.event-host {
    color: var(--paper-dim);
    font-size: 16px;
    margin: 0 0 22px;
}
.event-host b { color: var(--paper); font-weight: 600; }
.event-host .host-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--paper);
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.event-host .host-link:hover { color: var(--lime); }
.event-host .by {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: var(--muted);
    margin-right: 4px;
}

/* Contact-host modal — uses the native <dialog> element with glass styling */
.contact-modal {
    border: none;
    padding: 0;
    background: rgba(15,15,22,0.85);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border-radius: 24px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 30px 60px -10px rgba(0,0,0,0.5);
    color: var(--paper, #fff8e8);
    max-width: 500px;
    width: calc(100% - 32px);
    overscroll-behavior: contain;
}
.contact-modal::backdrop {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.contact-form { padding: 24px 26px 22px; }
.contact-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}
.contact-modal-eyebrow {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,248,232,0.55);
    margin-bottom: 4px;
}
.contact-modal h3 {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff8e8;
}
.contact-close {
    background: rgba(255,255,255,0.10);
    color: #fff8e8;
    border: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.contact-close:hover { background: rgba(255,255,255,0.20); }
.contact-modal-sub {
    font-size: 13.5px;
    color: rgba(255,248,232,0.65);
    margin: 0 0 16px;
    line-height: 1.5;
}
.contact-modal textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 130px;
    padding: 14px 16px;
    background: rgba(0,0,0,0.30);
    color: #fff8e8;
    border: 1px solid rgba(255,248,232,0.18);
    border-radius: 12px;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s ease;
}
.contact-modal textarea:focus { border-color: var(--hot, #ff4d6d); }
.contact-modal textarea::placeholder { color: rgba(255,248,232,0.35); }
.contact-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.event-meta {
    display: grid;
    gap: 14px;
    margin-bottom: 30px;
}
.event-description {
    font-size: 17px; line-height: 1.6; color: var(--paper-dim);
    margin: 18px 0 26px;
}
.meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    /* Subtle inset surface — the outer .event-wrap already provides the
       big glass blur; these inner cards just need to read as embossed. */
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
}
/* When the whole row is clickable (Where → maps, When → calendar dropdown)
   give it cursor:pointer and a soft hover lift. */
.meta-row-link,
.meta-row-action {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.meta-row-link:hover,
.meta-row-action:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
}
.meta-row-link:active,
.meta-row-action:active { transform: scale(0.995); }

/* Visible action button on the right side of clickable rows. Pure visual —
   the click handler is on the row itself, but this gives users a clear
   affordance signal that the row is interactive. */
.meta-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: var(--paper);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.meta-action-btn .icon { width: 14px; height: 14px; }
.meta-row-link:hover .meta-action-btn,
.meta-row-action:hover .meta-action-btn {
    background: var(--hot);
    border-color: var(--hot);
    color: var(--paper);
}
@media (max-width: 540px) {
    .meta-action-btn { padding: 8px; font-size: 11px; gap: 0; }
    .meta-action-btn .meta-action-text { display: none; }
}
.meta-row .icon-bubble {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--hot-bright);
    flex-shrink: 0;
}
.meta-row .grow { flex: 1; min-width: 0; }
/* Add-to-calendar button + dropdown menu — sits in the date row */
.add-to-cal { flex-shrink: 0; }
/* The anchor wraps the button + menu and is the positioning context, so the
   absolutely-positioned menu drops directly under the button rather than under
   the full height of the (tall) "When" meta-row. */
.add-to-cal-anchor { position: relative; display: inline-flex; flex-shrink: 0; }
.add-to-cal-btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--paper);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}
.add-to-cal-btn .icon { width: 12px; height: 12px; }
.add-to-cal-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.32);
}
.add-to-cal-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: rgba(15,15,22,0.92);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-radius: 14px;
    padding: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 20px 40px -10px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.08);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.14s ease, transform 0.14s ease;
}
.add-to-cal-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}
.add-to-cal-menu a {
    display: block;
    padding: 9px 12px;
    color: #fff8e8;
    text-decoration: none;
    font-size: 13.5px;
    border-radius: 8px;
    transition: background 0.12s ease;
}
.add-to-cal-menu a:hover {
    background: rgba(255,255,255,0.10);
}
.meta-row.is-locked .icon-bubble {
    color: var(--muted);
}
.value-locked {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 14px;
}
.value-locked em {
    font-style: italic;
    font-family: 'Instrument Serif', serif;
}
.meta-row .label {
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-bottom: 2px;
}
.meta-row .value { font-size: 15px; }
/* Photo album meta-row: link label on the main line, source host
   ("photos.app.goo.gl") as smaller secondary text underneath. */
.album-link-label { display: block; }
.album-link-host {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.01em;
}
body.has-light-theme .album-link-host { color: rgba(26,22,18,0.55); }
/* Stacked "When" display — date prominent on top, time range below.
   Much easier to scan than "Saturday, Jun 14 · 7:30 PM → 11:00 PM"
   crammed on a single line. */
.when-value { display: flex; flex-direction: column; gap: 2px; }
.when-date {
    font-size: 15px;
    font-weight: 600;
    color: var(--paper);
    line-height: 1.2;
}
.when-time {
    font-size: 14px;
    color: var(--paper-dim);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.when-dash {
    color: var(--muted);
    margin: 0 4px;
    font-weight: 400;
}
.when-end-different-day {
    color: var(--paper-dim);
}

/* Range mode: explicit Start / End rows for events that have an end
   time. Each row has a small mono label on the left and the full
   "Saturday, Jun 14 · 7:30 PM" date+time on the right. Same font size
   for start and end so they read as parallel. */
.when-value-range {
    gap: 6px;
    margin-top: 2px;
}
.when-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.when-row-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    /* Fixed width so Start and End labels visually align as a column */
    min-width: 38px;
    flex-shrink: 0;
}
.when-row-when {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--paper);
    line-height: 1.3;
}

/* Legacy class still referenced in light-theme overrides — keep
   styling minimal so old code paths don't visually regress. */
.meta-end-time {
    color: var(--paper-dim);
    font-weight: 400;
    margin-left: 6px;
    font-size: 14px;
}
.meta-row a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(255,77,109,0.4); }
.meta-row a.map-link {
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color 0.15s ease;
}
.meta-row a.map-link .icon { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.15s ease, opacity 0.15s ease; }
.meta-row a.map-link:hover { color: var(--hot); }
.meta-row a.map-link:hover .icon { opacity: 1; transform: translateX(2px); }

/* RSVP block */
.rsvp-section {
    margin: 20px 0;
    padding: 26px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.rsvp-section h2 {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    margin: 0 0 18px;
    letter-spacing: -0.02em;
}
.rsvp-section h2 .star {
    display: inline-block;
    color: var(--lime);
    margin: 0 4px;
    transform: translateY(-3px);
}

.rsvp-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.rsvp-btn {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 18px 10px;
    border-radius: var(--radius);
    background: var(--ink-2);
    border: 1.5px solid var(--line);
    color: var(--paper);
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rsvp-btn:hover { transform: translateY(-2px); border-color: rgba(246,241,231,0.3); }
.rsvp-btn .icon { width: 24px; height: 24px; }
.rsvp-btn.going-btn:hover, .rsvp-btn.going-btn.is-current { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.rsvp-btn.maybe-btn:hover, .rsvp-btn.maybe-btn.is-current { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.rsvp-btn.no-btn:hover,    .rsvp-btn.no-btn.is-current    { background: var(--hot); color: var(--paper); border-color: var(--hot); }

.rsvp-status-banner {
    padding: 11px 18px;
    border-radius: var(--radius-sm);
    background: var(--ink-2);
    border: 1px solid var(--line);
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 12px;
}
.rsvp-status-banner.going  { background: rgba(214,255,61,0.12); border-color: rgba(214,255,61,0.4); }
.rsvp-status-banner.maybe  { background: rgba(255,138,61,0.12); border-color: rgba(255,138,61,0.4); }
.rsvp-status-banner.no     { background: rgba(255,77,109,0.12); border-color: rgba(255,77,109,0.4); }
.rsvp-status-banner.pending {
    background: rgba(255,210,80,0.10);
    border-color: rgba(255,210,80,0.35);
}
.rsvp-status-banner.pending .icon { color: rgb(255,210,80); }
.rsvp-status-banner .label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.rsvp-status-banner .value { font-family: 'Fraunces', serif; font-size: 19px; font-style: italic; }

/* +1s dropdown in the RSVP form */
.rsvp-plus-ones-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 14px;
}
.rsvp-plus-ones-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--paper);
    flex: 1;
    margin: 0;
}
.rsvp-plus-ones-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color-scheme: dark;
    background: rgba(0,0,0,0.30);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8a496' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: var(--paper);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 8px 30px 8px 12px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    min-width: 160px;
}
.rsvp-plus-ones-select option {
    background: #1a1612;
    color: var(--paper, #f6f1e7);
}
.rsvp-plus-ones-select:focus { border-color: var(--hot); }

/* Guests block */
.guests-section { margin-top: 28px; margin-bottom: 28px; }
.guests-section h3 {
    font-family: 'Fraunces', serif;
    font-style: italic; font-weight: 400;
    font-size: 20px; margin: 0 0 12px;
}
.guests-section .gate {
    padding: 24px;
    text-align: center;
    background: rgba(255,255,255,0.04);
    border: 1px dashed var(--line);
    border-radius: 14px;
    color: var(--muted);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.guests-section .gate b { color: var(--paper); display: block; font-size: 17px; margin-bottom: 4px; }
.guest-count-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.guest-count {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ink-2);
    border: 1px solid var(--line);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
}
.guest-count.going b { color: var(--lime); }
.guest-count.maybe b { color: var(--orange); }
.guest-count.no    b { color: var(--hot); }

.guest-list {
    display: grid;
    gap: 6px;
}
.guest-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
}
.guest-row .avatar { width: 36px; height: 36px; }
.guest-row .name { flex: 1; font-weight: 500; }
.guest-row .badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em;
    padding: 4px 9px; border-radius: 999px;
}
.guest-row .badge.going { background: rgba(214,255,61,0.15); color: var(--lime); }
.guest-row .badge.maybe { background: rgba(255,138,61,0.15); color: var(--orange); }
.guest-row .badge.no    { background: rgba(255,77,109,0.15); color: var(--hot); }

/* Compact guest face-pile strip (the default, condensed view) */
.guest-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.guest-faces { display: flex; align-items: center; }
.guest-face {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    margin-left: -8px; border: 2px solid var(--ink-2, #15131a);
    background: linear-gradient(135deg, rgba(214,255,61,0.3), rgba(122,86,255,0.3));
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.guest-face:first-child { margin-left: 0; }
.guest-face img { width: 100%; height: 100%; object-fit: cover; }
.guest-face-initial { font-size: 14px; font-weight: 700; color: var(--paper); }
.guest-face.maybe { border-color: rgba(255,138,61,0.6); }
.guest-face.no { opacity: 0.55; }
.guest-face-more {
    background: rgba(255,255,255,0.14); color: var(--paper);
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.guest-strip-all {
    background: none; border: 0; color: var(--lime, #d6ff3d);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0;
}
.guest-strip-all:hover { text-decoration: underline; }

/* Face-pile inside the "Spots" meta row (consolidated Spots + Who's coming) */
.meta-row-going .meta-going-body { display: flex; flex-direction: column; gap: 0; }
.going-faces {
    display: inline-flex; align-items: center; margin-top: 8px;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.going-face {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    margin-left: -7px; border: 2px solid var(--ink-2, #15131a);
    background: linear-gradient(135deg, rgba(214,255,61,0.3), rgba(122,86,255,0.3));
    display: inline-flex; align-items: center; justify-content: center;
}
.going-face:first-child { margin-left: 0; }
.going-face img { width: 100%; height: 100%; object-fit: cover; }
.going-face-initial { font-size: 12px; font-weight: 700; color: var(--paper); }
.going-face-more {
    background: rgba(255,255,255,0.16); color: var(--paper);
    font-size: 11px; font-weight: 700;
}
.going-faces:hover .going-face { border-color: rgba(214,255,61,0.5); }

/* Clickable "Spots" row → opens the Who's-coming modal */
.meta-row-going.is-clickable { cursor: pointer; border-radius: 14px; transition: background 0.13s ease; }
.meta-row-going.is-clickable:hover { background: rgba(255,255,255,0.04); }
.meta-row-going.is-clickable:focus-visible { outline: 2px solid rgba(214,255,61,0.5); outline-offset: 2px; }
.meta-row-going .meta-going-body { flex: 1; min-width: 0; }
.going-chevron { color: var(--muted); display: inline-flex; align-items: center; align-self: center; flex-shrink: 0; }
.going-chevron .icon { width: 18px; height: 18px; }
.meta-row-going.is-clickable:hover .going-chevron { color: var(--paper); }

/* Going / Maybe / Decline counts at the top of the guests modal */
.guests-panel-counts {
    display: flex; gap: 8px; padding: 12px 18px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}
.guests-panel-counts .gpc {
    font-size: 13px; color: var(--paper-dim);
    padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,0.05);
}
.guests-panel-counts .gpc b { color: var(--paper); font-weight: 700; }
.guests-panel-counts .gpc.going { background: rgba(214,255,61,0.12); }
.guests-panel-counts .gpc.maybe { background: rgba(255,138,61,0.12); }
.guests-panel-counts .gpc.no    { background: rgba(255,77,109,0.12); }

/* Full guest list modal */
.guests-panel { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.guests-panel[hidden] { display: none; }
.guests-panel-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.guests-panel-box {
    position: relative; width: 100%; max-width: 400px; max-height: 72vh; display: flex; flex-direction: column;
    background: #15131a; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.guests-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.guests-panel-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; }
.guests-panel-close { background: none; border: 0; color: var(--paper-dim); cursor: pointer; padding: 4px; }
.guests-panel-list { overflow-y: auto; padding: 8px; }

/* Plus-ones tag next to a guest's name */
.plus-ones-tag {
    display: inline-block;
    background: rgba(214,255,61,0.18);
    color: var(--lime);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
    letter-spacing: 0.06em;
    vertical-align: 1px;
}

/* Pending-approval pill in the "Who's coming" header (host only) */
.pending-pill {
    display: inline-block;
    background: rgba(255,210,80,0.16);
    color: rgb(255,210,80);
    border: 1px solid rgba(255,210,80,0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-left: 10px;
    font-style: normal;
    vertical-align: 4px;
}

/* Host approval queue — pending RSVPs awaiting yes/no */
.approval-queue {
    margin-bottom: 18px;
    border: 1px solid rgba(255,210,80,0.30);
    background: rgba(255,210,80,0.05);
    border-radius: 14px;
    padding: 14px 16px;
}
.approval-queue-head { margin-bottom: 10px; }
.approval-queue-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgb(255,210,80);
    font-weight: 700;
}
.approval-queue-eyebrow .icon { width: 14px; height: 14px; }
.approval-queue-sub {
    display: block;
    color: var(--paper-dim);
    font-size: 12.5px;
    margin-top: 4px;
}
.approval-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 8px;
}
.approval-row:last-child { margin-bottom: 0; }
.approval-row .avatar { width: 36px; height: 36px; flex-shrink: 0; }
.approval-row-meta { flex: 1; min-width: 0; }
.approval-row-name { font-weight: 600; font-size: 14.5px; color: var(--paper); }
.approval-row-sub  { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.approval-row-actions { display: flex; gap: 6px; }
.inline-form { display: inline; margin: 0; padding: 0; }
.btn-sm {
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 8px;
}
.btn-sm .icon { width: 13px; height: 13px; }

/* Extras display on event page */
.extras-display {
    margin-top: 30px;
    display: grid;
    gap: 10px;
}
.extra-display-item {
    display: flex; gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.extra-display-item .icon-bubble {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--ink-3);
    display: flex; align-items: center; justify-content: center;
    color: var(--lime);
    flex-shrink: 0;
}
.extra-display-item .label {
    font-family: 'JetBrains Mono', monospace; text-transform: uppercase;
    font-size: 10.5px; letter-spacing: 0.18em; color: var(--muted);
    margin-bottom: 4px;
}
.extra-display-item .body { font-size: 15px; }
.extra-display-item a { color: var(--lime); text-decoration: underline; text-decoration-color: rgba(214,255,61,0.4); word-break: break-all; }

/* Share row for preview */
.share-row {
    display: flex; gap: 8px; align-items: center;
    padding: 12px 16px;
    background: rgba(11,10,14,0.5);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}
.share-row .label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }
.share-row code { color: var(--lime); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =====================================================================
   Expandable sections in the create form (Password, Payment methods…)
   Uses native <details>/<summary>. The marker is hidden and replaced
   with a custom chevron that rotates 90deg when open.
   ===================================================================== */
.expandable-section { width: 100%; }
.expandable-section > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    border-radius: 12px;
    transition: background 0.15s ease;
    outline: none;
}
.expandable-section > summary::-webkit-details-marker { display: none; }
.expandable-section > summary::marker { display: none; }
.expandable-section > summary:hover { background: rgba(255,255,255,0.03); }
.expandable-section > summary:focus-visible {
    box-shadow: 0 0 0 2px var(--hot);
}
.expandable-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 4px;
}
.expandable-summary-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--paper-dim);
}
.expandable-summary-icon .icon { width: 18px; height: 18px; }
.expandable-summary-text { flex: 1; min-width: 0; }
.expandable-summary-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--paper);
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 2px;
}
.expandable-summary-tag {
    background: var(--lime);
    color: var(--ink);
    font-family: ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.2;
}
.expandable-summary-tag.muted {
    background: rgba(255,255,255,0.08);
    color: var(--muted);
    font-weight: 600;
}
.expandable-summary-sub {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}
.expandable-chevron {
    color: var(--muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
    display: inline-flex;
}
.expandable-chevron .icon { width: 16px; height: 16px; }
.expandable-section[open] > summary .expandable-chevron {
    transform: rotate(180deg);
}
.expandable-body {
    padding: 16px 0 4px;
    border-top: 1px solid var(--line-soft);
    margin-top: 12px;
}
/* Nested expandable inside another (e.g., password inside Privacy &
   Access). Slightly indented so the parent's body still reads as a
   group. */
.expandable-section.nested {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--line-soft);
}
.expandable-section.nested > summary {
    background: rgba(255,255,255,0.02);
}

/* Password panel — revealed only when the "Require a password" toggle
   is on. Animates max-height + opacity for a smooth show/hide. */
/* Password input lives inside the "Require an event password" toggle
   row. Always visible so the user sees what's being configured — the
   <input> itself is disabled when the toggle is off, and we fade the
   block to ~40% opacity to communicate the disabled state. */
.password-inline {
    opacity: 0.40;
    transition: opacity 0.2s ease;
}
.toggle-row.password-toggle.is-on .password-inline {
    opacity: 1;
}

/* "Currently set" status line inside the password inline reveal */
.password-status {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--paper-dim);
    display: flex; align-items: center; gap: 8px;
    line-height: 1.4;
}
.password-status strong {
    color: var(--paper);
    font-weight: 600;
}
.password-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #2a6e1a;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(42,110,26,0.20);
}

/* =====================================================================
   Announcements section — host-only broadcasts shown above comments
   ===================================================================== */
.announcements-section {
    margin-top: 36px;
}
.announcements-section .event-section-head h2 {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
    color: var(--paper);
    font-variation-settings: "WONK" 1;
}
.announcements-section .event-section-head h2 .icon {
    color: var(--lime);
}
.announcements-section .event-section-count {
    background: rgba(255,255,255,0.10);
    color: var(--paper-dim);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 4px;
}

.announcement-composer {
    background: rgba(198,243,68,0.06);
    border: 1px solid rgba(198,243,68,0.22);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.announcement-composer textarea {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: var(--paper);
    border: none;
    outline: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    min-height: 90px;
}
.announcement-composer textarea::placeholder { color: var(--muted); }
.announcement-composer-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px;
}
.announcement-composer-meta {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
}
.announcement-composer-meta .char-count {
    color: var(--paper-dim);
    font-weight: 700;
}

.announcement-list { display: flex; flex-direction: column; gap: 14px; }
.announcement {
    padding: 16px 18px;
    background: rgba(198,243,68,0.05);
    border: 1px solid rgba(198,243,68,0.18);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.announcement-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 10px;
}
.announcement-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: var(--ink-3);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.announcement-avatar-fallback {
    background-image: linear-gradient(135deg, var(--lime), var(--hot));
    background-color: transparent;
}
.announcement-meta { flex: 1; min-width: 0; }
.announcement-author {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--paper);
    display: flex; align-items: center; gap: 8px;
}
.announcement-host-tag {
    background: var(--lime);
    color: var(--ink);
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 999px;
}
.announcement-time {
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 1px;
}
.announcement-delete {
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    border: 1px solid var(--line);
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 15px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.announcement-delete:hover {
    background: rgba(255,77,109,0.15);
    border-color: rgba(255,77,109,0.35);
    color: var(--hot);
}
.announcement-body {
    margin: 0;
    color: var(--paper);
    font-size: 15.5px;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* =====================================================================
   Comments section on event pages
   ===================================================================== */
.comments-section {
    margin-top: 36px;
}
.comments-section .event-section-head h2 {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
    color: var(--paper);
    font-variation-settings: "WONK" 1;
}
.comments-section .event-section-count {
    background: rgba(255,255,255,0.10);
    color: var(--paper-dim);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 4px;
}

/* Composer */
.comment-composer {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.comment-composer textarea {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    color: var(--paper);
    border: none;
    outline: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    resize: vertical;
    min-height: 70px;
}
.comment-composer textarea::placeholder { color: var(--muted); }
.comment-composer-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px;
}
.comment-composer-meta {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
}
.comment-composer-meta .char-count {
    color: var(--paper-dim);
    font-weight: 700;
}

/* Locked banner for non-RSVP viewers */
.locked-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: rgba(255,77,109,0.10);
    border: 1px solid rgba(255,77,109,0.25);
    border-radius: 14px;
    margin-bottom: 18px;
    font-size: 13.5px;
    color: var(--paper-dim);
    line-height: 1.45;
}
.locked-banner .icon { color: var(--hot); flex-shrink: 0; }
.locked-banner strong { color: var(--paper); display: block; }

/* Empty state */
.comments-empty {
    text-align: center;
    color: var(--muted);
    font-style: italic;
    padding: 4px 0 2px;
    font-size: 14px;
}

/* Comment list */
.comments-list { display: flex; flex-direction: column; gap: 14px; }
/* When locked: blur the entire list. Real text never made it to HTML
   anyway — what's blurred is placeholder gibberish — but the blur
   makes the locked state visually obvious. */
.comments-list.is-locked {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    /* Slight desaturate so it doesn't draw too much attention */
    opacity: 0.55;
}
.comment {
    display: flex; gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.comment-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background-color: var(--ink-3);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.comment-avatar-fallback {
    background-image: linear-gradient(135deg, var(--hot), var(--lime));
    background-color: transparent;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 4px;
}
.comment-author {
    font-weight: 600;
    font-size: 14px;
    color: var(--paper);
}
.comment-time {
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--muted);
}
.comment-delete-form { margin-left: auto; }
.comment-delete {
    background: rgba(255,255,255,0.04);
    color: var(--muted);
    border: 1px solid var(--line);
    width: 22px; height: 22px;
    border-radius: 50%;
    font-size: 14px; line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.comment-delete:hover {
    background: rgba(255,77,109,0.15);
    border-color: rgba(255,77,109,0.35);
    color: var(--hot);
}
.comment-text {
    margin: 0;
    color: var(--paper-dim);
    font-size: 14.5px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* =====================================================================
   Password gate on event pages
   ===================================================================== */
.password-gate {
    text-align: center;
    padding: 50px 24px 60px;
    max-width: 440px;
    margin: 0 auto;
}
@media (max-width: 540px) {
    /* Keep generous horizontal padding so the input doesn't touch
       the edge of the surrounding panel. Previous attempt dropped this
       to 8px which is why the box looked uncomfortably tight. */
    .password-gate {
        padding: 36px 20px 40px;
    }
}
.password-gate-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,77,109,0.12);
    color: var(--hot);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.password-gate-icon .icon { width: 28px; height: 28px; }
.password-gate-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 28px;
    margin: 0 0 10px;
    color: var(--paper);
    letter-spacing: -0.02em;
}
.password-gate-sub {
    color: var(--paper-dim);
    line-height: 1.55;
    margin: 0 auto 24px;
    max-width: 360px;
    font-size: 14.5px;
}
.password-gate-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    margin: 0 auto;
    box-sizing: border-box;
    /* Stacked layout always — input full-width above button. Far more
       robust than a flex row that can overflow at narrow viewports.
       The user complained about edge-touching multiple times before
       this simplification. */
}
.password-gate-form input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,0.30);
    color: var(--paper);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 12px 16px;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s ease;
}
.password-gate-form input:focus { border-color: var(--hot); }
.password-gate-form input::placeholder { color: rgba(255,248,232,0.40); }
.password-gate-form .btn {
    align-self: stretch;
    justify-content: center;
}

/* Toast / flash — auto-fades after 5s, X button to dismiss immediately */
.flash {
    position: fixed; top: 18px; left: 50%;
    transform: translateX(-50%);
    background: var(--hot); color: var(--paper);
    padding: 12px 16px 12px 20px; border-radius: 999px;
    font-size: 14px; z-index: 1000;
    box-shadow: var(--shadow-1);
    display: inline-flex; align-items: center; gap: 12px;
    max-width: calc(100vw - 32px);
    animation: flashin 0.4s ease, flashout 0.4s ease 5s forwards;
}
.flash-close {
    background: rgba(255,255,255,0.20);
    color: inherit;
    border: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 14px; line-height: 1;
    font-family: inherit;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.flash-close:hover { background: rgba(255,255,255,0.35); }
.flash-msg {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flash.is-dismissed {
    animation: flashout 0.25s ease forwards;
}
@keyframes flashin {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes flashout {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -10px); pointer-events: none; }
}


/* =====================================================================
   Theme picker grid (4x4 of cards, each with mini animated preview)
   ===================================================================== */
/* "Adjust colors to photo" toggle above the theme grid. A pill row with a
   sliding switch; dims + disables itself until a cover photo exists. */
.photo-color-toggle {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 0 0 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}
.photo-color-toggle:hover { border-color: rgba(214,255,61,0.4); }
.photo-color-toggle.is-disabled { opacity: 0.55; cursor: not-allowed; }
.photo-color-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.photo-color-switch {
    flex-shrink: 0; position: relative;
    width: 42px; height: 24px; border-radius: 999px;
    background: rgba(255,255,255,0.18);
    transition: background 0.16s ease;
}
.photo-color-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; transition: transform 0.16s ease;
}
.photo-color-toggle input:checked + .photo-color-switch { background: var(--lime, #d6ff3d); }
.photo-color-toggle input:checked + .photo-color-switch::after { transform: translateX(18px); }
.photo-color-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.photo-color-title {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: var(--paper);
}
.photo-color-title .icon { width: 15px; height: 15px; }
.photo-color-hint { font-size: 12px; color: var(--muted); }
body.has-light-theme .photo-color-toggle input:checked + .photo-color-switch { background: #2f6b16; }

.theme-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 520px) {
    .theme-picker { grid-template-columns: repeat(3, 1fr); }
}
.theme-card {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: transform 0.12s ease, border-color 0.12s ease;
    background: transparent;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card.is-selected {
    border-color: var(--lime);
}
.theme-card.is-selected::after {
    content: '✓';
    position: absolute;
    top: 6px; right: 6px;
    background: var(--lime);
    color: var(--ink);
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 13px;
    z-index: 3;
}
.theme-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-card-preview {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-emoji {
    position: relative;
    z-index: 2;
    font-size: 28px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.theme-name {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 6px 4px 2px;
}
.theme-card.is-selected .theme-name {
    color: var(--lime);
    font-weight: 600;
}


/* =========================================================
   Mini theme previews shown in the picker grid (4×4 of 16)
   ========================================================= */

/* Bright & energetic */
.theme-preview-hot-pink { background: linear-gradient(135deg, #ff4d8d, #ff2d7e); }
.theme-preview-hot-pink::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(circle at 25% 30%, rgba(255,255,255,0.45), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(255,220,0,0.4), transparent 45%);
}
.theme-preview-disco { background: #0a0612; }
.theme-preview-disco::before {
    content:''; position:absolute; inset:-30%;
    background: conic-gradient(from 0deg, #ff4d8d, #ff9a3d, #d6ff3d, #4dffb8, #4d9aff, #b84dff, #ff4d8d);
    filter: blur(20px); opacity: 0.7;
    animation: theme-disco-spin 6s linear infinite;
}
/* Disco Lite — the disco spin on a pale background. */
.theme-preview-disco-lite { background: #f6f1e8; }
.theme-preview-disco-lite::before {
    content:''; position:absolute; inset:-30%;
    background: conic-gradient(from 0deg,
        #ff4d8d, #ff9a3d, #ffd23d, #4dffb8, #4d9aff, #b84dff, #ff4d8d);
    filter: blur(20px); opacity: 0.85;
    animation: theme-disco-spin 6s linear infinite;
}
.theme-preview-confetti { background: linear-gradient(135deg, #fef7e6, #f3d1e3); }
.theme-preview-confetti::before {
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(2px 4px at 15% 20%, #ff4d6d, transparent),
      radial-gradient(3px 2px at 35% 50%, #4dccff, transparent),
      radial-gradient(2px 4px at 60% 30%, #ffd34d, transparent),
      radial-gradient(4px 2px at 80% 70%, #b84dff, transparent),
      radial-gradient(2px 4px at 45% 80%, #4dff9a, transparent);
}
.theme-preview-sunshine { background: radial-gradient(ellipse at 50% 50%, #ffeb6e, #ffd83d 60%, #ffb800); }
.theme-preview-sunshine::before {
    content:''; position:absolute; inset:-30%;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(255,255,255,0.25) 0deg, transparent 12deg 24deg);
    animation: theme-disco-spin 30s linear infinite;
}

/* Atmospheric & retro */
.theme-preview-vaporwave { background: linear-gradient(180deg, #2d0a52 0%, #6b1b8a 35%, #ff5dbb 70%, #ffb96b 100%); }
.theme-preview-vaporwave::before {
    content:''; position:absolute; inset:50% -10% -10% -10%;
    background-image:
        linear-gradient(rgba(255,93,187,0.7) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,93,187,0.7) 1px, transparent 1px);
    background-size: 12px 12px;
    transform: perspective(60px) rotateX(55deg);
    transform-origin: 50% 0%;
}
.theme-preview-vaporwave::after {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 45%, rgba(255,235,150,0.95) 0%, rgba(255,235,150,0.95) 18%, rgba(255,200,100,0.85) 24%, transparent 40%);
}
.theme-preview-dance { background: #0e0820; }
.theme-preview-dance::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 60% 80% at 25% -10%, rgba(255,77,141,0.55), transparent 50%),
        radial-gradient(ellipse 60% 80% at 75% -10%, rgba(77,154,255,0.55), transparent 50%),
        radial-gradient(circle at 20% 90%, rgba(255,77,141,0.6), transparent 25%),
        radial-gradient(circle at 50% 95%, rgba(214,255,61,0.5), transparent 25%),
        radial-gradient(circle at 80% 90%, rgba(77,154,255,0.6), transparent 25%);
}
.theme-preview-cosmic { background: radial-gradient(ellipse at 50% 30%, #0a0530, #02041a 70%); }
.theme-preview-cosmic::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 50% 30% at 25% 30%, rgba(255,80,180,0.5), transparent 60%),
      radial-gradient(ellipse 40% 50% at 75% 70%, rgba(80,40,200,0.55), transparent 65%),
      radial-gradient(1px 1px at 20% 25%, white, transparent),
      radial-gradient(1px 1px at 65% 60%, white, transparent),
      radial-gradient(1px 1px at 40% 80%, white, transparent),
      radial-gradient(2px 2px at 80% 30%, white, transparent),
      radial-gradient(1px 1px at 15% 65%, white, transparent);
}
.theme-preview-noir { background: #15131b; }
.theme-preview-noir::before {
    content:''; position:absolute; inset:-20%;
    background:
      radial-gradient(circle at 25% 30%, rgba(255,77,141,0.6), transparent 50%),
      radial-gradient(circle at 75% 70%, rgba(122,86,255,0.55), transparent 55%);
}
/* Smokey — dark with hazy whitish smoke wisps + ember glow at bottom */
.theme-preview-smokey { background: linear-gradient(180deg, #0a0a12 0%, #1c1820 100%); }
.theme-preview-smokey::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 55% 30% at 25% 35%, rgba(210,205,210,0.32), transparent 70%),
      radial-gradient(ellipse 45% 28% at 75% 60%, rgba(220,215,215,0.30), transparent 70%),
      radial-gradient(ellipse 35% 18% at 50% 92%, rgba(200,160,100,0.22), transparent 70%);
    filter: blur(2px);
}

/* Nature & places */
.theme-preview-tropical { background: linear-gradient(180deg, #ffb86b 0%, #ff6e93 35%, #5dd1c4 75%, #1a8a8a 100%); }
.theme-preview-tropical::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse 25% 8% at 12% 22%, rgba(15,40,30,0.85), transparent 60%),
        radial-gradient(ellipse 25% 8% at 88% 18%, rgba(15,40,30,0.85), transparent 60%),
        radial-gradient(circle 18% at 50% 18%, rgba(255,235,150,0.95), rgba(255,180,80,0.5) 60%, transparent 80%);
}
.theme-preview-forest { background: linear-gradient(180deg, #1a3528 0%, #2a5a44 60%, #1a3d2e 100%); }
.theme-preview-forest::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 80% 40% at 50% 15%, rgba(198,243,68,0.25), transparent 70%);
}
.theme-preview-forest::after {
    content:''; position:absolute; inset: 40% 0 0 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='xMidYEnd slice'><g><path d='M5,100 L5,30 Q8,22 11,30 L11,100 Z' fill='%23264a36'/><path d='M22,100 L22,55 Q25,48 28,55 L28,100 Z' fill='%231f3c2c'/><path d='M40,100 L40,25 Q44,15 48,25 L48,100 Z' fill='%232a543b'/><path d='M62,100 L62,60 Q65,53 68,60 L68,100 Z' fill='%231f3c2c'/><path d='M82,100 L82,35 Q86,25 90,35 L90,100 Z' fill='%23264a36'/><path d='M102,100 L102,20 Q106,10 110,20 L110,100 Z' fill='%232f5b41'/><path d='M122,100 L122,50 Q126,42 130,50 L130,100 Z' fill='%23264a36'/><path d='M142,100 L142,30 Q146,20 150,30 L150,100 Z' fill='%231f3c2c'/><path d='M162,100 L162,45 Q166,35 170,45 L170,100 Z' fill='%232a543b'/><path d='M182,100 L182,25 Q186,15 190,25 L190,100 Z' fill='%23264a36'/></g></svg>");
    background-size: cover;
    background-position: bottom center;
}
.theme-preview-ocean { background: linear-gradient(180deg, #0a2f55 0%, #0a4d77 40%, #0e6e8a 100%); }
.theme-preview-ocean::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(ellipse 80% 40% at 50% 0%, rgba(180,220,255,0.30), transparent 70%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><path d='M0,30 Q50,10 100,30 T200,30 L200,60 L0,60 Z' fill='rgba(140,197,255,0.45)'/></svg>");
    background-repeat: no-repeat, repeat-x;
    background-size: auto, 200px 60px;
    background-position: 0 0, 0 60%;
}
.theme-preview-ocean::after {
    content:''; position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60'><path d='M0,35 Q60,15 120,35 T200,35 L200,60 L0,60 Z' fill='rgba(80,150,220,0.4)'/></svg>");
    background-repeat: repeat-x;
    background-size: 200px 60px;
    background-position: 0 100%;
}
.theme-preview-sunset { background: linear-gradient(180deg, #1a0830 0%, #6a1d56 30%, #ff5e7e 65%, #ff9a4d 90%, #ffd24d 100%); }
.theme-preview-sunset::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle 18% at 50% 78%, rgba(255,235,180,0.95), rgba(255,180,90,0.5) 60%, transparent 80%);
}

/* Soft & textured */
.theme-preview-paper { background: #f6f1e3; }
.theme-preview-paper::before {
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(1px 1px at 15% 20%, rgba(50,30,15,0.25), transparent),
      radial-gradient(1px 1px at 40% 60%, rgba(50,30,15,0.20), transparent),
      radial-gradient(1px 1px at 70% 25%, rgba(50,30,15,0.25), transparent),
      radial-gradient(1px 1px at 85% 70%, rgba(50,30,15,0.20), transparent),
      radial-gradient(2px 2px at 30% 75%, rgba(217,79,126,0.4), transparent),
      radial-gradient(2px 2px at 75% 50%, rgba(80,140,200,0.4), transparent),
      radial-gradient(ellipse 60% 80% at 0% 0%, rgba(180,130,60,0.15), transparent 70%);
}
.theme-preview-lavender { background: linear-gradient(135deg, #d8b8ff, #c5a8ff 50%, #b890ff); }
.theme-preview-lavender::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 25% 30%, rgba(255,200,255,0.6), transparent 40%),
      radial-gradient(circle at 75% 70%, rgba(180,150,255,0.5), transparent 40%);
    filter: blur(6px);
}
.theme-preview-mint { background: linear-gradient(160deg, #b8f0d0, #9ee8b8 50%, #7adba0); }
.theme-preview-mint::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 25% 25%, rgba(220,255,235,0.6), transparent 40%),
      radial-gradient(2px 2px at 60% 40%, rgba(255,255,255,0.7), transparent),
      radial-gradient(2px 2px at 30% 75%, rgba(255,255,255,0.65), transparent);
}
/* Elegant — pale champagne with a peony silhouette + gold flecks */
.theme-preview-elegant { background: linear-gradient(135deg, #fdf6e9 0%, #f5e1d5 50%, #ecd0c0 100%); }
.theme-preview-elegant::before {
    content:''; position:absolute; inset:0;
    background:
      /* Two big peonies in opposing corners */
      radial-gradient(ellipse 24% 20% at 18% 22%, rgba(232,144,144,0.70), transparent 65%),
      radial-gradient(ellipse 26% 22% at 82% 78%, rgba(232,144,144,0.70), transparent 65%),
      /* Smaller roses on the diagonals */
      radial-gradient(ellipse 14% 12% at 78% 22%, rgba(232,184,160,0.60), transparent 65%),
      radial-gradient(ellipse 14% 12% at 22% 78%, rgba(232,184,160,0.60), transparent 65%),
      /* Gold centers */
      radial-gradient(circle 3% at 18% 22%, rgba(212,158,86,0.90), transparent 55%),
      radial-gradient(circle 3% at 82% 78%, rgba(212,158,86,0.90), transparent 55%);
}
.theme-preview-cream { background: linear-gradient(180deg, #060c1c 0%, #1a2855 70%, #3a4880 100%); }
.theme-preview-cream::before {
    content:''; position:absolute; inset:0;
    background:
      /* mini horizon glow */
      radial-gradient(ellipse 90% 25% at 50% 78%, rgba(255,200,120,0.30), transparent 70%),
      /* a few stars */
      radial-gradient(1px 1px at 25% 18%, rgba(255,255,255,0.8), transparent),
      radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.7), transparent),
      radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,0.8), transparent);
}
.theme-preview-cream::after {
    content:''; position:absolute; inset:0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='xMidYEnd slice'><g fill='%23070d20'><rect x='0' y='55' width='18' height='45'/><rect x='20' y='42' width='24' height='58'/><rect x='46' y='60' width='16' height='40'/><rect x='64' y='32' width='28' height='68'/><rect x='94' y='50' width='20' height='50'/><rect x='116' y='28' width='26' height='72'/><rect x='144' y='48' width='20' height='52'/><rect x='166' y='42' width='26' height='58'/></g><g fill='%23ffd86a'><rect x='4' y='62' width='2' height='3'/><rect x='10' y='72' width='2' height='3'/><rect x='24' y='52' width='2' height='3'/><rect x='32' y='65' width='2' height='3'/><rect x='38' y='80' width='2' height='3'/><rect x='50' y='70' width='2' height='3'/><rect x='68' y='42' width='2' height='3'/><rect x='75' y='55' width='2' height='3'/><rect x='82' y='75' width='2' height='3'/><rect x='98' y='58' width='2' height='3'/><rect x='106' y='75' width='2' height='3'/><rect x='120' y='38' width='2' height='3'/><rect x='128' y='52' width='2' height='3'/><rect x='135' y='72' width='2' height='3'/><rect x='148' y='58' width='2' height='3'/><rect x='156' y='75' width='2' height='3'/><rect x='170' y='52' width='2' height='3'/><rect x='178' y='68' width='2' height='3'/><rect x='185' y='82' width='2' height='3'/></g></svg>");
    background-size: cover;
    background-position: bottom center;
}

/* Rainbow — full-spectrum gradient with the hue-rotate animation
   running inside the picker card too so users see the effect when
   selecting. */
.theme-preview-rainbow {
    background: linear-gradient(135deg,
        hsl(0,   80%, 50%) 0%,
        hsl(60,  80%, 50%) 20%,
        hsl(120, 75%, 45%) 40%,
        hsl(200, 80%, 50%) 60%,
        hsl(280, 75%, 50%) 80%,
        hsl(340, 80%, 55%) 100%
    );
    animation: theme-preview-rainbow-hue 8s linear infinite;
}
@keyframes theme-preview-rainbow-hue {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Minimal — pure white with the faintest border so the empty card
   still reads as a card rather than missing artwork. */
.theme-preview-minimal {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(26,22,18,0.08);
}

/* Light themes — skip emoji shadow */
.theme-preview-confetti .theme-emoji,
.theme-preview-sunshine .theme-emoji,
.theme-preview-mint .theme-emoji,
.theme-preview-lavender .theme-emoji,
.theme-preview-elegant .theme-emoji,
.theme-preview-minimal .theme-emoji,
.theme-preview-paper .theme-emoji { text-shadow: none; }

@keyframes theme-disco-spin { to { transform: rotate(360deg); } }


/* =====================================================================
   Polls (event page). Host-created, RSVP-gated voting.
   ===================================================================== */
.poll-section { margin-top: 36px; }
.poll-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 20px;
}
.poll-prompt {
    font-family: 'Fraunces', serif; font-weight: 600; font-size: 19px;
    line-height: 1.35; margin-bottom: 6px;
}
.poll-meta { color: var(--paper-dim); font-size: 13px; margin-bottom: 16px; }

/* Ballot */
.poll-ballot { display: flex; flex-direction: column; gap: 10px; }
.poll-ballot-opt {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 13px 16px; border-radius: 12px;
    background: rgba(0,0,0,0.2); border: 1px solid var(--line);
    transition: border-color 0.13s ease, background 0.13s ease;
}
.poll-ballot-opt:hover { border-color: rgba(255,255,255,0.25); }
.poll-ballot-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.poll-ballot-box {
    width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.3); position: relative; transition: border-color 0.13s ease;
}
.poll-ballot-opt input[type=checkbox] + .poll-ballot-box { border-radius: 6px; }
.poll-ballot-opt:has(input:checked) { border-color: var(--hot); background: rgba(255,77,109,0.1); }
.poll-ballot-opt:has(input:checked) .poll-ballot-box { border-color: var(--hot); background: var(--hot); }
.poll-ballot-opt:has(input:checked) .poll-ballot-box::after {
    content: ''; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
    border-radius: inherit; background: #fff;
}
.poll-ballot-label { font-size: 15px; }
.poll-vote-btn { margin-top: 6px; align-self: flex-start; }

/* Results */
.poll-results { display: flex; flex-direction: column; gap: 14px; }
.poll-result-row.is-mine .poll-result-label { color: #d6ff3d; font-weight: 600; }
.poll-result-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; gap: 12px; }
.poll-result-label { font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.poll-result-label .icon { width: 14px; height: 14px; color: #d6ff3d; }
.poll-result-pct { font-weight: 700; font-size: 14px; color: var(--paper); flex-shrink: 0; }
.poll-result-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.poll-result-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--hot), var(--violet));
    transition: width 0.4s ease;
}
.poll-result-row.is-mine .poll-result-fill { background: linear-gradient(90deg, #d6ff3d, #9fe870); }
.poll-result-count { font-size: 12px; color: var(--paper-dim); margin-top: 4px; }

.poll-revote { margin-top: 16px; }
.poll-revote summary {
    cursor: pointer; color: var(--paper-dim); font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 6px; list-style: none;
}
.poll-revote summary::-webkit-details-marker { display: none; }
.poll-revote summary .icon { width: 13px; height: 13px; }
.poll-revote[open] summary { margin-bottom: 12px; }

.poll-host-controls { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.poll-remove-btn {
    background: none; border: 0; color: var(--paper-dim); font: inherit; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
}
.poll-remove-btn .icon { width: 14px; height: 14px; }
.poll-remove-btn:hover { color: #ff8a8a; }

/* Create form */
.poll-create { background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 16px; padding: 4px 18px; }
.poll-create[open] { padding-bottom: 20px; }
.poll-create-summary {
    cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 15px;
    display: flex; align-items: center; gap: 8px; list-style: none;
}
.poll-create-summary::-webkit-details-marker { display: none; }
.poll-create-summary .icon { width: 16px; height: 16px; color: var(--hot); }
.poll-field-label { display: block; font-size: 13px; font-weight: 600; margin: 6px 0 8px; }
.poll-prompt-input, .poll-option-input {
    width: 100%; background: rgba(0,0,0,0.22); border: 1px solid var(--line);
    border-radius: 10px; color: var(--paper); font: inherit; font-size: 15px; padding: 11px 13px; outline: none;
}
.poll-prompt-input { resize: vertical; }
.poll-prompt-input:focus, .poll-option-input:focus { border-color: rgba(255,77,109,0.5); }
.poll-options-list { display: flex; flex-direction: column; gap: 8px; }
.poll-option-row { display: flex; align-items: center; gap: 8px; }
.poll-remove-option {
    background: rgba(255,255,255,0.08); border: 0; color: var(--paper-dim);
    width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0;
}
.poll-remove-option:hover { background: rgba(255,77,109,0.2); color: #ff8a8a; }
.poll-add-option {
    margin-top: 10px; background: none; border: 1px dashed var(--line); color: var(--paper-dim);
    font: inherit; font-size: 13.5px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.poll-add-option:hover { border-color: var(--hot); color: var(--paper); }
.poll-add-option .icon { width: 14px; height: 14px; }
.poll-add-hint { font-size: 12.5px; color: var(--paper-dim); margin: 8px 0 0; }
.poll-mode-choice { display: flex; gap: 10px; flex-wrap: wrap; }
.poll-mode-opt {
    flex: 1; min-width: 180px; display: flex; gap: 10px; align-items: flex-start;
    padding: 13px; border-radius: 12px; cursor: pointer;
    background: rgba(0,0,0,0.18); border: 1px solid var(--line);
}
.poll-mode-opt:has(input:checked) { border-color: rgba(255,77,109,0.5); background: rgba(255,77,109,0.08); }
.poll-mode-opt input { margin-top: 3px; accent-color: var(--hot); }
.poll-mode-body { display: flex; flex-direction: column; gap: 2px; }
.poll-mode-title { font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.poll-mode-title .icon { width: 14px; height: 14px; }
.poll-mode-sub { font-size: 12.5px; color: var(--paper-dim); }
.poll-submit { margin-top: 18px; }

/* Poll voter face-pile + "View votes" + voter-list modal */
.poll-result-foot { display: flex; align-items: center; gap: 10px; margin-top: 7px; flex-wrap: wrap; }
.poll-voter-faces { display: flex; align-items: center; }
.poll-voter-face {
    width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    margin-left: -6px; border: 1.5px solid #15131a; background: linear-gradient(135deg, rgba(214,255,61,0.3), rgba(122,86,255,0.3));
    display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.poll-voter-face:first-child { margin-left: 0; }
.poll-voter-face img { width: 100%; height: 100%; object-fit: cover; }
.poll-voter-initial { font-size: 10px; font-weight: 700; color: var(--paper); }
.poll-voter-more { background: rgba(255,255,255,0.14); color: var(--paper); font-size: 10px; font-weight: 700; }
.poll-result-foot .poll-result-count { margin: 0; font-size: 12px; color: var(--paper-dim); }
.poll-view-votes {
    background: none; border: 0; color: #b7e000; font: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; margin-left: auto;
}
.poll-view-votes .icon { width: 12px; height: 12px; }
.poll-view-votes:hover { text-decoration: underline; }
/* Light themes: the lime poll accents are unreadable on a cream panel — swap
   to a deep readable green. Covers the "View votes" link, the voted-option
   label + checkmark icon, and the result percentage. */
body.has-light-theme .poll-view-votes,
body.has-light-theme .poll-result-row.is-mine .poll-result-label,
body.has-light-theme .poll-result-label .icon {
    color: #2f7d18;
}
body.has-light-theme .poll-result-row.is-mine .poll-result-fill {
    background: linear-gradient(90deg, #3c8216, #6bbf3a);
}

.poll-voters-panel { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.poll-voters-panel[hidden] { display: none; }
.poll-voters-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
.poll-voters-box {
    position: relative; width: 100%; max-width: 380px; max-height: 70vh; display: flex; flex-direction: column;
    background: #15131a; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.poll-voters-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.poll-voters-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 16px; line-height: 1.3; }
.poll-voters-sub { font-size: 12.5px; color: var(--paper-dim); margin-top: 2px; }
.poll-voters-close { background: none; border: 0; color: var(--paper-dim); cursor: pointer; padding: 4px; flex-shrink: 0; }
.poll-voters-list { overflow-y: auto; padding: 8px; }
.poll-voter-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; }
.poll-voter-row:hover { background: rgba(255,255,255,0.04); }
.poll-voter-row-face {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(214,255,61,0.3), rgba(122,86,255,0.3));
}
.poll-voter-row-face img { width: 100%; height: 100%; object-fit: cover; }
.poll-voter-row-face .poll-voter-initial { font-size: 13px; }
.poll-voter-row-name { font-size: 14.5px; font-weight: 500; }