/* Extracted from templates/base.html (Phase 3.1). Page-local styles; global rules belong in the design system sheets. */
    /* Shared "Hosted by community" badge */
    .hosted-by-badge {
        display: inline-flex; align-items: center; gap: 0.45rem;
        padding: 0.35rem 0.75rem 0.35rem 0.35rem;
        background: var(--bg-card, #f9fafb); border: 1px solid var(--border, #e5e7eb);
        border-radius: 999px; font-size: 0.8125rem; color: var(--text-body, #374151);
        text-decoration: none; transition: box-shadow 0.15s;
    }
    .hosted-by-badge:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.1); }
    .hosted-by-badge--dark { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); color: #fff; }
    .hosted-by-badge--light { background: rgba(255,255,255,0.85); border-color: rgba(0,0,0,0.08); }
    .hosted-by-logo { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
    .hosted-by-initial { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-muted, #dcfce7); color: var(--accent-dark, #15803d); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
    

        #pwaSplash {
            display: none;
            position: fixed; inset: 0; z-index: 99999;
            background: var(--primary);
            flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem;
            opacity: 1; transition: opacity 0.4s ease-out;
        }
        @media (display-mode: standalone) {
            #pwaSplash { display: flex; }
        }
        #pwaSplash.pwa-splash-hide { opacity: 0; pointer-events: none; }
        .pwa-splash-logo {
            width: 96px; height: auto;
            animation: splashFadeIn 0.5s ease-out;
        }
        .pwa-splash-text {
            color: rgba(255,255,255,0.85); font-size: 1.125rem; font-weight: 600;
            letter-spacing: 0.04em; text-transform: uppercase;
            animation: splashFadeIn 0.6s ease-out 0.15s both;
        }
        @keyframes splashFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }