: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);/* Brand orange (editor redesign — primary CTA + active states) */--brand-orange:#ff6b35;--brand-orange-hover:#ec5a26;--brand-orange-ink:#c2410c;--brand-orange-soft:#fff1ea;--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}/* ============================================================================ LEFT TOOL RAIL (Phase 1 editor redesign) Vertical rail holding appearance/insert tools (Theme, Fonts, Templates). Lives inside .editor-layout so its position:fixed is relative to the transformed layout (top:0 == just below the 65px top bar), matching the flyout panels. Brand-orange active state. ========================================================================== */.editor-layout{--rail-w:72px;/* Aliases to the root brand tokens (kept for local readability) */--accent-orange:var(--brand-orange);--accent-orange-ink:var(--brand-orange-ink);--accent-orange-soft:var(--brand-orange-soft)}.editor-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);background:var(--secondary-bg);border-right:1px solid var(--border-color);z-index:12;/* above flyout panels (z-index 11), below modals/outline */display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px}.editor-rail-group{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}/* Generic rail button (Fonts, Templates) */.editor-rail-btn{width:60px;height:auto;padding:8px 4px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;border:none;background:transparent;border-radius:12px;color:var(--secondary-text);cursor:pointer;transition:background 0.15s ease,color 0.15s ease,box-shadow 0.15s ease;flex-shrink:0}.editor-rail-btn:hover:not(:disabled){background:var(--accent-bg);color:var(--primary-text)}.editor-rail-btn:disabled{opacity:0.4;cursor:not-allowed}.editor-rail-btn.active{background:var(--accent-orange-soft);color:var(--accent-orange-ink)}.editor-rail-btn i,.editor-rail-btn svg{width:20px;height:20px}/* Caption under each rail icon (Canva-style icon-over-label tile). Shown on desktop too; app-mobile.css restyles it for the bottom pill. */.editor-rail-label{display:block;font-size:10px;line-height:1;font-weight:500;letter-spacing:-0.1px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;color:inherit;-webkit-user-select:none;user-select:none}/* Endcap is a mobile-only scroll spacer (see app-mobile.css). */.editor-rail-endcap{display:none}/* The inner scroll wrapper only matters on mobile (it's the horizontal scroller). On the desktop vertical rail it must be invisible to layout so the groups/divider lay out directly in the rail column as before. */.editor-rail-scroll{display:contents}/* Theme button reuses #topbar-theme-btn / .topbar-theme-btn (swatch preview). Override the old top-bar sizing/background/border/ring for the rail context — in the rail it must behave like every other rail button. */.editor-rail .topbar-theme-btn,.editor-rail .topbar-theme-btn:hover:not(:disabled),.editor-rail .topbar-theme-btn.active{border:none;box-shadow:none}.editor-rail .topbar-theme-btn{background:transparent;width:60px;height:auto;margin:0;padding:8px 4px;border-radius:12px}/* Re-assert the shared tile hover/active colors lost to the override above (mobile keeps this whole-tile look; the desktop media block further down flattens it in favor of the swatch pill). */.editor-rail .topbar-theme-btn:hover:not(:disabled){background:var(--accent-bg)}.editor-rail .topbar-theme-btn.active{background:var(--accent-orange-soft)}.editor-rail .topbar-theme-preview{min-width:0;width:28px;height:20px;border:1px solid var(--border-color);border-radius:6px}/* Active tile background comes from the shared .editor-rail-btn.active rule (the button carries both classes); just accent the swatch. */.editor-rail .topbar-theme-btn.active .topbar-theme-preview{border-color:var(--accent-orange)}/* Template button reuses #change-template-btn; strip its old top-bar margins. */.editor-rail .change-template-btn{width:60px;height:auto;margin:0;padding:8px 4px;gap:4px;border-radius:12px;color:var(--secondary-text);justify-content:center}.editor-rail .change-template-btn:hover{background:var(--accent-bg);color:var(--primary-text)}/* Offset the canvas so it starts to the right of the rail. main-area is a 100vw fixed-position-like block translated/sized off the rail width (mirrors the legacy sidebar pattern). */.editor-layout:not(.fullscreen) .main-area{width:calc(100vw - var(--rail-w));max-width:calc(100vw - var(--rail-w));transform:translateX(var(--rail-w));/* Padded canvas (mockup look): gray gutter around a floating device card. border-box so the padding stays inside the width (no horizontal overflow). */box-sizing:border-box;background:#eceae7;padding:22px}/* The preview becomes a rounded, elevated card sitting in the gutter. The desktop branch of setViewport() applies the same radius/shadow inline so the look persists after switching device modes. */.editor-layout:not(.fullscreen) #preview-iframe{border-radius:14px;box-shadow:0 10px 30px rgba(16, 18, 28, 0.10),0 2px 8px rgba(16, 18, 28, 0.06);background:#fff}body.dark-mode .editor-layout:not(.fullscreen) .main-area{background:#11151c}/* Flyout panels (#theme-panel, #fonts-panel share .theme-panel) sit to the right of the rail; closed transform must clear the rail too. Higher specificity than the base .theme-panel rule so this wins regardless of source order. */.editor-layout .theme-panel{left:var(--rail-w);transform:translateX(calc(-100% - var(--rail-w)))}.editor-layout .theme-panel.show{transform:translateX(0)}/* Invitation view tabs clear the rail. Scoped to ≥1141px so the responsive centered layout in editor-invitation.css (a max-width:1140px rule) still wins on laptops/tablets — otherwise this higher-specificity rule would shove the centered Sobre/Web row to the right. */@media (min-width: 1141px){.editor-layout:not(.fullscreen) .invitation-view-tabs{left:calc(18px + var(--rail-w))}}/* Hide the rail (and drop the offset) in fullscreen / read-only preview. */body.fullscreen .editor-layout,body[data-preview-only="1"] .editor-layout,.editor-layout.fullscreen{--rail-w:0px}body.fullscreen .editor-rail,body[data-preview-only="1"] .editor-rail,.editor-layout.fullscreen .editor-rail{display:none}/* During onboarding keep the rail visible (so the account menu stays reachable) but hide the page/style tools — there's no template to style yet. */body.onboarding-visible .editor-rail-style,body.onboarding-visible .editor-rail-tools,body.onboarding-visible .editor-rail-divider{display:none}/* ── Rail groups, dividers, account block ─────────────────────────────────── */.editor-rail-divider{width:26px;height:1px;background:var(--border-color);flex-shrink:0}/* Account block (#editor-account): pinned to the bottom of the desktop rail. On mobile JS relocates the same node into the top bar, where these `.editor-rail` -scoped rules no longer apply (it falls back to the base .user-info styles). */.editor-rail .editor-rail-account{width:100%;margin-top:auto;/* push to the bottom of the rail column *//* .user-info is a plain block; without flex the 44px bell sat left-aligned once the rail grew past 60px. Center the stack explicitly. */display:flex;flex-direction:column;align-items:center}/* User menu inside the rail: avatar only (hide the name + pro badge), opens up. */.editor-rail .user-info #server-user-display{padding:4px;justify-content:center}.editor-rail .user-info [data-role="user-name"],.editor-rail .user-info .pro-badge{display:none}/* Desktop only: open the account menu upward from the bottom-left. On mobile the same element is a `.mobile-bottom-sheet` (handled in its own CSS). */@media (min-width: 769px){.editor-rail .user-info .user-dropdown{top:auto;bottom:calc(100% + 0.5rem);left:0;right:auto}}.editor-rail .user-status{flex-direction:column;gap:2px;text-align:center}.editor-rail .user-status .text-sm{font-size:9px}/* Announcements bell in the rail account group: rail-sized button, bigger icon (overrides the inline 12px), badge intact, dropdown opens upward (desktop). */.editor-rail .announcements-bell-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;border-radius:12px;color:var(--secondary-text)}.editor-rail .announcements-bell-btn:hover{background:var(--accent-bg);color:var(--primary-text)}.editor-rail .announcements-bell-btn svg{width:20px !important;height:20px !important}@media (min-width: 769px){.editor-rail .announcements-dropdown{top:auto;bottom:calc(100% + 0.5rem);left:0;right:auto}}/* Guests trigger reuses .topbar-guests-btn — normalize to the rail tile size. */.editor-rail .topbar-guests-btn{width:60px;height:auto;min-width:0;padding:8px 4px;border-radius:12px;color:var(--secondary-text)}.editor-rail .topbar-guests-btn:hover{background:var(--accent-bg);color:var(--primary-text)}/* Guests popover flies out to the right of the rail instead of dropping down. */.editor-rail-popwrap{position:relative;display:flex}.editor-rail .guests-options-menu{top:0;left:calc(100% + 10px);right:auto;transform:translateX(-4px)}.editor-rail .guests-options-menu.open{transform:translateX(0)}/* Desktop rail: Canva/Revolut-style hover — the pill wraps only the icon (or the theme swatch), the label below stays outside it. The icon "pill" is the icon element itself inflated with content-box padding (no extra markup). Mobile (≤768px) keeps the whole-tile background from the rules above, which also covers the image-mode buttons whose "icon" is a text span. */@media (min-width: 769px){.editor-rail-btn:hover:not(:disabled),.editor-rail-btn.active,.editor-rail .change-template-btn:hover,.editor-rail .topbar-guests-btn:hover,.editor-rail .topbar-theme-btn:hover:not(:disabled),.editor-rail .topbar-theme-btn.active{background:transparent}/* Vertical rhythm copied from Revolut Business's rail (72px wide, items flush): item = 6px pad + 36px pill + 2px gap + 14px label + 6px pad = 64px tall, no gap between items. */.editor-rail,.editor-rail-group{gap:0}.editor-rail-btn,.editor-rail .topbar-theme-btn,.editor-rail .change-template-btn,.editor-rail .topbar-guests-btn{width:100%;/* full 72px rail width, like Revolut's items */padding:6px 2px;gap:2px}.editor-rail-popwrap{width:100%/* so the full-width guests button has room */}.editor-rail-label{font-size:11px;line-height:14px}.editor-rail-btn > i,.editor-rail-btn > svg,.editor-rail-btn > .topbar-theme-preview{box-sizing:content-box;border-radius:12px;transition:background 0.15s ease}/* Square pill (Revolut's recipe): 20px icon + 8px padding = 36x36. */.editor-rail-btn > i,.editor-rail-btn > svg{padding:8px}/* Swatch is 28x20 + 1px border — pad to the same 36x36 pill. */.editor-rail-btn > .topbar-theme-preview{padding:7px 3px}.editor-rail-btn:hover:not(:disabled) > i,.editor-rail-btn:hover:not(:disabled) > svg,.editor-rail-btn:hover:not(:disabled) > .topbar-theme-preview{background:var(--accent-bg)}.editor-rail-btn.active > i,.editor-rail-btn.active > svg,.editor-rail-btn.active > .topbar-theme-preview{background:var(--accent-orange-soft)}}/* Layout / section-outline sidebar: dock to the LEFT (right of the rail) and hide its built-in edge toggle — the rail Layout button controls it now. */.section-outline-sidebar{left:var(--rail-w, 60px);right:auto;border-left:none;border-right:1px solid var(--border-color);box-shadow:4px 0 12px rgba(0, 0, 0, 0.08);/* Below the rail (z-index 12) so it slides out from behind it. */z-index:11}.section-outline-sidebar.collapsed{transform:translateX(calc(-100% - var(--rail-w, 60px)))}/* Backdrop sits below the sidebar and below the rail, so opening the outline no longer dims or covers the rail. */.section-outline-overlay{z-index:10}.section-outline-toggle{display:none !important}/* ── 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:clamp(140px, 18vw, 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:#fff;/* Fixed dark ink: the active pill is always white, so this must stay legible in dark mode too (var(--primary-text) is light there). */color:#3d3935;box-shadow:0 1px 2px rgba(16, 18, 28, 0.12),0 1px 1px rgba(16, 18, 28, 0.06)}/* 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-grid .theme-item:hover:first-child .theme-card{transform:none}.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)}/* Pressed feedback — fires on touch (where :hover doesn't) and gives a tactile "push" like Canva's toolbar. */.history-btn:active:not(:disabled){background:var(--accent-bg);color:var(--primary-text);transform:scale(0.92)}.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{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:none;background:transparent;border-radius:0.5rem;cursor:pointer;transition:all 0.2s ease;color:var(--secondary-text)}.preview-fullscreen-btn .preview-btn-label{font-size:13px;font-weight:600}.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)}/* Pressed feedback (see .history-btn:active). */.share-btn:active:not(:disabled),.dark-mode-toggle:active,.preview-fullscreen-btn:active:not(:disabled){background:var(--accent-bg);color:var(--primary-text);transform:scale(0.92)}/* Press feedback on the publish button itself. Scoped to the button (NOT the wrapper) because the publish card is reparented into .publish-dropdown-wrap on desktop — scaling the wrapper would scale the whole open card on any mousedown inside it. */.publish-dropdown-wrap .download-btn:not(:disabled):active{transform:scale(0.95)}.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 brand orange) */.publish-btn:not(:disabled){background:var(--brand-orange) !important;color:#fff !important;box-shadow:0 2px 8px rgba(255, 107, 53, 0.35)}.publish-btn:hover:not(:disabled){background:var(--brand-orange-hover) !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}/* Guests tool trigger (left of Publish; icon-only, shown when the page has a form) */.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-guests-btn:hover{background:var(--accent-bg);color:var(--primary-text)}.topbar-guests-btn svg{flex-shrink:0;stroke:currentColor}/* ── Guests context menu (Guestlist + Seating plan) ───────────────────── One topbar icon (#guests-tools-btn keeps the .topbar-guests-btn base + responsive sizing above) opening a small popover. Mirrors the publish options dropdown; mobile turns it into a sheet (see app-mobile.css). */.guests-dropdown-wrap{position:relative;display:inline-flex;align-items:stretch}/* The trigger is a