.genres-index-page{--genres-green: #1f6657;--genres-green-dark: #174f43;--genres-ink: #20242a;--genres-muted: #66706c;--genres-line: #d8d1c5;--genres-soft: #f8f6f0;--genres-chip: #edf4f0;padding-top:2.75rem}.genres-index-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;margin-bottom:1.35rem;padding:1.5rem 0 1.25rem;border-bottom:1px solid var(--genres-line)}.genres-index-hero__copy{max-width:620px}.genres-index-hero__kicker{margin:0 0 .45rem;color:var(--genres-green);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.genres-index-hero h1{margin:0;color:var(--genres-ink);font-size:clamp(2.45rem,5vw,4.15rem);line-height:.98;font-weight:900;letter-spacing:0}.genres-index-hero p:not(.genres-index-hero__kicker){max-width:600px;margin:1rem 0 0;color:var(--genres-muted);font-size:1.08rem;line-height:1.55;font-weight:600}.genres-index-hero__stats{display:grid;grid-template-columns:repeat(2,minmax(142px,1fr));gap:.75rem}.genres-index-hero__stats div{min-height:78px;padding:.85rem 1rem;border:1px solid var(--genres-line);border-radius:8px;background:#fffdf8}.genres-index-hero__stats strong,.genres-index-hero__stats span{display:block}.genres-index-hero__stats strong{color:var(--genres-green);font-size:1.42rem;line-height:1.1;font-weight:900}.genres-index-hero__stats span{margin-top:.3rem;color:var(--genres-muted);font-size:.86rem;line-height:1.2;font-weight:700}.genres-index-toolbar{display:flex;align-items:center;justify-content:flex-start;gap:1rem;margin-bottom:1.35rem}.genres-index-toolbar__label{color:var(--genres-muted);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.genres-index-toolbar__buttons{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.55rem}.genres-sort-chip,.genres-index-load-more-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:42px;padding:.55rem 1rem;border:1px solid var(--genres-line);border-radius:8px;background:#fffdf8;color:var(--genres-green);font-weight:800;text-decoration:none;line-height:1;box-shadow:none;transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease}.genres-sort-chip i{font-size:.92rem}.genres-sort-chip:hover,.genres-index-load-more-btn:hover{border-color:#1f66576b;background:var(--genres-chip);color:var(--genres-green-dark);transform:translateY(-1px)}.genres-sort-chip.is-active{border-color:#1f665757;background:var(--genres-chip);color:var(--genres-green-dark)}.genres-index-grid{align-items:stretch}.genre-index-card{position:relative;display:flex;flex-direction:column;min-height:178px;height:100%;padding:1rem;border:1px solid var(--genres-line);border-radius:8px;background:#fffdf8;box-shadow:0 12px 26px #20242a0b;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.genre-index-card:hover{border-color:#1f66576b;box-shadow:0 16px 32px #20242a13;transform:translateY(-2px)}.genre-index-card__main{display:grid;grid-template-columns:48px minmax(0,1fr) 28px;gap:.75rem;align-items:start;color:inherit;text-decoration:none}.genre-index-card__letter{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;background:var(--genres-chip);color:var(--genres-green);font-size:1.2rem;font-weight:900}.genre-index-card__copy{display:flex;flex-direction:column;min-width:0;gap:.45rem}.genre-title{color:var(--genres-ink);font-size:1.22rem;line-height:1.18;font-weight:900;overflow-wrap:anywhere}.genre-index-card__books{display:inline-flex;align-items:center;width:fit-content;max-width:100%;min-height:28px;padding:.25rem .55rem;border:1px solid rgba(31,102,87,.18);border-radius:7px;background:var(--genres-chip);color:var(--genres-green);font-size:.82rem;line-height:1;font-weight:800}.genre-index-card__arrow{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:7px;color:var(--genres-green);background:transparent;font-size:1.35rem;transition:background-color .18s ease,transform .18s ease}.genre-index-card:hover .genre-index-card__arrow{background:var(--genres-chip);transform:translate(2px)}.genre-index-card__meta{display:flex;flex-wrap:wrap;gap:.5rem .8rem;margin-top:auto;padding-top:1rem;color:var(--genres-muted);font-size:.84rem;font-weight:700}.genre-index-card__meta span{display:inline-flex;align-items:center;gap:.35rem;min-width:0}.genre-index-card__meta i{color:var(--genres-green);font-size:.98rem}.genre-index-card__follow-form{margin:.75rem 0 0}.genre-index-card__follow{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:38px;padding:.45rem .75rem;border:1px solid rgba(31,102,87,.24);border-radius:8px;background:#fffdf8;color:var(--genres-green);font-weight:800;text-decoration:none;transition:border-color .18s ease,background-color .18s ease,color .18s ease}.genre-index-card__follow:hover,.genre-index-card__follow.is-active{border-color:#1f665761;background:var(--genres-chip);color:var(--genres-green-dark)}.genres-index-load-more-btn{min-width:220px}.genres-index-empty{padding:3.5rem 1rem;border:1px solid var(--genres-line);border-radius:8px;background:#fffdf8;color:var(--genres-muted);text-align:center;font-weight:700}[data-bs-theme=dark] .genres-index-page{--genres-ink: #eef3ef;--genres-muted: #a9b5af;--genres-line: rgba(238, 243, 239, .16);--genres-soft: #12151c;--genres-chip: rgba(31, 102, 87, .18)}[data-bs-theme=dark] .genres-index-hero__stats div,[data-bs-theme=dark] .genres-sort-chip,[data-bs-theme=dark] .genres-index-load-more-btn,[data-bs-theme=dark] .genre-index-card,[data-bs-theme=dark] .genre-index-card__follow,[data-bs-theme=dark] .genres-index-empty{background:#161b22}[data-bs-theme=dark] .genre-index-card{box-shadow:none}@media (max-width: 991.98px){.genres-index-page{padding-top:1.75rem}.genres-index-hero{grid-template-columns:1fr;align-items:start;gap:1rem}.genres-index-hero__stats{width:100%}.genres-index-toolbar{align-items:flex-start;flex-direction:column}.genres-index-toolbar__buttons{justify-content:flex-start}}@media (max-width: 575.98px){.genres-index-hero h1{font-size:2.55rem}.genres-index-hero__stats{grid-template-columns:1fr}.genres-sort-chip{flex:1 1 auto}.genre-index-card{min-height:160px}}

.genres-index-page{--genres-green:#9d2d3d;--genres-green-dark:#7f2938;--genres-ink:#241b1d;--genres-muted:#6f6260;--genres-line:#ead7d3;--genres-soft:#fff8f6;--genres-chip:#fff1f3}.genres-index-hero{padding:1.35rem 0 1.3rem;border-bottom-color:var(--genres-line)}.genres-index-hero__kicker{color:#b63d4d}.genres-index-hero h1{color:#7f2938!important}.genres-index-hero__stats div,.genre-index-card,.genres-index-empty{border-color:var(--genres-line)!important;background:#fffdf8!important}.genres-index-hero__stats div{box-shadow:0 10px 24px rgba(157,45,61,.06)}.genres-index-hero__stats strong{color:#b63d4d}.genres-index-toolbar__label{color:#8a6b68!important}.genres-sort-chip,.genres-index-load-more-btn,.genre-index-card__follow{border-color:rgba(157,45,61,.24)!important;background:#fffdf8!important;color:#7f2938!important}.genres-sort-chip:hover,.genres-index-load-more-btn:hover,.genre-index-card__follow:hover,.genre-index-card__follow:focus{border-color:rgba(157,45,61,.46)!important;background:#fff1f3!important;color:#9d2d3d!important}.genres-sort-chip.is-active,.genre-index-card__follow.is-active{border-color:#b63d4d!important;background:#b63d4d!important;color:#fffdf8!important}.genre-index-card:hover{border-color:rgba(182,61,77,.42)!important;box-shadow:0 16px 32px rgba(157,45,61,.10)!important}.genre-index-card__letter,.genre-index-card__books,.genre-index-card:hover .genre-index-card__arrow{background:#fff1f3!important;color:#8c2d3b!important}.genre-index-card__books{border-color:rgba(157,45,61,.22)!important}.genre-index-card__arrow,.genre-index-card__meta i{color:#9d2d3d!important}[data-bs-theme=dark] .genres-index-page{--genres-ink:#f7eeec;--genres-muted:#d8bebd;--genres-line:rgba(216,104,114,.32);--genres-soft:#171113;--genres-chip:rgba(216,104,114,.18)}[data-bs-theme=dark] .genres-index-hero h1,[data-bs-theme=dark] .genre-title{color:#fff6f2!important}[data-bs-theme=dark] .genres-index-hero__stats div,[data-bs-theme=dark] .genres-sort-chip,[data-bs-theme=dark] .genres-index-load-more-btn,[data-bs-theme=dark] .genre-index-card,[data-bs-theme=dark] .genre-index-card__follow,[data-bs-theme=dark] .genres-index-empty{border-color:rgba(216,104,114,.28)!important;background:rgba(255,250,241,.06)!important;color:#f2c5ca!important}[data-bs-theme=dark] .genres-sort-chip.is-active,[data-bs-theme=dark] .genre-index-card__follow.is-active{background:#b63d4d!important;border-color:#d76872!important;color:#fffdf8!important}

.genres-index-page {
    --genres-green: #b63d4d;
    --genres-green-dark: #7f2938;
    --genres-ink: #241b1d;
    --genres-muted: #706164;
    --genres-line: #ead7d3;
    --genres-soft: #fff8f6;
    --genres-chip: #fff1f3;
}

.genres-index-hero {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1.65rem 1.75rem;
    border: 1px solid rgba(182, 61, 77, 0.22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 241, 243, 0.92), rgba(255, 253, 248, 0.98) 48%, rgba(255, 248, 246, 0.96)),
        #fffdf8;
    box-shadow: 0 18px 46px rgba(127, 41, 56, 0.08);
}

.genres-index-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, #b63d4d, #d76872);
}

