/* Demo-only reading surfaces, loaded after the decorative theme styles. */
body {
    --demo-text: #28222d;
    --demo-muted: #57505e;
    --demo-surface: var(--paper, #fffaf1);
    --demo-card: #ffffff;
    --demo-heading: var(--primary, #5b21b6);
    --demo-border: #b5acbd;
}
body:is(.theme-immersive3d,.theme-cinematicdark) {
    --demo-text: #f8f5fc;
    --demo-muted: #d5cede;
    --demo-surface: #120520;
    --demo-card: #261737;
    --demo-heading: var(--accent, #f5c76b);
    --demo-border: #81708e;
}
body.theme-cinematicdark { --demo-surface: #0c0c0c; --demo-card: #222222; }

body .section {
    background-color: var(--demo-surface) !important;
    color: var(--demo-text) !important;
}
body :is(.demo-card,.wish) {
    background: var(--demo-card) !important;
    color: var(--demo-text) !important;
    border-color: var(--demo-border) !important;
}
body .section :is(.section-title,.names,.eyebrow),
body .section .demo-card > i,
body #couple .col-md-1 {
    color: var(--demo-heading) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
}
body .section :is(.opacity-75,.opacity-50) {
    opacity: 1 !important;
    color: var(--demo-muted) !important;
}
body .section :is(.form-control,.form-select) {
    background-color: #ffffff !important;
    color: #28222d !important;
    border: 1px solid #84798e;
}
body .section .form-control::placeholder { color: #62586c; opacity: 1; }
body .section :is(.form-control,.form-select):focus {
    border-color: #6d28d9;
    outline: 3px solid #a78bfa;
    outline-offset: 2px;
}

/* Stable dark panels keep animated scenery from washing out the text. */
body :is(.hero-content,.cover-box) {
    background: #171020ed !important;
    color: #ffffff !important;
    border: 1px solid #b9a8cd !important;
    border-radius: 24px;
    padding: 32px 24px !important;
    margin: 80px 16px;
    max-width: calc(100% - 32px);
    text-shadow: none !important;
}
body :is(.hero-content,.cover-box) .names {
    color: #ffffff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
}
body :is(.hero-content,.cover-box) :is(.date,.eyebrow) { color: #f4dfb7 !important; }
body .countdown div { background: #2c203e; border-color: #9c89ae; color: #ffffff; }
body .topbar { background: none; align-items: center; gap: 12px; }
body .topbar a { background: #20152f; color: #ffffff !important; padding: 10px 14px; border-radius: 999px; }
body .topbar .badge { background: #ffffff !important; color: #28222d !important; }
body .closing { background: var(--primary, #39204f) !important; color: #ffffff !important; }
body .closing :is(.names,.eyebrow,.opacity-75) {
    color: #ffffff !important;
    opacity: 1 !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
}
body :is(.btn-theme,.music) { background: var(--primary, #5b21b6) !important; color: #ffffff !important; }
body .btn-theme:hover { color: #ffffff !important; filter: brightness(.85); }
body .bottom-nav { background: #ffffff !important; border: 1px solid #b5acbd; }
body .bottom-nav a { color: #39204f !important; }
body .demo-auto-scroll { background: #ffffff !important; color: #28222d !important; border-color: #81708e; }
body .demo-auto-scroll button { background: #39204f !important; color: #ffffff !important; }
body .demo-auto-scroll button span { color: #ffffff !important; }
body .demo-auto-scroll select { background: #ffffff !important; color: #28222d !important; border-color: #84798e; }
@media(max-width:575.98px) {
    body :is(.hero-content,.cover-box) { padding: 28px 18px !important; }
}