body {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[x-cloak] { display: none !important; }

.product-purchase-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }

/* Однократная анимация появления кнопки “Поддержать” в шапке:
   плавный выезд справа налево, как будто из‑за шторы рядом с кнопкой аккаунта */
@keyframes donateIntro {
    0% {
        opacity: 0;
        transform-origin: 100% 50%;
        transform: scaleX(0) translateY(-2px);
        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    }
    60% {
        opacity: 1;
        transform-origin: 100% 50%;
        transform: scaleX(1.05) translateY(0);
        box-shadow: 0 16px 32px rgba(16, 185, 129, 0.4);
    }
    100% {
        opacity: 1;
        transform-origin: 100% 50%;
        transform: scaleX(1) translateY(0);
        box-shadow: 0 10px 22px rgba(16, 185, 129, 0.32);
    }
}

/* Анимация "дыхания" для кнопки "Поддержать":
   уменьшается до размера кнопки личного кабинета (36px) и обратно */
@keyframes donateBreathing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.88);
    }
}

.btn-donate-attention {
    animation: donateIntro 550ms cubic-bezier(0.19, 1, 0.22, 1) 420ms 1 both,
               donateBreathing 2.5s ease-in-out 970ms infinite;
    will-change: transform, box-shadow;
    transform-origin: center center;
}

/* Стили для HTML контента (rich text) */
.rich-text {
    line-height: 1.8;
}
.rich-text p {
    margin-top: 0.85rem;
    margin-bottom: 0;
}
.rich-text p:first-child {
    margin-top: 0;
}
.rich-text ul, .rich-text ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    margin-left: 1.5rem;
    padding-left: 0.5rem;
}
.rich-text ul {
    list-style-type: disc;
}
.rich-text ol {
    list-style-type: decimal;
}
.rich-text li {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}
.rich-text h1 { font-size: 1.5rem; }
.rich-text h2 { font-size: 1.25rem; }
.rich-text h3 { font-size: 1.125rem; }
.rich-text h4 { font-size: 1rem; }
.rich-text h5 { font-size: 0.875rem; }
.rich-text h6 { font-size: 0.75rem; }
.rich-text a {
    color: #166b2b;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.rich-text a:hover {
    text-decoration: none;
}
.rich-text strong, .rich-text b {
    font-weight: 700;
}
.rich-text em, .rich-text i {
    font-style: italic;
}
.rich-text br {
    line-height: 1.8;
}
.rich-text blockquote {
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid #cbd5e1;
    color: #64748b;
}
.rich-text code {
    background-color: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'Courier New', monospace;
}
.rich-text pre {
    background-color: #f1f5f9;
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.rich-text pre code {
    background-color: transparent;
    padding: 0;
}
.rich-text hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid #e2e8f0;
}
.rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* HTMX indicator styles (moved from runtime-injected <style>) */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request.htmx-indicator {
    display: inline-flex;
}