.genres-index-hero__kicker,
.genres-index-toolbar__label {
    letter-spacing: 0;
}

.genres-index-hero h1 {
    color: #7f2938 !important;
    text-wrap: balance;
}

.genres-index-hero p:not(.genres-index-hero__kicker) {
    max-width: 760px;
}

.genres-index-hero__stats div {
    position: relative;
    min-height: 104px;
    padding: 1rem 1.05rem;
    border-color: rgba(182, 61, 77, 0.25) !important;
    background: rgba(255, 253, 248, 0.84) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.genres-index-hero__stats i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0.55rem;
    border-radius: 8px;
    background: #fff1f3;
    color: #b63d4d;
    font-size: 1rem;
}

.genres-index-toolbar {
    align-items: stretch;
    padding: 0.7rem;
    border: 1px solid rgba(234, 215, 211, 0.9);
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: 0 12px 30px rgba(127, 41, 56, 0.055);
}

.genres-index-toolbar__label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 0.45rem;
    color: #7f2938 !important;
}

.genres-sort-chip {
    border-color: transparent !important;
    background: #fff7f4 !important;
    color: #7f2938 !important;
}

.genres-sort-chip:hover,
.genres-sort-chip.is-active {
    border-color: #b63d4d !important;
    background: #b63d4d !important;
    color: #fffaf6 !important;
    box-shadow: 0 10px 20px rgba(182, 61, 77, 0.18);
}

