/* Night mode for the public pages. html.night is set before the page paints (inline script in
   each page's head) and toggled by assets/night.js. Each page marks its themed area with .pm-night;
   anything inside .keep-day (sample websites, popup previews, template thumbnails) stays as designed.
   Generated by scripts/build-night-css.py — edit there, not here. */
/* Only while a .pm-night area is on screen: on the homepage, signing in hides the landing page and
   the app below keeps its own look. */
html.night:has(.pm-night:not(.hidden)) { color-scheme: dark; background: #07060d; }
html.night:has(.pm-night:not(.hidden)) body, html.night .pm-night { background-color: transparent !important; color: #ecebf5; }
html.night .pm-night input:not(.keep-day *), html.night .pm-night textarea:not(.keep-day *), html.night .pm-night select:not(.keep-day *) { color: #f1f0fa; }
html.night .pm-night ::placeholder { color: #7f7c98; }
html.night .pm-night input:not([type=checkbox], [type=radio], [type=range], [type=color], .keep-day *, .pm-no-theme *), html.night .pm-night select:not(.keep-day *, .pm-no-theme *), html.night .pm-night textarea:not(.keep-day *, .pm-no-theme *) { background-color: #1a1926; }

/* The sky: tiny stars in three layers, a soft glow, and a shooting star when night falls. */
.pm-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
html.night:has(.pm-night:not(.hidden)) .pm-sky { opacity: 1; }
.pm-sky i { position: absolute; inset: 0; background-repeat: repeat; }
.pm-sky .s1 { background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.6), transparent 60%), radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,.38), transparent 60%), radial-gradient(1.5px 1.5px at 70px 160px, rgba(199,210,254,.55), transparent 60%), radial-gradient(1px 1px at 190px 120px, rgba(255,255,255,.32), transparent 60%); background-size: 220px 200px; }
.pm-sky .s2 { background-image: radial-gradient(1px 1px at 50px 60px, rgba(255,255,255,.45), transparent 60%), radial-gradient(1.5px 1.5px at 250px 210px, rgba(253,230,255,.5), transparent 60%); background-size: 330px 290px; animation: pm-drift 140s linear infinite; }
.pm-sky .s3 { background-image: radial-gradient(2px 2px at 120px 90px, rgba(255,255,255,.85), transparent 60%), radial-gradient(2px 2px at 420px 330px, rgba(199,210,254,.8), transparent 60%); background-size: 520px 460px; animation: pm-twinkle 4s ease-in-out infinite; }
.pm-sky .glow { background: radial-gradient(60rem 30rem at 50% -8rem, rgba(99,102,241,.3), transparent 70%), radial-gradient(40rem 30rem at 100% 45%, rgba(168,85,247,.1), transparent 70%), radial-gradient(40rem 30rem at 0% 80%, rgba(79,70,229,.1), transparent 70%); }
.pm-sky .shoot { inset: auto; top: 12%; left: 70%; width: 140px; height: 1.5px; background: linear-gradient(90deg, rgba(255,255,255,.95), transparent); transform: rotate(-24deg); opacity: 0; border-radius: 2px; }
html.night.night-falling .pm-sky .shoot { animation: pm-shoot 1.4s ease-out .5s 1 both; }
html.night.night-falling .pm-sky .s1, html.night.night-falling .pm-sky .s3 { animation: pm-appear 1.6s ease both; }
@keyframes pm-drift { to { background-position: 330px 290px, 330px 290px; } }
@keyframes pm-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pm-appear { from { opacity: 0; } }
@keyframes pm-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-24deg); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-420px, 190px) rotate(-24deg); } }

