:root {
    --brand-pink: #FF6F6F;
    --brand-pink-dark: #A64747;
    --text: #222;
    --muted: #6c757d;
    --bg: #fff;
    --card: #fff;
    --border: #e9ecef;
}

html.theme-dark {
    --text: #e8e8e8;
    --muted: #a9b1bc;
    --bg: #0f1115;
    --card: #161a22;
    --border: #202633;
    --brand-pink: #ff7e7e;
    --brand-pink-dark: #ff5d5d;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: linear-gradient(270deg, #fff4f4, #ffeaea, #fffdfd);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

.navbar {
    background: var(--card) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06)
}

.navbar-brand img {
    height: 36px;
    width: auto;
    margin-right: .5rem
}

.nav-link.active {
    color: var(--brand-pink-dark) !important
}

.section-title {
    color: var(--brand-pink-dark);
    font-weight: 700
}

.lead {
    color: var(--muted)
}

.card-like {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem
}

.btn-brand {
    background: var(--brand-pink);
    border-color: var(--brand-pink);
    color: #fff
}

.btn-brand:hover {
    background: var(--brand-pink-dark);
    border-color: var(--brand-pink-dark)
}

.controls {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.more {
    display: none;
    margin-top: .5rem;
    color: var(--muted)
}

.rating {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: .25rem 0
}

.rating button {
    width: 26px;
    height: 26px;
    line-height: 26px;
    border: 0;
    background: transparent;
    color: #d0d4da;
    cursor: pointer;
    font-size: 22px;
    padding: 0;
    transition: transform .15s, color .15s
}

.rating button.active,
.rating button:hover {
    color: #ffc107;
    transform: translateY(-1px)
}

.rating-out {
    color: var(--muted)
}

.toast-mini {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    background: #222;
    color: #fff;
    padding: .6rem .9rem;
    border-radius: .6rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    z-index: 60
}

html.theme-dark .toast-mini {
    background: #0b0d12
}

footer {
    background: #f8f9fa;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
    padding: 1.2rem 0;
    color: var(--muted)
}