.genres-index-grid {
    row-gap: 1.1rem;
}

.genre-index-card {
    overflow: hidden;
    min-height: 196px;
    padding: 1.05rem;
    border-color: rgba(234, 215, 211, 0.95) !important;
    background:
        linear-gradient(180deg, rgba(255, 241, 243, 0.46), rgba(255, 253, 248, 0) 68%),
        #fffdf8 !important;
    box-shadow: 0 14px 34px rgba(127, 41, 56, 0.06);
}

.genre-index-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #b63d4d, #d76872);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.genre-index-card:hover::before {
    opacity: 1;
}

.genre-index-card:hover {
    border-color: rgba(182, 61, 77, 0.38) !important;
    box-shadow: 0 20px 42px rgba(127, 41, 56, 0.1) !important;
}

.genre-index-card__main {
    grid-template-columns: 52px minmax(0, 1fr) 32px;
    gap: 0.85rem;
}

.genre-index-card__letter {
    width: 52px;
    height: 52px;
    border: 1px solid rgba(182, 61, 77, 0.18);
    background: #fff1f3 !important;
    color: #7f2938 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.genre-title {
    color: #241b1d;
    font-size: 1.18rem;
}

.genre-index-card__books {
    border-color: rgba(182, 61, 77, 0.16) !important;
    background: #fff1f3 !important;
    color: #7f2938 !important;
}

