:root {
    --cream: #faf5ee;
    --cream-d: #ede0cc;
    --cream-dd: #d8ccba;
    --brown: #1e140c;
    --brown-m: #2a1f14;
    --brown-l: #3d2e1f;
    --terra: #c8582a;
    --terra-l: #d4724c;
    --terra-ll: #e8a080;
    --terra-bg: rgba(200, 88, 42, 0.06);
    --sage: #6b9b7a;
    --sage-d: #4a7a5a;
    --sage-bg: rgba(107, 155, 122, 0.08);
    --champ: #e8d5a8;
    --champ-bg: rgba(232, 213, 168, 0.2);
    --red: #c0392b;
    --red-bg: rgba(192, 57, 43, 0.06);
    --txt: #2c2016;
    --txt-m: #5a4a38;
    --txt-l: #8b7a68;
    --txt-xl: #b0a090;
    --shadow-sm: 0 1px 4px rgba(44, 32, 22, 0.06);
    --shadow-md: 0 4px 20px rgba(44, 32, 22, 0.08);
    --shadow-lg: 0 12px 40px rgba(44, 32, 22, 0.12);
    --radius: 6px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Jost", sans-serif;
    background: var(--cream);
    color: var(--txt);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════
   PASSWORD SCREEN
══════════════════════════════════════ */
#admin-pwd {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: radial-gradient(ellipse at 30% 40%, #2a1f14 0%, #1e140c 55%, #0e0906 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    padding: 20px;
}
#admin-pwd.hide {
    opacity: 0;
    transform: scale(1.02);
    pointer-events: none;
}
.pwd-monogram {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--champ);
    letter-spacing: 12px;
    text-transform: uppercase;
    opacity: 0.5;
}
#admin-pwd h1 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 2.4rem;
    color: var(--cream);
    letter-spacing: 3px;
    text-align: center;
}
#admin-pwd h1 em {
    color: var(--terra-l);
    font-style: italic;
}
.pwd-divider {
    width: 40px;
    height: 1px;
    background: var(--terra);
    opacity: 0.5;
}
#admin-pwd .pwd-label {
    font-size: 0.62rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(232, 213, 168, 0.35);
    font-weight: 200;
}
.pwd-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 280px;
}
#admin-pwd input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    padding: 16px 28px;
    text-align: center;
    letter-spacing: 8px;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--cream);
    outline: none;
    width: 100%;
    transition: var(--transition);
}
#admin-pwd input:focus {
    border-color: rgba(200, 88, 42, 0.5);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.1);
}
#admin-pwd button {
    background: linear-gradient(135deg, var(--terra), var(--terra-l));
    border: none;
    color: var(--cream);
    padding: 14px 48px;
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 0.62rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 16px rgba(200, 88, 42, 0.3);
    width: 100%;
}
#admin-pwd button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(200, 88, 42, 0.4);
}
.pwd-error {
    color: var(--terra-l);
    font-size: 0.82rem;
    opacity: 0;
    transition: opacity 0.3s;
    height: 20px;
}

/* ══════════════════════════════════════
   SIDEBAR LAYOUT
══════════════════════════════════════ */
/* Password screen hidden by default — shown only for legacy single-tenant */
#admin-pwd {
    display: none !important;
}
#app {
    display: none;
    min-height: 100vh;
}
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    background: var(--brown);
    color: var(--cream);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    transition:
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.sidebar-brand {
    padding: 14px 12px 14px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: background 0.2s;
}
.sidebar-brand:hover {
    background: rgba(255, 255, 255, 0.03);
}
.sidebar-brand-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.sidebar-brand h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 1.1rem;
    color: var(--cream);
    letter-spacing: 1px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-brand h2 em {
    color: var(--terra-l);
    font-style: italic;
}
.sidebar-brand-sub {
    font-size: 0.46rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--txt-xl);
    font-weight: 200;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    margin-bottom: 5px;
}
/* Avatar in brand */
.sidebar-brand .profile-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.6rem;
    flex-shrink: 0;
    margin-top: 1px;
}
/* Badges row */
.sidebar-brand-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.sidebar-brand .profile-plan {
    font-size: 0.46rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(184, 149, 106, 0.18);
    color: var(--terra-l);
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 600;
}
.sidebar-brand .profile-countdown {
    font-size: 0.46rem;
    letter-spacing: 0.05em;
    background: rgba(196, 145, 138, 0.18);
    color: #c4918a;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 600;
}
/* Collapsed: avatar only, hide text */
.sidebar.collapsed .sidebar-brand-info {
    display: none;
}
.sidebar.collapsed .sidebar-brand {
    justify-content: center;
    gap: 0;
}

.sidebar-collapse-btn {
    flex-shrink: 0;
    align-self: flex-start;
    position: static;
    transform: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(250, 245, 238, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--cream);
    border-color: rgba(255, 255, 255, 0.2);
}

.sidebar-nav {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar-nav::-webkit-scrollbar {
    width: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Section labels */
/* ═══ COLLAPSIBLE NAV GROUPS ═══ */
.nav-group {
    /* no visual wrapper — transparent container */
}

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 5px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}
.nav-group-header:hover .nav-group-label {
    color: rgba(250, 245, 238, 0.8);
}
.nav-group-header:hover .nav-chevron {
    color: rgba(250, 245, 238, 0.6);
}

.nav-group-label {
    font-size: 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.45);
    font-weight: 400;
    white-space: nowrap;
    transition: color 0.2s;
}

.nav-chevron {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: rgba(250, 245, 238, 0.3);
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.2s;
}

.nav-group-items {
    overflow: hidden;
    max-height: 400px;
    opacity: 1;
    transition:
        max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s ease;
}

/* Collapsed state */
.nav-group.collapsed .nav-group-items {
    max-height: 0;
    opacity: 0;
}
.nav-group.collapsed .nav-chevron {
    transform: rotate(-90deg);
}

/* Divider between groups */
.nav-group + .nav-group {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Keep old class working for any legacy references */
.nav-section-label {
    font-size: 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.5);
    font-weight: 400;
    padding: 14px 20px 5px;
    white-space: nowrap;
    overflow: hidden;
    transition:
        opacity 0.2s,
        padding 0.3s;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    font-size: 0.74rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(250, 245, 238, 0.55);
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: "Jost", sans-serif;
}
.nav-item:hover {
    color: var(--cream);
    background: rgba(255, 255, 255, 0.04);
}
.nav-item.active {
    color: var(--cream);
    background: rgba(200, 88, 42, 0.1);
    border-left-color: var(--terra);
}
.nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
    min-width: 18px;
}
.nav-item.active svg {
    opacity: 1;
}
.nav-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition:
        opacity 0.2s,
        width 0.3s;
}
.nav-logout {
    margin-top: auto;
    color: rgba(255, 255, 255, 0.35);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
}
.nav-logout:hover {
    color: var(--red);
    background: rgba(220, 38, 38, 0.08);
}

/* ═══ SIDEBAR PROFILE ═══ */
.sidebar-profile {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.25s;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}
.sidebar-profile:hover {
    background: rgba(255, 255, 255, 0.04);
}
.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #9a7a52 0%, var(--gold) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow:
        0 2px 8px rgba(184, 149, 106, 0.4),
        0 0 0 2px rgba(184, 149, 106, 0.25);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.sidebar-profile:hover .profile-avatar {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(184, 149, 106, 0.45);
}
.profile-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.profile-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--cream);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    line-height: 1.2;
}
.profile-email {
    font-size: 0.58rem;
    color: rgba(250, 245, 238, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
    font-weight: 300;
}
.profile-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}
.profile-plan {
    font-size: 0.48rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    background: rgba(184, 149, 106, 0.18);
    color: var(--gold);
    padding: 2px 7px;
    border-radius: 100px;
    border: 1px solid rgba(184, 149, 106, 0.25);
}
.profile-plan.premium {
    background: linear-gradient(90deg, rgba(184, 149, 106, 0.25), rgba(232, 213, 176, 0.2));
    color: var(--champ);
    border-color: rgba(232, 213, 176, 0.35);
}
.profile-countdown {
    font-size: 0.48rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--terra-l);
    background: rgba(196, 145, 138, 0.12);
    padding: 2px 7px;
    border-radius: 100px;
    border: 1px solid rgba(196, 145, 138, 0.2);
}
.profile-chevron {
    color: rgba(250, 245, 238, 0.2);
    flex-shrink: 0;
    transition:
        transform 0.25s,
        color 0.25s;
}
.sidebar-profile.open .profile-chevron {
    transform: rotate(180deg);
    color: rgba(250, 245, 238, 0.5);
}

/* Profile popover */
.profile-menu {
    position: fixed;
    left: 12px;
    width: 236px;
    background: #2a1d14;
    border: 1px solid rgba(184, 149, 106, 0.2);
    border-radius: 10px;
    padding: 6px;
    z-index: 9999;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition:
        opacity 0.2s,
        transform 0.2s;
    max-height: 80vh;
    overflow-y: auto;
}
.profile-menu.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 10px;
    border-bottom: 1px solid rgba(184, 149, 106, 0.2);
    margin-bottom: 2px;
}
.profile-menu-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #9a7a52 0%, var(--gold) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    box-shadow:
        0 2px 8px rgba(184, 149, 106, 0.4),
        0 0 0 2px rgba(184, 149, 106, 0.25);
}
.profile-menu-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--cream);
    letter-spacing: 0.3px;
}
.profile-menu-email {
    font-size: 0.6rem;
    color: rgba(250, 245, 238, 0.6);
    margin-top: 1px;
}
.profile-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 4px 0;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 0.68rem;
    font-weight: 400;
    color: rgba(250, 245, 238, 0.9);
    background: rgba(255, 255, 255, 0.06);
    transition:
        background 0.2s,
        color 0.2s;
    text-align: left;
    margin-bottom: 2px;
}
.profile-menu-item:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cream);
}
.profile-menu-item svg {
    opacity: 0.85;
    flex-shrink: 0;
}
.profile-menu-item:hover svg {
    opacity: 1;
}
.profile-menu-logout {
    color: var(--terra-l);
    background: rgba(196, 145, 138, 0.12);
}
.profile-menu-logout:hover {
    background: rgba(196, 145, 138, 0.2);
    color: var(--cream);
}

/* Profile popover — extended stats */
.profile-menu-couple {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.72rem;
    font-style: italic;
    color: rgba(184, 149, 106, 0.7);
    letter-spacing: 0.3px;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-menu-since {
    font-size: 0.52rem;
    color: rgba(250, 245, 238, 0.22);
    font-weight: 300;
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.profile-stats {
    padding: 10px 10px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}
.profile-stat-row {
    display: flex;
    align-items: center;
    gap: 5px;
}
.profile-stat-venue {
    font-size: 0.6rem;
    color: rgba(250, 245, 238, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}
.profile-completion-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile-ring-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.profile-ring-pct {
    position: absolute;
    font-size: 0.48rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.02em;
}
.profile-completion-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-stat-title {
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.55);
}
.profile-stat-sub {
    font-size: 0.6rem;
    color: rgba(250, 245, 238, 0.7);
    font-style: italic;
    font-family: "Cormorant Garamond", serif;
}
.profile-guest-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-bar-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.profile-stat-count {
    font-size: 0.58rem;
    color: rgba(184, 149, 106, 0.75);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.profile-mini-bar {
    height: 2px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
    overflow: hidden;
}
.profile-mini-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold), var(--champ));
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.profile-mini-bar-fill.storage {
    background: linear-gradient(90deg, var(--sage), rgba(143, 168, 135, 0.55));
}

/* Collapsed sidebar — avatar only */
.sidebar.collapsed .sidebar-profile {
    padding: 10px 0;
    justify-content: center;
}
.sidebar.collapsed .profile-info,
.sidebar.collapsed .profile-chevron {
    display: none;
}
.sidebar.collapsed .profile-menu {
    left: 72px;
    width: 220px;
}

.sidebar-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.2);
    font-weight: 200;
    cursor: pointer;
    transition:
        color 0.3s ease,
        background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-footer svg {
    opacity: 0.4;
    transition: opacity 0.25s ease;
    flex-shrink: 0;
}
.sidebar-footer:hover svg {
    opacity: 0.7;
}
.sidebar-footer:hover {
    color: rgba(250, 245, 238, 0.5);
    background: rgba(255, 255, 255, 0.03);
}

/* ── Collapsed sidebar state ── */
.sidebar.collapsed {
    width: 64px;
}
.sidebar.collapsed .sidebar-brand h2,
.sidebar.collapsed .sidebar-brand-sub,
.sidebar.collapsed .owner-badge,
.sidebar.collapsed .sidebar-footer-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
}
.sidebar.collapsed .sidebar-brand {
    padding: 12px 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}
.sidebar.collapsed .sidebar-collapse-btn {
    position: static;
    transform: none;
    display: flex;
    align-self: auto;
}
.sidebar.collapsed .sidebar-collapse-btn svg {
    transform: rotate(180deg);
}
.sidebar.collapsed .nav-section-label {
    opacity: 0;
    height: 0;
    padding: 0 20px;
    overflow: hidden;
    margin: 0;
}
/* In icon-only collapsed mode: hide group headers, always show all items */
.sidebar.collapsed .nav-group-header {
    display: none;
}
.sidebar.collapsed .nav-group-items {
    max-height: 400px !important;
    opacity: 1 !important;
}
.sidebar.collapsed .nav-group + .nav-group {
    border-top: none;
}
.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 12px 0;
    border-left-width: 0;
}
.sidebar.collapsed .nav-item span {
    opacity: 0;
    width: 0;
    overflow: hidden;
    position: absolute;
}
.sidebar.collapsed .nav-item.active {
    background: rgba(200, 88, 42, 0.15);
    border-left: 0;
}
.sidebar.collapsed .nav-item svg {
    margin: 0;
}
.sidebar.collapsed .sidebar-footer {
    justify-content: center;
    padding: 14px 0;
}
.sidebar.collapsed .sidebar-about {
    width: 260px;
}
/* Tooltip on collapsed items */
.sidebar.collapsed .nav-item {
    position: relative;
}
.sidebar.collapsed .nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 64px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--brown);
    color: var(--cream);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.68rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    letter-spacing: 0.5px;
    font-weight: 300;
}
.sidebar.collapsed .nav-item:hover::after {
    opacity: 1;
}

/* About Preagos sliding panel */
.sidebar-about {
    position: absolute;
    inset: 0;
    background: var(--brown);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5;
}
.sidebar-about.open {
    transform: translateX(0);
}
.about-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    background: none;
    border: none;
    color: rgba(250, 245, 238, 0.5);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.25s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.about-back:hover {
    color: var(--cream);
}
.about-back svg {
    opacity: 0.6;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}
.about-back:hover svg {
    transform: translateX(-3px);
    opacity: 1;
}
.about-content {
    flex: 1;
    padding: 32px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.about-logo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--terra) 0%, var(--terra-l) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(200, 88, 42, 0.25);
}
.about-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--cream);
    letter-spacing: 2px;
    margin: 0 0 4px;
}
.about-tagline {
    font-size: 0.6rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--terra-l);
    font-weight: 400;
    margin: 0;
}
.about-sep {
    width: 40px;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 20px auto;
}
.about-desc {
    font-size: 0.72rem;
    line-height: 1.7;
    color: rgba(250, 245, 238, 0.45);
    font-weight: 300;
    margin: 0 0 14px;
}
.about-credit {
    font-size: 0.72rem;
    line-height: 1.6;
    color: rgba(250, 245, 238, 0.6);
    font-weight: 300;
    margin: 0;
}
.about-credit strong {
    color: var(--terra-l);
    font-weight: 500;
}
.about-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 20px;
    background: rgba(200, 88, 42, 0.12);
    border: 1px solid rgba(200, 88, 42, 0.3);
    color: var(--terra-l);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-decoration: none;
    font-weight: 400;
    transition: all 0.25s ease;
}
.about-link:hover {
    background: rgba(200, 88, 42, 0.2);
    border-color: rgba(200, 88, 42, 0.5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 88, 42, 0.2);
}
.about-contact {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.about-contact span {
    font-size: 0.6rem;
    letter-spacing: 1px;
    color: rgba(250, 245, 238, 0.25);
    font-weight: 200;
}

.main-content {
    flex: 1;
    margin-left: 260px;
    padding: 36px 40px;
    min-width: 0; /* allow flex child to shrink below content width */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile sidebar */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    transition: opacity 0.3s;
}
.sidebar-overlay.show {
    display: block;
    opacity: 1;
}
.mob-menu-btn {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 35;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--brown);
    border: none;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.mob-menu-btn span {
    width: 20px;
    height: 1.5px;
    background: var(--cream);
    border-radius: 1px;
    transition: var(--transition);
}

/* ══════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}
.page-header h1 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    color: var(--txt);
}
.page-header h1 em {
    color: var(--terra);
    font-style: italic;
}
.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(200, 88, 42, 0.35);
    color: var(--terra);
    background: transparent;
    border-radius: var(--radius);
    padding: 10px 20px;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    font-size: 0.62rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn:hover {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
}
.btn-primary {
    background: linear-gradient(135deg, var(--terra), var(--terra-l));
    color: var(--cream);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(200, 88, 42, 0.2);
}
.btn-primary:hover {
    box-shadow: 0 4px 16px rgba(200, 88, 42, 0.3);
    transform: translateY(-1px);
}
.btn-terra {
    border-color: rgba(200, 88, 42, 0.3);
    color: var(--terra);
    background: var(--terra-bg);
}
.btn-terra:hover {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
}
.btn-sage {
    border-color: rgba(107, 155, 122, 0.4);
    color: var(--sage-d);
}
.btn-sage:hover {
    background: var(--sage);
    color: white;
    border-color: var(--sage);
}
.btn-danger-outline {
    border-color: rgba(200, 60, 60, 0.3);
    color: var(--red, #c0392b);
}
.btn-danger-outline:hover {
    background: var(--red, #c0392b);
    color: white;
    border-color: var(--red, #c0392b);
}
.btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.offline-data-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff8e1;
    border-left: 3px solid #f0a500;
    color: #7a5c00;
    font-size: 13px;
    border-radius: 4px;
}
.offline-data-banner svg {
    flex-shrink: 0;
    color: #f0a500;
}
.btn-icon-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}
.btn-icon-close:hover {
    color: #fff;
}
body.is-offline::before {
    content: "Offline";
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #c0392b;
    color: #fff;
    padding: 4px 18px;
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 9999;
    border-radius: 0 0 6px 6px;
}
.btn-sm {
    padding: 7px 14px;
    font-size: 0.58rem;
    letter-spacing: 2px;
}
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}

/* ══════════════════════════════════════
   STAT CARDS
══════════════════════════════════════ */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--terra);
}
.stat-card.green::before {
    background: var(--sage);
}
.stat-card.gold::before {
    background: var(--champ);
}
.stat-card.red::before {
    background: var(--red);
}
.stat-label {
    font-size: 0.58rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 200;
    margin-bottom: 10px;
}
.stat-num {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 2.6rem;
    color: var(--txt);
    line-height: 1;
}
.stat-sub {
    font-size: 0.76rem;
    color: var(--txt-l);
    font-weight: 300;
    margin-top: 6px;
}

/* ══════════════════════════════════════
   FILTERS
══════════════════════════════════════ */
.filters {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.filters label {
    font-size: 0.58rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 200;
}
.filters select,
.filters input[type="text"] {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 9px 16px;
    font-family: "Jost", sans-serif;
    font-size: 0.85rem;
    color: var(--txt);
    outline: none;
    transition: var(--transition);
}
.filters select:focus,
.filters input[type="text"]:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}
.filter-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-right label {
    font-size: 0.58rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 200;
    white-space: nowrap;
}
.filter-right select {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 9px 12px;
    font-family: "Jost", sans-serif;
    font-size: 0.85rem;
    color: var(--txt);
    outline: none;
    transition: var(--transition);
}

/* ══════════════════════════════════════
   TABLE
══════════════════════════════════════ */
.table-wrap {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
thead {
    background: var(--brown);
}
th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 300;
    font-size: 0.56rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cream);
    white-space: nowrap;
}
td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--cream-d);
    color: var(--txt-m);
    font-weight: 300;
    vertical-align: top;
}
tr {
    transition: background 0.15s;
}
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 1px;
}
.badge-oui {
    background: var(--sage-bg);
    color: var(--sage-d);
}
.badge-non {
    background: var(--red-bg);
    color: var(--red);
}
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--txt-l);
    font-weight: 200;
}
.empty-state p {
    font-size: 1.1rem;
    margin-bottom: 8px;
}
.empty-state span {
    font-size: 0.8rem;
}

/* ── Expandable rows ── */
.summary-row {
    cursor: pointer;
    transition: background 0.15s;
}
.summary-row:hover td {
    background: var(--terra-bg);
}
.td-expand {
    width: 40px;
    text-align: center;
    vertical-align: middle;
}
.th-expand {
    width: 40px;
}
.expand-icon {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--txt-l);
    transition: transform 0.25s ease;
}
.summary-row.expanded .expand-icon {
    transform: rotate(180deg);
}
.detail-row {
    display: none;
}
.detail-row.open {
    display: table-row;
}
.detail-row td {
    padding: 0 16px 20px;
    background: var(--cream);
    border-bottom: 2px solid var(--cream-d);
}
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px 24px;
    padding: 16px 0 4px;
}
.detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.detail-item.detail-full {
    grid-column: 1/-1;
}
.detail-label {
    font-size: 0.54rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 300;
}
.detail-item span:not(.detail-label),
.detail-item a {
    font-size: 0.85rem;
    color: var(--txt-m);
    font-weight: 300;
}
.detail-subsection {
    grid-column: 1/-1;
    margin-top: 4px;
}
.detail-guest-table {
    width: 100%;
    margin-top: 8px;
    font-size: 0.78rem;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    overflow: hidden;
}
.detail-guest-table th {
    background: var(--cream-d);
    color: var(--txt-m);
    padding: 8px 12px;
    font-size: 0.54rem;
}
.detail-guest-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: #fff;
}

/* ── Sortable headers ── */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
.sortable:hover {
    background: rgba(255, 255, 255, 0.08);
}
.sort-icon {
    display: inline-block;
    width: 12px;
    margin-left: 4px;
    vertical-align: middle;
}
.sort-icon::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    vertical-align: middle;
    opacity: 0.3;
}
.sortable.sort-asc .sort-icon::after {
    border-bottom: 5px solid var(--cream);
    border-top: none;
    opacity: 1;
}
.sortable.sort-desc .sort-icon::after {
    border-top: 5px solid var(--cream);
    border-bottom: none;
    opacity: 1;
}

.loading {
    text-align: center;
    padding: 40px;
    color: var(--txt-l);
    font-weight: 200;
    font-size: 0.9rem;
}
.loading::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--txt-l);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
    margin-left: 8px;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.skeleton {
    background: linear-gradient(90deg, var(--cream-d) 25%, var(--cream) 50%, var(--cream-d) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    height: 18px;
    margin: 6px 0;
}
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ══════════════════════════════════════
   PAGINATION
══════════════════════════════════════ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
}
.pag-info {
    font-size: 0.76rem;
    color: var(--txt-l);
    font-weight: 300;
    letter-spacing: 0.5px;
}
.pag-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.pag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--txt-m);
    cursor: pointer;
    transition: var(--transition);
}
.pag-btn:hover:not(:disabled):not(.active) {
    border-color: var(--terra);
    color: var(--terra);
    background: var(--terra-bg);
}
.pag-btn.active {
    background: var(--terra);
    color: var(--cream);
    border-color: var(--terra);
    font-weight: 400;
}
.pag-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.pag-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
    color: var(--txt-l);
}

/* ══════════════════════════════════════
   TAB PANELS
══════════════════════════════════════ */
.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}

/* ══════════════════════════════════════
   CMS — EDIT SITE
══════════════════════════════════════ */
.cms-section {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
    transition: var(--transition);
}
.cms-section:hover {
    box-shadow: var(--shadow-md);
}

.cms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}
.cms-header:hover {
    background: rgba(200, 88, 42, 0.02);
}
.cms-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cms-header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cms-header-icon svg {
    width: 18px;
    height: 18px;
}
.cms-header-icon.gen {
    background: var(--terra-bg);
    color: var(--terra);
}
.cms-header-icon.welcome {
    background: var(--sage-bg);
    color: var(--sage);
}
.cms-header-icon.story {
    background: var(--champ-bg);
    color: var(--txt-m);
}
.cms-header-icon.prog {
    background: rgba(100, 80, 180, 0.08);
    color: #6450b4;
}
.cms-header-icon.rsvp {
    background: var(--red-bg);
    color: var(--red);
}
.cms-header-icon.gift {
    background: rgba(200, 160, 80, 0.1);
    color: #b8862d;
}
.cms-header-icon.accom {
    background: rgba(80, 140, 180, 0.08);
    color: #508cb4;
}
.cms-header-icon.msg {
    background: rgba(180, 100, 140, 0.08);
    color: #b4648c;
}

.cms-header h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--txt);
}
.cms-header h3 em {
    color: var(--terra);
    font-style: italic;
    font-weight: 300;
}
.cms-header .cms-arrow {
    transition: transform 0.3s;
    color: var(--txt-l);
    font-size: 1.2rem;
}
.cms-section.open .cms-arrow {
    transform: rotate(180deg);
}

.cms-body {
    display: none;
    padding: 0 24px 24px;
    border-top: 1px solid var(--cream-d);
}
.cms-section.open .cms-body {
    display: block;
}

/* CMS Form Elements */
.cms-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}
.cms-row.full {
    grid-template-columns: 1fr;
}
/* Stack fields in narrow CMS panel (3-column layout) */
.cms-editor-layout .cms-panel .cms-row {
    grid-template-columns: 1fr;
}
.cms-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cms-field label {
    font-size: 0.58rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 300;
}
.cms-field input,
.cms-field textarea,
.cms-field select {
    background: var(--cream);
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 12px 16px;
    font-family: "Jost", sans-serif;
    font-size: 0.88rem;
    color: var(--txt);
    outline: none;
    transition: var(--transition);
    font-weight: 300;
    resize: vertical;
}
.cms-field input:focus,
.cms-field textarea:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
    background: #fff;
}
.cms-field textarea {
    min-height: 100px;
    line-height: 1.7;
}

.address-field-wrap {
    position: relative;
    width: 100%;
}
.address-field-wrap input[type="text"] {
    padding-right: 34px;
    width: 100%;
}
.address-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--txt-l);
    pointer-events: none;
    opacity: 0.5;
}
.pac-container {
    z-index: 100000 !important;
    font-family: "Jost", sans-serif;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--cream-d);
    margin-top: 4px;
}
.pac-item {
    padding: 8px 14px;
    font-size: 0.85rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
}
.pac-item:hover {
    background: var(--cream-bg, #faf5ee);
}
.pac-item-query {
    font-weight: 500;
    color: var(--brown, #3a2a1c);
}
.pac-icon {
    display: none;
}

.cms-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cream-d);
}

/* Toggle switch */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--cream-dd);
    border-radius: 26px;
    transition: var(--transition);
}
.toggle-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: var(--transition);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--sage);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}
.toggle-label {
    font-size: 0.82rem;
    color: var(--txt-m);
    font-weight: 300;
}
.pwd-row-disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Save toast feedback */
.save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--sage-d);
    opacity: 0;
    transition: opacity 0.3s;
}
.save-indicator.show {
    opacity: 1;
}

/* Timeline editor */
.tl-editor {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tl-event {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-radius: var(--radius);
    border: 1px solid var(--cream-d);
    transition: var(--transition);
    cursor: default;
}
.tl-event:hover {
    border-color: var(--cream-dd);
}
.tl-event.tl-dragging {
    opacity: 0.4;
    border-color: var(--terra);
}
.tl-event.tl-drag-over {
    border-color: var(--terra);
    box-shadow: 0 -2px 0 0 var(--terra);
}
.tl-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    flex-shrink: 0;
    cursor: grab;
    color: var(--txt-xl);
    border-right: 1px solid var(--cream-d);
    transition: color 0.15s;
}
.tl-drag-handle:active {
    cursor: grabbing;
}
.tl-drag-handle:hover {
    color: var(--terra);
}
.tl-drag-handle svg {
    width: 16px;
    height: 16px;
}
.tl-fields {
    flex: 1;
    display: grid;
    grid-template-columns: 90px 1fr 1fr;
    gap: 10px;
    padding: 12px 14px;
    min-width: 0;
}
.tl-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.tl-field label {
    font-size: 0.52rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 400;
}
.tl-event input {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: "Jost", sans-serif;
    font-size: 0.82rem;
    color: var(--txt);
    outline: none;
    width: 100%;
    transition: var(--transition);
    box-sizing: border-box;
}
.tl-event input[type="time"] {
    padding: 8px 6px;
    font-variant-numeric: tabular-nums;
}
.tl-event input:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 2px rgba(200, 88, 42, 0.08);
}
.tl-event .tl-remove {
    width: 36px;
    flex-shrink: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    border: none;
    border-left: 1px solid var(--cream-d);
    background: transparent;
    color: var(--txt-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: var(--transition);
}
.tl-event .tl-remove:hover {
    background: var(--red);
    color: white;
}

/* Stack fields vertically in narrow panels */
@media (max-width: 1400px) {
    .cms-panel .tl-fields {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

.tl-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px dashed var(--cream-d);
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    transition: var(--transition);
    font-weight: 300;
}
.tl-add:hover {
    border-color: var(--terra);
    color: var(--terra);
    background: var(--terra-bg);
}
.tl-day-group {
    margin-bottom: 24px;
    border-left: 3px solid var(--terra);
    padding-left: 16px;
}
.tl-day-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    color: var(--terra);
    margin: 0 0 12px 0;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════
   THEME EDITOR
══════════════════════════════════════ */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-top: 18px;
}
.color-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.color-item input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border: 2px solid var(--cream-d);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 2px;
    background: transparent;
    transition: var(--transition);
}
.color-item input[type="color"]:hover {
    border-color: var(--terra);
}
.color-item input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
.color-item input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
.color-item input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}
.color-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.color-meta .color-name {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--txt);
}
.color-meta .color-hex {
    font-size: 0.64rem;
    font-family: monospace;
    color: var(--txt-l);
}

.color-reset {
    background: none;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--txt-l);
    transition: var(--transition);
    flex-shrink: 0;
    margin-left: auto;
}
.color-reset:hover {
    border-color: var(--terra);
    color: var(--terra);
}

.color-desc {
    font-size: 0.6rem;
    font-weight: 300;
    color: var(--txt-l);
    line-height: 1.35;
    font-style: italic;
}

.field-hint {
    font-size: 0.62rem;
    font-weight: 300;
    color: var(--txt-l);
    margin: -2px 0 4px;
    line-height: 1.4;
    font-style: italic;
}

.theme-subgroup {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cream-d);
}
.theme-subgroup:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.theme-subgroup-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Jost", sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--txt-m);
    margin-bottom: 8px;
}
.theme-subgroup-title svg {
    opacity: 0.5;
}

.font-preview {
    margin-top: 14px;
    padding: 18px 20px;
    background: var(--cream);
    border-radius: var(--radius);
    border: 1px solid var(--cream-d);
}
.font-preview-title {
    font-size: 1.6rem;
    font-weight: 300;
    margin-bottom: 2px;
    color: var(--txt);
}
.font-preview-subtitle {
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--txt-m);
    margin-bottom: 8px;
}
.font-preview-body {
    font-size: 0.88rem;
    font-weight: 300;
    color: var(--txt-m);
    line-height: 1.65;
    margin-bottom: 8px;
}
.font-preview-accent {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--terra);
    font-style: italic;
}

/* ── Font Select Dropdown ── */
.font-select-field {
    margin-bottom: 16px;
}
.font-select-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.font-select {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    padding: 9px 32px 9px 12px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.82rem;
    font-weight: 300;
    color: var(--txt);
    background: #fff;
    cursor: pointer;
    transition: var(--transition);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B7A68' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.font-select:hover {
    border-color: var(--terra);
}
.font-select:focus {
    border-color: var(--terra);
    outline: none;
    box-shadow: 0 0 0 3px var(--terra-bg);
}
.font-select optgroup {
    font-weight: 500;
    font-style: normal;
    color: var(--txt-l);
    font-size: 0.72rem;
    letter-spacing: 1px;
}
.font-select option {
    font-weight: 300;
    color: var(--txt);
    padding: 4px 0;
}

.font-select-preview {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--txt);
    flex-shrink: 0;
    background: #fff;
}

/* ── Font Size Slider ── */
.font-size-field {
    margin-bottom: 18px;
}
.fs-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
}
.fs-value {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--terra);
    background: var(--terra-bg);
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
}
.fs-value.is-default {
    color: var(--txt-l);
    background: var(--cream-d);
}
.fs-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fs-min,
.fs-max {
    font-size: 0.6rem;
    font-weight: 300;
    color: var(--txt-l);
    min-width: 24px;
    text-align: center;
}
.fs-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--cream-d) 0%, var(--terra-bg) 100%);
    outline: none;
    cursor: pointer;
}
.fs-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--terra);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.15s ease;
}
.fs-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.fs-reset {
    background: none;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--txt-l);
    transition: var(--transition);
    flex-shrink: 0;
}
.fs-reset:hover {
    border-color: var(--terra);
    color: var(--terra);
}
.fs-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--terra);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* ══════════════════════════════════════
   SCOPE BADGES (Global / Template)
══════════════════════════════════════ */
.scope-badge {
    display: inline-block;
    font-size: 0.52rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
.scope-global {
    background: var(--sage-bg);
    color: var(--sage-d);
    border: 1px solid rgba(107, 155, 122, 0.2);
}
.scope-tpl {
    background: rgba(100, 80, 180, 0.06);
    color: #6450b4;
    border: 1px solid rgba(100, 80, 180, 0.15);
}

/* ══════════════════════════════════════
   BULK SELECT & DELETE
══════════════════════════════════════ */
.th-check {
    width: 36px;
    text-align: center;
}
.td-check {
    width: 36px;
    text-align: center;
    vertical-align: middle;
}
.th-check input,
.td-check input,
.row-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--terra);
}
.bulk-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 12px;
    background: var(--terra-bg);
    border: 1px solid rgba(200, 88, 42, 0.2);
    border-radius: var(--radius);
    animation: bulkIn 0.2s ease;
}
@keyframes bulkIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.bulk-count {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--terra);
    letter-spacing: 0.5px;
    margin-right: auto;
}
.bulk-bar .btn {
    border-color: rgba(200, 88, 42, 0.3);
}

/* ══════════════════════════════════════
   GUEST BOOK
══════════════════════════════════════ */
.gb-subtitle {
    font-size: 0.82rem;
    color: var(--txt-l);
    font-weight: 300;
    margin-bottom: 8px;
}
.gb-count {
    font-size: 0.72rem;
    color: var(--txt-l);
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 20px;
}
.gb-msg-cell {
    max-width: 320px;
    font-size: 0.82rem;
    color: var(--txt-m);
    font-weight: 300;
    line-height: 1.5;
    font-style: italic;
}
.gb-detail-msg {
    padding: 16px 0 4px;
}
.gb-detail-msg .detail-label {
    margin-bottom: 8px;
}
.gb-detail-msg p {
    font-size: 0.88rem;
    color: var(--txt-m);
    font-weight: 300;
    line-height: 1.7;
    font-style: italic;
    white-space: pre-wrap;
    margin: 0;
}

/* ══════════════════════════════════════
   ACTIONS MENU
══════════════════════════════════════ */
.th-actions {
    width: 68px;
}
.td-actions {
    width: 68px;
    text-align: center;
    vertical-align: middle;
    position: relative;
}
.actions-wrap {
    position: relative;
    display: inline-block;
}
.actions-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--txt-l);
    padding: 4px 8px;
    border-radius: var(--radius);
    transition: var(--transition);
    line-height: 1;
}
.actions-btn:hover {
    background: var(--terra-bg);
    color: var(--terra);
}
.actions-menu {
    display: none;
    position: fixed;
    z-index: 200;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--cream-d);
    min-width: 180px;
    padding: 6px 0;
    animation: menuIn 0.15s ease;
}
.actions-menu.open {
    display: block;
}
@keyframes menuIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.actions-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    font-family: "Jost", sans-serif;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--txt-m);
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
.actions-menu button:hover {
    background: var(--terra-bg);
}
.actions-menu button svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.actions-menu button.actions-danger {
    color: var(--red);
}
.actions-menu button.actions-danger:hover {
    background: rgba(220, 38, 38, 0.06);
}

/* ══════════════════════════════════════
   EDIT MODAL
══════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(58, 42, 28, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    background: #fff;
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px);
    transition: transform 0.25s ease;
}
.modal-overlay.open .modal-content {
    transform: translateY(0);
}
.modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cream-d);
    flex-shrink: 0;
}
.modal-header h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--txt);
}
.modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: #222;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition:
        background 0.15s,
        color 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    z-index: 2;
}
.modal-close:hover {
    background: #f0f0f0;
    color: #000;
}
.modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.edit-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.edit-row label {
    font-size: 0.54rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 300;
}
.edit-row input,
.edit-row select,
.edit-row textarea {
    font-family: "Jost", sans-serif;
    font-size: 0.85rem;
    font-weight: 300;
    padding: 10px 14px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    color: var(--txt);
    background: #fff;
    transition: border-color 0.2s;
}
.edit-row input:focus,
.edit-row select:focus,
.edit-row textarea:focus {
    border-color: var(--terra);
    outline: none;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--cream-d);
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   TEMPLATES
══════════════════════════════════════ */
.tpl-subtitle {
    font-size: 0.82rem;
    color: var(--txt-l);
    font-weight: 300;
    margin-bottom: 24px;
}
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.tpl-card {
    background: #fff;
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    border: 2px solid transparent;
}
.tpl-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.tpl-card.active {
    border-color: var(--terra);
}
.tpl-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: var(--terra);
    color: var(--cream);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
}
.tpl-badge-premium {
    background: linear-gradient(135deg, var(--brown), #5a3d28);
    color: var(--champ);
    left: 12px;
    right: auto;
}
.tpl-card.tpl-locked {
    opacity: 0.7;
}
.tpl-card.tpl-locked:hover {
    opacity: 0.85;
}
.tpl-preview {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: var(--cream-d);
}
.tpl-preview iframe {
    width: 200%;
    height: 200%;
    border: none;
    transform: scale(0.5);
    transform-origin: top left;
    pointer-events: none;
}
.tpl-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(255, 255, 255, 0.9) 100%);
}
.tpl-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        var(--cream-d),
        var(--cream-d) 10px,
        rgba(200, 88, 42, 0.03) 10px,
        rgba(200, 88, 42, 0.03) 20px
    );
}
.tpl-placeholder-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--txt-l);
    opacity: 0.5;
}
.tpl-placeholder-inner svg {
    width: 36px;
    height: 36px;
}
.tpl-placeholder-inner span {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
}
.tpl-skeleton-card {
    pointer-events: none;
}
.tpl-coming {
    opacity: 0.6;
}
.tpl-coming:hover {
    opacity: 0.8;
    transform: none;
}
.tpl-info {
    padding: 20px 22px 22px;
}
.tpl-info h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 8px;
}
.tpl-info p {
    font-size: 0.78rem;
    color: var(--txt-l);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 14px;
}
.tpl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.tpl-tag {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--terra);
    padding: 4px 12px;
    border: 1px solid rgba(200, 88, 42, 0.2);
    border-radius: 20px;
}
.tpl-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.tpl-actions .btn {
    font-size: 0.6rem;
    padding: 10px 18px;
}

/* ══════════════════════════════════════
   CMS EDITOR PANEL (within Templates tab)
══════════════════════════════════════ */
.cms-editor {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--cream);
    flex-direction: column;
    animation: cmsSlideIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-editor.open {
    display: flex;
}

@keyframes cmsSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cms-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 28px;
    background: #fff;
    border-bottom: 1px solid var(--cream-d);
    flex-shrink: 0;
    gap: 16px;
}

.cms-editor-back {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 8px 16px 8px 10px;
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--txt-m);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.cms-editor-back:hover {
    border-color: var(--terra);
    color: var(--terra);
}
.cms-editor-back svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cms-editor-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.cms-editor-title h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cms-editor-badge {
    display: inline-block;
    font-size: 0.52rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}
.cms-editor-badge.is-active {
    background: var(--terra-bg);
    color: var(--terra);
    border: 1px solid rgba(200, 88, 42, 0.2);
}
.cms-editor-badge.is-inactive {
    background: var(--cream-d);
    color: var(--txt-l);
    border: 1px solid var(--cream-dd);
}

.cms-editor-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Three-column layout: nav sidebar + live preview + content panel */
.cms-editor-layout {
    display: grid;
    grid-template-columns: 200px 1fr 440px;
    flex: 1;
    overflow: hidden;
}

/* CMS Nav Sidebar */
.cms-nav {
    background: #fff;
    border-right: 1px solid var(--cream-d);
    overflow-y: auto;
    padding: 16px 0;
}

.cms-nav-group {
    margin-bottom: 8px;
}

.cms-nav-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 6px;
    font-size: 0.52rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--txt-l);
}
.cms-nav-group-title svg {
    width: 12px;
    height: 12px;
    opacity: 0.5;
}

.cms-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 24px;
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--txt-m);
    cursor: pointer;
    transition: var(--transition);
    border-left: 2px solid transparent;
    position: relative;
}
.cms-nav-item:hover {
    background: rgba(200, 88, 42, 0.03);
    color: var(--txt);
}
.cms-nav-item.active {
    background: var(--terra-bg);
    color: var(--terra);
    font-weight: 400;
    border-left-color: var(--terra);
}
.cms-nav-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.55;
}
.cms-nav-item.active svg {
    opacity: 1;
}

.cms-nav-sep {
    height: 1px;
    background: var(--cream-d);
    margin: 8px 20px;
}

/* ══════════════════════════════════════
   LIVE PREVIEW PANEL
══════════════════════════════════════ */
.cms-preview {
    display: flex;
    flex-direction: column;
    background: #e8e2da;
    border-right: 1px solid var(--cream-d);
    position: relative;
    overflow: hidden;
}
.cms-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid var(--cream-d);
    flex-shrink: 0;
}
.preview-device-toggle {
    display: flex;
    gap: 2px;
    background: var(--cream);
    border-radius: var(--radius);
    padding: 2px;
}
.preview-device-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--txt-l);
    transition: var(--transition);
}
.preview-device-btn:hover {
    color: var(--txt);
    background: rgba(0, 0, 0, 0.04);
}
.preview-device-btn.active {
    background: #fff;
    color: var(--terra);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.preview-open-btn {
    padding: 4px 8px !important;
    font-size: 0.6rem !important;
}
.cms-preview-frame-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    position: relative;
    overflow: hidden;
}
.cms-preview-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition:
        width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cms-preview-iframe.device-mobile {
    width: 375px;
    height: 100%;
    max-height: 100%;
}
.cms-preview-iframe.device-tablet {
    width: 768px;
    height: 100%;
    max-height: 100%;
}
.cms-preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #e8e2da;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.cms-preview-loading.hidden {
    opacity: 0;
    pointer-events: none;
}
.cms-preview-loading span {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 300;
}
.preview-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--cream-d);
    border-top-color: var(--terra);
    border-radius: 50%;
    animation: previewSpin 0.8s linear infinite;
}
@keyframes previewSpin {
    to {
        transform: rotate(360deg);
    }
}

/* CMS Content Panel */
.cms-panel {
    overflow-y: auto;
    padding: 28px 32px;
    background: var(--cream);
    transition: opacity 0.12s ease;
    position: relative;
}
.cms-panel.switching {
    opacity: 0;
}

.cms-panel-section {
    display: none;
    animation: cmsFadeIn 0.2s ease;
}
.cms-panel-section.active {
    display: block;
    min-height: 60vh;
}

@keyframes cmsFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Override CMS section styles inside the editor */
.cms-editor .cms-section {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;
}
.cms-editor .cms-section:hover {
    box-shadow: none;
}
.cms-editor .cms-header {
    display: none;
}
.cms-editor .cms-body {
    display: block;
    padding: 0;
    border-top: none;
}
.cms-editor .cms-actions {
    margin-top: 24px;
    padding-top: 20px;
}

/* Section title shown above each section content */
.cms-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.cms-section-title .cms-header-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cms-section-title .cms-header-icon svg {
    width: 18px;
    height: 18px;
}
.cms-section-title h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--txt);
}
.cms-section-title .scope-badge {
    margin-left: 0;
}

/* Responsive: medium screens — hide preview, two-column */
@media (max-width: 1100px) {
    .cms-editor-layout {
        grid-template-columns: 200px 1fr;
    }
    .cms-preview {
        display: none;
    }
}

/* Responsive: collapse nav on tablet */
@media (max-width: 900px) {
    .cms-editor-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow: hidden;
    }
    .cms-preview {
        display: none;
    }
    .cms-nav {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--cream-d);
        padding: 0;
        white-space: nowrap;
        gap: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
    }
    .cms-nav::-webkit-scrollbar {
        display: none;
    }
    .cms-nav-group {
        margin: 0;
        display: flex;
        align-items: stretch;
    }
    .cms-nav-group-title {
        padding: 8px 10px;
        font-size: 0.42rem;
        writing-mode: horizontal-tb;
        background: var(--cream-d);
        color: var(--txt-l);
        display: flex;
        align-items: center;
        gap: 4px;
        border-right: 1px solid rgba(0, 0, 0, 0.06);
        font-weight: 600;
        letter-spacing: 2px;
        user-select: none;
        pointer-events: none;
    }
    .cms-nav-group-title svg {
        width: 10px;
        height: 10px;
    }
    .cms-nav-item {
        padding: 10px 14px;
        border-left: none;
        border-bottom: 2px solid transparent;
        font-size: 0.72rem;
        white-space: nowrap;
    }
    .cms-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--terra);
    }
    .cms-nav-sep {
        width: 0;
        height: auto;
        margin: 0;
        border-left: 1px solid var(--cream-d);
    }
    .cms-panel {
        padding: 20px 16px;
        overflow-y: auto;
    }
    .cms-editor-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .cms-editor-title h2 {
        font-size: 1rem;
    }
}

/* Responsive: small mobile */
@media (max-width: 600px) {
    .cms-editor-header {
        padding: 10px 12px;
        gap: 8px;
        flex-direction: column;
        align-items: stretch;
    }
    .cms-editor-back {
        padding: 6px 12px 6px 8px;
        font-size: 0.65rem;
        align-self: flex-start;
    }
    .cms-editor-title {
        gap: 8px;
    }
    .cms-editor-title h2 {
        font-size: 0.9rem;
    }
    .cms-editor-badge {
        font-size: 0.48rem;
        padding: 2px 8px;
    }
    .cms-editor-actions {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: stretch;
    }
    .cms-editor-actions .btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        font-size: 0.6rem;
        padding: 6px 8px;
    }
    .cms-nav-group-title {
        padding: 6px 8px;
        font-size: 0.38rem;
        letter-spacing: 1.5px;
    }
    .cms-nav-item {
        padding: 8px 10px;
        font-size: 0.65rem;
    }
    .cms-nav-item svg {
        width: 12px;
        height: 12px;
    }
    .cms-nav-sep {
        border-left-width: 1px;
    }
    .cms-panel {
        padding: 16px 12px;
    }
    .cms-section-title {
        gap: 8px;
        margin-bottom: 14px;
    }
    .cms-section-title .cms-header-icon {
        width: 30px;
        height: 30px;
    }
    .cms-section-title .cms-header-icon svg {
        width: 14px;
        height: 14px;
    }
    .cms-section-title h3 {
        font-size: 0.95rem;
    }
    .cms-row {
        flex-direction: column;
        gap: 0;
    }
    .cms-field {
        min-width: 100%;
    }
    .color-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .slot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .font-select-wrap {
        flex-direction: column;
        gap: 8px;
    }
    .font-select {
        width: 100%;
    }
    .font-select-preview {
        display: none;
    }
    .font-preview {
        padding: 14px;
    }
    .font-preview-title {
        font-size: 1.3rem;
    }
    .fs-header {
        flex-wrap: wrap;
    }
    .theme-subgroup {
        margin-top: 14px;
        padding-top: 12px;
    }
}

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 200;
    background: var(--brown);
    color: var(--cream);
    padding: 14px 28px;
    border-radius: var(--radius);
    font-size: 0.82rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-lg);
    transform: translateY(20px);
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 48px);
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}
.toast.error {
    background: var(--red);
}
.toast svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   CROP MODAL
══════════════════════════════════════ */
.crop-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(30, 20, 12, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.crop-overlay.open {
    opacity: 1;
}
.crop-modal {
    background: #fff;
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    transform: translateY(16px);
    transition: transform 0.3s ease;
}
.crop-overlay.open .crop-modal {
    transform: translateY(0);
}
.crop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--cream-d);
}
.crop-header h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--txt);
}
.crop-ratio-label {
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--terra);
    background: var(--terra-bg);
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}
.crop-container {
    max-height: 60vh;
    overflow: hidden;
    background: var(--cream-d);
}
.crop-container img {
    display: block;
    max-width: 100%;
}
.crop-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--cream-d);
}
.crop-cancel {
    background: transparent !important;
    color: var(--txt-l) !important;
    border: 1px solid var(--cream-d) !important;
}
.crop-cancel:hover {
    background: var(--cream-d) !important;
}
.crop-confirm {
    background: var(--terra) !important;
    color: #fff !important;
    border: none !important;
}
.crop-confirm:hover {
    background: var(--terra-l) !important;
}

/* ══════════════════════════════════════
   IMAGE SLOT CARDS
══════════════════════════════════════ */
.slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}
.slot-card {
    position: relative;
    border-radius: var(--radius);
    border: 2px dashed var(--cream-dd);
    background: var(--cream);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
}
.slot-card:hover {
    border-color: var(--terra-ll);
    box-shadow: var(--shadow-sm);
}
.slot-card.has-image {
    border-style: solid;
    border-color: var(--cream-d);
}
.slot-card.has-image:hover {
    border-color: var(--terra);
    box-shadow: var(--shadow-md);
}
.slot-card.slot-uploading {
    opacity: 0.6;
    pointer-events: none;
}
.slot-card.slot-uploading::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(250, 245, 238, 0.6);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10' fill='none' stroke='%23C8582A' stroke-width='2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.slot-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slot-empty svg {
    width: 32px;
    height: 32px;
    color: var(--txt-xl);
    transition: color 0.2s;
}
.slot-card:hover .slot-empty svg {
    color: var(--terra);
}
.slot-thumb {
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.slot-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.slot-card:hover .slot-thumb img {
    transform: scale(1.04);
}
.slot-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(30, 20, 12, 0.65);
    color: #fff;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.2s,
        background 0.2s;
}
.slot-card:hover .slot-remove {
    opacity: 1;
}
.slot-remove:hover {
    background: var(--red);
}
.slot-reset {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(30, 20, 12, 0.65);
    color: #fff;
    border: none;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
        opacity 0.2s,
        background 0.2s;
}
.slot-card:hover .slot-reset {
    opacity: 1;
}
.slot-reset:hover {
    background: var(--primary);
}
.slot-badge {
    position: absolute;
    bottom: 36px;
    left: 6px;
    z-index: 2;
    background: #e8a820;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.slot-badge-remove {
    background: var(--red);
}
.slot-unsaved {
    outline: 2px solid #e8a820;
    outline-offset: -2px;
    border-radius: 8px;
}
.slot-info {
    padding: 8px 10px;
    background: #fff;
    border-top: 1px solid var(--cream-d);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.slot-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slot-ratio {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--terra);
    background: var(--terra-bg);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
    white-space: nowrap;
}

/* Inline image slots within content sections */
.cms-slot-inline {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cream-d);
}
.cms-slot-inline-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--txt-m);
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.cms-slot-inline-title svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Slot restrictions hint */
.slot-restrictions {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--txt-l);
    font-weight: 300;
    margin-top: 10px;
    letter-spacing: 0.2px;
}
.slot-restrictions svg {
    opacity: 0.5;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   IMAGE PICKER MODAL
══════════════════════════════════════ */
.picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(58, 42, 28, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.15s ease;
}
.picker-modal {
    background: #fff;
    border-radius: 12px;
    width: 90vw;
    max-width: 640px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: slideUp 0.2s ease;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--cream-d);
}
.picker-header h3 {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--txt);
    margin: 0;
    letter-spacing: 0.3px;
}
.picker-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    color: var(--txt-l);
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}
.picker-close:hover {
    background: var(--cream-d);
}
.picker-restrictions {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    color: var(--txt-l);
    font-weight: 300;
    padding: 10px 22px 0;
    margin: 0;
    letter-spacing: 0.2px;
}
.picker-restrictions svg {
    opacity: 0.5;
    flex-shrink: 0;
}
.picker-actions {
    padding: 12px 22px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--cream-d);
}
.picker-upload-btn {
    display: flex;
    align-items: center;
    gap: 6px;
}
.picker-gallery {
    padding: 16px 22px 22px;
    overflow-y: auto;
    flex: 1;
    min-height: 120px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    align-content: start;
}
.picker-img {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid transparent;
    transition:
        border-color 0.15s,
        transform 0.15s;
}
.picker-img:hover {
    border-color: var(--terra);
    transform: scale(1.03);
}
.picker-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.picker-img-size {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.48rem;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}
.picker-empty {
    grid-column: 1/-1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--txt-l);
    font-weight: 300;
    padding: 30px 0;
}
.picker-loading {
    grid-column: 1/-1;
    text-align: center;
    font-size: 0.72rem;
    color: var(--txt-l);
    font-weight: 300;
    padding: 30px 0;
}
@media (max-width: 600px) {
    .picker-modal {
        width: 95vw;
        max-height: 85vh;
    }
    .picker-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 8px;
        padding: 12px 16px 16px;
    }
}
.cms-slot-inline .slot-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* ══════════════════════════════════════
   STORAGE USAGE BAR
══════════════════════════════════════ */
.storage-usage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 16px;
}
.storage-bar {
    flex: 1;
    height: 6px;
    background: var(--cream-d);
    border-radius: 3px;
    overflow: hidden;
}
.storage-fill {
    height: 100%;
    background: var(--sage);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.storage-warning .storage-fill {
    background: #d4a024;
}
.storage-danger .storage-fill {
    background: var(--terra);
}
.storage-label {
    font-size: 0.7rem;
    color: var(--txt-l);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   GALLERY
══════════════════════════════════════ */
.section-desc {
    font-size: 0.78rem;
    color: var(--txt-l);
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 620px;
}
.field-desc {
    font-size: 0.72rem;
    color: var(--txt-l);
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 6px;
}

/* View toggle */
.view-toggle {
    display: flex;
    gap: 2px;
    background: var(--cream-d);
    border-radius: var(--radius);
    padding: 2px;
}
.view-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: calc(var(--radius) - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        color 0.2s;
    color: var(--txt-l);
}
.view-btn svg {
    width: 16px;
    height: 16px;
}
.view-btn.active {
    background: #fff;
    color: var(--txt);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Upload zone */
.upload-zone {
    border: 2px dashed var(--cream-dd);
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 16px;
    transition:
        border-color 0.2s,
        background 0.2s;
    cursor: pointer;
}
.upload-zone:hover,
.upload-zone.drag-over {
    border-color: var(--terra-l);
    background: rgba(200, 88, 42, 0.03);
}
.upload-zone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.upload-zone-inner svg {
    width: 32px;
    height: 32px;
    stroke: var(--terra-l);
    opacity: 0.6;
}
.upload-text {
    font-size: 0.82rem;
    color: var(--txt-l);
    font-weight: 300;
}
.upload-link {
    color: var(--terra);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 400;
}
.upload-hint {
    font-size: 0.68rem;
    color: var(--txt-xl);
    letter-spacing: 0.5px;
}

/* Upload progress */
.upload-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.upload-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--cream-d);
    border-radius: 2px;
    overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    background: var(--terra);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.upload-progress-text {
    font-size: 0.72rem;
    color: var(--txt-l);
    white-space: nowrap;
}

/* Gallery stats */
.gal-stats {
    margin-bottom: 12px;
}
.gal-stat {
    font-size: 0.75rem;
    color: var(--txt-l);
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Gallery table */
.gal-thumb {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--cream-d);
}
.gal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gal-thumb-empty {
    width: 100%;
    height: 100%;
    background: var(--cream-dd);
}
.gal-filename {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--txt);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gal-caption-preview {
    font-size: 0.68rem;
    color: var(--txt-l);
    font-style: italic;
    margin-top: 2px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ratio-badge {
    font-size: 0.65rem;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--cream-d);
    color: var(--txt-l);
    font-weight: 400;
    white-space: nowrap;
}

/* Gallery grid */
.gal-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.gal-grid-check {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--terra);
    opacity: 0;
    transition: opacity 0.15s;
}
.gal-grid-card:hover .gal-grid-check,
.photo-card:hover .gal-grid-check,
.gal-grid-check:checked {
    opacity: 1;
}
.gal-grid-card {
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--cream-d);
    transition:
        box-shadow 0.2s,
        transform 0.2s;
    position: relative;
}
.gal-grid-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.gal-grid-img {
    height: 160px;
    background: var(--cream-d);
    overflow: hidden;
}
.gal-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.gal-grid-card:hover .gal-grid-img img {
    transform: scale(1.05);
}
.gal-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;
    background: rgba(30, 20, 12, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}
.gal-grid-card:hover .gal-grid-overlay {
    opacity: 1;
}
.gal-grid-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background 0.2s,
        transform 0.15s;
}
.gal-grid-action svg {
    width: 16px;
    height: 16px;
    stroke: var(--txt);
}
.gal-grid-action:hover {
    background: #fff;
    transform: scale(1.1);
}
.gal-grid-action.danger:hover {
    background: var(--terra);
}
.gal-grid-action.danger:hover svg {
    stroke: #fff;
}
.gal-grid-info {
    padding: 10px 12px;
}
.gal-grid-name {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--txt);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gal-grid-meta {
    display: block;
    font-size: 0.64rem;
    color: var(--txt-l);
    margin-top: 2px;
}
.gal-grid-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    font-size: 0.82rem;
    color: var(--txt-l);
    font-weight: 300;
}

/* Gallery table — mobile responsive */
@media (max-width: 768px) {
    #gal-table-view {
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }
    #gal-table-view thead {
        display: none;
    }
    #gal-table-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #gal-table-body tr {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 10px 12px;
        border-left: 3px solid var(--terra);
    }
    #gal-table-body tr:hover td {
        background: transparent;
    }
    /* Checkbox */
    #gal-table-body .td-check {
        padding: 0;
        border: none;
        flex-shrink: 0;
    }
    /* Thumbnail */
    #gal-table-body .gal-td-thumb {
        padding: 0;
        border: none;
        flex-shrink: 0;
    }
    #gal-table-body .gal-td-thumb .gal-thumb {
        width: 48px;
        height: 48px;
    }
    /* Filename — grows to fill space */
    #gal-table-body .gal-td-name {
        flex: 1;
        min-width: 0;
        padding: 0;
        border: none;
    }
    #gal-table-body .gal-filename {
        max-width: 100%;
    }
    /* Ratio badge */
    #gal-table-body .gal-td-ratio {
        padding: 0;
        border: none;
        flex-shrink: 0;
        font-size: 0.68rem;
        color: var(--txt-l);
    }
    /* Size */
    #gal-table-body .gal-td-size {
        padding: 0;
        border: none;
        flex-shrink: 0;
        font-size: 0.68rem;
        color: var(--txt-l);
        white-space: nowrap;
    }
    /* Actions */
    #gal-table-body .td-actions {
        padding: 0;
        border: none;
        flex-shrink: 0;
        margin-left: auto;
    }
    /* Hidden on mobile */
    #gal-table-body .gal-td-dim,
    #gal-table-body .gal-td-date {
        display: none !important;
    }
}

/* Gallery edit modal extras */
.gal-edit-preview {
    width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--cream-d);
}
.gal-edit-info {
    font-size: 0.75rem;
    color: var(--txt-l);
    line-height: 1.8;
}
.gal-edit-info div {
    display: flex;
    gap: 6px;
}

/* Filters row */
.filters {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.filters select {
    padding: 8px 12px;
    border: 1px solid var(--cream-dd);
    border-radius: var(--radius);
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--txt);
    background: #fff;
    cursor: pointer;
    min-width: 160px;
}

/* ══════════════════════════════════════
   RESPONSIVE — TABLET (<=900px)
══════════════════════════════════════ */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
        padding: 24px 16px;
        padding-top: 70px;
    }
    .mob-menu-btn {
        display: flex;
    }
    .sidebar-collapse-btn {
        display: none;
    }
    .cms-row {
        grid-template-columns: 1fr;
    }
    .tl-fields {
        grid-template-columns: 1fr;
    }
    .color-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE (<=600px)
══════════════════════════════════════ */
@media (max-width: 600px) {
    .main-content {
        padding: 16px 12px;
        padding-top: 66px;
    }

    /* Stats */
    .stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .stat-card {
        padding: 16px;
    }
    .stat-num {
        font-size: 2rem;
    }
    .stat-sub {
        font-size: 0.7rem;
    }

    /* Page header */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 24px;
    }
    .header-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .header-actions .btn {
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.54rem;
        letter-spacing: 2px;
    }
    .header-actions .btn:last-child {
        grid-column: 1/-1;
    }

    /* Filters */
    .filters {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .filters select,
    .filters input[type="text"] {
        width: 100%;
        font-size: 0.82rem;
    }
    .filter-right {
        margin-left: 0;
        width: 100%;
    }
    .filter-right select {
        width: 100%;
    }

    /* Bulk bar mobile */
    .bulk-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .bulk-count {
        width: 100%;
    }

    /* Table → Card layout on mobile */
    .table-wrap {
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }
    table,
    thead,
    tbody,
    th {
        display: block;
    }
    thead {
        display: none;
    }
    tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .summary-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 6px 12px;
        align-items: center;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 14px 16px;
        border-left: 3px solid var(--terra);
    }
    .td-check {
        grid-column: 1;
        grid-row: 1/3;
    }
    .summary-row td {
        padding: 0;
        border-bottom: none;
        display: block;
        font-size: 0.82rem;
    }
    .summary-row td::before {
        display: none;
    }
    .summary-row td[data-label="#"] {
        display: none;
    }
    .summary-row td[data-label="Nom"] {
        grid-column: 1;
        font-weight: 500;
        font-size: 0.9rem;
        color: var(--txt);
    }
    .summary-row td[data-label="Presence"] {
        grid-column: 2;
        justify-self: start;
    }
    .summary-row td[data-label="Date"] {
        grid-column: 1/3;
        font-size: 0.72rem;
        color: var(--txt-l);
    }
    .summary-row td[data-label="Convives"] {
        grid-column: 3;
        grid-row: 1/3;
        font-size: 0.72rem;
        color: var(--txt-l);
        text-align: center;
    }
    .summary-row td[data-label="Convives"]::after {
        content: " conv.";
        font-size: 0.6rem;
    }
    .summary-row .td-expand {
        display: none;
    }
    .summary-row .td-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    .detail-row.open {
        display: block;
    }
    .detail-row td {
        padding: 0 16px 16px;
        background: #fff;
        border-radius: 0 0 var(--radius) var(--radius);
        margin-top: -12px;
        box-shadow: var(--shadow-sm);
        border-left: 3px solid var(--terra);
    }
    .detail-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 16px;
    }

    /* Pagination */
    .pagination {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .pag-buttons {
        justify-content: center;
    }
    .pag-btn {
        min-width: 32px;
        height: 32px;
        font-size: 0.72rem;
    }

    /* CMS */
    .cms-header {
        padding: 14px 16px;
    }
    .cms-header h3 {
        font-size: 0.95rem;
    }
    .cms-header-icon {
        width: 32px;
        height: 32px;
    }
    .cms-header-icon svg {
        width: 16px;
        height: 16px;
    }
    .cms-body {
        padding: 0 16px 16px;
    }
    .cms-row {
        gap: 12px;
        margin-top: 14px;
    }
    .cms-field input,
    .cms-field textarea {
        padding: 10px 12px;
        font-size: 0.84rem;
    }
    .cms-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .cms-actions .btn-sm {
        text-align: center;
        justify-content: center;
    }
    .save-indicator {
        justify-content: center;
    }

    /* Timeline editor */
    .tl-fields {
        grid-template-columns: 1fr;
    }
    .tl-drag-handle {
        width: 24px;
    }
    .tl-drag-handle svg {
        width: 12px;
        height: 12px;
    }

    /* Color grid */
    .color-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .color-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .color-item input[type="color"] {
        width: 100%;
        height: 36px;
    }

    /* Font preview */
    .font-preview-title {
        font-size: 1.1rem;
    }
    .font-preview-body {
        font-size: 0.82rem;
    }

    /* Sidebar */
    .sidebar {
        width: 280px;
    }

    /* Toast */
    .toast {
        bottom: 12px;
        right: 12px;
        left: 12px;
        padding: 12px 16px;
        font-size: 0.78rem;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (<=400px)
══════════════════════════════════════ */
@media (max-width: 400px) {
    .stats {
        grid-template-columns: 1fr;
    }
    .stat-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 16px;
    }
    .stat-label {
        margin-bottom: 0;
        font-size: 0.52rem;
    }
    .stat-num {
        font-size: 1.6rem;
    }
    .stat-sub {
        display: none;
    }

    .header-actions {
        grid-template-columns: 1fr;
    }

    .pwd-monogram {
        font-size: 0.9rem;
        letter-spacing: 8px;
    }
    #admin-pwd h1 {
        font-size: 1.8rem;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .color-grid {
        grid-template-columns: 1fr;
    }
    .slot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }
    .lang-switcher {
        flex-direction: column;
    }
    .dateformat-switcher {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════
   SETTINGS
══════════════════════════════════════ */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.settings-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    border: 1px solid var(--border);
    overflow: hidden;
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}
.settings-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.settings-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.settings-card-header svg {
    color: var(--terra);
    opacity: 0.7;
    flex-shrink: 0;
}
.settings-card-header h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--txt-d);
    margin: 0;
    letter-spacing: 0.5px;
}
.settings-desc {
    font-size: 0.72rem;
    color: var(--txt-m);
    line-height: 1.6;
    margin: 0 0 16px;
    font-weight: 300;
}
.settings-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--txt-d);
    background: #fff;
    transition: border-color 0.2s ease;
    cursor: pointer;
}
.settings-select:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}

/* Language switcher */
.lang-switcher {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.lang-btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    font-size: 0.74rem;
    color: var(--txt-m);
    overflow: hidden;
    white-space: nowrap;
}
.lang-btn:hover {
    border-color: var(--terra-l);
    background: rgba(200, 88, 42, 0.03);
}
.lang-btn.active {
    border-color: var(--terra);
    background: rgba(200, 88, 42, 0.06);
    color: var(--txt-d);
    font-weight: 500;
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}
.lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brown);
    color: var(--cream);
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.lang-btn.active .lang-flag {
    background: var(--terra);
}

/* Date format switcher */
.dateformat-switcher {
    display: flex;
    gap: 8px;
}
.dateformat-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    font-size: 0.76rem;
    color: var(--txt-m);
}
.dateformat-btn:hover {
    border-color: var(--terra-l);
    background: rgba(200, 88, 42, 0.03);
}
.dateformat-btn.active {
    border-color: var(--terra);
    background: rgba(200, 88, 42, 0.06);
    color: var(--txt-d);
    font-weight: 500;
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}
.dateformat-btn small {
    font-size: 0.62rem;
    color: var(--txt-l);
    font-weight: 300;
}
.dateformat-btn.active small {
    color: var(--terra);
}

/* ══════════════════════════════════════
   QR CODE & INVITATION — FAIRE-PART STUDIO
══════════════════════════════════════ */

/* Full-page overlay (like Plan de Table) */
#tab-qrcode.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--cream);
    animation: seatingSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Top bar */
.fp-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
    height: 52px;
    background: var(--brown);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fp-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: rgba(250, 245, 238, 0.55);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.08em;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s;
    padding: 6px 0;
    white-space: nowrap;
}
.fp-back-btn:hover {
    color: var(--cream);
}
.fp-topbar-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(250, 245, 238, 0.4);
}
.fp-topbar-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(250, 245, 238, 0.9);
    margin: 0;
    letter-spacing: 0.02em;
}
.fp-topbar-title em {
    font-style: italic;
    color: var(--champ);
    opacity: 0.9;
}
.fp-title-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(250, 245, 238, 0.3);
    padding-bottom: 2px;
    transition: border-color 0.2s;
}
.fp-title-editable:hover {
    border-color: var(--champ, #c9a96e);
}
.fp-title-edit-input {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: rgba(250, 245, 238, 0.9);
    letter-spacing: 0.02em;
    border: none;
    border-bottom: 2px solid var(--champ, #c9a96e);
    background: transparent;
    outline: none;
    padding: 0 0 2px;
    margin: 0;
    width: 200px;
    text-align: center;
    caret-color: var(--champ, #c9a96e);
}
.fp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fp-topbar-actions .btn {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(250, 245, 238, 0.75);
    font-size: 0.69rem;
    padding: 5px 10px;
    letter-spacing: 0.05em;
}
.fp-topbar-actions .btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--cream);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Three-column studio */
.fp-studio {
    display: grid;
    grid-template-columns: 400px 1fr 280px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* LEFT: Style gallery */
.fp-style-gallery {
    overflow-y: auto;
    overflow-x: hidden;
    background: #f0ebe1;
    border-right: 1px solid rgba(58, 42, 28, 0.1);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fp-gallery-top {
    flex-shrink: 0;
    margin-bottom: 2px;
}
.fp-gallery-label {
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(58, 42, 28, 0.45);
    margin: 0;
}
.fp-gallery-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}
.fp-gallery-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.fp-gallery-action-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 8px;
    background: transparent;
    color: rgba(58, 42, 28, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fp-gallery-action-btn:hover {
    border-color: var(--gold, #b8956a);
    color: var(--gold, #b8956a);
}
.fp-gallery-action-btn.active {
    background: var(--gold, #b8956a);
    border-color: var(--gold, #b8956a);
    color: #fff;
}
.fp-gallery-sort {
    height: 28px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 8px;
    background: transparent;
    color: rgba(58, 42, 28, 0.6);
    font-size: 0.62rem;
    font-family: 'Jost', sans-serif;
    padding: 0 6px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%233a2a1c' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 16px;
}
.fp-gallery-sort:hover, .fp-gallery-sort:focus {
    border-color: var(--gold, #b8956a);
}
.fp-gallery-search {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    position: relative;
}
.fp-gallery-search-input {
    flex: 1;
    height: 30px;
    border: 1px solid rgba(58, 42, 28, 0.15);
    border-radius: 8px;
    background: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    font-family: 'Jost', sans-serif;
    padding: 0 28px 0 10px;
    color: var(--txt, #2c1810);
    outline: none;
    transition: border-color 0.15s;
}
.fp-gallery-search-input:focus {
    border-color: var(--gold, #b8956a);
}
.fp-gallery-search-input::placeholder {
    color: rgba(58, 42, 28, 0.35);
}
.fp-gallery-search-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: rgba(58, 42, 28, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
}
.fp-gallery-search-clear:hover {
    color: var(--terra, #c4918a);
    background: rgba(196,145,138,0.1);
}
.fp-fav-filter-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 8px;
    background: transparent;
    color: rgba(58, 42, 28, 0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.fp-fav-filter-btn:hover {
    border-color: var(--gold, #b8956a);
    color: var(--gold, #b8956a);
}
.fp-fav-filter-btn.active {
    background: var(--gold, #b8956a);
    border-color: var(--gold, #b8956a);
    color: #fff;
}
.fp-gallery-top .fp-mode-btns {
    display: flex;
    gap: 4px;
}
.fp-gallery-top .fp-mode-btn {
    flex: 1;
    font-size: 0.66rem;
    /* padding: 5px 6px; */
}
/* ── Desktop saved cards grid (matches fp-gallery-styles 2-col layout) ── */
.fp-saved-card-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 2px;
    z-index: 25;
    opacity: 0;
    transition: opacity 0.15s;
}
.fp-style-item:hover .fp-saved-card-actions {
    opacity: 1;
}
.fp-saved-card-del {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    color: rgba(58, 42, 28, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.fp-saved-card-del:hover {
    background: #fff;
    color: var(--txt, #2c1810);
}
.fp-saved-card-del-danger:hover {
    background: #fef2f2;
    color: #ef4444;
}
.fp-saved-card-limit {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(58, 42, 28, 0.35);
    padding: 8px 0;
}
.fp-saved-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 16px;
    color: rgba(58, 42, 28, 0.4);
    grid-column: 1 / -1;
}
.fp-saved-empty p {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0 0 4px;
}
.fp-saved-empty small {
    font-size: 0.7rem;
}
/* Badge count on "Mes designs" button */
.fp-saved-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--gold, #b8956a);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    margin-left: 4px;
    line-height: 1;
}
.fp-mode-btn.active .fp-saved-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* 2-column grid gallery */
.fp-gallery-styles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fp-style-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 7px 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    transition:
        background 0.15s,
        border-color 0.15s;
    width: 100%;
    text-align: center;
    font-family: inherit;
}
.fp-style-item:hover {
    background: rgba(201, 169, 110, 0.1);
    border-color: rgba(201, 169, 110, 0.25);
}
.fp-style-item.active {
    background: rgba(201, 169, 110, 0.18);
    border-color: #c9a96e;
    box-shadow: 0 0 0 2px rgba(201, 169, 110, 0.35);
}
.fp-style-item span {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.74rem;
    color: var(--brown);
    line-height: 1.2;
    text-align: center;
    width: 100%;
}
.fp-style-item.active span {
    font-weight: 700;
    color: #8b6914;
}
.fp-style-thumb {
    width: 100%;
    aspect-ratio: 340 / 480;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(58, 42, 28, 0.2);
    position: relative;
    transition:
        box-shadow 0.15s,
        transform 0.15s;
}
.fp-style-item.active .fp-style-thumb {
    box-shadow:
        0 0 0 2.5px #c9a96e,
        0 6px 18px rgba(58, 42, 28, 0.28);
    transform: scale(1.03);
}
/* Checkmark badge on selected card thumbnail */
.fp-style-thumb::after {
    content: "✓";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #c9a96e;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.2s ease,
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 20;
}
.fp-style-item.active .fp-style-thumb::after {
    opacity: 1;
    transform: scale(1);
}
/* Desktop: Favorite star on hover */
.fp-fav-star {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    color: rgba(58, 42, 28, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition:
        opacity 0.15s,
        color 0.15s,
        transform 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.fp-style-item:hover .fp-fav-star,
.fp-fav-star.active {
    opacity: 1;
}
.fp-fav-star.active {
    color: #c9a96e;
}
.fp-fav-star:hover {
    transform: scale(1.15);
}
.fp-mini-card-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 340px;
    height: 480px;
    transform-origin: top left;
    pointer-events: none;
}
.fp-mini-card {
    width: 340px !important;
    height: 480px !important;
    position: relative !important;
    cursor: default !important;
    flex-shrink: 0 !important;
    animation: none !important;
    transition: none !important;
    border-radius: 0 !important;
}
.fp-thumb-royale {
    background: #1c1c2e;
}

/* CENTER: Preview stage */
.fp-preview-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: auto;
    padding: 0 0 24px;
    gap: 0;
    background: #e8e2d8;
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.08) 0%, transparent 60%),
        url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23000' fill-opacity='.04'/%3E%3C/svg%3E");
}
.fp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 40px 24px;
    min-height: 300px;
}
.fp-face-toggle-bar {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    /* sticky: always pinned at top, never jumps with content */
    position: sticky;
    top: 0;
    z-index: 10;
    /* full-width strip with stage background so scrolled content hides behind it */
    align-self: stretch;
    justify-content: center;
    background: #e8e2d8;
    padding: 8px 20px 6px;
    margin-bottom: 20px;
    border-radius: 0;
    border-bottom: 1px solid rgba(58, 42, 28, 0.08);
}
.fp-face-toggle-bar .qr-flip-btn {
    font-size: 0.71rem;
    padding: 5px 18px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: rgba(58, 42, 28, 0.55);
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: all 0.15s;
}
.fp-face-toggle-bar .qr-flip-btn.active {
    background: var(--brown);
    color: var(--cream);
    border-radius: 5px;
}
.fp-card-center {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 20px;
    margin: auto;
}
/* Center preview: scale up the flipper container so internal layout
   is computed at the correct 340×480 and centering works correctly.
   Never use zoom on the card face — it distorts min-height calculations. */
.fp-card-center .qr-card-flipper {
    width: 425px;
    height: 600px;
}
.fp-card-center .inv-content {
    min-height: 592px; /* 600px flipper − 8px card padding */
}
.fp-card-center .qr-invitation-card {
    box-shadow:
        0 12px 48px rgba(58, 42, 28, 0.28),
        0 3px 14px rgba(58, 42, 28, 0.14);
}

/* RIGHT: Settings panel */
.fp-settings-panel {
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--cream);
    border-left: 1px solid rgba(58, 42, 28, 0.08);
    min-width: 0;
}
.fp-panel-section {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(58, 42, 28, 0.06);
}
.fp-panel-section:last-child {
    border-bottom: none;
}
.fp-panel-heading {
    font-family: "Jost", sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(58, 42, 28, 0.4);
    margin: 0 0 11px;
}
.fp-panel-section .qr-field {
    margin-bottom: 18px;
}
.fp-panel-section .qr-field:last-child {
    margin-bottom: 0;
}
.fp-panel-section .qr-field > label {
    font-size: 0.72rem;
    margin-bottom: 5px;
    display: block;
    color: rgba(58, 42, 28, 0.65);
    font-weight: 500;
}

/* ═══ Back settings — QR toggle row ═══ */
.fp-back-qr-toggle-row {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(58, 42, 28, 0.08);
    background: rgba(58, 42, 28, 0.02);
}
.fp-back-qr-toggle-row .fp-toggle-label span:last-child {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt, #3a2a1c);
}

/* ═══ Verso card CSS variable overrides ═══ */
#qr-invitation-card-back,
.qr-card-back {
    background: var(--inv-verso-bg-override, var(--card-back-bg, #fff));
    color: var(--inv-verso-text-override, inherit);
}
#qr-invitation-card-back .inv-back-title,
#qr-invitation-card-back .inv-back-desc,
#qr-invitation-card-back .inv-back-names,
#qr-invitation-card-back .inv-back-date,
#qr-invitation-card-back .inv-back-scan,
.qr-card-back .inv-back-title,
.qr-card-back .inv-back-desc,
.qr-card-back .inv-back-names,
.qr-card-back .inv-back-date,
.qr-card-back .inv-back-scan {
    color: var(--inv-verso-text-override, inherit);
}

/* ═══ Accordion system in settings panel ═══ */
.fp-panel-accordions {
    padding: 0 !important;
}
.fp-accordion {
    border-bottom: 1px solid rgba(58, 42, 28, 0.06);
}
.fp-accordion:last-child {
    border-bottom: none;
}
.fp-accordion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    border: none;
    background: rgba(58, 42, 28, 0.025);
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(58, 42, 28, 0.55);
    transition: color 0.15s, background 0.15s;
}
.fp-accordion.open .fp-accordion-header {
    background: rgba(58, 42, 28, 0.045);
}
.fp-accordion-header:hover {
    color: rgba(58, 42, 28, 0.85);
    background: rgba(58, 42, 28, 0.055);
}
.fp-accordion-header > svg:first-child {
    opacity: 0.45;
    flex-shrink: 0;
}
.fp-acc-chevron {
    margin-left: auto;
    opacity: 0.35;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.fp-accordion.open .fp-acc-chevron {
    transform: rotate(180deg);
}
.fp-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 16px;
}
.fp-accordion.open .fp-accordion-body {
    max-height: 2000px;
    padding: 2px 16px 16px;
}

/* ═══ Chip row — small tappable pills ═══ */
.fp-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.fp-chip {
    padding: 5px 10px;
    border: 1px solid rgba(58, 42, 28, 0.14);
    border-radius: 16px;
    background: #fff;
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    font-weight: 400;
    color: rgba(58, 42, 28, 0.7);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.fp-chip:hover {
    border-color: rgba(184, 149, 106, 0.5);
    color: var(--brown, #3a2a1c);
}
.fp-chip.active {
    background: var(--gold, #b8956a);
    border-color: var(--gold, #b8956a);
    color: #fff;
    font-weight: 500;
}
.fp-chip-newline {
    font-size: 0.8rem;
    line-height: 1;
}

/* ═══ Alignment buttons ═══ */
.fp-align-group {
    display: inline-flex;
    border: 1px solid rgba(58, 42, 28, 0.14);
    border-radius: 8px;
    overflow: hidden;
}
.fp-align-btn {
    width: 36px;
    height: 32px;
    border: none;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(58, 42, 28, 0.45);
    transition: all 0.15s;
}
.fp-align-btn:not(:last-child) {
    border-right: 1px solid rgba(58, 42, 28, 0.1);
}
.fp-align-btn:hover {
    color: rgba(58, 42, 28, 0.8);
}
.fp-align-btn.active {
    background: var(--gold, #b8956a);
    color: #fff;
}

/* ═══ Slider row ═══ */
.fp-slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fp-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(58, 42, 28, 0.1);
    border-radius: 2px;
    outline: none;
}
.fp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold, #b8956a);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.fp-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold, #b8956a);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.fp-range-val {
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    color: rgba(58, 42, 28, 0.5);
    min-width: 26px;
    text-align: center;
}

/* ═══ Inline reset button ═══ */
.fp-inline-reset {
    width: 26px;
    height: 26px;
    border: 1px solid rgba(58, 42, 28, 0.1);
    border-radius: 50%;
    background: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    color: rgba(58, 42, 28, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}
.fp-inline-reset:hover {
    border-color: var(--terra, #c4918a);
    color: var(--terra, #c4918a);
}

/* ═══ Color row (input + reset) ═══ */
.fp-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ═══ Text input for settings panel ═══ */
.fp-text-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    font-size: 0.8rem;
    color: var(--txt, #3a2a1c);
    background: #fff;
    transition: border-color 0.15s;
}
.fp-text-input:focus {
    outline: none;
    border-color: var(--gold, #b8956a);
}
.fp-text-input::placeholder {
    color: rgba(58, 42, 28, 0.3);
}

/* ═══ Input with prefix (hashtag #) ═══ */
.fp-input-row {
    display: flex;
    align-items: center;
    gap: 0;
}
.fp-input-prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 34px;
    background: rgba(58, 42, 28, 0.05);
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-right: none;
    border-radius: 8px 0 0 8px;
    font-family: "Jost", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(58, 42, 28, 0.5);
}
.fp-input-with-prefix {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 0 8px 8px 0;
    font-family: "Jost", sans-serif;
    font-size: 0.8rem;
    color: var(--txt, #3a2a1c);
    background: #fff;
    transition: border-color 0.15s;
}
.fp-input-with-prefix:focus {
    outline: none;
    border-color: var(--gold, #b8956a);
}
.fp-input-with-prefix::placeholder {
    color: rgba(58, 42, 28, 0.3);
}

/* ═══ Field hint (small text below input) ═══ */
.fp-field-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    color: rgba(58, 42, 28, 0.4);
    font-style: italic;
}

/* ═══ Sub-input (text field below a toggle) ═══ */
.fp-sub-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: var(--brown, #3a2a1c);
    background: #fff;
    margin-top: 8px;
    outline: none;
    transition: border-color 0.15s;
}
.fp-sub-input:focus {
    border-color: var(--gold, #b8956a);
}

/* ═══ Time input ═══ */
.fp-time-input {
    width: 110px;
    padding: 6px 10px;
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-radius: 8px;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: var(--brown, #3a2a1c);
    background: #fff;
    margin-top: 8px;
    outline: none;
    transition: border-color 0.15s;
}
.fp-time-input:focus {
    border-color: var(--gold, #b8956a);
}

/* ═══ Font pair grid ═══ */
.fp-font-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.fp-font-chip {
    padding: 8px 6px;
    border: 1.5px solid rgba(58, 42, 28, 0.1);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.fp-font-chip:hover {
    border-color: rgba(184, 149, 106, 0.5);
}
.fp-font-chip.active {
    border-color: var(--gold, #b8956a);
    background: rgba(184, 149, 106, 0.06);
}
.fp-font-chip-name {
    display: block;
    font-size: 0.65rem;
    color: rgba(58, 42, 28, 0.4);
    margin-top: 2px;
    font-family: "Jost", sans-serif;
}
.fp-font-chip-preview {
    display: block;
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--brown, #3a2a1c);
}

/* ═══ Visibility toggle stack ═══ */
.fp-vis-toggles .fp-toggle-label {
    margin-bottom: 10px;
}
.fp-vis-toggles .fp-toggle-label:last-child {
    margin-bottom: 0;
}

/* Photo overlay field — hidden by default, shown for photo style */
.fp-photo-overlay-field {
    display: none;
}
.fp-photo-overlay-visible .fp-photo-overlay-field {
    display: block;
}

/* Settings panel: constrain all children to panel width */
.fp-settings-panel * {
    box-sizing: border-box;
}
.fp-settings-panel .qr-url-row {
    flex-wrap: wrap;
}
.fp-settings-panel .qr-url-row input {
    min-width: 0;
    padding: 8px 10px;
    font-size: 0.78rem;
}
.fp-settings-panel .qr-url-row .btn {
    white-space: nowrap;
}
.fp-settings-panel .qr-dot-style-btns {
    gap: 5px;
    flex-wrap: wrap;
}
.fp-settings-panel .qr-dot-btn,
.fp-settings-panel .qr-eye-btn,
.fp-settings-panel .qr-logo-btn {
    width: 40px;
    height: 40px;
}
.fp-settings-panel .qr-logo-upload-btn {
    width: 40px;
    height: 40px;
}
.fp-settings-panel .qr-colors {
    flex-direction: column;
    gap: 8px;
}
.fp-settings-panel .qr-share-btns {
    flex-wrap: wrap;
    gap: 6px;
}
.fp-settings-panel .qr-share-btn {
    font-size: 0.72rem;
    padding: 6px 10px;
}
.fp-settings-panel .qr-prelude-input {
    width: 100%;
    min-width: 0;
}
.fp-settings-panel .qr-color-input {
    min-width: 0;
}

/* Compact QR preview in settings panel */
.fp-qr-preview-compact {
    background: #f2ede4;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin-bottom: 10px;
    border: 1px solid rgba(58, 42, 28, 0.08);
}
.fp-qr-preview-compact .qr-empty {
    flex-direction: row;
    gap: 8px;
    font-size: 0.7rem;
    padding: 0;
    background: transparent;
    border: none;
    min-height: 0;
}
.fp-qr-preview-compact .qr-empty svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.fp-qr-preview-compact canvas {
    max-width: 110px;
    max-height: 110px;
}

.fp-share-hint {
    font-size: 0.7rem;
    color: rgba(58, 42, 28, 0.38);
    margin: 0;
    line-height: 1.5;
    font-style: italic;
}

/* QR downloads in settings panel */
.fp-panel-section .qr-downloads {
    display: flex;
    gap: 6px;
    padding: 0;
    border-top: none;
    margin-top: 8px;
}

/* Responsive faire-part studio */
@media (max-width: 960px) {
    .fp-studio {
        grid-template-columns: 300px 1fr 240px;
    }
    .fp-settings-panel .qr-dot-btn,
    .fp-settings-panel .qr-eye-btn,
    .fp-settings-panel .qr-logo-btn,
    .fp-settings-panel .qr-logo-upload-btn {
        width: 36px;
        height: 36px;
    }
    .fp-chip {
        padding: 4px 8px;
        font-size: 0.64rem;
    }
    .fp-font-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 700px) {
    #tab-qrcode.active {
        overflow-y: auto;
    }
    .fp-studio {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }
    .fp-style-gallery {
        border-right: none;
        border-bottom: 1px solid rgba(58, 42, 28, 0.1);
        padding: 10px;
        max-height: 140px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .fp-gallery-top {
        display: none;
    }
    .fp-gallery-styles {
        display: flex;
        flex-direction: row;
        gap: 8px;
        white-space: nowrap;
    }
    .fp-style-item {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px 5px;
        min-width: 56px;
        width: auto;
        flex-shrink: 0;
    }
    .fp-style-thumb {
        width: 40px;
        aspect-ratio: 340 / 480;
        height: auto;
    }
    .fp-style-item span {
        font-size: 0.64rem;
        white-space: nowrap;
    }
    .fp-preview-stage {
        padding: 16px 12px;
        min-height: 360px;
    }
    .fp-card-center .qr-card-flipper {
        width: 306px; /* 340 × 0.9 */
        height: 432px; /* 480 × 0.9 */
    }
    .fp-card-center .inv-content {
        min-height: 424px; /* 432px − 8px */
    }
    .fp-settings-panel {
        border-left: none;
        border-top: 1px solid rgba(58, 42, 28, 0.08);
    }
    .fp-topbar-center {
        display: none;
    }
    .fp-topbar-actions .btn span {
        display: none;
    }
    .fp-topbar-actions .btn {
        padding: 5px 8px;
    }
}

/* Legacy qr-layout (kept for fallback, now unused) */
.qr-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
    margin-top: 8px;
    align-items: start;
}
@media (max-width: 960px) {
    .qr-layout {
        grid-template-columns: 1fr;
    }
}
/* Mode toggle (Invitation / Save the Date) */
.fp-mode-btns {
    display: flex;
    gap: 6px;
}
.fp-mode-btn {
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--txt-l);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}
.fp-mode-btn.active {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
}
/* Global QR toggle row — pinned at top of right panel */
.fp-global-qr-row {
    padding: 12px 20px 10px;
    border-bottom: 1px solid rgba(58, 42, 28, 0.08);
    background: var(--cream, #f8f4ef);
    position: sticky;
    top: 0;
    z-index: 5;
}
/* QR visibility toggle switch */
.fp-show-qr-field {
    margin-bottom: 14px;
}
.fp-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--txt-m);
}
.fp-toggle-label input[type="checkbox"] {
    display: none;
}
.fp-toggle-track {
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    background: var(--border);
    border-radius: 10px;
    flex-shrink: 0;
    transition: background 0.2s;
    position: relative;
}
.fp-toggle-thumb {
    position: absolute;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.fp-toggle-label input:checked ~ .fp-toggle-track {
    background: var(--terra);
}
.fp-toggle-label input:checked ~ .fp-toggle-track .fp-toggle-thumb {
    transform: translateX(16px);
}
/* Text block on verso when QR is OFF */
.inv-back-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px 28px 12px;
    text-align: center;
    width: 100%;
}
.inv-back-title {
    font-family: var(--inv-name-font, "Great Vibes", cursive);
    font-size: 1.35rem;
    color: var(--inv-text, #3a2a1c);
    margin: 0;
    line-height: 1.2;
}
.inv-back-desc {
    font-family: var(--inv-body-font, "Jost", sans-serif);
    font-size: 0.6rem;
    line-height: 1.65;
    color: var(--inv-text, #3a2a1c);
    opacity: 0.72;
    margin: 0;
    text-align: center;
}
/* WYSIWYG editor in right panel */
.fp-wysiwyg-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(58, 42, 28, 0.05);
    border: 1px solid rgba(58, 42, 28, 0.12);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 4px 6px;
}
.fp-wysiwyg-toolbar button {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--brown, #3a2a1c);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}
.fp-wysiwyg-toolbar button:hover {
    background: rgba(58, 42, 28, 0.1);
}
.fp-wysiwyg-sep {
    width: 1px;
    height: 18px;
    background: rgba(58, 42, 28, 0.15);
    margin: 0 3px;
    flex-shrink: 0;
}
.fp-wysiwyg-editor {
    min-height: 90px;
    max-height: 160px;
    padding: 10px 12px;
    border: 1px solid rgba(58, 42, 28, 0.15);
    border-radius: 0 0 6px 6px;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--brown, #3a2a1c);
    background: #fff;
    outline: none;
    overflow-y: auto;
    font-family: inherit;
    word-break: break-word;
}
.fp-wysiwyg-editor:empty::before {
    content: attr(data-placeholder);
    color: rgba(58, 42, 28, 0.3);
    pointer-events: none;
    display: block;
}
/* Modern title input — editorial underline style */
.fp-title-input {
    width: 100%;
    display: block;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(58, 42, 28, 0.18);
    border-radius: 0;
    padding: 6px 0 8px;
    font-size: 1.15rem;
    font-family: "Cormorant Garamond", "Garamond", Georgia, serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--brown, #3a2a1c);
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.fp-title-input::placeholder {
    font-style: italic;
    font-weight: 400;
    color: rgba(58, 42, 28, 0.28);
}
.fp-title-input:focus {
    border-bottom-color: var(--terra, #c9a96e);
}
/* ── Save the Date Header ── */
.inv-std-header {
    text-align: center;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.inv-std-eyebrow {
    display: block;
    width: 48px;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
}
.inv-std-text {
    font-family: "Great Vibes", cursive;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: 0.01em;
    color: var(--inv-accent, #c9a96e);
}
/* Per-style color harmonization */
.qr-invitation-card[data-style="romantique"] .inv-std-text {
    color: #5c3028;
}
.qr-invitation-card[data-style="jardin"] .inv-std-text {
    color: #1e2e18;
}
.qr-invitation-card[data-style="floral"] .inv-std-text {
    color: #6b2030;
}
.qr-invitation-card[data-style="champetre"] .inv-std-text {
    color: #2e2010;
}
.qr-invitation-card[data-style="poetique"] .inv-std-text {
    color: #1a1a1a;
}
.qr-invitation-card[data-style="artdeco"] .inv-std-text,
.qr-invitation-card[data-style="royale"] .inv-std-text,
.qr-invitation-card[data-style="africain"] .inv-std-text,
.qr-invitation-card[data-style="contemporain"] .inv-std-text {
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="romantique"] .inv-std-eyebrow {
    background: #c4807a;
}
.qr-invitation-card[data-style="jardin"] .inv-std-eyebrow {
    background: #4a6741;
}
.qr-invitation-card[data-style="floral"] .inv-std-eyebrow {
    background: #d4707a;
}
.qr-invitation-card[data-style="champetre"] .inv-std-eyebrow {
    background: #9b7b4e;
}
.qr-invitation-card[data-style="artdeco"] .inv-std-eyebrow,
.qr-invitation-card[data-style="royale"] .inv-std-eyebrow,
.qr-invitation-card[data-style="africain"] .inv-std-eyebrow,
.qr-invitation-card[data-style="contemporain"] .inv-std-eyebrow {
    background: var(--inv-accent, #c9a96e);
}
.qr-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px;
    border: 1px solid var(--border);
}
.qr-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.qr-card-header svg {
    color: var(--terra);
    opacity: 0.7;
    flex-shrink: 0;
}
.qr-card-header h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--txt-d);
    margin: 0;
    letter-spacing: 0.5px;
}
.qr-field {
    margin-bottom: 18px;
}
.qr-field label {
    /* display: block; */
    font-size: 0.72rem;
    color: var(--txt-m);
    font-weight: 400;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.qr-url-row {
    display: flex;
    gap: 8px;
}
.qr-url-row input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-family: inherit;
    color: var(--txt-d);
    background: #fff;
    transition: border-color 0.2s ease;
}
.qr-url-row input:focus {
    outline: none;
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}

/* QR Preview */
.qr-preview-area {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border-radius: 10px;
    background: repeating-conic-gradient(var(--cream-d) 0% 25%, transparent 0% 50%) 0 0 / 16px 16px;
    border: 1px dashed var(--border);
    margin-bottom: 18px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.qr-preview-area canvas {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    image-rendering: pixelated;
}
.qr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--txt-l);
    text-align: center;
}
.qr-empty svg {
    opacity: 0.3;
}
.qr-empty span {
    font-size: 0.72rem;
    font-weight: 300;
    max-width: 220px;
    line-height: 1.6;
}

/* QR Color pickers */
.qr-colors {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}
.qr-color-field {
    flex: 1;
}
.qr-color-field label {
    display: block;
    font-size: 0.68rem;
    color: var(--txt-l);
    margin-bottom: 4px;
    font-weight: 300;
}
.qr-color-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.qr-color-input input[type="color"] {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
    background: transparent;
}
.qr-color-input span {
    font-family: "Jost", monospace;
    font-size: 0.72rem;
    color: var(--txt-m);
    letter-spacing: 0.5px;
}

/* ── QR Style selector ── */
.qr-style-field label {
    font-size: 0.72rem;
    color: var(--txt-m);
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    display: block;
}
.qr-dot-style-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.qr-dot-btn,
.qr-eye-btn,
.qr-logo-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--txt-d);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        border-color 0.15s,
        background 0.15s;
    padding: 0;
}
.qr-dot-btn:hover,
.qr-eye-btn:hover,
.qr-logo-btn:hover {
    border-color: var(--terra);
}
.qr-dot-btn.active,
.qr-eye-btn.active,
.qr-logo-btn.active {
    border-color: var(--terra);
    background: color-mix(in srgb, var(--terra) 10%, white);
    color: var(--terra);
}
.qr-logo-upload-btn {
    width: 44px;
    height: 44px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--txt-xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s;
}
.qr-logo-upload-btn:hover {
    border-color: var(--terra);
    color: var(--terra);
}
.qr-logo-clear {
    margin-top: 6px;
    color: var(--err, #c0392b);
}
.qr-logo-hint {
    font-size: 0.65rem;
    color: var(--terra);
    opacity: 0.8;
}

/* QR Download buttons */
.qr-downloads {
    display: flex;
    gap: 8px;
}
.qr-downloads .btn {
    flex: 1;
}

/* QR Share buttons */
.qr-share {
    margin-top: 8px;
}
.qr-share label {
    display: block;
    font-size: 0.7rem;
    color: var(--txt-m);
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.qr-share-btns {
    display: flex;
    gap: 6px;
}
.qr-share-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 0.72rem;
    border-radius: 8px;
    transition: all 0.25s ease;
}
.qr-share-btn span {
    font-size: 0.68rem;
}
.qr-share-whatsapp {
    color: #25d366;
    border-color: #25d366;
}
.qr-share-whatsapp:hover {
    background: rgba(37, 211, 102, 0.08);
}
.qr-share-email {
    color: var(--terra);
    border-color: var(--terra-l);
}
.qr-share-email:hover {
    background: rgba(200, 88, 42, 0.06);
}
.qr-share-copy {
    color: var(--txt-m);
    border-color: var(--border);
}
.qr-share-copy:hover {
    background: rgba(0, 0, 0, 0.03);
}
.qr-share-btn.copied {
    color: #25d366;
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.06);
}

/* QR Prelude input */
.qr-prelude-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--txt);
    transition: border-color 0.25s ease;
}
.qr-prelude-input:focus {
    border-color: var(--terra-l);
    outline: none;
}
.qr-prelude-reset {
    margin-top: 4px;
    font-size: 0.65rem;
    padding: 3px 10px;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.qr-prelude-reset:hover {
    opacity: 1;
}

/* ── Invitation Card Styles ────────── */
.qr-style-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.qr-style-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--txt-m);
    text-align: center;
    white-space: nowrap;
}
.qr-style-btn:hover {
    border-color: var(--terra-l);
    background: rgba(200, 88, 42, 0.03);
}
.qr-style-btn.active {
    border-color: var(--terra);
    background: rgba(200, 88, 42, 0.06);
    color: var(--txt-d);
    font-weight: 500;
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}

/* Flip toggle buttons */
.qr-flip-btns {
    display: flex;
    gap: 4px;
}
.qr-flip-btn {
    padding: 6px 16px;
    font-size: 0.72rem;
    border-radius: 6px;
    transition: all 0.25s ease;
}
.qr-flip-btn.active {
    background: var(--terra);
    color: #fff;
    border-color: var(--terra);
}

/* Card preview wrapper */
.qr-card-preview-wrap {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    perspective: 1200px;
}
.qr-card-flipper {
    position: relative;
    width: 340px;
    height: 480px;
    transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}
.qr-card-flipper.flipped {
    transform: rotateY(180deg);
}
/* ── The invitation card itself ────── */
.qr-invitation-card {
    width: 340px;
    min-height: 480px;
    background: #fffbf5;
    border-radius: 4px;
    padding: 4px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.08),
        0 8px 30px rgba(0, 0, 0, 0.06),
        0 20px 60px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}
/* Flip faces — must come AFTER .qr-invitation-card to override position/size */
.qr-card-front,
.qr-card-back {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.qr-card-back {
    transform: rotateY(180deg);
}
.inv-border {
    position: absolute;
    inset: 8px;
    border: 1px solid var(--inv-accent, #c9a96e);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}
.inv-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 24px 24px;
    min-height: 472px;
    position: relative;
    z-index: 2;
}
.inv-prelude {
    font-family: var(--inv-body-font, "Jost", sans-serif);
    font-size: 0.6rem;
    color: #8b7a68;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 16px;
}
.inv-names {
    font-family: var(--inv-heading-font, "Cormorant Garamond", serif);
    font-size: 1.65rem;
    font-weight: 300;
    font-style: italic;
    color: var(--inv-name-color-override, #1e140c);
    margin: 0 0 12px;
    letter-spacing: 0.5px;
    line-height: 1.3;
}
.inv-ornament {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px;
}
.inv-ornament span:first-child,
.inv-ornament span:last-child {
    width: 40px;
    height: 1px;
    background: var(--inv-accent, #c9a96e);
    opacity: 0.5;
}
.inv-orn-svg {
    width: 60px;
    height: 18px;
    color: var(--inv-accent, #c9a96e);
}
.inv-date {
    font-family: var(--inv-body-font, "Jost", sans-serif);
    font-size: 0.78rem;
    color: #2c2016;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0 0 6px;
}
.inv-venue {
    font-family: var(--inv-body-font, "Jost", sans-serif);
    font-size: 0.65rem;
    color: #8b7a68;
    font-weight: 300;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    line-height: 1.5;
}
.inv-venue-line2 {
    font-family: "Jost", sans-serif;
    font-size: 0.58rem;
    color: #8b7a68;
    font-weight: 300;
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    opacity: 0.8;
}
.inv-time {
    font-family: "Jost", sans-serif;
    font-size: 0.62rem;
    color: var(--inv-accent, #c9a96e);
    font-weight: 400;
    margin: 0 0 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.inv-rsvp-line {
    font-family: "Jost", sans-serif;
    font-size: 0.55rem;
    color: var(--inv-accent, #c9a96e);
    font-weight: 400;
    margin: 8px 0 0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.85;
}
.inv-info-line {
    font-family: "Jost", sans-serif;
    font-size: 0.52rem;
    color: #8b7a68;
    font-weight: 300;
    margin: 4px 0 0;
    letter-spacing: 1px;
    font-style: italic;
}
/* Last visible element gets bottom margin */
.inv-venue:last-child, .inv-venue-line2:last-child,
.inv-rsvp-line:last-child, .inv-info-line:last-child,
.inv-time:last-child {
    margin-bottom: 28px;
}
/* Ensure bottom spacing when no extra lines */
.inv-venue + .inv-rsvp-line[style*="display:none"] + .inv-info-line[style*="display:none"] ~ *,
.inv-content > :last-child { margin-bottom: 0; }
.inv-venue:not([style*="display:none"]):not(:has(~ .inv-venue-line2:not([style*="display:none"]))):not(:has(~ .inv-rsvp-line:not([style*="display:none"]))):not(:has(~ .inv-info-line:not([style*="display:none"]))) {
    margin-bottom: 28px;
}

/* ═══ CSS CUSTOM PROPERTIES FOR OVERRIDES ═══ */
.qr-invitation-card[style*="--inv-bg-override"] {
    background: var(--inv-bg-override) !important;
}
.qr-invitation-card[style*="--inv-name-size-override"] .inv-names {
    font-size: var(--inv-name-size-override) !important;
}
.qr-invitation-card[style*="--inv-text-align"] .inv-content {
    text-align: var(--inv-text-align);
    align-items: var(--inv-align-items, center);
}

/* ═══ ORNAMENT VARIANTS ═══ */
.inv-ornament[data-ornament="none"] { display: none !important; }
.inv-ornament[data-ornament="line"] .inv-orn-svg { display: none; }
.inv-ornament[data-ornament="line"] { gap: 0; }
.inv-ornament[data-ornament="line"] span:first-child { width: 100%; max-width: 80px; }
.inv-ornament[data-ornament="line"] span:last-child { display: none; }
.inv-ornament[data-ornament="dots"] .inv-orn-svg { display: none; }
.inv-ornament[data-ornament="dots"]::after {
    content: "\u2022\u2009\u2022\u2009\u2022";
    color: var(--inv-accent, #c9a96e);
    font-size: 10px;
    letter-spacing: 4px;
    opacity: 0.5;
}

/* ═══ PHOTO OVERLAY LEVELS ═══ */
.qr-invitation-card[data-style="photo"][data-photo-overlay="light"]::before {
    background: linear-gradient(180deg,
        rgba(10,8,6,0.15) 0%, rgba(10,8,6,0.02) 35%,
        rgba(10,8,6,0.05) 65%, rgba(10,8,6,0.30) 100%) !important;
}
.qr-invitation-card[data-style="photo"][data-photo-overlay="dark"]::before {
    background: linear-gradient(180deg,
        rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.25) 35%,
        rgba(10,8,6,0.30) 65%, rgba(10,8,6,0.75) 100%) !important;
}

.inv-qr {
    margin: 0 0 12px;
}
.inv-qr canvas {
    width: 100px !important;
    height: 100px !important;
    border-radius: 2px;
}
.inv-scan {
    font-family: "Jost", sans-serif;
    font-size: 0.55rem;
    color: #b0a090;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 4px;
}
.inv-url {
    font-family: "Jost", monospace;
    font-size: 0.52rem;
    color: #b0a090;
    font-weight: 300;
    margin: 0;
    word-break: break-all;
    max-width: 260px;
}

/* ── SVG decorative elements — hidden by default ── */
.inv-corner,
.inv-deco-frame,
.inv-seal,
.inv-kente,
.inv-crest {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    display: none; /* shown per-style */
}
.inv-corner {
    width: 175px;
    height: 198px;
}
.inv-corner-tl {
    top: -8px;
    left: -8px;
}
.inv-corner-br {
    bottom: -8px;
    right: -8px;
}
.inv-deco-frame {
    inset: 0;
    width: 100%;
    height: 100%;
}
.inv-seal {
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 20px;
}
.inv-crest {
    width: 80px;
    height: 72px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.inv-kente {
    left: 0;
    width: 100%;
    height: 28px;
}
.inv-kente-top {
    top: 0;
}
.inv-kente-bottom {
    bottom: 0;
}

/* ── NEW: Decoration base — all hidden by default ── */
.inv-ballons,
.inv-tropique,
.inv-boho {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    display: none;
}
.inv-ballons {
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 270px;
}
.inv-tropique {
    inset: 0;
    width: 100%;
    height: 100%;
}
.inv-boho {
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── NEW: Photo background layer ── */
.inv-photo-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: none;
}
.qr-invitation-card.has-photo .inv-photo-bg {
    display: block;
    opacity: 1;
}

/* ── NEW: Wildflower strip (Champetre) ── */
.inv-wildflower-strip {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 90px;
    pointer-events: none;
    z-index: 1;
    display: none;
}

/* ── Photo card upload UI ── */
.fp-photo-upload {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fp-photo-preview-wrap {
    width: 100%;
    aspect-ratio: 340 / 220;
    border-radius: 6px;
    background: rgba(58, 42, 28, 0.06);
    border: 1.5px dashed rgba(58, 42, 28, 0.2);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.fp-photo-preview-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.fp-photo-preview-wrap.has-photo img {
    display: block;
}
.fp-photo-preview-wrap .fp-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: rgba(58, 42, 28, 0.35);
    font-size: 0.7rem;
    font-family: "Jost", sans-serif;
    text-align: center;
    padding: 12px;
}
.fp-photo-preview-wrap.has-photo .fp-photo-placeholder {
    display: none;
}
.fp-photo-preview-wrap svg {
    opacity: 0.4;
}
.fp-photo-remove {
    background: none;
    border: 1px solid rgba(58, 42, 28, 0.2);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-family: "Jost", sans-serif;
    color: rgba(58, 42, 28, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    display: none;
}
.fp-photo-remove:hover {
    background: rgba(180, 60, 60, 0.08);
    border-color: rgba(180, 60, 60, 0.3);
    color: #b43c3c;
}
.fp-photo-preview-wrap.has-photo + .fp-photo-remove {
    display: block;
}

/* ═══════════════════════════════════════
   STYLE 1: ROMANTIQUE — Watercolor + florals
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="romantique"] {
    background: linear-gradient(160deg, #FDF6F2 0%, #F8EBE4 30%, #F2E2E0 60%, #F7EDE8 100%);
}
.qr-invitation-card[data-style="romantique"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 8% 12%, rgba(154, 37, 69, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 92% 88%, rgba(154, 37, 69, 0.06) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(248, 235, 228, 0.5) 0%, transparent 50%);
    z-index: 0;
}
.qr-invitation-card[data-style="romantique"] .inv-corner {
    display: block;
    color: var(--inv-accent, #8B2040);
}
.qr-invitation-card[data-style="romantique"] .inv-orn-svg {
    color: var(--inv-accent, #9A2545);
}
.qr-invitation-card[data-style="romantique"] .inv-border {
    border-color: var(--inv-accent, #9A2545);
    opacity: 0.15;
    inset: 12px;
}
.qr-invitation-card[data-style="romantique"] {
    --inv-heading-font: "Great Vibes", cursive;
    --inv-style-name-color: #4A1A24;
}
.qr-invitation-card[data-style="romantique"] .inv-names {
    font-style: normal;
    font-size: 1.85rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #4A1A24));
    font-weight: 400;
}
.qr-invitation-card[data-style="romantique"] .inv-prelude {
    color: #7A4A42;
}
.qr-invitation-card[data-style="romantique"] .inv-date {
    color: #5C2C28;
}
.qr-invitation-card[data-style="romantique"] .inv-venue {
    color: #7A4A42;
}
.qr-invitation-card[data-style="romantique"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="romantique"] .inv-ornament span:last-child {
    background: var(--inv-accent, #9A2545);
    opacity: 0.35;
}
.qr-invitation-card[data-style="romantique"] .inv-scan {
    color: #8A6058;
}
.qr-invitation-card[data-style="romantique"] .inv-url {
    color: #b09080;
}

/* ═══════════════════════════════════════
   STYLE 2: ART DECO — 1920s geometric glamour
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="artdeco"] {
    background: #0a0a0a;
}
.qr-invitation-card[data-style="artdeco"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(201, 169, 110, 0.06) 0%, transparent 60%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 38px,
            rgba(201, 169, 110, 0.04) 38px,
            rgba(201, 169, 110, 0.04) 39px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 38px,
            rgba(201, 169, 110, 0.04) 38px,
            rgba(201, 169, 110, 0.04) 39px
        );
    z-index: 0;
}
.qr-invitation-card[data-style="artdeco"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="artdeco"] .inv-deco-frame {
    display: block;
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="artdeco"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="artdeco"] .inv-prelude {
    color: var(--inv-accent, #c9a96e);
    opacity: 0.7;
    letter-spacing: 5px;
    font-size: 0.52rem;
}
.qr-invitation-card[data-style="artdeco"] { --inv-heading-font: "Playfair Display", serif; --inv-style-name-color: #f5e6c8; }
.qr-invitation-card[data-style="artdeco"] .inv-names {
    font-style: normal;
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    letter-spacing: 4px;
    text-transform: uppercase;
}
.qr-invitation-card[data-style="artdeco"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="artdeco"] .inv-ornament span:last-child {
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--inv-accent, #c9a96e), transparent);
}
.qr-invitation-card[data-style="artdeco"] .inv-orn-svg {
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="artdeco"] .inv-date {
    color: var(--inv-accent, #c9a96e);
    letter-spacing: 6px;
    font-size: 0.7rem;
}
.qr-invitation-card[data-style="artdeco"] .inv-venue {
    color: rgba(245, 230, 200, 0.35);
}
.qr-invitation-card[data-style="artdeco"] .inv-scan {
    color: rgba(201, 169, 110, 0.35);
}
.qr-invitation-card[data-style="artdeco"] .inv-url {
    color: rgba(201, 169, 110, 0.25);
}

/* ═══════════════════════════════════════
   STYLE 3: JARDIN — Rich botanical greenery
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="jardin"] {
    background: linear-gradient(175deg, #f5f0e5 0%, #ebe6da 50%, #e5e0d5 100%);
}
.qr-invitation-card[data-style="jardin"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 10%, rgba(74, 103, 65, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 90%, rgba(74, 103, 65, 0.08) 0%, transparent 40%);
    z-index: 0;
}
.qr-invitation-card[data-style="jardin"] .inv-corner {
    display: block;
    color: var(--inv-accent, #4a6741);
}
.qr-invitation-card[data-style="jardin"] .inv-orn-svg {
    color: var(--inv-accent, #4a6741);
}
.qr-invitation-card[data-style="jardin"] .inv-border {
    border-color: var(--inv-accent, #4a6741);
    opacity: 0.12;
    inset: 14px;
}
.qr-invitation-card[data-style="jardin"] .inv-prelude {
    color: #5a7550;
}
.qr-invitation-card[data-style="jardin"] { --inv-heading-font: "Playfair Display", serif; --inv-style-name-color: #1e2e18; }
.qr-invitation-card[data-style="jardin"] .inv-names {
    font-style: italic;
    font-size: 1.65rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    font-weight: 400;
}
.qr-invitation-card[data-style="jardin"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="jardin"] .inv-ornament span:last-child {
    background: var(--inv-accent, #4a6741);
    opacity: 0.3;
}
.qr-invitation-card[data-style="jardin"] .inv-date {
    color: #2a4020;
    letter-spacing: 4px;
}
.qr-invitation-card[data-style="jardin"] .inv-venue {
    color: #5a7550;
}
.qr-invitation-card[data-style="jardin"] .inv-scan {
    color: #7a9570;
}
.qr-invitation-card[data-style="jardin"] .inv-url {
    color: #7a9570;
}

/* ═══════════════════════════════════════
   STYLE 4: FLORAL — Lush blooming flowers
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="floral"] {
    background: linear-gradient(175deg, #fff8f5 0%, #ffeee8 40%, #fff2ee 100%);
}
.qr-invitation-card[data-style="floral"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 12%, rgba(212, 112, 122, 0.15) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 88%, rgba(212, 112, 122, 0.15) 0%, transparent 35%),
        radial-gradient(ellipse at 50% 50%, rgba(255, 240, 235, 0.6) 0%, transparent 50%);
    z-index: 0;
}
.qr-invitation-card[data-style="floral"] .inv-corner {
    display: block;
    color: var(--inv-accent, #d4707a);
}
.qr-invitation-card[data-style="floral"] .inv-orn-svg {
    color: var(--inv-accent, #d4707a);
}
.qr-invitation-card[data-style="floral"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="floral"] .inv-prelude {
    color: #c06878;
}
.qr-invitation-card[data-style="floral"] { --inv-heading-font: "Great Vibes", cursive; --inv-style-name-color: #6b2030; }
.qr-invitation-card[data-style="floral"] .inv-names {
    font-style: normal;
    font-size: 1.85rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    font-weight: 400;
}
.qr-invitation-card[data-style="floral"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="floral"] .inv-ornament span:last-child {
    background: var(--inv-accent, #d4707a);
    opacity: 0.35;
}
.qr-invitation-card[data-style="floral"] .inv-date {
    color: #8b3545;
}
.qr-invitation-card[data-style="floral"] .inv-venue {
    color: #b06070;
}
.qr-invitation-card[data-style="floral"] .inv-scan {
    color: #c8a0a8;
}
.qr-invitation-card[data-style="floral"] .inv-url {
    color: #c8a0a8;
}

/* ═══════════════════════════════════════
   STYLE 5: ROYALE — Luxury velvet + gold foil
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="royale"] {
    background: linear-gradient(160deg, #14101a 0%, #1c1425 40%, #14101a 100%);
}
.qr-invitation-card[data-style="royale"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(201, 169, 110, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(201, 169, 110, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(30, 20, 40, 0.5) 0%, transparent 80%);
    z-index: 0;
}
.qr-invitation-card[data-style="royale"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="royale"] .inv-seal {
    display: block;
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="royale"] .inv-border {
    border: 1px solid var(--inv-accent, #c9a96e);
    opacity: 0.2;
    inset: 10px;
    border-radius: 0;
}
.qr-invitation-card[data-style="royale"] .inv-border::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid var(--inv-accent, #c9a96e);
    opacity: 0.1;
}
.qr-invitation-card[data-style="royale"] .inv-prelude {
    color: var(--inv-accent, #c9a96e);
    opacity: 0.55;
}
.qr-invitation-card[data-style="royale"] { --inv-heading-font: "Playfair Display", serif; }
.qr-invitation-card[data-style="royale"] .inv-names {
    font-style: normal;
    font-weight: 400;
    font-size: 1.65rem;
    background: linear-gradient(135deg, #f5e6c8 20%, #c9a96e 50%, #f5e6c8 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.qr-invitation-card[data-style="royale"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="royale"] .inv-ornament span:last-child {
    background: linear-gradient(90deg, transparent, var(--inv-accent, #c9a96e), transparent);
    height: 1px;
    width: 50px;
}
.qr-invitation-card[data-style="royale"] .inv-orn-svg {
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="royale"] .inv-date {
    color: var(--inv-accent, #c9a96e);
    opacity: 0.85;
}
.qr-invitation-card[data-style="royale"] .inv-venue {
    color: rgba(245, 230, 200, 0.35);
}
.qr-invitation-card[data-style="royale"] .inv-scan {
    color: rgba(201, 169, 110, 0.3);
}
.qr-invitation-card[data-style="royale"] .inv-url {
    color: rgba(201, 169, 110, 0.2);
}

/* ═══════════════════════════════════════
   STYLE 6: CONTEMPORAIN — Bold sans-serif
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="contemporain"] {
    background: #1a1a1a;
}
.qr-invitation-card[data-style="contemporain"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4) 100%),
        radial-gradient(ellipse at 50% 50%, rgba(201, 169, 110, 0.04) 0%, transparent 70%);
    z-index: 0;
}
.qr-invitation-card[data-style="contemporain"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="contemporain"] .inv-border {
    border-color: var(--inv-accent, #c9a96e);
    opacity: 0.15;
    inset: 0;
    border-width: 0;
    border-radius: 0;
    border-left: 3px solid var(--inv-accent, #c9a96e);
    border-right: 1px solid rgba(201, 169, 110, 0.08);
}
.qr-invitation-card[data-style="contemporain"] .inv-prelude {
    color: rgba(255, 255, 255, 0.3);
    font-family: "Outfit", sans-serif;
    letter-spacing: 6px;
    font-size: 0.5rem;
}
.qr-invitation-card[data-style="contemporain"] { --inv-heading-font: "Outfit", sans-serif; --inv-style-name-color: #fff; }
.qr-invitation-card[data-style="contemporain"] .inv-names {
    font-style: normal;
    font-weight: 200;
    font-size: 1.85rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    letter-spacing: 5px;
    text-transform: uppercase;
}
.qr-invitation-card[data-style="contemporain"] .inv-ornament {
    display: none;
}
.qr-invitation-card[data-style="contemporain"] .inv-date {
    color: var(--inv-accent, #c9a96e);
    font-family: "Outfit", sans-serif;
    letter-spacing: 7px;
    font-size: 0.65rem;
    font-weight: 300;
}
.qr-invitation-card[data-style="contemporain"] .inv-venue {
    color: rgba(255, 255, 255, 0.35);
    font-family: "Outfit", sans-serif;
}
.qr-invitation-card[data-style="contemporain"] .inv-scan {
    color: rgba(255, 255, 255, 0.2);
}
.qr-invitation-card[data-style="contemporain"] .inv-url {
    color: rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════
   STYLE 7: POETIQUE — Refined editorial
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="poetique"] {
    background: #ffffff;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.03);
}
.qr-invitation-card[data-style="poetique"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="poetique"] .inv-crest {
    display: block;
    color: #1a1a1a;
}
.qr-invitation-card[data-style="poetique"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="poetique"] .inv-prelude {
    display: none;
}
.qr-invitation-card[data-style="poetique"] .inv-content {
    padding-top: 80px;
}
.qr-invitation-card[data-style="poetique"] { --inv-heading-font: "Cormorant Garamond", serif; --inv-style-name-color: #1a1a1a; }
.qr-invitation-card[data-style="poetique"] .inv-names {
    font-style: normal;
    font-weight: 300;
    font-size: 2rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    letter-spacing: 1px;
}
.qr-invitation-card[data-style="poetique"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="poetique"] .inv-ornament span:last-child {
    width: 35px;
    height: 1px;
    background: var(--inv-accent, #1a1a1a);
    opacity: 0.12;
}
.qr-invitation-card[data-style="poetique"] .inv-orn-svg {
    color: var(--inv-accent, #1a1a1a);
    opacity: 0.2;
}
.qr-invitation-card[data-style="poetique"] .inv-date {
    color: #1a1a1a;
    opacity: 0.5;
    letter-spacing: 6px;
    font-size: 0.68rem;
    font-weight: 300;
}
.qr-invitation-card[data-style="poetique"] .inv-venue {
    color: #1a1a1a;
    opacity: 0.3;
    font-weight: 300;
}
.qr-invitation-card[data-style="poetique"] .inv-scan {
    color: rgba(0, 0, 0, 0.18);
}
.qr-invitation-card[data-style="poetique"] .inv-url {
    color: rgba(0, 0, 0, 0.12);
}

/* ═══════════════════════════════════════
   STYLE 8: AFRICAIN — Bold textile patterns
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="africain"] {
    background: #2a1508;
}
.qr-invitation-card[data-style="africain"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(201, 169, 110, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(44, 24, 16, 0.8) 0%, transparent 50%);
    z-index: 0;
}
.qr-invitation-card[data-style="africain"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="africain"] .inv-kente {
    display: block;
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="africain"] .inv-border {
    border: 2px solid var(--inv-accent, #c9a96e);
    opacity: 0.25;
    inset: 32px 10px;
    border-radius: 0;
}
.qr-invitation-card[data-style="africain"] .inv-border::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid var(--inv-accent, #c9a96e);
    opacity: 0.12;
}
.qr-invitation-card[data-style="africain"] .inv-prelude {
    color: var(--inv-accent, #c9a96e);
    opacity: 0.6;
    letter-spacing: 4px;
}
.qr-invitation-card[data-style="africain"] { --inv-heading-font: "Playfair Display", serif; --inv-style-name-color: #f5e6c8; }
.qr-invitation-card[data-style="africain"] .inv-names {
    font-style: normal;
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    letter-spacing: 2px;
}
.qr-invitation-card[data-style="africain"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="africain"] .inv-ornament span:last-child {
    width: 35px;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        var(--inv-accent, #c9a96e) 0px,
        var(--inv-accent, #c9a96e) 4px,
        transparent 4px,
        transparent 7px
    );
}
.qr-invitation-card[data-style="africain"] .inv-orn-svg {
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="africain"] .inv-date {
    color: var(--inv-accent, #c9a96e);
    letter-spacing: 5px;
}
.qr-invitation-card[data-style="africain"] .inv-venue {
    color: rgba(245, 230, 200, 0.4);
}
.qr-invitation-card[data-style="africain"] .inv-scan {
    color: rgba(201, 169, 110, 0.3);
}
.qr-invitation-card[data-style="africain"] .inv-url {
    color: rgba(201, 169, 110, 0.2);
}

/* ═══════════════════════════════════════
   STYLE 9: CHAMPETRE — Rustic wildflower
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="champetre"] {
    background: #e8ddd0;
}
.qr-invitation-card[data-style="champetre"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="champetre"] .inv-orn-svg {
    color: var(--inv-accent, #9b7b4e);
}
.qr-invitation-card[data-style="champetre"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="champetre"] .inv-prelude {
    color: #5b4530;
    font-weight: 400;
}
.qr-invitation-card[data-style="champetre"] { --inv-heading-font: "Dancing Script", cursive; --inv-style-name-color: #2e2010; }
.qr-invitation-card[data-style="champetre"] .inv-names {
    font-style: normal;
    font-size: 1.7rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color));
    font-weight: 500;
}
.qr-invitation-card[data-style="champetre"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="champetre"] .inv-ornament span:last-child {
    background: var(--inv-accent, #9b7b4e);
    opacity: 0.4;
}
.qr-invitation-card[data-style="champetre"] .inv-date {
    color: #3b2a15;
    letter-spacing: 3px;
}
.qr-invitation-card[data-style="champetre"] .inv-venue {
    color: #4b3520;
}
.qr-invitation-card[data-style="champetre"] .inv-scan {
    color: #6b5b3e;
}
.qr-invitation-card[data-style="champetre"] .inv-url {
    color: #6b5b3e;
}
.qr-invitation-card[data-style="champetre"] .inv-wildflower-strip {
    display: block;
}
.qr-invitation-card[data-style="champetre"] .inv-content {
    padding-bottom: 90px;
}

/* ═══════════════════════════════════════
   STYLE 10: PHOTO — Couple photo as backdrop
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="photo"] {
    background: #1a1510;
}
.qr-invitation-card[data-style="photo"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 8, 6, 0.35) 0%,
        rgba(10, 8, 6, 0.1) 35%,
        rgba(10, 8, 6, 0.15) 65%,
        rgba(10, 8, 6, 0.55) 100%
    );
    z-index: 1;
}
.qr-invitation-card[data-style="photo"] .inv-content {
    position: relative;
    z-index: 2;
}
.qr-invitation-card[data-style="photo"] .inv-border {
    border-color: var(--inv-accent, rgba(255, 255, 255, 0.25));
    opacity: 0.6;
    inset: 10px;
    z-index: 2;
}
.qr-invitation-card[data-style="photo"] .inv-prelude {
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 3px;
}
.qr-invitation-card[data-style="photo"] { --inv-heading-font: "Great Vibes", cursive; --inv-style-name-color: #fff; }
.qr-invitation-card[data-style="photo"] .inv-names {
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #fff));
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.qr-invitation-card[data-style="photo"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="photo"] .inv-ornament span:last-child {
    background: var(--inv-accent, rgba(255, 255, 255, 0.4));
}
.qr-invitation-card[data-style="photo"] .inv-orn-svg {
    color: var(--inv-accent, rgba(255, 255, 255, 0.5));
}
.qr-invitation-card[data-style="photo"] .inv-date {
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 5px;
}
.qr-invitation-card[data-style="photo"] .inv-venue {
    color: rgba(255, 255, 255, 0.6);
}
.qr-invitation-card[data-style="photo"] .inv-scan {
    color: rgba(255, 255, 255, 0.35);
}
.qr-invitation-card[data-style="photo"] .inv-url {
    color: rgba(255, 255, 255, 0.25);
}
.qr-invitation-card[data-style="photo"] .inv-corner {
    display: none;
}

/* ═══════════════════════════════════════
   STYLE 11: BALLONS — Festive balloon celebration
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="ballons"] {
    background: linear-gradient(175deg, #fef5fa 0%, #fff0f8 35%, #f8f0ff 70%, #f0f8ff 100%);
}
.qr-invitation-card[data-style="ballons"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(240, 180, 210, 0.2) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(200, 168, 232, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 85%, rgba(240, 192, 96, 0.12) 0%, transparent 40%);
    z-index: 0;
}
.qr-invitation-card[data-style="ballons"] .inv-ballons {
    display: block;
}
.qr-invitation-card[data-style="ballons"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="ballons"] .inv-border {
    border-color: var(--inv-accent, rgba(200, 160, 200, 0.3));
    opacity: 0.5;
    inset: 10px;
}
.qr-invitation-card[data-style="ballons"] .inv-content {
    padding-bottom: 240px;
}
.qr-invitation-card[data-style="ballons"] .inv-prelude {
    color: #9b6078;
    letter-spacing: 2px;
}
.qr-invitation-card[data-style="ballons"] { --inv-heading-font: "Great Vibes", cursive; --inv-style-name-color: #6b3048; }
.qr-invitation-card[data-style="ballons"] .inv-names {
    font-style: normal;
    font-weight: 400;
    font-size: 2rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #6b3048));
}
.qr-invitation-card[data-style="ballons"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="ballons"] .inv-ornament span:last-child {
    background: linear-gradient(90deg, transparent, var(--inv-accent, #f4a0b0), transparent);
}
.qr-invitation-card[data-style="ballons"] .inv-orn-svg {
    color: var(--inv-accent, #e890a8);
}
.qr-invitation-card[data-style="ballons"] .inv-date {
    color: #7b3858;
    letter-spacing: 4px;
}
.qr-invitation-card[data-style="ballons"] .inv-venue {
    color: #9b6078;
}
.qr-invitation-card[data-style="ballons"] .inv-scan {
    color: #c0a0b8;
}
.qr-invitation-card[data-style="ballons"] .inv-url {
    color: #c0a0b8;
}

/* ═══════════════════════════════════════
   STYLE 12: TROPIQUE — Lush hibiscus & monstera
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="tropique"] {
    background: linear-gradient(160deg, #f2fdf5 0%, #e8f8f0 50%, #f0fdf8 100%);
}
.qr-invitation-card[data-style="tropique"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 80%, rgba(26, 71, 49, 0.12) 0%, transparent 45%),
        radial-gradient(ellipse at 90% 15%, rgba(240, 104, 120, 0.1) 0%, transparent 40%);
    z-index: 0;
}
.qr-invitation-card[data-style="tropique"] .inv-tropique {
    display: block;
}
.qr-invitation-card[data-style="tropique"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="tropique"] .inv-border {
    border-color: var(--inv-accent, rgba(26, 71, 49, 0.15));
    opacity: 0.6;
    inset: 12px;
}
.qr-invitation-card[data-style="tropique"] .inv-prelude {
    color: #2a5a3a;
}
.qr-invitation-card[data-style="tropique"] { --inv-heading-font: "Playfair Display", serif; --inv-style-name-color: #0d3320; }
.qr-invitation-card[data-style="tropique"] .inv-names {
    font-style: italic;
    font-weight: 400;
    font-size: 1.7rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #0d3320));
}
.qr-invitation-card[data-style="tropique"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="tropique"] .inv-ornament span:last-child {
    background: var(--inv-accent, #1a4731);
    opacity: 0.25;
}
.qr-invitation-card[data-style="tropique"] .inv-orn-svg {
    color: var(--inv-accent, #1a4731);
}
.qr-invitation-card[data-style="tropique"] .inv-date {
    color: #0d3320;
    letter-spacing: 5px;
}
.qr-invitation-card[data-style="tropique"] .inv-venue {
    color: #2a5a3a;
}
.qr-invitation-card[data-style="tropique"] .inv-scan {
    color: #5a8a6a;
}
.qr-invitation-card[data-style="tropique"] .inv-url {
    color: #5a8a6a;
}

/* ═══════════════════════════════════════
   STYLE 13: BOHO — Pampas grass & terracotta arch
   ═══════════════════════════════════════ */
.qr-invitation-card[data-style="boho"] {
    background: #f8f0e4;
}
.qr-invitation-card[data-style="boho"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(193, 101, 75, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 100%, rgba(176, 149, 106, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 100%, rgba(176, 149, 106, 0.1) 0%, transparent 40%);
    z-index: 0;
}
.qr-invitation-card[data-style="boho"] .inv-boho {
    display: block;
}
.qr-invitation-card[data-style="boho"] .inv-corner {
    display: none;
}
.qr-invitation-card[data-style="boho"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="boho"] .inv-prelude {
    color: #8a5a40;
    font-weight: 400;
    letter-spacing: 3px;
}
.qr-invitation-card[data-style="boho"] { --inv-heading-font: "Cormorant Garamond", serif; --inv-style-name-color: #5c2e1a; }
.qr-invitation-card[data-style="boho"] .inv-names {
    font-style: italic;
    font-weight: 300;
    font-size: 2rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #5c2e1a));
}
.qr-invitation-card[data-style="boho"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="boho"] .inv-ornament span:last-child {
    background: var(--inv-accent, #c1654b);
    opacity: 0.3;
}
.qr-invitation-card[data-style="boho"] .inv-orn-svg {
    color: var(--inv-accent, #c1654b);
    opacity: 0.5;
}
.qr-invitation-card[data-style="boho"] .inv-date {
    color: #5c2e1a;
    letter-spacing: 5px;
}
.qr-invitation-card[data-style="boho"] .inv-venue {
    color: #7a4a35;
}
.qr-invitation-card[data-style="boho"] .inv-scan {
    color: #a07858;
}
.qr-invitation-card[data-style="boho"] .inv-url {
    color: #a07858;
}
.qr-invitation-card[data-style="boho"] .inv-content {
    padding-bottom: 160px;
    padding-top: 60px;
}

/* ════════════════════════════════════════
   DENTELLE — French lace invitation
   ════════════════════════════════════════ */
.inv-dentelle-frame,
.inv-constellation,
.inv-aquarelle,
.inv-polaroid {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    display: none;
    inset: 0;
    width: 100%;
    height: 100%;
}

.qr-invitation-card[data-style="dentelle"] {
    background: linear-gradient(168deg, #fdfcf8 0%, #f8f5ee 50%, #fafaf5 100%);
}
.qr-invitation-card[data-style="dentelle"] .inv-dentelle-frame {
    display: block;
}
.qr-invitation-card[data-style="dentelle"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="dentelle"] { --inv-heading-font: "Cormorant Garamond", "Cormorant", Georgia, serif; --inv-style-name-color: #5a4a38; }
.qr-invitation-card[data-style="dentelle"] .inv-names {
    font-weight: 200;
    font-style: italic;
    font-size: 1.9rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #5a4a38));
    letter-spacing: 0.5px;
}
.qr-invitation-card[data-style="dentelle"] .inv-prelude {
    color: #9a8878;
    letter-spacing: 2px;
}
.qr-invitation-card[data-style="dentelle"] .inv-date {
    color: #7a6858;
    letter-spacing: 3.5px;
}
.qr-invitation-card[data-style="dentelle"] .inv-venue {
    color: #9a8878;
}
.qr-invitation-card[data-style="dentelle"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="dentelle"] .inv-ornament span:last-child {
    background: var(--inv-accent, #c8b8a8);
    opacity: 0.45;
}
.qr-invitation-card[data-style="dentelle"] .inv-orn-svg {
    color: var(--inv-accent, #c8b8a8);
}
.qr-invitation-card[data-style="dentelle"] .inv-back-url {
    color: #9a8878;
}
.qr-invitation-card[data-style="dentelle"] .inv-content {
    padding: 44px 36px 36px;
}

/* ════════════════════════════════════════
   CONSTELLATION — Night sky save the date
   ════════════════════════════════════════ */
.qr-invitation-card[data-style="constellation"] {
    background: #0d1b2a;
}
.qr-invitation-card[data-style="constellation"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(30, 58, 90, 0.8) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(20, 40, 65, 0.7) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(15, 30, 50, 0.5) 0%, transparent 60%);
    z-index: 0;
}
.qr-invitation-card[data-style="constellation"] .inv-constellation {
    display: block;
}
.qr-invitation-card[data-style="constellation"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="constellation"] { --inv-heading-font: "Cormorant Garamond", Georgia, serif; --inv-style-name-color: #e8e0d0; }
.qr-invitation-card[data-style="constellation"] .inv-names {
    font-weight: 300;
    font-style: italic;
    font-size: 1.85rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #e8e0d0));
    text-shadow: 0 0 20px rgba(232, 208, 160, 0.3);
    letter-spacing: 0.8px;
}
.qr-invitation-card[data-style="constellation"] .inv-prelude {
    color: rgba(200, 216, 240, 0.65);
    letter-spacing: 2.5px;
}
.qr-invitation-card[data-style="constellation"] .inv-date {
    color: #c9a96e;
    letter-spacing: 3px;
}
.qr-invitation-card[data-style="constellation"] .inv-venue {
    color: rgba(200, 216, 240, 0.55);
}
.qr-invitation-card[data-style="constellation"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="constellation"] .inv-ornament span:last-child {
    background: var(--inv-accent, #c9a96e);
    opacity: 0.5;
}
.qr-invitation-card[data-style="constellation"] .inv-orn-svg {
    color: var(--inv-accent, #c9a96e);
}
.qr-invitation-card[data-style="constellation"] .inv-std-text {
    color: rgba(200, 216, 240, 0.75) !important;
}
.qr-invitation-card[data-style="constellation"] .inv-std-eyebrow {
    background: rgba(201, 169, 110, 0.4) !important;
}
.qr-invitation-card[data-style="constellation"] .inv-back-scan {
    color: rgba(200, 216, 240, 0.55);
}
.qr-invitation-card[data-style="constellation"] .inv-back-url {
    color: rgba(201, 169, 110, 0.7);
}
.qr-invitation-card[data-style="constellation"] .inv-back-names {
    color: #e8e0d0;
}
.qr-invitation-card[data-style="constellation"] .inv-back-date {
    color: #c9a96e;
}
.qr-invitation-card[data-style="constellation"] .inv-back-ornament span {
    background: rgba(201, 169, 110, 0.35) !important;
}

/* ════════════════════════════════════════
   AQUARELLE — Watercolor wash save the date
   ════════════════════════════════════════ */
.qr-invitation-card[data-style="aquarelle"] {
    background: #fefefe;
}
.qr-invitation-card[data-style="aquarelle"] .inv-aquarelle {
    display: block;
}
.qr-invitation-card[data-style="aquarelle"] .inv-border {
    border-color: var(--inv-accent, #8a7868);
    opacity: 0.18;
    inset: 16px;
}
.qr-invitation-card[data-style="aquarelle"] { --inv-heading-font: "Libre Baskerville", "Baskerville Old Face", Georgia, serif; --inv-style-name-color: #3a2e22; }
.qr-invitation-card[data-style="aquarelle"] .inv-names {
    font-weight: 400;
    font-style: italic;
    font-size: 1.75rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #3a2e22));
    letter-spacing: 0.3px;
}
.qr-invitation-card[data-style="aquarelle"] .inv-prelude {
    color: #8a7868;
    letter-spacing: 2px;
}
.qr-invitation-card[data-style="aquarelle"] .inv-date {
    color: #5a4a38;
    letter-spacing: 3px;
}
.qr-invitation-card[data-style="aquarelle"] .inv-venue {
    color: #8a7868;
}
.qr-invitation-card[data-style="aquarelle"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="aquarelle"] .inv-ornament span:last-child {
    background: var(--inv-accent, #c8a890);
    opacity: 0.5;
}
.qr-invitation-card[data-style="aquarelle"] .inv-orn-svg {
    color: var(--inv-accent, #c8a890);
}
.qr-invitation-card[data-style="aquarelle"] .inv-std-text {
    color: #5a4a38 !important;
}
.qr-invitation-card[data-style="aquarelle"] .inv-back-url {
    color: #8a7868;
}

/* ════════════════════════════════════════
   POLAROID — Film camera retro save the date
   ════════════════════════════════════════ */
.qr-invitation-card[data-style="polaroid"] {
    background: linear-gradient(175deg, #f5eed8 0%, #ede4c8 50%, #f2ebd5 100%);
}
.qr-invitation-card[data-style="polaroid"] .inv-polaroid {
    display: block;
}
.qr-invitation-card[data-style="polaroid"] .inv-border {
    display: none;
}
.qr-invitation-card[data-style="polaroid"] { --inv-heading-font: "Cormorant Garamond", Georgia, serif; --inv-style-name-color: #2a2010; }
.qr-invitation-card[data-style="polaroid"] .inv-names {
    font-weight: 500;
    font-style: italic;
    font-size: 1.8rem;
    color: var(--inv-name-color-override, var(--inv-style-name-color, #2a2010));
    letter-spacing: 0.4px;
}
.qr-invitation-card[data-style="polaroid"] .inv-prelude {
    color: #6a5a40;
    letter-spacing: 3px;
    font-size: 0.52rem;
    text-transform: uppercase;
}
.qr-invitation-card[data-style="polaroid"] .inv-date {
    color: #3a2e18;
    letter-spacing: 4px;
    font-weight: 500;
}
.qr-invitation-card[data-style="polaroid"] .inv-venue {
    color: #7a6848;
}
.qr-invitation-card[data-style="polaroid"] .inv-ornament span:first-child,
.qr-invitation-card[data-style="polaroid"] .inv-ornament span:last-child {
    background: var(--inv-accent, #8a7850);
    opacity: 0.4;
}
.qr-invitation-card[data-style="polaroid"] .inv-orn-svg {
    color: var(--inv-accent, #8a7850);
}
.qr-invitation-card[data-style="polaroid"] .inv-std-text {
    color: #2a2010 !important;
    letter-spacing: 4px;
}
.qr-invitation-card[data-style="polaroid"] .inv-std-eyebrow {
    background: rgba(42, 32, 16, 0.25) !important;
}
.qr-invitation-card[data-style="polaroid"] .inv-content {
    padding-left: 36px;
    padding-right: 36px;
}
.qr-invitation-card[data-style="polaroid"] .inv-back-url {
    color: #7a6848;
}
.qr-invitation-card[data-style="polaroid"] .inv-back-names {
    color: #2a2010;
}

/* ── Back face content ────────────── */
.inv-back-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px 24px;
    text-align: center;
}
.inv-back-qr {
    margin-bottom: 20px;
}
.inv-back-qr canvas {
    border-radius: 4px;
}
.inv-back-scan {
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0 0 4px;
    color: #b0a090;
}
.inv-back-url {
    font-family: "Jost", monospace;
    font-size: 0.52rem;
    font-weight: 300;
    color: #b0a090;
    word-break: break-all;
    max-width: 260px;
    margin: 0 0 24px;
}
.inv-back-ornament {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.inv-back-ornament span {
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.2;
}
.inv-back-names {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 300;
    color: inherit;
    opacity: 0.4;
    margin: 0 0 4px;
}
.inv-back-date {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 300;
    color: inherit;
    opacity: 0.3;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
}
.inv-back-hashtag {
    font-family: var(--inv-heading-font, "Cormorant Garamond", serif);
    font-size: 0.72rem;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 1.5px;
    color: inherit;
    opacity: 0.5;
    margin: 0 0 4px;
}
.inv-back-rsvp-contact {
    font-family: "Jost", sans-serif;
    font-size: 0.55rem;
    font-weight: 300;
    letter-spacing: 1px;
    color: inherit;
    opacity: 0.35;
    margin: 6px 0 0;
}
#qr-invitation-card-back .inv-back-hashtag,
#qr-invitation-card-back .inv-back-rsvp-contact,
.qr-card-back .inv-back-hashtag,
.qr-card-back .inv-back-rsvp-contact {
    color: var(--inv-verso-text-override, inherit);
}
/* Back face inherits style coloring from data-style */

/* Card download actions */
.qr-card-actions {
    display: flex;
    gap: 8px;
}
.qr-card-actions .btn {
    flex: 1;
}

/* ── QR Mobile Responsive ─────────── */
@media (max-width: 600px) {
    .qr-card {
        padding: 20px;
    }
    .qr-url-row {
        flex-direction: column;
    }
    .qr-url-row .btn {
        width: 100%;
    }
    .qr-colors {
        flex-direction: column;
        gap: 12px;
    }
    .qr-downloads {
        flex-direction: column;
    }
    .qr-share-btns {
        flex-direction: column;
    }
    .qr-share-btn span {
        display: inline;
    }
    .qr-style-pills {
        flex-wrap: wrap;
        gap: 4px;
    }
    .qr-style-btn {
        padding: 6px 10px;
        font-size: 0.65rem;
    }
    .qr-card-flipper {
        width: 100%;
        height: auto;
        aspect-ratio: 340/480;
    }
    .qr-invitation-card {
        width: 100%;
        min-width: 0;
        min-height: auto;
    }
    .inv-content {
        padding: 36px 20px 28px;
        min-height: auto;
    }
    .inv-names {
        font-size: 1.35rem;
    }
    .inv-corner {
        width: 130px;
        height: 148px;
    }
    .inv-seal {
        width: 45px;
        height: 45px;
        bottom: 18px;
        right: 15px;
    }
    .inv-crest {
        width: 60px;
        height: 54px;
        top: 14px;
    }
    .inv-orn-svg {
        width: 60px;
        height: 14px;
    }
    .inv-kente {
        height: 22px;
    }
    .qr-card-actions {
        flex-direction: column;
    }
    .qr-preview-area {
        min-height: 200px;
        padding: 16px;
    }
}

/* ═══════════════════════════════════════
   GUEST LIST MANAGER
═══════════════════════════════════════ */

/* Dashboard counters */
.guests-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.guests-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border-left: 3px solid var(--border);
    transition: var(--transition);
}
.guests-counter:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.guests-counter[data-type="total"] {
    border-left-color: var(--txt-m);
}
.guests-counter[data-type="confirmed"] {
    border-left-color: var(--sage);
}
.guests-counter[data-type="declined"] {
    border-left-color: var(--terra);
}
.guests-counter[data-type="pending"] {
    border-left-color: #d4a84b;
}
.guests-counter[data-type="plusones"] {
    border-left-color: var(--terra-l);
}
.guests-counter[data-type="meals"] {
    border-left-color: var(--sage-d);
    flex-direction: column;
    align-items: stretch;
}
.counter-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--cream);
    flex-shrink: 0;
}
.guests-counter[data-type="total"] .counter-icon {
    color: var(--txt-m);
}
.guests-counter[data-type="confirmed"] .counter-icon {
    color: var(--sage);
}
.guests-counter[data-type="declined"] .counter-icon {
    color: var(--terra);
}
.guests-counter[data-type="pending"] .counter-icon {
    color: #d4a84b;
}
.guests-counter[data-type="plusones"] .counter-icon {
    color: var(--terra-l);
}
.counter-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.counter-value {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--txt);
    line-height: 1;
}
.counter-label {
    font-size: 0.68rem;
    color: var(--txt-l);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.guests-counter-chart .counter-label {
    margin-bottom: 6px;
}
.meal-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.meal-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--txt-m);
}
.meal-bar-label {
    width: 60px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meal-bar-track {
    flex: 1;
    height: 6px;
    background: var(--cream-d);
    border-radius: 3px;
    overflow: hidden;
}
.meal-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.meal-bar-count {
    width: 20px;
    font-weight: 500;
}

/* Filters */
.guests-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.guests-filters input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--txt);
    transition: border-color 0.2s;
}
.guests-filters input[type="text"]:focus {
    border-color: var(--terra-l);
    outline: none;
}
.guests-filter-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--txt-m);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.filter-pill:hover {
    border-color: var(--terra-l);
    color: var(--terra);
}
.filter-pill.active {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
    font-weight: 500;
}
.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pill-dot-confirmed {
    background: var(--sage);
}
.pill-dot-invited {
    background: #d4a84b;
}
.pill-dot-declined {
    background: var(--terra);
}
.pill-dot-notinvited {
    background: var(--txt-xl);
}
.filter-pill.active .pill-dot {
    background: rgba(255, 255, 255, 0.7);
}

/* Quick-add row */
.guests-quick-add {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px dashed var(--cream-d);
}
.qa-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--cream-d);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--txt);
    transition: border-color 0.2s;
}
.qa-input:focus {
    border-color: var(--terra-l);
    outline: none;
}
.qa-input select,
.guests-quick-add select {
    flex: 0 0 120px;
}
.guests-quick-add .btn span {
    display: none;
}

/* Status badges in table */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.status-badge-confirmed {
    background: rgba(107, 155, 122, 0.12);
    color: var(--sage-d);
}
.status-badge-invited {
    background: rgba(212, 168, 75, 0.1);
    color: #9a7c2e;
}
.status-badge-declined {
    background: rgba(200, 88, 42, 0.08);
    color: var(--terra);
}
.status-badge-not_invited {
    background: rgba(0, 0, 0, 0.04);
    color: var(--txt-xl);
}
.status-badge-tentative {
    background: rgba(100, 100, 200, 0.08);
    color: #6060a0;
}

/* Tag pills in table */
.tag-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--cream);
    color: var(--txt-m);
    margin: 1px 2px;
}
.tag-pill-famille {
    background: rgba(107, 155, 122, 0.12);
    color: var(--sage-d);
}
.tag-pill-amis {
    background: rgba(200, 88, 42, 0.08);
    color: var(--terra);
}
.tag-pill-collegues {
    background: rgba(100, 100, 200, 0.08);
    color: #6060a0;
}
.tag-pill-cortege {
    background: rgba(212, 168, 75, 0.1);
    color: #9a7c2e;
}
.tag-pill-temoins {
    background: rgba(180, 80, 180, 0.08);
    color: #8a408a;
}

/* Household badge in guest table */
.guest-household-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.58rem;
    color: var(--txt-l);
    font-weight: 300;
    margin-top: 2px;
}
.guest-household-badge svg {
    flex-shrink: 0;
}

/* Plus-one indicator */
.plusone-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--sage-d);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plusone-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* Guest table row actions */
.guest-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}
.guest-action-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--txt-l);
    transition: var(--transition);
}
.guest-action-btn:hover {
    background: var(--cream);
    color: var(--terra);
}
.guest-action-btn svg {
    width: 14px;
    height: 14px;
}
.guest-action-btn.send-msg-btn:hover {
    color: var(--sage);
    background: rgba(143, 168, 135, 0.12);
}
.guest-action-btn.guest-kebab-btn {
    color: var(--txt-l);
}
.guest-action-btn.guest-kebab-btn:hover {
    background: var(--cream);
    color: var(--txt);
}

/* Kebab menu — single element appended to <body>, positioned via JS with position:fixed */
#guest-kebab-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(44, 24, 16, 0.18);
    min-width: 190px;
    overflow: hidden;
    animation: menuIn 0.12s ease;
}
#guest-kebab-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(44, 24, 16, 0.05);
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--txt2);
    text-align: left;
    transition: background 0.12s;
    appearance: none;
    -webkit-appearance: none;
}
#guest-kebab-menu button:last-child {
    border-bottom: none;
}
#guest-kebab-menu button:first-child {
    color: var(--sage);
}
#guest-kebab-menu button:first-child:hover {
    background: rgba(143, 168, 135, 0.09);
    color: #3d7040;
}
#guest-kebab-menu button:hover {
    background: var(--cream);
    color: var(--txt);
}
#guest-kebab-menu button.delete {
    color: #c0392b;
}
#guest-kebab-menu button.delete:hover {
    background: rgba(192, 57, 43, 0.06);
}

/* ═══════════════════════════════════════════
   SHARED KEBAB MENU & TABLE HELPERS
   (Events, Households, Questions + Guests)
═══════════════════════════════════════════ */

/* 3-dot kebab trigger button — mirrors guest-action-btn guest-kebab-btn */
.kebab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    color: var(--txt-l);
    transition:
        background 0.15s,
        color 0.15s;
}
.kebab-btn:hover {
    background: var(--cream);
    color: var(--txt);
}

/* Shared dropdown menu */
.guest-actions-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(44, 24, 16, 0.18);
    overflow: hidden;
    animation: menuIn 0.12s ease;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(44, 24, 16, 0.05);
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--txt2);
    text-align: left;
    transition: background 0.12s;
    appearance: none;
    -webkit-appearance: none;
}
.menu-item:last-child {
    border-bottom: none;
}
.menu-item:hover {
    background: var(--cream);
    color: var(--txt);
}
.menu-item-danger {
    color: var(--terra) !important;
}
.menu-item-danger:hover {
    background: rgba(192, 57, 43, 0.06) !important;
}

/* Shared td helper classes */
.td-primary {
    font-weight: 500;
    color: var(--txt);
    font-size: 0.85rem;
}
.td-secondary {
    font-size: 0.8rem;
    color: var(--txt-l);
}
.td-sub {
    font-size: 0.7rem;
    color: var(--txt-l);
}
.td-empty {
    color: var(--txt-l);
    font-size: 0.8rem;
}
.td-drag {
    width: 24px;
    padding-left: 8px !important;
    color: var(--txt-l);
    cursor: grab;
    opacity: 0.5;
}
.th-drag {
    width: 32px;
}

/* Member avatars in table cell */
.td-members-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.td-member-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.td-member-avatar.primary {
    background: var(--terra);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px var(--terra);
}
.td-members-more {
    font-size: 0.7rem;
    color: var(--txt-l);
}
.td-members-count {
    font-size: 0.75rem;
    color: var(--txt-l);
    margin-left: 4px;
}

/* Required field marker */
span.required {
    color: var(--terra);
    font-weight: 600;
}

/* Guest modal form */
.gm-row {
    display: flex;
    gap: 12px;
}
.gm-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gm-field label {
    font-size: 0.72rem;
    color: var(--txt-m);
    font-weight: 500;
}
.gm-field input,
.gm-field select,
.gm-field textarea {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--txt);
    transition: border-color 0.2s;
}
.gm-field input:focus,
.gm-field select:focus,
.gm-field textarea:focus {
    border-color: var(--terra-l);
    outline: none;
}

.gm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.gm-tag-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--txt-m);
    cursor: pointer;
    transition: var(--transition);
}
.gm-tag-check:has(input:checked) {
    background: var(--terra-bg);
    border-color: var(--terra-l);
    color: var(--terra);
}
.gm-tag-check input {
    display: none;
}

/* Dietary preset chips */
.dietary-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.dietary-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid var(--border);
    font-size: 0.72rem;
    color: var(--txt-m);
    cursor: pointer;
    transition: var(--transition);
}
.dietary-chip:hover {
    border-color: var(--sage);
    color: var(--sage-d);
}
.dietary-chip:has(input:checked) {
    background: var(--sage-bg);
    border-color: var(--sage);
    color: var(--sage-d);
}
.dietary-chip input {
    display: none;
}
.gm-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--txt-m);
    cursor: pointer;
}
.gm-toggle-label input {
    accent-color: var(--terra);
    width: 16px;
    height: 16px;
}

/* Empty state */
.guests-empty {
    text-align: center;
    padding: 60px 20px;
}
.guests-empty svg {
    width: 64px;
    height: 64px;
    color: var(--txt-xl);
    opacity: 0.5;
    margin-bottom: 16px;
}
.guests-empty h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    color: var(--txt-m);
    margin-bottom: 8px;
}
.guests-empty p {
    font-size: 0.82rem;
    color: var(--txt-l);
    margin-bottom: 20px;
}

/* ── Guests Mobile Responsive ────── */
@media (max-width: 768px) {
    .guests-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    .guests-counter-chart {
        grid-column: span 2;
    }
    .guests-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .guests-filter-pills {
        order: -1;
    }
    .filter-right {
        flex-wrap: wrap;
    }
    .guests-quick-add {
        flex-wrap: wrap;
    }
    .qa-input {
        min-width: calc(50% - 6px);
        flex: 1 1 calc(50% - 6px);
    }
    .guests-quick-add select.qa-input {
        flex: 1 1 calc(50% - 6px);
    }
    .gm-row {
        flex-direction: column;
        gap: 10px;
    }

    /* Guest table → card list on mobile */
    .table-wrap {
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }
    #guests-tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #guests-tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 12px 14px;
        border-left: 3px solid var(--terra);
    }
    #guests-tbody tr:hover td {
        background: transparent;
    }
    #guests-tbody thead,
    #guests-table thead {
        display: none;
    }
    #guests-tbody table {
        border-collapse: separate;
    }

    /* Column visibility: show only key cols */
    #guests-tbody .td-check {
        width: auto;
        padding: 0;
    }
    #guests-tbody .td-email,
  #guests-tbody td:nth-child(4),  /* groupe */
  #guests-tbody td:nth-child(6)   /* repas  */ {
        display: none;
    }

    /* Name column — takes full row width */
    #guests-tbody td:nth-child(2) {
        flex: 1;
        min-width: 0;
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--txt);
        padding: 0;
        border: none;
    }
    /* Status */
    #guests-tbody td:nth-child(5) {
        padding: 0;
        border: none;
    }
    /* Plus one */
    #guests-tbody td:nth-child(7) {
        padding: 0;
        border: none;
        margin-left: auto;
    }
    /* Actions */
    #guests-tbody .td-actions {
        padding: 0;
        border: none;
        width: auto;
    }

    /* Hide table header row entirely */
    #guests-table thead tr {
        display: none;
    }

    /* ── Events / Households / Questions — same card layout as guests ── */
    #events-tbody,
    #households-tbody,
    #questions-tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #events-tbody tr,
    #households-tbody tr,
    #questions-tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 12px 14px;
        border-left: 3px solid var(--terra);
    }
    #events-tbody tr:hover td,
    #households-tbody tr:hover td,
    #questions-tbody tr:hover td {
        background: transparent;
    }

    /* Hide thead for these tables */
    #events-table thead,
    #households-table thead,
    #questions-table thead {
        display: none;
    }

    /* Empty state rows — no card style */
    #events-tbody tr:has(.empty-card),
    #households-tbody tr:has(.empty-card),
    #questions-tbody tr:has(.empty-card) {
        background: transparent;
        box-shadow: none;
        border-left: none;
        padding: 0;
    }

    /* Events mobile: name takes full width, hide location+tags */
    #events-tbody td:nth-child(1) {
        flex: 1;
        min-width: 0;
        font-weight: 500;
        padding: 0;
        border: none;
        color: var(--txt);
    }
    #events-tbody td:nth-child(2) {
        padding: 0;
        border: none;
        font-size: 0.75rem;
    }
    #events-tbody td:nth-child(3),  /* location */
    #events-tbody td:nth-child(4) {
        display: none;
    } /* tags */
    #events-tbody td:nth-child(5) {
        padding: 0;
        border: none;
        font-size: 0.75rem;
        margin-left: auto;
    }
    #events-tbody .td-actions {
        padding: 0;
        border: none;
        width: auto;
    }

    /* Households mobile: name takes full width, hide address */
    #households-tbody td:nth-child(1) {
        flex: 1;
        min-width: 0;
        font-weight: 500;
        padding: 0;
        border: none;
        color: var(--txt);
    }
    #households-tbody td:nth-child(2) {
        padding: 0;
        border: none;
    }
    #households-tbody td:nth-child(3) {
        display: none;
    } /* address */
    #households-tbody .td-actions {
        padding: 0;
        border: none;
        width: auto;
        margin-left: auto;
    }

    /* Questions mobile: drag hidden, question takes full width, hide if-attending sub */
    #questions-tbody .td-drag {
        display: none;
    }
    #questions-tbody td:nth-child(2) {
        flex: 1;
        min-width: 0;
        padding: 0;
        border: none;
    }
    #questions-tbody td:nth-child(3) {
        padding: 0;
        border: none;
    }
    #questions-tbody td:nth-child(4) {
        padding: 0;
        border: none;
    }
    #questions-tbody .td-actions {
        padding: 0;
        border: none;
        width: auto;
        margin-left: auto;
    }
}
@media (max-width: 480px) {
    .guests-dashboard {
        grid-template-columns: 1fr 1fr;
    }
    .guests-counter {
        padding: 12px 14px;
    }
    .counter-value {
        font-size: 1.3rem;
    }
    .guests-counter-chart {
        grid-column: span 2;
    }
    .filter-pill {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
    .guests-quick-add {
        flex-direction: column;
    }
    .qa-input {
        min-width: 100%;
        padding: 9px 12px;
        font-size: 0.85rem;
    }
    .guests-quick-add .btn {
        width: 100%;
        justify-content: center;
        gap: 6px;
        padding: 10px 8px;
        font-size: 0.54rem;
        letter-spacing: 2px;
        text-transform: uppercase;
    }
    .guests-quick-add .btn span {
        display: inline;
    }
    .guest-actions {
        gap: 2px;
    }
    .guest-action-btn {
        width: 24px;
        height: 24px;
    }
}

/* ══════════════════════════════════════
   GUEST SUB-NAVIGATION
══════════════════════════════════════ */
.guests-subnav {
    display: flex;
    gap: 2px;
    padding: 4px;
    background: rgba(44, 32, 22, 0.03);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    border: 1px solid rgba(44, 32, 22, 0.06);
}
.subnav-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--txt-m);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.subnav-btn svg {
    opacity: 0.5;
    flex-shrink: 0;
}
.subnav-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--txt);
}
.subnav-btn.active {
    background: #fff;
    color: var(--txt);
    box-shadow: var(--shadow-sm);
    font-weight: 500;
}
.subnav-btn.active svg {
    opacity: 1;
    color: var(--terra);
}

.guest-subtab {
    display: none;
}
.guest-subtab.active {
    display: block;
    animation: subtabIn 0.25s ease;
    overflow-x: hidden;
}
@keyframes subtabIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.subtab-header {
    margin-bottom: 24px;
}
.subtab-header h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--txt);
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.subtab-desc {
    font-size: 0.74rem;
    color: var(--txt-m);
    line-height: 1.6;
    margin-bottom: 16px;
    font-weight: 300;
    max-width: 600px;
}
.field-hint {
    font-size: 0.68rem;
    color: var(--txt-l);
    line-height: 1.5;
    margin: 2px 0 8px;
    font-weight: 300;
}

/* ══════════════════════════════════════
   EMPTY CARDS
══════════════════════════════════════ */
.empty-card {
    text-align: center;
    padding: 48px 24px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px dashed rgba(44, 32, 22, 0.1);
    border-radius: 16px;
}
.empty-card svg {
    color: var(--txt-xl);
    margin-bottom: 12px;
}
.empty-card h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--txt-m);
    margin-bottom: 6px;
}
.empty-card p {
    font-size: 0.74rem;
    color: var(--txt-l);
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ══════════════════════════════════════
   EVENT CARDS
══════════════════════════════════════ */
.events-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.event-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    border: 1px solid rgba(44, 32, 22, 0.08);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}
.event-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--terra);
    border-radius: 4px 0 0 4px;
}
.event-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.event-card-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--txt);
    letter-spacing: 0.3px;
}
.event-card-actions {
    display: flex;
    gap: 4px;
}
.event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}
.event-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    color: var(--txt-m);
}
.event-meta-item svg {
    width: 13px;
    height: 13px;
    opacity: 0.5;
}
.event-card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.event-card-count {
    font-size: 0.68rem;
    color: var(--txt-l);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(44, 32, 22, 0.06);
}

/* ══════════════════════════════════════
   HOUSEHOLD CARDS
══════════════════════════════════════ */
.households-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.household-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    border: 1px solid rgba(44, 32, 22, 0.08);
    transition: all 0.25s ease;
}
.household-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.household-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.household-card-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 8px;
}
.household-card-name svg {
    width: 16px;
    height: 16px;
    color: var(--terra);
    opacity: 0.6;
}
.household-members {
    margin-bottom: 8px;
}
.household-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 0.74rem;
    color: var(--txt-m);
}
.household-member .member-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cream-d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--txt-m);
    flex-shrink: 0;
}
.household-member.primary .member-avatar {
    background: var(--terra-bg);
    color: var(--terra);
}
.household-address {
    font-size: 0.68rem;
    color: var(--txt-l);
    line-height: 1.5;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(44, 32, 22, 0.06);
}

.household-members-select {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid rgba(44, 32, 22, 0.1);
    border-radius: 8px;
    padding: 8px;
}
.hm-member-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.74rem;
    color: var(--txt-m);
    transition: background 0.15s ease;
}
.hm-member-option:hover {
    background: rgba(44, 32, 22, 0.03);
}
.hm-member-option input {
    accent-color: var(--terra);
}

/* ══════════════════════════════════════
   QUESTION CARDS
══════════════════════════════════════ */
.questions-list {
    margin-bottom: 24px;
}
.question-card {
    background: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    border: 1px solid rgba(44, 32, 22, 0.08);
    margin-bottom: 10px;
    transition: all 0.25s ease;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.question-card:hover {
    box-shadow: var(--shadow-sm);
}
.question-card-drag {
    cursor: grab;
    padding: 4px;
    color: var(--txt-xl);
    flex-shrink: 0;
    margin-top: 2px;
}
.question-card-drag svg {
    width: 14px;
    height: 14px;
}
.question-card-body {
    flex: 1;
    min-width: 0;
}
.question-card-text {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--txt);
    margin-bottom: 4px;
}
.question-card-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.question-type-badge {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(107, 155, 122, 0.1);
    color: var(--sage-d);
}
.question-type-badge.required {
    background: rgba(200, 88, 42, 0.08);
    color: var(--terra);
}
.question-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Question templates */
.questions-templates {
    border-top: 1px solid rgba(44, 32, 22, 0.08);
    padding-top: 20px;
    margin-top: 8px;
}
.questions-templates h3 {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--txt-m);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
}
.questions-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}
.template-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(44, 32, 22, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--txt-m);
    text-align: left;
}
.template-card:hover {
    border-color: var(--terra);
    background: var(--terra-bg);
    color: var(--terra);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.template-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   MEALS CONFIG
══════════════════════════════════════ */
.meals-config-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(44, 32, 22, 0.08);
    margin-bottom: 16px;
}
.meals-config-section h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--txt);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.meals-config-desc {
    font-size: 0.72rem;
    color: var(--txt-m);
    margin-bottom: 14px;
    font-weight: 300;
}
.meals-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.meal-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(44, 32, 22, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(44, 32, 22, 0.06);
    transition: all 0.15s ease;
}
.meal-option-row:hover {
    background: rgba(44, 32, 22, 0.04);
}
.meal-option-row.editing {
    background: rgba(184, 149, 106, 0.06);
    border-color: var(--terra-l);
}
.meal-edit-input {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--txt);
    background: var(--bg2);
    transition: border-color 0.2s;
}
.meal-edit-input:focus {
    border-color: var(--terra-l);
    outline: none;
}
.meal-edit-color {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    cursor: pointer;
    background: transparent;
    flex-shrink: 0;
}
.meal-option-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.meal-option-name {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--txt);
}
.meal-option-count {
    font-size: 0.7rem;
    color: var(--txt-l);
    font-weight: 300;
}
.meal-option-actions {
    display: flex;
    gap: 4px;
}

.meals-add-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.meals-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px dashed rgba(44, 32, 22, 0.15);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    background: transparent;
    color: var(--txt);
}
.meals-input:focus {
    outline: none;
    border-color: var(--terra);
    border-style: solid;
}
.meals-color-input {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: transparent;
}

.dietary-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.dietary-tag {
    font-size: 0.68rem;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(107, 155, 122, 0.08);
    color: var(--sage-d);
    border: 1px solid rgba(107, 155, 122, 0.15);
    font-weight: 400;
}

.meals-summary {
    margin-bottom: 16px;
}
.meals-summary-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(44, 32, 22, 0.04);
}
.meals-summary-row:last-child {
    border-bottom: none;
}
.meals-summary-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.meals-summary-label {
    flex: 1;
    font-size: 0.76rem;
    color: var(--txt-m);
}
.meals-summary-count {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--txt);
}
.meals-summary-bar {
    width: 80px;
    height: 6px;
    background: rgba(44, 32, 22, 0.06);
    border-radius: 3px;
    overflow: hidden;
}
.meals-summary-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.meals-export-actions {
    display: flex;
    gap: 8px;
}

/* ══════════════════════════════════════
   RESPONSIVE: Sub-nav + new panels
══════════════════════════════════════ */
@media (max-width: 768px) {
    .guests-subnav {
        gap: 0;
        padding: 3px;
    }
    .subnav-btn {
        padding: 7px 10px;
        font-size: 0.66rem;
        gap: 5px;
    }
    .subnav-btn svg {
        width: 12px;
        height: 12px;
    }
    .events-list,
    .households-list {
        grid-template-columns: 1fr;
    }
    .questions-template-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .meals-add-row {
        flex-wrap: wrap;
    }
}
@media (max-width: 480px) {
    .guests-subnav {
        gap: 0;
        padding: 2px;
        justify-content: space-between;
    }
    .subnav-btn {
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 4px;
        flex: 1;
        min-width: 0;
    }
    .subnav-btn svg {
        width: 17px;
        height: 17px;
        opacity: 0.7;
    }
    .subnav-btn span {
        display: block;
        font-size: 0.52rem;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .subnav-btn.active svg {
        opacity: 1;
    }
}

/* ═══ CSV Import Modal ═══ */
.import-dropzone {
    border: 2px dashed #d5cec4;
    background: #faf8f5;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.import-dropzone:hover,
.import-dropzone.drag-over {
    border-color: var(--terra, #c67b5c);
    background: #fef7f3;
}
.import-dropzone svg {
    color: #bbb;
    margin-bottom: 12px;
}
.import-dropzone p {
    color: #888;
    margin: 6px 0;
}
.import-browse-btn {
    margin-top: 8px;
    cursor: pointer;
}
.import-hint {
    font-size: 12px !important;
    color: #aaa !important;
}

.import-info {
    color: #666;
    margin-bottom: 16px;
    font-size: 14px;
}
.import-mapping-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px 12px;
    align-items: center;
    margin-bottom: 24px;
}
.import-mapping-grid .map-csv-col {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    padding: 8px 12px;
    background: #f5f2ee;
    border-radius: 6px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.import-mapping-grid .map-arrow {
    color: #bbb;
    font-size: 18px;
    text-align: center;
}
.import-mapping-grid select {
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}
.import-preview-section {
    margin-top: 16px;
}
.import-preview-section h4 {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.import-preview-table-wrap {
    overflow-x: auto;
    max-height: 200px;
    border: 1px solid #eee;
    border-radius: 8px;
}
.import-preview-table {
    font-size: 12px;
}
.import-preview-table th {
    background: #f5f2ee;
    position: sticky;
    top: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.import-preview-table td {
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.import-options {
    margin-top: 16px;
    padding: 12px;
    background: #f9f8f6;
    border-radius: 8px;
}
.import-option-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}
.import-option-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--terra, #c67b5c);
}

.import-results {
    text-align: center;
    padding: 24px 0;
}
.import-results .result-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.import-results .result-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.import-results .result-detail {
    font-size: 14px;
    color: #888;
    margin: 4px 0;
}
.import-results .result-success {
    color: #5a9a68;
}
.import-results .result-warning {
    color: #c67b5c;
}

/* ══════════════════════════════════════
   PHASE 13 — CHECKLIST
══════════════════════════════════════ */
.checklist-progress {
    background: #fff;
    border-radius: var(--radius);
    padding: 10px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(44, 32, 22, 0.05);
    margin-bottom: 20px;
}
.checklist-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.checklist-progress-text {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    color: var(--txt-m);
    font-weight: 400;
}
.checklist-progress-pct {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--sage-d);
}
.checklist-progress-bar {
    height: 8px;
    background: var(--cream-d);
    border-radius: 4px;
    overflow: hidden;
}
.checklist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sage) 0%, var(--sage-d) 100%);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Category breakdown chips */
.checklist-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.checklist-categories::-webkit-scrollbar {
    display: none;
}
.checklist-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.68rem;
    background: #fff;
    border: 1px solid rgba(44, 32, 22, 0.08);
    color: var(--txt-m);
    letter-spacing: 0.3px;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}
.checklist-cat-chip .cat-count {
    font-weight: 500;
    color: var(--sage-d);
    background: var(--sage-bg);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.62rem;
}
.checklist-cat-chip .cat-done {
    font-weight: 500;
    color: var(--txt-xl);
    font-size: 0.6rem;
}

/* Checklist filters */
.checklist-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.checklist-filters select {
    padding: 8px 14px;
    border: 1px solid rgba(44, 32, 22, 0.1);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    background: #fff;
    color: var(--txt-m);
}

/* Checklist toolbar (search + sort) */
.checklist-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.checklist-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.checklist-search-wrap svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--txt-l);
}
#checklist-search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid rgba(44, 32, 22, 0.1);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    background: #fff;
    color: var(--txt);
}
#checklist-search:focus {
    outline: none;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px var(--sage-bg);
}
.checklist-sort-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.checklist-sort-label {
    font-size: 0.68rem;
    color: var(--txt-l);
    letter-spacing: 0.3px;
}
#checklist-sort {
    padding: 8px 12px;
    border: 1px solid rgba(44, 32, 22, 0.1);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    background: #fff;
    color: var(--txt-m);
}

/* Checklist items */
.checklist-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid rgba(44, 32, 22, 0.05);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    cursor: default;
    border-left: 3px solid #c8c2bb; /* gray = to-do default */
}
.checklist-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.checklist-item.completed {
    opacity: 0.55;
    border-left-color: #27ae60;
}
.checklist-item.completed .cl-title {
    text-decoration: line-through;
    color: var(--txt-l);
}
.checklist-item.overdue,
.checklist-item.cl-urgent {
    border-left-color: var(--terra);
}
.checklist-item.overdue .cl-due {
    color: var(--terra);
    font-weight: 500;
}
.checklist-item.cl-drag-over {
    border-color: var(--sage);
    background: var(--sage-bg);
}
.checklist-item.cl-dragging {
    opacity: 0.4;
}

/* Drag handle — always visible, 6-dot SVG */
.cl-drag-handle {
    cursor: grab;
    color: var(--txt-xl);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 28px;
    border-radius: 4px;
    user-select: none;
    touch-action: none;
    transition:
        color 0.15s,
        background 0.15s;
}
.cl-drag-handle:hover {
    color: var(--txt-m);
    background: var(--cream-d);
}
.cl-drag-handle:active {
    cursor: grabbing;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cl-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--cream-dd);
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.cl-checkbox:hover {
    border-color: var(--sage);
}
.cl-checkbox.checked {
    background: var(--sage);
    border-color: var(--sage);
}
.cl-checkbox.checked::after {
    content: "";
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}
.cl-content {
    flex: 1;
    min-width: 0;
}
.cl-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.cl-title {
    font-size: 0.82rem;
    color: var(--txt);
    font-weight: 400;
}
.cl-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.66rem;
    color: var(--txt-l);
    flex-wrap: wrap;
}
.cl-cat-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--cream-d);
    font-size: 0.6rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 500;
}
.cl-due {
    font-size: 0.66rem;
}
.cl-notes-preview {
    color: var(--txt-l);
    font-size: 0.64rem;
    font-style: italic;
}

/* Priority badges */
.cl-priority-badge {
    font-size: 0.58rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 10px;
}
.cl-priority-badge.high {
    background: #fdecea;
    color: #c0392b;
}
.cl-priority-badge.medium {
    background: #fef3e2;
    color: #b7770d;
}
.cl-priority-badge.low {
    background: #e8f5e9;
    color: #27ae60;
}

/* Days remaining chips */
.cl-days-chip {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.cl-days-chip.overdue {
    background: #fdecea;
    color: #c0392b;
}
.cl-days-chip.today {
    background: #fef3e2;
    color: #b7770d;
}
.cl-days-chip.urgent {
    background: #fef3e2;
    color: #e67e22;
}
.cl-days-chip.soon {
    background: #e8f5e9;
    color: #27ae60;
}

/* Checklist kebab (reuse .budget-kebab-menu portal styles) */
#checklist-kebab-menu {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(44, 32, 22, 0.07);
    min-width: 180px;
    overflow: hidden;
}
#checklist-kebab-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.78rem;
    color: var(--txt-m);
    text-align: left;
    transition: background 0.15s;
}
#checklist-kebab-menu button:hover {
    background: var(--cream-d);
}
#checklist-kebab-menu button.danger {
    color: var(--red);
}
#checklist-kebab-menu button.danger:hover {
    background: var(--red-bg);
}

.cl-actions {
    display: flex;
    gap: 4px;
}

/* Touch drag target highlight */
.checklist-item.cl-touch-target {
    border-color: var(--sage) !important;
    background: var(--sage-bg) !important;
    box-shadow: 0 0 0 2px var(--sage) !important;
}

/* ── View toggle ── */
.cl-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--cream-d);
    border-radius: var(--radius);
    padding: 3px;
    flex-shrink: 0;
}
.cl-view-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: calc(var(--radius) - 2px);
    color: var(--txt-l);
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    transition: var(--transition);
}
.cl-view-btn.active {
    background: #fff;
    color: var(--txt);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.cl-view-btn:hover:not(.active) {
    color: var(--txt-m);
}
@media (max-width: 480px) {
    .cl-view-btn {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 10px;
    }
    .cl-view-label {
        display: block;
        font-size: 0.5rem;
        line-height: 1.1;
    }
}

/* ── Grouped view ── */
.cl-group {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid rgba(44, 32, 22, 0.06);
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
    overflow: hidden;
}
.cl-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-left: 3px solid var(--sage);
    user-select: none;
}
.cl-group-header:hover {
    background: var(--cream);
}
.cl-group-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--txt);
    min-width: 90px;
}
.cl-group-bar-wrap {
    flex: 1;
    min-width: 50px;
}
.cl-group-bar {
    height: 4px;
    background: var(--cream-d);
    border-radius: 2px;
    overflow: hidden;
}
.cl-group-bar-fill {
    height: 100%;
    background: var(--sage);
    border-radius: 2px;
    transition: width 0.4s;
}
.cl-group-count {
    font-size: 0.68rem;
    color: var(--sage-d);
    font-weight: 600;
    white-space: nowrap;
    background: var(--sage-bg);
    padding: 2px 8px;
    border-radius: 10px;
}
.cl-group-chevron {
    transition: transform 0.2s;
    color: var(--txt-l);
    flex-shrink: 0;
}
.cl-group-chevron.collapsed {
    transform: rotate(-90deg);
}
.cl-group-body {
    border-top: 1px solid rgba(44, 32, 22, 0.04);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cl-group-body.collapsed {
    display: none;
}
.cl-group .checklist-item {
    box-shadow: none;
    border: 1px solid rgba(44, 32, 22, 0.05);
    border-left: 3px solid #c8c2bb; /* gray default — shorthand resets it so we re-state explicitly */
}
.cl-group .checklist-item.overdue,
.cl-group .checklist-item.cl-urgent {
    border-left-color: var(--terra);
}
.cl-group .checklist-item.completed {
    border-left-color: #27ae60;
}
.cl-group .checklist-item:hover {
    box-shadow: var(--shadow-sm);
}

/* ── Kanban view — equal-height columns, each independently scrollable ── */
.cl-kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: stretch;
    height: calc(100vh - 390px);
    min-height: 360px;
}
.cl-kanban-col {
    background: var(--cream);
    border-radius: var(--radius);
    border: 1px solid rgba(44, 32, 22, 0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: background 0.15s;
}
.cl-kanban-col.cl-drag-over {
    background: rgba(143, 168, 135, 0.12);
    border-color: var(--sage);
}
.cl-kanban-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(44, 32, 22, 0.07);
}
/* Dots match the column border colours */
.cl-kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cl-kanban-dot.todo {
    background: #c8c2bb;
}
.cl-kanban-dot.urgent {
    background: var(--terra);
}
.cl-kanban-dot.done {
    background: #27ae60;
}

/* Mobile-only tab bar */
.cl-kanban-tab-bar {
    display: none;
}
.cl-kanban-label {
    flex: 1;
    font-size: 0.68rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--txt-m);
}
.cl-kanban-count {
    background: rgba(44, 32, 22, 0.08);
    color: var(--txt-m);
    font-size: 0.64rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.cl-kanban-cards {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--cream-dd) transparent;
}
.cl-kanban-cards::-webkit-scrollbar {
    width: 4px;
}
.cl-kanban-cards::-webkit-scrollbar-thumb {
    background: var(--cream-dd);
    border-radius: 2px;
}
.cl-kanban-empty {
    text-align: center;
    padding: 24px 10px;
    color: var(--txt-xl);
    font-size: 0.72rem;
    font-style: italic;
}
.cl-kanban-card {
    background: #fff;
    border-radius: calc(var(--radius) - 2px);
    padding: 12px 12px 10px;
    border-left: 3px solid var(--cream-dd);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    cursor: grab;
    transition: var(--transition);
}
.cl-kanban-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.cl-kanban-card.completed {
    opacity: 0.5;
}
.cl-kanban-card.cl-dragging {
    opacity: 0.3;
    cursor: grabbing;
}
/* Kanban borders driven by column (status), not priority */
.cl-kanban-card.priority-high,
.cl-kanban-card.priority-medium,
.cl-kanban-card.priority-low {
    border-left-color: #c8c2bb;
}
.cl-kanban-urgent .cl-kanban-card {
    border-left-color: var(--terra) !important;
}
.cl-kanban-done .cl-kanban-card {
    border-left-color: #27ae60 !important;
}
.cl-kanban-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.cl-kanban-kebab {
    margin-left: auto;
    flex-shrink: 0;
}
.cl-kanban-title {
    font-size: 0.79rem;
    color: var(--txt);
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.35;
}
.cl-kanban-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* ── Checklist mobile responsive ── */
@media (max-width: 768px) {
    /* Toolbar */
    .checklist-toolbar {
        flex-wrap: wrap;
        gap: 10px;
    }
    .checklist-search-wrap {
        min-width: 0;
        flex: 1 1 140px;
    }
    .checklist-sort-wrap {
        flex-wrap: wrap;
    }

    /* List view: kebab pinned right */
    .checklist-item {
        padding: 12px 42px 12px 10px;
        position: relative;
    }
    .checklist-item .cl-actions {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

    /* Drag handle — visible on mobile, generous tap target */
    .cl-drag-handle {
        display: flex;
        width: 28px;
        height: 36px;
        color: var(--txt-m);
        opacity: 0.6;
    }
    .cl-drag-handle:active {
        opacity: 1;
        background: var(--cream-d);
    }

    /* Grouped view */
    .cl-group-name {
        min-width: 70px;
        font-size: 0.85rem;
    }
    .cl-group-bar-wrap {
        display: none;
    }

    /* ── Trello-style mobile kanban ── */
    .cl-kanban-tab-bar {
        display: flex;
        border-bottom: 2px solid var(--cream-d);
        margin-bottom: 12px;
        background: #fff;
        border-radius: var(--radius) var(--radius) 0 0;
        overflow: hidden;
    }
    .cl-kanban-tab {
        flex: 1;
        padding: 11px 6px;
        border: none;
        background: transparent;
        font-family: "Jost", sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--txt-l);
        letter-spacing: 0.3px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition:
            color 0.15s,
            border-color 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        white-space: nowrap;
    }
    .cl-kanban-tab.active {
        color: var(--txt);
        border-bottom-color: var(--terra);
    }
    .cl-kanban-tab-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .cl-kanban-tab-dot.todo {
        background: #c8c2bb;
    }
    .cl-kanban-tab-dot.urgent {
        background: var(--terra);
    }
    .cl-kanban-tab-dot.done {
        background: #27ae60;
    }
    .cl-kanban-tab-count {
        background: rgba(44, 32, 22, 0.08);
        padding: 1px 6px;
        border-radius: 10px;
        font-size: 0.62rem;
    }
    .cl-kanban-tab.active .cl-kanban-tab-count {
        background: var(--terra);
        color: #fff;
    }

    /* Horizontal scroll-snap board */
    .cl-kanban {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        height: auto !important;
        min-height: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
        scrollbar-width: none;
    }
    .cl-kanban::-webkit-scrollbar {
        display: none;
    }
    .cl-kanban-col {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        height: auto !important;
    }
    /* Show column header inside each panel (acts as section title while swiping) */
    .cl-kanban-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--cream);
    }
    .cl-kanban-cards {
        max-height: 65vh !important;
        overflow-y: auto;
        flex: unset !important;
    }
}

@media (max-width: 480px) {
    .checklist-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .checklist-filters select {
        flex-shrink: 0;
    }
    .cl-kanban-cards {
        max-height: 58vh !important;
    }
}

/* Budget target */
.budget-target-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 18px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid rgba(44, 32, 22, 0.05);
    box-shadow: var(--shadow-sm);
}
.budget-target-wrap label {
    font-size: 0.64rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 400;
    white-space: nowrap;
}
.budget-target-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.budget-target-input-wrap input {
    width: 120px;
    padding: 6px 10px;
    border: 1px solid rgba(44, 32, 22, 0.1);
    border-radius: var(--radius);
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 500;
    text-align: right;
}
.budget-target-currency {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    color: var(--txt-l);
}
.budget-target-hint {
    font-family: "Jost", sans-serif;
    font-size: 0.6rem;
    color: var(--txt-l);
    font-weight: 300;
    display: block;
    margin-top: 2px;
}
.budget-card-amount.over .budget-target-hint,
.budget-card-estimated .budget-card-amount.over {
    color: var(--terra);
}

/* ══════════════════════════════════════
   PHASE 13 — BUDGET
══════════════════════════════════════ */
.budget-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.budget-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(44, 32, 22, 0.05);
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.budget-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
.budget-card-label {
    font-size: 0.64rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    margin-bottom: 6px;
    font-weight: 400;
}
.budget-card-amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--txt);
}
.budget-card-estimated {
    border-left-color: var(--txt-m);
}
.budget-card-actual {
    border-left-color: var(--terra);
}
.budget-card-paid {
    border-left-color: var(--sage);
}
.budget-card-remaining {
    border-left-color: #d4a84b;
}
.budget-card-remaining .budget-card-amount.over {
    color: var(--terra);
}
.budget-card-remaining .budget-card-amount.under {
    color: var(--sage);
}

/* Budget progress bar */
.budget-bar-wrap {
    margin-bottom: 24px;
}
.budget-bar {
    height: 10px;
    background: var(--cream-d);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}
.budget-bar-paid {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--sage);
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.budget-bar-actual {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--terra-ll);
    border-radius: 5px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.budget-bar-legend {
    display: flex;
    gap: 20px;
    margin-top: 8px;
    font-size: 0.66rem;
    color: var(--txt-l);
}
.budget-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.budget-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.budget-legend-paid {
    background: var(--sage);
}
.budget-legend-actual {
    background: var(--terra-ll);
}
.budget-legend-estimated {
    background: var(--cream-d);
}

/* Budget category breakdown */
.budget-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.budget-cat-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px 16px;
    border: 1px solid rgba(44, 32, 22, 0.05);
    box-shadow: var(--shadow-sm);
}
.budget-cat-name {
    font-size: 0.66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--txt-l);
    margin-bottom: 4px;
}
.budget-cat-amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--txt);
}
.budget-cat-bar {
    height: 3px;
    background: var(--cream-d);
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.budget-cat-bar-fill {
    height: 100%;
    background: var(--terra-l);
    border-radius: 2px;
    transition: width 0.5s;
}

/* Budget table */
.budget-table-wrap {
    overflow-x: auto;
}
#budget-table {
    width: 100%;
    border-collapse: collapse;
}
#budget-table th {
    font-size: 0.58rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--txt-l);
    font-weight: 400;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(44, 32, 22, 0.08);
    text-align: left;
}
#budget-table td {
    padding: 12px 14px;
    font-size: 0.78rem;
    color: var(--txt-m);
    border-bottom: 1px solid rgba(44, 32, 22, 0.04);
    font-weight: 300;
    vertical-align: middle;
}
#budget-table tr:hover td {
    background: rgba(200, 88, 42, 0.02);
}
#budget-table .budget-amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.95rem;
    font-weight: 500;
}
#budget-table .budget-paid-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 500;
}
.budget-paid-badge.paid {
    background: var(--sage-bg);
    color: var(--sage-d);
}
.budget-paid-badge.unpaid {
    background: var(--terra-bg);
    color: var(--terra);
}
.budget-cat-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--cream-d);
    font-size: 0.58rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--txt-l);
}

/* ── Budget enhancements ── */

/* Page header left (title + health badge) */
.page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Health score badge */
.budget-health-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.budget-health-badge.ok {
    background: rgba(74, 122, 90, 0.12);
    color: #3d7040;
}
.budget-health-badge.risk {
    background: rgba(184, 149, 106, 0.18);
    color: #8b6914;
}
.budget-health-badge.over {
    background: rgba(200, 88, 42, 0.12);
    color: #c8582a;
}

/* Section modal divider */
.bm-section-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 14px;
    font-size: 0.64rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
}
.bm-section-divider::before,
.bm-section-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(44, 32, 22, 0.07);
}
.bm-section-divider::before {
    flex: 0 0 0;
}

/* Budget search toolbar */
.budget-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.budget-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 360px;
    background: #fff;
    border: 1px solid rgba(44, 32, 22, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
}
.budget-search-wrap svg {
    color: var(--txt-l);
    flex-shrink: 0;
}
.budget-search-wrap input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--txt);
    width: 100%;
}

/* Sortable column headers */
#budget-table th.sortable {
    cursor: pointer;
    user-select: none;
}
#budget-table th.sortable:hover {
    color: var(--txt);
    background: rgba(44, 32, 22, 0.03);
}
.sort-arrow {
    font-size: 0.7rem;
    color: var(--terra);
    margin-left: 2px;
}

/* Insights row: categories left + upcoming right */
.budget-insights-row {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    margin-bottom: 24px;
    align-items: start;
}
.budget-insights-left .budget-categories {
    margin-bottom: 0;
}

/* Upcoming payments widget */
.budget-upcoming-wrap {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid rgba(44, 32, 22, 0.06);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.budget-upcoming-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 0.64rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    border-bottom: 1px solid rgba(44, 32, 22, 0.06);
}
.budget-upcoming-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(44, 32, 22, 0.04);
    transition: background 0.12s;
}
.budget-upcoming-item:last-child {
    border-bottom: none;
}
.budget-upcoming-item:hover {
    background: var(--cream);
}
.budget-upcoming-item.overdue {
    background: rgba(200, 88, 42, 0.04);
}
.budget-upcoming-item.today {
    background: rgba(184, 149, 106, 0.08);
}
.budget-upcoming-item.soon {
    background: rgba(44, 122, 90, 0.04);
}
.budget-upcoming-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 2px;
}
.budget-upcoming-meta {
    font-size: 0.68rem;
    color: var(--txt-l);
}
.budget-upcoming-amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--txt);
    text-align: right;
}
.budget-upcoming-due {
    font-size: 0.62rem;
    text-align: right;
    margin-top: 1px;
}
.budget-upcoming-due.overdue {
    color: #c8582a;
    font-weight: 600;
}
.budget-upcoming-due.today {
    color: #b8956a;
    font-weight: 600;
}
.budget-upcoming-due.soon {
    color: #4a7a5a;
}
.budget-no-upcoming {
    padding: 24px 16px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--txt-l);
}

/* Category vs actual chart */
.budget-chart-wrap {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid rgba(44, 32, 22, 0.06);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 24px;
}
.budget-chart-title {
    font-size: 0.64rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--txt-l);
    margin-bottom: 16px;
}
.budget-chart-container {
    position: relative;
    height: 220px;
}

/* Due date chip in table */
.budget-due-chip {
    font-size: 0.72rem;
    color: var(--txt-m);
    white-space: nowrap;
}
.budget-due-chip em {
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 500;
    display: block;
    margin-top: 1px;
}
.budget-due-chip.overdue em {
    color: #c8582a;
}
.budget-due-chip.today em {
    color: #b8956a;
}
.budget-due-chip.soon em {
    color: #4a7a5a;
}

/* Deposit badge */
.budget-deposit-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 0.58rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 500;
    margin-right: 4px;
}
.budget-deposit-badge.paid {
    background: rgba(74, 122, 90, 0.1);
    color: #4a7a5a;
}
.budget-deposit-badge.unpaid {
    background: rgba(184, 149, 106, 0.15);
    color: #8b6914;
}

/* Payment cell stacks badges vertically */
.budget-payment-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Actual cost over-budget color */
#budget-table .budget-amount.over {
    color: var(--terra);
}

/* Vendor + name truncation on small screens */
.budget-name-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.budget-vendor-cell {
    max-width: 160px;
}
.budget-vendor-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--txt-m);
}
.budget-vendor-icons {
    display: flex;
    gap: 4px;
    margin-top: 3px;
}
.budget-vendor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    color: var(--txt-l);
    transition:
        background 0.12s,
        color 0.12s;
    text-decoration: none;
}
.budget-vendor-icon:hover {
    background: var(--cream);
    color: var(--terra);
}

/* Kebab link items (for phone/email/website in kebab menu) */
#budget-kebab-menu a.budget-kebab-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border-bottom: 1px solid rgba(44, 24, 16, 0.05);
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: var(--sage-d);
    text-decoration: none;
    transition: background 0.12s;
}
#budget-kebab-menu a.budget-kebab-link:hover {
    background: rgba(143, 168, 135, 0.09);
}

/* Budget kebab menu — portal (same pattern as guest page) */
#budget-kebab-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(44, 24, 16, 0.18);
    min-width: 200px;
    overflow: hidden;
    animation: menuIn 0.12s ease;
}
#budget-kebab-menu button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(44, 24, 16, 0.05);
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--txt2);
    text-align: left;
    transition: background 0.12s;
    appearance: none;
    -webkit-appearance: none;
}
#budget-kebab-menu button:last-child {
    border-bottom: none;
}
#budget-kebab-menu button:hover {
    background: var(--cream);
    color: var(--txt);
}
#budget-kebab-menu button.delete {
    color: #c0392b;
}
#budget-kebab-menu button.delete:hover {
    background: rgba(192, 57, 43, 0.06);
}
.budget-kebab-btn {
    color: var(--txt-l);
}
.budget-kebab-btn:hover {
    background: var(--cream);
    color: var(--txt);
}

/* Responsive */
@media (max-width: 1024px) {
    .budget-insights-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .budget-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    .budget-categories {
        grid-template-columns: 1fr 1fr;
    }
    .budget-toolbar {
        flex-wrap: wrap;
    }
    .budget-search-wrap {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .checklist-filters {
        flex-direction: column;
        align-items: stretch;
    }

    /* ── Budget table → card layout on mobile (same pattern as guest list) ── */
    .budget-table-wrap {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    #budget-table thead {
        display: none;
    }
    #budget-table tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    /* position:relative on card so kebab can be absolutely pinned */
    #budget-table tbody tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 12px 44px 12px 14px; /* right padding reserves space for kebab */
        border-left: 3px solid var(--terra-l);
    }
    #budget-table tbody tr:hover td {
        background: transparent;
    }
    /* Reset all td to borderless flex items */
    #budget-table tbody td {
        padding: 0;
        border: none;
        vertical-align: middle;
        font-size: 0.78rem;
    }
    /* col 1 — category badge */
    #budget-table tbody td:nth-child(1) {
        order: 1;
    }
    /* col 2 — name: full width so financial data wraps below */
    #budget-table tbody td:nth-child(2) {
        order: 2;
        flex: 1 1 100%;
        min-width: 0;
        font-weight: 500;
        font-size: 0.85rem;
        color: var(--txt);
    }
    /* col 3 — vendor: hide name text, but show contact icons if present */
    #budget-table tbody td:nth-child(3) {
        order: 6;
    }
    #budget-table tbody td:nth-child(3) .budget-vendor-name {
        display: none;
    }
    #budget-table tbody td:nth-child(3) .budget-vendor-icons {
        display: flex;
        margin-top: 0;
    }
    /* col 4 — estimated */
    #budget-table tbody td:nth-child(4) {
        order: 3;
        font-size: 0.82rem;
    }
    /* col 5 — actual */
    #budget-table tbody td:nth-child(5) {
        order: 4;
        font-size: 0.82rem;
    }
    /* col 6 — payment badges */
    #budget-table tbody td:nth-child(6) {
        order: 5;
    }
    /* col 7 — due date: hidden (visible in upcoming payments widget above) */
    #budget-table tbody td:nth-child(7) {
        display: none;
    }
    /* col 8 — kebab: absolutely pinned to right edge, vertically centered */
    #budget-table tbody td:nth-child(8) {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        padding: 0;
        border: none;
    }

    /* Remove name truncation inside card — text wraps naturally */
    #budget-table tbody .budget-name-cell {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    /* Payment badges flow horizontally on mobile */
    .budget-payment-cell {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
}
@media (max-width: 480px) {
    .budget-dashboard {
        grid-template-columns: 1fr;
    }
    .budget-categories {
        grid-template-columns: 1fr;
    }
    /* Stack estimated + actual + payment on separate lines */
    #budget-table tbody td:nth-child(4),
    #budget-table tbody td:nth-child(5) {
        font-size: 0.78rem;
    }
}

/* ── BUDGET: Mobile app experience ── */
@media (max-width: 768px) {
    /* Hide desktop-only budget elements */
    #tab-budget .page-header,
    #tab-budget .budget-toolbar,
    #tab-budget .budget-table-wrap,
    #tab-budget .budget-chart-wrap,
    #tab-budget .budget-categories,
    #tab-budget .budget-insights-row {
        display: none !important;
    }

    /* Full-width sections */
    #tab-budget .budget-target-wrap {
        margin: 0 0 8px;
        border-radius: 14px;
        padding: 10px 16px;
    }
    /* Horizontal scroll strip — same as guests-dashboard */
    #tab-budget .budget-dashboard {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 2px 0 14px;
        grid-template-columns: unset !important;
        scrollbar-width: none;
        border-radius: 0;
    }
    #tab-budget .budget-dashboard::-webkit-scrollbar {
        display: none;
    }
    #tab-budget .budget-card {
        flex: 0 0 auto;
        min-width: 130px;
        scroll-snap-align: start;
        padding: 12px 16px;
        border-radius: 14px;
    }
    #tab-budget .budget-bar-wrap {
        margin: 0 0 8px;
        border-radius: 0;
        padding: 10px 16px;
    }
    #tab-budget .budget-upcoming-wrap {
        border-radius: 0;
    }

    /* Quick action buttons */
    .mob-budget-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 0;
    }
    .mob-budget-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 10px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition:
            background 0.15s,
            transform 0.15s;
    }
    .mob-budget-action-btn:active {
        background: rgba(44, 24, 16, 0.03);
        transform: scale(0.97);
    }
    .mob-budget-action-btn svg {
        flex-shrink: 0;
        color: var(--gold, #b8956a);
    }

    /* Budget mobile cards */
    .mob-budget-cards {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0;
    }
    .mob-budget-card {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 14px 40px 14px 14px;
        background: #fff;
        border-radius: 14px;
        border-left: 3px solid var(--terra-l, #c4918a);
        cursor: pointer;
        animation: mobFadeSlideIn 0.3s ease both;
        transition: transform 0.1s;
    }
    .mob-budget-card:active {
        transform: scale(0.985);
    }
    .mob-budget-card.paid {
        opacity: 0.7;
        border-left-color: var(--sage, #6b9b7a);
    }
    .mob-budget-card.over {
        border-left-color: #ef4444;
    }
    .mob-budget-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .mob-budget-cat {
        display: inline-block;
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--terra, #b8735a);
        background: rgba(184, 115, 90, 0.08);
        padding: 2px 8px;
        border-radius: 20px;
    }
    .mob-budget-paid-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sage, #6b9b7a);
        flex-shrink: 0;
    }
    .mob-budget-due {
        font-size: 0.62rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 20px;
        margin-left: auto;
    }
    .mob-budget-due.overdue {
        color: #fff;
        background: #ef4444;
    }
    .mob-budget-due.today {
        color: #fff;
        background: #f59e0b;
    }
    .mob-budget-due.soon {
        color: #92400e;
        background: #fef3c7;
    }
    .mob-budget-card-name {
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        line-height: 1.3;
    }
    .mob-budget-card-amounts {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .mob-budget-amt {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .mob-budget-amt-label {
        font-size: 0.58rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(44, 24, 16, 0.45);
    }
    .mob-budget-amt-val {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        font-variant-numeric: tabular-nums;
    }
    .mob-budget-amt-val.over {
        color: #ef4444;
    }
    .mob-budget-card-vendor {
        font-size: 0.72rem;
        color: rgba(44, 24, 16, 0.5);
    }
    .mob-budget-chevron {
        position: absolute;
        top: 50%;
        right: 14px;
        transform: translateY(-50%);
        color: rgba(44, 24, 16, 0.25);
    }

    /* Detail sheet extras */
    .mob-budget-detail-top {
        margin-bottom: 16px;
    }
    .mob-budget-detail-name {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        line-height: 1.3;
        margin-bottom: 8px;
    }
    .mob-budget-detail-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
    }
    .mob-budget-status-badge {
        font-size: 0.62rem;
        font-weight: 600;
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .mob-budget-status-badge.paid {
        background: var(--sage, #6b9b7a);
    }
    .mob-budget-status-badge.unpaid {
        background: #f59e0b;
    }
    .mob-budget-detail-amounts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 16px;
    }
    .mob-budget-detail-amt {
        background: rgba(44, 24, 16, 0.03);
        border-radius: 12px;
        padding: 12px;
        text-align: center;
    }
    .mob-budget-detail-amt span {
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: rgba(44, 24, 16, 0.45);
        margin-bottom: 4px;
    }
    .mob-budget-detail-amt strong {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
    }
    .mob-budget-detail-amt strong.over {
        color: #ef4444;
    }
    .mob-budget-contact-row {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin: 12px 0;
    }
    .mob-budget-contact-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(184, 149, 106, 0.1);
        color: var(--gold, #b8956a);
        text-decoration: none;
        transition:
            background 0.15s,
            transform 0.15s;
    }
    .mob-budget-contact-btn:active {
        background: rgba(184, 149, 106, 0.2);
        transform: scale(0.92);
    }

    /* Filter chips */
    #mob-budget-status-chips,
    #mob-budget-cat-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    /* Hide mob-budget-list container on desktop (created dynamically) */
    #mob-budget-list {
        display: block !important;
        padding: 0;
    }
}

/* ── VENDORS: Mobile app experience ── */
@media (max-width: 768px) {
    /* Hide desktop-only vendor elements */
    #tab-vendors .page-header,
    #tab-vendors .vd-filters,
    #tab-vendors .vd-kanban-board,
    #tab-vendors .vd-list-view,
    #tab-vendors .vd-kanban-tab-bar,
    #tab-vendors #vd-empty {
        display: none !important;
    }

    /* Dashboard counters — horizontal scroll strip */
    #tab-vendors .guests-dashboard {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 2px 0 14px;
        grid-template-columns: unset !important;
        scrollbar-width: none;
        border-radius: 0;
    }
    #tab-vendors .guests-dashboard::-webkit-scrollbar {
        display: none;
    }
    #tab-vendors .guests-counter {
        flex: 0 0 auto;
        min-width: 130px;
        scroll-snap-align: start;
        padding: 12px 16px;
        border-radius: 14px;
    }

    /* Mobile vendor list container */
    #mob-vd-list {
        display: block !important;
        padding: 0;
    }

    /* Vendor cards */
    .mob-vd-cards {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .mob-vd-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        border-left: 3px solid var(--terra);
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-vd-card:active {
        transform: scale(0.985);
    }
    .mob-vd-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-vd-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mob-vd-status-label {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--txt-m);
    }
    .mob-vd-price {
        margin-left: auto;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--terra);
    }
    .mob-vd-card-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 30px);
    }
    .mob-vd-card-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .mob-vd-cat {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(143, 168, 135, 0.12);
        color: var(--sage, #8fa887);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-vd-contact {
        font-size: 0.72rem;
        color: var(--txt-l, #8b7e74);
    }
    .mob-vd-contract-icon {
        color: var(--gold, #b8956a);
    }
    .mob-vd-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--txt-l, #8b7e74);
        opacity: 0.4;
    }

    /* ── Detail sheet ── */
    .mob-vd-detail-top {
        text-align: center;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
        margin-bottom: 16px;
    }
    .mob-vd-detail-name {
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 8px;
    }
    .mob-vd-detail-badges {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .mob-vd-detail-status {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 10px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.4px;
    }
    .mob-vd-detail-price {
        text-align: center;
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--terra, #c4918a);
        margin: 12px 0;
    }

    /* ── Pipeline chips ── */
    .mob-vd-pipeline {
        margin: 16px 0;
        padding: 14px;
        background: rgba(44, 24, 16, 0.02);
        border-radius: 12px;
    }
    .mob-vd-pipeline-label {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--txt-m);
        margin-bottom: 10px;
    }
    .mob-vd-pipeline-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .mob-vd-pip-chip {
        flex: 1 1 auto;
        min-width: 0;
        padding: 7px 6px;
        border: 2px solid;
        border-radius: 8px;
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        cursor: pointer;
        background: transparent;
        text-align: center;
        transition: all 0.15s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-vd-pip-chip.active {
        transform: scale(1.04);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    .mob-vd-pip-chip:active {
        transform: scale(0.96);
    }

    #mob-vd-detail-content {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    /* Filter chips */
    #mob-vd-status-chips,
    #mob-vd-cat-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    /* Show mob-vd-list container */
    #mob-vd-list {
        display: block !important;
        padding: 0;
    }
}

/* ════════════════════════════════════════════════
   PHASE 14C: GUEST PHOTOS TAB
════════════════════════════════════════════════ */

/* ── Free plan banner ── */
.photos-free-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fef9f0, #fff5e6);
    border: 1px solid rgba(184, 149, 106, 0.25);
    border-radius: 14px;
    margin-bottom: 20px;
}
.photos-free-banner-left strong {
    display: block;
    font-size: 0.85rem;
    color: var(--txt);
    margin-bottom: 4px;
}
.photos-free-banner-left span {
    font-size: 0.78rem;
    color: var(--txt-l);
    line-height: 1.4;
}
.photos-free-banner-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
#photos-free-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--terra);
    white-space: nowrap;
}

/* ── Share panel ── */
.photo-share-card {
    background: #fff;
    border: 1px solid rgba(44, 24, 16, 0.08);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 16px;
}
.photo-share-card h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--txt);
    margin: 0 0 6px;
}
.photo-share-card p {
    font-size: 0.78rem;
    color: var(--txt-l);
    margin: 0 0 14px;
    line-height: 1.5;
}
.photo-share-card h4 {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-m);
    margin: 14px 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.photo-share-hint {
    font-size: 0.72rem;
    color: var(--txt-l);
    margin-top: 10px;
    font-style: italic;
}
.photo-share-link-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.photo-share-link-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(44, 24, 16, 0.15);
    border-radius: 10px;
    font-size: 0.82rem;
    background: #faf7f2;
    color: var(--txt);
    font-family: inherit;
}
.photo-share-link-input:focus { outline: none; }
.photo-share-btn {
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.photo-share-btn-copy {
    background: var(--terra);
    color: #fff;
}
.photo-share-btn-copy:hover { opacity: 0.9; }
.photo-share-btn-open {
    background: var(--cream-dd);
    color: var(--txt);
}
.photo-share-btn-open:hover { background: var(--cream-d); }

/* Share buttons row */
.photo-share-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.photo-share-wa, .photo-share-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid rgba(44, 24, 16, 0.12);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    background: #fff;
    color: var(--txt);
    text-decoration: none;
}
.photo-share-wa:hover, .photo-share-email:hover { background: var(--cream); }
.photo-share-wa svg, .photo-share-email svg { flex-shrink: 0; }

/* Upload & Slideshow panels */
.photo-panel-info {
    background: #fff;
    border: 1px solid rgba(44, 24, 16, 0.08);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}
.photo-panel-info svg {
    margin-bottom: 12px;
    color: var(--terra);
}
.photo-panel-info h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--txt);
    margin: 0 0 8px;
}
.photo-panel-info p {
    font-size: 0.78rem;
    color: var(--txt-l);
    line-height: 1.5;
    margin: 0 0 16px;
}

@media (max-width: 600px) {
    .photos-free-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .photo-share-link-row {
        flex-direction: column;
    }
    .photo-share-link-input { width: 100%; }
    .photo-share-buttons { flex-wrap: wrap; }
}

/* Auto-approve toggle */
.photos-auto-approve {
    margin-bottom: 1.5rem;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
/* Photos quota bar */
.photos-quota-bar {
    margin-bottom: 1.2rem;
    padding: 0.7rem 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.pq-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.pq-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--txt);
}
.pq-badge {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}
.pq-badge.pq-free {
    background: #fef3e4;
    color: #b87a20;
}
.pq-badge.pq-premium {
    background: #e8f5e9;
    color: #2e7d32;
}
.pq-track {
    height: 6px;
    background: var(--cream-dd, #ece3d4);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.pq-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sage, #6b9b7a), #9dc4ad);
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pq-fill.pq-warning {
    background: linear-gradient(90deg, #e8a838, #f0c060);
}
.pq-fill.pq-danger {
    background: linear-gradient(90deg, var(--terra, #c8582a), #d4724c);
}
.pq-hint {
    font-size: 0.7rem;
    color: var(--txt-l, #8b7a68);
    font-weight: 300;
}

/* Photos grid */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.photos-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--txt-l);
}
.photos-empty svg {
    margin-bottom: 1rem;
    opacity: 0.3;
}
.photos-empty p {
    font-size: 0.85rem;
}

/* Photo card */
.photo-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition:
        transform 0.2s,
        box-shadow 0.2s;
    position: relative;
}
.photo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.photo-card-media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--bg-alt, #f5f0ea);
}
.photo-card-media img,
.photo-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-card-video-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-card-status {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
}
.photo-card-status.status-pending {
    background: rgba(230, 168, 23, 0.15);
    color: #c79100;
}
.photo-card-status.status-approved {
    background: rgba(107, 155, 122, 0.15);
    color: var(--sage);
}
.photo-card-status.status-rejected {
    background: rgba(200, 88, 42, 0.15);
    color: var(--terra);
}
.photo-card-info {
    padding: 0.6rem 0.75rem 0.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.photo-card-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.photo-card-moment {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--txt-l);
}
.photo-card-actions {
    display: flex;
    gap: 0.3rem;
    padding: 0 0.75rem 0.6rem;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.2s;
}
.photo-card:hover .photo-card-actions {
    opacity: 1;
}
@media (hover: none) {
    .photo-card-actions {
        opacity: 1;
    }
}
.photo-action-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.photo-action-approve:hover {
    background: var(--sage);
    border-color: var(--sage);
    color: #fff;
}
.photo-action-approve:hover svg {
    stroke: #fff;
}
.photo-action-reject:hover {
    background: #e6a817;
    border-color: #e6a817;
    color: #fff;
}
.photo-action-reject:hover svg {
    stroke: #fff;
}
.photo-action-delete:hover {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
}
.photo-action-delete:hover svg {
    stroke: #fff;
}

/* Photo preview modal */
.photo-preview-modal-inner {
    max-width: 800px;
    width: 95vw;
}
.photo-preview-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.photo-preview-media {
    text-align: center;
    background: #f5f0ea;
    border-radius: 8px;
    padding: 0.5rem;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
}
.photo-preview-meta h3 {
    font-size: 1.1rem;
    font-weight: 500;
}
.photo-preview-date {
    font-size: 0.78rem;
    color: var(--txt-l);
}
.photo-preview-caption {
    font-size: 0.88rem;
    color: var(--txt-m);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    font-style: italic;
}
.photo-preview-details {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--txt-l);
    margin-bottom: 1rem;
}
.moment-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.moment-ceremony {
    background: rgba(107, 155, 122, 0.12);
    color: var(--sage);
}
.moment-reception {
    background: rgba(200, 88, 42, 0.12);
    color: var(--terra);
}
.moment-party {
    background: rgba(168, 120, 200, 0.12);
    color: #7c5a9e;
}
.moment-preparation {
    background: rgba(230, 168, 23, 0.12);
    color: #c79100;
}
.moment-other {
    background: rgba(90, 74, 56, 0.08);
    color: var(--txt-l);
}
.photo-preview-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}
@media (max-width: 480px) {
    .photos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
    }
}

/* ══════════════════════════════════════
   SEATING CHART — Phase 15
══════════════════════════════════════ */

/* Full-page seating chart (like CMS editor) */
#tab-seating.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--cream);
    animation: seatingSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes seatingSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Three-panel layout */
.seating-layout {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    grid-template-rows: auto 1fr;
    flex: 1;
    gap: 0;
    overflow: hidden;
    background: #fff;
}

/* Back button */
.seating-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: rgba(250, 245, 238, 0.5);
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 0 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: inherit;
    transition: color 0.2s;
    width: 100%;
}
.seating-back-btn:hover {
    color: var(--cream);
}
.seating-back-btn svg {
    opacity: 0.6;
    transition:
        transform 0.2s,
        opacity 0.2s;
}
.seating-back-btn:hover svg {
    transform: translateX(-3px);
    opacity: 1;
}

/* LEFT TOOLBAR */
.seating-toolbar {
    grid-row: 1 / -1;
    background: var(--brown);
    color: var(--cream);
    padding: 16px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.seating-toolbar::-webkit-scrollbar {
    width: 3px;
}
.seating-toolbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.seating-toolbar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.seating-toolbar-label {
    font-size: 0.58rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.4);
    font-weight: 300;
}
.seating-toolbar-actions {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    gap: 6px;
}
.seating-toolbar-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 0.68rem;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--cream);
}
.seating-toolbar-actions .btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Shape picker */
.seating-shape-picker {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.shape-btn {
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(250, 245, 238, 0.6);
    cursor: pointer;
    transition: var(--transition);
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shape-btn:hover {
    background: rgba(200, 88, 42, 0.2);
    border-color: var(--terra);
    color: var(--cream);
}
.shape-btn svg {
    width: 22px;
    height: 22px;
}

/* Element picker */
.seating-element-picker {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.element-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: rgba(250, 245, 238, 0.5);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 300;
    padding: 6px 10px;
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
}
.element-btn:hover {
    background: rgba(107, 155, 122, 0.15);
    border-color: var(--sage);
    color: var(--cream);
}

/* Toggles */
.seating-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 300;
    color: rgba(250, 245, 238, 0.6);
    cursor: pointer;
}
.seating-toggle input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}
.seating-toggle input[type="checkbox"]:checked {
    background: var(--terra);
    border-color: var(--terra);
}
.seating-toggle input[type="checkbox"]:checked::after {
    content: "";
    display: block;
    width: 4px;
    height: 7px;
    border: solid var(--cream);
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    margin: 1px 0 0 4px;
}

/* Zoom controls */
.seating-zoom-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.zoom-btn {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: var(--cream);
    font-family: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}
.zoom-btn.zoom-fit {
    width: auto;
    padding: 0 10px;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.zoom-level {
    font-size: 0.68rem;
    color: rgba(250, 245, 238, 0.5);
    min-width: 36px;
    text-align: center;
}

/* Stats */
.seating-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.seating-stat {
    text-align: center;
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
}
.seating-stat-val {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--cream);
}
.seating-stat-val.seating-stat-warn {
    color: var(--terra-l);
}
.seating-stat-lbl {
    font-size: 0.52rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.35);
    font-weight: 200;
}

/* CENTER CANVAS */
.seating-canvas-wrap {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    overflow: hidden;
    background: #fafaf8;
    cursor: grab;
}
.seating-canvas-wrap:active {
    cursor: grabbing;
}
/* Grid is rendered on the canvas div so it zooms/pans with content */

.seating-canvas {
    position: absolute;
    width: 2000px;
    height: 1600px;
    transform-origin: 0 0;
    transition: transform 0.15s ease;
}

/* Table on canvas */
.sc-table {
    position: absolute;
    cursor: move;
    user-select: none;
    transition: box-shadow 0.2s;
    z-index: 2;
}
.sc-table:hover {
    z-index: 5;
}
.sc-table.sc-selected {
    z-index: 10;
}

.sc-table-shape {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brown-l);
    background: #fff;
    box-shadow: 0 2px 8px rgba(44, 32, 22, 0.08);
    transition:
        border-color 0.2s,
        box-shadow 0.2s;
}
.sc-table:hover .sc-table-shape {
    border-color: var(--terra);
    box-shadow: 0 4px 16px rgba(200, 88, 42, 0.15);
}
.sc-table.sc-selected .sc-table-shape {
    border-color: var(--terra);
    box-shadow:
        0 0 0 3px rgba(200, 88, 42, 0.2),
        0 4px 16px rgba(200, 88, 42, 0.15);
}

/* Shape variants */
.sc-table-shape.shape-round {
    border-radius: 50%;
}
.sc-table-shape.shape-rectangular {
    border-radius: 6px;
}
.sc-table-shape.shape-square {
    border-radius: 6px;
}
.sc-table-shape.shape-oval {
    border-radius: 50%;
}
.sc-table-shape.shape-sweetheart {
    border-radius: 50% 50% 6px 6px;
    border-color: var(--terra-l);
    background: rgba(200, 88, 42, 0.04);
}

/* Table label inside shape */
.sc-table-label {
    text-align: center;
    pointer-events: none;
}
.sc-table-name {
    display: block;
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--txt);
    line-height: 1.2;
}
.sc-table-count {
    display: block;
    font-size: 0.56rem;
    font-weight: 300;
    color: var(--txt-l);
    margin-top: 2px;
}
.sc-table-count.full {
    color: var(--sage-d);
    font-weight: 400;
}
.sc-table-count.over {
    color: var(--red);
    font-weight: 500;
}

/* Rotation handle */
.sc-rotate-handle {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--terra);
    border: 2px solid #fff;
    cursor: grab;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sc-rotate-handle svg {
    pointer-events: none;
    flex-shrink: 0;
}
.sc-rotate-handle::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 8px;
    background: var(--terra);
    opacity: 0.4;
}
.sc-rotate-handle:active {
    cursor: grabbing;
}
.sc-table:hover .sc-rotate-handle,
.sc-table.sc-selected .sc-rotate-handle,
.sc-venue-el:hover .sc-rotate-handle,
.sc-venue-el.sc-selected .sc-rotate-handle {
    opacity: 1;
}

/* Resize handle (corner) */
.sc-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--sage);
    border: 1.5px solid #fff;
    border-radius: 2px;
    z-index: 12;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.sc-resize-br {
    bottom: -5px;
    right: -5px;
    cursor: nwse-resize;
}
.sc-venue-el:hover .sc-resize-handle,
.sc-venue-el.sc-selected .sc-resize-handle {
    opacity: 1;
}

/* Chair dots around table */
.sc-chair {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--cream-d);
    border: 1.5px solid var(--cream-dd);
    transition:
        background 0.2s,
        border-color 0.2s,
        transform 0.15s;
}
.sc-chair.occupied {
    background: var(--sage);
    border-color: var(--sage-d);
}
.sc-chair.occupied.has-meal {
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Guest name tags floating near chairs */
.sc-guest-tag {
    position: absolute;
    font-size: 0.5rem;
    font-weight: 300;
    color: var(--txt-m);
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.3px;
}

/* Meal dot on chair */
.sc-meal-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    bottom: -4px;
    right: -4px;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Guest tooltip */
.sc-guest-tooltip {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ede0cc;
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 200px;
    max-width: 300px;
    box-shadow:
        0 8px 24px rgba(60, 46, 31, 0.15),
        0 2px 6px rgba(60, 46, 31, 0.08);
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 12px;
    line-height: 1.5;
}
.sgt-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 16px;
    font-weight: 600;
    color: #3d2e1f;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #f5ede0;
}
.sgt-row {
    padding: 2px 0;
    color: #5a4a38;
}
.sgt-label {
    font-weight: 400;
    color: #8b7a68;
    margin-right: 4px;
}
.sgt-meal-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 2px;
}
.sgt-tag {
    display: inline-block;
    background: #f5ede0;
    color: #6b5a48;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    margin-right: 3px;
}
.sgt-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
}
.sgt-status-confirmed {
    background: rgba(107, 155, 122, 0.15);
    color: #4a7a5a;
}
.sgt-status-declined {
    background: rgba(212, 114, 76, 0.12);
    color: #b85a3a;
}
.sgt-status-pending {
    background: rgba(212, 168, 75, 0.12);
    color: #9b8530;
}

/* Element inline toolbar (color + label) */
.sc-el-toolbar {
    position: absolute;
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #ede0cc;
    border-radius: 8px;
    padding: 5px 8px;
    box-shadow: 0 4px 12px rgba(60, 46, 31, 0.12);
    z-index: 20;
    white-space: nowrap;
}
.sc-el-toolbar-label {
    font-size: 10px;
    color: #8b7a68;
    cursor: pointer;
}
.sc-el-color-input {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #ede0cc;
    border-radius: 4px;
    cursor: pointer;
    background: none;
}
.sc-el-label-input {
    width: 80px;
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid #ede0cc;
    border-radius: 4px;
    outline: none;
    font-family: inherit;
}
.sc-el-label-input:focus {
    border-color: var(--sage);
}

/* Table detail color picker */
.seating-detail-color {
    display: flex;
    align-items: center;
    gap: 8px;
}
.seating-detail-color label {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-m, #8a7a6c);
    font-weight: 600;
}
.seating-detail-color input[type="color"] {
    width: 30px;
    height: 26px;
    padding: 0;
    border: 1.5px solid rgba(44, 32, 22, 0.12);
    border-radius: 8px;
    cursor: pointer;
    background: none;
}

.seating-detail-event {
    display: flex;
    align-items: center;
    gap: 8px;
}
.seating-detail-event label {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-m, #8a7a6c);
    font-weight: 600;
    white-space: nowrap;
}
.seating-detail-event select {
    font-size: 0.72rem;
    padding: 6px 8px;
    border: 1.5px solid rgba(44, 32, 22, 0.12);
    border-radius: 8px;
    background: #fff;
    flex: 1;
    min-width: 0;
    transition: border-color 0.2s;
}
.seating-detail-event select:focus {
    border-color: var(--gold, #b8956a);
    outline: none;
}

/* Household badge in guest panel */
.sg-hh-badge {
    display: inline-block;
    font-size: 11px;
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
}

/* Venue elements */
.sc-venue-el {
    position: absolute;
    cursor: move;
    user-select: none;
    z-index: 1;
}
.sc-venue-el-inner {
    width: 100%;
    height: 100%;
    border: 1.5px dashed rgba(107, 155, 122, 0.4);
    border-radius: 6px;
    background: rgba(107, 155, 122, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.sc-venue-el:hover .sc-venue-el-inner {
    border-color: var(--sage);
    background: rgba(107, 155, 122, 0.1);
}
.sc-venue-el.sc-selected .sc-venue-el-inner {
    border-color: var(--sage);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(107, 155, 122, 0.15);
}
.sc-venue-el-icon {
    font-size: 1.2rem;
    opacity: 0.4;
}
.sc-venue-el-label {
    font-size: 0.54rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--sage-d);
    font-weight: 300;
    opacity: 0.6;
}
.sc-venue-el .sc-el-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    border: none;
    font-size: 0.6rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sc-venue-el:hover .sc-el-delete,
.sc-venue-el.sc-selected .sc-el-delete {
    display: flex;
}

/* Empty state */
.seating-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}
.seating-empty p {
    font-size: 0.82rem;
    color: var(--txt-l);
    font-weight: 300;
}
.seating-empty-hint {
    font-size: 0.68rem !important;
    color: var(--txt-xl) !important;
}

/* RIGHT GUEST PANEL */
.seating-guests-panel {
    grid-row: 1 / -1;
    background: #fff;
    border-left: 1px solid var(--cream-d);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.seating-guests-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--cream-d);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.seating-guests-header h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--txt);
}
.seating-guests-count {
    font-size: 0.62rem;
    color: var(--txt-l);
    font-weight: 300;
}
.seating-guests-search {
    margin: 10px 12px 0;
    padding: 8px 12px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--txt);
    outline: none;
    transition: var(--transition);
    background: var(--cream);
}
.seating-guests-search:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.08);
}
.seating-guests-filters {
    padding: 8px 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.seating-filter-pill {
    padding: 7px 10px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    background: none;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 300;
    color: var(--txt-l);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.seating-filter-pill:hover {
    border-color: var(--terra);
    color: var(--terra);
}
.seating-filter-pill.active {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
}
.seating-filter-tag {
    padding: 7px 8px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 300;
    color: var(--txt-m);
    background: #fff;
    cursor: pointer;
    width: 100%;
}

/* Guest list */
.seating-guests-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.seating-guests-list::-webkit-scrollbar {
    width: 4px;
}
.seating-guests-list::-webkit-scrollbar-thumb {
    background: var(--cream-dd);
    border-radius: 4px;
}

.sg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    cursor: grab;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.sg-item:hover {
    background: var(--terra-bg);
}
.sg-item:active {
    cursor: grabbing;
}
.sg-item.sg-dragging {
    opacity: 0.4;
    background: var(--terra-bg);
}
.sg-item.sg-seated {
    opacity: 0.45;
}
.sg-item.sg-seated .sg-table-badge {
    display: inline;
}

.sg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cream-d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.52rem;
    font-weight: 400;
    color: var(--txt-m);
    flex-shrink: 0;
    letter-spacing: 0.5px;
}
.sg-info {
    flex: 1;
    min-width: 0;
}
.sg-name {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sg-meta {
    font-size: 0.56rem;
    color: var(--txt-l);
    font-weight: 200;
    display: flex;
    gap: 6px;
    align-items: center;
}
.sg-meal-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sg-table-badge {
    display: none;
    font-size: 0.5rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--sage-bg);
    color: var(--sage-d);
    font-weight: 400;
    letter-spacing: 0.5px;
}
.sg-drag-handle {
    color: var(--txt-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s;
}
.sg-item:hover .sg-drag-handle {
    opacity: 1;
}

/* Locate button — shown only on seated guests */
.sg-locate-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--txt-xl);
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition:
        opacity 0.2s,
        color 0.15s;
}
.sg-item:hover .sg-locate-btn {
    opacity: 1;
}
.sg-locate-btn:hover {
    color: var(--terra);
}

/* Flash animation when a table is located */
@keyframes seatingFlash {
    0%,
    100% {
        outline: 2px solid transparent;
        outline-offset: 4px;
    }
    25%,
    75% {
        outline: 2px solid var(--terra);
        outline-offset: 4px;
        filter: brightness(1.15);
    }
}
.sc-locate-flash {
    animation: seatingFlash 1.2s ease;
}

/* TABLE DETAIL PANEL */
.seating-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
}
.seating-detail .mob-sheet-handle {
    display: none;
}
.seating-detail {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 440px;
    max-height: 380px;
    background: #fff;
    border-radius: 10px;
    box-shadow:
        0 8px 40px rgba(44, 32, 22, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: slideUp 0.25s ease;
    display: flex;
    flex-direction: column;
}
.seating-detail-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
.seating-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.06);
}
.seating-detail-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.15rem;
    font-weight: 600;
    border: none;
    outline: none;
    color: var(--txt, #2c1810);
    flex: 1;
}

.seating-detail-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.06);
}
.seating-detail-info label {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-m, #8a7a6c);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}
.seating-detail-info select {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid rgba(44, 32, 22, 0.12);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--txt, #2c1810);
    background: #fff;
    transition: border-color 0.2s;
}
.seating-detail-info select:focus {
    border-color: var(--gold, #b8956a);
    outline: none;
}
.seating-detail-rotation {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.seating-detail-rotation label {
    margin-bottom: 0;
}
.seating-detail-rotation input[type="range"] {
    flex: 1;
    accent-color: var(--gold, #b8956a);
    height: 2px;
}
#sd-rotation-val {
    font-size: 0.62rem;
    color: var(--txt-l, #8b7a68);
    min-width: 32px;
}

.cap-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cap-controls button {
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(44, 32, 22, 0.12);
    border-radius: 8px;
    background: none;
    color: var(--txt, #2c1810);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.cap-controls button:hover {
    background: rgba(184, 149, 106, 0.08);
    border-color: var(--gold, #b8956a);
}
.cap-controls span {
    font-size: 0.82rem;
    font-weight: 500;
    min-width: 24px;
    text-align: center;
}

.seating-detail-guests-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px 8px;
}
.seating-detail-guests-header span {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-m, #8a7a6c);
    font-weight: 600;
}
.seating-detail-count {
    font-weight: 500 !important;
    color: var(--txt-m, #8a7a6c) !important;
}

.seating-detail-guests {
    padding: 0 20px 10px;
    max-height: 120px;
    overflow-y: auto;
}
.sd-guest-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--txt, #2c1810);
    border-bottom: 1px solid rgba(44, 24, 16, 0.04);
}
.sd-guest-row:last-child {
    border-bottom: none;
}
.sd-guest-row .sg-meal-dot {
    margin-left: auto;
}
.sd-guest-remove {
    background: none;
    border: none;
    color: var(--txt-xl, #b0a090);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 4px;
    border-radius: 6px;
    transition: all 0.15s;
}
.sd-guest-remove:hover {
    color: var(--red);
    background: rgba(192, 57, 43, 0.06);
}

.seating-detail-meals {
    padding: 12px 20px;
    border-top: 1px solid rgba(44, 24, 16, 0.06);
}
.seating-detail-meals-title {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--txt-m, #8a7a6c);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}
.seating-meal-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.seating-meal-badge {
    font-size: 0.6rem;
    padding: 3px 10px;
    border-radius: 100px;
    font-weight: 500;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4px;
}

.seating-detail-actions {
    padding: 12px 20px;
    border-top: 1px solid rgba(44, 24, 16, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Drag ghost */
.sc-drag-ghost {
    position: fixed;
    z-index: 9999;
    padding: 6px 14px;
    background: var(--brown);
    color: var(--cream);
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 24px rgba(44, 32, 22, 0.2);
    pointer-events: none;
    white-space: nowrap;
}

/* Drop target highlight */
.sc-table.sc-drop-target .sc-table-shape {
    border-color: var(--sage);
    box-shadow:
        0 0 0 4px rgba(107, 155, 122, 0.2),
        0 4px 16px rgba(107, 155, 122, 0.15);
    background: rgba(107, 155, 122, 0.06);
}

/* Floating mobile back button (hidden on desktop) */
.seating-mob-back {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 60;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brown);
    color: var(--cream);
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(30, 20, 12, 0.35);
    transition:
        transform 0.2s,
        box-shadow 0.2s;
}
.seating-mob-back:active {
    transform: scale(0.92);
}

/* ═══ Event Switcher Bar ═══ */
.seating-event-bar {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #fafaf8;
    border-bottom: 1px solid var(--cream-d);
    min-height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.seating-event-bar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.seb-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--txt-xl);
    font-weight: 300;
    white-space: nowrap;
}
.seb-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}
.seb-tab {
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 0.68rem;
    font-weight: 300;
    border: 1px solid var(--cream-d);
    background: #fff;
    color: var(--txt-m);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: inherit;
}
.seb-tab:hover {
    border-color: var(--sage);
    color: var(--sage-d);
}
.seb-tab.active {
    background: var(--brown);
    color: var(--cream);
    border-color: var(--brown);
    font-weight: 400;
}
.seb-tab-unassigned {
    border-style: dashed;
    opacity: 0.7;
}
.seb-tab-unassigned.active {
    opacity: 1;
    border-style: solid;
}

/* ═══ Auto-Assign Button ═══ */
.seating-autoassign-btn {
    background: linear-gradient(135deg, rgba(212, 168, 75, 0.15), rgba(107, 155, 122, 0.12)) !important;
    border: 1px solid rgba(212, 168, 75, 0.3) !important;
    color: #d4a84b !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
    transition: all 0.25s;
}
.seating-autoassign-btn:hover {
    background: linear-gradient(135deg, rgba(212, 168, 75, 0.25), rgba(107, 155, 122, 0.2)) !important;
    border-color: rgba(212, 168, 75, 0.5) !important;
    box-shadow: 0 2px 12px rgba(212, 168, 75, 0.2);
    transform: translateY(-1px);
}

/* ═══ Auto-Assign Modal ═══ */
.autoassign-modal {
    background: #fff;
    border-radius: 16px;
    width: 560px;
    max-width: 95vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 24px 64px rgba(44, 32, 22, 0.2),
        0 0 0 1px rgba(237, 224, 204, 0.5);
    animation: aaSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes aaSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.aa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--cream-d);
}
.aa-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.aa-header-left svg {
    color: #d4a84b;
}
.aa-header-left h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--brown);
    margin: 0;
}
.aa-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--cream-d);
    color: var(--txt-m);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    font-family: inherit;
}
.aa-close:hover {
    background: var(--cream-dd);
    color: var(--brown);
}

.aa-desc {
    padding: 14px 24px;
    font-size: 0.72rem;
    color: var(--txt-l);
    line-height: 1.55;
    margin: 0;
    background: rgba(212, 168, 75, 0.04);
    border-bottom: 1px solid var(--cream-d);
}

.aa-options {
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    border-bottom: 1px solid var(--cream-d);
}
.aa-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--txt-m);
    cursor: pointer;
}
.aa-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--sage);
    cursor: pointer;
}

.aa-preview {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    max-height: 340px;
}
.aa-preview::-webkit-scrollbar {
    width: 4px;
}
.aa-preview::-webkit-scrollbar-thumb {
    background: var(--cream-dd);
    border-radius: 4px;
}

/* Table assignment cards in preview */
.aa-table-card {
    margin-bottom: 12px;
    border: 1px solid var(--cream-d);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.aa-table-card:hover {
    border-color: var(--sage);
}
.aa-table-card.aa-rejected {
    opacity: 0.4;
}
.aa-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--cream);
    border-bottom: 1px solid var(--cream-d);
}
.aa-table-name {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brown);
}
.aa-table-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.aa-table-count {
    font-size: 0.62rem;
    color: var(--txt-l);
    background: var(--cream-d);
    padding: 2px 8px;
    border-radius: 10px;
}
.aa-table-actions {
    display: flex;
    gap: 4px;
}
.aa-table-accept,
.aa-table-reject {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--cream-d);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
    font-family: inherit;
}
.aa-table-accept:hover {
    background: rgba(107, 155, 122, 0.1);
    border-color: var(--sage);
    color: var(--sage-d);
}
.aa-table-reject:hover {
    background: rgba(212, 114, 76, 0.08);
    border-color: #d4724c;
    color: #d4724c;
}
.aa-table-accept.selected {
    background: var(--sage);
    color: #fff;
    border-color: var(--sage);
}
.aa-table-reject.selected {
    background: #d4724c;
    color: #fff;
    border-color: #d4724c;
}

.aa-guest-list {
    padding: 6px 14px 10px;
}
.aa-guest-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.68rem;
    color: var(--txt-m);
    border-bottom: 1px solid rgba(237, 224, 204, 0.3);
}
.aa-guest-row:last-child {
    border-bottom: none;
}
.aa-guest-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cream-d);
    color: var(--txt-l);
    font-size: 8px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aa-guest-name {
    flex: 1;
}
.aa-guest-tag {
    font-size: 0.56rem;
    background: var(--cream-d);
    color: var(--txt-l);
    padding: 1px 6px;
    border-radius: 8px;
}
.aa-guest-meal {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.aa-guest-hh {
    font-size: 0.56rem;
    color: var(--txt-xl);
}
.aa-new-badge {
    font-size: 0.5rem;
    background: rgba(212, 168, 75, 0.15);
    color: #b8942e;
    padding: 1px 5px;
    border-radius: 6px;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.aa-summary {
    padding: 10px 24px;
    font-size: 0.7rem;
    color: var(--txt-l);
    background: rgba(107, 155, 122, 0.04);
    border-top: 1px solid var(--cream-d);
    line-height: 1.6;
}
.aa-summary strong {
    color: var(--brown);
    font-weight: 500;
}

.aa-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--cream-d);
}
.aa-footer .btn-primary {
    background: linear-gradient(135deg, #d4a84b, #b8942e);
    border-color: #b8942e;
    color: #fff;
}
.aa-footer .btn-primary:hover {
    background: linear-gradient(135deg, #b8942e, #9b7a20);
    box-shadow: 0 4px 16px rgba(212, 168, 75, 0.3);
}

.aa-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--txt-xl);
    font-size: 0.72rem;
}
.aa-empty svg {
    margin-bottom: 8px;
    opacity: 0.3;
}

/* Print styles */
@media print {
    .seating-toolbar,
    .seating-guests-panel,
    .seating-detail,
    .seating-empty,
    .seating-event-bar,
    .sidebar,
    .mob-menu-btn,
    .sidebar-overlay {
        display: none !important;
    }
    .seating-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
        border: none !important;
    }
    .seating-canvas-wrap {
        overflow: visible !important;
        position: static !important;
    }
    .seating-canvas {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Responsive */
@media (max-width: 1100px) {
    .seating-layout {
        grid-template-columns: 180px 1fr 220px;
    }
}
/* ── Canva-style mobile elements: hidden on desktop ── */
.sc-mob-topbar,
.sc-mob-bottombar,
.sc-mob-sheet-overlay {
    display: none;
}
.sd-add-guest-btn {
    display: none;
}

@media (max-width: 900px) {
    /* ── Full-screen app shell ── */
    #tab-seating.active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* ── Hide desktop toolbar + guest panel ── */
    .seating-toolbar {
        display: none !important;
    }
    .seating-guests-panel {
        display: none !important;
    }
    .seating-back-btn {
        display: none;
    }
    .seating-mob-back {
        display: none;
    }

    /* ── Flex order: topbar(0) → layout(1) → bottombar(2) ── */
    .sc-mob-topbar {
        order: 0;
    }
    .seating-layout {
        order: 1;
    }
    .sc-mob-bottombar {
        order: 2;
    }
    .sc-mob-sheet-overlay {
        order: 3;
    }

    /* ── Layout: event bar + canvas only ── */
    .seating-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* ── Event bar: slim horizontal scroll ── */
    .seating-event-bar {
        grid-column: 1;
        grid-row: 1;
        padding: 6px 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none !important;
        -ms-overflow-style: none;
    }
    .seating-event-bar::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* ── Canvas: fills remaining space ── */
    .seating-canvas-wrap {
        grid-column: 1;
        grid-row: 2;
        flex: 1;
        min-height: 0;
        height: auto;
        touch-action: none;
    }

    /* ── Top bar — matches mob-global-appbar ── */
    .sc-mob-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: relative;
        z-index: 10;
        flex-shrink: 0;
        padding: max(14px, env(safe-area-inset-top, 0px)) 16px 14px;
        background: rgba(251, 247, 240, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    }
    .sc-mob-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: rgba(44, 24, 16, 0.04);
        color: var(--txt, #2c1810);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
            background 0.2s,
            transform 0.15s;
        font-family: inherit;
        flex-shrink: 0;
    }
    .sc-mob-btn:active {
        transform: scale(0.9);
        background: rgba(44, 24, 16, 0.1);
    }
    .sc-mob-btn-sm {
        width: 34px;
        height: 34px;
        font-size: 1.1rem;
        font-weight: 600;
    }
    .sc-mob-stats {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 1rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        white-space: nowrap;
        margin-left: auto;
    }
    .sc-mob-zoom {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: 8px;
    }
    #sc-mob-zoom-lvl {
        font-size: 0.65rem;
        color: var(--txt-l, #8b7a68);
        min-width: 30px;
        text-align: center;
    }

    /* ── Bottom tab bar — matches mob-global-nav ── */
    .sc-mob-bottombar {
        display: flex;
        align-items: stretch;
        position: relative;
        z-index: 10;
        flex-shrink: 0;
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(44, 24, 16, 0.06);
        box-shadow: 0 -4px 24px rgba(44, 24, 16, 0.05);
    }
    .sc-mob-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: none;
        background: none;
        color: var(--txt-m, #8a7a6c);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: color 0.2s;
        padding: 8px 2px 4px;
        position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .sc-mob-tab svg {
        transition: transform 0.2s;
    }
    .sc-mob-tab.active {
        color: var(--gold, #b8956a);
    }
    .sc-mob-tab.active svg {
        transform: scale(1.12);
        color: var(--gold, #b8956a);
    }
    .sc-mob-tab.active::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--gold, #b8956a);
    }
    .sc-mob-tab:active {
        opacity: 0.6;
    }

    /* ── Seating sheet overlay (uses global mob-sheet-overlay + mob-sheet) ── */
    .sc-mob-sheet-overlay {
        z-index: 64;
    }
    .sc-mob-sheet-overlay .sc-mob-sheet {
        z-index: 65;
    }

    /* ── Full-height variant (guests + assign) — same sheet, full page ── */
    .sc-mob-sheet.sc-mob-sheet-full {
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    .sc-mob-sheet.sc-mob-sheet-full .mob-sheet-handle {
        display: none;
    }

    /* ── Full-height sheet header (back + title) ── */
    .sc-mob-sheet-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 0 14px;
        margin-bottom: 14px;
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    }
    .sc-mob-sheet-header-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
    }

    /* Shapes grid — 5 buttons in a row */
    .sc-mob-drawer-shapes {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
    .sc-mob-shape {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 4px;
        border: 1.5px solid rgba(44, 32, 22, 0.1);
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.6rem;
        font-weight: 500;
        color: var(--txt-m, #8a7a6c);
        transition: all 0.2s;
    }
    .sc-mob-shape svg {
        width: 28px;
        height: 28px;
        color: var(--txt, #2c1810);
    }
    .sc-mob-shape:active {
        background: rgba(184, 149, 106, 0.08);
        border-color: var(--gold, #b8956a);
        transform: scale(0.95);
    }

    /* Elements grid — 2 columns */
    .sc-mob-drawer-elements {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .sc-mob-el {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 13px 14px;
        border: 1.5px solid rgba(44, 32, 22, 0.1);
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        transition: all 0.2s;
    }
    .sc-mob-el:active {
        background: rgba(184, 149, 106, 0.08);
        border-color: var(--gold, #b8956a);
        transform: scale(0.97);
    }
    .sc-mob-el-icon {
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    /* Guests drawer */
    .sc-mob-drawer-guests {
        margin: -4px -4px 0;
    }
    .sc-mob-drawer-guests .seating-guests-header {
        display: none;
    }
    .sc-mob-drawer-guests .seating-guests-search {
        margin: 0 0 10px;
        width: 100%;
        padding: 11px 14px;
        border: 1.5px solid rgba(44, 32, 22, 0.12);
        border-radius: 12px;
        font-size: 0.82rem;
    }
    .sc-mob-drawer-guests .seating-guests-search:focus {
        border-color: var(--gold, #b8956a);
        outline: none;
    }
    .sc-mob-drawer-guests .seating-guests-filters {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 10px;
        padding: 2px 0;
    }
    .sc-mob-drawer-guests .seating-guests-filters::-webkit-scrollbar {
        display: none;
    }
    .sc-mob-drawer-guests .seating-filter-pill {
        flex: 0 0 auto;
        padding: 7px 14px;
        border-radius: 100px;
        font-size: 0.7rem;
        font-weight: 500;
        border: 1px solid rgba(44, 24, 16, 0.1);
        background: #fff;
        color: var(--txt, #2c1810);
        transition: all 0.2s;
        white-space: nowrap;
    }
    .sc-mob-drawer-guests .seating-filter-pill.active {
        background: var(--gold, #b8956a);
        color: #fff;
        border-color: var(--gold, #b8956a);
    }
    .sc-mob-drawer-guests .seating-filter-tag {
        width: 100%;
    }
    .sc-mob-drawer-guests .seating-guests-list {
        max-height: none;
        overflow-y: visible;
    }

    /* Actions list — matches mob-detail-actions pattern */
    .sc-mob-drawer-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .sc-mob-action {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        border: none;
        border-radius: 14px;
        background: rgba(44, 24, 16, 0.03);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        transition: background 0.15s;
    }
    .sc-mob-action svg {
        color: var(--gold, #b8956a);
        flex-shrink: 0;
    }
    .sc-mob-action:active {
        background: rgba(184, 149, 106, 0.1);
    }

    /* View toggles inside sheet */
    .sc-mob-sheet .seating-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        font-size: 0.78rem;
        color: var(--txt, #2c1810);
    }

    /* ── "+" button in table detail guests header ── */
    .sd-add-guest-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1.5px solid var(--gold, #b8956a);
        background: rgba(184, 149, 106, 0.08);
        color: var(--gold, #b8956a);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        flex-shrink: 0;
    }
    .sd-add-guest-btn:active {
        background: var(--gold, #b8956a);
        color: #fff;
        transform: scale(0.9);
    }

    /* ── Assign-mode drawer ── */
    .sc-mob-assign-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
        margin-bottom: 12px;
    }
    .sc-mob-assign-title {
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
    }
    .sc-mob-assign-title strong {
        color: var(--txt, #2c1810);
        font-weight: 700;
    }
    .sc-mob-assign-count {
        font-size: 0.68rem;
        color: var(--txt-l, #8b7a68);
        font-weight: 400;
    }
    .sc-mob-assign-search {
        width: 100%;
        padding: 11px 14px;
        border: 1.5px solid rgba(44, 32, 22, 0.12);
        border-radius: 12px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        background: #fff;
        margin-bottom: 10px;
        outline: none;
        transition: border-color 0.2s;
    }
    .sc-mob-assign-search:focus {
        border-color: var(--gold, #b8956a);
    }
    .sc-mob-assign-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .sc-mob-assign-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border: none;
        border-radius: 12px;
        background: transparent;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        transition: background 0.15s;
        width: 100%;
    }
    .sc-mob-assign-item:active {
        background: rgba(184, 149, 106, 0.08);
    }
    .sc-mob-assign-info {
        flex: 1;
        min-width: 0;
    }
    .sc-mob-assign-info .sg-name {
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        font-weight: 500;
    }
    .sc-mob-assign-info .sg-meta {
        font-size: 0.62rem;
        color: var(--txt-l, #8b7a68);
    }
    .sc-mob-assign-icon {
        color: var(--gold, #b8956a);
        flex-shrink: 0;
        opacity: 0.4;
    }
    .sc-mob-assign-item:active .sc-mob-assign-icon {
        opacity: 1;
    }
    .sc-mob-assign-empty {
        padding: 30px 16px;
        text-align: center;
        font-size: 0.72rem;
        color: var(--txt-xl);
        font-weight: 200;
    }

    /* ── Detail overlay — matches mob-sheet-overlay ── */
    .seating-detail-overlay {
        position: absolute;
        inset: 0;
        z-index: 64;
        background: transparent;
        display: flex;
        align-items: flex-end;
        pointer-events: none;
    }
    .seating-detail-overlay > .seating-detail {
        pointer-events: auto;
    }
    .seating-detail .mob-sheet-handle {
        display: block;
        margin: 8px auto 4px;
        flex-shrink: 0;
    }
    .seating-detail {
        position: relative;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        bottom: auto;
        left: auto;
        right: auto;
        transform: none;
        border-radius: 20px 20px 0 0;
        overflow: hidden;
        box-shadow: 0 -8px 32px rgba(44, 24, 16, 0.12);
        animation: mobileSheetUp 0.35s cubic-bezier(0.32, 1.2, 0.54, 1);
        display: flex;
        flex-direction: column;
    }
    @keyframes mobileSheetUp {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
    /* Fixed header */
    .seating-detail-header {
        flex-shrink: 0;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    }
    /* Scrollable body */
    .seating-detail-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0;
    }
    .seating-detail-info {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 16px 20px;
    }
    /* Hide rotation on mobile */
    .seating-detail-rotation {
        display: none !important;
    }
    .seating-detail-guests {
        max-height: none;
    }
    /* Fixed footer */
    .seating-detail-actions {
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 2;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(44, 24, 16, 0.06);
    }

    /* ── Touch-friendly rotate + resize + delete handles ── */
    .sc-table.sc-selected .sc-rotate-handle,
    .sc-venue-el.sc-selected .sc-rotate-handle {
        opacity: 1;
        width: 28px;
        height: 28px;
        top: -36px;
    }
    .sc-venue-el.sc-selected .sc-resize-handle {
        opacity: 1;
        width: 20px;
        height: 20px;
    }
    .sc-resize-br {
        bottom: -10px;
        right: -10px;
    }
    .sc-venue-el.sc-selected .sc-el-delete {
        display: flex;
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
        top: -10px;
        right: -10px;
    }

    /* ── Fix toggle text + checkbox for white sheet/detail background ── */
    .sc-mob-sheet .seating-toggle,
    .seating-detail .seating-toggle {
        color: var(--txt-m);
    }
    .sc-mob-sheet .seating-toggle input[type="checkbox"],
    .seating-detail .seating-toggle input[type="checkbox"] {
        border-color: var(--cream-dd);
        background: var(--cream);
    }
    .sc-mob-sheet .seating-toggle input[type="checkbox"]:checked,
    .seating-detail .seating-toggle input[type="checkbox"]:checked {
        background: var(--gold, #b8956a);
        border-color: var(--gold, #b8956a);
    }
}

/* ── Extra small: 480px ── */
@media (max-width: 480px) {
    .sc-mob-drawer-shapes {
        grid-template-columns: repeat(3, 1fr);
    }
    .sc-mob-shape {
        padding: 10px 4px;
    }
    .sc-mob-shape svg {
        width: 24px;
        height: 24px;
    }
    .sc-mob-el {
        font-size: 0.66rem;
        padding: 10px 10px;
    }
    .seating-detail {
        max-height: 55vh;
    }
    .seating-detail-info {
        grid-template-columns: 1fr;
    }
    .sg-item {
        padding: 8px 12px;
        gap: 8px;
    }
    .sg-drag-handle {
        display: none;
    }
    .sg-locate-btn {
        opacity: 1;
    }
    .seating-event-bar {
        gap: 6px;
        padding: 4px 8px;
    }
}

/* ══════════════════════════════════════
   MESSAGES TAB
══════════════════════════════════════ */

/* Dashboard counters — reuse guests pattern */
.msg-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.msg-counter {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--cream-d);
    transition: var(--transition);
}
.msg-counter:hover {
    border-color: var(--champ);
    box-shadow: var(--shadow-sm);
}
.msg-counter .counter-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-counter[data-type="sent"] .counter-icon {
    background: var(--sage-bg);
    color: var(--sage);
}
.msg-counter[data-type="scheduled"] .counter-icon {
    background: var(--champ-bg);
    color: #b8956a;
}
.msg-counter[data-type="draft"] .counter-icon {
    background: rgba(107, 155, 122, 0.06);
    color: var(--txt-m);
}
.msg-counter[data-type="failed"] .counter-icon {
    background: var(--red-bg);
    color: var(--red);
}
.msg-counter .counter-value {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--txt);
}
.msg-counter .counter-label {
    font-size: 0.7rem;
    color: var(--txt-l);
    letter-spacing: 0.5px;
}
.msg-counter .counter-data {
    display: flex;
    flex-direction: column;
}

/* Section titles */
.msg-section-title {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

/* Template cards grid */
.msg-templates-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 36px;
}
.msg-template-card {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.msg-template-card:hover {
    border-color: var(--terra-l);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}
.msg-tpl-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cream), var(--cream-d));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--terra);
    transition: var(--transition);
}
.msg-template-card:hover .msg-tpl-icon {
    background: linear-gradient(135deg, var(--terra), var(--terra-l));
    color: #fff;
}
.msg-tpl-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--txt);
    letter-spacing: 0.3px;
}
.msg-tpl-desc {
    font-size: 0.62rem;
    color: var(--txt-l);
    line-height: 1.3;
}

/* RSVP Reminder Settings */
.msg-reminder-settings {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 32px;
}
.msg-reminder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}
.msg-reminder-desc {
    font-size: 0.75rem;
    color: var(--txt-l);
    margin-top: 4px;
}
.msg-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.msg-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.msg-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--cream-d);
    border-radius: 24px;
    transition: 0.3s;
}
.msg-toggle-slider::before {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.msg-toggle input:checked + .msg-toggle-slider {
    background: var(--sage);
}
.msg-toggle input:checked + .msg-toggle-slider::before {
    transform: translateX(20px);
}
.msg-reminder-options {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cream-d);
}
.msg-reminder-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.msg-reminder-row label {
    font-size: 0.75rem;
    color: var(--txt-m);
}
.msg-reminder-row select {
    padding: 6px 10px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    background: #fff;
}
.msg-reminder-badge {
    font-size: 0.62rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--cream-d);
    color: var(--txt-l);
}
.msg-reminder-badge.active {
    background: var(--sage-bg);
    color: var(--sage);
}

/* WhatsApp section */
.msg-whatsapp-section {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 32px;
}
.msg-whatsapp-section .msg-section-title {
    color: #25d366;
}
.msg-whatsapp-desc {
    font-size: 0.75rem;
    color: var(--txt-l);
    margin-bottom: 16px;
}
.msg-wa-templates {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.msg-wa-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid #e8f5e9;
    border-radius: var(--radius);
    background: #f1f8e9;
    color: #2e7d32;
    font-size: 0.75rem;
    font-family: "Jost", sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.msg-wa-btn:hover {
    background: #c8e6c9;
    border-color: #a5d6a7;
}

/* Message History */
.msg-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.msg-history-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.msg-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.msg-history-item {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--transition);
    cursor: pointer;
}
.msg-history-item:hover {
    border-color: var(--champ);
    box-shadow: var(--shadow-sm);
}
.msg-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.msg-item-icon.email {
    background: var(--terra-bg);
    color: var(--terra);
}
.msg-item-icon.whatsapp {
    background: #e8f5e9;
    color: #25d366;
}
.msg-item-info {
    flex: 1;
    min-width: 0;
}
.msg-item-subject {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-item-meta {
    font-size: 0.65rem;
    color: var(--txt-l);
    margin-top: 2px;
    display: flex;
    gap: 12px;
}
.msg-item-status {
    font-size: 0.58rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}
.msg-item-status.sent {
    background: var(--sage-bg);
    color: var(--sage);
}
.msg-item-status.scheduled {
    background: var(--champ-bg);
    color: #b8956a;
}
.msg-item-status.draft {
    background: var(--cream-d);
    color: var(--txt-l);
}
.msg-item-status.failed {
    background: var(--red-bg);
    color: var(--red);
}
.msg-item-actions {
    display: flex;
    gap: 6px;
}
.msg-item-actions button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--cream-d);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt-l);
    transition: var(--transition);
}
.msg-item-actions button:hover {
    border-color: var(--terra-l);
    color: var(--terra);
}
.msg-item-actions button.delete:hover {
    border-color: var(--red);
    color: var(--red);
}

/* Compose Modal */
.compose-modal {
    max-width: 680px !important;
}
.compose-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.compose-channel {
    display: flex;
    gap: 8px;
    margin-bottom: 4px;
}
.channel-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    background: #fff;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--transition);
    color: var(--txt-m);
}
.channel-btn:hover {
    border-color: var(--terra-l);
}
.channel-btn.active {
    border-color: var(--terra);
    background: var(--terra-bg);
    color: var(--terra);
    font-weight: 500;
}
/* Recipient mode tabs */
.compose-mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    width: fit-content;
}
.compose-mode-tab {
    padding: 6px 16px;
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--txt2);
    transition: all 0.15s;
    letter-spacing: 0.3px;
}
.compose-mode-tab.active {
    background: var(--brown);
    color: var(--cream);
}
.compose-mode-tab:not(.active):hover {
    background: var(--cream);
}

/* Group mode */
.compose-recipients {
    background: var(--cream);
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 12px;
}
.recipient-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.recipient-filters select {
    flex: 1;
    min-width: 120px;
    padding: 8px 10px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    background: #fff;
}
#compose-group-mode .recipient-filters {
    background: var(--cream);
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 10px;
}

/* Individual mode — chips + search */
.compose-guest-search-wrap {
    position: relative;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 6px 8px;
    min-height: 42px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    cursor: text;
    transition: border-color 0.2s;
}
.compose-guest-search-wrap:focus-within {
    border-color: var(--terra);
}
.compose-chips {
    display: contents;
}
.compose-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--terra-bg);
    color: var(--terra);
    border: 1px solid rgba(200, 88, 42, 0.25);
    border-radius: 100px;
    padding: 3px 8px 3px 10px;
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}
.compose-chip button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--terra);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.compose-chip button:hover {
    opacity: 1;
}
.compose-guest-input {
    flex: 1;
    min-width: 160px;
    border: none;
    outline: none;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: var(--txt);
    background: transparent;
    padding: 4px 2px;
}
.compose-guest-input::placeholder {
    color: var(--txt3);
}
.compose-guest-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    box-shadow: 0 4px 20px rgba(44, 24, 16, 0.1);
    z-index: 200;
    max-height: 220px;
    overflow-y: auto;
}
.compose-guest-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background 0.12s;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: var(--txt);
    border-bottom: 1px solid rgba(44, 24, 16, 0.05);
}
.compose-guest-option:last-child {
    border-bottom: none;
}
.compose-guest-option:hover,
.compose-guest-option.highlighted {
    background: var(--cream);
}
.compose-guest-option-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--terra-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--terra);
    flex-shrink: 0;
}
.compose-guest-option-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.compose-guest-option-name {
    font-weight: 500;
}
.compose-guest-option-contact {
    font-size: 0.67rem;
    color: var(--txt3);
}
.compose-guest-no-results {
    padding: 12px;
    text-align: center;
    color: var(--txt3);
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
}

.recipient-count {
    display: block;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--terra);
    font-weight: 500;
}
.compose-variables {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.var-chip {
    font-size: 0.62rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--champ-bg);
    color: #8b7040;
    cursor: pointer;
    border: 1px solid transparent;
    transition: var(--transition);
    font-family: monospace;
}
.var-chip:hover {
    border-color: #b8956a;
    background: var(--champ);
}

/* Responsive — Messages */
@media (max-width: 900px) {
    .msg-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    .msg-templates-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .msg-dashboard {
        grid-template-columns: 1fr 1fr;
    }
    .msg-templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .msg-history-item {
        flex-wrap: wrap;
        gap: 10px;
    }
    .msg-item-meta {
        flex-direction: column;
        gap: 2px;
    }
    .recipient-filters {
        flex-direction: column;
    }
}

/* ══════════════════════════════════════
   REGISTRY & GIFTS TAB (Phase 18)
   Luxury Boutique Catalog aesthetic
══════════════════════════════════════ */

/* Dashboard counters */
.reg-dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.reg-counter {
    background: #fff;
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--cream-d);
    transition: var(--transition);
}
.reg-counter:hover {
    border-color: var(--champ);
    box-shadow: var(--shadow-sm);
}
.reg-counter .counter-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg-counter[data-type="total"] .counter-icon {
    background: var(--champ-bg);
    color: #b8956a;
}
.reg-counter[data-type="purchased"] .counter-icon {
    background: var(--sage-bg);
    color: var(--sage);
}
.reg-counter[data-type="funds"] .counter-icon {
    background: linear-gradient(135deg, rgba(197, 165, 90, 0.12), rgba(197, 165, 90, 0.2));
    color: #c5a55a;
}
.reg-counter[data-type="thanked"] .counter-icon {
    background: var(--terra-bg);
    color: var(--terra);
}
.reg-counter .counter-value {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--txt);
}
.reg-counter .counter-label {
    font-size: 0.7rem;
    color: var(--txt-l);
    letter-spacing: 0.5px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}
.reg-counter .counter-data {
    display: flex;
    flex-direction: column;
}

/* Filters bar */
.reg-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.reg-category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.reg-filters .filter-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.reg-hide-price-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: var(--txt-m);
    cursor: pointer;
}
.reg-hide-price-toggle input {
    width: 14px;
    height: 14px;
    accent-color: var(--terra);
}

/* ── Registry Items Grid ── */
.reg-items {
    min-height: 200px;
}
.reg-items.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}
.reg-items.list-view {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Grid card */
.reg-card {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    cursor: grab;
}
.reg-card:hover {
    border-color: var(--champ);
    box-shadow: 0 8px 30px rgba(44, 32, 22, 0.1);
    transform: translateY(-3px);
}
.reg-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--cream);
    position: relative;
}
.reg-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.reg-card:hover .reg-card-image img {
    transform: scale(1.05);
}
.reg-card-image .reg-no-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cream), var(--cream-d));
    color: var(--txt-xl);
}
.reg-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--txt-m);
    backdrop-filter: blur(6px);
    font-weight: 500;
}
.reg-card-badge.fund {
    color: #8b7040;
}
.reg-card-purchased {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg-card-body {
    padding: 16px;
}
.reg-card-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 4px;
    line-height: 1.3;
}
.reg-card-desc {
    font-size: 0.7rem;
    color: var(--txt-l);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 10px;
}
.reg-card-price {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #c5a55a;
}
.reg-card-price.hidden-price {
    font-size: 0.72rem;
    color: var(--txt-l);
    font-family: "Jost", sans-serif;
    font-weight: 300;
}

/* Fund progress bar */
.reg-fund-progress {
    margin-top: 10px;
}
.reg-fund-bar {
    width: 100%;
    height: 8px;
    background: var(--cream-d);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.reg-fund-fill {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #c5a55a, #d4b96a, #e8d08a);
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.reg-fund-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.reg-fund-stats {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.65rem;
    color: var(--txt-l);
}
.reg-fund-stats strong {
    color: #c5a55a;
    font-weight: 600;
}

/* Card actions */
.reg-card-actions {
    display: flex;
    gap: 4px;
    padding: 0 16px 14px;
}
.reg-card-actions button {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    background: #fff;
    font-size: 0.6rem;
    font-family: "Jost", sans-serif;
    color: var(--txt-l);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.reg-card-actions button:hover {
    border-color: var(--terra-l);
    color: var(--terra);
}
.reg-card-actions button.delete:hover {
    border-color: var(--red);
    color: var(--red);
}
.reg-card-actions button.thanked {
    color: var(--terra);
    border-color: var(--terra-l);
}

/* ── List view variant ── */
.reg-items.list-view .reg-card {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.reg-items.list-view .reg-card-image {
    width: 100px;
    height: 80px;
    flex-shrink: 0;
}
.reg-items.list-view .reg-card-body {
    flex: 1;
    padding: 12px 16px;
}
.reg-items.list-view .reg-card-desc {
    display: none;
}
.reg-items.list-view .reg-card-actions {
    padding: 12px;
    flex-direction: column;
    gap: 4px;
}
.reg-items.list-view .reg-fund-progress {
    margin-top: 6px;
}

/* External link badge */
.reg-external-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    color: var(--sage);
    margin-top: 4px;
    text-decoration: none;
    transition: color 0.2s;
}
.reg-external-link:hover {
    color: var(--sage-d);
}

/* ── Contributions section ── */
.reg-contributions-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--cream-d);
}
.reg-contrib-item {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    transition: var(--transition);
}
.reg-contrib-item:hover {
    border-color: var(--champ);
}
.reg-contrib-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--champ-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Cormorant Garamond", serif;
    font-size: 0.9rem;
    color: #b8956a;
    flex-shrink: 0;
}
.reg-contrib-info {
    flex: 1;
    min-width: 0;
}
.reg-contrib-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--txt);
}
.reg-contrib-meta {
    font-size: 0.65rem;
    color: var(--txt-l);
    margin-top: 1px;
}
.reg-contrib-amount {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #c5a55a;
}
.reg-contrib-thank {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--cream-d);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt-xl);
    transition: var(--transition);
}
.reg-contrib-thank:hover {
    border-color: var(--terra-l);
    color: var(--terra);
}
.reg-contrib-thank.thanked {
    background: var(--terra-bg);
    border-color: var(--terra-l);
    color: var(--terra);
}

/* Contrib kebab menu (portal pattern) */
.contrib-kebab-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: 8px;
    box-shadow: 0 6px 28px rgba(44, 24, 16, 0.18);
    min-width: 220px;
    overflow: hidden;
    animation: menuIn 0.12s ease;
}
.contrib-kebab-menu button,
.contrib-kebab-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(44, 24, 16, 0.05);
    cursor: pointer;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--txt);
    text-align: left;
    text-decoration: none;
    transition: background 0.12s;
    appearance: none;
    -webkit-appearance: none;
}
.contrib-kebab-menu button:last-child,
.contrib-kebab-menu a:last-child {
    border-bottom: none;
}
.contrib-kebab-menu button:hover,
.contrib-kebab-menu a:hover {
    background: var(--cream);
}
.contrib-kebab-menu button.delete {
    color: #c0392b;
}
.contrib-kebab-menu button.delete:hover {
    background: rgba(192, 57, 43, 0.06);
}
.contrib-kebab-btn {
    flex-shrink: 0;
}
.mob-reg-contrib-chevron {
    display: none;
}

/* Contrib modal list */
.reg-contrib-list-modal {
    max-height: 400px;
    overflow-y: auto;
}
#reg-contrib-item-info {
    padding: 16px;
    background: var(--cream);
    border-radius: var(--radius);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
#reg-contrib-item-info img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius);
    object-fit: cover;
}
#reg-contrib-item-info .info-text {
    flex: 1;
}
#reg-contrib-item-info .info-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.1rem;
    font-weight: 500;
}
#reg-contrib-item-info .info-amount {
    font-size: 0.75rem;
    color: #c5a55a;
    font-weight: 500;
}

/* ── Image upload preview ── */
.reg-image-preview {
    width: 100%;
    height: 140px;
    border: 2px dashed var(--cream-d);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--txt-l);
    transition: var(--transition);
    background: var(--cream);
    overflow: hidden;
}
.reg-image-preview:hover {
    border-color: var(--terra-l);
    color: var(--terra);
}
.reg-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reg-image-preview span {
    font-size: 0.7rem;
}

/* Form helpers */
.input-with-unit {
    display: flex;
    gap: 0;
}
.input-with-unit input {
    border-radius: var(--radius) 0 0 var(--radius);
    border-right: none;
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--cream-d);
    font-family: "Jost", sans-serif;
    font-size: 0.8rem;
}
.input-with-unit select,
.input-with-unit .unit-label {
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 10px 12px;
    border: 1px solid var(--cream-d);
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    background: var(--cream);
    color: var(--txt-m);
}
/* toggle labels reuse .gm-toggle-label from guests */

/* Category manager */
.reg-cat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.reg-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--cream);
    border-radius: var(--radius);
}
.reg-cat-item span {
    flex: 1;
    font-size: 0.8rem;
}
.reg-cat-item button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--txt-l);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reg-cat-item button:hover {
    color: var(--red);
    background: var(--red-bg);
}
.reg-cat-add {
    display: flex;
    gap: 8px;
}
.reg-cat-add input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    font-family: "Jost", sans-serif;
    font-size: 0.8rem;
}

/* Public link bar */
/* ── Registry Payment Settings ── */
.reg-payment-settings {
    margin-top: 32px;
    margin-bottom: 32px;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    overflow: hidden;
}
.reg-payment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
}
.reg-payment-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--txt-m);
}
.reg-payment-header-left svg {
    color: var(--terra);
    flex-shrink: 0;
}
.reg-payment-header h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
}
.reg-payment-body {
    border-top: 1px solid var(--cream-d);
    padding: 20px;
}
.reg-payment-desc {
    font-size: 0.75rem;
    color: var(--txt-l);
    margin-bottom: 18px;
    line-height: 1.5;
    padding: 10px 14px;
    background: var(--cream);
    border-radius: 6px;
    border-left: 3px solid var(--terra);
}
.reg-payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.reg-payment-method {
    padding: 14px;
    background: var(--cream);
    border-radius: 8px;
    border: 1px solid var(--cream-d);
}
.reg-payment-full {
    grid-column: 1 / -1;
}
.reg-payment-method-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--txt-m);
    margin-bottom: 10px;
}
.reg-payment-icon {
    font-size: 1rem;
}
.reg-payment-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--cream-d);
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: inherit;
    background: #fff;
    color: var(--txt);
    margin-top: 6px;
    transition: border-color 0.2s;
    resize: vertical;
}
.reg-payment-input:focus {
    outline: none;
    border-color: var(--terra-l);
    box-shadow: 0 0 0 3px rgba(200, 88, 42, 0.06);
}
.reg-payment-save-status {
    font-size: 0.72rem;
    color: var(--sage);
    margin-top: 12px;
    min-height: 18px;
    transition: opacity 0.3s;
}

.reg-public-link {
    margin-bottom: 16px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
}
.reg-public-link-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}
.reg-public-link-inner svg {
    color: var(--terra);
    flex-shrink: 0;
}
.reg-link-label {
    display: block;
    font-size: 0.65rem;
    color: var(--txt-l);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.reg-link-url {
    font-size: 0.8rem;
    color: var(--terra);
    text-decoration: none;
}
.reg-link-url:hover {
    text-decoration: underline;
}
.reg-public-link-inner .btn {
    margin-left: auto;
}

/* Responsive */
@media (max-width: 900px) {
    .reg-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }
    .reg-items.grid-view {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}
@media (max-width: 600px) {
    .reg-dashboard {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .reg-counter {
        padding: 14px 12px;
        min-width: 0;
    }
    .reg-counter .counter-value {
        font-size: 1.4rem;
    }
    .reg-counter .counter-icon {
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }
    .reg-items.grid-view {
        grid-template-columns: 1fr;
    }
    .reg-filters {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Payment settings — single column on mobile */
    .reg-payment-grid {
        grid-template-columns: 1fr;
    }
    .reg-payment-full {
        grid-column: 1;
    }
    .reg-payment-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    /* List view cards — stack vertically on mobile */
    .reg-items.list-view .reg-card {
        flex-direction: column;
    }
    .reg-items.list-view .reg-card-image {
        width: 100%;
        height: 160px;
    }
    .reg-items.list-view .reg-card-actions {
        flex-direction: row;
        padding: 12px 16px;
        justify-content: flex-end;
    }
    /* Public link bar — stack on mobile */
    .reg-public-link-inner {
        flex-wrap: wrap;
        gap: 10px;
    }
    .reg-public-link-inner .btn {
        margin-left: 0;
        width: 100%;
    }
    .reg-link-url {
        word-break: break-all;
    }
}

/* ══════════════════════════════════════
   REGISTRY — Subtabs
══════════════════════════════════════ */
.reg-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--cream-d);
    margin-bottom: 28px;
}
.reg-subtab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-family: "Jost", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--txt-l);
    cursor: pointer;
    transition:
        color 0.2s,
        border-color 0.2s;
    white-space: nowrap;
}
.reg-subtab:hover {
    color: var(--txt-m);
}
.reg-subtab.active {
    color: var(--terra);
    border-bottom-color: var(--terra);
}
.reg-subtab svg {
    flex-shrink: 0;
}
.reg-subtab-badge {
    background: var(--terra);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.reg-subtab-panel {
    display: none;
}
.reg-subtab-panel.active {
    display: block;
}

/* ── Registry Email Form ── */
.reg-email-form {
    padding: 0 24px 24px;
    border-top: 1px solid var(--cream-d);
}
.reg-email-field {
    margin-top: 18px;
}
.reg-email-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--txt-m);
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.reg-email-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.reg-email-chip {
    padding: 3px 10px;
    background: var(--champ-bg);
    color: #8b7040;
    border: 1px solid rgba(197, 165, 90, 0.25);
    border-radius: 20px;
    font-size: 0.68rem;
    font-family: monospace;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
    user-select: none;
}
.reg-email-chip:hover {
    background: rgba(197, 165, 90, 0.2);
    border-color: rgba(197, 165, 90, 0.4);
}
.reg-email-textarea {
    width: 100%;
    min-height: 140px;
    font-family: "Jost", sans-serif;
    font-size: 0.82rem;
    line-height: 1.6;
    resize: vertical;
}
.reg-email-save-status {
    font-size: 0.72rem;
    color: var(--sage);
    min-height: 18px;
    margin-top: 6px;
}
.reg-email-preview-wrap {
    margin-top: 28px;
}
.reg-email-preview-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--txt-m);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.reg-email-preview-hint {
    font-size: 0.7rem;
    color: var(--txt-l);
    margin-bottom: 14px;
    line-height: 1.4;
}
.reg-email-preview-shell {
    border-radius: 10px;
    overflow: hidden;
    box-shadow:
        0 4px 24px rgba(44, 32, 22, 0.1),
        0 1px 4px rgba(44, 32, 22, 0.06);
    background: #fff;
    max-width: 560px;
}
.reg-email-preview-header {
    background: #2c1810;
    padding: 22px 28px;
}
.reg-email-preview-couple {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 300;
    font-family: "Cormorant Garamond", serif;
    color: #fbf7f0;
    letter-spacing: 1px;
}
.reg-email-preview-body {
    padding: 28px 32px;
    font-size: 0.88rem;
    line-height: 1.75;
    color: #2c1810;
    min-height: 80px;
    font-family: Georgia, serif;
}
.reg-email-preview-footer {
    padding: 14px 28px;
    border-top: 1px solid var(--cream-d);
    font-size: 0.68rem;
    color: var(--txt-l);
    text-align: center;
}

/* ── Givers subtab ── */
.reg-givers-header {
    margin-bottom: 20px;
}
.reg-givers-desc {
    font-size: 0.78rem;
    color: var(--txt-l);
    line-height: 1.5;
    padding: 12px 16px;
    background: var(--cream);
    border-radius: var(--radius);
    border-left: 3px solid var(--champ);
    margin: 0;
}

/* ── Export subtab ── */
.reg-export-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
}
.reg-export-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    cursor: pointer;
    transition: var(--transition);
}
.reg-export-card:hover {
    border-color: var(--champ);
    box-shadow: 0 4px 20px rgba(44, 32, 22, 0.07);
    transform: translateY(-1px);
}
.reg-export-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--champ-bg);
    color: #b8956a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.reg-export-info {
    flex: 1;
}
.reg-export-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 3px;
}
.reg-export-desc {
    font-size: 0.72rem;
    color: var(--txt-l);
    line-height: 1.4;
}
.reg-export-arrow {
    color: var(--txt-xl);
    flex-shrink: 0;
    transition:
        transform 0.2s,
        color 0.2s;
}
.reg-export-card:hover .reg-export-arrow {
    transform: translateY(2px);
    color: var(--terra);
}

/* ── Settings subtab ── */
.reg-settings-section {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    overflow: hidden;
}
.reg-settings-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cream-d);
    background: var(--cream);
}
.reg-settings-section-header svg {
    color: var(--terra);
    margin-top: 2px;
    flex-shrink: 0;
}
.reg-settings-section-header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 3px;
    color: var(--txt);
}
.reg-settings-section-header p {
    font-size: 0.72rem;
    color: var(--txt-l);
    margin: 0;
}
.reg-settings-section .reg-payment-grid {
    padding: 20px 24px;
}
.reg-settings-options {
    padding: 16px 24px;
}
.reg-settings-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 12px 0;
}
.reg-settings-toggle input[type="checkbox"] {
    width: 40px;
    height: 22px;
    appearance: none;
    background: var(--cream-d);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.reg-settings-toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}
.reg-settings-toggle input[type="checkbox"]:checked {
    background: var(--terra);
}
.reg-settings-toggle input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}
.reg-settings-toggle-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reg-settings-toggle-content span:first-child {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--txt);
}
.reg-settings-toggle-desc {
    font-size: 0.7rem;
    color: var(--txt-l) !important;
    font-weight: 400 !important;
}

/* Enhanced card — hover overlay actions */
.reg-card-actions {
    opacity: 0;
    transition: opacity 0.2s;
}
.reg-card:hover .reg-card-actions {
    opacity: 1;
}
.reg-items.list-view .reg-card-actions {
    opacity: 1;
}

/* Card image height increase */
.reg-card-image {
    height: 200px;
}

/* Cash fund card gold-left accent */
.reg-card.is-fund {
    border-left: 3px solid #c5a55a;
}

@media (max-width: 600px) {
    .reg-subtabs {
        overflow-x: auto;
        gap: 0;
        -webkit-overflow-scrolling: touch;
    }
    .reg-subtab {
        padding: 10px 14px;
        font-size: 0.72rem;
    }
    .reg-export-card {
        padding: 16px;
    }
}

/* ══════════════════════════════════════
   MODAL — Mobile Responsive (all modals)
══════════════════════════════════════ */
@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end;
    }
    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - env(safe-area-inset-top, 20px) - 12px);
        max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 12px);
        border-radius: var(--radius) var(--radius) 0 0;
        transform: translateY(100%);
    }
    .modal-overlay.open .modal-content {
        transform: translateY(0);
    }
    .modal-header {
        padding: 16px 18px;
    }
    .modal-header h3 {
        font-size: 1.05rem;
    }
    .modal-body {
        padding: 16px 18px;
        gap: 12px;
    }
    .modal-footer {
        padding: 14px 18px;
    }
    .modal-footer .btn {
        flex: 1;
        text-align: center;
    }
    .gm-row {
        flex-direction: column;
        gap: 10px;
    }
    .gm-field input,
    .gm-field select,
    .gm-field textarea {
        font-size: 0.85rem;
        padding: 10px 12px;
    }

    /* compose modal specific */
    .compose-modal {
        max-width: 100% !important;
    }
    .compose-editor {
        min-height: 120px;
    }

    /* registry modals */
    .reg-img-upload-zone {
        padding: 20px;
    }

    /* CSV import modal */
    .csv-mapping-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .modal-content {
        max-height: calc(100vh - env(safe-area-inset-top, 20px) - 8px);
        max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 8px);
    }
    .modal-header {
        padding: 14px 16px;
    }
    .modal-body {
        padding: 14px 16px;
        gap: 10px;
    }
    .modal-footer {
        padding: 12px 16px;
        gap: 8px;
    }
    .modal-footer .btn {
        font-size: 0.78rem;
        padding: 8px 12px;
    }
    .gm-field label {
        font-size: 0.68rem;
    }
    .gm-field input,
    .gm-field select,
    .gm-field textarea {
        font-size: 0.82rem;
        padding: 9px 10px;
    }
}

/* ══════════════════════════════════════
   ANALYTICS DASHBOARD (Phase 19)
══════════════════════════════════════ */

/* Header actions */
.analytics-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.analytics-date-range {
    display: flex;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    overflow: hidden;
}
.analytics-range-btn {
    padding: 6px 14px;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--txt-l);
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}
.analytics-range-btn:hover {
    color: var(--terra);
}
.analytics-range-btn.active {
    background: var(--terra);
    color: #fff;
}

/* Metric Cards */
.analytics-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.analytics-metric-card {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: calc(var(--radius) * 1.5);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.analytics-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.metric-icon svg {
    width: 20px;
    height: 20px;
}
.metric-icon-views {
    background: rgba(143, 168, 135, 0.15);
    color: var(--sage);
}
.metric-icon-unique {
    background: rgba(180, 130, 100, 0.12);
    color: var(--terra);
}
.metric-icon-today {
    background: rgba(197, 165, 90, 0.12);
    color: #c5a55a;
}
.metric-icon-duration {
    background: rgba(107, 89, 75, 0.1);
    color: var(--brown);
}
.metric-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.metric-value {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--txt);
    line-height: 1;
}
.metric-label {
    font-size: 0.68rem;
    color: var(--txt-l);
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Chart Cards */
.analytics-charts-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
/* Prevent Chart.js infinite resize: canvas fills the fixed-height wrapper, not vice-versa */
.chart-wrap canvas,
.budget-chart-container canvas {
    position: absolute;
    inset: 0;
}
.analytics-chart-card {
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: calc(var(--radius) * 1.5);
    padding: 20px 24px;
}
.analytics-chart-card h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 16px;
}
.analytics-chart-wide {
    flex: 2;
    min-width: 0;
}
.analytics-chart-narrow {
    flex: 1;
    min-width: 0;
}
.analytics-chart-half {
    flex: 1;
    min-width: 0;
}

/* RSVP Funnel */
.analytics-funnel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.funnel-step {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.funnel-bar {
    height: 28px;
    background: var(--cream-d);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.funnel-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.funnel-step[data-step="invited"] .funnel-fill {
    background: linear-gradient(90deg, var(--sage), #a3c09b);
}
.funnel-step[data-step="visited"] .funnel-fill {
    background: linear-gradient(90deg, var(--terra), #c4918a);
}
.funnel-step[data-step="rsvp_opened"] .funnel-fill {
    background: linear-gradient(90deg, #c5a55a, #d4ba7a);
}
.funnel-step[data-step="rsvp_submitted"] .funnel-fill {
    background: linear-gradient(90deg, var(--brown), #8a7565);
}
.funnel-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--txt-l);
}
.funnel-label strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    color: var(--txt);
    font-weight: 600;
}

/* Engagement Grid */
.analytics-engagement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.engagement-stat {
    background: var(--cream);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    transition: transform 0.2s;
}
.engagement-stat:hover {
    transform: scale(1.03);
}
.engagement-value {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--terra);
    line-height: 1.1;
}
.engagement-label {
    font-size: 0.65rem;
    color: var(--txt-l);
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Activity Feed */
.analytics-activity-card {
    margin-bottom: 24px;
}
.analytics-activity-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.analytics-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8fa887;
    animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}
.analytics-activity-feed {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.analytics-empty {
    padding: 32px;
    text-align: center;
    color: var(--txt-l);
    font-size: 0.82rem;
    font-weight: 300;
}
.activity-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cream);
    animation: fadeSlideIn 0.3s ease;
}
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.activity-item:last-child {
    border-bottom: none;
}
.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.activity-dot.page_view {
    background: var(--sage);
}
.activity-dot.section_view {
    background: #c5a55a;
}
.activity-dot.rsvp_submit {
    background: var(--terra);
}
.activity-dot.photo_upload {
    background: #9b7bc4;
}
.activity-dot.registry_view {
    background: #c5a55a;
}
.activity-dot.registry_contribute {
    background: var(--brown);
}
.activity-dot.page_exit {
    background: var(--txt-l);
}
.activity-text {
    flex: 1;
    font-size: 0.78rem;
    color: var(--txt);
    font-weight: 300;
}
.activity-text strong {
    font-weight: 500;
}
.activity-time {
    font-size: 0.65rem;
    color: var(--txt-l);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
    .analytics-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    .analytics-charts-row {
        flex-direction: column;
    }
    .analytics-chart-wide,
    .analytics-chart-narrow,
    .analytics-chart-half {
        flex: none;
        width: 100%;
    }
}
@media (max-width: 600px) {
    .analytics-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .analytics-metric-card {
        padding: 14px;
        gap: 12px;
    }
    .metric-value {
        font-size: 1.3rem;
    }
    .metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }
    .analytics-header-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .analytics-date-range {
        justify-content: center;
    }
    .analytics-engagement-grid {
        grid-template-columns: 1fr 1fr;
    }
    .engagement-value {
        font-size: 1.4rem;
    }
}

/* ══════════════════════════════════════
   MESSAGES — Gmail-style layout
   NOTE: use #tab-messages.active so .tab-panel{display:none} is not overridden
══════════════════════════════════════ */

/* Messages: full-screen overlay — same pattern as Plan de Table */
#tab-messages.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 55;
    overflow: hidden;
    padding: 0;
    background: var(--cream);
    animation: msgSlideIn 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes msgSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msgbox-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ════════════════════════════════════════
   MESSAGES SIDEBAR — identical to admin .sidebar / .nav-item style
   Same bg, same nav-item dimensions, same active terra border, same section labels
════════════════════════════════════════ */
.msgbox-sidebar {
    /* Match .sidebar exactly */
    width: 260px;
    flex-shrink: 0;
    background: var(--brown);
    color: var(--cream);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 24px;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.msgbox-sidebar::-webkit-scrollbar {
    width: 3px;
}
.msgbox-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Compose button — styled like admin primary action, terra gradient */
.msgbox-compose-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 12px 16px;
    padding: 11px 20px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--terra), var(--terra-l));
    border: none;
    appearance: none;
    -webkit-appearance: none;
    color: var(--cream);
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(200, 88, 42, 0.3);
    transition: all 0.2s;
    cursor: pointer;
    justify-content: flex-start;
    width: calc(100% - 24px);
}
.msgbox-compose-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(200, 88, 42, 0.4);
}
.msgbox-compose-btn svg {
    flex-shrink: 0;
    opacity: 0.9;
}

/* Section labels — match .nav-section-label exactly */
.msgbox-folder-label {
    font-size: 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.25);
    font-weight: 400;
    padding: 14px 20px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.msgbox-folders {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 0;
}

/* Folder rows — match .nav-item exactly */
.msgbox-folder {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(250, 245, 238, 0.55);
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}
.msgbox-folder:hover {
    color: var(--cream);
    background: rgba(255, 255, 255, 0.04);
}
.msgbox-folder.active {
    color: var(--cream);
    background: rgba(200, 88, 42, 0.1);
    border-left-color: var(--terra);
}
.msgbox-folder svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
    min-width: 18px;
}
.msgbox-folder.active svg {
    opacity: 1;
}
.msgbox-folder > span:nth-child(2) {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Count — right-aligned number, no background — same as admin badge style */
.msgbox-count {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: rgba(250, 245, 238, 0.3);
    min-width: 16px;
    text-align: right;
    background: none;
    padding: 0;
    transition: color 0.2s;
}
.msgbox-folder.active .msgbox-count {
    color: rgba(250, 245, 238, 0.6);
}

/* Sidebar divider — same as admin border-bottom on sidebar-brand */
.msgbox-sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 0;
}

/* Section label inline (for reminder/WA headers) — same as .nav-section-label */
.msgbox-section-label-inline {
    font-family: "Jost", sans-serif;
    font-size: 0.5rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(250, 245, 238, 0.25);
    font-weight: 400;
}

/* Templates collapsible — toggle row matches .nav-item */
.msgbox-templates-section {
    display: flex;
    flex-direction: column;
}

.msgbox-section-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    width: 100%;
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(250, 245, 238, 0.55);
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}
.msgbox-section-toggle:hover {
    color: var(--cream);
    background: rgba(255, 255, 255, 0.04);
}
.msgbox-section-toggle svg:first-child {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
    min-width: 18px;
}

.msgbox-chevron {
    margin-left: auto;
    opacity: 0.4;
    transition: transform 0.25s;
    flex-shrink: 0;
}
.msgbox-section-toggle[aria-expanded="false"] .msgbox-chevron {
    transform: rotate(-90deg);
}

.msgbox-tpl-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    transition: max-height 0.28s ease;
    max-height: 300px;
}
.msgbox-tpl-list.collapsed {
    max-height: 0;
}

/* Template items — sub-nav style, indented, same as nav-item but smaller padding-left */
.msgbox-tpl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 8px 44px;
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(250, 245, 238, 0.45);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}
.msgbox-tpl-item:hover {
    color: var(--cream);
    background: rgba(255, 255, 255, 0.04);
}
.msgbox-tpl-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
    min-width: 14px;
}

/* RSVP Reminder — inset card, same dark treatment as admin card patterns */
.msgbox-reminder-card {
    margin: 6px 12px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius);
    padding: 12px 14px;
}
.msgbox-reminder-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.msgbox-reminder-text {
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    font-weight: 300;
    letter-spacing: 0.3px;
    color: rgba(250, 245, 238, 0.45);
    flex: 1;
    line-height: 1.4;
}
.msgbox-reminder-text.active {
    color: var(--sage);
}

/* Toggle — same style as admin msg-toggle */
.msgbox-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}
.msgbox-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.msgbox-toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.22s;
}
.msgbox-toggle-track::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    left: 3px;
    top: 3px;
    transition:
        transform 0.22s,
        background 0.22s;
}
.msgbox-toggle input:checked + .msgbox-toggle-track {
    background: var(--sage);
}
.msgbox-toggle input:checked + .msgbox-toggle-track::before {
    transform: translateX(16px);
    background: #fff;
}

.msgbox-reminder-days {
    margin-top: 10px;
}
.msgbox-reminder-days select {
    width: 100%;
    padding: 6px 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(250, 245, 238, 0.65);
    font-size: 0.7rem;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.msgbox-reminder-days select:focus {
    border-color: rgba(200, 88, 42, 0.4);
}
.msgbox-reminder-days select option {
    background: var(--brown);
    color: var(--cream);
}

/* WhatsApp — same nav-item rows with green accent */
.msgbox-wa-section {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.msgbox-wa-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    width: 100%;
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: rgba(37, 211, 102, 0.6);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
    border-top: none;
}
.msgbox-wa-chip:hover {
    color: #25d366;
    background: rgba(37, 211, 102, 0.06);
    border-left-color: rgba(37, 211, 102, 0.4);
}
/* Green dot icon replacement for WA chips */
.msgbox-wa-chip::before {
    content: "";
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.25);
    display: block;
    transition: background 0.2s;
}
.msgbox-wa-chip:hover::before {
    background: rgba(37, 211, 102, 0.25);
}

/* ── MAIN PANEL ── */
.msgbox-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cream);
    min-width: 0;
}

/* Gmail-style toolbar */
.msgbox-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.08);
    background: var(--cream);
    flex-shrink: 0;
}
.msgbox-toolbar-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.msgbox-stat-chip {
    font-family: "Jost", sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.msgbox-stat-chip.sent {
    background: rgba(74, 122, 90, 0.1);
    color: #4a7a5a;
}
.msgbox-stat-chip.scheduled {
    background: rgba(184, 149, 106, 0.12);
    color: #8b6a3a;
}
.msgbox-stat-chip.draft {
    background: rgba(44, 24, 16, 0.07);
    color: var(--txt3);
}

/* Check-all */
.msgbox-check-all {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.msgbox-check-all input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.msgbox-checkbox-ui {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid rgba(44, 24, 16, 0.25);
    background: #fff;
    display: inline-block;
    position: relative;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.msgbox-check-all input:checked + .msgbox-checkbox-ui {
    background: var(--brown);
    border-color: var(--brown);
}
.msgbox-check-all input:checked + .msgbox-checkbox-ui::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
.msgbox-check-all:hover .msgbox-checkbox-ui {
    border-color: var(--brown);
}

/* Toolbar icon button */
.msgbox-toolbar-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt3);
    background: transparent;
    transition:
        background 0.15s,
        color 0.15s;
    flex-shrink: 0;
}
.msgbox-toolbar-icon-btn:hover {
    background: rgba(44, 24, 16, 0.07);
    color: var(--txt);
}

/* Search */
.msgbox-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(44, 24, 16, 0.05);
    border: 1px solid rgba(44, 24, 16, 0.1);
    border-radius: 24px;
    padding: 7px 16px;
    flex: 1;
    transition:
        background 0.2s,
        box-shadow 0.2s;
}
.msgbox-search-wrap:focus-within {
    background: #fff;
    box-shadow: 0 2px 12px rgba(44, 24, 16, 0.1);
    border-color: rgba(44, 24, 16, 0.15);
}
.msgbox-search-wrap svg {
    opacity: 0.4;
    flex-shrink: 0;
}
.msgbox-search {
    font-family: "Jost", sans-serif;
    font-size: 0.82rem;
    color: var(--txt);
    background: none;
    border: none;
    outline: none;
    width: 100%;
}
.msgbox-search::placeholder {
    color: var(--txt3);
}

/* Stats chips */
.msgbox-toolbar-stats {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.msgbox-stat-chip {
    font-family: "Jost", sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.msgbox-stat-chip.sent {
    background: rgba(143, 168, 135, 0.18);
    color: #5d9157;
}
.msgbox-stat-chip.scheduled {
    background: rgba(184, 149, 106, 0.18);
    color: #9a7a52;
}
.msgbox-stat-chip.draft {
    background: rgba(196, 145, 138, 0.18);
    color: #a0635c;
}

/* ── BULK ACTIONS BAR ── */
.msgbox-bulk-bar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.1);
    background: #efe8dc;
    flex-shrink: 0;
    animation: msgBulkIn 0.15s ease;
}
.msgbox-bulk-bar.visible {
    display: flex;
}
@keyframes msgBulkIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.msgbox-bulk-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.msgbox-bulk-clear {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--txt2);
    transition: background 0.15s;
}
.msgbox-bulk-clear:hover {
    background: rgba(44, 24, 16, 0.1);
}
.msgbox-bulk-count {
    font-family: "Jost", sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--txt);
}
.msgbox-bulk-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}
.msgbox-bulk-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid rgba(44, 24, 16, 0.2);
    background: #fff;
    color: var(--txt2);
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.msgbox-bulk-btn:hover {
    background: var(--cream);
    border-color: rgba(44, 24, 16, 0.35);
    color: var(--txt);
}
.msgbox-bulk-btn.danger {
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.3);
}
.msgbox-bulk-btn.danger:hover {
    background: rgba(192, 57, 43, 0.06);
    border-color: #c0392b;
}

/* ── MESSAGE LIST ── */
.msgbox-list {
    flex: 1;
    overflow-y: auto;
}

/* Empty state */
.msgbox-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: var(--txt3);
    padding: 40px 20px;
}
.msgbox-empty svg {
    opacity: 0.18;
}
.msgbox-empty p {
    font-family: "Jost", sans-serif;
    font-size: 0.85rem;
    color: var(--txt3);
}
.msgbox-empty-cta {
    padding: 9px 22px;
    border-radius: 100px;
    background: var(--brown);
    color: #fff;
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.2s;
}
.msgbox-empty-cta:hover {
    background: #4a2a1a;
}

/* ── MESSAGE ROWS — True Gmail layout ──
   Structure: [border][check][icon][sender-col][subject — preview][status][date]
*/
.msg-card {
    display: flex;
    align-items: center;
    height: 50px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.07);
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
    animation: msgFadeIn 0.2s ease both;
    background: var(--cream);
}
@keyframes msgFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.msg-card:hover {
    background: #ede4d8;
    box-shadow: inset 3px 0 0 rgba(44, 24, 16, 0.2);
}
.msg-card.active {
    background: #e8d9c4;
}
.msg-card.unread {
    background: #fff;
}
.msg-card.unread:hover {
    background: #f5f5f5;
}

/* Left status color bar */
.msg-card-border {
    width: 3px;
    align-self: stretch;
    flex-shrink: 0;
    border-radius: 0;
}
.msg-card-border.sent {
    background: #8fa887;
}
.msg-card-border.scheduled {
    background: #b8956a;
}
.msg-card-border.draft {
    background: #c4918a;
}
.msg-card-border.failed {
    background: #c0392b;
}

/* Row checkbox */
.msg-card-check {
    padding: 0 6px 0 12px;
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.msg-card-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.msg-card-checkbox-ui {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1.5px solid #999;
    background: #fff;
    display: block;
    position: relative;
    transition:
        border-color 0.15s,
        background 0.15s;
}
.msg-card:hover .msg-card-checkbox-ui {
    border-color: #555;
}
.msg-card-check input:checked + .msg-card-checkbox-ui {
    background: #2c1810;
    border-color: #2c1810;
}
.msg-card-check input:checked + .msg-card-checkbox-ui::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Channel icon — sender avatar circle like Gmail */
.msg-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 4px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: "Jost", sans-serif;
}
.msg-card-icon.email {
    background: #c4918a;
    color: #fff;
}
.msg-card-icon.whatsapp {
    background: #25d366;
    color: #fff;
}

/* ── INNER ROW: sender | subject — preview | status | date ── */
.msg-card-inner {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 0 16px 0 0;
    height: 100%;
    gap: 0;
}

/* Sender column — fixed width like Gmail */
.msg-card-sender {
    width: 155px;
    flex-shrink: 0;
    font-family: "Jost", sans-serif;
    font-size: 0.83rem;
    font-weight: 400;
    color: var(--txt2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}
.msg-card.unread .msg-card-sender {
    font-weight: 700;
    color: #222;
}

/* Subject + preview inline — takes remaining space */
.msg-card-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
}
.msg-card-subject {
    font-family: "Jost", sans-serif;
    font-size: 0.83rem;
    font-weight: 400;
    color: var(--txt2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 200px;
}
.msg-card.unread .msg-card-subject {
    font-weight: 700;
    color: #222;
}
.msg-card-sep {
    color: var(--txt3);
    padding: 0 6px;
    flex-shrink: 0;
    font-size: 0.83rem;
}
.msg-card-preview {
    font-family: "Jost", sans-serif;
    font-size: 0.83rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Right side: status pill + date */
.msg-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-left: 10px;
}
.msg-card-date {
    font-family: "Jost", sans-serif;
    font-size: 0.75rem;
    color: #555;
    white-space: nowrap;
    min-width: 42px;
    text-align: right;
}
.msg-card.unread .msg-card-date {
    font-weight: 700;
    color: #222;
}

.msg-status-pill {
    font-family: "Jost", sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 100px;
    flex-shrink: 0;
}
.msg-status-pill.sent {
    background: rgba(143, 168, 135, 0.2);
    color: #3d7a40;
}
.msg-status-pill.scheduled {
    background: rgba(184, 149, 106, 0.2);
    color: #8a6a35;
}
.msg-status-pill.draft {
    background: rgba(196, 145, 138, 0.2);
    color: #9a4a42;
}
.msg-status-pill.failed {
    background: rgba(192, 57, 43, 0.14);
    color: #c0392b;
}

/* ── DETAIL PANEL ── */
.msgbox-detail {
    width: 0;
    overflow: hidden;
    background: #fff;
    border-left: 1px solid rgba(44, 24, 16, 0.08);
    display: flex;
    flex-direction: column;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    flex-shrink: 0;
}
.msgbox-detail.open {
    width: 420px;
}

/* Toolbar row: back + actions */
.msgbox-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    flex-shrink: 0;
    background: var(--cream);
    gap: 8px;
    flex-wrap: wrap;
}
/* Subject + meta row */
.msgbox-detail-header {
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.07);
    flex-shrink: 0;
    background: #fff;
}
.msgbox-detail-back {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt2);
    background: rgba(44, 24, 16, 0.07);
    transition:
        background 0.2s,
        color 0.2s;
}
.msgbox-detail-back:hover {
    background: rgba(44, 24, 16, 0.13);
    color: var(--txt);
}
.msgbox-detail-subject {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--txt);
    line-height: 1.4;
    margin-bottom: 10px;
    word-break: break-word;
}
.msgbox-detail-info {
    font-family: "Jost", sans-serif;
    font-size: 0.7rem;
    color: var(--txt3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.detail-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(44, 24, 16, 0.055);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 0.67rem;
    font-weight: 500;
}
.msgbox-detail-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.msgbox-detail-btn {
    font-family: "Jost", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 7px;
    border: 1.5px solid;
    transition:
        background 0.18s,
        color 0.18s;
    white-space: nowrap;
}
.msgbox-detail-btn.edit {
    background: transparent;
    color: var(--brown);
    border-color: rgba(44, 24, 16, 0.25);
}
.msgbox-detail-btn.edit:hover {
    background: rgba(44, 24, 16, 0.07);
    border-color: rgba(44, 24, 16, 0.4);
}
.msgbox-detail-btn.danger {
    background: transparent;
    color: #c0392b;
    border-color: rgba(192, 57, 43, 0.3);
}
.msgbox-detail-btn.danger:hover {
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.5);
}
.msgbox-detail-btn.resend {
    background: transparent;
    color: var(--sage);
    border-color: rgba(143, 168, 135, 0.35);
    display: flex;
    align-items: center;
    gap: 5px;
}
.msgbox-detail-btn.resend:hover {
    background: rgba(143, 168, 135, 0.1);
    border-color: rgba(143, 168, 135, 0.6);
}
.msgbox-detail-btn.forward {
    background: transparent;
    color: var(--brown);
    border-color: rgba(44, 24, 16, 0.2);
    display: flex;
    align-items: center;
    gap: 5px;
}
.msgbox-detail-btn.forward:hover {
    background: rgba(44, 24, 16, 0.06);
    border-color: rgba(44, 24, 16, 0.35);
}
.msgbox-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 22px;
    font-family: "Jost", sans-serif;
    font-size: 0.84rem;
    color: var(--txt2);
    line-height: 1.85;
    white-space: pre-wrap;
}
.msg-var-highlight {
    color: var(--terra);
    background: rgba(200, 88, 42, 0.08);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.8em;
    font-family: "Courier New", monospace;
    font-weight: 600;
}

/* ── MOBILE BOTTOM TAB BAR ── */
.msgbox-mobile-tabs {
    display: none;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #1e0f08;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.msgbox-mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: "Jost", sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: rgba(250, 245, 238, 0.55);
    padding: 5px 0;
    transition: color 0.2s;
    /* reset browser button defaults */
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.msgbox-mobile-tab.active {
    color: var(--gold);
}
.msgbox-mobile-tab svg {
    opacity: 0.7;
}
.msgbox-mobile-tab.active svg {
    opacity: 1;
}

/* Mobile sidebar backdrop */
.msgbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
    .msgbox-sidebar {
        width: 220px;
    }
    .msgbox-detail.open {
        width: 360px;
    }
}

@media (max-width: 768px) {
    /* Layout fills the fixed overlay, bottom-tabs are fixed so main scrolls freely */
    .msgbox-layout {
        flex-direction: row;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Sidebar slides in as overlay drawer from left — hidden by default */
    .msgbox-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 210;
        width: 280px;
        max-width: 82vw;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 16px;
        box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
    }
    .msgbox-sidebar.mobile-visible {
        transform: translateX(0);
    }

    /* Main fills full width since sidebar is out of flow */
    .msgbox-main {
        flex: 1;
        min-height: 0;
        min-width: 0;
        background: var(--cream);
        display: flex;
        flex-direction: column;
    }
    .msgbox-list {
        flex: 1;
        overflow-y: auto;
    }

    /* Bottom tab bar — fixed to bottom of the overlay */
    .msgbox-mobile-tabs {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        flex-shrink: 0;
    }
    /* Add padding-bottom to list so content doesn't hide behind tab bar */
    .msgbox-list {
        padding-bottom: 60px;
    }

    .msgbox-check-all {
        display: none;
    }
    .msgbox-toolbar-icon-btn {
        display: none;
    }
    .msgbox-toolbar {
        padding: 10px 12px;
        gap: 6px;
        flex-shrink: 0;
        flex-wrap: wrap;
    }
    .msgbox-search-wrap {
        border-radius: 20px;
        flex: 1 1 100%;
        order: 1;
    }
    .msgbox-toolbar-stats {
        display: flex;
        order: 2;
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        padding-top: 2px;
    }

    /* Bulk bar on mobile */
    .msgbox-bulk-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .msgbox-bulk-actions {
        flex-wrap: wrap;
        margin-left: 0;
    }

    /* Detail pane goes full-screen on mobile */
    .msgbox-detail.open {
        position: fixed;
        inset: 0;
        width: 100% !important;
        z-index: 205;
        border: none;
    }
    .msgbox-detail-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .msgbox-detail-actions {
        flex-wrap: wrap;
        gap: 5px;
    }
    .msgbox-detail-btn {
        font-size: 0.68rem;
        padding: 5px 10px;
    }
    .msgbox-detail-header {
        padding: 14px 16px 12px;
    }
    .msgbox-detail-subject {
        font-size: 1.05rem;
    }
    .msgbox-detail-body {
        padding: 16px;
    }

    /* Message rows: tighten layout */
    .msg-card {
        height: auto;
        min-height: 52px;
        padding: 8px 12px;
    }
    .msg-card-border {
        width: 3px;
    }
    .msg-card-sender {
        width: 90px;
        font-size: 0.75rem;
    }
    .msg-card-subject {
        font-size: 0.78rem;
        max-width: 140px;
    }
    .msg-card-preview {
        font-size: 0.74rem;
    }
    .msg-card-right {
        gap: 6px;
    }
    .msg-status-pill {
        display: none;
    } /* hide on mobile — shown in detail */
    .msg-card-date {
        font-size: 0.7rem;
        min-width: 36px;
    }
}

@media (max-width: 480px) {
    .msgbox-compose-btn {
        font-size: 0.75rem;
        padding: 11px 16px;
    }
    .msgbox-detail-subject {
        font-size: 1rem;
    }
    .msg-card-preview {
        display: none;
    }
    .msg-card-subject {
        max-width: 200px;
    }
}

/* ═══════════════════════════════════════════
   Guest Notes Icon (FEATURE 2)
═══════════════════════════════════════════ */
.guest-note-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 5px;
    opacity: 0.5;
    cursor: help;
    vertical-align: middle;
    color: var(--terra);
}
.guest-note-icon:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   Event Headcount Badge (FEATURE 3)
═══════════════════════════════════════════ */
.event-headcount-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    margin-right: 6px;
}
.hc-yes {
    color: #4a7a5a;
    font-weight: 600;
    font-size: 0.75rem;
}
.hc-no {
    color: #c4918a;
    font-weight: 600;
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════
   RSVP Answers Dashboard (FEATURE 5)
═══════════════════════════════════════════ */
.answer-card {
    background: var(--cream);
    border: 1px solid var(--cream-d);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
}
.answer-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}
.answer-q-text {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--txt);
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.answer-count-badge {
    font-size: 0.6rem;
    background: rgba(184, 149, 106, 0.15);
    color: var(--terra);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.answer-empty {
    font-size: 0.72rem;
    color: var(--txt-l);
    font-style: italic;
}
.answer-tally {
    margin-bottom: 10px;
}
.answer-tally-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.answer-tally-label {
    font-size: 0.72rem;
    color: var(--txt);
    width: 120px;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.answer-tally-bar {
    flex: 1;
    min-width: 40px;
    height: 6px;
    background: var(--cream-d);
    border-radius: 3px;
    overflow: hidden;
}
.answer-tally-fill {
    height: 100%;
    background: var(--terra);
    border-radius: 3px;
    transition: width 0.4s;
}
.answer-tally-count {
    font-size: 0.65rem;
    color: var(--txt-l);
    width: 60px;
    text-align: right;
    flex-shrink: 0;
}
.answer-list {
    border-top: 1px solid var(--cream-d);
    padding-top: 8px;
}
.answer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--cream-d);
    gap: 8px;
}
.answer-guest {
    font-size: 0.72rem;
    color: var(--txt-m);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.answer-val {
    font-size: 0.72rem;
    color: var(--txt);
    font-weight: 500;
    text-align: right;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── Answers: mobile ── */
@media (max-width: 480px) {
    .answer-card {
        padding: 12px;
    }
    .answer-card-header {
        flex-wrap: wrap;
    }
    .answer-tally-label {
        width: 80px;
        font-size: 0.65rem;
    }
    .answer-tally-count {
        width: 50px;
        font-size: 0.6rem;
    }
    .answer-row {
        flex-wrap: wrap;
        gap: 2px;
    }
    .answer-guest {
        flex: 1 1 100%;
    }
    .answer-val {
        flex: 1 1 100%;
        text-align: left;
        max-width: 100%;
        font-size: 0.68rem;
        color: var(--terra);
    }
}

/* ─── Guest address fields in modal ─── */
.ob-form-section-label {
    font-size: 0.55rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--txt3);
    margin-top: 12px;
    margin-bottom: 8px;
}
.ob-form-row {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   ENVELOPE PREVIEW — Card Studio
═══════════════════════════════════════════════════════════════ */
.fp-envelope-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 20px;
}
.fp-env-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.fp-env-wrapper {
    position: relative;
    width: 360px;
    height: 260px;
    filter: drop-shadow(0 8px 24px rgba(58, 42, 28, 0.18)) drop-shadow(0 2px 6px rgba(58, 42, 28, 0.1));
    perspective: 800px;
    cursor: pointer;
}
.fp-env-body {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f9d8cc;
    border-radius: 4px 4px 6px 6px;
    overflow: visible;
}
/* Left V-shape */
.fp-env-left-v {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 130px 0 0 180px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.06);
}
/* Right V-shape */
.fp-env-right-v {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 130px 180px 0 0;
    border-color: transparent rgba(0, 0, 0, 0.06) transparent transparent;
}
/* Bottom V-shape (center fold line) */
.fp-env-bottom-v {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: rgba(0, 0, 0, 0.04);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
/* Top flap */
.fp-env-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 130px;
    background: #edab94;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    display: flex;
    align-items: 30%;
    justify-content: center;
    transform-origin: top center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.fp-env-flap.open {
    transform: rotateX(180deg);
}
.fp-env-monogram {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    color: rgba(80, 40, 20, 0.75);
    white-space: nowrap;
    pointer-events: none;
}
.fp-env-hint {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.78rem;
    color: rgba(58, 42, 28, 0.45);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.4s ease;
    margin-top: 8px;
}
.fp-env-preview-btn {
    font-size: 0.78rem;
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fp-env-share-btn {
    font-size: 0.78rem;
}
/* Envelope settings swatches */
.fp-env-color-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.fp-env-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition:
        transform 0.15s,
        border-color 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.fp-env-swatch:hover {
    transform: scale(1.1);
}
.fp-env-swatch.active {
    border-color: var(--brown);
    transform: scale(1.15);
}
.fp-env-custom-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px dashed rgba(58, 42, 28, 0.3);
    color: rgba(58, 42, 28, 0.5);
    position: relative;
    overflow: visible;
}
.fp-env-custom-color input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    /* Keep element in DOM at correct position so OS picker opens near the button */
}

/* ══════════════════════════════════════
   CARD STUDIO — ENVELOPE TAB
══════════════════════════════════════ */

/* Live badge (green dot + label) shown above envelope preview */
.fp-env-live-badge,
.fp-envoi-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(58, 42, 28, 0.5);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    padding: 3px 10px 3px 6px;
    margin-bottom: 10px;
}

/* Envelope tab: flex column containing badge + scene */
.fp-envelope-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 24px 20px 16px;
    gap: 0;
}

/* Wrapper for envelope + rising card (overflow visible to allow card rise) */
.fp-env-scene {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
}

/* Card that slides up out of the envelope */
.fp-env-card-inside {
    width: 200px;
    height: 80px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(58, 42, 28, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(40px);
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.4s ease;
    z-index: 1;
    position: relative;
    margin-bottom: -12px; /* sits just above envelope edge */
    pointer-events: none;
}
.fp-env-card-inside.rising {
    opacity: 1;
    transform: translateY(-72px);
    z-index: 15;
}
.fp-env-card-inner {
    text-align: center;
    padding: 10px 16px;
}
.fp-env-card-names {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.9rem;
    color: var(--brown);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.fp-env-card-line {
    width: 40px;
    height: 1px;
    background: var(--terra-ll);
    margin: 0 auto 4px;
}
.fp-env-card-date {
    font-size: 0.6rem;
    color: var(--txt-l);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════
   CARD STUDIO — ENVOI (SEND) TAB
══════════════════════════════════════ */

/* ── Envoi: sizing tokens (override per breakpoint) ── */
:root {
    --envoi-card-scale: 0.9;
    --envoi-card-w: 306px; /* 340 × 0.9 */
    --envoi-card-h: 432px; /* 480 × 0.9 */
    --envoi-env-w: 400px;
    --envoi-env-h: 280px;
    --envoi-stage-w: 440px;
    --envoi-stage-h: 580px;
    --envoi-scene-bottom: 70px;
    --envoi-scene-hidden: 220px; /* initial translateY to hide card in envelope */
}
@media (max-width: 960px) {
    :root {
        --envoi-card-scale: 0.78;
        --envoi-card-w: 265px;
        --envoi-card-h: 374px;
        --envoi-env-w: 330px;
        --envoi-env-h: 232px;
        --envoi-stage-w: 360px;
        --envoi-stage-h: 490px;
        --envoi-scene-bottom: 60px;
        --envoi-scene-hidden: 180px;
    }
}
@media (max-width: 700px) {
    :root {
        --envoi-card-scale: 0.62;
        --envoi-card-w: 211px;
        --envoi-card-h: 298px;
        --envoi-env-w: 260px;
        --envoi-env-h: 183px;
        --envoi-stage-w: 290px;
        --envoi-stage-h: 390px;
        --envoi-scene-bottom: 48px;
        --envoi-scene-hidden: 145px;
    }
}

/* Outer container */
.fp-envoi-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 16px 0 28px;
    gap: 12px;
    margin: auto;
}

/* ── Stage ── */
.fp-envoi-stage {
    position: relative;
    width: var(--envoi-stage-w);
    height: var(--envoi-stage-h);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* ── Envelope body ── */
.fp-envoi-envelope {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: var(--envoi-env-w);
    height: var(--envoi-env-h);
    background: #f9d8cc;
    border-radius: 4px 4px 8px 8px;
    z-index: 10;
    filter: drop-shadow(0 10px 30px rgba(58, 42, 28, 0.22));
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    cursor: pointer;
}
.fp-envoi-envelope.done {
    opacity: 0;
    transform: translateX(-50%) translateY(28px) scale(0.94);
    pointer-events: none;
}
@keyframes envWiggle {
    0%,
    100% {
        transform: translateX(-50%) rotate(0deg) translateY(0);
    }
    18% {
        transform: translateX(-50%) rotate(-2deg) translateY(-4px);
    }
    36% {
        transform: translateX(-50%) rotate(2deg) translateY(-6px);
    }
    54% {
        transform: translateX(-50%) rotate(-1.2deg) translateY(-3px);
    }
    72% {
        transform: translateX(-50%) rotate(1.5deg) translateY(-5px);
    }
    90% {
        transform: translateX(-50%) rotate(-0.8deg) translateY(-2px);
    }
}
.fp-envoi-envelope.wiggle {
    animation: envWiggle 2s ease-in-out infinite;
}

/* Fold shapes — sized relative to envelope */
.fp-envoi-env-left-v {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--envoi-env-h) * 0.5) 0 0 calc(var(--envoi-env-w) * 0.5);
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.06);
}
.fp-envoi-env-right-v {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(var(--envoi-env-h) * 0.5) calc(var(--envoi-env-w) * 0.5) 0 0;
    border-color: transparent rgba(0, 0, 0, 0.06) transparent transparent;
}
.fp-envoi-env-bottom-v {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--envoi-env-h) * 0.5);
    background: rgba(0, 0, 0, 0.04);
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
/* Flap */
.fp-envoi-env-flap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--envoi-env-h) * 0.52);
    background: #edab94;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    transform-origin: top center;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    perspective: 800px;
}
.fp-envoi-env-flap.open {
    transform: rotateX(180deg);
}
.fp-envoi-env-mono {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(0.85rem, 1.1vw, 1.2rem);
    letter-spacing: 0.12em;
    color: rgba(80, 40, 20, 0.7);
    white-space: nowrap;
    pointer-events: none;
}

/* Hint text */
.fp-envoi-hint {
    font-family: "Cormorant Garamond", serif;
    font-size: 0.82rem;
    color: rgba(58, 42, 28, 0.45);
    letter-spacing: 0.06em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.fp-envoi-hint.visible {
    opacity: 1;
}

/* ── Card scene ── */
.fp-envoi-card-scene {
    position: absolute;
    bottom: var(--envoi-scene-bottom);
    left: 50%;
    transform: translateX(-50%) translateY(var(--envoi-scene-hidden));
    opacity: 0;
    z-index: 5;
    transition:
        transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.55s ease;
}
.fp-envoi-card-scene.risen {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    z-index: 20;
}

/* 3D flipper */
.fp-envoi-card-flipper {
    width: var(--envoi-card-w);
    height: var(--envoi-card-h);
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    perspective: 1400px;
}
.fp-envoi-card-flipper.flipped {
    transform: rotateY(180deg);
}

.fp-envoi-card-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 4px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow:
        0 16px 50px rgba(58, 42, 28, 0.3),
        0 4px 14px rgba(58, 42, 28, 0.14);
}
.fp-envoi-face-back {
    transform: rotateY(180deg);
}

/* Cloned card: scaled to match flipper dimensions */
.fp-envoi-card-face .qr-invitation-card {
    transform-origin: top left !important;
    transform: scale(var(--envoi-card-scale)) !important;
    width: 340px !important;
    min-height: 480px !important;
    zoom: unset !important;
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
    pointer-events: none !important;
}

/* Flip button */
.fp-envoi-flip-btn {
    position: absolute;
    bottom: -42px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--brown);
    color: var(--cream);
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.74rem;
    font-family: inherit;
    letter-spacing: 0.06em;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity 0.4s ease,
        background 0.15s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(44, 32, 22, 0.22);
}
.fp-envoi-flip-btn:hover {
    background: var(--brown-l);
}
.fp-envoi-flip-btn.visible {
    opacity: 1;
}

/* Envoi 4th tab button — subtle send icon tint */
.fp-envoi-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.fp-envoi-tab svg {
    opacity: 0.75;
    flex-shrink: 0;
}

/* ══════════════════════════════════════
   CARD STUDIO — ENVOI RIGHT PANEL
══════════════════════════════════════ */

/* Green success banner at top of envoi settings */
.fp-env-success-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}
.fp-env-success-banner svg {
    flex-shrink: 0;
    color: #16a34a;
    margin-top: 1px;
}
.fp-env-success-banner strong {
    display: block;
    font-size: 0.82rem;
    color: var(--brown);
    margin-bottom: 2px;
}
.fp-env-success-banner span {
    font-size: 0.72rem;
    color: var(--txt-m);
    opacity: 0.7;
}

/* Share buttons block */
.fp-env-share-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

/* Individual share button base */
.fp-env-share-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    border-radius: 8px;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        opacity 0.15s;
    border: none;
    cursor: pointer;
    letter-spacing: 0.02em;
}
.fp-env-share-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(58, 42, 28, 0.15);
}
.fp-env-share-btn:active {
    transform: translateY(0);
}

/* WhatsApp — green */
.fp-env-share-whatsapp {
    background: #25d366;
    color: #fff;
}
.fp-env-share-whatsapp:hover {
    background: #1ebe5d;
}

/* Email — terra brand */
.fp-env-share-email {
    background: var(--terra);
    color: #fff;
}
.fp-env-share-email:hover {
    background: var(--terra-l);
}

/* Copy — outlined */
.fp-env-share-copy {
    background: transparent;
    color: var(--brown);
    border: 1.5px solid rgba(58, 42, 28, 0.2);
}
.fp-env-share-copy:hover {
    background: rgba(58, 42, 28, 0.04);
    border-color: rgba(58, 42, 28, 0.4);
}

/* "Ouvrir dans un nouvel onglet" link */
.fp-env-open-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    color: var(--txt-l);
    text-decoration: none;
    border-bottom: 1px solid rgba(58, 42, 28, 0.15);
    padding-bottom: 1px;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.fp-env-open-link:hover {
    color: var(--terra);
    border-color: var(--terra);
}

/* ═══════════════════════════════════════════════════════
   PHASE 22 — VENDOR CRM (Prestataires)
═══════════════════════════════════════════════════════ */

:root {
    --vd-prospect: #6b7280;
    --vd-contacted: #b8956a;
    --vd-booked: #8fa887;
    --vd-signed: #c4918a;
    --vd-paid: #4a7c59;
}

/* Stats row: reuses .guests-dashboard + .guests-counter from guest tab */

/* ── Filters ── */
.vd-filters {
    margin-bottom: 20px;
}

/* ── View toggle ── */
.vd-view-btn {
    gap: 6px;
}
.vd-view-btn.active {
    background: var(--terra);
    color: #fff;
    border-color: var(--terra);
}

/* ── Kanban board ── */
.vd-kanban-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    height: calc(100vh - 400px);
    min-height: 380px;
    align-items: stretch;
}
.vd-kanban-col {
    background: var(--cream);
    border: 1px solid rgba(44, 32, 22, 0.07);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
}
.vd-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid rgba(44, 32, 22, 0.07);
}
.vd-col-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vd-col-count {
    margin-left: auto;
    background: rgba(44, 32, 22, 0.08);
    color: var(--txt-m);
    font-size: 0.64rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.vd-col-prospect {
    color: var(--vd-prospect);
}
.vd-col-prospect .vd-col-dot {
    background: var(--vd-prospect);
}
.vd-col-contacted {
    color: var(--vd-contacted);
}
.vd-col-contacted .vd-col-dot {
    background: var(--vd-contacted);
}
.vd-col-booked {
    color: var(--vd-booked);
}
.vd-col-booked .vd-col-dot {
    background: var(--vd-booked);
}
.vd-col-signed {
    color: var(--vd-signed);
}
.vd-col-signed .vd-col-dot {
    background: var(--vd-signed);
}
.vd-col-paid {
    color: var(--vd-paid);
}
.vd-col-paid .vd-col-dot {
    background: var(--vd-paid);
}

.vd-col-cards {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    min-height: 80px;
    scrollbar-width: thin;
    scrollbar-color: var(--cream-dd) transparent;
}
.vd-col-cards::-webkit-scrollbar {
    width: 4px;
}
.vd-col-cards::-webkit-scrollbar-thumb {
    background: var(--cream-dd);
    border-radius: 2px;
}
.vd-col-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: none;
    border: none;
    border-top: 1px solid rgba(44, 32, 22, 0.07);
    color: var(--txt-l);
    font-size: 12px;
    cursor: pointer;
    transition:
        background 0.15s,
        color 0.15s;
    width: 100%;
}
.vd-col-add:hover {
    background: rgba(44, 32, 22, 0.04);
    color: var(--txt);
}

/* ── Vendor card ── */
.vd-card {
    background: #fff;
    border: 1px solid rgba(44, 32, 22, 0.09);
    border-left: 3px solid transparent;
    border-radius: calc(var(--radius) - 2px);
    padding: 12px 14px;
    cursor: pointer;
    transition:
        transform 0.15s,
        box-shadow 0.15s,
        border-left-color 0.15s;
}
.vd-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}
.vd-card[data-status="prospect"]:hover {
    border-left-color: var(--vd-prospect);
}
.vd-card[data-status="contacted"]:hover {
    border-left-color: var(--vd-contacted);
}
.vd-card[data-status="booked"]:hover {
    border-left-color: var(--vd-booked);
}
.vd-card[data-status="signed"]:hover {
    border-left-color: var(--vd-signed);
}
.vd-card[data-status="paid"]:hover {
    border-left-color: var(--vd-paid);
}

.vd-card-name {
    font-size: 0.79rem;
    font-weight: 500;
    color: var(--txt);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vd-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.vd-cat-pill {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(44, 32, 22, 0.06);
    color: var(--txt-m);
    text-transform: capitalize;
}
.vd-card-price {
    font-size: 11px;
    color: var(--terra);
    font-weight: 600;
    margin-left: auto;
}
.vd-card-contact {
    font-size: 11px;
    color: var(--txt-l);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── List view ── */
.vd-list-view {
    background: #fff;
    border: 1px solid rgba(44, 32, 22, 0.09);
    border-radius: var(--radius);
    overflow: hidden;
}
.vd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.vd-status-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.vd-status-pill.prospect {
    color: var(--vd-prospect);
    background: rgba(107, 114, 128, 0.12);
}
.vd-status-pill.contacted {
    color: var(--vd-contacted);
    background: rgba(184, 149, 106, 0.12);
}
.vd-status-pill.booked {
    color: var(--vd-booked);
    background: rgba(143, 168, 135, 0.12);
}
.vd-status-pill.signed {
    color: var(--vd-signed);
    background: rgba(196, 145, 138, 0.12);
}
.vd-status-pill.paid {
    color: var(--vd-paid);
    background: rgba(74, 124, 89, 0.12);
}

/* ── Slide-over detail panel ── */
.vd-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 60;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
}
.vd-detail-overlay.open {
    opacity: 1;
    pointer-events: all;
}
.vd-detail-panel {
    width: 420px;
    max-width: 95vw;
    height: 100%;
    background: #fff;
    border-left: 1px solid var(--cream-dd);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    box-sizing: border-box;
    word-break: break-word;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}
.vd-detail-overlay.open .vd-detail-panel {
    transform: translateX(0);
}
/* All children stay within panel width */
.vd-detail-panel * {
    max-width: 100%;
    box-sizing: border-box;
}
.vd-detail-panel img {
    max-width: 100%;
}
.vd-detail-panel pre,
.vd-detail-panel code {
    white-space: pre-wrap;
    word-break: break-word;
}

.vd-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}
.vd-detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    flex: 1;
}
.vd-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.vd-detail-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--txt-l);
    padding: 4px;
    border-radius: 6px;
    transition: background 0.15s;
}
.vd-detail-close:hover {
    background: var(--cream);
    color: var(--txt);
}
.vd-detail-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--txt);
    margin: 0 0 20px;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
}
.vd-detail-cat-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(44, 32, 22, 0.06);
    color: var(--txt-m);
    text-transform: capitalize;
    border: 1px solid var(--cream-dd);
}
.vd-detail-section {
    border-top: 1px solid var(--cream-d);
    padding: 16px 0;
}
.vd-detail-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--txt-l);
    font-weight: 600;
    margin-bottom: 10px;
}
.vd-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.vd-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--txt);
    min-width: 0;
    overflow: hidden;
}
.vd-contact-row span,
.vd-contact-row a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.vd-contact-row svg {
    flex-shrink: 0;
    color: var(--txt-l);
}
.vd-contact-row a {
    color: var(--terra);
    text-decoration: none;
}
.vd-contact-row a:hover {
    text-decoration: underline;
}
.vd-budget-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--terra);
    margin-bottom: 4px;
}
.vd-budget-link-info {
    font-size: 12px;
    color: var(--txt-l);
    display: flex;
    align-items: center;
    gap: 5px;
}
.vd-contract-upload-zone {
    border: 1.5px dashed var(--cream-dd);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--txt-l);
    font-size: 13px;
    cursor: pointer;
    transition:
        border-color 0.2s,
        background 0.2s;
}
.vd-contract-upload-zone:hover {
    border-color: var(--terra);
    background: rgba(196, 145, 138, 0.04);
    color: var(--txt);
}
.vd-contract-uploaded {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(74, 124, 89, 0.08);
    border: 1px solid rgba(74, 124, 89, 0.25);
    border-radius: 8px;
    font-size: 13px;
    color: var(--txt);
}
.vd-contract-uploaded svg {
    color: var(--vd-paid);
}
.vd-contract-del {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--txt-l);
}
.vd-contract-del:hover {
    color: #e74c3c;
}
.vd-detail-notes-text {
    font-size: 13px;
    color: var(--txt-m);
    line-height: 1.6;
    white-space: pre-wrap;
}
.vd-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.vd-notes-empty {
    font-size: 12px;
    color: var(--txt-l);
    font-style: italic;
}
.vd-note-item {
    background: var(--cream);
    border: 1px solid var(--cream-d);
    border-radius: 8px;
    padding: 10px 14px;
}
.vd-note-date {
    font-size: 10px;
    color: var(--txt-l);
    margin-bottom: 4px;
}
.vd-note-text {
    font-size: 13px;
    color: var(--txt);
    line-height: 1.5;
    white-space: pre-wrap;
}
.vd-note-del {
    float: right;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--txt-l);
    font-size: 12px;
}
.vd-note-del:hover {
    color: #e74c3c;
}
.vd-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vd-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--cream-dd);
    background: var(--cream);
    color: var(--txt-m);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
}
.vd-action-btn:hover {
    background: var(--cream-d);
    border-color: var(--terra);
    color: var(--terra);
}
.input-with-addon {
    display: flex;
}
.vd-currency-sel {
    width: 80px !important;
    border-radius: 0 6px 6px 0 !important;
    border-left: none !important;
}
#vd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    gap: 12px;
    background: var(--cream);
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
}
#vd-empty p {
    font-size: 16px;
    font-weight: 600;
    color: var(--txt);
    margin: 0;
}
#vd-empty span {
    font-size: 13px;
    color: var(--txt-l);
    max-width: 380px;
    line-height: 1.5;
}

/* ── Vendor kebab menu (portal, same pattern as budget/checklist) ── */
#vd-kebab-menu {
    display: none;
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid var(--cream-d);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    min-width: 170px;
    overflow: hidden;
    animation: menuIn 0.12s ease;
}
#vd-kebab-menu button,
#vd-kebab-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--txt-m);
    background: none;
    border: none;
    border-bottom: 1px solid rgba(44, 32, 22, 0.06);
    cursor: pointer;
    width: 100%;
    text-align: left;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}
#vd-kebab-menu button:last-child,
#vd-kebab-menu a:last-child {
    border-bottom: none;
}
#vd-kebab-menu button:hover,
#vd-kebab-menu a:hover {
    background: var(--cream);
    color: var(--txt);
}
#vd-kebab-menu button.delete {
    color: #c0392b;
}
#vd-kebab-menu button.delete:hover {
    background: rgba(192, 57, 43, 0.06);
}

/* ── Drag-and-drop states ── */
.vd-card[draggable="true"] {
    cursor: grab;
}
.vd-card[draggable="true"]:active {
    cursor: grabbing;
}
.vd-card.vd-dragging {
    opacity: 0.35;
    transform: scale(0.97);
}
.vd-kanban-col.vd-drag-over {
    background: var(--cream-d) !important;
    border-color: var(--terra) !important;
    box-shadow: inset 0 0 0 2px var(--terra);
}
.vd-kanban-col.vd-drag-over .vd-col-header {
    background: var(--cream-d);
}

/* ── Quick status pipeline chips in detail panel ── */
.vd-status-pipeline-section {
    padding: 12px 0;
}
.vd-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vd-status-chip {
    flex: 1 1 auto;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--cream-dd);
    background: var(--cream);
    color: var(--txt-m);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition:
        background 0.15s,
        border-color 0.15s,
        color 0.15s;
    white-space: nowrap;
    text-align: center;
}
.vd-status-chip:hover:not(:disabled) {
    border-color: var(--terra);
    color: var(--terra);
    background: rgba(196, 145, 138, 0.08);
}
.vd-status-chip.active {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
    cursor: default;
}
.vd-status-chip.prospect.active {
    background: var(--vd-prospect);
    border-color: var(--vd-prospect);
}
.vd-status-chip.contacted.active {
    background: var(--vd-contacted);
    border-color: var(--vd-contacted);
}
.vd-status-chip.booked.active {
    background: var(--vd-booked);
    border-color: var(--vd-booked);
}
.vd-status-chip.signed.active {
    background: var(--vd-signed);
    border-color: var(--vd-signed);
}
.vd-status-chip.paid.active {
    background: var(--vd-paid);
    border-color: var(--vd-paid);
}

/* ── Mobile tab bar (Trello-style — hidden on desktop) ── */
.vd-kanban-tab-bar {
    display: none;
}

@media (max-width: 1200px) {
    .vd-kanban-board {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    /* ── Page header ── */
    #tab-vendors .page-header {
        flex-wrap: wrap;
        gap: 12px;
    }
    #tab-vendors .header-actions {
        gap: 6px;
        flex-wrap: wrap;
    }

    /* ── Stats: 2-column grid ── */
    #tab-vendors .guests-dashboard {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Filters: pills scrollable, no wrap ── */
    .vd-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    #vd-cat-pills {
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }
    #vd-cat-pills .filter-pill {
        flex-shrink: 0;
    }

    /* ── gm-row stacks ── */
    #modal-vendor .gm-row {
        flex-direction: column;
        gap: 10px;
    }

    /* ── Kanban: mobile tab bar + horizontal scroll-snap ── */
    .vd-kanban-tab-bar {
        display: flex;
        border-bottom: 2px solid var(--cream-d);
        margin-bottom: 0;
        background: #fff;
        border-radius: var(--radius) var(--radius) 0 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .vd-kanban-tab-bar::-webkit-scrollbar {
        display: none;
    }
    .vd-kanban-tab {
        flex: 0 0 auto;
        padding: 11px 12px;
        border: none;
        background: transparent;
        font-family: "Jost", sans-serif;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--txt-l);
        letter-spacing: 0.4px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        margin-bottom: -2px;
        transition:
            color 0.15s,
            border-color 0.15s;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        text-transform: uppercase;
    }
    .vd-kanban-tab.active {
        color: var(--txt);
        border-bottom-color: var(--terra);
    }
    .vd-kanban-tab-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .vd-kanban-tab-count {
        background: rgba(44, 32, 22, 0.08);
        padding: 1px 6px;
        border-radius: 10px;
        font-size: 0.6rem;
    }
    .vd-kanban-tab.active .vd-kanban-tab-count {
        background: var(--terra);
        color: #fff;
    }

    .vd-kanban-board[style*="display: none"] {
        display: none !important;
    }
    .vd-kanban-board {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        height: auto !important;
        min-height: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
        scrollbar-width: none;
    }
    .vd-kanban-board::-webkit-scrollbar {
        display: none;
    }
    .vd-kanban-col {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        scroll-snap-align: start;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        height: auto !important;
    }
    .vd-col-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--cream);
    }
    .vd-col-cards {
        max-height: 65vh !important;
        overflow-y: auto;
        flex: unset !important;
    }

    /* ── Detail panel: full screen ── */
    .vd-detail-panel {
        width: 100vw;
    }

    /* ── List view: table → cards ── */
    .vd-list-view {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    #vd-list .table-wrapper {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    #vd-list table thead {
        display: none;
    }
    #vd-list-tbody {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    #vd-list-tbody tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        background: #fff;
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 12px 44px 12px 12px;
        border-left: 3px solid var(--terra);
        cursor: pointer;
    }
    #vd-list-tbody tr:hover td {
        background: transparent;
    }
    #vd-list-tbody td {
        padding: 0;
        border: none;
        vertical-align: middle;
        font-size: 0.78rem;
    }
    /* col 1: checkbox — small, stays left */
    #vd-list-tbody td:nth-child(1) {
        width: auto;
        padding: 0;
    }
    /* col 2: name — full row width */
    #vd-list-tbody td:nth-child(2) {
        flex: 1 1 100%;
        min-width: 0;
        font-size: 0.85rem;
        color: var(--txt);
    }
    /* col 3: category pill */
    #vd-list-tbody td:nth-child(3) {
        order: 3;
    }
    /* col 4: status pill */
    #vd-list-tbody td:nth-child(4) {
        order: 4;
    }
    /* col 5: contact — hide on mobile (visible in detail) */
    #vd-list-tbody td:nth-child(5) {
        display: none;
    }
    /* col 6: price */
    #vd-list-tbody td:nth-child(6) {
        order: 5;
        font-weight: 600;
        color: var(--terra);
    }
    /* col 7: contract badge — hide to save space */
    #vd-list-tbody td:nth-child(7) {
        display: none;
    }
    /* col 8: kebab — absolutely pinned right */
    #vd-list-tbody td:nth-child(8) {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        padding: 0;
        border: none;
    }

    /* ── Bulk bar ── */
    #vd-bulk-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    /* Stats: single column */
    #tab-vendors .guests-dashboard {
        grid-template-columns: 1fr;
    }
    .vd-col-cards {
        max-height: 58vh !important;
    }

    /* Modal: full screen */
    #modal-vendor .modal-content {
        max-width: 100vw !important;
        margin: 0;
        border-radius: 0;
        overflow-y: auto;
    }
}

/* ════════════════════════════════════════════════
   PHASE 16.7 — Stripe / Premium upgrade
════════════════════════════════════════════════ */

/* Nav lock icon on premium tabs (free plan only) */
.nav-item.premium-locked::after {
    content: "🔒";
    font-size: 0.65rem;
    margin-left: auto;
    opacity: 0.55;
    line-height: 1;
}

/* Upgrade modal */
.upgrade-modal-content {
    max-width: 520px;
    padding: 0;
    overflow: hidden;
}

.upgrade-modal-header {
    background: linear-gradient(135deg, var(--brown) 0%, #5a3d28 100%);
    padding: 32px 32px 24px;
    text-align: center;
    color: var(--champ);
}

.upgrade-modal-icon {
    font-size: 2.4rem;
    margin-bottom: 10px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.upgrade-modal-header h2 {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--champ);
    margin: 0 0 6px;
    letter-spacing: 0.02em;
}

.upgrade-modal-sub {
    font-size: 0.82rem;
    color: rgba(232, 213, 176, 0.75);
    letter-spacing: 0.04em;
    margin: 0;
}

.upgrade-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 20px 28px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.upgrade-feature-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upgrade-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text);
    line-height: 1.4;
}

.upgrade-feature-check {
    color: var(--gold);
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.upgrade-modal-cta {
    padding: 20px 28px 24px;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upgrade-price-block {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.upgrade-price {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--brown);
    line-height: 1;
    letter-spacing: -0.02em;
}

.upgrade-price-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.upgrade-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 280px;
    background: linear-gradient(135deg, var(--brown) 0%, #5a3d28 100%);
    color: var(--champ);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 13px 28px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition:
        opacity 0.2s,
        transform 0.15s;
    box-shadow: 0 4px 16px rgba(90, 61, 40, 0.35);
}

.upgrade-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.upgrade-btn:active {
    transform: translateY(0);
}
.upgrade-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.upgrade-reassurance {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.04em;
    margin: 0;
}

/* Success badge in plan pill after payment */
.profile-plan.premium {
    background: linear-gradient(90deg, rgba(184, 149, 106, 0.3), rgba(232, 213, 176, 0.2));
    color: var(--champ);
    border-color: rgba(232, 213, 176, 0.4);
    font-weight: 600;
}

@media (max-width: 480px) {
    .upgrade-features {
        grid-template-columns: 1fr;
    }
    .upgrade-modal-header {
        padding: 24px 20px 18px;
    }
    .upgrade-features {
        padding: 16px 20px;
    }
    .upgrade-modal-cta {
        padding: 16px 20px 20px;
    }
}

/* ═══ SETTINGS — PLAN SECTION ═══ */

.plan-section {
    margin-bottom: 32px;
}

.plan-card {
    position: relative;
    background: linear-gradient(145deg, #fff 0%, #faf6f0 40%, #f5efe6 100%);
    border: 1px solid rgba(184, 149, 106, 0.25);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(90, 61, 40, 0.06),
        0 8px 32px rgba(184, 149, 106, 0.08);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}
.plan-card:hover {
    box-shadow:
        0 2px 6px rgba(90, 61, 40, 0.08),
        0 12px 40px rgba(184, 149, 106, 0.12);
    transform: translateY(-1px);
}

/* Decorative corner accents */
.plan-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    pointer-events: none;
    opacity: 0.08;
}
.plan-corner-tl {
    top: 0;
    left: 0;
    border-top: 2px solid var(--gold, #b8956a);
    border-left: 2px solid var(--gold, #b8956a);
    border-radius: 16px 0 0 0;
}
.plan-corner-br {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid var(--gold, #b8956a);
    border-right: 2px solid var(--gold, #b8956a);
    border-radius: 0 0 16px 0;
}

.plan-card-inner {
    display: flex;
    gap: 40px;
    padding: 36px 40px;
    align-items: flex-start;
}

/* Left side: plan info */
.plan-info {
    flex: 1;
    min-width: 0;
}

.plan-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.plan-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--cream-d, #f0e6d6);
    color: var(--brown, #5a3d28);
    border: 1px solid rgba(184, 149, 106, 0.2);
}

/* Premium badge variant */
.plan-card.is-premium .plan-badge {
    background: linear-gradient(135deg, #b8956a, #d4b896);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(184, 149, 106, 0.3);
}

.plan-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6dbf6d;
    box-shadow: 0 0 6px rgba(109, 191, 109, 0.4);
    animation: plan-pulse 2s ease-in-out infinite;
}
@keyframes plan-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.plan-status-text {
    font-size: 0.7rem;
    color: #6dbf6d;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.plan-title {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--txt-d, #2a1f14);
    margin: 0 0 6px;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.plan-desc {
    font-size: 0.78rem;
    color: var(--txt-m, #8a7a6a);
    line-height: 1.6;
    margin: 0 0 20px;
    font-weight: 300;
    max-width: 420px;
}

/* Plan limits / features list */
.plan-limits,
.plan-premium-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}

.plan-limit-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    color: var(--txt-m, #8a7a6a);
    line-height: 1.4;
}
.plan-limit-item svg {
    flex-shrink: 0;
    opacity: 0.5;
}
.plan-limit-locked {
    color: var(--terra, #c4918a);
}
.plan-limit-locked svg {
    opacity: 0.7;
    color: var(--terra, #c4918a);
}
.plan-limit-unlocked {
    color: #5a8a5a;
}
.plan-limit-unlocked svg {
    opacity: 0.8;
    color: #5a8a5a;
}

/* Right side: CTA */
.plan-cta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

.plan-cta-free {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.plan-price-tag {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.plan-price {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--brown, #5a3d28);
    line-height: 1;
    letter-spacing: -0.02em;
}

.plan-price-sub {
    font-size: 0.68rem;
    color: var(--txt-m, #8a7a6a);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
}

.plan-upgrade-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--gold, #b8956a) 0%, #c8a060 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow:
        0 4px 16px rgba(184, 149, 106, 0.3),
        0 1px 3px rgba(184, 149, 106, 0.2);
    white-space: nowrap;
}
.plan-upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 24px rgba(184, 149, 106, 0.4),
        0 2px 6px rgba(184, 149, 106, 0.25);
}
.plan-upgrade-btn:active {
    transform: translateY(0);
}
.plan-upgrade-btn svg {
    opacity: 0.9;
}

.plan-guarantee {
    font-size: 0.62rem;
    color: var(--txt-m, #8a7a6a);
    letter-spacing: 0.03em;
    margin: 0;
    opacity: 0.7;
    max-width: 200px;
    text-align: center;
    line-height: 1.5;
}

/* Premium confirmation state */
.plan-cta-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.plan-premium-icon {
    color: var(--gold, #b8956a);
    opacity: 0.8;
    margin-bottom: 4px;
}
.plan-premium-icon svg {
    filter: drop-shadow(0 2px 8px rgba(184, 149, 106, 0.3));
}

.plan-premium-label {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold, #b8956a);
    margin: 0;
    letter-spacing: 0.02em;
}

.plan-premium-since {
    font-size: 0.68rem;
    color: var(--txt-m, #8a7a6a);
    margin: 0;
    opacity: 0.7;
}

/* Premium state overrides */
.plan-card.is-premium {
    background: linear-gradient(145deg, #fff 0%, #faf7f1 30%, #f7f0e4 70%, #f2eadb 100%);
    border-color: rgba(184, 149, 106, 0.35);
}
.plan-card.is-premium .plan-corner {
    opacity: 0.15;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .plan-card-inner {
        flex-direction: column;
        gap: 28px;
        padding: 28px 24px;
    }
    .plan-cta {
        align-self: stretch;
        min-width: 0;
    }
    .plan-cta-free {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .plan-price-tag {
        flex-direction: row;
        gap: 8px;
        align-items: baseline;
    }
    .plan-price {
        font-size: 2.2rem;
    }
    .plan-guarantee {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .plan-card-inner {
        padding: 24px 20px;
    }
    .plan-limits,
    .plan-premium-features {
        flex-direction: column;
        gap: 8px;
    }
    .plan-cta-free {
        flex-direction: column;
    }
    .plan-price-tag {
        flex-direction: column;
        align-items: center;
    }
}

/* ═══ CUSTOM DOMAIN SETTINGS ═══ */
.domain-section {
    margin-bottom: 32px;
}
.domain-card {
    background: linear-gradient(145deg, #fff 0%, #faf6f0 40%, #f5efe6 100%);
    border: 1px solid rgba(184, 149, 106, 0.2);
    border-radius: 16px;
    padding: 32px;
    overflow: hidden;
}
.domain-card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}
.domain-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(184,149,106,0.12), rgba(184,149,106,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gold, #b8956a);
}
.domain-card-header h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--txt, #2c2016);
    margin: 0;
}
.domain-subtitle {
    font-size: 13px;
    color: var(--txt-m, #5a4a38);
    margin-top: 4px;
}

/* Mode tabs */
.domain-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.domain-mode-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--border, rgba(44,24,16,0.12));
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--txt-m, #5a4a38);
    transition: all 0.2s ease;
}
.domain-mode-tab:hover {
    border-color: var(--gold, #b8956a);
    color: var(--txt, #2c2016);
}
.domain-mode-tab.active {
    border-color: var(--gold, #b8956a);
    background: linear-gradient(135deg, rgba(184,149,106,0.08), rgba(184,149,106,0.02));
    color: var(--gold, #b8956a);
    box-shadow: 0 0 0 3px rgba(184,149,106,0.08);
}
.domain-mode-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Search + BYO inputs */
.domain-search-row,
.domain-byo-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.domain-search-input {
    flex: 1;
    padding: 11px 16px;
    border: 1.5px solid var(--border, rgba(44,24,16,0.12));
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Jost', sans-serif;
    color: var(--txt, #2c2016);
    background: #fff;
    transition: border-color 0.2s;
}
.domain-search-input:focus {
    outline: none;
    border-color: var(--gold, #b8956a);
    box-shadow: 0 0 0 3px rgba(184,149,106,0.1);
}
.domain-search-input::placeholder {
    color: var(--txt-l, #8b7a68);
}

/* Search results */
.domain-results {
    margin-top: 20px;
}
.domain-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border, rgba(44,24,16,0.12));
    margin-bottom: 8px;
    transition: all 0.2s;
}
.domain-result-item:hover {
    border-color: rgba(184,149,106,0.3);
}
.domain-result-item.available {
    border-left: 3px solid var(--sage, #6b9b7a);
}
.domain-result-item.taken {
    border-left: 3px solid var(--txt-l, #8b7a68);
    opacity: 0.55;
}
.domain-result-status {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
}
.domain-result-item.available .domain-result-status {
    background: rgba(107,155,122,0.12);
    color: var(--sage, #6b9b7a);
}
.domain-result-item.taken .domain-result-status {
    background: rgba(139,122,104,0.12);
    color: var(--txt-l, #8b7a68);
}
.domain-result-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--txt, #2c2016);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: -0.3px;
}
.domain-result-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold, #b8956a);
    white-space: nowrap;
}
.domain-result-item.taken .domain-result-price {
    font-weight: 400;
    color: var(--txt-l, #8b7a68);
    font-style: italic;
}
.domain-result-item .btn {
    padding: 7px 16px;
    font-size: 12px;
    white-space: nowrap;
}

/* Steps layout */
.domain-step {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
}
.domain-step:last-child {
    margin-bottom: 0;
}
.domain-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold, #b8956a), #d4a87c);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.domain-step-content {
    flex: 1;
}
.domain-step-content h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--txt, #2c2016);
    margin: 0 0 8px;
}
.domain-step-desc {
    font-size: 13px;
    color: var(--txt-m, #5a4a38);
    margin-bottom: 12px;
}

/* Registrar links */
.domain-registrar-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.domain-registrar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border: 1.5px solid var(--border, rgba(44,24,16,0.12));
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    transition: all 0.2s;
    min-width: 120px;
}
.domain-registrar-link:hover {
    border-color: var(--gold, #b8956a);
    box-shadow: 0 2px 8px rgba(184,149,106,0.12);
    transform: translateY(-1px);
}
.domain-registrar-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--txt, #2c2016);
}
.domain-registrar-price {
    font-size: 11px;
    color: var(--txt-l, #8b7a68);
}
.domain-tld-hint {
    font-size: 12px;
    color: var(--txt-l, #8b7a68);
    font-style: italic;
}
.domain-tld-prices {
    margin-top: 14px;
}
.domain-tld-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 10px;
}
.domain-tld-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--cream, #faf5ee);
    border: 1px solid var(--border, rgba(44,24,16,0.12));
    border-radius: 20px;
    font-size: 13px;
    color: var(--txt-m, #5a4a38);
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    letter-spacing: -0.3px;
}
.domain-tld-chip b {
    color: var(--gold, #b8956a);
    font-weight: 600;
}

/* Loading shimmer for search results */
.domain-result-skeleton {
    height: 52px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, var(--cream-d, #ede0cc) 25%, var(--cream, #faf5ee) 50%, var(--cream-d, #ede0cc) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* DNS verification box */
.domain-dns-box {
    background: #fff;
    border: 1.5px solid rgba(184,149,106,0.2);
    border-radius: 12px;
    padding: 24px;
}
.domain-dns-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--terra, #c8582a);
    margin-bottom: 12px;
}
.domain-dns-desc {
    font-size: 13px;
    color: var(--txt-m, #5a4a38);
    margin-bottom: 16px;
}
.domain-dns-record {
    background: var(--cream, #faf5ee);
    border: 1px solid var(--border, rgba(44,24,16,0.12));
    border-radius: 8px;
    overflow: hidden;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 13px;
}
.domain-dns-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border, rgba(44,24,16,0.12));
}
.domain-dns-row:last-child {
    border-bottom: none;
}
.domain-dns-label {
    width: 48px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--txt-l, #8b7a68);
    letter-spacing: 0.5px;
}
.domain-dns-value {
    flex: 1;
    color: var(--txt, #2c2016);
    word-break: break-all;
}
.domain-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--txt-l, #8b7a68);
    border-radius: 4px;
    transition: all 0.15s;
}
.domain-copy-btn:hover {
    background: rgba(184,149,106,0.1);
    color: var(--gold, #b8956a);
}

/* Active domain state */
.domain-active-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(107,155,122,0.06);
    border: 1.5px solid rgba(107,155,122,0.2);
    border-radius: 12px;
}
.domain-active-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sage, #6b9b7a);
    box-shadow: 0 0 0 3px rgba(107,155,122,0.2);
    flex-shrink: 0;
    animation: domainPulse 2s ease-in-out infinite;
}
@keyframes domainPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(107,155,122,0.2); }
    50% { box-shadow: 0 0 0 6px rgba(107,155,122,0.1); }
}
.domain-active-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.domain-active-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--sage, #6b9b7a);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.domain-active-url {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 14px;
    color: var(--txt, #2c2016);
    text-decoration: none;
}
.domain-active-url:hover {
    color: var(--gold, #b8956a);
    text-decoration: underline;
}
.btn-ghost {
    background: none;
    border: 1px solid var(--border, rgba(44,24,16,0.12));
    color: var(--txt-m, #5a4a38);
}
.btn-ghost:hover {
    border-color: var(--terra, #c8582a);
    color: var(--terra, #c8582a);
}
.btn-sm {
    padding: 6px 14px;
    font-size: 12px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .domain-card {
        padding: 24px 20px;
        border-radius: 12px;
    }
    .domain-card-header {
        flex-wrap: wrap;
    }
    .domain-mode-tabs {
        flex-direction: column;
    }
    .domain-search-row,
    .domain-byo-row {
        flex-direction: column;
    }
    .domain-active-bar {
        flex-wrap: wrap;
    }
    .domain-dns-row {
        flex-wrap: wrap;
    }
}

/* ═══ iOS ZOOM FIX — prevent auto-zoom on input focus (requires ≥16px) ═══ */
@media screen and (max-width: 1024px) {
    input,
    select,
    textarea,
    .gm-field input,
    .gm-field select,
    .gm-field textarea,
    .cms-field input,
    .cms-field select,
    .cms-field textarea,
    .filters input,
    .filters select,
    .qr-prelude-input,
    [contenteditable] {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   AFFILIATE / PARTNER PROGRAM TAB
═══════════════════════════════════════════════════════════════ */

/* Referral link card */
.aff-ref-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 24px;
    border: 1px solid rgba(184, 149, 106, 0.15);
    box-shadow: 0 6px 24px rgba(44, 24, 16, 0.04);
    display: flex;
    align-items: center;
    gap: 16px;
}
.aff-ref-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(184, 149, 106, 0.1), rgba(196, 145, 138, 0.08));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aff-ref-icon svg {
    stroke: var(--terra);
}
.aff-ref-body {
    flex: 1;
    min-width: 0;
}
.aff-ref-label {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cream-txt, #8a7a6c);
    margin-bottom: 4px;
}
.aff-ref-url {
    font-family: "Jost", monospace;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--txt, #2c1810);
    word-break: break-all;
}
.aff-ref-copy {
    white-space: nowrap;
}
.aff-ref-copy.copied {
    background: var(--sage, #8fa887) !important;
}

/* Info banner — collapsible */
.aff-info-banner {
    background: #fff;
    border-radius: 14px;
    margin-bottom: 24px;
    border: 1px solid rgba(44, 24, 16, 0.04);
    overflow: hidden;
}
.aff-info-header {
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--txt, #2c1810);
    transition: background 0.2s;
}
.aff-info-header:hover {
    background: rgba(184, 149, 106, 0.03);
}
.aff-info-header svg:first-child {
    stroke: var(--terra);
    flex-shrink: 0;
}
.aff-info-chevron {
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.aff-info-banner.open .aff-info-chevron {
    transform: rotate(180deg);
}
.aff-info-body {
    max-height: 0;
    overflow: hidden;
    transition:
        max-height 0.4s ease,
        padding 0.3s ease;
    padding: 0 24px;
}
.aff-info-banner.open .aff-info-body {
    max-height: 400px;
    padding: 0 24px 24px;
}
.aff-info-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.aff-info-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.aff-info-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(184, 149, 106, 0.1);
    color: var(--terra);
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aff-info-step strong {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 2px;
}
.aff-info-step p {
    font-size: 0.75rem;
    color: var(--cream-txt, #8a7a6c);
    line-height: 1.5;
    margin: 0;
}

/* Stats grid */
.aff-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.aff-stat {
    background: #fff;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid rgba(44, 24, 16, 0.04);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.aff-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(44, 24, 16, 0.06);
}
.aff-stat-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aff-stat-icon svg {
    stroke-width: 1.5;
}
.aff-stat-clicks {
    background: rgba(184, 149, 106, 0.08);
}
.aff-stat-clicks svg {
    stroke: #b8956a;
}
.aff-stat-signups {
    background: rgba(143, 168, 135, 0.08);
}
.aff-stat-signups svg {
    stroke: #8fa887;
}
.aff-stat-conversions {
    background: rgba(196, 145, 138, 0.08);
}
.aff-stat-conversions svg {
    stroke: #c4918a;
}
.aff-stat-earned {
    background: rgba(184, 149, 106, 0.12);
}
.aff-stat-earned svg {
    stroke: #b8956a;
}
.aff-stat-data {
    min-width: 0;
}
.aff-stat-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt, #2c1810);
    line-height: 1;
    margin-bottom: 2px;
}
.aff-stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cream-txt, #8a7a6c);
}

/* Earnings cards */
.aff-earnings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}
.aff-earn-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid rgba(44, 24, 16, 0.04);
}
.aff-earn-card h3 {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cream-txt, #8a7a6c);
    margin-bottom: 10px;
}
.aff-earn-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--terra);
    line-height: 1;
    margin-bottom: 4px;
}
.aff-earn-sub {
    font-size: 0.72rem;
    color: var(--cream-txt, #8a7a6c);
}
.aff-earn-paid {
    border-style: dashed;
    border-color: rgba(143, 168, 135, 0.3);
}
.aff-earn-paid .aff-earn-amount {
    color: var(--sage, #8fa887);
}

/* Referrals table */
.aff-table-wrap {
    background: #fff;
    border-radius: 14px;
    border: 1px solid rgba(44, 24, 16, 0.04);
    overflow: hidden;
    margin-bottom: 24px;
}
.aff-table-header {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(44, 24, 16, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aff-table-header h3 {
    font-size: 1rem;
    font-weight: 600;
}
.aff-table-badge {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
    background: rgba(184, 149, 106, 0.1);
    color: var(--terra);
}
.aff-table {
    width: 100%;
    border-collapse: collapse;
}
.aff-table th {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cream-txt, #8a7a6c);
    padding: 12px 24px;
    text-align: left;
    border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    background: rgba(44, 24, 16, 0.015);
}
.aff-table td {
    padding: 14px 24px;
    font-size: 0.82rem;
    color: var(--txt, #2c1810);
    border-bottom: 1px solid rgba(44, 24, 16, 0.03);
}
.aff-table tr:last-child td {
    border-bottom: none;
}
.aff-table tr:hover td {
    background: rgba(184, 149, 106, 0.02);
}

/* Status pills */
.aff-status {
    display: inline-block;
    font-size: 0.56rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
}
.aff-status-clicked {
    background: rgba(181, 168, 153, 0.12);
    color: #8a7a6c;
}
.aff-status-signed_up {
    background: rgba(143, 168, 135, 0.12);
    color: #6b8b63;
}
.aff-status-converted {
    background: rgba(184, 149, 106, 0.12);
    color: #a07b52;
}
.aff-status-paid {
    background: rgba(196, 145, 138, 0.12);
    color: #c4918a;
}

/* Empty state */
.aff-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--cream-txt, #8a7a6c);
}
.aff-empty svg {
    display: block;
    margin: 0 auto 12px;
    stroke: var(--cream-txt, #8a7a6c);
}
.aff-empty p {
    font-size: 0.82rem;
}

/* Payout settings */
.aff-payout {
    background: #fff;
    border-radius: 14px;
    padding: 24px 28px;
    border: 1px solid rgba(44, 24, 16, 0.04);
}
.aff-payout h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.aff-payout-desc {
    font-size: 0.78rem;
    color: var(--cream-txt, #8a7a6c);
    line-height: 1.5;
    margin-bottom: 18px;
}
.aff-payout-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.aff-payout-field label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--cream-txt, #8a7a6c);
    margin-bottom: 4px;
}
.aff-payout-field input,
.aff-payout-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(44, 24, 16, 0.1);
    border-radius: 8px;
    background: var(--cream, #fbf7f0);
    font-size: 0.82rem;
    color: var(--txt, #2c1810);
}
.aff-payout-field input:focus,
.aff-payout-field select:focus {
    outline: none;
    border-color: var(--terra);
}

/* ═══ AFFILIATE RESPONSIVE ═══ */
@media (max-width: 900px) {
    .aff-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .aff-earnings {
        grid-template-columns: 1fr;
    }
    .aff-payout-row {
        grid-template-columns: 1fr;
    }
    .aff-ref-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .aff-ref-copy {
        width: 100%;
        justify-content: center;
    }
    .aff-table-wrap {
        overflow-x: auto;
    }
    .aff-table {
        min-width: 400px;
    }
}
@media (max-width: 480px) {
    .aff-stat {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 16px 12px;
    }
    .aff-stat-num {
        font-size: 1.3rem;
    }
    .aff-earn-amount {
        font-size: 1.6rem;
    }
}

/* ═══ REDUCED MOTION — respect user accessibility preference ═══ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE APP EXPERIENCE — Guest List (Phase: Mobile)
   Native app feel: FAB, bottom tabs, sheets, app bar
   Only active at ≤768px — desktop is completely unaffected
══════════════════════════════════════════════════════════ */

/* --- Base: hidden on desktop --- */
.mob-appbar,
.mob-search-bar,
.mob-fab,
.mob-tabbar,
.mob-sheet-overlay,
.mob-global-appbar,
.mob-hub-page,
.mob-global-nav,
.mob-profile-page,
.mob-gal-hint,
.mob-photos-actions,
.mob-cl-actions,
.mob-budget-actions,
#mob-budget-list,
#mob-vd-list,
#mob-guest-list,
#mob-gb-list,
#mob-msg-list,
#mob-reg-list,
#mob-event-list,
#mob-hh-list,
#mob-q-list,
#mob-meal-list {
    display: none;
}

@media (max-width: 768px) {
    /* ═══════════════════════════════════════════════════════
   GLOBAL MOBILE NAVIGATION — hide sidebar, show bottom nav
═══════════════════════════════════════════════════════ */

    /* ─── Remove desktop min-height that causes iOS Safari overscroll ─── */
    body,
    #app,
    .layout {
        min-height: auto !important;
    }

    /* ─── HIDE SIDEBAR + BURGER ON MOBILE ─── */
    .mob-menu-btn,
    .sidebar-overlay,
    .sidebar {
        display: none !important;
    }
    .main-content {
        margin-left: 0 !important;
        padding: 16px 16px calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ─── GLOBAL APP BAR ─── */
    .mob-global-appbar {
        display: flex;
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 40;
        padding: 14px 16px;
        margin: -16px -16px 16px;
        background: rgba(251, 247, 240, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    }
    .mob-global-titles {
        flex: 1;
        min-width: 0;
    }
    .mob-global-appbar h2 {
        font-family: var(--heading-font, "Georgia", serif);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        margin: 0;
        letter-spacing: -0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-global-subtitle {
        font-size: 0.68rem;
        color: var(--txt-m, #8a7a6c);
        margin: 2px 0 0;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-global-subtitle:empty {
        display: none;
    }
    .mob-back-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: rgba(44, 24, 16, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--txt, #2c1810);
        cursor: pointer;
        flex-shrink: 0;
        transition:
            background 0.2s,
            transform 0.15s;
    }
    .mob-back-btn:active {
        transform: scale(0.9);
        background: rgba(44, 24, 16, 0.1);
    }
    .mob-global-actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }

    /* ─── PROFILE AVATAR IN APP BAR ─── */
    .mob-profile-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #b8956a 0%, #d4b896 100%);
        color: #fff;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
        margin-left: 4px;
        transition:
            transform 0.2s,
            box-shadow 0.2s;
        box-shadow: 0 2px 8px rgba(184, 149, 106, 0.25);
    }
    .mob-profile-avatar:active {
        transform: scale(0.9);
    }

    /* ─── MOBILE PROFILE PAGE ─── */
    .mob-profile-page {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: var(--cream, #faf5ee);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: mppSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .mob-profile-page.open {
        display: block;
    }
    @keyframes mppSlideIn {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }

    .mpp-back-btn {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 5;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #e8d5b0;
        cursor: pointer;
        transition:
            background 0.2s,
            transform 0.15s;
    }
    .mpp-back-btn:active {
        transform: scale(0.9);
        background: rgba(255, 255, 255, 0.2);
    }

    /* Header */
    .mpp-header {
        position: relative;
        background: linear-gradient(160deg, #2c1810 0%, #3d2e1f 40%, #4a3828 100%);
        padding: 60px 24px 36px;
        text-align: center;
        overflow: hidden;
    }
    .mpp-header-grain {
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
        pointer-events: none;
    }
    .mpp-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: linear-gradient(135deg, #b8956a 0%, #e8d5b0 100%);
        color: #2c1810;
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 1.6rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        box-shadow: 0 4px 20px rgba(184, 149, 106, 0.4);
        letter-spacing: 0.04em;
    }
    .mpp-couple-names {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 1.5rem;
        font-weight: 600;
        color: #e8d5b0;
        margin: 0 0 6px;
        letter-spacing: 0.02em;
    }
    .mpp-email {
        font-family: "Jost", sans-serif;
        font-size: 0.75rem;
        color: rgba(232, 213, 176, 0.55);
        margin: 0 0 14px;
    }
    .mpp-plan {
        display: inline-block;
        padding: 3px 14px;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        background: rgba(184, 149, 106, 0.15);
        color: #b8956a;
        border: 1px solid rgba(184, 149, 106, 0.25);
    }

    /* Countdown */
    .mpp-countdown-wrap {
        padding: 24px 20px 20px;
        text-align: center;
    }
    .mpp-countdown-label {
        font-family: "Jost", sans-serif;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--txt-l, #8b7a68);
        margin: 0 0 14px;
        font-weight: 500;
    }
    .mpp-countdown {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
    }
    .mpp-cd-unit {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 58px;
    }
    .mpp-cd-num {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        line-height: 1;
        background: linear-gradient(135deg, #2c1810 0%, #b8956a 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .mpp-cd-lbl {
        font-family: "Jost", sans-serif;
        font-size: 0.6rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--txt-l, #8b7a68);
        margin-top: 4px;
    }
    .mpp-cd-sep {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 1.6rem;
        color: var(--txt-xl, #b0a090);
        margin-top: -12px;
    }
    .mpp-wedding-date {
        font-family: "Jost", sans-serif;
        font-size: 0.72rem;
        color: var(--txt-m, #5a4a38);
        margin: 16px 0 0;
        font-weight: 500;
    }

    /* Stats */
    .mpp-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 0 16px 16px;
    }
    .mpp-stat-card {
        background: #fff;
        border-radius: 14px;
        padding: 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        box-shadow: 0 1px 4px rgba(44, 32, 22, 0.05);
    }
    .mpp-stat-card svg {
        color: var(--gold, #b8956a);
        flex-shrink: 0;
        margin-top: 2px;
    }
    .mpp-stat-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .mpp-stat-val {
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        line-height: 1.2;
    }
    .mpp-stat-lbl {
        font-size: 0.62rem;
        color: var(--txt-l, #8b7a68);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    /* Actions */
    .mpp-actions {
        padding: 0 16px 16px;
    }
    .mpp-action-btn {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 14px 16px;
        border: none;
        background: #fff;
        border-radius: 12px;
        margin-bottom: 6px;
        font-family: "Jost", sans-serif;
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: background 0.15s;
        text-align: left;
        box-shadow: 0 1px 3px rgba(44, 32, 22, 0.04);
    }
    .mpp-action-btn:active {
        background: rgba(184, 149, 106, 0.08);
    }
    .mpp-action-btn svg {
        color: var(--txt-m, #5a4a38);
        flex-shrink: 0;
    }
    .mpp-divider {
        height: 1px;
        background: rgba(44, 32, 22, 0.06);
        margin: 10px 0 16px;
    }
    .mpp-logout {
        color: #c0392b !important;
    }
    .mpp-logout svg {
        color: #c0392b !important;
    }
    .mpp-member-since {
        text-align: center;
        font-size: 0.65rem;
        color: var(--txt-xl, #b0a090);
        padding: 8px 16px 32px;
        margin: 0;
    }

    /* ─── GLOBAL BOTTOM TAB BAR ─── */
    .mob-global-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 45;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(44, 24, 16, 0.06);
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 24px rgba(44, 24, 16, 0.05);
    }
    .mob-gnav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 8px 2px 4px;
        position: relative;
        color: var(--txt-m, #8a7a6c);
        transition: color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-gnav-btn span {
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        transition: color 0.2s;
    }
    .mob-gnav-btn svg {
        transition: transform 0.2s;
    }
    .mob-gnav-btn.active {
        color: var(--gold, #b8956a);
    }
    .mob-gnav-btn.active svg {
        transform: scale(1.12);
    }
    .mob-gnav-btn.active::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--gold, #b8956a);
    }
    .mob-gnav-btn:active {
        opacity: 0.6;
    }

    /* ─── HUB PAGE (shown/hidden by JS) ─── */
    .mob-hub-page {
        padding: 4px 0 20px;
        animation: mobHubIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    @keyframes mobHubIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .mob-hub-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mob-hub-card {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 18px;
        background: #fff;
        border-radius: 16px;
        border: 1px solid rgba(44, 24, 16, 0.06);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            transform 0.15s,
            box-shadow 0.15s,
            border-color 0.15s;
        position: relative;
        overflow: hidden;
        animation: mobCardIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .mob-hub-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 12px rgba(44, 24, 16, 0.06);
    }
    .mob-hub-card-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(184, 149, 106, 0.08);
        color: var(--gold, #b8956a);
        transition: background 0.2s;
    }
    .mob-hub-card:active .mob-hub-card-icon {
        background: rgba(184, 149, 106, 0.15);
    }
    .mob-hub-card-info {
        flex: 1;
        min-width: 0;
    }
    .mob-hub-card-title {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        margin: 0 0 2px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .mob-hub-card-desc {
        font-size: 0.72rem;
        color: var(--txt-m, #8a7a6c);
        margin: 0;
        line-height: 1.3;
    }
    .mob-hub-card-arrow {
        flex-shrink: 0;
        color: var(--txt-xl, #c4b5a7);
        transition: transform 0.2s;
    }
    .mob-hub-card:active .mob-hub-card-arrow {
        transform: translateX(3px);
    }

    /* Hub card: premium lock */
    .mob-hub-card.is-locked {
        opacity: 0.65;
    }
    .mob-hub-card.is-locked .mob-hub-card-icon {
        background: rgba(44, 24, 16, 0.04);
        color: var(--txt-m, #8a7a6c);
    }
    .mob-hub-lock {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 0.52rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #fff;
        background: linear-gradient(135deg, var(--gold, #b8956a), #c9a474);
        padding: 2px 7px;
        border-radius: 6px;
        line-height: 1.2;
    }

    /* Hub section header (optional) */
    .mob-hub-section-label {
        font-size: 0.58rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--txt-xl, #c4b5a7);
        padding: 16px 4px 8px;
    }
    .mob-hub-section-label:first-child {
        padding-top: 4px;
    }

    /* Hub page visibility controlled by JS (display is set inline) */

    /* ═══════════════════════════════════════════════════════
   GUEST TAB — MOBILE SPECIFICS (existing, adapted)
═══════════════════════════════════════════════════════ */

    /* ─── GUESTS APP BAR (hidden — replaced by global app bar) ─── */
    .mob-appbar {
        display: none !important;
    }
    .mob-appbar-actions {
        display: flex;
        gap: 4px;
    }
    .mob-appbar-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: rgba(44, 24, 16, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--txt, #2c1810);
        cursor: pointer;
        position: relative;
        text-decoration: none;
        transition:
            background 0.2s,
            transform 0.15s;
    }
    .mob-appbar-btn:active {
        transform: scale(0.92);
        background: rgba(44, 24, 16, 0.08);
    }
    .mob-appbar-btn-active {
        color: #dc2626;
        background: rgba(220, 38, 38, 0.06);
    }
    .mob-appbar-btn-active::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #dc2626;
        border: 1.5px solid #fff;
    }
    .mob-filter-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--terra, #c85a2a);
        display: none;
    }
    .mob-filter-badge.active {
        display: block;
    }

    /* ─── SEARCH BAR (expandable, under global app bar) ─── */
    .mob-search-bar {
        display: none;
        align-items: center;
        gap: 10px;
        padding: 0 18px 12px;
        margin: -16px -16px 12px;
        background: rgba(251, 247, 240, 0.94);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        animation: mobSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mob-search-bar.open {
        display: flex;
    }
    .mob-search-bar svg {
        flex-shrink: 0;
        color: var(--txt-m, #8a7a6c);
    }
    .mob-search-bar input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 0.88rem;
        color: var(--txt, #2c1810);
        outline: none;
        padding: 8px 0;
    }
    .mob-search-bar input::placeholder {
        color: var(--txt-xl, #c4b5a7);
    }
    .mob-search-cancel {
        border: none;
        background: none;
        color: var(--terra, #c85a2a);
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        padding: 6px 2px;
    }

    /* ─── HIDE DESKTOP ELEMENTS ON MOBILE ─── */
    #tab-guests .page-header,
    #tab-guests .guests-subnav,
    #tab-guests .guests-quick-add,
    #tab-guests .guests-filters {
        display: none !important;
    }

    /* Hide all tab-panel page-headers on mobile (global app bar replaces them) */
    .tab-panel > .page-header {
        display: none !important;
    }
    /* Hide gallery desktop elements on mobile (moved to appbar/filter sheet/FAB) */
    #tab-gallery .gal-filters,
    #tab-gallery .section-desc,
    #tab-gallery .view-toggle,
    #tab-gallery .upload-zone,
    #tab-gallery .upload-progress,
    #tab-gallery .gal-stats,
    #tab-gallery .bulk-bar {
        display: none !important;
    }

    /* Gallery mobile hint + FAB */
    .mob-gal-hint {
        display: block;
        font-size: 0.7rem;
        color: var(--txt-l, #a09080);
        text-align: center;
        padding: 16px 20px;
        letter-spacing: 0.02em;
        background: rgba(255, 255, 255, 0.6);
        border: 2px dashed rgba(44, 32, 22, 0.1);
        border-radius: 16px;
        margin: 8px 16px;
    }
    /* Gallery FAB inherits .mob-fab styles (gold gradient, 56px circle, spring animation) */

    /* ─── GALLERY: mobile cards + detail sheet ─── */
    #tab-gallery .table-wrap {
        display: block;
        overflow: visible;
    }
    #tab-gallery .table-wrap table {
        display: none;
    }
    .mob-gal-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .mob-gal-card {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        border: 1px solid rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: background 0.15s;
    }
    .mob-gal-card:active {
        transform: scale(0.985);
    }
    .mob-gal-card-thumb {
        width: 56px;
        height: 56px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: rgba(44, 24, 16, 0.04);
    }
    .mob-gal-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mob-gal-card-info {
        flex: 1;
        min-width: 0;
    }
    .mob-gal-card-name {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-gal-card-meta {
        font-size: 0.68rem;
        color: var(--txt-m, #8a7a6c);
        margin-top: 2px;
    }
    .mob-gal-card-caption {
        font-size: 0.68rem;
        color: var(--gold, #b8956a);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-gal-card-chevron {
        flex-shrink: 0;
        color: rgba(44, 24, 16, 0.2);
    }

    /* Gallery detail: full-width image preview */
    .mob-gal-preview {
        /* margin: -20px -20px 16px -20px; */
        border-radius: 16px;
        overflow: hidden;
        background: rgba(44, 24, 16, 0.03);
        max-height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }
    .mob-gal-preview img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        max-height: 50vh;
    }
    .mob-gal-title {
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        margin-bottom: 4px;
        word-break: break-all;
    }
    .mob-gal-caption {
        font-size: 0.78rem;
        color: var(--txt-m, #8a7a6c);
        margin-bottom: 14px;
        line-height: 1.4;
    }

    /* ─── GUEST PHOTOS: hide desktop elements on mobile ─── */
    #tab-photos .filters,
    #tab-photos .photo-preview-modal-inner,
    #tab-photos .header-actions,
    #photo-subtabs-nav,
    #tab-photos .photos-free-banner,
    #photos-view-toggle,
    #photos-table-view,
    #ph-bulk-bar {
        display: none !important;
    }

    /* PHOTOS: mobile grid view (3 columns) */
    .mob-photo-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }
    .mob-photo-grid-item {
        position: relative;
        aspect-ratio: 1;
        border-radius: 4px;
        overflow: hidden;
        background: var(--cream-d, #e8ddd0);
        animation: mobCardIn 0.25s ease both;
        cursor: pointer;
    }
    .mob-photo-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mob-photo-grid-item:active {
        transform: scale(0.97);
    }
    .mob-photo-grid-video {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(44,24,16,0.08);
        color: var(--txt-m, #8a7a6c);
    }
    .mob-photo-grid-dot {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 1.5px solid #fff;
    }

    /* PHOTOS: quick action buttons grid */
    .mob-photos-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 0;
    }
    .mob-photos-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 10px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        text-decoration: none;
        transition:
            background 0.15s,
            transform 0.15s;
    }
    .mob-photos-action-btn:active {
        background: rgba(44, 24, 16, 0.03);
        transform: scale(0.97);
    }
    .mob-photos-action-btn svg {
        flex-shrink: 0;
        color: var(--gold, #b8956a);
    }

    /* PHOTOS: dashboard padding */
    #photos-dashboard {
        padding: 2px 16px 14px;
    }

    /* PHOTOS: auto-approve toggle mobile */
    #tab-photos .photos-auto-approve {
        padding: 0 16px 8px;
    }

    /* PHOTOS: quota bar + grid full width */
    #tab-photos .photos-quota-bar {
        margin: 0 0 8px;
    }
    #tab-photos .photos-grid {
        display: block;
        padding: 0;
    }

    /* PHOTOS: mobile cards */
    .mob-photo-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .mob-photo-card {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: #fff;
        border-radius: 14px;
        cursor: pointer;
        transition: background 0.15s;
        animation: mobCardIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .mob-photo-card:active {
        transform: scale(0.985);
    }
    .mob-photo-card-thumb {
        width: 56px;
        height: 56px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: rgba(44, 24, 16, 0.03);
    }
    .mob-photo-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mob-photo-card-video {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(44, 24, 16, 0.06);
        color: var(--txt-m, #8a7a6c);
    }
    .mob-photo-card-info {
        flex: 1;
        min-width: 0;
    }
    .mob-photo-card-name {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-photo-card-meta {
        font-size: 0.68rem;
        color: var(--txt-m, #8a7a6c);
        margin-top: 2px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .mob-photo-status-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mob-photo-card-caption {
        font-size: 0.68rem;
        color: var(--gold, #b8956a);
        margin-top: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-photo-card-chevron {
        flex-shrink: 0;
        color: rgba(44, 24, 16, 0.2);
    }

    /* PHOTOS: detail sheet preview */
    .mob-photo-preview {
        border-radius: 16px;
        overflow: hidden;
        background: rgba(44, 24, 16, 0.03);
        max-height: 50vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }
    .mob-photo-preview img,
    .mob-photo-preview video {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        max-height: 50vh;
    }
    .mob-photo-detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
    }
    .mob-photo-detail-name {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
    }
    .mob-photo-detail-status {
        font-size: 0.62rem;
        font-weight: 600;
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }
    .mob-photo-detail-caption {
        font-size: 0.78rem;
        color: var(--txt-m, #8a7a6c);
        margin-bottom: 14px;
        line-height: 1.4;
    }

    /* ─── CHECKLIST: mobile redesign ─── */
    #tab-checklist .checklist-filters,
    #tab-checklist .checklist-toolbar,
    #tab-checklist .checklist-categories {
        display: none !important;
    }
    #tab-checklist .checklist-progress {
        margin: 0 0 8px;
        border-radius: 14px;
    }
    #tab-checklist .checklist-list {
        padding: 0;
    }

    /* CHECKLIST: quick action buttons */
    .mob-cl-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 0;
    }
    .mob-cl-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 10px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        font-size: 0.76rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition:
            background 0.15s,
            transform 0.15s;
    }
    .mob-cl-action-btn:active {
        background: rgba(44, 24, 16, 0.03);
        transform: scale(0.97);
    }
    .mob-cl-action-btn svg {
        flex-shrink: 0;
        color: var(--gold, #b8956a);
    }

    /* CHECKLIST: mobile cards */
    .mob-cl-cards {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0;
    }
    .mob-cl-card {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 12px;
        background: #fff;
        border-radius: 14px;
        border-left: 3px solid #f59e0b;
        cursor: pointer;
        transition: background 0.15s;
        animation: mobCardIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    .mob-cl-card:active {
        transform: scale(0.985);
    }
    .mob-cl-card.completed {
        opacity: 0.55;
    }
    .mob-cl-card.completed .mob-cl-card-title {
        text-decoration: line-through;
    }
    .mob-cl-card.overdue {
        background: #fef2f2;
    }

    /* Custom checkbox */
    .mob-cl-check {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        border-radius: 8px;
        border: 2px solid rgba(44, 24, 16, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        background: #fff;
    }
    .mob-cl-check input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .mob-cl-checkmark svg {
        opacity: 0;
        transform: scale(0.5);
        transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        color: #fff;
    }
    .mob-cl-check.checked {
        background: var(--sage, #6b9b7a);
        border-color: var(--sage, #6b9b7a);
    }
    .mob-cl-check.checked .mob-cl-checkmark svg {
        opacity: 1;
        transform: scale(1);
    }

    .mob-cl-card-body {
        flex: 1;
        min-width: 0;
    }
    .mob-cl-card-title {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        line-height: 1.3;
    }
    .mob-cl-card-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 4px;
        font-size: 0.66rem;
        color: var(--txt-m, #8a7a6c);
    }
    .mob-cl-cat {
        background: rgba(44, 24, 16, 0.04);
        padding: 2px 7px;
        border-radius: 6px;
        font-weight: 500;
    }
    .mob-cl-due {
        font-weight: 500;
    }
    .mob-cl-due.overdue {
        color: #ef4444;
        font-weight: 600;
    }
    .mob-cl-chevron {
        flex-shrink: 0;
        color: rgba(44, 24, 16, 0.2);
    }

    /* CHECKLIST: detail sheet */
    #mob-cl-status-chips,
    #mob-cl-cat-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .mob-cl-detail-top {
        margin-bottom: 16px;
    }
    .mob-cl-detail-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        line-height: 1.3;
        margin-bottom: 8px;
    }
    .mob-cl-detail-badges {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }
    .mob-cl-pri-badge {
        font-size: 0.62rem;
        font-weight: 600;
        color: #fff;
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .mob-cl-done-badge {
        font-size: 0.62rem;
        font-weight: 600;
        color: #fff;
        background: var(--sage, #6b9b7a);
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .mob-cl-overdue-badge {
        font-size: 0.62rem;
        font-weight: 600;
        color: #fff;
        background: #ef4444;
        padding: 3px 10px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    /* ─── DASHBOARD COUNTERS: horizontal scroll strip ─── */
    .guests-dashboard {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 2px 0 14px;
        grid-template-columns: unset !important;
        scrollbar-width: none;
    }
    .guests-dashboard::-webkit-scrollbar {
        display: none;
    }
    .guests-counter {
        flex: 0 0 auto;
        min-width: 120px;
        scroll-snap-align: start;
        padding: 12px 16px;
        border-radius: 14px;
    }
    #tab-guests .guests-counter-chart {
        flex: 0 0 220px;
        min-width: 220px;
        grid-column: unset !important;
    }

    /* ─── GUEST CARDS: app-style ─── */
    #guests-tbody tr {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            transform 0.15s,
            box-shadow 0.15s;
    }
    #guests-tbody tr:active {
        transform: scale(0.985);
        box-shadow: none;
    }
    /* Hide inline actions & checkboxes on mobile — detail sheet replaces them */
    #guests-tbody .td-check,
    #guests-tbody .td-actions {
        display: none !important;
    }
    /* Name cell — allow more space */
    #guests-tbody td:nth-child(2) {
        font-size: 0.88rem;
    }

    /* ─── Sort bottom sheet ─── */
    .mob-sheet-compact {
        max-height: 60vh;
    }
    .mob-sheet-title {
        padding: 0 20px 12px;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--txt, #2c2016);
        letter-spacing: 0.02em;
    }
    .mob-sort-options {
        padding: 0 12px 12px;
    }
    .mob-sort-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 13px 12px;
        border: none;
        background: none;
        font-size: 0.84rem;
        font-family: inherit;
        color: var(--txt, #2c2016);
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.15s;
    }
    .mob-sort-btn:active {
        background: rgba(44, 32, 22, 0.06);
    }
    .mob-sort-btn.active {
        background: rgba(184, 149, 106, 0.12);
        color: var(--gold, #b8956a);
        font-weight: 600;
    }
    .mob-sort-btn svg {
        flex-shrink: 0;
        opacity: 0.5;
    }
    .mob-sort-btn.active svg {
        opacity: 1;
        color: var(--gold, #b8956a);
    }
    .mob-sort-dir {
        margin-left: auto;
        font-size: 0.7rem;
        opacity: 0.5;
        font-weight: 400;
    }
    .mob-sort-btn.active .mob-sort-dir {
        opacity: 0.8;
    }

    /* ─── GUESTBOOK: mobile app style ─── */
    #tab-guestbook .page-header,
    #tab-guestbook .filters,
    #tab-guestbook .gb-subtitle,
    #tab-guestbook .table-wrap,
    #tab-guestbook .pagination {
        display: none !important;
    }

    /* ─── MESSAGES: mobile app style ─── */
    #tab-messages.active {
        position: static !important;
        display: block !important;
        z-index: auto !important;
        overflow: visible !important;
        animation: none !important;
        padding: 0 !important;
    }
    #tab-messages .msgbox-layout,
    #tab-messages .msgbox-backdrop,
    #tab-messages .msgbox-mobile-tabs,
    #tab-messages .msg-dashbar,
    #tab-messages .msg-reminder-card,
    #tab-messages .msg-templates {
        display: none !important;
    }

    /* ─── REGISTRY: mobile app style ─── */
    #tab-registry .page-header,
    #tab-registry .reg-filter-bar,
    #tab-registry .reg-items,
    #tab-registry .reg-subtabs,
    #tab-registry .reg-filters {
        display: none !important;
    }
    .reg-public-link {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    /* Dashboard counters — horizontal scroll strip */
    .reg-dashboard {
        display: flex !important;
        gap: 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* padding: 2px 0 14px; */
        grid-template-columns: unset !important;
        scrollbar-width: none;
    }
    .reg-dashboard::-webkit-scrollbar {
        display: none;
    }
    .reg-counter {
        flex: 0 0 auto;
        min-width: 120px;
        scroll-snap-align: start;
    }

    /* ─── EVENTS SUB-TAB: mobile app style ─── */
    #subtab-events .subtab-header .btn {
        display: none !important;
    }
    #subtab-events .empty-card .btn {
        display: none !important;
    }
    #events-tbody tr {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            transform 0.15s,
            box-shadow 0.15s;
    }
    #events-tbody tr:active {
        transform: scale(0.985);
        box-shadow: none;
    }
    #events-tbody .td-actions {
        display: none !important;
    }

    /* ─── HOUSEHOLDS SUB-TAB: mobile app style ─── */
    #subtab-households .subtab-header .btn {
        display: none !important;
    }
    #subtab-households .empty-card .btn {
        display: none !important;
    }
    #households-tbody tr {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            transform 0.15s,
            box-shadow 0.15s;
    }
    #households-tbody tr:active {
        transform: scale(0.985);
        box-shadow: none;
    }
    #households-tbody .td-actions {
        display: none !important;
    }

    /* ─── QUESTIONS SUB-TAB: mobile app style ─── */
    #subtab-questions .subtab-header .btn {
        display: none !important;
    }
    #subtab-questions .empty-card .btn {
        display: none !important;
    }
    #questions-tbody tr {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            transform 0.15s,
            box-shadow 0.15s;
    }
    #questions-tbody tr:active {
        transform: scale(0.985);
        box-shadow: none;
    }
    #questions-tbody .td-actions {
        display: none !important;
    }
    #questions-tbody .td-drag {
        display: none !important;
    }

    /* ─── MEALS SUB-TAB: mobile app style ─── */
    #subtab-meals .meals-add-row {
        display: none !important;
    }
    .meal-option-row {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s;
    }
    .meal-option-row:active {
        transform: scale(0.985);
    }
    .meal-option-actions {
        display: none !important;
    }

    /* ─── Bottom sheet form fields ─── */
    .mob-sheet-form {
        padding: 0 20px 8px;
    }
    .mob-sheet-field {
        margin-bottom: 16px;
    }
    .mob-sheet-field label {
        display: block;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--txt-m, #8a7e72);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .mob-sheet-field input[type="text"] {
        width: 100%;
        padding: 12px 14px;
        border: 1.5px solid rgba(44, 32, 22, 0.12);
        border-radius: 10px;
        font-size: 0.88rem;
        font-family: inherit;
        background: #fff;
        transition: border-color 0.2s;
    }
    .mob-sheet-field input[type="text"]:focus {
        outline: none;
        border-color: var(--gold, #b8956a);
    }
    .mob-color-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .mob-color-input {
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        padding: 2px;
    }
    .mob-color-preview {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1.5px solid rgba(44, 32, 22, 0.1);
    }

    /* ─── FAB ─── */
    .mob-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 16px);
        right: 20px;
        z-index: 46;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, var(--gold, #b8956a), #c9a474);
        color: #fff;
        cursor: pointer;
        box-shadow:
            0 6px 20px rgba(184, 149, 106, 0.4),
            0 2px 6px rgba(0, 0, 0, 0.1);
        transition:
            transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.2s;
        animation: mobFabIn 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }
    .mob-fab:active {
        transform: scale(0.88);
        box-shadow: 0 2px 8px rgba(184, 149, 106, 0.3);
    }
    @keyframes mobFabIn {
        from {
            opacity: 0;
            transform: scale(0) rotate(-45deg);
        }
        to {
            opacity: 1;
            transform: scale(1) rotate(0);
        }
    }

    /* ─── GUESTS BOTTOM TAB BAR ─── */
    .mob-tabbar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 45;
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-top: 1px solid rgba(44, 24, 16, 0.06);
        padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 24px rgba(44, 24, 16, 0.05);
    }
    .mob-tabbar-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        border: none;
        background: none;
        cursor: pointer;
        padding: 8px 2px 4px;
        position: relative;
        color: var(--txt-m, #8a7a6c);
        transition: color 0.2s;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-tabbar-btn span {
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.02em;
    }
    .mob-tabbar-btn svg {
        width: 22px;
        height: 22px;
        transition: transform 0.2s;
    }
    .mob-tabbar-btn.active {
        color: var(--gold, #b8956a);
    }
    .mob-tabbar-btn.active svg {
        transform: scale(1.12);
    }
    .mob-tabbar-btn.active::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: var(--gold, #b8956a);
    }
    .mob-tabbar-btn:active {
        opacity: 0.6;
    }

    /* Pad guests content so bottom tab bar doesn't overlap */
    #tab-guests {
        padding-bottom: 80px !important;
    }

    /* ─── BOTTOM SHEETS (shared) ─── */
    .mob-sheet-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 50;
        background: rgba(44, 24, 16, 0.35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        align-items: flex-end;
        opacity: 0;
        transition: opacity 0.35s ease;
    }
    .mob-sheet-overlay.open {
        opacity: 1;
    }
    .mob-sheet {
        width: 100%;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-radius: 20px 20px 0 0;
        padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .mob-sheet-overlay.open .mob-sheet {
        transform: translateY(0);
    }
    .mob-sheet-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: rgba(44, 24, 16, 0.18);
        margin: 8px auto 12px;
        cursor: grab;
        touch-action: none;
    }
    .mob-sheet-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 20px;
        color: var(--txt, #2c1810);
    }

    /* ─── FILTER SHEET ─── */
    .mob-sheet-section {
        margin-bottom: 20px;
    }
    .mob-sheet-section > label {
        /* display: block; */
        /* font-size: 0.62rem; */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--txt-m, #8a7a6c);
        margin-bottom: 10px;
    }
    .mob-segmented {
        display: flex;
        gap: 0;
        background: rgba(44, 24, 16, 0.04);
        border-radius: 10px;
        padding: 3px;
    }
    .mob-segmented button {
        flex: 1;
        border: none;
        background: none;
        padding: 9px 4px;
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--txt-m, #8a7a6c);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }
    .mob-segmented button.active {
        background: #fff;
        color: var(--txt, #2c1810);
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.08);
    }
    .mob-chip-scroll {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2px 0;
        scrollbar-width: none;
    }
    .mob-chip-scroll::-webkit-scrollbar {
        display: none;
    }
    .mob-chip {
        flex: 0 0 auto;
        padding: 7px 14px;
        border-radius: 100px;
        font-size: 0.7rem;
        font-weight: 500;
        border: 1px solid rgba(44, 24, 16, 0.1);
        background: #fff;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }
    .mob-chip.active {
        background: var(--gold, #b8956a);
        color: #fff;
        border-color: var(--gold, #b8956a);
    }
    .mob-sheet-apply {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 14px;
        background: var(--txt, #2c1810);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: opacity 0.2s;
        margin-top: 8px;
    }
    .mob-sheet-apply:active {
        opacity: 0.8;
    }
    .mob-sheet-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        cursor: pointer;
    }
    .mob-sheet-toggle input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--gold, #b8956a);
        cursor: pointer;
    }
    /* iOS-style toggle switch */
    .mob-switch-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        cursor: pointer;
    }
    .mob-switch-row input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .mob-switch-track {
        display: block;
        position: relative;
        flex-shrink: 0;
        width: 44px;
        height: 26px;
        border-radius: 13px;
        background: #ddd;
        transition: background 0.25s;
    }
    .mob-switch-track::before {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .mob-switch-row input:checked + .mob-switch-track {
        background: var(--gold, #b8956a);
    }
    .mob-switch-row input:checked + .mob-switch-track::before {
        transform: translateX(18px);
    }
    /* Switch card — text left, toggle right, tinted bg */
    .mob-switch-card {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 14px 16px;
        border-radius: 14px;
        background: rgba(44, 24, 16, 0.04);
        border: 1px solid rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition:
            background 0.25s,
            border-color 0.25s;
        text-transform: none !important;
        letter-spacing: 0 !important;
        position: relative;
    }
    .mob-switch-card.active {
        background: rgba(184, 149, 106, 0.12);
        border-color: rgba(184, 149, 106, 0.3);
    }
    .mob-switch-card .mob-switch-track {
        flex-shrink: 0;
    }
    .mob-switch-card.active .mob-switch-track {
        background: var(--gold, #b8956a);
    }
    .mob-switch-card.active .mob-switch-track::before {
        transform: translateX(18px);
    }
    .mob-switch-card-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        min-width: 0;
    }
    .mob-switch-card-label {
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        text-transform: none !important;
        letter-spacing: 0 !important;
    }
    .mob-switch-card-status {
        font-size: 0.7rem;
        font-weight: 400;
        color: var(--txt-l, #8b7e74);
        transition: color 0.25s;
    }
    .mob-switch-card.active .mob-switch-card-status {
        color: var(--gold, #b8956a);
    }
    .mob-sheet-action-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(44, 24, 16, 0.1);
        border-radius: 12px;
        background: #fff;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: background 0.15s;
    }
    .mob-sheet-action-btn:active {
        background: var(--cream-d, #e8ddd0);
    }

    /* ─── GUEST DETAIL SHEET ─── */
    .mob-detail-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(44, 24, 16, 0.06);
    }
    .mob-detail-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 700;
        color: #fff;
        flex-shrink: 0;
    }
    .mob-detail-name {
        flex: 1;
        min-width: 0;
    }
    .mob-detail-name h4 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0 0 2px;
        color: var(--txt, #2c1810);
    }
    .mob-detail-name small {
        font-size: 0.72rem;
        color: var(--txt-m, #8a7a6c);
    }
    .mob-detail-rows {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }
    .mob-detail-row {
        display: flex;
        align-items: flex-start;
        gap: 12px;
    }
    .mob-detail-row svg {
        flex-shrink: 0;
        color: var(--txt-xl, #c4b5a7);
        margin-top: 1px;
    }
    .mob-detail-row-content {
        flex: 1;
        min-width: 0;
    }
    .mob-detail-row-label {
        font-size: 0.58rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--txt-m, #8a7a6c);
        font-weight: 600;
        margin-bottom: 1px;
    }
    .mob-detail-row-value {
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        word-break: break-word;
    }
    .mob-detail-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding-top: 16px;
        border-top: 1px solid rgba(44, 24, 16, 0.06);
    }
    .mob-detail-actions button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 8px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        border-radius: 12px;
        background: #fff;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: all 0.15s;
    }
    .mob-detail-actions button:active {
        background: rgba(44, 24, 16, 0.03);
        transform: scale(0.97);
    }
    .mob-detail-actions button.mob-action-danger {
        color: #dc2626;
        border-color: rgba(220, 38, 38, 0.15);
    }
    .mob-detail-actions button.mob-action-primary {
        background: var(--txt, #2c1810);
        color: #fff;
        border-color: transparent;
    }

    /* ─── ANIMATIONS ─── */
    @keyframes mobSlideDown {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes mobCardIn {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    #guests-tbody tr {
        animation: mobCardIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    }
    #guests-tbody tr:nth-child(1) {
        animation-delay: 0s;
    }
    #guests-tbody tr:nth-child(2) {
        animation-delay: 0.03s;
    }
    #guests-tbody tr:nth-child(3) {
        animation-delay: 0.06s;
    }
    #guests-tbody tr:nth-child(4) {
        animation-delay: 0.09s;
    }
    #guests-tbody tr:nth-child(5) {
        animation-delay: 0.12s;
    }
    #guests-tbody tr:nth-child(6) {
        animation-delay: 0.15s;
    }
    #guests-tbody tr:nth-child(7) {
        animation-delay: 0.18s;
    }
    #guests-tbody tr:nth-child(8) {
        animation-delay: 0.21s;
    }
    #guests-tbody tr:nth-child(n + 9) {
        animation-delay: 0.24s;
    }
    /* ─── DISABLE TEXT SELECTION ON CARDS (prevents browser select on long-press) ─── */
    .mob-vd-card,
    .mob-cl-card,
    .mob-gal-card,
    .mob-photo-card,
    .mob-budget-card,
    .mob-guest-card,
    .mob-gb-card,
    .mob-msg-card,
    .mob-reg-card,
    .mob-event-card,
    .mob-hh-card,
    .mob-q-card,
    .mob-meal-card {
        -webkit-user-select: none;
        user-select: none;
    }

    /* ─── Bottom padding for all mobile card lists (above bottom nav) ─── */
    #mob-guest-list,
    #mob-gb-list,
    #mob-msg-list,
    #mob-reg-list,
    #mob-budget-list,
    #mob-vd-list,
    #mob-event-list,
    #mob-hh-list,
    #mob-q-list,
    #mob-meal-list {
        padding-bottom: 55px;
    }

    /* ═══ GUEST LIST MOBILE CARDS ═══ */
    #mob-guest-list {
        display: block !important;
    }
    .mob-guest-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-guest-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        border-left: 3px solid var(--terra);
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-guest-card:active {
        transform: scale(0.985);
    }
    .mob-guest-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-guest-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mob-guest-status-label {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--txt-m);
    }
    .mob-guest-meal {
        margin-left: auto;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--sage);
    }
    .mob-guest-card-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 30px);
    }
    .mob-guest-card-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
    }
    .mob-guest-email {
        font-size: 0.72rem;
        color: var(--txt-l, #8b7e74);
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
    }
    .mob-guest-tags {
        font-size: 0.65rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(143, 168, 135, 0.12);
        color: var(--sage, #8fa887);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-guest-plusone {
        font-size: 0.65rem;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 8px;
        background: rgba(196, 145, 138, 0.15);
        color: var(--terra);
    }
    .mob-guest-thanked {
        position: absolute;
        right: 32px;
        top: 14px;
        color: var(--terra, #c4918a);
        font-size: 0.6rem;
    }
    .mob-guest-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--txt-l);
        opacity: 0.4;
    }

    /* ═══ EVENTS MOBILE CARDS ═══ */
    #mob-event-list {
        display: block !important;
    }
    .mob-event-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-event-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        border-left: 3px solid var(--gold, #b8956a);
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-event-card:active {
        transform: scale(0.985);
    }
    .mob-ev-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-ev-date {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--gold, #b8956a);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-ev-card-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 4px;
    }
    .mob-ev-card-loc {
        font-size: 0.72rem;
        color: var(--txt-l, #8b7e74);
        display: flex;
        align-items: center;
        gap: 4px;
        margin-bottom: 6px;
    }
    .mob-ev-card-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
    .mob-ev-tag {
        display: inline-block;
        font-size: 0.62rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(143, 168, 135, 0.12);
        color: var(--sage, #8fa887);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-ev-tag.all {
        background: rgba(184, 149, 106, 0.12);
        color: var(--gold, #b8956a);
    }

    /* ═══ HOUSEHOLDS MOBILE CARDS ═══ */
    #mob-hh-list {
        display: block !important;
    }
    .mob-hh-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-hh-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-hh-card:active {
        transform: scale(0.985);
    }
    .mob-hh-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-hh-count {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--txt-m, #5a4a3e);
    }
    .mob-hh-card-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 6px;
    }
    .mob-hh-card-members {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
    }
    .mob-hh-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 0.58rem;
        border: 2px solid #fff;
        margin-right: -6px;
    }
    .mob-hh-avatar.more {
        background: var(--cream-d, #e8ddd0);
        color: var(--txt-m);
        font-size: 0.6rem;
    }
    .mob-hh-card-addr {
        font-size: 0.72rem;
        color: var(--txt-l, #8b7e74);
        display: flex;
        align-items: center;
        gap: 4px;
        margin-top: 4px;
    }

    /* ═══ QUESTIONS MOBILE CARDS ═══ */
    #mob-q-list {
        display: block !important;
    }
    .mob-q-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-q-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-q-card:active {
        transform: scale(0.985);
    }
    .mob-q-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 6px;
    }
    .mob-q-type {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(143, 168, 135, 0.12);
        color: var(--sage, #8fa887);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-q-req {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--terra, #c4918a);
    }
    .mob-q-cond {
        font-size: 0.65rem;
        color: var(--txt-l, #8b7e74);
        font-style: italic;
    }
    .mob-q-card-text {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .mob-q-card-opts {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 4px;
    }
    .mob-q-opt {
        display: inline-block;
        font-size: 0.62rem;
        font-weight: 500;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(44, 24, 16, 0.05);
        color: var(--txt-m, #5a4a3e);
    }
    .mob-q-opt.more {
        background: rgba(184, 149, 106, 0.12);
        color: var(--gold, #b8956a);
    }

    /* Question templates — horizontal scroll like dashboard */
    .questions-templates {
        margin: 0 -16px;
        padding: 0 16px;
    }
    .questions-templates h3 {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--txt-m, #5a4a3e);
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .questions-template-grid {
        display: flex !important;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
    }
    .questions-template-grid::-webkit-scrollbar {
        display: none;
    }
    .questions-template-grid .template-card {
        flex: 0 0 auto;
        min-width: 120px;
        max-width: 140px;
        scroll-snap-align: start;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 0.72rem;
    }

    /* ═══ MEALS MOBILE CARDS ═══ */
    #mob-meal-list {
        display: block !important;
    }
    .mob-meal-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-meal-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-meal-card:active {
        transform: scale(0.985);
    }
    .mob-meal-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-meal-color {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mob-meal-count {
        font-size: 0.68rem;
        font-weight: 600;
        color: var(--txt-m, #5a4a3e);
        margin-left: auto;
    }
    .mob-meal-card-name {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 6px;
    }
    .mob-meal-bar {
        height: 5px;
        border-radius: 3px;
        background: #f0ebe2;
        overflow: hidden;
    }
    .mob-meal-bar-fill {
        height: 100%;
        border-radius: 3px;
        transition: width 0.3s;
    }
    .mob-meal-dietary {
        margin-top: 16px;
        padding: 14px 16px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
    }
    .mob-meal-dietary-title {
        font-size: 0.74rem;
        font-weight: 700;
        color: var(--txt-m, #5a4a3e);
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-meal-dietary-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        font-size: 0.78rem;
        color: var(--txt, #2c1810);
    }
    .mob-meal-dietary-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sage, #8fa887);
        flex-shrink: 0;
    }
    .mob-meal-dietary-count {
        margin-left: auto;
        font-weight: 700;
        color: var(--txt-m);
        font-size: 0.75rem;
    }

    /* ═══ GUESTBOOK MOBILE CARDS ═══ */
    #mob-gb-list {
        display: block !important;
    }
    .mob-gb-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-gb-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 36px 14px 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-gb-card:active {
        transform: scale(0.985);
    }
    .mob-gb-card-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 0.72rem;
    }
    .mob-gb-card-body {
        flex: 1;
        min-width: 0;
    }
    .mob-gb-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-gb-card-name {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
    }
    .mob-gb-card-date {
        margin-left: auto;
        font-size: 0.68rem;
        color: var(--txt-l, #8b7e74);
        white-space: nowrap;
    }
    .mob-gb-card-msg {
        font-size: 0.78rem;
        color: var(--txt-m, #5a4a3e);
        line-height: 1.4;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .mob-gb-card-thanked {
        position: absolute;
        bottom: 10px;
        right: 12px;
        color: var(--terra, #c4918a);
        font-size: 0.8rem;
    }
    .mob-gb-chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--txt-l);
        opacity: 0.4;
    }

    /* ═══ MESSAGES MOBILE CARDS ═══ */
    #mob-msg-list {
        display: block !important;
    }
    .mob-msg-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-msg-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        border-left: 3px solid var(--terra);
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-msg-card:active {
        transform: scale(0.985);
    }
    .mob-msg-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-msg-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mob-msg-status-label {
        font-size: 0.68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--txt-m);
    }
    .mob-msg-channel {
        margin-left: 2px;
        font-size: 0.72rem;
    }
    .mob-msg-date {
        margin-left: auto;
        font-size: 0.68rem;
        color: var(--txt-l);
        white-space: nowrap;
    }
    .mob-msg-card-subject {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 30px);
    }
    .mob-msg-card-meta {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .mob-msg-recipients {
        font-size: 0.72rem;
        color: var(--txt-l, #8b7e74);
    }
    .mob-msg-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--txt-l);
        opacity: 0.4;
    }
    /* Messages menu grid */
    .mob-msg-menu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .mob-msg-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        padding: 14px 8px;
        border-radius: 12px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        background: #fff;
        cursor: pointer;
        transition:
            background 0.15s,
            transform 0.12s;
        font-family: "Jost", sans-serif;
        font-size: 0.72rem;
        color: var(--txt, #2c1810);
        text-align: center;
    }
    .mob-msg-menu-item:active {
        transform: scale(0.96);
        background: rgba(44, 24, 16, 0.04);
    }
    .mob-msg-menu-item svg {
        color: var(--terra, #c8582a);
        flex-shrink: 0;
    }

    /* ═══ REGISTRY MOBILE CARDS ═══ */
    #mob-reg-list {
        display: block !important;
    }
    .mob-reg-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-reg-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
    }
    .mob-reg-card:active {
        transform: scale(0.985);
    }
    .mob-reg-card.purchased {
        opacity: 0.7;
    }
    .mob-reg-card-img {
        width: 48px;
        height: 48px;
        border-radius: 10px;
        overflow: hidden;
        flex-shrink: 0;
        background: #f5f0e8;
    }
    .mob-reg-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mob-reg-card-body {
        flex: 1;
        min-width: 0;
    }
    .mob-reg-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-reg-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }
    .mob-reg-cat {
        display: inline-block;
        font-size: 0.65rem;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 10px;
        background: rgba(143, 168, 135, 0.12);
        color: var(--sage, #8fa887);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .mob-reg-purchased {
        font-size: 0.72rem;
        color: #22c55e;
        font-weight: 700;
    }
    .mob-reg-price {
        margin-left: auto;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--terra, #c4918a);
    }
    .mob-reg-card-title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--txt, #2c1810);
        margin-bottom: 3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100% - 30px);
    }
    .mob-reg-card-desc {
        font-size: 0.72rem;
        color: var(--txt-l, #8b7e74);
        line-height: 1.3;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .mob-reg-fund-bar {
        height: 5px;
        border-radius: 3px;
        background: #f0ebe2;
        margin-top: 6px;
        overflow: hidden;
    }
    .mob-reg-fund-fill {
        height: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #b8956a, #d4a76a);
        transition: width 0.3s;
    }
    .mob-reg-chevron {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--txt-l);
        opacity: 0.4;
        flex-shrink: 0;
    }

    /* ─── REGISTRY GRID VIEW ─── */
    .mob-reg-grid-view .mob-reg-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .mob-reg-grid-view .mob-reg-card {
        flex-direction: column;
        padding: 10px;
    }
    .mob-reg-grid-view .mob-reg-card-img {
        width: 100%;
        height: 80px;
        margin-bottom: 8px;
    }
    .mob-reg-grid-view .mob-reg-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .mob-reg-grid-view .mob-reg-chevron {
        display: none;
    }
    .mob-reg-grid-view .mob-reg-card-top {
        flex-wrap: wrap;
    }
    .mob-reg-grid-view .mob-reg-card-title {
        font-size: 0.78rem;
    }
    .mob-reg-grid-view .mob-reg-card-desc {
        display: none;
    }
    .mob-reg-detail-img {
        width: 100%;
        height: 180px;
        border-radius: 14px;
        overflow: hidden;
        margin-bottom: 12px;
        background: #f5f0e8;
    }
    .mob-reg-detail-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ─── REGISTRY CATEGORY CARDS ─── */
    .mob-reg-cat-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-reg-cat-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 16px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
        -webkit-user-select: none;
        user-select: none;
    }
    .mob-reg-cat-card:active {
        transform: scale(0.985);
    }
    .mob-reg-cat-card-top {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 4px;
    }
    .mob-reg-cat-badge {
        font-size: 0.6rem;
        padding: 2px 6px;
        border-radius: 8px;
        background: rgba(184, 149, 106, 0.1);
        color: var(--gold, #b8956a);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* ─── REGISTRY GIVERS MOBILE ─── */
    .contrib-kebab-btn {
        display: none !important;
    }
    .reg-contributions-section {
        margin-top: 16px;
        padding-top: 0;
        border-top: none;
    }
    .mob-contrib-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0;
    }
    .mob-contrib-card {
        position: relative;
        z-index: 1;
        background: #fff;
        border-radius: 14px;
        padding: 14px 40px 14px 14px;
        box-shadow: 0 1px 4px rgba(44, 24, 16, 0.06);
        cursor: pointer;
        transition: transform 0.12s;
        animation: mobCardIn 0.25s ease both;
        -webkit-user-select: none;
        user-select: none;
    }
    .mob-contrib-card:active {
        transform: scale(0.985);
    }
    .mob-contrib-card-top {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mob-contrib-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e8d5a8, #d4a76a);
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Cormorant Garamond", serif;
        font-size: 0.85rem;
        color: #fff;
        flex-shrink: 0;
        font-weight: 600;
    }
    .mob-contrib-card-info {
        flex: 1;
        min-width: 0;
    }
    .mob-contrib-card-name {
        font-size: 0.82rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-contrib-card-meta {
        font-size: 0.68rem;
        color: var(--txt-l, #8b7a68);
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-contrib-card-amount {
        font-family: "Cormorant Garamond", serif;
        font-size: 1rem;
        font-weight: 600;
        color: #c5a55a;
        flex-shrink: 0;
    }
    .mob-contrib-thanked {
        color: #C4918A;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    .mob-contrib-chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--txt-xl, #b0a090);
    }

    /* ─── REGISTRY FAB ACTION SHEET ─── */
    .mob-reg-fab-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 8px 0 4px;
    }
    .mob-reg-fab-action {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 14px 16px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        transition: background 0.15s;
        text-align: left;
    }
    .mob-reg-fab-action:active {
        background: var(--cream-d, #e8ddd0);
    }
    .mob-reg-fab-action-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .mob-reg-fab-action-title {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
    }
    .mob-reg-fab-action-desc {
        font-size: 0.72rem;
        color: var(--txt-m, #7a6b63);
        margin-top: 2px;
    }

    /* ─── SWIPE-LEFT-TO-DELETE ─── */
    .mob-swipe-indicator {
        position: absolute;
        left: 0;
        right: 0;
        background: #ef4444;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 20px;
        color: #fff;
        font-weight: 600;
        font-size: 0.72rem;
        gap: 8px;
        z-index: 0;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s;
    }
    .mob-swipe-indicator.visible {
        opacity: 1;
    }

    /* ─── LONG-PRESS BULK SELECT ─── */
    .mob-card-check {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid rgba(44, 24, 16, 0.15);
        background: #fff;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 3;
        transition: all 0.2s;
    }
    .mob-selecting .mob-card-check {
        display: flex;
    }
    .mob-card-check.checked {
        background: var(--gold, #b8956a);
        border-color: var(--gold, #b8956a);
        color: #fff;
    }
    .mob-card-selected {
        background: rgba(184, 149, 106, 0.08) !important;
        border-left-color: var(--gold, #b8956a) !important;
    }

    /* ─── BULK ACTION BAR ─── */
    .mob-bulk-bar {
        position: fixed;
        bottom: 55px;
        left: 0;
        right: 0;
        background: rgba(44, 24, 16, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        color: #fff;
        display: flex;
        align-items: center;
        padding: 8px 12px;
        z-index: 100;
        transform: translateY(calc(100% + 55px));
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mob-bulk-bar.visible {
        transform: translateY(0);
    }
    .mob-bulk-bar-close {
        background: none;
        border: none;
        color: #fff;
        margin-right: 8px;
        padding: 4px;
        line-height: 1;
    }
    .mob-bulk-bar-count {
        flex: 1;
        font-weight: 600;
        font-size: 0.68rem;
        white-space: nowrap;
    }
    .mob-bulk-bar-actions {
        display: flex;
        gap: 6px;
    }
    .mob-bulk-bar-btn {
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 3px;
        white-space: nowrap;
    }
    .mob-bulk-bar-btn:active {
        background: rgba(255, 255, 255, 0.1);
    }
    .mob-bulk-bar-btn.danger {
        color: #fca5a5;
        border-color: rgba(252, 165, 165, 0.3);
    }

    /* ─── UNDO TOAST ─── */
    .mob-undo-toast {
        position: fixed;
        bottom: 130px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(44, 24, 16, 0.92);
        color: #fff;
        padding: 10px 16px;
        border-radius: 12px;
        font-size: 0.72rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 110;
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }
    .mob-undo-toast.visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
    .mob-undo-toast button {
        background: var(--gold, #b8956a);
        border: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.68rem;
        padding: 4px 12px;
        border-radius: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
} /* end 768px */

/* ─── 480px refinements ─── */
@media (max-width: 480px) {
    .mob-global-appbar {
        padding: 12px 16px;
        margin: -16px -16px 12px;
    }
    .mob-global-appbar h2 {
        font-size: 1.15rem;
    }
    .mob-gnav-btn span {
        font-size: 0.52rem;
    }
    .mob-gnav-btn svg {
        width: 22px;
        height: 22px;
    }
    .mob-hub-card {
        padding: 16px 14px;
        gap: 14px;
    }
    .mob-hub-card-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
    .mob-hub-card-title {
        font-size: 0.86rem;
    }
    .mob-appbar {
        padding: 12px 16px;
        margin: -16px -16px 12px;
    }
    .mob-search-bar {
        padding: 0 16px 10px;
        margin: -4px -16px 10px;
    }
    .mob-tabbar-btn span {
        font-size: 0.5rem;
    }
    .mob-detail-actions {
        grid-template-columns: 1fr 1fr;
    }
    .mob-segmented button {
        font-size: 0.62rem;
        padding: 8px 2px;
    }
}

/* ── Desktop hide: mobile QR gallery ── */
#mob-qr-gallery,
#mob-qr-editor {
    display: none;
}

/* ── Mobile QR / Invitation Cards ── */
@media (max-width: 768px) {
    /* Override full-page overlay — render as normal tab panel */
    #tab-qrcode.active {
        position: static !important;
        display: block !important;
        z-index: auto !important;
        overflow-y: auto !important;
        animation: none !important;
    }
    /* Hide desktop studio + topbar on mobile */
    #tab-qrcode .fp-studio,
    #tab-qrcode .fp-topbar {
        display: none !important;
    }
    /* Show mobile containers */
    #mob-qr-gallery,
    #mob-qr-editor {
        display: block;
    }

    /* ── Gallery: Mode Toggle ── */
    .mob-qr-mode-toggle {
        display: flex;
        gap: 4px;
        padding: 12px 16px 8px;
        background: var(--cream, #f8f4ef);
    }
    .mob-segmented-btn {
        flex: 1;
        padding: 10px 8px;
        border: none;
        border-radius: 10px;
        font-size: 0.76rem;
        font-weight: 500;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.2s;
        background: rgba(44, 24, 16, 0.05);
        color: rgba(44, 24, 16, 0.55);
    }
    .mob-segmented-btn.active {
        background: var(--brown, #3a2a1c);
        color: var(--cream, #f8f4ef);
        font-weight: 600;
    }

    /* ── Gallery: Style Grid ── */
    .mob-qr-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        /* padding: 12px 16px 70px; */
    }
    .mob-qr-style-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 0;
        border: none;
        background: #fff;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(44, 24, 16, 0.08);
        cursor: pointer;
        transition:
            transform 0.15s,
            box-shadow 0.15s;
        animation: mobCardIn 0.3s ease both;
        font-family: inherit;
    }
    .mob-qr-style-card:active {
        transform: scale(0.97);
    }
    .mob-qr-style-card.active {
        box-shadow:
            0 0 0 2.5px var(--gold, #b8956a),
            0 4px 16px rgba(184, 149, 106, 0.25);
    }

    /* ── Gallery: Card Thumb ── */
    .mob-qr-style-thumb {
        width: 100%;
        overflow: hidden;
        position: relative;
        background: #f5f0e8;
        border-radius: 10px 10px 0 0;
    }
    /* Real card clone: force 340x480 native (override mobile responsive rules), scale via transform */
    .mob-qr-card-clone.qr-invitation-card {
        width: 340px !important;
        min-width: 340px !important;
        height: 480px !important;
        min-height: 480px !important;
        max-width: 340px !important;
        position: absolute !important;
        top: 0;
        left: 0;
        pointer-events: none;
        display: block;
        box-shadow: none !important;
        animation: none !important;
        transition: none !important;
        margin: 0 !important;
        padding: 4px !important;
    }
    .mob-qr-card-clone .inv-content {
        min-height: 460px !important;
        padding: 36px 28px 28px !important;
    }
    .mob-qr-card-clone .inv-names {
        font-size: 1.8rem !important;
    }
    .mob-qr-style-thumb > svg:first-child {
        width: 100%;
        height: 100%;
        display: block;
    }
    /* ── Canva-like hover overlay ── */
    .mob-qr-style-thumb::after {
        content: attr(data-hover-label);
        position: absolute;
        inset: 0;
        background: rgba(58, 42, 28, 0.45);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 5;
        pointer-events: none;
        border-radius: 0;
    }
    .mob-qr-style-card:hover .mob-qr-style-thumb::after,
    .mob-qr-style-card:active .mob-qr-style-thumb::after {
        opacity: 1;
    }
    .mob-qr-active-badge {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--gold, #b8956a);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        box-shadow: 0 2px 6px rgba(184, 149, 106, 0.4);
    }
    .mob-qr-style-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--brown, #3a2a1c);
        padding: 0 8px;
        text-align: center;
    }
    .mob-qr-active-label {
        font-size: 0.62rem;
        font-weight: 600;
        color: var(--gold, #b8956a);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding-bottom: 10px;
    }
    .mob-qr-style-card:not(.active) .mob-qr-style-name {
        padding-bottom: 12px;
    }

    /* ── Gallery: Favorite Button ── */
    .mob-qr-fav-btn {
        position: absolute;
        top: 8px;
        left: 8px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(6px);
        color: rgba(44, 24, 16, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 11;
        cursor: pointer;
        transition:
            color 0.2s,
            transform 0.2s,
            background 0.2s;
        padding: 0;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    .mob-qr-fav-btn:active {
        transform: scale(1.15);
    }
    .mob-qr-fav-btn.active {
        color: var(--gold, #b8956a);
        background: rgba(255, 255, 255, 0.95);
    }

    /* ── Gallery: Empty State ── */
    .mob-qr-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 20px;
        color: rgba(44, 24, 16, 0.4);
        font-size: 0.85rem;
        font-style: italic;
    }

    /* ── Editor: Preview Area ── */
    /* Remove blur from envelope settings sheet */
    #mob-qr-env-settings-sheet {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(44, 24, 16, 0.25);
    }

    .mob-qr-preview-area {
        background: #e8e2d8;
        background-image: radial-gradient(ellipse at 50% 0%, rgba(201, 169, 110, 0.08) 0%, transparent 60%);
        padding: 14px 16px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 420px;
    }

    /* ── Face Toggle Bar (Recto / Verso / Enveloppe) ── */
    .mob-qr-face-bar {
        display: flex;
        gap: 3px;
        padding: 3px;
        background: rgba(44, 24, 16, 0.07);
        border-radius: 12px;
        margin-bottom: 14px;
        width: 100%;
        max-width: 320px;
    }
    .mob-qr-face-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 7px 4px;
        border: none;
        border-radius: 10px;
        background: transparent;
        font-family: inherit;
        font-size: 0.68rem;
        font-weight: 500;
        color: rgba(44, 24, 16, 0.45);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .mob-qr-face-btn.active {
        background: #fff;
        color: var(--txt, #2c1810);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
    .mob-qr-face-btn svg {
        flex-shrink: 0;
    }

    .mob-qr-card-stage {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mob-qr-flipper {
        perspective: 1200px;
        width: 280px;
        height: 395px;
    }
    .mob-qr-flipper .qr-card-flipper {
        width: 340px !important;
        height: 480px !important;
        aspect-ratio: unset !important;
        transform: scale(0.824);
        transform-origin: 0 0;
        /* No 3D flip on mobile — JS toggles display instead (Safari compat) */
        transform-style: flat !important;
        -webkit-transform-style: flat !important;
    }
    .mob-qr-flipper .qr-card-front,
    .mob-qr-flipper .qr-card-back {
        width: 340px !important;
        min-width: 340px !important;
        max-width: 340px !important;
        height: 480px !important;
        min-height: 480px !important;
        /* Kill 3D rotation — show/hide via JS */
        transform: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    /* Back face starts hidden (JS shows it when switching to verso) */
    .mob-qr-flipper .qr-card-back {
        display: none;
    }
    .mob-qr-flipper .inv-content {
        min-height: 472px !important; /* 480 − 8px card padding */
        padding: 36px 28px 28px !important;
    }
    .mob-qr-flipper .qr-invitation-card {
        box-shadow:
            0 8px 32px rgba(58, 42, 28, 0.22),
            0 2px 8px rgba(58, 42, 28, 0.1);
    }
    /* Back face: ensure proper spacing, prevent text overlap */
    .mob-qr-flipper .inv-back-content {
        height: 100% !important;
        padding: 28px 20px !important;
        gap: 6px;
    }
    .mob-qr-flipper .inv-back-qr {
        margin-bottom: 12px;
    }
    .mob-qr-flipper .inv-back-qr canvas {
        max-width: 120px;
        max-height: 120px;
    }
    .mob-qr-flipper .inv-back-scan {
        font-size: 0.55rem;
        margin: 0 0 2px;
    }
    .mob-qr-flipper .inv-back-url {
        font-size: 0.45rem;
        margin: 0 0 12px;
        max-width: 200px;
    }
    .mob-qr-flipper .inv-back-names {
        font-size: 0.8rem;
        margin: 0 0 2px;
    }
    .mob-qr-flipper .inv-back-date {
        font-size: 0.55rem;
    }
    .mob-qr-flipper .inv-back-hashtag {
        font-size: 0.58rem;
        margin: 0 0 2px;
    }
    .mob-qr-flipper .inv-back-rsvp-contact {
        font-size: 0.42rem;
        margin: 4px 0 0;
    }
    .mob-qr-field-row {
        display: flex;
        align-items: center;
        gap: 0;
    }
    .mob-qr-field-row label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 34px;
        background: rgba(44, 24, 16, 0.05);
        border: 1px solid rgba(44, 24, 16, 0.12);
        border-right: none;
        border-radius: 10px 0 0 10px;
        font-family: "Jost", sans-serif;
        font-size: 0.82rem;
        font-weight: 600;
        color: rgba(44, 24, 16, 0.45);
    }
    .mob-qr-field-row .mob-qr-text-input {
        border-radius: 0 10px 10px 0;
    }
    .mob-qr-flipper .inv-back-ornament {
        margin-bottom: 8px;
    }
    .mob-qr-flipper .inv-back-title {
        font-size: 1.1rem;
    }
    .mob-qr-flipper .inv-back-desc {
        font-size: 0.52rem;
        line-height: 1.5;
    }
    .mob-qr-flipper .inv-back-text-block {
        padding: 4px 16px 8px;
        gap: 6px;
    }
    .mob-qr-swipe-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.65rem;
        color: rgba(58, 42, 28, 0.35);
        margin-top: 10px;
        animation: mobFadeIn 0.5s ease 1.5s both;
    }
    @keyframes mobFadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Envelope Preview (Face 2) ── */
    /* ── Envelope stage: uses desktop fp-env-* classes, scaled for mobile ── */
    .mob-qr-env-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 10px 0;
    }
    /* Scale desktop envelope down for mobile screens */
    #mob-qr-env-stage .fp-envelope-preview {
        padding: 16px 12px 10px;
    }
    #mob-qr-env-stage .fp-env-wrapper {
        width: 280px;
        height: 200px;
    }
    #mob-qr-env-stage .fp-env-flap {
        height: 100px;
    }
    #mob-qr-env-stage .fp-env-left-v {
        border-width: 100px 0 0 140px;
    }
    #mob-qr-env-stage .fp-env-right-v {
        border-width: 100px 140px 0 0;
    }
    #mob-qr-env-stage .fp-env-bottom-v {
        height: 100px;
    }
    #mob-qr-env-stage .fp-env-card-inside {
        width: 155px;
        height: 62px;
        margin-bottom: -10px;
    }
    #mob-qr-env-stage .fp-env-card-inside.rising {
        transform: translateY(-56px);
    }
    #mob-qr-env-stage .fp-env-card-names {
        font-size: 0.78rem;
    }
    #mob-qr-env-stage .fp-env-card-date {
        font-size: 0.52rem;
    }
    #mob-qr-env-stage .fp-env-monogram {
        font-size: 0.95rem;
        top: 22px;
    }
    .mob-qr-env-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .mob-qr-env-customize {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 18px;
        border: 1px solid rgba(44, 24, 16, 0.12);
        border-radius: 20px;
        background: #fff;
        font-family: inherit;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: background 0.15s;
    }
    .mob-qr-env-customize:active {
        background: var(--cream-d, #e8ddd0);
    }

    /* ── Preview Stage (face 3 — guest view with real card) ── */
    .mob-qr-preview-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
    }
    .mob-qr-pv-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.65rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(58, 42, 28, 0.5);
        background: rgba(34, 197, 94, 0.08);
        border: 1px solid rgba(34, 197, 94, 0.2);
        border-radius: 20px;
        padding: 4px 12px;
    }
    .mob-qr-pv-area {
        position: relative;
        width: 280px;
        height: 360px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    /* Envelope */
    .mob-qr-pv-envelope {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 250px;
        height: 175px;
        background: #f9d8cc;
        border-radius: 4px 4px 8px 8px;
        z-index: 10;
        filter: drop-shadow(0 8px 24px rgba(58, 42, 28, 0.2));
        transition:
            opacity 0.65s ease,
            transform 0.65s ease;
        cursor: pointer;
    }
    .mob-qr-pv-envelope.done {
        opacity: 0;
        transform: translateX(-50%) translateY(20px) scale(0.94);
        pointer-events: none;
    }
    @keyframes mobPvWiggle {
        0%,
        100% {
            transform: translateX(-50%) rotate(0deg) translateY(0);
        }
        18% {
            transform: translateX(-50%) rotate(-2deg) translateY(-3px);
        }
        36% {
            transform: translateX(-50%) rotate(2deg) translateY(-5px);
        }
        54% {
            transform: translateX(-50%) rotate(-1.2deg) translateY(-2px);
        }
        72% {
            transform: translateX(-50%) rotate(1.5deg) translateY(-4px);
        }
        90% {
            transform: translateX(-50%) rotate(-0.8deg) translateY(-1px);
        }
    }
    .mob-qr-pv-envelope.wiggle {
        animation: mobPvWiggle 2s ease-in-out infinite;
    }
    .mob-qr-pv-env-flap {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 52%;
        background: #edab94;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        transform-origin: top center;
        transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }
    .mob-qr-pv-env-flap.open {
        transform: rotateX(180deg);
    }
    .mob-qr-pv-env-mono {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-family: "Cormorant Garamond", serif;
        font-size: 0.9rem;
        letter-spacing: 0.12em;
        color: rgba(80, 40, 20, 0.7);
        white-space: nowrap;
        pointer-events: none;
    }
    .mob-qr-pv-env-left-v {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 87px 0 0 125px;
        border-color: transparent transparent transparent rgba(0, 0, 0, 0.06);
    }
    .mob-qr-pv-env-right-v {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 87px 125px 0 0;
        border-color: transparent rgba(0, 0, 0, 0.06) transparent transparent;
    }
    .mob-qr-pv-env-bottom-v {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50%;
        background: rgba(0, 0, 0, 0.04);
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
    /* Card scene — rises from envelope */
    .mob-qr-pv-card-scene {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%) translateY(140px);
        opacity: 0;
        z-index: 5;
        transition:
            transform 0.78s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.55s ease;
    }
    .mob-qr-pv-card-scene.risen {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        z-index: 20;
    }
    .mob-qr-pv-flipper {
        width: 204px;
        height: 288px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    }
    .mob-qr-pv-flipper.flipped {
        transform: rotateY(180deg);
    }
    .mob-qr-pv-face {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border-radius: 4px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        box-shadow:
            0 12px 40px rgba(58, 42, 28, 0.25),
            0 3px 10px rgba(58, 42, 28, 0.12);
    }
    .mob-qr-pv-back {
        transform: rotateY(180deg);
    }
    .mob-qr-pv-face .qr-invitation-card {
        transform-origin: top left !important;
        transform: scale(0.6) !important;
        width: 340px !important;
        min-width: 340px !important;
        height: 480px !important;
        min-height: 480px !important;
        max-height: 480px !important;
        zoom: unset !important;
        box-shadow: none !important;
        animation: none !important;
        transition: none !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    /* Force desktop card layout inside preview — override 600px responsive rules */
    .mob-qr-pv-face .inv-content {
        min-height: 472px !important;
        padding: 30px 24px 24px !important;
    }
    .mob-qr-pv-face .inv-names {
        font-size: 1.65rem !important;
    }
    .mob-qr-pv-face .inv-corner {
        width: 165px !important;
        height: 188px !important;
    }
    .mob-qr-pv-face .inv-seal {
        width: 52px !important;
        height: 52px !important;
    }
    .mob-qr-pv-face .inv-back-content {
        height: 100% !important;
        padding: 36px 24px !important;
    }
    /* Flip button */
    .mob-qr-pv-flip-btn {
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 6px;
        background: var(--brown, #3a2a1c);
        color: var(--cream, #fbf7f0);
        border: none;
        border-radius: 20px;
        padding: 7px 16px;
        font-size: 0.7rem;
        font-family: inherit;
        letter-spacing: 0.04em;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition:
            opacity 0.4s ease,
            background 0.15s;
        white-space: nowrap;
    }
    .mob-qr-pv-flip-btn.visible {
        opacity: 1;
        pointer-events: auto;
    }
    .mob-qr-pv-flip-btn:active {
        background: rgba(58, 42, 28, 0.8);
    }
    /* Hint text */
    .mob-qr-pv-hint {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.75rem;
        color: rgba(58, 42, 28, 0.4);
        letter-spacing: 0.06em;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        opacity: 0;
        transition: opacity 0.5s ease;
        margin: 0;
    }
    .mob-qr-pv-hint.visible {
        opacity: 1;
    }

    /* ── Envelope Settings Swatches ── */
    .mob-qr-env-swatches {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }
    .mob-qr-env-swatch {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2.5px solid transparent;
        cursor: pointer;
        transition: all 0.15s;
    }
    .mob-qr-env-swatch.active {
        border-color: var(--gold, #b8956a);
        box-shadow: 0 0 0 2px rgba(184, 149, 106, 0.25);
    }
    .mob-qr-env-color-input {
        width: 36px;
        height: 36px;
        border: 1.5px dashed rgba(44, 24, 16, 0.18);
        border-radius: 50%;
        cursor: pointer;
        padding: 2px;
        background: transparent;
    }

    /* ── Editor: Style Carousel ── */
    .mob-qr-carousel {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 14px 16px;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        background: var(--cream, #f8f4ef);
        border-top: 1px solid rgba(44, 24, 16, 0.06);
    }
    .mob-qr-carousel::-webkit-scrollbar {
        display: none;
    }
    .mob-qr-carousel-item {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px;
        border: 2px solid transparent;
        border-radius: 8px;
        cursor: pointer;
        scroll-snap-align: center;
        background: none;
        font-family: inherit;
        transition: border-color 0.15s;
    }
    .mob-qr-carousel-item.active {
        border-color: var(--gold, #b8956a);
        background: rgba(184, 149, 106, 0.08);
    }
    .mob-qr-carousel-thumb {
        width: 44px;
        aspect-ratio: 340 / 480;
        overflow: hidden;
        border-radius: 3px;
        position: relative;
        background: #f0ebe1;
    }
    .mob-qr-carousel-thumb > svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    .mob-qr-carousel-item span {
        font-size: 0.56rem;
        color: rgba(44, 24, 16, 0.55);
        white-space: nowrap;
        max-width: 52px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-qr-carousel-item.active span {
        color: var(--gold, #b8956a);
        font-weight: 600;
    }

    /* ── Editor: 5-Tab Toolbar (replaces global nav) ── */

    .mob-qr-toolbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        display: flex;
        gap: 0;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) 8px;
        background: rgba(251, 247, 240, 0.92);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(44, 24, 16, 0.08);
    }
    .mob-qr-tool-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 2px;
        border: none;
        border-radius: 10px;
        background: transparent;
        color: rgba(44, 24, 16, 0.45);
        cursor: pointer;
        font-family: inherit;
        transition: all 0.15s;
    }
    .mob-qr-tool-btn span {
        font-size: 0.58rem;
        font-weight: 500;
    }
    .mob-qr-tool-btn.active {
        background: rgba(184, 149, 106, 0.12);
        color: var(--gold, #b8956a);
    }
    .mob-qr-tool-btn.mob-tool-disabled {
        opacity: 0.3;
        pointer-events: auto;
    }

    /* ── Bottom Sheet: Share Grid ── */
    .mob-qr-share-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .mob-qr-share-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 8px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        font-family: inherit;
        font-size: 0.72rem;
        color: var(--txt, #2c1810);
        transition: background 0.15s;
    }
    .mob-qr-share-btn:active {
        background: rgba(44, 24, 16, 0.04);
    }

    /* ── Send sheet: banner + description + actions ── */
    .mob-qr-send-banner {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        background: rgba(184, 149, 106, 0.08);
        border-radius: 12px;
        border-left: 3px solid var(--gold, #b8956a);
        margin: 0 0 10px;
    }
    .mob-qr-send-banner div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .mob-qr-send-banner strong {
        font-size: 0.82rem;
        color: var(--brown, #3a2a1c);
    }
    .mob-qr-send-banner span {
        font-size: 0.7rem;
        color: rgba(44, 24, 16, 0.55);
    }
    .mob-qr-send-desc {
        font-size: 0.72rem;
        color: rgba(44, 24, 16, 0.5);
        line-height: 1.5;
        margin: 0 0 6px;
    }
    .mob-qr-send-action {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(44, 24, 16, 0.08);
        border-radius: 12px;
        background: #fff;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 500;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: background 0.15s;
    }
    .mob-qr-send-action:active {
        background: var(--cream-d, #e8ddd0);
    }
    .mob-qr-send-action svg {
        flex: 0 0 auto;
        color: var(--gold, #b8956a);
    }

    /* ── Bottom Sheet: Style List ── */
    .mob-qr-style-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .mob-qr-style-list .mob-chip {
        font-size: 0.76rem;
    }

    /* ── Bottom Sheet: Color Row ── */
    .mob-qr-color-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
    }
    .mob-qr-color-row input[type="color"] {
        width: 48px;
        height: 48px;
        border: 1px solid rgba(44, 24, 16, 0.12);
        border-radius: 12px;
        cursor: pointer;
        padding: 3px;
        background: transparent;
    }
    .mob-qr-color-row span,
    .mob-qr-color-row label {
        font-family: "Jost", monospace;
        font-size: 0.85rem;
        color: rgba(44, 24, 16, 0.6);
        letter-spacing: 0.5px;
    }

    /* ── Bottom Sheet: Input Fields ── */
    .mob-qr-input {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid rgba(44, 24, 16, 0.12);
        border-radius: 12px;
        font-family: inherit;
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        background: #fff;
        transition: border-color 0.2s;
    }
    .mob-qr-input:focus {
        outline: none;
        border-color: var(--gold, #b8956a);
    }
    .mob-qr-reset-btn {
        margin-top: 8px;
        padding: 6px 14px;
        border: 1px solid rgba(44, 24, 16, 0.1);
        border-radius: 8px;
        background: none;
        font-family: inherit;
        font-size: 0.72rem;
        color: rgba(44, 24, 16, 0.5);
        cursor: pointer;
    }
    .mob-qr-field-label {
        display: block;
        font-size: 0.72rem;
        font-weight: 500;
        color: rgba(44, 24, 16, 0.6);
        margin-bottom: 8px;
    }
    .mob-qr-url-row {
        display: flex;
        gap: 8px;
    }
    .mob-qr-url-row input {
        flex: 1;
        min-width: 0;
    }
    .mob-qr-gen-btn {
        padding: 10px 16px;
        border: none;
        border-radius: 12px;
        background: var(--gold, #b8956a);
        color: #fff;
        font-family: inherit;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.15s;
    }
    .mob-qr-gen-btn:active {
        opacity: 0.8;
    }

    /* ── QR text/design sheets: section titles ── */
    #mob-qr-text-sheet-v2 .mob-sheet-section-title,
    #mob-qr-design-sheet .mob-sheet-section-title {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 7px 12px;
        margin: 0 -12px 10px;
        background: rgba(44, 24, 16, 0.04);
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: rgba(44, 24, 16, 0.45);
    }

    /* ── QR text sheet: textarea ── */
    .mob-qr-textarea {
        resize: vertical;
        min-height: 60px;
        font-family: "Jost", sans-serif;
        line-height: 1.5;
    }

    /* ── QR: Verso-only badge ── */
    .mob-qr-verso-badge {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        margin: 0 0 12px;
        background: rgba(184, 149, 106, 0.1);
        border: 1px solid rgba(184, 149, 106, 0.25);
        border-radius: 8px;
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--gold, #b8956a);
    }
    .mob-qr-verso-badge svg {
        flex-shrink: 0;
        color: var(--gold, #b8956a);
    }

    /* ── QR: Verso hint when QR active ── */
    .mob-qr-verso-hint {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
        background: rgba(184, 149, 106, 0.08);
        border-radius: 10px;
        font-size: 0.73rem;
        line-height: 1.45;
        color: rgba(44, 24, 16, 0.6);
    }
    .mob-qr-verso-hint svg {
        flex-shrink: 0;
        margin-top: 1px;
        color: var(--gold, #b8956a);
    }

    /* ── QR: Color row (color picker + hex + reset) ── */
    .mob-qr-color-row {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mob-qr-color-row input[type="color"] {
        width: 40px;
        height: 34px;
        padding: 2px;
        border: 1px solid rgba(44, 24, 16, 0.12);
        border-radius: 8px;
        background: #fff;
        cursor: pointer;
    }
    .mob-qr-color-hex {
        font-size: 0.78rem;
        font-family: "Jost", monospace;
        color: rgba(44, 24, 16, 0.55);
        letter-spacing: 0.02em;
        flex: 1;
    }
    .mob-qr-color-reset {
        width: 28px; height: 28px;
        border: 1px solid rgba(44,24,16,0.1);
        border-radius: 50%;
        background: none;
        color: rgba(44,24,16,0.4);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mob-qr-color-reset:active { background: rgba(44,24,16,0.06); }
    .mob-qr-color-field {
        margin-bottom: 2px;
    }

    /* ── Design + Text sheet: section header (Recto/Verso divider) ── */
    .mob-sheet-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 0 6px;
        margin-top: 8px;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--gold, #b8956a);
    }
    .mob-sheet-section-header::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(184,149,106,0.25);
    }

    /* ── Text/Design sheet: text input ── */
    .mob-qr-text-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid rgba(44,24,16,0.1);
        border-radius: 10px;
        font-family: "Jost", sans-serif;
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        background: #fff;
        margin-top: 6px;
        transition: border-color 0.2s;
    }
    .mob-qr-text-input:focus {
        outline: none;
        border-color: var(--gold, #b8956a);
    }

    /* ── Time input ── */
    .mob-qr-time-input {
        width: 120px;
        padding: 8px 10px;
        border: 1px solid rgba(44,24,16,0.1);
        border-radius: 10px;
        font-family: "Jost", sans-serif;
        font-size: 0.82rem;
        color: var(--txt, #2c1810);
        background: #fff;
        margin-top: 6px;
    }
    .mob-qr-time-input:focus {
        outline: none;
        border-color: var(--gold, #b8956a);
    }

    /* ── Range slider ── */
    .mob-qr-range {
        width: 100%;
        height: 4px;
        -webkit-appearance: none;
        appearance: none;
        background: rgba(44,24,16,0.1);
        border-radius: 4px;
        outline: none;
        margin: 8px 0 4px;
    }
    .mob-qr-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--gold, #b8956a);
        border: 3px solid #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
        cursor: pointer;
    }
    .mob-qr-range::-moz-range-thumb {
        width: 22px; height: 22px;
        border-radius: 50%;
        background: var(--gold, #b8956a);
        border: 3px solid #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,0.15);
        cursor: pointer;
    }

    /* ── Alignment button group ── */
    .mob-qr-align-group {
        display: flex;
        gap: 6px;
    }
    .mob-qr-align-btn {
        flex: 1;
        padding: 10px;
        border: 1.5px solid rgba(44,24,16,0.1);
        border-radius: 10px;
        background: #fff;
        color: rgba(44,24,16,0.5);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
    }
    .mob-qr-align-btn.active {
        border-color: var(--gold, #b8956a);
        background: rgba(184,149,106,0.08);
        color: var(--gold, #b8956a);
    }
    .mob-qr-align-btn:active { transform: scale(0.95); }

    /* ── Inline reset button (↺ icon next to section titles) ── */
    .mob-qr-inline-reset {
        border: none;
        background: none;
        color: rgba(44,24,16,0.35);
        font-size: 14px;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 4px;
    }
    .mob-qr-inline-reset:active { background: rgba(44,24,16,0.06); }

    /* ── Hint text in sheets ── */
    .mob-qr-hint-text {
        font-size: 0.75rem;
        color: rgba(44,24,16,0.45);
        font-style: italic;
        padding: 12px 0;
        text-align: center;
    }

    /* ── QR Editor: Style grid (dot/eye/logo buttons) ── */
    .mob-qr-style-grid {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    .mob-qr-style-btn {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        border: 2px solid rgba(44, 24, 16, 0.1);
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(44, 24, 16, 0.5);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .mob-qr-style-btn:active {
        transform: scale(0.92);
    }
    .mob-qr-style-btn.active {
        border-color: var(--gold, #b8956a);
        background: rgba(184, 149, 106, 0.08);
        color: var(--gold, #b8956a);
        box-shadow: 0 0 0 1px var(--gold, #b8956a);
    }
    .mob-qr-logo-grid {
        gap: 6px;
    }
    .mob-qr-logo-grid .mob-qr-style-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    /* ── QR Editor: Download row ── */
    .mob-qr-dl-row {
        display: flex;
        gap: 10px;
    }
    .mob-qr-dl-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1.5px solid rgba(44, 24, 16, 0.1);
        background: #fff;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--txt, #2c1810);
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .mob-qr-dl-btn:active {
        transform: scale(0.96);
        background: var(--cream-d, #e8ddd0);
    }
    .mob-qr-dl-btn svg {
        color: var(--gold, #b8956a);
    }

    /* ── QR Editor: Bottom sheets without blur overlay ── */
    #mob-qr-style-sheet,
    #mob-qr-design-sheet,
    #mob-qr-text-sheet-v2,
    #mob-qr-qr-sheet,
    #mob-qr-font-sheet,
    #mob-qr-photo-sheet,
    #mob-qr-envelope-sheet,
    #mob-qr-share-sheet {
        background: rgba(44, 24, 16, 0.15);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* ── QR Editor: preview area padding for fixed bottom toolbar ── */
    #mob-qr-editor {
        padding-bottom: 62px;
    }

    /* ── Saved Cards: 3-segment toggle ── */
    .mob-qr-mode-toggle .mob-segmented-btn {
        font-size: 0.68rem;
        padding: 9px 4px;
    }

    /* Saved count badge */
    .mob-qr-saved-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        border-radius: 9px;
        background: var(--gold, #b8956a);
        color: #fff;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 0 5px;
        margin-left: 4px;
    }

    /* Saved card meta (name + time) */
    .mob-qr-saved-meta {
        padding: 6px 8px 10px;
        text-align: center;
    }
    .mob-qr-saved-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--brown, #3a2a1c);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-qr-saved-time {
        font-size: 0.6rem;
        color: rgba(44, 24, 16, 0.4);
        margin-top: 2px;
    }

    /* Free plan limit indicator */
    .mob-qr-limit-bar {
        text-align: center;
        padding: 8px 16px 4px;
        font-size: 0.7rem;
        color: rgba(44, 24, 16, 0.5);
        font-weight: 500;
    }
    .mob-qr-limit-bar strong {
        color: var(--gold, #b8956a);
    }

    /* Empty slot placeholder (free plan) */
    .mob-qr-empty-slot {
        width: 100%;
        aspect-ratio: 340/480;
        border: 2px dashed rgba(44, 24, 16, 0.15);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgba(44, 24, 16, 0.25);
        gap: 6px;
    }
    .mob-qr-empty-slot svg {
        opacity: 0.4;
    }

    /* Saved empty state */
    .mob-qr-saved-empty {
        grid-column: 1 / -1;
        text-align: center;
        padding: 48px 24px;
        color: rgba(44, 24, 16, 0.45);
    }
    .mob-qr-saved-empty svg {
        margin: 0 auto 14px;
        display: block;
        opacity: 0.25;
    }
    .mob-qr-saved-empty p {
        font-size: 0.82rem;
        line-height: 1.5;
        margin: 0;
    }
    .mob-qr-saved-empty .mob-qr-empty-hint {
        font-size: 0.72rem;
        margin-top: 8px;
        opacity: 0.7;
    }

    /* ── Saved cards list (single-column, swipe-ready) ── */
    .mob-qr-saved-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .mob-qr-saved-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border-radius: 14px;
        padding: 10px 12px;
        position: relative;
        z-index: 1;
        box-shadow: 0 2px 10px rgba(44, 24, 16, 0.07);
        border-left: 3px solid var(--gold, #b8956a);
        -webkit-user-select: none;
        user-select: none;
        transition: transform 0.12s;
    }
    .mob-qr-saved-card:active {
        transform: scale(0.985);
    }
    .mob-qr-saved-card-thumb {
        width: 60px;
        height: 84px;
        flex: 0 0 60px;
        border-radius: 6px;
        overflow: hidden;
        background: var(--cream-d, #e8ddd0);
        position: relative;
    }
    .mob-qr-saved-card-thumb > .qr-invitation-card,
    .mob-qr-saved-card-thumb > [data-style] {
        width: 340px !important;
        height: 480px !important;
        transform: scale(0.176);
        transform-origin: 0 0;
        pointer-events: none;
    }
    .mob-qr-saved-card-info {
        flex: 1;
        min-width: 0;
    }
    .mob-qr-saved-card-name {
        font-family: "Cormorant Garamond", serif;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--brown, #3a2a1c);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .mob-qr-saved-card-style {
        font-size: 0.7rem;
        color: var(--gold, #b8956a);
        font-weight: 500;
        margin-top: 2px;
    }
    .mob-qr-saved-card-time {
        font-size: 0.65rem;
        color: rgba(44, 24, 16, 0.4);
        margin-top: 4px;
    }
    .mob-qr-saved-card-chevron {
        flex: 0 0 auto;
        color: rgba(44, 24, 16, 0.2);
    }

    /* Font picker grid */
    .mob-qr-font-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 4px 16px 16px;
    }
    .mob-qr-font-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 14px 8px 10px;
        border: 2px solid rgba(44, 24, 16, 0.1);
        border-radius: 12px;
        background: #fff;
        cursor: pointer;
        transition:
            border-color 0.2s,
            box-shadow 0.2s;
        font-family: inherit;
    }
    .mob-qr-font-item:active {
        transform: scale(0.97);
    }
    .mob-qr-font-item.active {
        border-color: var(--gold, #b8956a);
        box-shadow: 0 0 0 1px var(--gold, #b8956a);
    }
    .mob-qr-font-preview {
        font-size: 1rem;
        line-height: 1.2;
        color: var(--brown, #3a2a1c);
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .mob-qr-font-label {
        font-size: 0.62rem;
        color: rgba(44, 24, 16, 0.5);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 500;
    }
    .mob-qr-font-check {
        position: absolute;
        top: 6px;
        right: 6px;
        color: var(--gold, #b8956a);
    }

    /* Photo sheet */
    .mob-qr-photo-content {
        padding: 8px 16px 16px;
    }
    .mob-qr-photo-upload {
        cursor: pointer;
    }
    .mob-qr-photo-preview {
        position: relative;
        width: 100%;
        aspect-ratio: 3/4;
        max-height: 220px;
        border: 2px dashed rgba(44, 24, 16, 0.15);
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(251, 247, 240, 0.5);
        transition: border-color 0.2s;
    }
    .mob-qr-photo-preview:active {
        border-color: var(--gold, #b8956a);
    }
    .mob-qr-photo-preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: none;
    }
    .mob-qr-photo-preview.has-photo img {
        display: block;
    }
    .mob-qr-photo-preview.has-photo .mob-qr-photo-placeholder {
        display: none;
    }
    .mob-qr-photo-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        color: rgba(44, 24, 16, 0.35);
    }
    .mob-qr-photo-placeholder span {
        font-size: 0.78rem;
        text-align: center;
        line-height: 1.3;
    }
    .mob-qr-photo-hint {
        font-size: 0.7rem;
        color: rgba(44, 24, 16, 0.45);
        text-align: center;
        margin: 8px 0 4px;
        line-height: 1.3;
    }
    .mob-qr-photo-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        padding: 10px;
        margin-top: 8px;
        border: 1px solid rgba(239, 68, 68, 0.25);
        border-radius: 10px;
        background: rgba(239, 68, 68, 0.04);
        color: #ef4444;
        font-size: 0.78rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s;
        font-family: inherit;
    }
    .mob-qr-photo-remove:active {
        background: rgba(239, 68, 68, 0.12);
    }
    .mob-qr-photo-remove.hidden {
        display: none;
    }

    /* Bottom sheets above toolbar */
    #mob-qr-font-sheet,
    #mob-qr-photo-sheet {
        background: rgba(44, 24, 16, 0.15);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE DEVICE OVERRIDE — keeps mobile layout in landscape too.
   Applied via JS: <html class="mobile-device"> on real mobile devices.
   These rules ensure structural mobile layout persists across rotation.
═══════════════════════════════════════════════════════════════════ */
html.mobile-device body,
html.mobile-device #app,
html.mobile-device .layout {
    min-height: auto !important;
}
html.mobile-device .mob-menu-btn,
html.mobile-device .sidebar-overlay,
html.mobile-device .sidebar {
    display: none !important;
}
html.mobile-device .main-content {
    margin-left: 0 !important;
    padding: 16px 16px calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}
html.mobile-device .mob-global-appbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 14px 16px;
    margin: -16px -16px 16px;
    background: rgba(251, 247, 240, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(44, 24, 16, 0.06);
}
html.mobile-device .mob-global-titles {
    flex: 1;
    min-width: 0;
}
html.mobile-device .mob-global-appbar h2 {
    font-family: var(--heading-font, "Georgia", serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--txt, #2c1810);
    margin: 0;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.mobile-device .mob-global-subtitle {
    font-size: 0.68rem;
    color: var(--txt-m, #8a7a6c);
    margin: 2px 0 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.mobile-device .mob-global-subtitle:empty {
    display: none;
}
html.mobile-device .mob-title-editable {
    cursor: pointer;
    border-bottom: 1px dashed rgba(184, 149, 106, 0.5);
    padding-bottom: 1px;
}
html.mobile-device .mob-title-edit-input {
    font-family: var(--heading-font, "Georgia", serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--txt, #2c1810);
    letter-spacing: -0.02em;
    border: none;
    border-bottom: 2px solid var(--gold, #b8956a);
    background: transparent;
    outline: none;
    width: 100%;
    padding: 0 0 2px;
    margin: 0;
    caret-color: var(--gold, #b8956a);
}
html.mobile-device .mob-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: rgba(44, 24, 16, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt, #2c1810);
    cursor: pointer;
    flex-shrink: 0;
}
html.mobile-device .mob-global-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
html.mobile-device .mob-profile-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #b8956a 0%, #d4b896 100%);
    color: #fff;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 4px;
}
html.mobile-device .mob-global-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(44, 24, 16, 0.06);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(44, 24, 16, 0.05);
}
/* Hide global nav + guests tabbar on entire QR tab */
body.mob-qr-tab .mob-global-nav,
body.mob-qr-tab .mob-tabbar {
    display: none !important;
}
/* Hide global nav on photos tab (has own subtab bar) */
body.mob-photos-tab .mob-global-nav {
    display: none !important;
}
html.mobile-device .mob-gnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px 2px 4px;
    position: relative;
    color: var(--txt-m, #8a7a6c);
    -webkit-tap-highlight-color: transparent;
}
html.mobile-device .mob-gnav-btn span {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
html.mobile-device .mob-gnav-btn.active {
    color: var(--gold, #b8956a);
}
html.mobile-device .mob-gnav-btn.active svg {
    transform: scale(1.12);
}
html.mobile-device .mob-gnav-btn.active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--gold, #b8956a);
}
html.mobile-device .mob-hub-page {
    padding: 4px 0 20px;
}
html.mobile-device .mob-hub-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
html.mobile-device .mob-hub-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(44, 24, 16, 0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
html.mobile-device .mob-hub-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(184, 149, 106, 0.08), rgba(184, 149, 106, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold, #b8956a);
    flex-shrink: 0;
}
html.mobile-device .mob-hub-card-info {
    flex: 1;
    min-width: 0;
}
html.mobile-device .mob-hub-card-title {
    font-family: var(--heading-font, "Georgia", serif);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--txt, #2c1810);
    margin: 0 0 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
html.mobile-device .mob-hub-card-desc {
    font-size: 0.72rem;
    color: var(--txt-m, #8a7a6c);
    line-height: 1.35;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.mobile-device .mob-hub-card-arrow {
    color: var(--txt-xl, #b0a090);
    flex-shrink: 0;
}
html.mobile-device .mob-hub-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--txt-xl, #b0a090);
    padding: 16px 4px 6px;
    margin: 0;
}
html.mobile-device .mob-hub-section-label:first-child {
    padding-top: 0;
}
/* Hide all desktop page-headers on mobile device */
html.mobile-device .tab-panel > .page-header {
    display: none !important;
}
/* Appbar buttons */
html.mobile-device .mob-appbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: rgba(44, 24, 16, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--txt, #2c1810);
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
/* Sheets */
html.mobile-device .mob-sheet-overlay {
    display: none;
}
html.mobile-device .mob-sheet-overlay.open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(44, 24, 16, 0.15);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: flex-end;
    justify-content: center;
}
html.mobile-device .mob-fab {
    position: fixed;
    bottom: 75px;
    right: 20px;
    z-index: 30;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #b8956a, #d4b896);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(184, 149, 106, 0.35);
}
/* Profile page */
html.mobile-device .mob-profile-page {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--cream, #faf5ee);
    overflow-y: auto;
}
html.mobile-device .mob-profile-page.open {
    display: block;
}
/* Mobile tabbar for subtabs */
html.mobile-device .mob-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(44, 24, 16, 0.06);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 24px rgba(44, 24, 16, 0.05);
}
html.mobile-device .mob-tabbar-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px 2px;
    color: var(--txt-m, #8a7a6c);
    font-size: 0.58rem;
    font-weight: 600;
}
html.mobile-device .mob-tabbar-btn.active {
    color: var(--gold, #b8956a);
}
/* Search bar */
html.mobile-device .mob-search-bar {
    display: none;
    padding: 0 16px 10px;
    margin: -10px -16px 12px;
    background: rgba(251, 247, 240, 0.94);
}
html.mobile-device .mob-search-bar.open {
    display: block;
}