/* The switch: a sun by day, a moon with a few stars by night. */
.pm-night-btn { position: relative; width: 56px; height: 30px; border-radius: 999px; flex: 0 0 auto; cursor: pointer; border: 1px solid #e2e8f0; background: linear-gradient(180deg, #e0f2fe, #eef2ff); transition: background .5s ease, border-color .5s ease; overflow: hidden; }
.pm-night-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.pm-night-btn .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b); box-shadow: 0 0 10px rgba(245,158,11,.6); transition: transform .5s cubic-bezier(.5,1.6,.4,1), background .5s ease, box-shadow .5s ease; }
.pm-night-btn .knob::after { content: ''; position: absolute; top: -2px; left: 8px; width: 18px; height: 18px; border-radius: 50%; background: #1e1b4b; transform: scale(0); transform-origin: 70% 30%; transition: transform .5s ease; }
.pm-night-btn .dot { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .5s ease .15s; }
html.night .pm-night-btn { background: linear-gradient(180deg, #1e1b4b, #0b0a1a); border-color: rgba(255,255,255,.18); }
html.night .pm-night-btn .knob { transform: translateX(26px) rotate(-30deg); background: radial-gradient(circle at 35% 35%, #ffffff, #c7d2fe); box-shadow: 0 0 12px rgba(199,210,254,.75); }
html.night .pm-night-btn .knob::after { transform: scale(1); }
html.night .pm-night-btn .dot { opacity: .9; }
@media (max-width: 420px) {
    .pm-night-btn { width: 44px; height: 26px; }
    .pm-night-btn .knob { width: 18px; height: 18px; }
    .pm-night-btn .knob::after { width: 15px; height: 15px; left: 6px; }
    html.night .pm-night-btn .knob { transform: translateX(18px) rotate(-30deg); }
}

/* Night falls as a circle growing from the switch (browsers with view transitions). */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: pm-reveal .75s cubic-bezier(.4,0,.2,1) both; }
@keyframes pm-reveal { from { clip-path: circle(0 at var(--pm-x, 90%) var(--pm-y, 2rem)); } to { clip-path: circle(150vmax at var(--pm-x, 90%) var(--pm-y, 2rem)); } }

@media (prefers-reduced-motion: reduce) {
    .pm-sky, .pm-sky i, .pm-night-btn, .pm-night-btn * { animation: none !important; transition: none !important; }
    ::view-transition-new(root) { animation: none; }
}

html.night .pm-night .bg-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: #15141f !important; }
html.night .pm-night .bg-white\/85:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .bg-white\/90:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(10,9,20,.72) !important; }
html.night .pm-night .bg-slate-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .bg-slate-50\/60:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(255,255,255,.025) !important; }
html.night .pm-night .bg-slate-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(255,255,255,.07) !important; }
html.night .pm-night .bg-slate-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .bg-slate-300:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(255,255,255,.14) !important; }
html.night:not(:has(body[data-whitelabel-active])) .pm-night .bg-indigo-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .bg-violet-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .bg-sky-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(129,140,248,.14) !important; }
html.night:not(:has(body[data-whitelabel-active])) .pm-night .bg-indigo-50\/40:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(129,140,248,.1) !important; }
html.night:not(:has(body[data-whitelabel-active])) .pm-night .bg-indigo-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .bg-indigo-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(129,140,248,.24) !important; }
html.night .pm-night .bg-green-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .bg-emerald-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .bg-green-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(52,211,153,.14) !important; }
html.night .pm-night .bg-amber-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(251,191,36,.12) !important; }
html.night .pm-night .bg-rose-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(251,113,133,.12) !important; }
html.night .pm-night .hover\:bg-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover,
html.night .pm-night .hover\:bg-slate-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover { background-color: #1d1c29 !important; }
html.night:not(:has(body[data-whitelabel-active])) .pm-night .hover\:bg-indigo-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover { background-color: rgba(129,140,248,.2) !important; }
html.night .pm-night .text-slate-900:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .text-slate-800:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .hover\:text-slate-900:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover { color: #f1f0fa !important; }
html.night .pm-night .text-slate-700:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #dddbea !important; }
html.night .pm-night .text-slate-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .hover\:text-slate-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover { color: #b9b7cc !important; }
html.night .pm-night .text-slate-500:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #9d9ab5 !important; }
html.night .pm-night .text-slate-400:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #7f7c98 !important; }
html.night:not(:has(body[data-whitelabel-active])) .pm-night .text-indigo-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .text-indigo-700:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .text-indigo-500:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .hover\:text-indigo-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover,
html.night:not(:has(body[data-whitelabel-active])) .pm-night .text-violet-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .text-sky-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #a5b4fc !important; }
html.night .pm-night .text-green-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .text-emerald-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #6ee7b7 !important; }
html.night .pm-night .text-amber-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .text-amber-700:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #fcd34d !important; }
html.night .pm-night .text-rose-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .text-red-600:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { color: #fda4af !important; }
html.night .pm-night .border-slate-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { border-color: rgba(255,255,255,.07) !important; }
html.night .pm-night .border-slate-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { border-color: rgba(255,255,255,.1) !important; }
html.night .pm-night .border-slate-300:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .hover\:border-slate-300:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover { border-color: rgba(255,255,255,.18) !important; }
html.night:not(:has(body[data-whitelabel-active])) .pm-night .border-indigo-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night:not(:has(body[data-whitelabel-active])) .pm-night .hover\:border-indigo-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover,
html.night:not(:has(body[data-whitelabel-active])) .pm-night .hover\:border-indigo-300:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *):hover { border-color: rgba(165,180,252,.35) !important; }
html.night .pm-night .shadow-indigo-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .shadow-indigo-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .shadow-indigo-900\/10:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .shadow-slate-900\/20:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { --tw-shadow-color: rgba(0,0,0,.6) !important; --tw-shadow: var(--tw-shadow-colored) !important; }
html.night .pm-night .from-indigo-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .from-amber-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { --tw-gradient-from: transparent var(--tw-gradient-from-position) !important; --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.night .pm-night .via-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html.night .pm-night .to-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .to-rose-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { --tw-gradient-to: transparent var(--tw-gradient-to-position) !important; }
html.night .pm-night .bg-violet-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *),
html.night .pm-night .bg-indigo-200:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { opacity: .18; }
html.night .pm-night header.bg-white.bg-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *), html.night .pm-night nav.bg-white\/85.bg-white\/85:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: rgba(10,9,20,.86) !important; }
html.night .pm-night .fixed.inset-0.bg-slate-100:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *), html.night .pm-night .fixed.inset-0.bg-slate-50:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *), html.night .pm-night .fixed.inset-0.bg-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: #0b0a13 !important; }
html.night #editor-template-list > button { border-color: rgba(255,255,255,.12) !important; }
html.night #editor-template-list > button > div:first-child { color: #dddbea !important; }
html.night .pm-night.pm-night.pm-night { background-color: transparent !important; }
html.night .pm-night footer.bg-white.bg-white:not(.keep-day, .keep-day *, .pm-no-theme, .pm-no-theme *) { background-color: transparent !important; }
html.night body[data-whitelabel-active] { --wl-bg: transparent !important; --wl-surface: #15141f !important; --wl-text: #ecebf5 !important; --wl-header-bg: rgba(10,9,20,.86) !important; --wl-header-text: #f1f0fa !important; --wl-nav-bg: rgba(10,9,20,.6) !important; --wl-nav-text: #dddbea !important; --brand-light: color-mix(in srgb, var(--brand-color) 24%, transparent) !important; --brand-dark: color-mix(in srgb, var(--brand-color) 60%, #fff) !important; }
html.night body[data-whitelabel-active] .pm-night input:not(.pm-no-theme *), html.night body[data-whitelabel-active] .pm-night select:not(.pm-no-theme *), html.night body[data-whitelabel-active] .pm-night textarea:not(.pm-no-theme *) { background-color: rgba(255,255,255,.05) !important; }
html.night .pm-night .pm-social a:hover { color: #fff !important; background-color: #4f46e5 !important; }