.genre-index-card__arrow {
    width: 32px;
    height: 32px;
    background: #fff8f6;
    color: #b63d4d !important;
}

.genre-index-card:hover .genre-index-card__arrow {
    background: #b63d4d !important;
    color: #fffaf6 !important;
}

.genre-index-card__meta {
    color: #706164;
}

.genre-index-card__meta span {
    min-height: 28px;
    padding: 0.2rem 0.5rem;
    border-radius: 7px;
    background: rgba(255, 241, 243, 0.64);
}

.genre-index-card__meta i {
    color: #b63d4d !important;
}

.genre-index-card__follow {
    min-height: 40px;
    border-color: rgba(182, 61, 77, 0.24) !important;
    background: #fffdf8 !important;
    color: #7f2938 !important;
}

.genre-index-card__follow:hover,
.genre-index-card__follow.is-active {
    border-color: #b63d4d !important;
    background: #b63d4d !important;
    color: #fffaf6 !important;
}

.genres-index-load-more-btn {
    min-width: min(100%, 360px);
    border-color: rgba(182, 61, 77, 0.28) !important;
    background: #fff1f3 !important;
    color: #7f2938 !important;
}

.genres-index-load-more-btn:hover {
    border-color: #9d2d3d !important;
    background: #9d2d3d !important;
    color: #fffaf6 !important;
}

.genres-bottom-section {
    width: 100%;
    margin-top: 3rem;
    padding: 3rem 0;
    border-top: 1px solid rgba(234, 215, 211, 0.95);
    background: #fffdf8;
}

.genres-bottom-section__text {
    color: #706164;
    font-size: 1rem;
    line-height: 1.7;
}

.genres-bottom-section__text a {
    color: #9d2d3d;
    font-weight: 800;
}

[data-bs-theme="dark"] .genres-index-hero,
[data-bs-theme="dark"] .genres-index-toolbar,
[data-bs-theme="dark"] .genre-index-card,
[data-bs-theme="dark"] .genres-bottom-section {
    background: #241b1d !important;
}

[data-bs-theme="dark"] .genres-bottom-section__text {
    color: #dec7c1;
}

@media (max-width: 991.98px) {
    .genres-index-hero {
        padding: 1.4rem;
    }
}

@media (max-width: 575.98px) {
    .genres-index-hero {
        padding: 1.15rem;
    }

    .genres-index-toolbar {
        padding: 0.6rem;
    }

    .genre-index-card {
        min-height: 176px;
    }

    .genre-index-card__main {
        grid-template-columns: 46px minmax(0, 1fr) 30px;
    }

    .genre-index-card__letter {
        width: 46px;
        height: 46px;
    }
}