:root{--primary-bg:#faf9f7;--secondary-bg:#f5f3f0;--accent-bg:#ebe8e4;--pages-list-hover-bg:#ebe8e4;--pages-list-active-bg:#e2ddd6;--primary-text:#3d3935;--secondary-text:#6b6560;--accent-text:#2c2826;--primary-accent:#8b7355;--secondary-accent:#6f5b44;--border-color:#e0dcd6;--shadow-color:rgba(0, 0, 0, 0.06);--font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--border-radius:8px;--button-radius:8px;--card-radius:12px;--spacing-unit:1rem;--shadow-sm:0 1px 3px rgba(0, 0, 0, 0.06);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.08);--shadow-lg:0 8px 25px rgba(0, 0, 0, 0.1)}/* Dark mode: navy/slate palette */body.dark-mode{--primary-bg:#0d172a;--secondary-bg:#122241;--accent-bg:#173c84;--pages-list-hover-bg:#1a2d5a;--pages-list-active-bg:#1e3570;--primary-text:#e4e4e7;--secondary-text:#a1a1aa;--accent-text:#f4f4f5;--primary-accent:#60a5fa;--secondary-accent:#3b82f6;--border-color:#5c5c5c;--shadow-color:rgba(0, 0, 0, 0.3);--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.2);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.3);--shadow-lg:0 8px 25px rgba(0, 0, 0, 0.4)}/* Dark mode: scrollbars */body.dark-mode ::-webkit-scrollbar{width:8px;height:8px}body.dark-mode ::-webkit-scrollbar-track{background:transparent}body.dark-mode ::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.3);border-radius:4px}body.dark-mode ::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.5)}body.dark-mode{scrollbar-width:thin;scrollbar-color:rgba(255, 255, 255, 0.3) transparent}.dark-mode .theme-preview{border:1px solid rgb(255 255 255 / 15%)}.dark-mode{background:var(--primary-bg)}.dark-mode .category-item{color:#ffffff70}.dark-mode .category-section-item{border-color:var(--border-color) !important}.dark-mode .category-item .category-count{border-color:transparent}.dark-mode .category-tab:hover{color:var(--primary-text)}.dark-mode .theme-panel{background:var(--secondary-bg)}.dark-mode [type="checkbox"]:not(:checked) + .fullpage-toggle-slider{background-color:#2c3649 !important}.dark-mode .fullpage-preview-container,.dark-mode .clear-button,.dark-mode .top-bar-card,.dark-mode .category-item .category-count,.dark-mode .side-option-card{background-color:var(--secondary-bg)}.dark-mode .side-option-card span{color:var(--secondary-text)}.dark-mode .user-dropdown-item-danger{color:#ffa5a5}body{background-color:var(--primary-bg);color:var(--primary-text);font-family:var(--font-family);margin:0;padding:0;overflow:hidden}.invisible{visibility:hidden}.editor-layout{display:grid;grid-template-columns:1fr;height:calc(100vh - 65px);overflow:hidden;position:relative;transform:translateY(65px);transition:transform 0.25s ease;top:0}.editor-layout.collapsed{margin-left:0}/* ── SIDEBAR ─────────────────────────────────────────────────────────────
   Default state = HIDDEN (width: 0). The class .sidebar-ready is added by
   exitOnboardingMode() once the user has chosen a template, making the
   sidebar visible for the first time. This eliminates any flash on load.
   ──────────────────────────────────────────────────────────────────────── *//* [DISABLED_FOR_WEDDING_VERSION]: Sidebar now overlays editor via translateX (mirrors section-outline-sidebar pattern) instead of resizing main area *//* .sidebar {
    background: var(--primary-bg);
    border-right: 1px solid var(--border-color);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    z-index: 10;
    transition: none;
}
.sidebar.sidebar-ready {
    width: 300px;
    transition: width 0.3s ease;
}
.sidebar.sidebar-ready.collapsed {
    width: 0;
} */.sidebar{position:fixed;left:0;top:0;height:100vh;width:268px;/* Match section-outline-sidebar / section-outline-content width */background:var(--primary-bg);border-right:1px solid var(--border-color);box-shadow:4px 0 12px rgba(0, 0, 0, 0.08);z-index:9999;/* Hidden until sidebar-ready is added by exitOnboardingMode() */display:none;flex-direction:column;transition:none}/* Sidebar activated: show it and keep collapsed (translateX) by default */.sidebar.sidebar-ready{display:flex;transform:translateX(-100%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)}/* Sidebar open: remove collapsed class to slide into view */.sidebar.sidebar-ready:not(.collapsed){transform:translateX(0)}.dark-mode .top-bar,.dark-mode .slidebar{border-color:#5c5c5c5b}.sidebar-content{height:100%;overflow-y:auto;overflow-x:hidden;padding:1rem;border-color:transparent}.sidebar.sidebar-ready.collapsed .sidebar-content{padding:0}/* ── SIDEBAR TOGGLE BUTTON (View Your Pages) ─────────────────────────────
   Now position: absolute inside .sidebar, pokes out to the right —
   mirrors section-outline-toggle which pokes out to the left.
   Visible at left edge when sidebar is collapsed (translateX(-100%)),
   moves with sidebar when open.
   ──────────────────────────────────────────────────────────────────────── */.sidebar-toggle{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:40px;height:48px;background:var(--primary-bg);border:1px solid var(--border-color);border-left:none;border-radius:0 8px 8px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:2px 0 8px rgba(0, 0, 0, 0.05);z-index:1;transition:all 0.2s ease;color:var(--secondary-text)}/* [DISABLED_FOR_WEDDING_VERSION]: Toggle visibility now handled by parent .sidebar display/transform *//* .sidebar-toggle.sidebar-ready { display: flex; left: 300px; } *//* .sidebar-toggle.sidebar-ready.collapsed { left: 0; } *//* Same hover as .section-outline-toggle */.sidebar-toggle:hover:not(:disabled){background:#f9fafb;color:#111827}.sidebar-toggle:hover:not(:disabled) i,.sidebar-toggle:hover:not(:disabled) svg{color:#111827}body.dark-mode .sidebar-toggle:hover:not(:disabled),body.dark-mode .sidebar-toggle:hover:not(:disabled) i,body.dark-mode .sidebar-toggle:hover:not(:disabled) svg{color:#e4e4e7}.sidebar-toggle:disabled{opacity:0.4;cursor:not-allowed}.sidebar-toggle i,.sidebar-toggle svg{width:20px;height:20px}.fullpage-toggle-section{padding:20px 0 0 0}.main-area{background:var(--primary-bg);overflow-y:auto;position:relative;height:100%;/* Default: full width, no sidebar offset (onboarding / initial state) */max-width:100vw;width:100vw;transform:translateX(0);transition:transform 0.3s ease,width 0.3s ease;will-change:transform,width}/* [DISABLED_FOR_WEDDING_VERSION]: Sidebar now overlays editor — main area no longer offset *//* .editor-layout.sidebar-ready .main-area {
    max-width: calc(100vw - 300px);
    width: calc(100vw - 300px);
    transform: translateX(300px);
}
.editor-layout.sidebar-ready.collapsed .main-area,
.collapsed .main-area {
    transform: translateX(0);
    max-width: 100vw;
    width: 100vw;
} */.fullscreen .main-area{transition:none !important;transform:translateX(0);max-width:100vw}.fullscreen .modal-overlay,.fullscreen .section-outline-sidebar{display:none !important}.modal-overlay{backdrop-filter:blur(4px)}.top-bar{background:var(--primary-bg);border-bottom:1px solid var(--border-color);padding:0.75rem 1rem;display:flex;align-items:center;justify-content:space-between;height:65px;position:fixed;top:0;left:0;/* Default: no sidebar → full width. Overridden by .sidebar-ready */right:0;z-index:2;transition:left 0.3s ease}/* [DISABLED_FOR_WEDDING_VERSION]: Top bar no longer offset when sidebar is visible (overlay approach) *//* .top-bar.sidebar-ready {
    left: 300px;
} */.top-bar-left{display:flex;align-items:center;flex:0 1 auto}.top-bar-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}.top-bar-right{display:flex;align-items:center;gap:1rem;flex:0 1 auto;margin-left:auto}/* Mobile-only elements: hidden on desktop */.mobile-menu-btn,.mobile-more-overlay,.user-menu-overlay{display:none}/* YesLovey logo in "Your Pages" button: hidden on desktop, shown on mobile */.view-pages-logo{display:none}/* Onboarding visible: hide navbar title and buttons, keep user block + Your Pages btn */body.onboarding-visible .top-bar-left > *:not(#view-pages-btn),body.onboarding-visible .top-bar-center{display:none !important}body.onboarding-visible .top-bar-right > *:not(.user-info){display:none !important}/* [DISABLED_FOR_WEDDING_VERSION]: Pages sidebar and its toggle are no longer used (onboarding + editor). Kept hidden if HTML is ever uncommented. */#pages-sidebar,#toggle-sidebar{display:none !important}/* Hide Layout (section-outline-toggle) during onboarding so it matches normal onboarding view */body.onboarding-visible .section-outline-toggle{display:none !important}/* [DISABLED_FOR_WEDDING_VERSION]: Pages sidebar removed; rule no longer needed. *//* body.skin-panel-open #toggle-sidebar {
    visibility: hidden;
    pointer-events: none;
} *//* Hide "+ New Page" in the pages sidebar during onboarding (user must choose a template first) */body.onboarding-visible .new-page-btn{display:none !important}.top-bar > .flex{display:flex;align-items:center;gap:1rem}/* Vertical separator between Your Pages link and page title ( | ) */.top-bar-separator{width:1px;height:1.25rem;background:var(--secondary-text);opacity:0.5;flex-shrink:0;margin:0 0.5rem}/* Topbar left: page name + optional published dot */.top-bar-page-block{display:flex;align-items:center;min-width:0}.top-bar-page-name-row{display:flex;align-items:center;gap:0rem;min-width:0}/* Extra space between page title and undo/redo buttons in top-bar-left */.top-bar-left > .top-bar-card{margin-left:1rem}/* Link wrapping the green "online" dot: tooltip shows URL, click opens site */.topbar-published-dot-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none;cursor:pointer;padding:2px;border-radius:50%;transition:opacity 0.2s ease,transform 0.15s ease}.topbar-published-dot-link:hover{opacity:0.9}.topbar-published-dot-link:focus-visible{outline:2px solid var(--focus-ring, #16a34a);outline-offset:2px}/* Larger green "online" dot in topbar (sidebar uses smaller .page-published-dot) */.topbar-published-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 0 2px rgba(34, 197, 94, 0.25)}body.dark-mode .topbar-published-dot{background:#22c55e;box-shadow:0 0 0 2px rgba(34, 197, 94, 0.35)}.page-name-container{display:flex;align-items:center;gap:0.5rem;min-width:0;flex:0 1 auto;max-width:300px}.back-arrow-btn{display:flex;align-items:center;justify-content:center;padding:0.25rem;border-radius:0.375rem;transition:background-color 0.2s ease;flex-shrink:0}.back-arrow-btn:hover{background-color:rgba(147, 51, 234, 0.1)}.page-name-separator{flex-shrink:0}.page-name-text{font-size:0.9375rem;color:var(--secondary-text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;cursor:pointer;padding:2px 4px;border-radius:4px;transition:background-color 0.2s ease;outline:none}.page-name-text:hover{background-color:rgba(0, 0, 0, 0.05)}.page-name-text[contenteditable="true"]{background-color:white;border:1px solid #9333ea;box-shadow:0 0 0 3px rgba(147, 51, 234, 0.1);white-space:nowrap;overflow:visible;text-overflow:clip;cursor:text;padding:2px 6px;min-width:100px;max-width:400px}.page-name-text[contenteditable="true"]:focus{outline:none}.top-bar.sidebar-collapsed{left:0}.search-bar-wrapper{position:relative;width:100%;margin-bottom:1rem}.search-bar{width:100%;padding:0.75rem 1rem;padding-right:2.5rem;border:1px solid var(--border-color);border-radius:var(--button-radius);background:var(--primary-bg);color:var(--primary-text);font-size:0.9rem}.search-bar:focus{outline:none;border-color:var(--primary-accent)}.search-loader{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid var(--border-color);border-top-color:var(--primary-accent);border-radius:50%;animation:spin 0.8s linear infinite;display:none;pointer-events:none}.search-loader.active{display:block}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}.theme-selector-section{margin-bottom:1rem}/* ── TOPBAR THEME BUTTON ──────────────────────────────────────────────────
   Compact theme selector in the top bar, left of the viewport buttons.
   Shows only color swatches, no text.
   ──────────────────────────────────────────────────────────────────────── */.topbar-theme-btn{display:flex;align-items:center;justify-content:center;padding:0.3rem 0.5rem;height:36px;background:var(--primary-bg);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all 0.2s ease;margin-right:0.5rem;flex-shrink:0}.topbar-theme-btn:hover:not(:disabled){border-color:var(--primary-accent);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1)}.topbar-theme-btn:disabled{opacity:0.4;cursor:not-allowed}.topbar-theme-btn.active{border-color:var(--primary-accent);box-shadow:0 0 0 2px rgba(147, 51, 234, 0.15)}.topbar-theme-preview{display:flex;align-items:center;height:22px;min-width:70px;border-radius:6px;overflow:hidden;border:1px solid rgba(0, 0, 0, 0.07);background:linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%)}.topbar-theme-preview:not(:empty){background:none}.topbar-theme-preview .theme-preview-color{flex:1;height:100%}/* Viewport preview styles */.viewport-btn{padding:0.5rem;border:none;background:transparent;border-radius:0.375rem;cursor:pointer;transition:all 0.2s ease;color:var(--secondary-text)}.viewport-btn:hover:not(:disabled){background:rgba(0, 0, 0, 0.05)}.viewport-btn:disabled{opacity:0.4;cursor:not-allowed}.viewport-btn.active{background:var(--accent-bg);color:var(--primary-text);box-shadow:var(--shadow-sm)}/* Dark mode toggle button */.dark-mode-toggle{padding:0.5rem;border:none;background:transparent;border-radius:0.375rem;cursor:pointer;transition:all 0.2s ease;color:var(--secondary-text);display:flex;align-items:center;justify-content:center;position:relative;width:36px;height:36px}.dark-mode-toggle svg{position:absolute;transition:opacity 0.3s ease,transform 0.3s ease}.dark-mode-toggle .icon-sun{opacity:1;transform:rotate(0deg)}.dark-mode-toggle .icon-moon{opacity:0;transform:rotate(180deg)}body.dark-mode .dark-mode-toggle .icon-sun{opacity:0;transform:rotate(180deg)}body.dark-mode .dark-mode-toggle .icon-moon{opacity:1;transform:rotate(0deg)}/* Dark mode dropdown icons */.dark-mode-icon-wrapper .icon-sun,.dark-mode-icon-wrapper .icon-moon{transition:opacity 0.3s ease,transform 0.3s ease}.dark-mode-icon-wrapper .icon-sun{opacity:1;transform:rotate(0deg)}.dark-mode-icon-wrapper .icon-moon{opacity:0;transform:rotate(180deg)}body.dark-mode .dark-mode-icon-wrapper .icon-sun{opacity:0;transform:rotate(180deg)}body.dark-mode .dark-mode-icon-wrapper .icon-moon{opacity:1;transform:rotate(0deg)}#preview-iframe{width:100%;height:100%;border:none;background:var(--primary-bg)}.theme-grid{display:grid;grid-template-columns:1fr;gap:0.7rem}.theme-item{display:flex;flex-direction:column;gap:0.375rem;padding:2px 5px;margin:-2px;cursor:pointer;position:relative}.theme-card{position:relative;border:none;border-radius:12px;padding:0;transition:all 0.2s ease;background:var(--primary-bg);box-shadow:0 1px 3px rgba(0, 0, 0, 0.08);height:44px}.theme-item:hover .theme-card{transform:translateY(-2px)}.theme-card.active{box-shadow:0 0 0 2px var(--primary-accent),0 4px 12px rgba(0, 0, 0, 0.12)}.theme-card.active::after{content:'✓';position:absolute;top:0.5rem;right:0.5rem;width:20px;height:20px;background:var(--primary-accent);color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:0.75rem;z-index:10}.theme-name{font-size:0.7125rem;font-weight:400;color:var(--secondary-text);padding:0 0.25rem}.theme-preview{width:100%;height:44px;display:flex;overflow:hidden;border:1px solid rgba(0, 0, 0, 0.08);box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.03);border-radius:12px}.theme-preview-color{flex:1;height:100%}.section-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.section-item{border:1px solid var(--border-color);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.3s ease;position:relative;background:var(--primary-bg);width:265px;height:148px;display:flex;flex-direction:column}.section-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08)}.section-item.selected{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66, 133, 244, 0.2)}.section-content{width:100%;height:100%;overflow:hidden;position:relative;background:#f8f9fa}/* Checkered transparency background for footer sections */.section-content:has(footer){background-image:linear-gradient(45deg, #e5e7eb 25%, transparent 25%),linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),linear-gradient(45deg, transparent 75%, #e5e7eb 75%),linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#f8f9fa}.section-content-inner{transform:scale(0.138);transform-origin:top left;width:1920px;height:1080px;overflow:hidden;position:relative}/* Position footer at the bottom when present */.section-content-inner:has(footer){display:flex;flex-direction:column;justify-content:end}.section-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.7);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;z-index:10}.section-item:hover .section-overlay{opacity:1}.section-number{position:absolute;top:0.5rem;left:0.5rem;background:rgba(0, 0, 0, 0.7);color:white;padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;font-weight:600;z-index:20}.add-section-button{position:absolute;top:0.5rem;right:0.5rem;width:32px;height:32px;border:none;background:var(--primary-accent);color:var(--primary-bg);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:bold;z-index:20}.add-section-button:hover{background:var(--secondary-accent)}.section-loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--secondary-text);font-size:0.9rem}.category-thumbnail-loader{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--secondary-bg);z-index:5}.category-thumbnail-loader::after{content:'';width:32px;height:32px;border:3px solid rgba(0, 0, 0, 0.1);border-top-color:var(--primary-accent);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.section-placeholder{display:flex;align-items:center;justify-content:center;height:100%;background:var(--accent-bg);color:var(--secondary-text);font-size:0.9rem;text-align:center;padding:1rem}/* Ensure loaded sections have proper dimensions */.section-content-inner section{width:1920px !important;height:1080px !important;min-height:1080px !important;display:flex !important;/* align-items: center !important; */justify-content:center !important}.history-btn{padding:0.5rem;border:none;background:transparent;border-radius:0.375rem;cursor:pointer;transition:all 0.2s ease;color:var(--primary-text);display:flex;align-items:center;justify-content:center}.history-btn:hover:not(:disabled){background:var(--accent-bg);color:var(--primary-text)}.history-btn:disabled{opacity:0.4;cursor:not-allowed}.clear-button{padding:0.5rem 1rem;background:var(--accent-bg);color:var(--primary-text);border:1px solid var(--border-color);border-radius:var(--button-radius);cursor:pointer;font-size:0.9rem;font-weight:500;transition:all 0.3s ease}.clear-button:hover{background:#ef4444;color:var(--primary-bg);border-color:#ef4444}.preview-fullscreen-btn{padding:0.5rem;border:none;background:transparent;border-radius:0.375rem;cursor:pointer;transition:all 0.2s ease;color:var(--secondary-text)}.preview-fullscreen-btn:disabled{opacity:0.4;cursor:not-allowed}.share-btn:disabled,.download-btn:disabled{opacity:0.4;cursor:not-allowed}.download-btn:hover:not(:disabled),.share-btn:hover:not(:disabled),.dark-mode-toggle:hover,.preview-fullscreen-btn:hover:not(:disabled){background:var(--accent-bg);color:var(--primary-text)}.download-btn,.share-btn{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:0.5rem;cursor:pointer;transition:all 0.2s ease;color:var(--secondary-text)}.download-btn{width:auto;padding:0 8px}/* Publish button (simplified editor: primary action in blue) */.publish-btn:not(:disabled){background:#2563eb !important;color:#fff !important}.publish-btn:hover:not(:disabled){background:#1d4ed8 !important;color:#fff !important}/* View Website icon-only link (right of page name, same size as preview-fullscreen icon) */.topbar-view-website-icon{padding:0.5rem;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:0.375rem;color:var(--secondary-text);text-decoration:none;transition:background 0.2s ease,color 0.2s ease}.topbar-view-website-icon:hover{background:var(--accent-bg);color:var(--primary-text)}.topbar-view-website-icon svg{width:20px;height:20px;flex-shrink:0}/* List of Guests button (left of Publish; icon-only, shown when page has form + is published) */.topbar-rsvp-btn,.topbar-guests-btn{padding:0.5rem;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;min-width:2.5rem;border:none;background:transparent;border-radius:0.5rem;color:var(--primary-text);text-decoration:none;transition:background 0.2s ease,color 0.2s ease}.topbar-rsvp-btn:hover,.topbar-guests-btn:hover{background:var(--accent-bg);color:var(--primary-text)}.topbar-rsvp-btn svg,.topbar-guests-btn svg{flex-shrink:0;stroke:currentColor}/* Unpublish button (red, shown when page is published) */.unpublish-btn:not(:disabled){background:#dc2626 !important;color:#fff !important}.unpublish-btn:hover:not(:disabled){background:#b91c1c !important;color:#fff !important}/* Publish dropdown wrap (split button when published: "Published!" + options chevron) */.publish-dropdown-wrap{position:relative;display:inline-flex;align-items:stretch;border-radius:0.5rem;overflow:visible}/* Split-button layout: download-btn left-rounded, chevron right-rounded. */.publish-dropdown-wrap .download-btn{border-radius:0.5rem 0 0 0.5rem}.publish-options-chevron{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;padding:0 6px;border:none;border-radius:0 0.5rem 0.5rem 0;background:#2563eb;color:#fff;cursor:pointer;transition:background 0.2s ease,opacity 0.2s ease}.publish-options-chevron:hover{background:#1d4ed8;opacity:0.95}/* During the brief loading state the download-btn is :disabled (gray).
   Hide the chevron then so we don't show a lone blue stub next to it. */.publish-dropdown-wrap:has(.download-btn:disabled) .publish-options-chevron{display:none}.publish-dropdown-wrap:has(.download-btn:disabled) .download-btn{border-radius:0.5rem}.publish-dropdown-wrap.is-published .publish-options-chevron{background:#16a34a;color:#fff}.publish-dropdown-wrap.is-published .publish-options-chevron:hover{background:#15803d;opacity:0.95}/* Published! state: green button */.publish-dropdown-wrap.is-published .download-btn.published-btn{background:#16a34a !important;color:#fff !important;border-radius:0.5rem 0 0 0.5rem}.publish-dropdown-wrap.is-published .download-btn.published-btn:hover{background:#15803d !important;color:#fff !important}/* "Publish Changes" state: blue button — overrides the green Published! style */.publish-dropdown-wrap.is-published.has-unpublished-changes .download-btn.published-btn{background:#2563eb !important;color:#fff !important}.publish-dropdown-wrap.is-published.has-unpublished-changes .download-btn.published-btn:hover{background:#1d4ed8 !important;color:#fff !important}.publish-dropdown-wrap.is-published.has-unpublished-changes .publish-options-chevron{background:#2563eb !important;color:#fff !important}.publish-dropdown-wrap.is-published.has-unpublished-changes .publish-options-chevron:hover{background:#1d4ed8 !important;opacity:1}/* Publish options dropdown menu */.publish-options-menu{position:absolute;top:calc(100% + 0.8rem);right:0;left:auto;min-width:220px;background:var(--primary-bg);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 6px 20px rgba(0, 0, 0, 0.12);padding:6px;z-index:150;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity 150ms ease,transform 150ms ease}.publish-options-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}.publish-options-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:none;background:transparent;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:var(--primary-text);transition:background 120ms ease,color 120ms ease;text-align:left}.publish-options-menu-item:hover{background:var(--accent-bg)}.publish-options-menu-item svg{flex-shrink:0;stroke:currentColor}.publish-options-menu-item[data-publish-action="unpublish"] svg{stroke:#dc2626}.publish-options-menu-item[data-publish-action="copy-link"] svg{stroke:#2563eb}.publish-options-menu-item[data-publish-action="change-domain"] svg{stroke:#7c3aed}.publish-options-menu-item-switch svg{stroke:#db2777}/* When the page is not published, hide menu items that require a live URL.
   Only the invitation-mode toggle (the switch) stays available. */.publish-dropdown-wrap:not(.is-published) .publish-options-menu-item[data-publish-action="unpublish"],.publish-dropdown-wrap:not(.is-published) .publish-options-menu-item[data-publish-action="copy-link"],.publish-dropdown-wrap:not(.is-published) .publish-options-menu-item[data-publish-action="download-qr"],.publish-dropdown-wrap:not(.is-published) .publish-options-menu-item[data-publish-action="change-domain"]{display:none}.publish-options-menu-item-switch{align-items:center}/* In the switch row, the PRO badge + toggle compete with the label for
   horizontal space. Force the label onto one line — it's a short, fixed
   string in every locale, so wrapping just looked broken. */.publish-options-menu-item-switch .publish-options-menu-item-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.publish-options-menu-item-title{flex:1 1 auto;min-width:0;font-size:13px;font-weight:500;color:var(--primary-text);line-height:1.2}.publish-switch{position:relative;flex-shrink:0;width:32px;height:18px;border-radius:999px;background:#d1d5db;transition:background 160ms ease}.publish-switch-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);transition:transform 160ms ease}.publish-options-menu-item-switch[aria-checked="true"] .publish-switch{background:#FF6B35}.publish-options-menu-item-switch[aria-checked="true"] .publish-switch-thumb{transform:translateX(14px)}.publish-options-domain-header{padding:8px 14px 6px;border-bottom:1px solid var(--border-color);margin-bottom:4px}.publish-options-domain-label{display:block;font-size:12px;color:var(--secondary-text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;cursor:pointer;transition:color 0.15s ease}.publish-options-domain-label:hover{color:var(--primary-text);text-decoration:underline}/* Republish modal option buttons */.republish-option-btn{cursor:pointer}.republish-option-reactivate{border-color:#3b82f6 !important}body.dark-mode .republish-option-reactivate{background:color-mix(in srgb, var(--primary-bg) 85%, #3b82f6 15%) !important}/* ── Free-user publish modal: shared input + 2 option cards ─────── */.publish-domain-input-wrap{margin-bottom:0}.publish-domain-shared-input{width:100%;padding:12px 16px;font-size:1rem;color:var(--primary-text);background:var(--primary-bg);border:1.5px solid var(--border-color);border-radius:12px;outline:none;transition:border-color 0.15s ease,box-shadow 0.15s ease}.publish-domain-shared-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.18)}.publish-domain-shared-input::placeholder{color:var(--secondary-text);opacity:0.7}.publish-domain-shared-input--error{border-color:#dc2626;background:color-mix(in srgb, var(--primary-bg) 94%, #dc2626 6%)}.publish-domain-shared-input--error:focus{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220, 38, 38, 0.18)}.publish-web-name-error{margin-top:6px;color:#dc2626;font-size:0.85rem;font-weight:500}.publish-web-name-error[hidden]{display:none}/* Publish CTA: visually disabled but still clickable so we can show inline
   validation (e.g. the empty-name error). Mirrors the previous look of the
   `disabled` attribute, with `aria-disabled` driving the styling instead. */.publish-cta-btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}.publish-cta-btn[aria-disabled="true"]:hover{background-color:#2563eb}.publish-domain-options{display:flex;flex-direction:column;gap:12px}.publish-domain-option{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:18px 20px;text-align:left;background:var(--primary-bg);border:1.5px solid var(--border-color);border-radius:14px;cursor:pointer;transition:border-color 0.15s ease,background 0.15s ease,box-shadow 0.15s ease,transform 0.05s ease}.publish-domain-option:active{transform:translateY(1px)}.publish-domain-option-selected{background:color-mix(in srgb, var(--primary-bg) 92%, #3b82f6 8%)}body.dark-mode .publish-domain-option-selected{background:color-mix(in srgb, var(--primary-bg) 85%, #3b82f6 15%)}.publish-domain-radio{flex-shrink:0;width:20px;height:20px;border:1.5px solid var(--border-color);border-radius:999px;background:var(--primary-bg);transition:border-color 0.15s ease,background 0.15s ease;position:relative}.publish-domain-option-selected .publish-domain-radio{border-color:#3b82f6;background:#3b82f6}.publish-domain-option-selected .publish-domain-radio::after{content:'';position:absolute;top:50%;left:50%;width:7px;height:7px;background:#fff;border-radius:999px;transform:translate(-50%, -50%)}.publish-domain-option-body{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.publish-domain-preview{display:flex;align-items:baseline;min-width:0;font-size:1rem;font-weight:600;color:var(--primary-text);line-height:1.3;letter-spacing:-0.005em}.publish-domain-preview-slug{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/* Visual hint that the slug is just an example (input is empty) — fades the
   slug to placeholder grey while keeping the suffix at full strength so the
   user sees a stable "real" address frame around the example. */.publish-domain-preview-slug--placeholder{color:var(--secondary-text);opacity:0.7;font-weight:500}.publish-domain-preview-suffix{flex-shrink:0;white-space:nowrap}.publish-domain-option-copy{font-size:0.8125rem;color:var(--secondary-text);line-height:1.4}/* Pro card — thicker brand gradient border + soft tint + stronger lift */.publish-domain-option-pro{border-color:transparent;background:linear-gradient(var(--primary-bg), var(--primary-bg)) padding-box,linear-gradient(135deg, #FF6B35 0%, #FFA044 100%) border-box;border:2.5px solid transparent;box-shadow:0 6px 20px -8px rgba(255, 107, 53, 0.45);padding:32px 90px 17px 19px}.publish-domain-option-pro:hover{border-color:transparent;background:linear-gradient(var(--primary-bg), var(--primary-bg)) padding-box,linear-gradient(135deg, #FF3D71 0%, #FF6B35 40%, #FFA044 75%, #FFD166 100%) border-box;box-shadow:0 12px 32px -8px rgba(255, 107, 53, 0.55),0 4px 14px -2px rgba(255, 61, 113, 0.28),0 0 0 4px rgba(255, 107, 53, 0.08);transform:translateY(-2px)}.publish-domain-option-pro.publish-domain-option-selected{background:linear-gradient(color-mix(in srgb, var(--primary-bg) 88%, #FF6B35 12%), color-mix(in srgb, var(--primary-bg) 88%, #FFA044 12%)) padding-box,linear-gradient(135deg, #FF6B35 0%, #FFA044 100%) border-box;box-shadow:0 10px 28px -8px rgba(255, 107, 53, 0.65)}.publish-domain-option-pro.publish-domain-option-selected .publish-domain-radio{background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);border-color:transparent}.publish-domain-pro-badge{position:absolute;top:25px;right:14px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 12px;font-size:0.6875rem;font-weight:700;letter-spacing:0.06em;color:#fff;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);border-radius:999px;box-shadow:0 3px 8px -2px rgba(255, 107, 53, 0.5);text-transform:uppercase;white-space:nowrap}.publish-domain-pro-badge svg{flex-shrink:0}.publish-domain-pro-recommended{position:absolute;top:10px;left:14px;font-size:0.75rem;font-weight:500;color:var(--secondary-text);font-style:italic;white-space:nowrap}/* Save Indicator */.save-indicator{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;background:transparent;opacity:0;visibility:hidden;transition:opacity 0.2s ease,visibility 0.2s ease,background-color 0.2s ease;font-size:13px;color:var(--secondary-text);margin-left:12px}.save-indicator.failed{cursor:pointer}.save-indicator.failed:hover{background:#dc2626}.dark-mode save-indicator.failed:hover{background:#dc2626}.save-indicator.visible{opacity:1;visibility:visible}.save-indicator.saving{color:var(--secondary-text)}.save-indicator.saved{color:var(--secondary-text)}.save-indicator.failed{color:var(--primary-text)}.save-spinner{display:none;animation:spin 1s linear infinite}.save-indicator.saving .save-spinner{display:block}.save-indicator.saving .save-checkmark{display:none}.save-checkmark{display:none}.save-indicator.saved .save-checkmark{display:block}.save-indicator.saved .save-spinner{display:none}.save-indicator.failed .save-spinner,.save-indicator.failed .save-checkmark{display:none}/* Share button loading state */.share-spinner{display:none;animation:spin 1s linear infinite}#share-page.loading .share-spinner{display:block}#share-page.loading .share-icon{display:none}.save-icon{display:none}.save-indicator.failed .save-icon{display:block}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}/* Change Template Button (same style as preview/share toolbar buttons) */.change-template-btn{display:inline-flex;align-items:center;gap:6px;margin-left:12px;margin-right:10px;padding:0.5rem;font-size:12px;font-weight:500;color:var(--secondary-text);background:transparent;border:none;border-radius:0.375rem;cursor:pointer;transition:all 0.2s ease;white-space:nowrap}.change-template-btn:hover{background:var(--accent-bg);color:var(--primary-text)}.change-template-btn i{flex-shrink:0}/* Full-screen preview mode */.editor-layout.fullscreen{transform:translateY(0px);position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--primary-bg);grid-template-columns:1fr}.editor-layout.fullscreen .sidebar,.editor-layout.fullscreen .sidebar-toggle{display:none}.editor-layout.fullscreen .main-area{width:100%;height:100%;padding:0;transform:translateX(0);margin-left:0}.editor-layout.fullscreen .section-menu{display:none !important}.top-bar.fullscreen{position:fixed;z-index:10000;transition:all 0.3s ease}.top-bar.fullscreen{top:-65px}.top-bar.fullscreen .save-indicator{display:none}/* Hide Crisp + WhatsApp widgets while preview is in fullscreen mode.
   For section-outline open/actions states, hiding is driven from JS instead
   (see setOutlineFabsHidden in section-outline.js) — CSS-based hiding masks
   Crisp's own internal chat:hide state and breaks the per-locale restore
   (Spanish keeps Crisp hidden, English keeps it visible). */body.fullscreen #crisp-chatbox,body.fullscreen .crisp-client,body.fullscreen #wa-widget-btn,body.fullscreen #wa-widget-popup{display:none !important}.close-fullscreen-btn{position:fixed;top:20px;right:20px;width:40px;height:40px;background:rgba(0, 0, 0, 0.8);border:none;border-radius:50%;color:white;cursor:pointer;z-index:10001;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}.close-fullscreen-btn:hover{background:rgba(0, 0, 0, 0.9);transform:scale(1.1)}.section-preview{background:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--card-radius);padding:1.5rem;margin:1rem;box-shadow:var(--shadow-sm);position:relative;max-width:400px}.section-preview h3{font-weight:600;margin-bottom:0.5rem;color:var(--accent-text)}.section-preview p{color:var(--secondary-text);font-size:0.9rem;line-height:1.5}.delete-button{position:absolute;top:0.5rem;right:0.5rem;width:24px;height:24px;border:none;background:rgba(239, 68, 68, 0.1);color:#ef4444;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center}.delete-button:hover{background:rgba(239, 68, 68, 0.2)}/* User info styles */.user-info{padding:0.5rem;position:relative}[data-role="user-name"]{color:var(--primary-text)}.user-avatar{width:32px;height:32px;border-radius:50%;background:#3b82f6;color:#ffffff;font-weight:600;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;text-transform:uppercase}.user-avatar.has-image{background:transparent}.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}.user-avatar-initial{display:block;text-transform:uppercase}.user-dropdown{position:absolute;top:calc(100% + 0.5rem);right:0;background:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--card-radius);box-shadow:var(--shadow-lg);padding:0.5rem 0;min-width:200px;display:none;z-index:1010}.user-dropdown.show{display:block}.user-dropdown-item{width:100%;padding:0.5rem 1rem;background:transparent;border:none;text-align:left;font-size:0.9rem;color:var(--primary-text);cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:background 0.2s ease,color 0.2s ease}.user-dropdown-item:hover{background:var(--accent-bg)}.user-dropdown-item-danger{color:#dc2626}.user-dropdown-item-danger:hover{background:#fee2e2}.dark-mode .user-dropdown-item-danger:hover{background:#481717}.user-status{font-size:0.8rem;color:var(--secondary-text)}.status-indicator{width:8px;height:8px;border-radius:50%;background:#10b981}.status-indicator.free{background:#f59e0b}.status-indicator.authenticated{background:#10b981}/* PRO Badge styles */.pro-badge,#clerk-pro-badge{cursor:pointer}.pro-badge{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;font-size:0.7rem;font-weight:700;padding:0.2rem 0.5rem;border-radius:12px;text-transform:uppercase;letter-spacing:0.5px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);animation:pro-glow 2s ease-in-out infinite alternate;margin-left:0.5rem}/* PRO Badge when shown with Clerk user button – vertically centered to avoid top clipping in top-bar */#clerk-user-button .pro-badge{position:absolute;top:14%;right:-8px;transform:translateY(-50%);font-size:0.6rem;padding:0.15rem 0.4rem;z-index:10}@keyframes pro-glow{from{box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}to{box-shadow:0 2px 8px rgba(102, 126, 234, 0.3)}}/* Theme selector styles */.theme-selector{position:fixed;top:100px;right:20px;z-index:1000;background:var(--primary-bg);border:1px solid var(--border-color);border-radius:var(--card-radius);padding:calc(var(--spacing-unit) * 1.5);box-shadow:var(--shadow-lg);min-width:220px;max-height:60vh;overflow-y:auto}.theme-button{display:block;width:100%;padding:calc(var(--spacing-unit) * 0.75);margin-bottom:calc(var(--spacing-unit) * 0.5);background:var(--accent-bg);color:var(--primary-text);border:1px solid var(--border-color);border-radius:var(--button-radius);cursor:pointer;font-family:var(--font-family);font-size:0.9rem;font-weight:500;transition:all 0.2s ease;text-align:left}.theme-button:hover{background:var(--primary-accent);color:var(--primary-bg);transform:translateY(-1px)}.theme-button.active{background:var(--primary-accent);color:var(--primary-bg);font-weight:600;box-shadow:var(--shadow-sm)}/* Animation classes */.animate-fade-in-up{opacity:1;transform:translateY(0);transition:all 0.6s ease-out}.animate-fade-in-up.animate{opacity:1;transform:translateY(0)}.animate-fade-in-left{opacity:1;transform:translateX(0);transition:all 0.6s ease-out}.animate-fade-in-left.animate{opacity:1;transform:translateX(0)}.animate-fade-in-right{opacity:1;transform:translateX(0);transition:all 0.6s ease-out}.animate-fade-in-right.animate{opacity:1;transform:translateX(0)}.animate-scale-in{opacity:1;transform:scale(1);transition:all 0.6s ease-out}.animate-scale-in.animate{opacity:1;transform:scale(1)}/* Animation disabled state */.animations-disabled .animate-fade-in-up,.animations-disabled .animate-fade-in-left,.animations-disabled .animate-fade-in-right,.animations-disabled .animate-scale-in{opacity:1 !important;transform:none !important;transition:none !important}/* Stagger delays */.delay-100{transition-delay:0.1s}.delay-200{transition-delay:0.2s}.delay-300{transition-delay:0.3s}.delay-400{transition-delay:0.4s}.delay-500{transition-delay:0.5s}.delay-600{transition-delay:0.6s}.delay-700{transition-delay:0.7s}.delay-800{transition-delay:0.8s}/* Custom Tippy.js theme */.tippy-box[data-theme~='custom']{background-color:rgba(0, 0, 0, 0.9);color:white;border-radius:6px;font-size:12px;font-weight:500;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.tippy-box[data-theme~='custom'] .tippy-arrow{color:rgba(0, 0, 0, 0.9)}.tippy-box[data-theme~='custom'] .tippy-content{padding:6px 10px}/* Lock icon styles for pro sections */.section-lock{position:absolute;top:0.5rem;right:0.5rem;width:28px;height:28px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;border-radius:6px;display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(102, 126, 234, 0.3);animation:lock-pulse 2s ease-in-out infinite}.section-lock:hover{background:linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);transform:scale(1.15);box-shadow:0 4px 12px rgba(102, 126, 234, 0.4)}.section-lock svg{width:16px;height:16px}@keyframes lock-pulse{0%,100%{box-shadow:0 2px 8px rgba(102, 126, 234, 0.3)}50%{box-shadow:0 2px 12px rgba(102, 126, 234, 0.5)}}/* Upgrade modal styles are now loaded on demand via upgrade-modal.js *//* Page Name Modal styles */.page-name-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(4px);z-index:10000;align-items:center;justify-content:center}.page-name-modal.show{display:flex;animation:pnmFadeIn 0.2s ease}@keyframes pnmFadeIn{from{opacity:0}to{opacity:1}}.page-name-modal-content{background:var(--primary-bg, #ffffff);border-radius:20px;padding:32px;max-width:500px;width:92%;position:relative;box-shadow:0 25px 60px rgba(0, 0, 0, 0.22);animation:pnmSlideUp 0.3s ease;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}/* Scrollable body — everything above the pinned footer lives here */.pnm-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0;/* Same width as `.pnm-footer`; avoid negative horizontal margins — they
       made the body wider than the footer so the footer's border-top looked
       inset/fragmented and left 1px seams at the rounded modal corners. */background:var(--primary-bg, #ffffff)}@keyframes pnmSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}/* Close button */.page-name-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--secondary-text, #9ca3af);border-radius:50%;transition:background 0.2s,color 0.2s;padding:0}.page-name-modal-close:hover{background:var(--accent-bg, #f3f4f6);color:var(--primary-text, #111827)}/* ── Progress bar ─────────────────────────────────────────────────────────── */.pnm-progress-bar{display:flex;gap:6px;margin-bottom:6px;padding-right:36px/* leave space for close button */}.pnm-progress-segment{flex:1;height:4px;border-radius:99px;background:#e5e7eb;transition:background 0.35s ease}.pnm-progress-segment.pnm-seg-active{background:#3b82f6}.pnm-progress-segment.pnm-seg-done{background:#3b82f6}.pnm-step-label{font-size:12px;color:var(--secondary-text, #6b7280);margin:0 0 20px 0;font-weight:500}/* ── Step panels ──────────────────────────────────────────────────────────── */.pnm-step{animation:pnmStepIn 0.2s ease}.pnm-step-hidden{display:none}@keyframes pnmStepIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}/* ── Titles ───────────────────────────────────────────────────────────────── */.page-name-modal-title{font-size:26px;font-weight:700;color:var(--primary-text, #111827);margin:0 0 24px 0}/* ── Forms & inputs ───────────────────────────────────────────────────────── */.page-name-form{margin-bottom:20px}.page-name-label{display:block;font-size:13px;font-weight:600;color:var(--secondary-text, #6b7280);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px}.page-name-input{width:100%;padding:12px 14px;font-size:15px;background-color:var(--primary-bg, #ffffff);border:2px solid var(--border-color, #e5e7eb);border-radius:12px;outline:none;transition:border-color 0.2s,box-shadow 0.2s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;color:var(--primary-text, #111827);box-sizing:border-box}.page-name-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}/* Native date picker styling */.pnm-date-input{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pnm-date-input::-webkit-calendar-picker-indicator{opacity:0.5;cursor:pointer}/* ── Couple section (step 2) ──────────────────────────────────────────────── */.pnm-couple-section{margin-bottom:20px}.pnm-couple-label{font-size:14px;font-weight:700;color:var(--primary-text, #111827);margin:0 0 10px 0}.pnm-name-row{display:flex;gap:12px}.pnm-name-field{flex:1;min-width:0}/* ── Venue / map fields (step 3) ──────────────────────────────────────────── */.pnm-venue-field{margin-bottom:20px}.pnm-map-container{margin-top:10px;border-radius:12px;overflow:hidden;height:0;transition:height 0.3s ease}.pnm-map-container.pnm-map-visible{height:170px}.pnm-map-iframe{width:100%;height:170px;border:0;display:block}/* ── Footer navigation (pinned, always visible) ───────────────────────────── */.pnm-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-shrink:0;padding-top:20px;margin-top:16px;border-top:1px solid var(--border-color, #e5e7eb);position:relative;background:var(--primary-bg, #ffffff)}/* "More below" affordance — a soft dark fade sitting immediately above
   the pinned footer, visible only when there's still unseen content
   below the scroll fold. Toggled via `.pnm-has-more` on the modal
   content. Using a dark gradient (not white) so it shows over both
   text and whitespace. */.pnm-footer::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% + 1px);/* sit flush above the 1px border */height:36px;background:linear-gradient(to bottom, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.12));pointer-events:none;opacity:0;transition:opacity 0.2s ease}.page-name-modal-content.pnm-has-more .pnm-footer::before{opacity:1}.page-name-modal-content.pnm-has-more .pnm-footer{border-top-color:rgba(15, 23, 42, 0.18)}.pnm-back-btn{background:none;border:none;color:var(--secondary-text, #6b7280);font-size:15px;font-weight:500;cursor:pointer;padding:8px 4px;font-family:inherit;transition:color 0.2s;margin-right:auto}.pnm-back-btn:hover{color:var(--primary-text, #111827)}.pnm-back-hidden{visibility:hidden;pointer-events:none}/* Skip button — subtle secondary action next to Next */.pnm-skip-btn{background:none;border:none;color:var(--secondary-text, #6b7280);font-size:14px;font-weight:500;cursor:pointer;padding:10px 14px;border-radius:10px;font-family:inherit;transition:background 0.2s,color 0.2s;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(107, 114, 128, 0.35)}.pnm-skip-btn:hover{color:var(--primary-text, #111827);background:var(--accent-bg, #f3f4f6);text-decoration-color:transparent}/* Next / Start button — compact version of the publish-modal Continue btn */.page-name-save-btn.pnm-next-btn{width:auto;padding:10px 22px;background:#3b82f6;color:white;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:background 0.2s,transform 0.15s,box-shadow 0.2s;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;display:flex;align-items:center;gap:6px}.page-name-save-btn.pnm-next-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59, 130, 246, 0.3)}.page-name-save-btn.pnm-next-btn:active{transform:translateY(0)}/* Delete page button (trash icon to the right of page name) */.delete-page-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--secondary-text);transition:color 0.2s ease,background-color 0.2s ease;flex-shrink:0}.delete-page-btn:hover{color:#dc2626;background-color:rgba(220, 38, 38, 0.1)}.delete-page-btn:focus{outline:none}.delete-page-btn i,.delete-page-btn svg{width:16px;height:16px}.edit-couple-details-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--secondary-text);transition:color 0.2s ease,background-color 0.2s ease;flex-shrink:0}.edit-couple-details-btn:hover{color:#9333ea;background-color:rgba(147, 51, 234, 0.08)}.edit-couple-details-btn:focus{outline:none}.edit-couple-details-btn svg{width:15px;height:15px}/* Delete Page Confirmation Modal */.delete-page-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.5);backdrop-filter:blur(4px);z-index:10000;align-items:center;justify-content:center;animation:fadeIn 0.2s ease}.delete-page-modal.show{display:flex}.delete-page-modal-content{background:var(--primary-bg);border-radius:16px;padding:32px;max-width:400px;width:90%;box-shadow:0 20px 60px rgba(0, 0, 0, 0.2);animation:slideUp 0.3s ease}.delete-page-modal-title{font-size:1.25rem;font-weight:700;color:var(--primary-text);margin:0 0 12px 0}.delete-page-modal-message{font-size:0.9375rem;color:var(--secondary-text);margin:0 0 24px 0;line-height:1.5}.delete-page-modal-actions{display:flex;gap:12px;justify-content:flex-end}.delete-page-modal-btn{padding:10px 20px;border-radius:10px;font-size:0.9375rem;font-weight:600;cursor:pointer;transition:background-color 0.2s,color 0.2s;border:none;font-family:inherit}.delete-page-modal-cancel{background:var(--border-color);color:var(--primary-text)}.delete-page-modal-cancel:hover{background:#9ca3af;color:white}.delete-page-modal-confirm{background:#dc2626;color:white}.delete-page-modal-confirm:hover{background:#b91c1c}.delete-page-modal-confirm:disabled{opacity:0.6;cursor:not-allowed}/* Custom Theme Modal styles */.custom-theme-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);display:none;align-items:center;justify-content:center;z-index:10000;backdrop-filter:blur(4px)}.dark-mode .custom-theme-modal{background:rgb(35 36 40 / 76%)}.custom-theme-modal.show{display:flex}.custom-theme-modal-content{background:var(--primary-bg);border-radius:16px;padding:2rem;max-width:600px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0, 0, 0, 0.1);position:relative}.custom-theme-modal-header{margin-bottom:1.5rem}.custom-theme-modal-header h2{font-size:1.5rem;font-weight:700;color:var(--accent-text);margin-bottom:0.5rem}.custom-theme-modal-header p{color:#6c757d;font-size:0.9rem}.custom-theme-modal-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;border:none;background:transparent;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}.custom-theme-modal-close:hover{background:var(--accent-bg)}.custom-theme-modal-close svg{color:var(--primary-text)}.theme-name-input{width:100%;padding:0.75rem;border:1px solid #e9ecef;border-radius:8px;font-size:0.95rem;margin-bottom:1.5rem;font-family:var(--font-family);background-color:var(--primary-bg);color:var(--primary-text)}.theme-name-input:focus{outline:none;border-color:#4285f4;box-shadow:0 0 0 3px rgba(66, 133, 244, 0.1)}.color-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.color-picker-item{display:flex;flex-direction:column}.color-picker-label{font-size:0.85rem;font-weight:500;color:var(--secondary-text);margin-bottom:0.5rem}.color-picker-wrapper{display:flex;align-items:center;gap:0.5rem}.color-picker-input{width:50px;height:40px;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;padding:0;background:transparent}.color-picker-input::-webkit-color-swatch-wrapper{padding:3px}.color-picker-input::-webkit-color-swatch{border:none;border-radius:6px}.color-hex-input{flex:1;padding:0.5rem;border:1px solid var(--secondary-text);border-radius:8px;font-size:0.85rem;font-family:'Courier New',monospace;text-transform:uppercase;background-color:var(--primary-bg)}.color-hex-input:focus{outline:none;border-color:#4285f4}.custom-theme-actions{display:flex;gap:0.75rem;justify-content:flex-end;margin-top:1.5rem}.custom-theme-btn{padding:0.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:0.9rem;cursor:pointer;transition:all 0.2s ease;border:none}.custom-theme-btn-cancel{background:#f3f4f6;color:#374151}.custom-theme-btn-cancel:hover{background:var(--border-color)}.custom-theme-btn-save{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white}.custom-theme-btn-save:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(102, 126, 234, 0.3)}.theme-card.custom-theme-card{background:var(--primary-bg);border:2px dashed var(--primary-accent);box-shadow:none;display:flex;align-items:center;justify-content:center}.theme-card.custom-theme-card:hover{background:var(--secondary-bg);border-color:var(--secondary-accent);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08)}.theme-card.custom-theme-card .theme-preview{display:none}.theme-item.create-custom-item .theme-name{display:flex;align-items:center;justify-content:center;gap:0.375rem;padding:0;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:100%;color:var(--primary-accent)}.theme-item.create-custom-item .theme-name svg{width:16px;height:16px}.custom-theme-icon{position:absolute;top:0.5rem;left:0.5rem;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.9);border:1px solid #00000021;border-radius:50%;z-index:15;box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.custom-theme-icon svg{width:12px;height:12px;color:var(--primary-accent)}.custom-theme-menu-btn{position:absolute;top:0.5rem;right:0.5rem;width:24px;height:24px;border:none;background:rgba(255, 255, 255, 0.9);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;z-index:20;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);opacity:0;pointer-events:none}.theme-card:hover .custom-theme-menu-btn{opacity:1;pointer-events:auto}.custom-theme-menu-btn:hover{background:rgba(255, 255, 255, 1);transform:scale(1.1);box-shadow:0 2px 8px rgba(0, 0, 0, 0.15)}.custom-theme-menu-btn svg{width:14px;height:14px;color:#6c757d}.custom-theme-menu{position:absolute;bottom:3rem;right:0.5rem;background:var(--primary-bg);border-radius:8px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0.5rem;min-width:140px;z-index:100;display:none}.custom-theme-menu.show{display:block}.custom-theme-menu-item{width:100%;padding:0.5rem 0.75rem;border:none;background:transparent;text-align:left;cursor:pointer;border-radius:4px;font-size:0.875rem;font-weight:500;color:var(--primary-text);transition:all 0.2s ease;display:flex;align-items:center;gap:0.5rem}.custom-theme-menu-item:hover{background:var(--accent-bg)}.custom-theme-menu-item svg{width:14px;height:14px}.custom-theme-menu-item.danger{color:#ef4444}.custom-theme-menu-item.danger:hover{background:#fee2e2}/* Pro section overlay styles */.section-item.pro-section{position:relative}.section-item.pro-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.1);border-radius:12px;z-index:5}.section-item.pro-section .section-content{filter:brightness(0.9)}/* Section thumbnail styles */.section-thumbnail{width:100%;height:100%;object-fit:cover;border-radius:8px;transition:all 0.3s ease}.section-item:hover .section-thumbnail{transform:scale(1.02)}.section-item.pro-section .section-thumbnail{filter:brightness(0.8)}/* Category list styles */.category-list-wrapper{margin-bottom:1rem;width:calc(100% + 40px);margin-left:-20px;padding:20px}.category-list{display:flex;flex-direction:column;gap:0}.category-item{position:relative;padding:0.875rem 1rem;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;font-size:0.9rem;font-weight:400;color:#374151;margin-bottom:0.25rem}.category-item:hover{background:var(--accent-bg);transform:none}.category-item i{width:18px;height:18px;color:#6b7280;margin-right:1.25rem;flex-shrink:0}.category-item span:not(.category-count){margin-left:0.5rem}.category-item svg{margin-right:1.25rem;flex-shrink:0}.category-item .category-count{background:#f1f5f9;color:#64748b;padding:0.25rem 0.5rem;border-radius:6px;font-size:0.75rem;font-weight:500;border:1px solid #e2e8f0;min-width:20px;text-align:center;margin-left:auto}/* Hover panel styles */.category-hover-panel{position:fixed;top:0;left:299px;width:474px;height:100dvh;background:var(--primary-bg);border-left:1px solid var(--border-color);box-shadow:-4px 0 12px rgba(0, 0, 0, 0.1);transform:translateX(-100px);transition:transform 0.3s ease;z-index:7;display:flex;flex-direction:column;opacity:0;visibility:hidden}.dark-mode .category-hover-panel{border-right:1px solid var(--border-color)}.category-hover-panel.show{transform:translateX(0);opacity:1;visibility:visible}.category-hover-panel .min-h-screen{min-height:100% !important;height:1px/* fixes problem with children height:100% not being respected */}/* Adjust panel position when sidebar is collapsed */.editor-layout.collapsed .category-hover-panel{left:0}.category-hover-panel-header{flex-shrink:0;display:flex;flex-direction:column;gap:0.75rem;padding:1rem;padding-bottom:0.75rem;background:var(--primary-bg);border-bottom:1px solid var(--border-color)}.category-hover-panel-header-top{display:flex;align-items:center;justify-content:space-between}.category-hover-panel-title{font-size:0.875rem;font-weight:600;color:var(--primary-text);display:flex;align-items:center;gap:0.5rem}.category-hover-panel-header-bottom{display:flex;align-items:center;justify-content:flex-start;width:100%}.category-hover-panel-tabs{display:flex;background:var(--secondary-bg);border-radius:6px;padding:2px;gap:2px;width:100%}.category-tab{font-size:0.75rem;font-weight:500;color:#6b7280;background:transparent;border:none;padding:0.375rem 0.75rem;border-radius:4px;cursor:pointer;transition:all 0.2s ease;flex:1;text-align:center}.category-tab:hover{color:#222222}.category-tab.active{background:var(--primary-bg);color:var(--primary-text);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05)}.category-hover-panel-close{width:24px;height:24px;border:none;background:transparent;color:var(--secondary-text);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}.category-hover-panel-close:hover{background:var(--accent-bg);color:var(--primary-text)}.category-sections-grid{flex:1;overflow-y:auto;padding:1rem;display:grid;grid-template-columns:1fr;gap:0.75rem;align-content:start}/* Panel en modo templates: ocultar tabs Background/Theme */.category-hover-panel.template-mode .category-hover-panel-header-bottom{display:none}/* Grid de tarjetas de template (ratio 2:3) */.template-cards-grid{flex:1;min-height:0;overflow-y:auto;padding:1rem;display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:minmax(min-content, auto);gap:1.25rem;align-content:start;align-items:start}/* Tarjeta template 2:3 con scroll al hover */.template-card{position:relative;width:100%;min-width:0;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1px solid var(--border-color);background:var(--secondary-bg);cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease}.template-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0, 0, 0, 0.1);outline:2px solid var(--primary-accent, #4285f4)}.template-card-preview{position:absolute;inset:0;overflow:hidden}.template-card-preview-inner{position:absolute;top:0;left:0;right:0;min-height:100%;transition:transform 0.15s linear;will-change:transform}.template-card-preview-img{display:block;width:100%;height:auto;vertical-align:top}.template-card-placeholder{min-height:300%;padding:1rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1rem;background:linear-gradient(180deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);color:#64748b;font-size:0.75rem;text-align:center}.template-card-placeholder-label{font-weight:600;color:#475569}.template-card-placeholder-hint{font-size:0.65rem;opacity:0.8}.template-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:0.5rem 0.75rem;background:linear-gradient(transparent, rgba(0, 0, 0, 0.75));display:flex;align-items:center;justify-content:space-between;opacity:0;transition:opacity 0.2s ease}.template-card:hover .template-card-overlay{opacity:1}.template-card-name{color:#fff;font-size:0.75rem;font-weight:500}.template-card-add-button{width:24px;height:24px;border:none;border-radius:50%;background:#fff;color:#111;font-size:1rem;font-weight:bold;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:transform 0.2s ease}.template-card-add-button:hover{transform:scale(1.1)}/* PRO template gating */.template-card-pro-badge{position:absolute;top:0.5rem;right:0.5rem;display:inline-flex;align-items:center;gap:0.25rem;padding:3px 8px;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);color:#fff;border-radius:999px;font-size:0.65rem;font-weight:700;letter-spacing:0.06em;line-height:1;z-index:20;box-shadow:0 2px 8px rgba(255, 107, 53, 0.4);pointer-events:none;text-transform:uppercase}.template-card-pro-badge svg{width:11px;height:11px}/* Always-on coral ring + glow so PRO cards stand out in the gallery */.template-card.pro-template{border-color:transparent;box-shadow:0 0 0 2px #FF6B35,0 4px 16px rgba(255, 107, 53, 0.22)}.template-card.pro-template:hover{outline:none;box-shadow:0 0 0 2px #FF6B35,0 8px 22px rgba(255, 107, 53, 0.35)}.template-card.pro-template.locked .template-card-preview-inner{filter:brightness(0.92)}.template-preview-upgrade-btn{display:inline-flex !important;align-items:center;gap:0.4rem;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%) !important;color:#fff !important;border:none !important;box-shadow:0 2px 8px rgba(255, 107, 53, 0.35)}.template-preview-upgrade-btn:hover{background:linear-gradient(135deg, #E85A24 0%, #FF8A33 100%) !important;transform:translateY(-1px)}/* Estado vacío: sin templates en este estilo */.template-cards-empty{grid-column:1/-1;padding:2rem 1rem;text-align:center;color:var(--secondary-text);font-size:0.875rem}.template-cards-empty-hint{font-size:0.75rem;margin-top:0.5rem;opacity:0.8}/* Vista de preview a tamaño completo: iframe con el template HTML */.template-preview-full-wrap{flex:1;width:100%;min-height:0;overflow:hidden;padding:1rem;display:flex;box-sizing:border-box}.template-preview-full-inner{flex:1;display:flex;border-radius:0.75rem;overflow:hidden;box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border:1px solid var(--border-color, #e5e7eb)}.template-preview-full-iframe{width:100%;height:100%;border:none;display:block}.template-preview-full-placeholder{min-height:50vh;padding:2rem}.template-preview-full-back{flex-shrink:0;cursor:pointer;margin-right:0.75rem;color:var(--primary-accent);font-size:0.9rem}.template-preview-full-back:hover{text-decoration:underline}/* Center the button relative to the full sidebar (header-top width) */.category-hover-panel-header-top:has(.template-preview-full-back){position:relative}.category-hover-panel-header-top:has(.template-preview-full-back) .template-preview-full-back{position:relative;z-index:1}.template-preview-full-title-center{flex:1;display:flex;justify-content:center;align-items:center}.category-hover-panel-header-top:has(.template-preview-full-back) .template-preview-full-title-center{position:absolute;left:0;right:0;pointer-events:none}.category-hover-panel-header-top:has(.template-preview-full-back) .template-preview-full-title-center .template-preview-use-btn{pointer-events:auto}.category-hover-panel-header-top:has(.template-preview-full-back) .category-hover-panel-close{position:relative;z-index:1}.template-preview-full-title-spacer{flex:1;min-width:0}/* Mismo estilo que Publish: azul, cabe en el header, texto en una línea */.template-preview-use-btn{height:2.5rem;padding:0 1rem;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:0.5rem;background:#2563eb;color:#fff;font-size:0.875rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:background 0.2s ease}.template-preview-use-btn:hover{background:#1d4ed8;color:#fff}/* Emoji en ítem del menú lateral (filtros de estilo) */.category-item-icon-emoji{font-size:1.1rem;margin-right:0.75rem;flex-shrink:0}/* Theme Selector Button */.theme-selector-button{width:100%;display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem;background:var(--primary-bg);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all 0.2s ease;margin-bottom:1rem}.theme-selector-button:hover{border-color:var(--primary-accent);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08)}.theme-selector-preview{width:100%;height:40px;border-radius:8px;display:flex;overflow:hidden;box-shadow:0 1px 3px rgba(0, 0, 0, 0.08);border:1px solid rgba(0, 0, 0, 0.08);transition:all 0.2s ease}.theme-selector-button:hover .theme-selector-preview{box-shadow:0 2px 6px rgba(0, 0, 0, 0.1)}.theme-selector-preview .theme-preview-color{flex:1;height:100%}.theme-selector-info{display:flex;align-items:center;justify-content:space-between;padding:0 0.25rem}.theme-selector-name{font-size:0.7125rem;font-weight:400;color:var(--secondary-text)}.theme-selector-icon{width:14px;height:14px;color:var(--secondary-text);flex-shrink:0}/* Theme Panel – appears INSIDE the sidebar area, right below the top bar.
   Panel is inside .editor-layout (transform: translateY(65px)), so fixed top is
   relative to that: use top: 0 to align with layout top = just below top bar. */.theme-panel{position:fixed;top:0;left:0;width:300px;height:calc(100dvh - 65px);background:var(--secondary-bg);border-right:1px solid var(--border-color);box-shadow:2px 0 12px rgba(0, 0, 0, 0.06);transform:translateX(-300px);transition:transform 0.3s ease,opacity 0.3s ease,visibility 0.3s ease;z-index:11;/* above sidebar (z-index: 10) */overflow:hidden;display:flex;flex-direction:column;opacity:0;visibility:hidden}.theme-panel.show{transform:translateX(0);opacity:1;visibility:visible}/* When sidebar is collapsed the panel still shows at left: 0 (same behaviour) */.editor-layout.collapsed .theme-panel{left:0}.theme-panel-wrapper{padding:1.5rem;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;background:var(--secondary-bg)}.theme-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.theme-panel-title{font-size:1.25rem;font-weight:600;color:var(--primary-text);display:flex;align-items:center;gap:0.5rem}.theme-panel-title i{width:20px;height:20px}.theme-panel-reset-badge{margin-left:0.25rem;padding:0.2rem 0.5rem;font-size:0.7rem;font-weight:500;color:var(--primary-text);background:var(--accent-bg);border:1px solid var(--border-color);border-radius:9999px;cursor:pointer;transition:background 0.2s ease,color 0.2s ease}.theme-panel-reset-badge:hover{background:var(--primary-accent);color:#fff;border-color:var(--primary-accent)}.theme-panel-close{width:28px;height:28px;border:none;background:transparent;color:var(--secondary-text);cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}.theme-panel-close:hover{background:var(--accent-bg);color:var(--primary-text)}.theme-panel-content{flex:1;overflow-y:auto;overflow-x:visible;padding-top:3px;margin-right:-1.5rem;padding-right:1.5rem;min-height:0}.theme-grid{position:relative}.category-section-item{position:relative;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform 0.3s ease;background:var(--primary-bg);width:439px;height:249px;display:flex;flex-direction:column}.category-section-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);outline:3px solid #4285f4}.category-section-item.selected{border-color:var(--primary-accent);box-shadow:0 0 0 3px rgba(66, 133, 244, 0.2)}.category-section-content{width:100%;height:100%;overflow:hidden;position:relative;background:var(--secondary-bg)}/* Checkered transparency background for footer sections */.category-section-content:has(footer){background-image:linear-gradient(45deg, #e5e7eb 25%, transparent 25%),linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),linear-gradient(45deg, transparent 75%, #e5e7eb 75%),linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;background-color:#f8f9fa}.category-section-content-inner{transform:scale(0.228);transform-origin:top left;width:1920px;height:1080px;overflow:hidden;position:relative}/* Position footer at the bottom when present */.category-section-content-inner:has(footer){display:flex;flex-direction:column;justify-content:end}.category-section-number{position:absolute;top:0.25rem;left:0.25rem;background:rgba(0, 0, 0, 0.7);color:white;padding:0.125rem 0.375rem;border-radius:4px;font-size:0.625rem;font-weight:600;z-index:20}.category-section-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(66, 133, 244, 0.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease;z-index:10}.category-section-item:hover .category-section-overlay{opacity:1}.category-section-add-button{position:absolute;top:0.25rem;right:0.25rem;width:24px;height:24px;border:none;background:white;color:black;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.875rem;font-weight:bold;z-index:20}.category-section-lock{position:absolute;top:0.25rem;right:0.25rem;width:20px;height:20px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;border-radius:4px;display:flex;align-items:center;justify-content:center;z-index:20;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(102, 126, 234, 0.3)}.category-section-lock:hover{background:linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);transform:scale(1.1)}.category-section-lock svg{width:12px;height:12px}.category-section-item.pro-section{position:relative}.category-section-item.pro-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0, 0, 0, 0.1);border-radius:8px;z-index:5}.category-section-item.pro-section .category-section-content{filter:brightness(0.9)}/* Hide pro section overlay for paid users */.category-section-item.pro-section.paid-user::before{display:none}.category-section-item.pro-section.paid-user .category-section-content{filter:none}/* Toast notification styles */.toast{position:fixed;top:65px;right:20px;background:var(--primary-bg, #ffffff);border:1px solid var(--border-color);border-radius:var(--card-radius);padding:1rem 1.5rem;box-shadow:var(--shadow-lg);z-index:10002;display:flex;align-items:flex-start;gap:1rem;min-width:300px;max-width:400px;transform:translateX(400px);opacity:0;transition:all 0.3s ease;animation:slideInToast 0.3s ease forwards}/* Compact toast: Canva-style dark pill, top-center */.toast.toast--compact{position:fixed;top:16px;left:50%;right:auto;bottom:auto;background:#1f2937;border:none;border-radius:12px;padding:10px 14px 10px 16px;min-width:0;max-width:360px;width:auto;height:auto;max-height:none;overflow:hidden;box-shadow:0 10px 30px rgba(0, 0, 0, 0.25);gap:10px;align-items:center;transform:translate(-50%, -20px);opacity:0;animation:none}.toast.toast--compact .toast-icon{width:18px;height:18px;min-width:18px;color:#34d399}.toast.toast--compact .toast-content{flex:1;min-height:0;overflow:hidden}.toast.toast--compact .toast-title{font-size:0.85rem;font-weight:600;color:#ffffff;margin-bottom:0;line-height:1.25}.toast.toast--compact .toast-message{font-size:0.75rem;color:rgba(255, 255, 255, 0.75);line-height:1.3;margin-top:2px}.toast.toast--compact .toast-close{padding:4px;color:rgba(255, 255, 255, 0.6);align-self:center;border-radius:6px}.toast.toast--compact .toast-close:hover{color:#ffffff;background:rgba(255, 255, 255, 0.1)}@keyframes toastSlideDownTopCenter{to{transform:translate(-50%, 0);opacity:1}}@keyframes toastSlideUpTopCenter{from{transform:translate(-50%, 0);opacity:1}to{transform:translate(-50%, -20px);opacity:0}}.toast.toast--compact.show{animation:toastSlideDownTopCenter 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards}.toast.toast--compact.hide{animation:toastSlideUpTopCenter 0.24s ease forwards}.toast.toast--error{background:#fef2f2;border-color:#fecaca;box-shadow:0 8px 24px rgba(185, 28, 28, 0.12)}.toast.toast--error .toast-icon{color:#dc2626}.toast.toast--error .toast-title{color:#991b1b}.toast.toast--error .toast-message{color:#b91c1c}.toast.toast--error .toast-close{color:#dc2626}.toast.toast--error .toast-close:hover{color:#991b1b;background:rgba(220, 38, 38, 0.08)}/* Error / warning toasts: bottom center, enter from below */.toast.toast--bottom-center{top:auto;right:auto;bottom:24px;left:50%;margin:0;transform:translate(-50%, calc(100% + 48px));opacity:0;animation:none}@keyframes toastSlideUpBottomCenter{to{transform:translate(-50%, 0);opacity:1}}@keyframes toastSlideDownBottomCenter{from{transform:translate(-50%, 0);opacity:1}to{transform:translate(-50%, calc(100% + 48px));opacity:0}}.toast.show{animation:slideInToast 0.3s ease forwards}.toast.hide{animation:slideOutToast 0.3s ease forwards}/* After .toast.show / .toast.hide so higher specificity wins */.toast.toast--bottom-center.show{animation:toastSlideUpBottomCenter 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards}.toast.toast--bottom-center.hide{animation:toastSlideDownBottomCenter 0.28s ease forwards}@keyframes slideInToast{to{transform:translateX(0);opacity:1}}@keyframes slideOutToast{to{transform:translateX(20px) scale(0.95);opacity:0}}.toast-icon{width:24px;height:24px;color:#10b981;flex-shrink:0}.toast-content{flex:1}.toast-title{font-weight:600;font-size:0.9rem;color:var(--primary-text);margin-bottom:0.25rem}.toast-message{font-size:0.8rem;color:var(--secondary-text)}.toast-close{background:transparent;border:none;color:var(--secondary-text);cursor:pointer;padding:0.25rem;border-radius:4px;transition:all 0.2s ease;flex-shrink:0}.toast-close:hover{background:var(--accent-bg);color:var(--primary-text)}.toast-action{margin-top:0.5rem;display:flex;gap:0.5rem}.toast-btn{padding:0.375rem 0.75rem;border:1px solid var(--border-color);border-radius:var(--button-radius);background:var(--primary-bg);color:var(--primary-text);cursor:pointer;font-size:0.8rem;font-weight:500;transition:all 0.2s ease}.toast-btn:hover{background:var(--accent-bg)}.toast-btn-primary{background:var(--primary-accent);color:var(--primary-bg);border-color:var(--primary-accent)}.toast-btn-primary:hover{background:var(--secondary-accent)}.toast-btn-danger{background:#ef4444;color:white;border-color:#ef4444}.toast-btn-danger:hover{background:#dc2626;border-color:#dc2626}.publish-modal-content{max-height:80vh;overflow-y:auto}/* Change Template confirmation modal buttons */.change-template-modal-cancel-btn{border:1px solid var(--border-color);color:var(--secondary-text);background:transparent;cursor:pointer}.change-template-modal-cancel-btn:hover{background:var(--accent-bg);color:var(--primary-text)}.change-template-modal-confirm-btn{background:#2563eb;color:#ffffff;border:none;cursor:pointer}.change-template-modal-confirm-btn:hover{background:#1d4ed8}#polar-test-mode-banner{position:fixed;top:0;left:132px;background:linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);color:#92400e;padding:3px 20px;display:flex;align-items:center;justify-content:center;gap:16px;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:10px;font-weight:500;z-index:999999;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}/* Upsell banner shown when a free user opens app.php?mode=invitation
   and already has a website page. Sits below the editor topbar. */#invitation-upsell-banner{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:99998;display:flex;align-items:center;gap:12px;padding:10px 14px;background:linear-gradient(90deg, #FFF1E4 0%, #FFE4D1 100%);color:#7a3a14;border:1px solid rgba(255, 107, 53, 0.25);border-radius:999px;box-shadow:0 6px 20px rgba(255, 107, 53, 0.15);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:13px;font-weight:500;max-width:calc(100% - 32px)}#invitation-upsell-banner .invitation-upsell-banner-icon{display:inline-flex;color:#FF6B35}#invitation-upsell-banner .invitation-upsell-banner-text{flex:1 1 auto;min-width:0}#invitation-upsell-banner .invitation-upsell-banner-cta{background:#FF6B35;color:#fff;border:none;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background 0.15s ease}#invitation-upsell-banner .invitation-upsell-banner-cta:hover{background:#e85d2a}#invitation-upsell-banner .invitation-upsell-banner-close{background:transparent;border:none;color:#7a3a14;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:0.6}#invitation-upsell-banner .invitation-upsell-banner-close:hover{opacity:1}@media (max-width: 640px){#invitation-upsell-banner{top:auto;bottom:16px;font-size:12px;padding:8px 12px}}/* ============================================================
   Preview-only mode (free-tier invitation taster).
   Active when body[data-preview-only="1"]. Hides the full editor
   chrome and replaces it with a slim CTA topbar + a floating edit
   panel for couple names + hero photo only.
============================================================ */body[data-preview-only="1"] .topbar,body[data-preview-only="1"] .editor-sidebar,body[data-preview-only="1"] #fp-sidebar,body[data-preview-only="1"] .sidebar,body[data-preview-only="1"] .left-panel,body[data-preview-only="1"] .right-panel,body[data-preview-only="1"] #publish-btn,body[data-preview-only="1"] #save-btn,body[data-preview-only="1"] .topbar-publish-options,body[data-preview-only="1"] .invitation-settings-panel,body[data-preview-only="1"] #invitation-settings-panel,body[data-preview-only="1"] .editor-toolbar{display:none !important}/* Give the preview iframe full canvas. */body[data-preview-only="1"] #preview-frame,body[data-preview-only="1"] .preview-container{left:0 !important;right:0 !important;top:56px !important;width:100% !important}/* Step-1 wizard (names + photo before template gallery) */#preview-wizard{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15, 15, 25, 0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;animation:previewWizardIn 0.25s ease}#preview-wizard.is-closing{animation:previewWizardOut 0.2s ease forwards}@keyframes previewWizardIn{from{opacity:0}to{opacity:1}}@keyframes previewWizardOut{from{opacity:1}to{opacity:0}}.preview-wizard-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.25);padding:28px;width:100%;max-width:440px;text-align:center}.preview-wizard-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:#8c8c9c;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:inherit}.preview-wizard-close:hover{background:#f3f3f8;color:#1c1c2a}.preview-wizard-step{display:inline-block;font-size:11px;font-weight:600;color:#FF6B35;background:rgba(255, 107, 53, 0.10);padding:4px 10px;border-radius:999px;margin-bottom:14px;letter-spacing:0.5px}.preview-wizard-title{font-size:22px;font-weight:700;color:#1a1a25;margin:0 0 8px;line-height:1.3}.preview-wizard-sub{font-size:14px;color:#6b6b7a;margin:0 0 22px;line-height:1.5}.preview-wizard-row{display:flex;align-items:center;gap:8px;margin-bottom:14px}@media (max-width: 480px){.preview-wizard-row{flex-direction:column;align-items:stretch;gap:10px}.preview-wizard-row .preview-wizard-amp{display:none}.preview-wizard-input{width:100%}}.preview-wizard-input{flex:1 1 0;min-width:0;padding:12px 14px;font-size:15px;font-family:inherit;color:#1a1a25;background:#f6f6f8;border:1px solid transparent;border-radius:12px;outline:none;transition:border-color 0.15s,background 0.15s}.preview-wizard-input:focus{background:#fff;border-color:#FF6B35}.preview-wizard-amp{font-family:Georgia,serif;font-style:italic;color:#b0b0bd;font-size:18px}.preview-wizard-photo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 14px;background:#fff;color:#1a1a25;border:1px dashed rgba(0,0,0,0.18);border-radius:12px;font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;margin-bottom:18px;transition:background 0.15s,border-color 0.15s}.preview-wizard-photo-btn:hover{background:#fafafa;border-color:rgba(0,0,0,0.28)}.preview-wizard-continue{width:100%;padding:13px 18px;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 6px 18px rgba(255, 107, 53, 0.25);transition:transform 0.15s ease,box-shadow 0.15s ease}.preview-wizard-continue:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255, 107, 53, 0.32)}/* While the wizard is open, mute the gallery underneath. */body.preview-wizard-open #onboarding-overlay{pointer-events:none}/* Showcase: 2-column landing-style layout. Left column = marketing pitch
   + big PRO CTA; right column = phone mockup with the chosen template
   running live (envelope animation, music, scroll). Mobile collapses to
   stacked rows with the phone above the pitch. */#preview-showcase{position:fixed;inset:0;z-index:99998;background:linear-gradient(135deg, #fff8f2 0%, #ffe4d1 100%);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow-y:auto}.preview-showcase-layout{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:center;gap:32px;min-height:100%;max-width:1280px;margin:0 auto;padding:32px 48px}.preview-showcase-pitch{color:#1a1a25;max-width:520px;justify-self:end}.preview-showcase-back-link{position:absolute;top:16px;left:20px;z-index:99999;display:inline-flex;align-items:center;gap:6px;background:rgba(255, 255, 255, 0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(0, 0, 0, 0.06);color:#4a4a55;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;padding:8px 14px;border-radius:999px;transition:color 0.15s,background 0.15s,transform 0.15s}.preview-showcase-back-link:hover{background:#fff;color:#1a1a25;transform:translateY(-1px)}.preview-showcase-title{font-size:clamp(26px, 3.2vw, 42px);line-height:1.08;font-weight:800;margin:0 0 14px;color:#0f0f1a;letter-spacing:-0.025em}.preview-showcase-sub{font-size:14.5px;line-height:1.55;color:#6b6b7c;margin:0 0 22px;max-width:44ch}.preview-showcase-bullets{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px;font-size:14.5px;font-weight:600;color:#1a1a25;letter-spacing:-0.005em}.preview-showcase-bullets li{display:flex;align-items:flex-start;gap:10px;line-height:1.4}.preview-showcase-cta-big{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);color:#fff;border:none;border-radius:14px;font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 12px 28px rgba(255, 107, 53, 0.30);transition:transform 0.15s ease,box-shadow 0.15s ease}.preview-showcase-cta-big:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255, 107, 53, 0.42)}.preview-showcase-cta-icon{font-size:18px}.preview-showcase-fineprint{margin:14px 0 0;font-size:12px;color:#8a8a96}.preview-showcase-stage{display:flex;align-items:center;justify-content:center;height:100%;min-height:0}.preview-showcase-phone{/* Force content-box so the 12px padding is added outside the height /
       aspect-ratio computation. Tailwind preflight (loaded in app.php) sets
       border-box on *, but template-showcase.php's outer page doesn't load
       Tailwind — without this override the phone renders ~24px smaller in
       app.php than in the standalone showcase. */box-sizing:content-box;position:relative;flex:none;height:min(calc(100vh - 64px), 880px);aspect-ratio:9/19.5;max-width:100%;padding:12px;background:#0a0a0a;border-radius:48px;box-shadow:0 0 0 1.5px #2a2a2a,0 24px 56px rgba(0, 0, 0, 0.32),0 8px 18px rgba(0, 0, 0, 0.22),inset 0 0 0 3px #1a1a1a}.preview-showcase-phone::before{content:'';position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#000;border-radius:14px;z-index:20;pointer-events:none}/* Inner phone screen: rounded, clipped, 12px inset from the bezel —
   mirrors template-showcase.php so the scaled iframe is clipped to the
   visible screen area and the bezel/notch sit above the content. */.preview-showcase-phone-screen{position:absolute;top:12px;left:12px;right:12px;bottom:12px;border-radius:36px;overflow:hidden;background:#fff}/* Iframe rendered at real iPhone CSS viewport (393px) and scaled to fit
   the screen — templates pick their mobile breakpoints. --phone-scale is
   set in JS to (screen-width / 393); defaults to 1 for desktop previews. */#preview-showcase-iframe{position:absolute;top:0;left:0;width:393px;height:calc(100% / var(--phone-scale, 1));border:0;background:#fff;transform:scale(var(--phone-scale, 1));transform-origin:top left}/* Loader overlay shown over the phone screen while the iframe loads the
   template. Sits inside .preview-showcase-phone-screen which clips it to
   the rounded phone shape. JS adds .is-hidden to fade it out. */.showcase-iframe-loader{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, #fdf6f0 0%, #f6ece1 100%);transition:opacity 0.35s ease;pointer-events:none}.showcase-iframe-loader.is-hidden{opacity:0}.showcase-iframe-loader-spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(28, 28, 42, 0.12);border-top-color:#FF6B35;animation:showcaseLoaderSpin 0.9s linear infinite}@keyframes showcaseLoaderSpin{to{transform:rotate(360deg)}}.showcase-personalize-pill-wrap{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:30;pointer-events:auto}.showcase-personalize-pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:none;border-radius:999px;background:rgba(20, 20, 30, 0.85);color:#fff;font-family:inherit;font-size:12px;font-weight:600;letter-spacing:0.01em;white-space:nowrap;cursor:pointer;box-shadow:0 8px 24px rgba(0, 0, 0, 0.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform 0.18s ease,background 0.18s ease}.showcase-personalize-pill:hover{transform:translateY(-1px);background:rgba(20, 20, 30, 0.95)}.showcase-personalize-pill .pill-icon{font-size:14px;line-height:1}@media (max-width: 900px){#preview-showcase{overflow-y:auto}.preview-showcase-layout{grid-template-columns:1fr;padding:20px;gap:20px;height:auto;min-height:100%}.preview-showcase-pitch{max-width:100%;justify-self:stretch;order:2;text-align:center}.preview-showcase-pitch .preview-showcase-sub{font-size:14px;max-width:32ch;margin-left:auto;margin-right:auto}.preview-showcase-bullets{text-align:left;max-width:360px;margin:0 auto 24px;font-size:14px}.preview-showcase-back-link{top:10px;left:10px;padding:6px 12px;font-size:12px}/* Match template-showcase.php: push the phone below the floating
       "Volver a plantillas" pill so the bezel doesn't sit on top of it,
       and use the same phone height. */.preview-showcase-stage{order:1;padding-top:56px}.preview-showcase-phone{height:min(65vh, 600px)}.showcase-personalize-pill-wrap{top:14px}}/* ── Showcase trust signals + tap-arrow (mirrors template-showcase.php) ── */.showcase-tap-arrow{position:absolute;top:50%;left:-14%;width:100%;height:500px;transform:translateY(calc(-65% - 20px));pointer-events:none;z-index:25;transition:opacity 0.3s ease,transform 0.3s ease;animation:showcaseArrowPulse 1.6s ease-in-out infinite}.showcase-tap-arrow.is-hidden{opacity:0;transform:translateY(calc(-65% - 20px)) translateX(-12px);animation:none}.showcase-tap-arrow svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.18))}.showcase-tap-arrow .tap-arrow-label{position:absolute;top:40px;left:30px;background:#1c1c2a;color:#fff;padding:8px 18px;border-radius:999px;font-size:16px;font-weight:700;letter-spacing:0.01em;box-shadow:0 6px 16px rgba(0,0,0,0.22);white-space:nowrap;transform:rotate(-6deg)}@keyframes showcaseArrowPulse{0%,100%{transform:translateY(calc(-65% - 20px)) translateX(0)}50%{transform:translateY(calc(-65% - 20px)) translateX(8px)}}.showcase-avatar-stack{display:flex;align-items:center;margin-top:12px;gap:10px}.showcase-avatar-stack .avatars{display:inline-flex;align-items:center}.showcase-avatar-stack .avatars span{display:inline-block;width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-8px;box-shadow:0 2px 6px rgba(0,0,0,0.10);background-image:image-set(
        url('../images/landing/couples.webp') type('image/webp'),
        url('../images/landing/couples.jpg') type('image/jpeg')
    );background-image:-webkit-image-set(
        url('../images/landing/couples.webp') type('image/webp'),
        url('../images/landing/couples.jpg') type('image/jpeg')
    );background-repeat:no-repeat;background-size:180px 30px}.showcase-avatar-stack .avatars span:first-child{margin-left:0}.showcase-avatar-stack .avatars span:nth-child(1){background-position:0 0}.showcase-avatar-stack .avatars span:nth-child(2){background-position:-30px 0}.showcase-avatar-stack .avatars span:nth-child(3){background-position:-60px 0}.showcase-avatar-stack .avatars span:nth-child(4){background-position:-90px 0}.showcase-avatar-stack .avatars span:nth-child(5){background-position:-120px 0}.showcase-avatar-stack .avatars span:nth-child(6){background-position:-150px 0}.showcase-avatar-stack-text{font-size:12.5px;color:#6b6b7c;line-height:1.35}.showcase-avatar-stack-text strong{color:#1c1c2a;font-weight:700}.showcase-testimonial{margin-top:22px;padding:14px 16px;background:rgba(255, 255, 255, 0.6);border:1px solid rgba(0, 0, 0, 0.05);border-radius:14px;display:flex;gap:12px;align-items:flex-start}.showcase-testimonial-avatar{flex-shrink:0;width:36px;height:36px;border-radius:50%;overflow:hidden;background:#f0e4dc}.showcase-testimonial-avatar img{width:100%;height:100%;object-fit:cover;display:block}.showcase-testimonial-body{min-width:0}.showcase-testimonial-stars{color:#FF6B35;font-size:11px;letter-spacing:1.5px;margin-bottom:4px}.showcase-testimonial-quote{font-size:13px;font-style:italic;color:#2a2a35;line-height:1.5;margin:0 0 4px}.showcase-testimonial-name{font-size:12px;font-weight:600;color:#1c1c2a}@media (max-width: 900px){.showcase-avatar-stack{justify-content:center}/* Mobile pitch is text-align:center, but the testimonial reads better
       left-aligned (matches template-showcase.php). */.showcase-testimonial{text-align:left}}/* Used by section #fp-theme-gallery-scroll for categories preview */.gallery-row{display:flex;gap:2rem;white-space:nowrap}.gallery-track{display:flex;gap:2rem}/* Scoped to horizontal theme picker track only — avoid clashing with template .gallery-grid .gallery-item */.gallery-track .gallery-item{flex-shrink:0;width:350px}@keyframes scrollLeft{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}@keyframes scrollRight{0%{transform:translateX(-100%)}100%{transform:translateX(0)}}.gallery-row:hover .gallery-track{animation-play-state:paused !important}/* === LOADING OVERLAY === */.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:none;/* Hidden by default */align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.98);z-index:4;/* Same as onboarding - below modals but above iframe */opacity:0;transition:opacity 0.3s ease;pointer-events:none}.loading-overlay.show{display:flex;opacity:1;pointer-events:auto}.loading-container{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem}.loading-spinner{color:var(--primary-accent);animation:spin 1s linear infinite}.loading-text{font-size:1rem;color:var(--secondary-text);font-weight:500;margin:0}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}/* Modo Boda: loading overlay */body.dark-mode .loading-overlay{background:rgba(17, 24, 39, 0.98)}/* === ONBOARDING OVERLAY === */.onboarding-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:none;/* Hidden by default */align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.98);z-index:4;/* Below modals (5+) but above iframe */opacity:0;transition:opacity 0.3s ease;pointer-events:none}.onboarding-overlay.show{display:flex;opacity:1;pointer-events:auto}.onboarding-container{text-align:center;max-width:800px;padding:2rem}.onboarding-title{font-size:3rem;font-weight:700;color:var(--primary-text);margin-bottom:0.5rem}.onboarding-subtitle{font-size:1.125rem;color:var(--secondary-text);margin-bottom:3rem}.onboarding-steps{display:flex;gap:2rem;justify-content:center}/* Step Card - Incomplete State */.onboarding-step{position:relative;width:280px;padding:2.5rem 2rem;border:2px dashed #e5e7eb;border-radius:16px;background:white;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05)}.onboarding-step:hover{border-color:#3b82f6;transform:translateY(-4px);box-shadow:0 8px 20px rgba(59, 130, 246, 0.15)}.onboarding-step-icon{font-size:3rem;margin-bottom:1rem;line-height:1}.onboarding-step-title{font-size:1.25rem;font-weight:600;color:var(--primary-text);margin-bottom:0.5rem}.onboarding-step-desc{font-size:0.95rem;color:var(--secondary-text);margin:0}/* Step Card - Completed State */.onboarding-step.completed{border:2px solid #10b981;border-style:solid;background:linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);cursor:pointer/* Still clickable after completion */}.onboarding-step.completed:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(16, 185, 129, 0.15)}/* Checkmark */.onboarding-step-checkmark{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:#10b981;border-radius:50%;display:none;align-items:center;justify-content:center;color:white}.onboarding-step-checkmark i{width:18px;height:18px}.onboarding-step.completed .onboarding-step-checkmark{display:flex;animation:checkmark-pop 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)}@keyframes checkmark-pop{0%{transform:scale(0) rotate(-45deg)}50%{transform:scale(1.2) rotate(-5deg)}100%{transform:scale(1) rotate(0deg)}}/* Fade-out animation when both complete */.onboarding-overlay.fade-out{opacity:0;pointer-events:none}/* Modo Boda: onboarding con fondos claros */body.dark-mode .onboarding-overlay{background:rgba(17, 24, 39, 0.98)}body.dark-mode .onboarding-step{background:#1f2937;border-color:#374151}body.dark-mode .onboarding-step:hover{border-color:#60a5fa;box-shadow:0 8px 20px rgba(96, 165, 250, 0.12)}body.dark-mode .onboarding-step.completed{background:linear-gradient(135deg, #064e3b 0%, #1f2937 100%);border-color:#10b981}/* ============================================================
   SIDEBAR ONBOARDING MODE
   During onboarding the sidebar has no .sidebar-ready class so it is
   already invisible (width: 0). The rules below only handle the
   optional onboarding-mode class kept for category-list hiding.
   ============================================================ *//* Hide the sidebar category list during onboarding (categories shown in overlay instead) */.sidebar.onboarding-mode .category-list-wrapper{display:none}/* Hide theme selector while no template has been chosen */.sidebar.onboarding-mode .theme-selector-section{display:none}/* Active (selected) category in onboarding mode — same background as hover + left accent */.category-item.onboarding-active{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--primary-accent, #4285f4);color:var(--primary-accent, #4285f4);font-weight:600}/* Keep the count badge readable */.category-item.onboarding-active .category-count{background:rgba(66, 133, 244, 0.12);color:var(--primary-accent, #4285f4);border-color:rgba(66, 133, 244, 0.2)}/* Dark-mode adjustments */body.dark-mode .category-item.onboarding-active{box-shadow:inset 3px 0 0 #60a5fa;color:#60a5fa}body.dark-mode .category-item.onboarding-active .category-count{background:rgba(96, 165, 250, 0.12);color:#60a5fa}/* ============================================================
   ONBOARDING GALLERY (template grid on empty state)
   ============================================================ *//* Wider container for the gallery layout */.onboarding-container--gallery{max-width:1300px;width:95vw;padding:2.5rem 1.5rem 3rem;text-align:center}/* Overlay needs to scroll when content overflows */.onboarding-overlay{overflow-y:auto;align-items:flex-start;padding:2rem 0}/* Subtitle spacing reduced for gallery layout */.onboarding-container--gallery .onboarding-subtitle{margin-bottom:3rem}/* === ONBOARDING FILTERS ROW (categories centered + search right next to last pill) === */.onboarding-filters-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin-bottom:1.5rem;min-height:36px}.onboarding-filters-row .onboarding-category-filters{margin-bottom:0}.onboarding-filters-row .onboarding-search-wrap{flex-shrink:0;margin-left:0.7rem}.onboarding-search-wrap{position:relative;width:100%;max-width:420px}.onboarding-filters-row .onboarding-search-wrap{width:280px;min-width:200px}.onboarding-search-icon{position:absolute;left:0.85rem;top:50%;transform:translateY(-50%);color:var(--secondary-text, #9ca3af);pointer-events:none;flex-shrink:0}.onboarding-search-input{width:100%;height:45px;padding:0 2.5rem 0 2.4rem;border:1.5px solid var(--border-color, #e5e7eb);border-radius:999px;background:var(--primary-bg, #fff);color:var(--primary-text, #1e293b);font-size:0.875rem;outline:none;transition:border-color 0.2s ease,box-shadow 0.2s ease;box-sizing:border-box}.onboarding-search-input::placeholder{color:var(--secondary-text, #9ca3af)}.onboarding-search-input:focus{border-color:#63c2a2;box-shadow:0 0 0 3px rgba(16, 185, 129, 0.12)}.onboarding-search-clear{position:absolute;right:0.7rem;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;background:var(--secondary-bg, #f1f5f9);color:var(--secondary-text, #64748b);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background 0.15s,color 0.15s}.onboarding-search-clear:hover{background:#fee2e2;color:#ef4444}/* === ONBOARDING CATEGORY FILTER PILLS === */.onboarding-category-filters{display:flex;flex-wrap:wrap;gap:0.7rem;justify-content:flex-start;align-items:center;min-height:36px/* Reserve space while pills load */}.onboarding-cat-btn{display:inline-flex;align-items:center;gap:0.4rem;height:45px;padding:0 0.85rem;border:1.5px solid var(--border-color, #e5e7eb);border-radius:20px;background:var(--primary-bg, #fff);color:var(--primary-text, #374151);font-size:0.85rem;font-weight:500;cursor:pointer;transition:border-color 0.18s,background 0.18s,color 0.18s,box-shadow 0.18s;white-space:nowrap;user-select:none}.onboarding-cat-btn:hover{border-color:#2563eb;color:#2563eb}/* Active (selected) pill — blue like publish / + template button */.onboarding-cat-btn.active{border-color:#2563eb;background:#eff6ff;color:#1d4ed8;box-shadow:0 0 0 1.5px #2563eb}.onboarding-cat-count{font-size:0.72rem;color:var(--secondary-text, #9ca3af);background:var(--secondary-bg, #f1f5f9);border-radius:999px;padding:0 0.4rem;min-width:18px;text-align:center;transition:background 0.18s,color 0.18s}.onboarding-cat-btn.active .onboarding-cat-count{background:#dbeafe;color:#1d4ed8}/* === GALLERY GRID === */.onboarding-template-gallery{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.25rem;width:100%}@media (max-width: 900px){.onboarding-template-gallery{grid-template-columns:repeat(2, 1fr)}}@media (max-width: 720px){.onboarding-template-gallery{grid-template-columns:repeat(2, 1fr)}}/* Mode-aware onboarding copy: website by default, invitation when body
   carries .onboarding-invitation. */.onboarding-copy-invitation{display:none}body.onboarding-invitation .onboarding-copy-website{display:none}body.onboarding-invitation .onboarding-copy-invitation{display:inline}/* Subtle PRO accent: warm radial glow behind the title + thin orange top
   rule on the overlay. Scoped via :has() so it only shows when the PRO
   chip is rendered (i.e., invitation mode + non-paid user). */.onboarding-overlay:has(.onboarding-pro-chip){background:radial-gradient(ellipse 900px 360px at 50% -40px, rgba(255, 107, 53, 0.10) 0%, rgba(255, 107, 53, 0) 70%),rgba(255, 255, 255, 0.98);border-top:2px solid rgba(255, 107, 53, 0.55)}/* PRO chip above the invitation gallery title — frames the whole invitation
   feature (not individual templates) as PRO for non-paid users. */.onboarding-pro-chip{align-items:center;gap:6px;margin:0 auto 14px;padding:5px 12px;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);color:#fff;border-radius:999px;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;line-height:1;text-transform:uppercase;box-shadow:0 2px 8px rgba(255, 107, 53, 0.32);width:fit-content;cursor:help}body.onboarding-invitation .onboarding-pro-chip{display:inline-flex}.onboarding-pro-chip svg{width:13px;height:13px}/* Showcase variant: left-aligned with the pitch column, sits above H1 */.preview-showcase-pro-chip.onboarding-pro-chip{display:inline-flex;margin:0 0 14px}/* All invitation templates are PRO-only (planned), so the per-card PRO
   badge, the orange ring, and the popup PRO chrome are all noise here. */body.onboarding-invitation .template-card-pro-badge,body.onboarding-invitation .onboarding-preview-popup-pro-badge{display:none !important}/* Reset pro-template chrome so the cards behave exactly like free ones —
   they inherit the regular .onboarding-template-card hover styling. */body.onboarding-invitation .onboarding-template-card.pro-template,body.onboarding-invitation .onboarding-template-card.pro-template.locked{border-color:var(--border-color);outline:none;box-shadow:none}body.onboarding-invitation .onboarding-template-card.pro-template.locked .template-card-preview-inner{filter:none}/* Suppress the PRO-locked Choose button styling in the preview popup. */body.onboarding-invitation .onboarding-preview-choose-btn.is-pro-locked{background:#2563eb;box-shadow:none}body.onboarding-invitation .onboarding-preview-choose-btn.is-pro-locked svg{display:none}/* === INVITATION ONBOARDING — phone-portrait cards with static mobile previews === */body.onboarding-invitation .onboarding-template-gallery{grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:18px}body.onboarding-invitation .onboarding-template-card{aspect-ratio:9/16;border-radius:22px;border-width:1px}/* Two selectors so the hover rule beats the .pro-template reset above on
   specificity — without the second selector, PRO cards on hover keep the
   reset's `box-shadow: none` and never get the orange brand ring. */body.onboarding-invitation .onboarding-template-card:hover,body.onboarding-invitation .onboarding-template-card.pro-template:hover{border-color:var(--pages-brand, #FF6B35);outline:2px solid var(--pages-brand, #FF6B35);box-shadow:0 12px 32px rgba(255, 107, 53, 0.18)}/* Mobile previews are static screenshots — show them in full, no scroll. */body.onboarding-invitation .template-card-preview-inner{position:absolute;inset:0;transform:none !important;transition:none}body.onboarding-invitation .template-card-preview-img{width:100%;height:100%;object-fit:cover;object-position:top center}body.onboarding-invitation .onboarding-template-card-name{padding:1.5rem 0.75rem 0.55rem;font-size:0.78rem}@media (max-width: 720px){body.onboarding-invitation .onboarding-template-gallery{grid-template-columns:repeat(2, 1fr);gap:12px}}/* === GALLERY CARD === */.onboarding-template-card{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1.5px solid var(--border-color);background:var(--secondary-bg);cursor:pointer;transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease}.onboarding-template-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0, 0, 0, 0.12);border-color:#2563eb;outline:2px solid #2563eb}/* Template name bar (bottom gradient) */.onboarding-template-card-name{position:absolute;bottom:0;left:0;right:0;padding:1.75rem 0.75rem 0.6rem;background:linear-gradient(transparent, rgba(0, 0, 0, 0.7));color:#fff;font-size:0.8rem;font-weight:500;opacity:0;transition:opacity 0.2s ease;pointer-events:none}.onboarding-template-card:hover .onboarding-template-card-name{opacity:1}/* Action buttons overlay — bottom-right corner */.onboarding-template-card-overlay{position:absolute;bottom:0.5rem;right:0.5rem;display:flex;flex-direction:row;gap:0.35rem;opacity:0;transition:opacity 0.18s ease;z-index:10}.onboarding-template-card:hover .onboarding-template-card-overlay{opacity:1}.onboarding-template-action-btn{width:30px;height:30px;border:none;border-radius:50%;background:rgba(255, 255, 255, 0.92);color:#1e293b;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);transition:transform 0.15s ease,background 0.15s ease,color 0.15s ease;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18);flex-shrink:0}.onboarding-template-action-btn:hover{transform:scale(1.15)}/* Eye (preview) button */.onboarding-template-action-btn.preview-btn:hover{background:#fff;color:#4285f4}/* Plus (select) button — blue like publish */.onboarding-template-action-btn.select-btn{background:#2563eb;color:#fff}.onboarding-template-action-btn.select-btn:hover{background:#1d4ed8;color:#fff;transform:scale(1.15)}/* Loading state */.onboarding-gallery-loading{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;padding:3rem 1rem;color:var(--secondary-text);font-size:0.95rem}.onboarding-gallery-loading .spinner{width:36px;height:36px;animation:onboarding-spin 0.9s linear infinite}@keyframes onboarding-spin{to{transform:rotate(360deg)}}.onboarding-gallery-error{grid-column:1/-1;padding:2rem;color:var(--secondary-text);font-size:0.9rem}/* ============================================================
   ONBOARDING PREVIEW POPUP (iframe + theme sidebar)
   ============================================================ */.onboarding-preview-popup{display:none;position:fixed;inset:0;z-index:9000;align-items:center;justify-content:center}.onboarding-preview-popup.show{display:flex}/* Backdrop: fade in */.onboarding-preview-popup-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.65);backdrop-filter:blur(6px);animation:sheetFadeIn 0.3s ease both}/* --- Navigation arrows (attached to popup card edges) --- */.onboarding-preview-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border:none;border-radius:50%;background:#fff;color:#444;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 12px rgba(0, 0, 0, 0.18);transition:background 0.2s,transform 0.2s,box-shadow 0.2s}.onboarding-preview-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 4px 18px rgba(0, 0, 0, 0.22)}.onboarding-preview-nav--prev{left:-22px}.onboarding-preview-nav--next{right:-22px}/* --- Card container (slide-up 30% + fade via keyframes) --- */@keyframes sheetSlideUpFade{from{transform:translateY(30%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes sheetFadeIn{from{opacity:0}to{opacity:1}}.onboarding-preview-popup-card{position:relative;z-index:2;display:flex;flex-direction:column;width:calc(100vw - 120px);max-width:1400px;height:calc(100vh - 140px);max-height:760px;background:#fff;border-radius:20px;overflow:visible;box-shadow:0 24px 64px rgba(0, 0, 0, 0.28);animation:sheetSlideUpFade 0.3s cubic-bezier(0.4, 0, 0.2, 1) both}/* --- PRO locked badge (top-left, mirrors .template-card-pro-badge) --- */.onboarding-preview-popup-pro-badge{position:absolute;top:0;left:0;transform:translate(-25%, -50%);display:none;align-items:center;gap:0.4rem;padding:8px 16px;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);color:#fff;border-radius:999px;font-size:0.9rem;font-weight:700;letter-spacing:0.07em;line-height:1;z-index:10;box-shadow:0 4px 14px rgba(255, 107, 53, 0.5);cursor:pointer;text-transform:uppercase;border:none;transition:transform 0.15s ease,box-shadow 0.15s ease}.onboarding-preview-popup-pro-badge:hover{transform:translate(-25%, -50%) scale(1.05);box-shadow:0 6px 18px rgba(255, 107, 53, 0.6)}.onboarding-preview-popup-pro-badge svg{width:15px;height:15px}.onboarding-preview-popup-card.is-pro-locked .onboarding-preview-popup-pro-badge{display:inline-flex}/* --- Close button --- */.onboarding-preview-popup-close{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:10;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255, 255, 255, 0.85);color:#555;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 6px rgba(0, 0, 0, 0.1);transition:background 0.15s,color 0.15s}.onboarding-preview-popup-close:hover{background:#fff;color:#111}/* --- Device view toggle bar (transparent: same surface as .onboarding-preview-popup-card) --- */.onboarding-preview-device-bar{display:flex;align-items:center;justify-content:center;padding:8px 0 0 0;flex-shrink:0;background:transparent}/* --- Two-column body --- */.onboarding-preview-popup-body{flex:1;display:flex;min-height:0;margin:10px 16px 0 16px;overflow:visible}/* Left: iframe column */.onboarding-preview-popup-iframe-col{flex:1;min-width:0;border-radius:14px;overflow:hidden;background:#f5f3f0;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:stretch;justify-content:center;transition:background 0.25s}/* Desktop mode (default): iframe fills the column */.onboarding-preview-popup-iframe-col .onboarding-preview-iframe-wrapper{flex:1;display:flex;min-width:0;border-radius:13px;overflow:hidden}/* Tablet / Mobile: iframe shrinks to device width, centered with bg visible */.onboarding-preview-popup-iframe-col.device-tablet .onboarding-preview-iframe-wrapper,.onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe-wrapper{flex:none;align-self:stretch;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,0.14);overflow:hidden;margin:16px auto;backdrop-filter:blur(0px)}.onboarding-preview-popup-iframe-col.device-tablet .onboarding-preview-iframe-wrapper{width:768px;max-width:calc(100% - 32px)}.onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe-wrapper{width:390px;max-width:calc(100% - 32px);border-radius:22px;box-shadow:0 8px 32px rgba(0,0,0,0.22)}/* Device frame notch ring for mobile */.onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe-wrapper::before{content:'';position:absolute;top:0;left:0;right:0;height:0;pointer-events:none}.onboarding-preview-iframe{width:100%;height:100%;border:none;display:block;background:#fff;transition:border-radius 0.25s}/* Scaler is a transparent passthrough in non-invitation modes so existing
   layouts (desktop/tablet/mobile preview) are unchanged. */.onboarding-preview-iframe-scaler{display:contents}/* ============================================================
   INVITATION ONBOARDING — phone-mockup preview popup
   The card is reshaped to phone-friendly proportions; the existing
   .device-mobile wrapper is dressed up as an iPhone-style mockup
   with bezel, rounded corners, and a Dynamic Island. The iframe
   is rendered at iPhone CSS viewport width (393px) and CSS-scaled
   up to fill the visible mockup screen, so the template lays out
   exactly as it would on a real iPhone (correct breakpoints, line
   wraps, font sizing).
============================================================ *//* Large viewports only — on mobile (≤768px) the bottom-sheet styles in
   app-mobile.css govern the card width/height. */@media (min-width: 769px){body.onboarding-invitation .onboarding-preview-popup-card{width:auto;min-width:70dvw;max-width:calc(100dvw - 48px);height:calc(100vh - 60px);max-height:980px;background:#fff}}/* Hide the whole device toggle bar — only mobile makes sense for an invitation. */body.onboarding-invitation .onboarding-preview-device-bar{display:none}body.onboarding-invitation .onboarding-preview-popup-iframe-col{background:linear-gradient(180deg, #f6f3ef 0%, #ece4d6 100%);border:none;border-radius:14px;align-items:center;justify-content:center;padding:16px;min-height:0}/* The mobile-device wrapper becomes the phone mockup. Height-driven —
   fills the available column height, width derived from 9:19.5 aspect. */body.onboarding-invitation .onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe-wrapper{position:relative;flex:none;height:100%;width:auto;aspect-ratio:9/19.5;max-width:100%;margin:0 auto;padding:12px;background:#0a0a0a;border-radius:48px;box-shadow:0 0 0 1.5px #2a2a2a,0 24px 56px rgba(0, 0, 0, 0.32),0 8px 18px rgba(0, 0, 0, 0.22),inset 0 0 0 3px #1a1a1a;overflow:visible}/* Dynamic Island */body.onboarding-invitation .onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe-wrapper::before{content:'';position:absolute;top:22px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#000;border-radius:14px;z-index:20;pointer-events:none}/* Inner screen: fills the wrapper's content-box (the area inside the
   12px bezel padding) and clips the scaled iframe to rounded corners. */body.onboarding-invitation .onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe-wrapper > .onboarding-preview-iframe-scaler{display:block;position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff}/* Iframe: rendered at real iPhone viewport (393×width-keeping height).
   Scaled up to fill the visible mockup screen — driven by --phone-scale
   set in JS. CSS variable defaults to 1 so the desktop default still works. */body.onboarding-invitation .onboarding-preview-popup-iframe-col.device-mobile .onboarding-preview-iframe{position:absolute;top:0;left:0;width:393px;height:calc(100% / var(--phone-scale, 1));transform:scale(var(--phone-scale, 1));transform-origin:top left;border-radius:0;border:0;background:#fff}/* Right: theme sidebar column */.onboarding-preview-popup-themes-col{position:relative;width:200px;min-width:200px;margin-left:12px;display:flex;flex-direction:column;transition:width 0.35s cubic-bezier(.4,0,.2,1),min-width 0.35s cubic-bezier(.4,0,.2,1),margin-left 0.35s cubic-bezier(.4,0,.2,1);overflow:visible}.onboarding-preview-popup-themes-col.collapsed{width:0;min-width:0;margin-left:0}.onboarding-preview-popup-themes-col.collapsed .onboarding-preview-themes-inner{opacity:0;pointer-events:none}/* Re-open button: visible only when panel is collapsed */.onboarding-preview-themes-reopen{display:none;position:absolute;top:8px;left:-54px;z-index:5;width:30px;height:30px;border:none;border-radius:8px;background:#fff;color:var(--secondary-text, #888);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 6px rgba(0, 0, 0, 0.12);transition:background 0.15s,color 0.15s}.onboarding-preview-themes-reopen:hover{background:#f5f3f0;color:var(--primary-text, #333)}.onboarding-preview-popup-themes-col.collapsed .onboarding-preview-themes-reopen{display:flex}/* Toggle button for theme sidebar (inline in header) */.onboarding-preview-themes-toggle{margin-left:auto;width:26px;height:26px;border:1px solid rgba(0, 0, 0, 0.1);border-radius:6px;background:rgba(0, 0, 0, 0.04);color:var(--secondary-text, #777);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.3s;flex-shrink:0}.onboarding-preview-themes-toggle:hover{background:rgba(0, 0, 0, 0.08);border-color:rgba(0, 0, 0, 0.18);color:var(--primary-text, #333)}.onboarding-preview-popup-themes-col.collapsed .onboarding-preview-themes-toggle{transform:rotate(180deg)}.onboarding-preview-themes-inner{display:flex;flex-direction:column;height:100%;overflow:hidden;transition:opacity 0.2s ease;min-width:200px}.onboarding-preview-themes-header{display:flex;align-items:center;gap:6px;padding:8px 10px;font-size:0.78rem;font-weight:600;color:var(--secondary-text, #6c757d);text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0}.onboarding-preview-themes-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 4px 8px 4px;display:flex;flex-direction:column;gap:6px}/* Theme items inside popup sidebar */.onboarding-preview-themes-list .popup-theme-item{display:flex;flex-direction:column;gap:3px;padding:2px 4px;cursor:pointer;border-radius:8px;transition:background 0.15s}.onboarding-preview-themes-list .popup-theme-item:hover{background:rgba(0,0,0,0.03)}.onboarding-preview-themes-list .popup-theme-card{height:34px;border-radius:10px;overflow:hidden;display:flex;border:1px solid rgba(0,0,0,0.07);box-shadow:0 1px 2px rgba(0,0,0,0.05);transition:box-shadow 0.2s;position:relative}.onboarding-preview-themes-list .popup-theme-item:hover .popup-theme-card{box-shadow:0 2px 8px rgba(0,0,0,0.1)}.onboarding-preview-themes-list .popup-theme-card.active{box-shadow:0 0 0 2px #2563eb}.onboarding-preview-themes-list .popup-theme-card.active::after{content:'\2713';position:absolute;top:4px;right:4px;width:16px;height:16px;background:#2563eb;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.6rem;font-weight:bold;z-index:2}.onboarding-preview-themes-list .popup-theme-color{flex:1;height:100%}.onboarding-preview-themes-list .popup-theme-name{font-size:0.65rem;color:var(--secondary-text, #6c757d);padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* --- Footer / Choose button --- */.onboarding-preview-popup-footer{position:relative;display:flex;justify-content:center;padding:0;height:26px;flex-shrink:0}.onboarding-preview-choose-btn{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);z-index:10;padding:10px 48px;border:none;border-radius:28px;background:#2563eb;color:#fff;font-size:0.95rem;font-weight:600;letter-spacing:0.02em;cursor:pointer;box-shadow:0 4px 18px rgba(0, 0, 0, 0.18);transition:background 0.2s,transform 0.2s,box-shadow 0.2s;white-space:nowrap}.onboarding-preview-choose-btn:hover{background:#1d4ed8;transform:translateX(-50%) translateY(-2px);box-shadow:0 6px 24px rgba(0, 0, 0, 0.24)}/* PRO-locked Choose button (preview popup) */.onboarding-preview-choose-btn.is-pro-locked{background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);box-shadow:0 4px 18px rgba(255, 107, 53, 0.35);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;line-height:1}.onboarding-preview-choose-btn.is-pro-locked svg{flex-shrink:0;display:inline-block;vertical-align:middle}.onboarding-preview-choose-btn.is-pro-locked:hover{background:linear-gradient(135deg, #E85A24 0%, #FF8A33 100%);box-shadow:0 6px 24px rgba(255, 107, 53, 0.5)}/* PRO template card (onboarding) */.onboarding-template-card.pro-template{border-color:transparent;box-shadow:0 0 0 2px #FF6B35,0 6px 18px rgba(255, 107, 53, 0.22)}.onboarding-template-card.pro-template:hover{outline:none;border-color:transparent;box-shadow:0 0 0 2px #FF6B35,0 10px 26px rgba(255, 107, 53, 0.38)}.onboarding-template-card.pro-template.locked .template-card-preview-inner{filter:brightness(0.92)}/* --- Responsive (non-mobile breakpoints handled in app-mobile.css) --- *//* Dark-mode adjustments for gallery */body.dark-mode .onboarding-template-card{border-color:#374151;background:#1f2937}body.dark-mode .onboarding-template-card:hover{border-color:#3b82f6;outline-color:#3b82f6;box-shadow:0 10px 28px rgba(0, 0, 0, 0.4)}body.dark-mode .onboarding-template-action-btn.select-btn{background:#2563eb}body.dark-mode .onboarding-template-action-btn.select-btn:hover{background:#1d4ed8}body.dark-mode .onboarding-preview-popup-card{background:#1f2937}body.dark-mode .onboarding-preview-popup-iframe-col{background:#122241}body.dark-mode .onboarding-preview-popup-close{background:rgba(31, 41, 55, 1)}body.dark-mode .onboarding-preview-themes-toggle:hover{background:rgba(255, 255, 255, 0.06)}body.dark-mode .onboarding-preview-themes-reopen{background:#1f2937}body.dark-mode .onboarding-preview-themes-list .popup-theme-card{border-color:rgba(255,255,255,0.1)}body.dark-mode .onboarding-preview-nav{background:rgba(13, 23, 42, 0.95)}/* Hide topbar controls during onboarding — only user info + Your Pages btn remain visible */body.onboarding-active .top-bar-left > *:not(#view-pages-btn),body.onboarding-active .top-bar-center,body.onboarding-active .top-bar-right > *:not(.user-info){visibility:hidden;pointer-events:none}/* ============================================================
   PAGES SIDEBAR — list, preview panel, new page button,
   view-pages topbar button
   ============================================================ *//* ── Topbar files icon (opens pages sidebar); hidden during onboarding ── */.topbar-files-btn{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;border:none;background:transparent;border-radius:0.5rem;cursor:pointer;color:var(--secondary-text);transition:background 0.15s,color 0.15s;flex-shrink:0}.topbar-files-btn .topbar-files-icon,.topbar-files-btn svg{width:1.25rem;height:1.25rem}.topbar-files-btn:hover{background:var(--accent-bg);color:var(--primary-text)}/* ── View Your Pages topbar link (to pages.php) ── */.view-pages-btn{display:flex;align-items:center;justify-content:center;gap:0.375rem;min-width:2.5rem;height:2.5rem;padding:0 0.2rem;border:none;background:transparent;border-radius:0.5rem;cursor:pointer;color:var(--secondary-text);transition:background 0.15s,color 0.15s;flex-shrink:0;text-decoration:none}.view-pages-btn .view-pages-icon,.view-pages-btn svg{width:1.25rem;height:1.25rem}.view-pages-btn .view-pages-label{font-size:0.875rem;font-weight:500;white-space:nowrap}.view-pages-btn:hover{background:var(--accent-bg);color:var(--primary-text)}/* ── Sidebar internal layout ── */.sidebar .sidebar-content{display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden}/* Pages panel (list view) */.pages-sidebar-panel{display:flex;flex-direction:column;height:100%;overflow:hidden}.pages-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--border-color);background:var(--secondary-bg);flex-shrink:0}.pages-sidebar-title{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;font-weight:600;color:var(--primary-text)}.pages-sidebar-title svg{width:18px;height:18px;flex-shrink:0}.pages-sidebar-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:6px;cursor:pointer;color:#6b7280;transition:all 0.2s ease;flex-shrink:0}.pages-sidebar-close:hover{background:#e5e7eb;color:#111827}/* Pages list scroll area */.pages-list{flex:1;overflow-y:auto;padding:6px 0}.pages-list-empty{padding:20px 16px;font-size:13px;color:var(--secondary-text);text-align:center}/* Individual page item – fixed min-height so active/online items match others */.page-list-item{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:9px 12px 9px 16px;cursor:pointer;border-radius:8px;transition:background 0.12s;position:relative;gap:6px;margin:2px 8px;box-sizing:border-box}/* Hover: characteristic light gray */.page-list-item:hover{background:var(--pages-list-hover-bg, #f1f3f4)}/* Active (current page in editor): distinct highlight */.page-list-item.active{background:var(--pages-list-active-bg, #e8e4f0);box-shadow:none}/* Page name + online dot (same row) */.page-list-item-info{display:flex;flex-direction:row;align-items:center;gap:8px;min-width:0;flex:1}.page-list-item-name{font-size:14px;font-weight:500;color:var(--primary-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.page-list-item.active .page-list-item-name{color:var(--primary-accent, #9333ea);font-weight:600}/* Active page (in editor): hide preview icon – you are already viewing it */.page-list-item.active .page-preview-btn{display:none}/* [DISABLED_FOR_WEDDING_VERSION]: Date label removed per design spec *//* .page-list-item-date {
    font-size: 11px;
    color: var(--secondary-text);
    opacity: 0.75;
    line-height: 1.2;
} *//* Hover action buttons (eye + trash) */.page-list-item-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity 0.15s;flex-shrink:0}.page-list-item:hover .page-list-item-actions{opacity:1}/* Hover action buttons – slightly larger */.page-action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--secondary-text);transition:background 0.12s,color 0.12s;padding:0;flex-shrink:0}.page-action-btn:hover{background:var(--border-color);color:var(--primary-text)}/* Publish icon: gray like other actions, blue on hover */.page-publish-btn{color:var(--secondary-text)}.page-publish-btn:hover{background:rgba(37, 99, 235, 0.15);color:#1d4ed8}body.dark-mode .page-publish-btn{color:var(--secondary-text)}body.dark-mode .page-publish-btn:hover{background:rgba(96, 165, 250, 0.2);color:#93c5fd}.page-delete-btn:hover{background:#fee2e2;color:#dc2626}body.dark-mode .page-delete-btn:hover{background:rgba(220, 38, 38, 0.2);color:#f87171}/* [DISABLED_FOR_WEDDING_VERSION]: Old footer removed; New Page button now renders inline inside pages-list *//* .pages-sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
} *//* ── New Page button (inline, right after last page) ── */.new-page-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 24px);margin:10px 12px 12px;padding:9px 14px;border:none;background:#2563eb;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:#fff;transition:background 0.15s;flex-shrink:0}.new-page-btn:hover{background:#1d4ed8}.new-page-btn--disabled,.new-page-btn:disabled{opacity:0.6;cursor:not-allowed}.new-page-btn--disabled:hover,.new-page-btn:disabled:hover{background:#2563eb}/* Wrapper for disabled New Page button so Tippy can receive hover (disabled elements do not) */.new-page-btn-wrapper{display:block;flex-shrink:0}body.dark-mode .new-page-btn{background:#2563eb}body.dark-mode .new-page-btn:hover{background:#1d4ed8}/* [DISABLED_FOR_WEDDING_VERSION]: Old in-sidebar preview panel replaced by hover panel below *//* .page-preview-panel { ... } *//* Online (published) dot to the right of page name */.page-published-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;flex-shrink:0;box-shadow:0 0 0 2px rgba(34,197,94,0.2)}/* [DISABLED_FOR_WEDDING_VERSION]: URL/domain no longer shown in pages list *//* .page-list-item-published { ... } *//* .page-published-domain { ... } *//* Unpublish button (amber/orange) */.page-unpublish-btn:hover{background:#fef3c7;color:#d97706}body.dark-mode .page-unpublish-btn:hover{background:rgba(217, 119, 6, 0.2);color:#fbbf24}/* ── Page Preview Hover Panel (second sidebar, right of left sidebar) ── *//* z-index above .sidebar-toggle (1000) so the panel simply covers the button when open */.page-preview-hover-panel{position:fixed;top:0;left:268px;/* Align with pages sidebar width (was 299px when sidebar was 300px) */width:474px;height:100dvh;background:var(--primary-bg);border-left:1px solid var(--border-color);box-shadow:4px 0 12px rgba(0, 0, 0, 0.08);transform:translateX(-120px);transition:transform 0.3s ease,opacity 0.3s ease;z-index:1001;display:flex;flex-direction:column;opacity:0;visibility:hidden}.page-preview-hover-panel.show{transform:translateX(0);opacity:1;visibility:visible}.editor-layout.collapsed .page-preview-hover-panel{left:0}.page-preview-hover-header{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border-color);flex-shrink:0;gap:8px}.page-preview-hover-title{font-size:14px;font-weight:600;color:var(--primary-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.page-preview-hover-close{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--secondary-text);transition:background 0.12s,color 0.12s;flex-shrink:0;padding:0}.page-preview-hover-close:hover{background:var(--accent-bg);color:var(--primary-text)}.page-preview-hover-body{flex:1;overflow:hidden;position:relative}.page-preview-hover-iframe{width:100%;height:100%;border:none;display:block}/* ── Unsaved changes modal buttons ── */.unsaved-modal-discard-btn{background:transparent;border:1.5px solid var(--border-color);color:var(--secondary-text);cursor:pointer}.unsaved-modal-discard-btn:hover{background:var(--accent-bg);color:var(--primary-text)}.unsaved-modal-save-btn{background:var(--primary-accent, #9333ea);border:none;color:#fff;cursor:pointer;font-weight:600}.unsaved-modal-save-btn:hover{opacity:0.9}/* Dark mode adjustments */body.dark-mode .page-list-item:hover{background:var(--pages-list-hover-bg, rgba(255,255,255,0.06))}body.dark-mode .page-list-item.active{background:var(--pages-list-active-bg)}/* ── End Pages Sidebar ── *//* ── Pro Domain Publish Modal ─────────────────────────────────── *//* TLD select dropdown — flush styling to match the input */.domain-tld-select{appearance:none;-webkit-appearance:none;min-width:4.5rem;font-size:0.875rem;font-weight:500;color:var(--primary-text);background:transparent;border:none;outline:none;cursor:pointer}/* TLD wrapper aligns select + wand side by side */.domain-tld-wrapper{display:flex;align-items:center;gap:0}/* Domain input group — outer border container */.domain-input-group{border-radius:0.5rem;border:1px solid var(--border-color);overflow:hidden;transition:box-shadow 0.15s,border-color 0.15s}.domain-input-group:focus-within{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59, 130, 246, 0.25)}/* Wand (magic) button */.domain-wand-btn{display:flex;align-items:center;justify-content:center;padding:0.75rem;background:transparent;border:none;outline:none;color:var(--secondary-text);cursor:pointer;transition:color 0.15s;flex-shrink:0}.domain-wand-btn:hover:not(:disabled){color:#eab308}.domain-wand-btn:hover:not(:disabled) .share-icon,.domain-wand-btn:hover:not(:disabled) svg{color:#eab308;stroke:#eab308}.domain-wand-btn:disabled{opacity:0.35;cursor:not-allowed}/* Suggest/refresh button inside the domain input field (same background as input) */.domain-suggest-infield-btn{outline:none;cursor:pointer;box-shadow:none}.domain-suggest-infield-btn:hover:not(:disabled),.domain-suggest-infield-btn:hover:not(:disabled) svg{color:#3b82f6;stroke:#3b82f6}/* Availability status indicator */.domain-status-indicator{display:flex;align-items:center;gap:0.5rem;font-size:1.0625rem;min-height:1.75rem;margin-bottom:0rem}.domain-status-indicator .domain-status-available,.domain-status-indicator .domain-status-unavailable,.domain-status-indicator span{font-size:inherit}.domain-status-available{color:#16a34a}.domain-status-unavailable{color:#dc2626}/* Free-user publish modal: stack the .yeslovey.com suffix below the input on mobile
   so the full domain is visible and the user clearly sees the fixed suffix vs. the
   editable subdomain name above it. Desktop layout is unchanged. */@media (max-width: 640px){.publish-subdomain-input-group{flex-direction:column;align-items:stretch}.publish-subdomain-input-group .publish-subdomain-suffix{border-left:0;border-top:1px solid var(--border-color);text-align:left;font-size:0.875rem}}/* Loading spinner inside status indicator */.domain-status-spinner{display:inline-block;width:1rem;height:1rem;border:2px solid #93c5fd;border-top-color:#3b82f6;border-radius:50%;animation:domain-spin 0.7s linear infinite;flex-shrink:0}@keyframes domain-spin{to{transform:rotate(360deg)}}/* Pro publish button — disabled state */.pro-publish-btn:disabled{opacity:0.45;cursor:not-allowed}.pro-publish-btn:disabled:hover{background-color:#2563eb/* keep blue, don't darken on hover when disabled */}/* Wrapper for "Available domains" heading + list; extra margin so list is not stuck to Publish */.domain-suggestions-wrapper.hidden{display:none}.domain-suggestions-loading,.domain-suggestions-empty{color:var(--secondary-text, #6b7280);font-size:0.875rem;padding:0.75rem 0}.domain-suggestions-list{display:flex;flex-direction:column;gap:1rem;max-height:18rem;overflow-y:auto;padding-right:0.25rem}.domain-suggestion-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 1.5rem;border-radius:0.75rem;border:1px solid var(--border-color, #e5e7eb);background:var(--primary-bg, #fff);transition:background-color 0.15s ease,border-color 0.15s ease;min-height:3.5rem}.domain-suggestion-item:hover{background:color-mix(in srgb, var(--accent-bg, #f3f4f6) 80%, var(--primary-bg, #fff) 20%);border-color:var(--secondary-text, #6b7280)}.domain-suggestion-name{font-weight:500;color:var(--primary-text, #111827);flex:1;min-width:0}.domain-suggestion-choose{flex-shrink:0;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;color:#fff;background:#2563eb;border:none;border-radius:0.5rem;cursor:pointer;opacity:0;transition:opacity 0.15s ease,background-color 0.15s ease}.domain-suggestion-item:hover .domain-suggestion-choose{opacity:1}.domain-suggestion-choose:hover{background:#1d4ed8}/* Chosen state: green circular tick (replaces Choose button) */.domain-suggestion-chosen{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.domain-suggestion-tick-wrap{width:2rem;height:2rem;border-radius:50%;background:rgb(0 219 81 / 34%);color:#16a34a;display:inline-flex;align-items:center;justify-content:center}/* ── End Pro Domain Publish Modal ── *//* ── Pro Publish Step 2a: Owner Form ─────────────────────────────── */.publish-owner-form-view{}.pub-owner-badge{display:inline-block;background:#f0fdf4;color:#16a34a;font-size:13px;font-weight:600;padding:4px 12px;border-radius:20px;margin-bottom:14px}.pub-owner-subtitle{font-size:1rem;color:var(--secondary-text, #888)}.pub-owner-row{display:flex;gap:12px;margin-bottom:12px}.pub-owner-group{display:flex;flex-direction:column;flex:1}.pub-owner-group label{font-size:1rem;font-weight:500;color:var(--primary-text, #444);margin-bottom:5px}.pub-owner-optional{color:var(--secondary-text, #aaa);font-weight:400}.pub-owner-group input{padding:9px 12px;border:1.5px solid var(--border-color, #e2e8f0);border-radius:10px;font-size:1rem;outline:none;background:var(--primary-bg, #fff);color:var(--primary-text, #111);transition:border-color 0.2s,box-shadow 0.2s}.pub-owner-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.12)}.pub-owner-checkboxes{margin-top:16px;margin-bottom:20px;display:flex;flex-direction:column;gap:10px}.pub-owner-checkbox-row{display:flex;align-items:flex-start;gap:10px}.pub-owner-checkbox-row input[type="checkbox"]{margin-top:2px;width:16px;height:16px;accent-color:#3b82f6;flex-shrink:0;cursor:pointer}.pub-owner-checkbox-row label{font-size:1rem;color:var(--secondary-text, #555);line-height:1.4;cursor:pointer}.pub-owner-checkbox-row label a{color:#3b82f6;text-decoration:underline}.pub-owner-warning{display:flex;align-items:flex-start;gap:8px;padding:10px 12px;margin-bottom:16px;background:#fef3c7;border:1px solid #f59e0b;border-radius:10px;font-size:0.85rem;line-height:1.4;color:#92400e}.pub-owner-warning svg{flex-shrink:0;margin-top:1px;color:#f59e0b}.pub-owner-submit-btn{width:100%;padding:13px;background:#3b82f6;color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background 0.2s}.pub-owner-submit-btn:hover:not(:disabled){background:#2563eb}.pub-owner-submit-btn:disabled{opacity:0.5;cursor:not-allowed}/* Registration error badge (above Register button) */.pub-owner-error{padding:0.5rem 0.75rem;margin-bottom:0.75rem;font-size:0.875rem;font-weight:500;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:0.5rem;text-align:center}.pub-owner-error.hidden{display:none}/* Inline "?" info button next to the subtitle. Opens the domain-info modal. */.pub-owner-info-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:4px;padding:0;border:1.5px solid var(--secondary-text, #9ca3af);border-radius:50%;background:transparent;color:var(--secondary-text, #6b7280);font-size:11px;font-weight:700;line-height:1;cursor:pointer;vertical-align:middle;transition:color 0.15s ease,border-color 0.15s ease,background-color 0.15s ease}.pub-owner-info-btn:hover,.pub-owner-info-btn:focus-visible{color:#3b82f6;border-color:#3b82f6;background:rgba(59, 130, 246, 0.08);outline:none}/* ── End Pro Publish Step 2a: Owner Form ── *//* ── Domain Data Info Modal (triggered by "?" on owner form) ──── */.domain-info-modal{position:fixed;inset:0;background:rgba(0, 0, 0, 0.5);display:none;align-items:center;justify-content:center;z-index:10010}.domain-info-modal.show{display:flex}.domain-info-modal-content{position:relative;background:#fff;border-radius:16px;padding:28px 28px 22px;width:100%;max-width:460px;max-height:85vh;overflow-y:auto;box-shadow:0 25px 60px rgba(0, 0, 0, 0.18);color:#1e1e2f}.domain-info-modal-close{position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;color:#999;font-size:18px;line-height:1;padding:4px}.domain-info-modal-close:hover{color:#333}.domain-info-modal-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:24px}.domain-info-modal-icon{width:40px;height:40px;flex-shrink:0;background:linear-gradient(135deg, #3b82f6, #6366f1);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -8px rgba(59, 130, 246, 0.5)}.domain-info-modal-header h2{font-size:18px;font-weight:700;color:#111;margin:0;line-height:1.3}.domain-info-modal-intro{font-size:14px;color:#4b5563;line-height:1.5;margin:0 0 16px}.domain-info-modal-list{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:12px}.domain-info-modal-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#374151;line-height:1.5}.domain-info-modal-list li strong{color:#111827;font-weight:600}.domain-info-modal-bullet{flex-shrink:0;width:22px;height:22px;background:#f0fdf4;color:#16a34a;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}.domain-info-modal-bullet svg{width:13px;height:13px}.domain-info-modal-btn{width:100%;padding:12px;background:#3b82f6;color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color 0.15s ease,box-shadow 0.15s ease}.domain-info-modal-btn:hover{background:#2563eb;box-shadow:0 8px 20px -8px rgba(59, 130, 246, 0.5)}@media (max-width: 600px){.domain-info-modal-content{padding:24px 20px 20px;max-width:calc(100% - 24px)}.domain-info-modal-header h2{font-size:17px}}/* ── End Domain Data Info Modal ── *//* ── Progress error state (Step 2b → error) ──────────────────── */.publish-progress-error-view{min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center}.pub-progress-error-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fef2f2;color:#dc2626;border:2px solid #fecaca}/* ── End Progress error state ── *//* ── Publish Progress Bar ── */.publish-progress-view{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}.publish-progress-bar-track{width:100%;max-width:360px;height:10px;border-radius:999px;background:var(--accent-bg, #e5e7eb);overflow:hidden;margin-top:1.25rem}.publish-progress-bar-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg, #6366f1, #06b6d4, #3b82f6);background-size:200% 100%;animation:publish-bar-shimmer 2s linear infinite}@keyframes publish-bar-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}/* ── Publish Success View ── */.publish-success-view{display:flex;flex-direction:column;align-items:center}/* Pro: callout box for email verification + DNS wait time */.publish-success-callout{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:10px;font-size:12.5px;line-height:1.45;font-weight:500;margin:0 0 16px;text-align:left;width:100%}.text-center > .publish-success-callout{margin-top:16px}.publish-success-callout--warning{background:rgba(245, 158, 11, 0.09);color:#92400e;border:1px solid rgba(245, 158, 11, 0.22)}.publish-success-callout--warning svg{color:#f59e0b;flex-shrink:0;margin-top:1px}.publish-success-callout--info{background:rgba(59, 130, 246, 0.07);color:#1e40af;border:1px solid rgba(59, 130, 246, 0.18)}.publish-success-callout--info svg{color:#3b82f6;flex-shrink:0;margin-top:1px}body.dark-mode .publish-success-callout--warning{background:rgba(251, 191, 36, 0.10);color:#fde68a;border-color:rgba(251, 191, 36, 0.28)}body.dark-mode .publish-success-callout--warning svg{color:#fbbf24}body.dark-mode .publish-success-callout--info{background:rgba(96, 165, 250, 0.10);color:#bfdbfe;border-color:rgba(96, 165, 250, 0.28)}body.dark-mode .publish-success-callout--info svg{color:#60a5fa}/* Pro: domain field at half width */.publish-success-domain-field--half{width:50%;min-width:200px}.publish-success-domain-field{display:flex;align-items:center;width:100%;border:1px solid var(--border-color, #e5e7eb);border-radius:0.75rem;padding:0.625rem 0.75rem;margin-bottom:1rem;background:var(--accent-bg, #f9fafb);gap:0.5rem}.publish-success-domain-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.95rem;font-weight:500;color:var(--primary-text, #111827);user-select:all}.publish-success-copy-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:0.5rem;border:none;background:transparent;cursor:pointer;color:var(--secondary-text, #6b7280);transition:background 0.15s ease,color 0.15s ease}.publish-success-copy-btn:hover{background:var(--border-color, #e5e7eb);color:var(--primary-text, #111827)}/* Inline tooltip next to publish success copy button (no overlay / toast) */.publish-copy-tooltip{flex-shrink:0;padding:0.25rem 0.5rem;font-size:0.75rem;font-weight:500;color:#fff;background:#1f2937;border-radius:0.375rem;white-space:nowrap;animation:publish-copy-tooltip-in 0.2s ease}@keyframes publish-copy-tooltip-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.publish-success-view-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:0.75rem 1rem;background:#16a34a;color:#fff;font-weight:600;font-size:1rem;border-radius:0.75rem;text-decoration:none;transition:background 0.15s ease;border:none;cursor:pointer}.publish-success-view-btn:hover{background:#15803d}.publish-success-guest-panel-link{color:var(--primary-accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}.publish-success-guest-panel-link:hover{opacity:0.88}.publish-success-guest-inline-icon{display:inline-block;vertical-align:-0.18em;margin-left:0.25em;color:var(--primary-accent);line-height:0}.publish-success-guest-inline-icon-svg{display:block;vertical-align:middle}/* Confetti canvas must render above modal overlays (z-index 10000–10001) */body > canvas{z-index:10100 !important}/* ── End Publish Progress / Success ── *//* ═══════════════════════════════════════════════════════════════════
   Announcements Bell — fixed bottom-left
   ═══════════════════════════════════════════════════════════════════ */#announcements-wrapper{position:relative}.announcements-bell-btn{position:relative;background:transparent;border:1.5px solid var(--border-color);cursor:pointer;width:26px;height:26px;border-radius:50%;color:var(--secondary-text);transition:color 0.2s ease,border-color 0.2s ease;display:flex;align-items:center;justify-content:center}.announcements-bell-btn:hover{color:var(--primary-text);border-color:var(--secondary-text)}.announcements-badge{position:absolute;top:-4px;right:-4px;background:#f43f5e;color:#fff;font-size:0.6rem;font-weight:700;min-width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;pointer-events:none;box-shadow:0 1px 4px rgba(244, 63, 94, 0.4)}/* Dropdown — opens downward from the bell */.announcements-dropdown{position:absolute;top:calc(100% + 0.5rem);left:0;background:var(--primary-bg);border:1px solid var(--border-color);border-radius:16px;box-shadow:0 12px 40px rgba(0, 0, 0, 0.12),0 2px 8px rgba(0, 0, 0, 0.06);width:360px;opacity:0;transform:translateY(8px) scale(0.96);pointer-events:none;transition:opacity 0.25s ease,transform 0.25s ease;z-index:1010;overflow:hidden}.announcements-dropdown.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.announcements-header{padding:1rem 1.25rem 0.75rem;display:flex;align-items:center;gap:0.5rem}.announcements-header-title{font-weight:700;font-size:0.95rem;color:var(--primary-text);letter-spacing:-0.01em}.announcements-header-count{background:linear-gradient(135deg, #6366f1, #8b5cf6);color:#fff;font-size:0.65rem;font-weight:700;padding:2px 7px;border-radius:999px;line-height:1.3}.announcements-list{max-height:380px;overflow-y:auto;padding:0.25rem 0.75rem 0.75rem}.announcement-item{display:flex;align-items:flex-start;gap:0.75rem;padding:0.75rem;border-radius:12px;transition:opacity 0.3s ease,max-height 0.3s ease,padding 0.3s ease,margin 0.3s ease,background 0.15s ease;margin-bottom:0.25rem}.announcement-item:hover{background:var(--accent-bg)}.announcement-item:last-child{margin-bottom:0}.announcement-item-icon{flex-shrink:0;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-top:1px}.announcement-item-icon.icon-color-indigo{background:rgba(99, 102, 241, 0.12);color:#6366f1}.announcement-item-icon.icon-color-rose{background:rgba(244, 63, 94, 0.12);color:#f43f5e}.announcement-item-icon.icon-color-amber{background:rgba(245, 158, 11, 0.12);color:#f59e0b}.announcement-item-icon.icon-color-emerald{background:rgba(16, 185, 129, 0.12);color:#10b981}.announcement-item-icon.icon-color-sky{background:rgba(14, 165, 233, 0.12);color:#0ea5e9}.announcement-item-icon.icon-color-purple{background:rgba(168, 85, 247, 0.12);color:#a855f7}.announcement-item-content{flex:1;min-width:0}.announcement-item-title{font-weight:600;font-size:0.82rem;color:var(--primary-text);margin-bottom:2px;letter-spacing:-0.01em}.announcement-item-title-link{color:#6366f1;text-decoration:none;display:inline-flex;align-items:center;gap:4px}.announcement-item-title-link:hover{text-decoration:underline}.announcement-item-title-link-icon{width:12px;height:12px;flex-shrink:0}.announcement-item-body{font-size:0.76rem;color:var(--secondary-text);line-height:1.45}.announcement-item-date{font-size:0.67rem;color:var(--secondary-text);margin-top:4px;opacity:0.6}/* New/unseen item highlight */.announcement-item-new{background:rgba(99, 102, 241, 0.04)}body.dark-mode .announcement-item-new{background:rgba(99, 102, 241, 0.08)}/* "See all" toggle button */.announcements-see-all-btn{display:block;width:calc(100% - 1.5rem);margin:0.25rem 0.75rem 0.5rem;padding:0.45rem 0;background:none;border:1px solid var(--border-color, #e5e7eb);border-radius:8px;font-size:0.75rem;color:var(--secondary-text);cursor:pointer;text-align:center;transition:background 0.15s ease,color 0.15s ease}.announcements-see-all-btn:hover{background:var(--accent-bg);color:var(--primary-text)}body.dark-mode .announcements-see-all-btn{border-color:rgba(255,255,255,0.1)}/* Empty state */.announcements-empty{padding:2.5rem 1.25rem;text-align:center;color:var(--secondary-text);font-size:0.82rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.announcements-empty-icon{width:40px;height:40px;border-radius:50%;background:rgba(16, 185, 129, 0.1);color:#10b981;display:flex;align-items:center;justify-content:center;margin-bottom:0.5rem}/* Fade-out animation for dismissed items */.announcement-item.dismissing{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;overflow:hidden}/* Dark mode tweaks */body.dark-mode .announcements-bell-btn{border-color:rgba(255, 255, 255, 0.15);color:rgba(255, 255, 255, 0.45)}body.dark-mode .announcements-bell-btn:hover{border-color:rgba(255, 255, 255, 0.3);color:rgba(255, 255, 255, 0.7)}body.dark-mode .announcements-dropdown{box-shadow:0 12px 40px rgba(0, 0, 0, 0.35),0 2px 8px rgba(0, 0, 0, 0.2)}body.dark-mode .announcement-item-icon.icon-color-indigo{background:rgba(99, 102, 241, 0.18)}body.dark-mode .announcement-item-icon.icon-color-rose{background:rgba(244, 63, 94, 0.18)}body.dark-mode .announcement-item-icon.icon-color-amber{background:rgba(245, 158, 11, 0.18)}body.dark-mode .announcement-item-icon.icon-color-emerald{background:rgba(16, 185, 129, 0.18)}body.dark-mode .announcement-item-icon.icon-color-sky{background:rgba(14, 165, 233, 0.18)}body.dark-mode .announcement-item-icon.icon-color-purple{background:rgba(168, 85, 247, 0.18)}/* Outer modal frame — kept overflow:visible so the hanging badges
   (MÁS POPULAR, PRO) and the gradient border render outside the box.
   Bounded by 90dvh so tall content never pushes off the viewport.
   See docs/MODALS.md for the visible-frame + scrollable-inner pattern. */.invitation-mode-confirm-frame{position:relative;display:flex;flex-direction:column;background-color:var(--primary-bg, #ffffff);max-height:90dvh;overflow:visible}/* Envelope hero — sits outside the scroll wrapper so the flap can rotate
   above its base position without being clipped by `overflow-y: auto`.
   Takes the top padding that `.p-8` used to provide. */.invitation-mode-confirm-hero{padding:2rem 2rem 0}/* Inner scroll container — text content lives here so it can scroll without
   clipping the badges or envelope hero on the frame. `min-height: 0` is
   required for the flex child to actually shrink and scroll. */.invitation-mode-confirm-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;border-radius:inherit}.invitation-mode-confirm-body{padding:2rem}/* When the envelope hero is present it already provides the top padding,
   so drop the body's own top padding to avoid stacking. */.invitation-mode-confirm-hero + .invitation-mode-confirm-scroll .invitation-mode-confirm-body{padding-top:0}/* Mobile: the bullet items in the feature list wrap awkwardly when both
   the bold keyword and its tail try to share one line in a narrow column.
   Drop the tail onto its own line — reads as title/subtitle — and mute
   it slightly so the bold keyword stays the visual anchor. */@media (max-width: 640px){.invitation-mode-confirm-body .inv-feature-tail{display:block;margin-left:1.6em;margin-top:1px;color:var(--secondary-text, #64748b);font-weight:400}}/* Gradient orange border + soft glow on the confirm modal, shown only when
   the current user needs to upgrade. Mirrors the visual language of
   .publish-domain-option-pro so the "this is the PRO feature you're
   about to unlock" cue is consistent across the app. Paying users see a
   plain modal — no point reminding them this was a paid feature on every
   mode flip. */.invitation-mode-confirm-upgrade{border:2.5px solid transparent !important;background:linear-gradient(var(--primary-bg, #fff), var(--primary-bg, #fff)) padding-box,linear-gradient(135deg, #FF6B35 0%, #FFA044 100%) border-box !important;box-shadow:0 18px 50px -12px rgba(0, 0, 0, 0.25),0 0 36px -6px rgba(255, 107, 53, 0.32) !important}/* "+ PRO" pill, top-right of the modal — mirrors the MÁS POPULAR pill on
   the opposite side so the two framing badges sit symmetrically around
   the envelope hero. Sized a touch smaller than MÁS POPULAR because PRO
   is a conditional gatekeeper signal (only free users see it) while
   MÁS POPULAR is universal social proof. Kept clear of the close X with
   `right: 56px`. Visual style matches .publish-domain-pro-badge so the
   PRO cue feels consistent across the app. */.invitation-pro-badge{position:absolute;top:22px;right:56px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;font-size:0.625rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);border-radius:999px;box-shadow:0 3px 8px -2px rgba(255, 107, 53, 0.5);white-space:nowrap;/* Above the envelope flap (z-index 3) so the pill never falls behind
       the animation on narrow viewports where the two visually meet. */z-index:4}.invitation-pro-badge svg{flex-shrink:0}/* Mobile: keep the absolute top-right positioning (the z-index: 4 above
   keeps the pill above the envelope flap at z-index: 3). The earlier
   static-positioning override dropped the pill into the flex column flow
   and made it land on top of the envelope — worse than the corner. *//* Small "+ PRO" pill in the publish dropdown row, next to "Invitación
   digital". Free users only — paying users have nothing to upgrade. Sized
   smaller than the modal pill because the row context is dense and the
   pill should sit calmly beside the label, not compete with the toggle. */.publish-options-menu-item-pro-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;margin-left:6px;font-size:0.625rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg, #FF6B35 0%, #FFA044 100%);border-radius:999px;white-space:nowrap}.publish-options-menu-item-pro-badge svg{flex-shrink:0}/* Quiet "Saber más" link in the confirm modal. Secondary-text color so it
   doesn't compete with the Convertir CTA; underlined on hover only. */.invitation-learnmore{display:inline-block;margin:0 0 14px;font-size:13px;color:var(--secondary-text, #64748b);text-decoration:none;transition:color 120ms ease}.invitation-learnmore:hover,.invitation-learnmore:focus-visible{color:var(--primary-text, #111827);text-decoration:underline}/* "Más popular" pill, styled to match .page-type-tile__popular-badge from
   pages.css so the social-proof signal in the confirm modal feels like a
   continuation of the picker the user already saw. */.invitation-popular-badge{position:absolute;top:0;left:24px;transform:translateY(-50%);padding:5px 12px;border-radius:999px;background:#111827;color:#fff;font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;box-shadow:0 4px 12px rgba(17, 24, 39, 0.18);white-space:nowrap;z-index:2}/* ──────────────────────────────────────────────────────────────────
   Invitation art (auto-playing envelope animation).
   Used inside the website→invitation confirm modal as a hero visual.
   Shares its inner markup with the page-type picker tile via the
   includes/invitation-art.php partial; styles here are scoped to
   `.invitation-art--auto` so they don't clash with the picker's
   hover-driven version in pages.css.
   ────────────────────────────────────────────────────────────────── */.invitation-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:130px;margin-bottom:18px;overflow:visible}.invitation-art .ptile-envelope{position:relative;width:150px;height:106px}.invitation-art .ptile-envelope__back,.invitation-art .ptile-envelope__front,.invitation-art .ptile-envelope__flap,.invitation-art .ptile-envelope__card{position:absolute;left:0;width:100%}.invitation-art .ptile-envelope__back{top:0;height:100%;background:#f5b89a;border-radius:6px}.invitation-art .ptile-envelope__card{top:8px;left:8px;right:8px;width:auto;height:88px;background:#fff;border-radius:5px;box-shadow:0 2px 6px rgba(0,0,0,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:1}.invitation-art .ptile-heart{color:#ff6b35;display:flex}.invitation-art .ptile-heart svg{width:20px;height:20px}.invitation-art .ptile-card-line{height:3px;background:#FFE8DD;border-radius:2px}.invitation-art .ptile-card-line--lg{width:56%}.invitation-art .ptile-card-line--sm{width:38%}.invitation-art .ptile-envelope__front{bottom:0;height:100%;background:linear-gradient(180deg, #ff8859, #f5713e);border-radius:6px;z-index:2}.invitation-art .ptile-envelope__front::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, transparent 49%, rgba(0,0,0,.08) 50%, transparent 51%);border-radius:inherit}.invitation-art .ptile-envelope__flap{top:0;height:60%;background:#ff9b6f;clip-path:polygon(0 0, 100% 0, 50% 100%);transform-origin:top center;z-index:3}.invitation-art .ptile-sparkle{position:absolute;width:18px;height:18px;background:#ff6b35;border-radius:0;clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);opacity:0;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255, 107, 53, .7))}.invitation-art .ptile-sparkle--1{top:16%;left:14%;width:16px;height:16px;background:#ffb88c}.invitation-art .ptile-sparkle--2{top:8%;right:16%;width:13px;height:13px;background:#ffd4c0}.invitation-art .ptile-sparkle--3{bottom:18%;left:12%;width:12px;height:12px;background:#ff6b35}.invitation-art .ptile-sparkle--4{bottom:10%;right:14%;width:18px;height:18px;background:#ffa477}/* Auto-play variant: same opening animation as the picker tile's :hover state,
   but driven by animations on a loop so the modal hero plays without input. */.invitation-art--auto .ptile-envelope__flap{animation:invitation-art-flap 4.2s cubic-bezier(.4,0,.2,1) .25s infinite}.invitation-art--auto .ptile-envelope__front{animation:invitation-art-front 4.2s cubic-bezier(.4,0,.2,1) .25s infinite}.invitation-art--auto .ptile-envelope__card{animation:invitation-art-card 4.2s cubic-bezier(.34,1.56,.64,1) .4s infinite}.invitation-art--auto .ptile-heart{animation:invitation-art-heart 4.2s ease .6s infinite}.invitation-art--auto .ptile-sparkle{animation:invitation-art-sparkle 4.2s ease-in-out infinite}.invitation-art--auto .ptile-sparkle--1{animation-delay:.8s}.invitation-art--auto .ptile-sparkle--2{animation-delay:1.4s}.invitation-art--auto .ptile-sparkle--3{animation-delay:2.0s}.invitation-art--auto .ptile-sparkle--4{animation-delay:2.6s}@keyframes invitation-art-flap{0%,15%{transform:rotateX(0deg)}35%,75%{transform:rotateX(180deg)}92%,100%{transform:rotateX(0deg)}}@keyframes invitation-art-front{0%,15%{height:100%;border-radius:6px}35%,75%{height:58%;border-radius:0 0 6px 6px}92%,100%{height:100%;border-radius:6px}}@keyframes invitation-art-card{0%,25%{transform:translateY(0)}45%,70%{transform:translateY(-22px)}92%,100%{transform:translateY(0)}}@keyframes invitation-art-heart{0%,30%{transform:scale(.7)}50%,70%{transform:scale(1)}92%,100%{transform:scale(.7)}}@keyframes invitation-art-sparkle{0%,100%{opacity:0;transform:translateY(0) scale(.4) rotate(0deg)}20%{opacity:1;transform:translateY(-8px) scale(1.1) rotate(45deg)}50%{opacity:.85;transform:translateY(-18px) scale(1) rotate(90deg)}80%{opacity:0;transform:translateY(-28px) scale(.4) rotate(135deg)}}@media (prefers-reduced-motion: reduce){.invitation-art--auto .ptile-envelope__flap,.invitation-art--auto .ptile-envelope__front,.invitation-art--auto .ptile-envelope__card,.invitation-art--auto .ptile-heart,.invitation-art--auto .ptile-sparkle{animation:none !important}.invitation-art--auto .ptile-envelope__flap{transform:rotateX(180deg)}.invitation-art--auto .ptile-envelope__front{height:58%;border-radius:0 0 6px 6px}.invitation-art--auto .ptile-envelope__card{transform:translateY(-22px)}.invitation-art--auto .ptile-heart{transform:scale(1)}.invitation-art--auto .ptile-sparkle{display:none}}/* ── End Announcements ── */